Task:7199 | Верстка главно страницы

pull/36/head
parent 361b806265
commit 0af3851332
  1. 5
      wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php
  2. 882
      wp-content/themes/cosmopet/static/css/new-front-page.css
  3. 161
      wp-content/themes/cosmopet/static/js/new-front-page.js
  4. 6
      wp-content/themes/cosmopet/templates/_pages/new-front-page.twig
  5. 13
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig
  6. 233
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-food.twig
  7. 0
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients
  8. 118
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-media.twig
  9. 18
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-reviews.twig
  10. 0
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists
  11. 45
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists.twig
  12. 253
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-treats.twig

@ -11,8 +11,10 @@ if (!class_exists('Timber')) {
function theme_enqueue_scripts() { function theme_enqueue_scripts() {
wp_enqueue_style('gp-front-page-materialize-css', get_template_directory_uri() . '/static/css/libs/materialize.min.css'); wp_enqueue_style('gp-front-page-materialize-css', get_template_directory_uri() . '/static/css/libs/materialize.min.css');
// wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/front-page.css');
wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/new-front-page.css'); wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/new-front-page.css');
wp_enqueue_script('gp-front-page-materialize', get_template_directory_uri() . '/static/js/libs/materialize.min.js', array(), null, true); wp_enqueue_script('gp-front-page-materialize', get_template_directory_uri() . '/static/js/libs/materialize.min.js', array(), null, true);
// wp_enqueue_script( 'gp-front-page-main', get_template_directory_uri() . '/static/js/front-page.js', array(), null, true );
wp_enqueue_script('gp-front-page-main', get_template_directory_uri() . '/static/js/new-front-page.js', array(), null, true); wp_enqueue_script('gp-front-page-main', get_template_directory_uri() . '/static/js/new-front-page.js', array(), null, true);
} }
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
@ -37,6 +39,9 @@ if (function_exists('get_field')) {
// ingredients // ingredients
$context['main_ingredients_title'] = get_field('main_ingredients-title'); $context['main_ingredients_title'] = get_field('main_ingredients-title');
$context['main_ingredients_slider'] = get_field('main_ingredients-slider'); $context['main_ingredients_slider'] = get_field('main_ingredients-slider');
// specialists
$context['main_specialists_title'] = get_field('main_specialists-title');
$context['main_specialists_items'] = get_field('main_specialists-items');
} }
try { try {

@ -244,7 +244,7 @@ main {
} }
.main-ingredients .swiper { .main-ingredients .swiper {
width: 100%; width: 100%;
height: 400px; height: 320px;
padding: 0 60px; padding: 0 60px;
position: relative; position: relative;
overflow: visible; overflow: visible;
@ -266,8 +266,8 @@ main {
border-radius: 20px; border-radius: 20px;
padding: 40px 30px; padding: 40px 30px;
text-align: center; text-align: center;
width: 429px; width: 240px;
height: 546px; height: 320px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
@ -349,6 +349,19 @@ main {
.main-ingredients .swiper-button-prev { .main-ingredients .swiper-button-prev {
left: 10px; left: 10px;
} }
.ingredients-swiper .swiper-wrapper {
perspective: 1200px;
}
.ingredients-swiper .swiper-slide {
transition: all 0.5s ease;
transform-origin: center center;
filter: blur(1px);
}
.ingredients-swiper .swiper-slide-active {
filter: none;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.main-ingredients .swiper { .main-ingredients .swiper {
padding: 0 40px; padding: 0 40px;
@ -364,6 +377,869 @@ main {
} }
} }
/* Main Specialists */
.main-specialists {
background: #f2f2f2;
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 0px 0px 60px 60px;
}
.main-specialists .new-container {
position: relative;
}
.main-specialists_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.main-specialists {
padding: 40px 0;
position: relative;
}
.main-specialists_wrapper {
margin-top: 20px;
}
.main-specialists_item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
gap: 40px;
}
.reverse {
flex-direction: column-reverse;
}
.main-specialists_bio {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
margin-bottom: 15px;
padding: 8px;
border-radius: 40px;
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
}
.main-specialists_bio-image img {
width: 110px;
height: 125px;
border-radius: 32px;
object-fit: cover;
max-width: none;
}
.main-specialists_bio-info {
text-align: left;
}
.main-specialists_bio-name {
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #fff;
}
.main-specialists_bio-position {
font-weight: 500;
font-size: 14px;
color: #fff;
}
.main-specialists_text {
border-radius: 25px;
padding: 16px;
width: 348px;
background: #fff;
font-weight: 500;
font-size: 20px;
color: #121212;
position: relative;
}
.main-specialists_text svg {
position: absolute;
top: -25px;
left: 1%;
}
.reverse .main-specialists_text svg {
position: absolute;
bottom: -25px;
left: 5%;
top: unset;
transform: rotate(180deg) scaleX(-1); /* Зеркальное отражение по горизонтали */
}
.main-specialists .swiper-button-next,
.main-specialists .swiper-button-prev {
color: #333;
border: 1px solid #121212;
border-radius: 20px;
padding: 16px;
width: 56px;
height: 56px;
}
.main-specialists .swiper-button-next::after,
.main-specialists .swiper-button-prev::after {
content: none;
}
.main-specialists .swiper-pagination {
display: none;
}
.main-specialists .swiper-pagination-bullet {
background: #333;
display: none;
}
.main-specialists_arrows {
position: absolute;
right: 10%;
top: 10%;
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
}
.swiper-button-next{
right: var(--swiper-navigation-sides-offset, -70px)!important;
left: auto;
}
.swiper-button-prev{
left: var(--swiper-navigation-sides-offset, -70px)!important;
right: auto;
}
@media (max-width: 767px) {
.main-specialists_item {
padding: 15px;
}
.main-specialists_bio-image img {
width: 60px;
height: 60px;
}
.main-specialists_bio-name {
font-size: 16px;
}
.main-specialists_bio-position {
font-size: 12px;
}
}
/* Main Food */
.main-food {
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 0px 0px 60px 60px;
}
.main-food_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #f4f1f0;
margin-bottom: 20px;
}
.main-food_wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.main-food_products {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.main-food_products-card {
border-radius: 30px;
padding: 8px;
width: 265px;
height: 500px;
min-width: 194px;
}
.main-food_products .even {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #c8f0ff;
}
.main-food_products .odd {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #ffe9e9;
}
.main-food_products-card-img {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
.shadow-svg {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-65%);
width: 80%;
height: auto;
z-index: 0;
pointer-events: none;
}
.main-food_products-card-img img {
position: relative;
z-index: 1;
display: block;
max-width: 80%;
height: auto;
}
.even .main-food_products-card-title {
padding: 8px 16px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #48c1ed;
}
.odd .main-food_products-card-title {
padding: 8px 8px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #cd0003;
}
.main-food_products-card-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 10px;
}
.even .main-food_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-food_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #cd0003;
display: flex;
justify-content: center;
align-items: center;
}
.even .main-food_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #48c1ed;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-food_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #cd0003;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-food_reviews {
max-width: 400px;
}
.main-food_reviews {
border-radius: 40px;
padding: 24px;
max-width: 395px;
height: 772px;
position: relative;
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12);
background: #fff;
}
.main-food_reviews-title {
font-weight: 400;
font-size: 32px;
text-transform: uppercase;
color: #121212;
}
.main-food_reviews-slider {
position: relative;
}
.main-food_reviews-slide {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: 650px;
}
.main-food_reviews-slide-img {
border: 2px solid #fff;
border-radius: 32px;
object-fit: cover;
margin-bottom: 10px;
}
.main-food_reviews-slide-name {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slide-position {
font-weight: 500;
font-size: 14px;
line-height: 140%;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slide-text {
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slider {
position: relative;
height: 97%;
}
.main-food_reviews-slider-index {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 40px;
z-index: 100;
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
}
.main-food_arrows {
position: absolute;
right: 20%;
bottom: 8%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.main-food .swiper-button-next,
.main-food .swiper-button-prev {
color: #333;
border: 1px solid #121212;
border-radius: 20px;
padding: 16px;
width: 56px;
height: 56px;
}
.main-food .swiper-button-next::after,
.main-food .swiper-button-prev::after {
content: none;
}
.main-food .swiper-pagination {
display: none;
}
.main-food .swiper-pagination-bullet {
background: #333;
display: none;
}
.main-food_arrows .swiper-button-next{
right: var(--swiper-navigation-sides-offset, -65px)!important;
left: auto;
}
.main-food_arrows .swiper-button-prev{
left: var(--swiper-navigation-sides-offset, -65px)!important;
right: auto;
}
.main-food_reviews-star {
position: absolute;
top: 0%;
right: 0%;
z-index: 100;
}
.main-food_link {
max-width: 240px;
justify-content: space-between;
padding: 0 8px;
}
@media (max-width: 767px) {
.main-food_reviews-slide {
padding: 15px;
}
.main-food_reviews-slide-img {
width: 80px;
height: 80px;
}
.main-food_reviews-slide-name {
font-size: 16px;
}
.main-food_reviews-slide-text {
font-size: 12px;
}
.main-food_reviews-slider-index {
font-size: 14px;
}
}
/* Main Reviews */
.main-reviews {
box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15);
background: #f4f1f0;
border-radius: 60px;
padding: 100px 20px;
}
.main-reviews_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.marketplace__swiper, .marketplace__swiper .swiper-wrapper {
height: auto;
}
.marketplace__swiper .swiper-slide {
max-width: max-content;
}
.marketplace__title {
color: var(--grey-black, #121212);
font-family: "Craftwork Grotesk";
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 111.111% */
text-transform: uppercase;
}
.marketplace__swiper {
margin-top: 50px;
margin-left: -70px;
margin-right: -70px;
}
.marketplace {
position: relative;
}
.marketplace:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 222px;
height: 671px;
background: linear-gradient(270deg, #F6F4F3 0%, rgba(242, 242, 242, 0.00) 100%);
z-index: 1;
}
/* Main Treats */
.main-treats {
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 0px 0px 60px 60px;
}
.even .main-food_products-card-title {
padding: 8px 16px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #48c1ed;
}
.odd .main-food_products-card-title {
padding: 8px 8px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #cd0003;
}
.main-food_products-card-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 10px;
}
.even .main-treats_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #7e0092;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-treats_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #863300;
display: flex;
justify-content: center;
align-items: center;
}
.even .main-treats_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #deb3ff;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-treats_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #ffbc7b;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-treats_products .even {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #fff1c8;
}
.main-treats_products .odd {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #f2e0ff;
}
.main-treats .main-food_products-card {
border-radius: 30px;
padding: 8px;
width: 265px;
height: 424px;
min-width: 194px;
}
.main-treats .shadow-svg {
position: absolute;
bottom: 0;
left: 40%;
transform: translateX(-65%);
width: 80%;
height: auto;
z-index: 0;
pointer-events: none;
}
.main-treats_reviews-slider-index {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 32px;
z-index: 100;
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
}
.main-food_arrows {
position: absolute;
right: 20%;
bottom: 8%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.main-treats .swiper-button-next,
.main-treats .swiper-button-prev {
color: #333;
border: 1px solid #121212;
border-radius: 20px;
padding: 16px;
width: 56px;
height: 56px;
}
.main-treats .swiper-button-next::after,
.main-treats .swiper-button-prev::after {
content: none;
}
.main-treats .swiper-pagination {
display: none;
}
.main-treats .swiper-pagination-bullet {
background: #333;
display: none;
}
.main-treats_arrows .swiper-button-next{
right: var(--swiper-navigation-sides-offset, -65px)!important;
left: auto;
}
.main-treats_arrows .swiper-button-prev{
left: var(--swiper-navigation-sides-offset, -65px)!important;
right: auto;
}
.main-treats .main-food_reviews {
border-radius: 40px;
padding: 24px;
max-width: 395px;
height: 713px;
position: relative;
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12);
background: #fff;
}
.main-food_reviews-slide-top {
display: flex;
justify-content: flex-start;
gap: 20px;
align-items: center;
width: 100%;
}
.main-food_reviews-slide-top img {
width: 48px;
height: 48px;
border-radius: 100%;
}
/* Main Smi */
.main-smi {
box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15);
background: #f4f1f0;
padding: 100px 20px;
border-radius: 0!important;
}
.smiSlider .slider-arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-47%, -50%);
width: 112%;
display: flex;
justify-content: space-between;
z-index: 40;
pointer-events: none;
}
.smiSlider .slider-arrow{
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' fill='white'/%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' stroke='%23121212'/%3e%3cpath d='M37 28.3633H20.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 34.7272' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 21.9993' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
height: 56px;
width: 56px;
background-size: contain;
pointer-events: all;
}
.smiSlider .slider-arrow[disabled]{
visibility: none;
}
.smiSlider .slider-arrow-prev{
transform: scaleX(-1);
margin-right: 24px;
}
.about_smi {
padding-top: 5%;
padding-bottom: 10%;
border-radius: 0px 0px 60px 60px;
}
.smi-card-wrapper{
border-radius: 60px;
background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%);
border-radius: 60px;
padding: 2px;
width: 100%;
height: 484px;
}
.smiSlider{
margin-top: 3rem;
}
.smi-card{
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 480px;
border-radius: 60px;
position: relative;
overflow: hidden;
padding: 28px 35px;
color: #121212;
}
.smi-card::before{
background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
content: '';
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
}
.smi-card-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.smi-card-date, .smi-card-title, .smi-card-label{
position: relative;
z-index: 2;
}
.smi-card-label{
display: flex;
border: 1px solid #121212;
border-radius: 28px;
padding: 4px 15px;
align-items: center;
font-weight: 500;
font-size: 16px;
gap: 6px;
background-color: #fff;
width: max-content;
}
.smi-card-label p{
margin-bottom: 0;
}
.smi-card-title{
font-weight: 700;
font-size: 22px;
text-transform: uppercase; line-height: 120%;
margin-bottom: 7px;
margin-top: 10px;
}
.smi-card-date{
font-weight: 500;
font-size: 12px;
}
.smiSlider.swiper{
overflow: visible;
}
.about_us{
width: 100%;
overflow: hidden;
}
.smi-card-label img{
max-height: 25px;
width: auto;
}
.smi-card-label{
height: 35px;
}
@media (max-width: 640px) {
.smi-card{
padding: 16px;
height: 420px;
border-radius: 30px;
}
.smi-card-title{
font-size: 18px;
}
.smi-card-wrapper{
height: 424px;
border-radius: 30px;
}
}
/* Main bot */
.main-bot {
background: #f4f1f0;
padding: 100px 20px;
margin-top: -5%;
}
.main-bot_wrapper {
border-radius: 60px;
width: 100%;
height: 100%;
min-height: 450px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 40px;
}
.main-bot_wrapper-bottom {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.main-bot_wrapper-bottom-divider {
width: 176px;
height: 2px;
background: #121212;
gap: 20px;
border-radius: 100%;
}
.main-bot_wrapper-tag {
border-radius: 100px;
padding: 4px 10px 6px 10px;
height: 39px;
background: radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1ea49c 45%, #76ce75 90%, #bbe38d 100%);
font-weight: 400;
font-size: 24px;
color: #fff;
margin-bottom: 20px;
}
.main-bot_wrapper-title {
font-weight: 400;
font-size: 50px;
text-transform: uppercase;
color: #121212;
max-width: 50%;
margin-bottom: 40px;
}
.main-bot_wrapper-link {
border: 2px solid #121212;
border-radius: 100px;
width: 174px;
height: 56px;
padding: 9px 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 70px;
}

@ -10,9 +10,11 @@ document.addEventListener('DOMContentLoaded', function() {
// Ingredients slider // Ingredients slider
const swiper = new Swiper('.ingredients-swiper', { const swiper = new Swiper('.ingredients-swiper', {
slidesPerView: 5, slidesPerView: 5,
spaceBetween: -40,
centeredSlides: true, centeredSlides: true,
centeredSlidesBounds: true, centeredSlidesBounds: true,
loop: true, loop: true,
loopAdditionalSlides: 25, // 🔥 вот он!
autoplay: { autoplay: {
delay: 4000, delay: 4000,
disableOnInteraction: false, disableOnInteraction: false,
@ -39,27 +41,24 @@ document.addEventListener('DOMContentLoaded', function() {
const slides = swiper.slides; const slides = swiper.slides;
slides.forEach((slide) => { slides.forEach((slide) => {
slide.style.opacity = '0.3'; slide.style.opacity = '0.2';
slide.style.transform = 'scale(0.7)'; slide.style.transform = 'translateZ(-200px) scale(0.7)';
slide.style.zIndex = '1'; slide.style.zIndex = '1';
}); });
// Найдём активный слайд по классу
const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active')); const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active'));
if (!activeSlide) return; if (!activeSlide) return;
// Обнулим все const updateSlide = (slide, z, scale, opacity, zIndex) => {
const updateSlide = (slide, scale, opacity, zIndex) => {
if (slide) { if (slide) {
slide.style.transform = `scale(${scale})`; slide.style.transform = `translateZ(${z}px) scale(${scale})`;
slide.style.opacity = opacity; slide.style.opacity = opacity;
slide.style.zIndex = zIndex; slide.style.zIndex = zIndex;
} }
}; };
updateSlide(activeSlide, 1, 1, 10); updateSlide(activeSlide, 0, 1, 1, 10);
// Пройдем от активного — назад и вперёд
const getPrev = (el, n) => { const getPrev = (el, n) => {
let node = el; let node = el;
for (let i = 0; i < n; i++) { for (let i = 0; i < n; i++) {
@ -76,11 +75,149 @@ document.addEventListener('DOMContentLoaded', function() {
return node; return node;
}; };
updateSlide(getPrev(activeSlide, 1), 0.85, 0.6, 6); updateSlide(getPrev(activeSlide, 1), -100, 0.85, 0.5, 6);
updateSlide(getPrev(activeSlide, 2), 0.75, 0.4, 4); updateSlide(getPrev(activeSlide, 2), -200, 0.75, 0.3, 4);
updateSlide(getNext(activeSlide, 1), 0.85, 0.6, 6); updateSlide(getNext(activeSlide, 1), -100, 0.85, 0.5, 6);
updateSlide(getNext(activeSlide, 2), 0.75, 0.4, 4); updateSlide(getNext(activeSlide, 2), -200, 0.75, 0.3, 4);
} }
// Specialists slider
const specialistsSwiper = new Swiper('.main-specialists_wrapper', {
slidesPerView: 3,
spaceBetween: 20,
loop: true,
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
navigation: {
prevEl: '.main-specialists .swiper-button-prev',
nextEl: '.main-specialists .swiper-button-next',
},
pagination: {
el: '.main-specialists .swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 10
},
768: {
slidesPerView: 2,
spaceBetween: 15
},
1024: {
slidesPerView: 3,
spaceBetween: 20
}
}
});
// food slider
const reviewsSwiper = new Swiper('.main-food_reviews-slider', {
slidesPerView: 1,
spaceBetween: 20,
loop: false, // Отключаем loop
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.main-food_reviews .swiper-button-next',
prevEl: '.main-food_reviews .swiper-button-prev',
},
on: {
init: function () {
updatePagination(this);
},
slideChange: function () {
updatePagination(this);
}
}
});
function updatePagination(swiper) {
const currentSlide = swiper.activeIndex + 1; // С 1
const totalSlides = swiper.slides.length;
const indexElement = document.querySelector('.main-food_reviews-slider-index');
if (indexElement) {
indexElement.textContent = `${currentSlide}/${totalSlides}`;
}
}
// reviews slider
let market = new Swiper(".marketplace__swiper ", {
slidesPerView: 'auto',
spaceBetween: 13,
}); });
// treats slider
const treatsSwiper = new Swiper('.main-treats_reviews-slider', {
slidesPerView: 1,
spaceBetween: 20,
loop: false, // Отключаем loop
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.main-food_reviews .swiper-button-next',
prevEl: '.main-food_reviews .swiper-button-prev',
},
on: {
init: function () {
updatePaginationTreats(this);
},
slideChange: function () {
updatePaginationTreats(this);
}
}
});
function updatePaginationTreats(swiper) {
const currentSlideTreats = swiper.activeIndex + 1; // С 1
const totalSlidesTreats = swiper.slides.length;
const indexElementTreats = document.querySelector('.main-treats_reviews-slider-index ');
if (indexElementTreats) {
indexElementTreats.textContent = `${currentSlideTreats}/${totalSlidesTreats}`;
}
}
// smi slider
let smigSlider = new Swiper(".smiSlider", {
slidesPerView: 3.3,
spaceBetween: 40,
navigation: {
nextEl: '.smiSlider-next',
prevEl: '.smiSlider-prev'
},
breakpoints: {
300: {
slidesPerView: 1.3,
spaceBetween: 20,
},
776: {
slidesPerView: 1.3,
spaceBetween: 40,
},
991: {
slidesPerView: 2.4,
spaceBetween: 40,
},
1400: {
slidesPerView: 2.8,
spaceBetween: 40,
},
}
});
});

@ -7,4 +7,10 @@
{% include '/templates/_pages/new-front-page/main-about.twig' %} {% include '/templates/_pages/new-front-page/main-about.twig' %}
{% include '/templates/_pages/new-front-page/main-why.twig' %} {% include '/templates/_pages/new-front-page/main-why.twig' %}
{% include '/templates/_pages/new-front-page/main-ingredients.twig' %} {% include '/templates/_pages/new-front-page/main-ingredients.twig' %}
{% include '/templates/_pages/new-front-page/main-specialists.twig' %}
{% include '/templates/_pages/new-front-page/main-food.twig' %}
{% include '/templates/_pages/new-front-page/main-reviews.twig' %}
{% include '/templates/_pages/new-front-page/main-treats.twig' %}
{% include '/templates/_pages/new-front-page/main-media.twig' %}
{% include '/templates/_pages/new-front-page/main-bot.twig' %}
{% endblock %} {% endblock %}

@ -0,0 +1,13 @@
<section class="main-bot">
<div class="new-container">
<div class="main-bot_wrapper" style="background:url('/wp-content/uploads/2025/07/frame-1321316173.png');background-position: center;">
<div class="main-bot_wrapper-tag">Первый в России</div>
<h2 class="main-bot_wrapper-title">ветеринарный бот с бесплатными вет консультациями</h2>
<a href="#" target="_blank" class="main-bot_wrapper-link">Перейти<img src="/wp-content/uploads/2025/07/group-1000001373-1.png" alt="arrow"></a>
<div class="main-bot_wrapper-bottom">
<div class="main-bot_wrapper-bottom-divider"></div>
<div class="main-bot_wrapper-bottom-divider"></div>
</div>
</div>
</div>
</section>

@ -0,0 +1,233 @@
<div class="main-food">
<div class="new-container">
<h2 class="main-food_title">сухой гипоаллергенный корм</h2>
<div class="main-food_wrapper">
<div class="main-food_products">
<div class="main-food_products-card even">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-fish.png" alt="Рыба, крупные, adult, 15мм, 2кг">
</div>
<div class="main-food_products-card-title">
Рыба, крупные, adult, 15мм, 2кг
</div>
<div class="main-food_products-card-bottom">
<div class="main-food_products-card-bottom-price">1303₽</div>
<button class="main-food_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card odd">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmobaka-2kg-turkey.png" alt="Индейка, крупные, adult, 15мм, 2кг">
</div>
<div class="main-food_products-card-title">
Индейка, крупные, adult, 15мм, 2кг
</div>
<div class="main-food_products-card-bottom">
<div class="main-food_products-card-bottom-price">1303₽</div>
<button class="main-food_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card even">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1.png" alt="Рыба, крупные, adult, 15мм, 2кг">
</div>
<div class="main-food_products-card-title">
Рыба, крупные, adult, 15мм, 2кг
</div>
<div class="main-food_products-card-bottom">
<div class="main-food_products-card-bottom-price">1303₽</div>
<button class="main-food_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card odd">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/cosmodog-2kg-front-1.png" alt="Индейка, крупные, adult, 15мм, 2кг">
</div>
<div class="main-food_products-card-title">
Индейка, крупные, adult, 15мм, 2кг
</div>
<div class="main-food_products-card-bottom">
<div class="main-food_products-card-bottom-price">1303₽</div>
<button class="main-food_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card even">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1-2.png" alt="Рыба, крупные, adult, 15мм, 2кг">
</div>
<div class="main-food_products-card-title">
Рыба, крупные, adult, 15мм, 2кг
</div>
<div class="main-food_products-card-bottom">
<div class="main-food_products-card-bottom-price">1303₽</div>
<button class="main-food_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card odd">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="340" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/group-1000001429-1-3.png" alt="Индейка, крупные, adult, 15мм, 2кг">
</div>
<div class="main-food_products-card-title">
Индейка, крупные, adult, 15мм, 2кг
</div>
<div class="main-food_products-card-bottom">
<div class="main-food_products-card-bottom-price">1303₽</div>
<button class="main-food_products-cardbottom-btn">В корзину</button>
</div>
</div>
<a href="#" class="main-food_link main-about_banner-btn">Вся продукция<img src="/wp-content/uploads/2025/07/group-1000001373-2.png"></a>
</div>
<div class="main-food_reviews">
<div class="main-food_reviews-title">Отзывы</div>
<img class="main-food_reviews-star" src="/wp-content/uploads/2025/07/white_star_with_4_rays_background_uniform_purple_stylized_3d_illustration__7bb9c7b9-0db3-4d70-8bee-2db16a58e4d1.png" alt="Звезда">
<div class="main-food_reviews-slider swiper">
<div class="swiper-wrapper">
<div class="main-food_reviews-slide swiper-slide">
<img src="/wp-content/uploads/2025/07/rectangle-10400.png" alt="Коровкина Татьяна Сергеевна" class="main-food_reviews-slide-img">
<p class="main-food_reviews-slide-name">Коровкина Татьяна Сергеевна</p>
<p class="main-food_reviews-slide-position">Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород</p>
<p class="main-food_reviews-slide-text">Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.</p>
</div>
<div class="main-food_reviews-slide swiper-slide">
<img src="/wp-content/uploads/2025/07/rectangle-10400.png" alt="Коровкина Татьяна Сергеевна" class="main-food_reviews-slide-img">
<p class="main-food_reviews-slide-name">Коровкина Татьяна Сергеевна</p>
<p class="main-food_reviews-slide-position">Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород</p>
<p class="main-food_reviews-slide-text">Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.</p>
</div>
<div class="main-food_reviews-slide swiper-slide">
<img src="/wp-content/uploads/2025/07/rectangle-10400.png" alt="Коровкина Татьяна Сергеевна" class="main-food_reviews-slide-img">
<p class="main-food_reviews-slide-name">Коровкина Татьяна Сергеевна</p>
<p class="main-food_reviews-slide-position">Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород</p>
<p class="main-food_reviews-slide-text">Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.</p>
</div>
</div>
<div class="main-food_reviews-slider-index"></div>
<div class="main-food_arrows">
<div class="swiper-button-prev">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 12.364H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.5 12.364L10.864 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.5 12.364L10.864 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="swiper-button-next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.364H4.5" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 12.364L14.636 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 12.364L14.636 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

@ -0,0 +1,118 @@
<section class="main-smi about_us about_smi">
<div class="new-container">
<h2 class="main-reviews_title">Сми о нас</h2>
<div class="smi_slider">
<div class="swiper smiSlider">
<div class="swiper-wrapper">
{% for slide in [
{
url: 'https://globalpetindustry.com/news/the-advantages-and-disadvantages-of-insect-based-pet-food/',
img: '/wp-content/uploads/2025/06/image-3-1.png',
alt: 'The advantages and disadvantages of insect-based pet food',
date: '08/01/2025',
title: 'The advantages and disadvantages of insect-based pet food',
logo: '/wp-content/uploads/2025/06/group-1.png',
logo_alt: 'Логотип СМИ 1'
},
{
url: 'https://bk.asia-city.com/shopping/news/cosmopet-launches-thailand-nutritious-insect-based-digestible-treats-your-furry',
img: '/wp-content/uploads/2025/06/uaa1-1.png',
alt: 'Cosmopet launches in Thailand with nutritious, insect-based digestible treats for your furry friends',
date: '17/07/2024',
title: 'Cosmopet launches in Thailand with nutritious, insect-based digestible treats for your furry friends',
logo: '/wp-content/uploads/2025/06/image-67.png',
logo_alt: 'Логотип СМИ 2'
},
{
url: 'https://lapkins.ru/p/chem-kormit-sobaku-allergika/',
img: '/wp-content/uploads/2025/06/frame-237.jpg',
alt: 'Чем кормить собаку-аллергика',
date: '15/04/2024',
title: 'Чем кормить собаку-аллергика',
logo: '/wp-content/uploads/2025/06/image-64.png',
logo_alt: 'Логотип СМИ 3'
},
{
url: 'https://drtclub.ru/superpremium-korm-cosmodog-dlya-sobak/',
img: '/wp-content/uploads/2025/06/frame-238.png',
alt: 'Суперпремиум корм для собак Cosmodog',
date: '18/10/2023',
title: 'Суперпремиум корм для собак Cosmodog',
logo: '/wp-content/uploads/2025/06/image-66.png',
logo_alt: 'Логотип СМИ 4',
text: 'drtclub.ru'
},
{
url: 'https://dzen.ru/a/ZUPLWi5yTXW_QlCM',
img: '/wp-content/uploads/2025/06/frame-233-2.png',
alt: 'Тестирую инновационный корм для собак',
date: '02/11/2023',
title: 'Тестирую инновационный корм для собак',
logo: '/wp-content/uploads/2025/06/group-1-1.png',
logo_alt: 'Логотип СМИ 5',
text: 'ВетБлог'
},
{
url: 'https://recyclemag.ru/article/rossii-vpervie-poyavilsya-zhivotnih-osnove-entoproteina',
img: '/wp-content/uploads/2025/06/frame-236.png',
alt: 'В России впервые появился корм для животных на основе энтопротеина',
date: '09/06/2024',
title: 'В России впервые появился корм для животных на основе энтопротеина',
logo: '/wp-content/uploads/2025/06/image-60.png',
logo_alt: 'Логотип СМИ 6'
},
{
url: 'https://zooinform.ru/polnoraczionnyj-korm-dlya-shhenkov-cosmodogc-indejkoj-i-e-protein',
img: '/wp-content/uploads/2025/06/frame-234.png',
alt: 'Полнорационный корм для щенков Cosmodog',
date: '10/04/2024',
title: 'Полнорационный корм для щенков Cosmodog',
logo: '/wp-content/uploads/2025/06/image-58.png',
logo_alt: 'Логотип СМИ 7'
},
{
url: 'https://zooinform.ru/business/nachalis-prodazhi-innovacionnogo-korma-dlya-sobak-cosmodog/',
img: '/wp-content/uploads/2025/06/frame-235.png',
alt: 'Начались продажи инновационного корма для собак Cosmodog',
date: '18/10/2023',
title: 'Начались продажи инновационного корма для собак Cosmodog',
logo: '/wp-content/uploads/2025/06/image-58.png',
logo_alt: 'Логотип СМИ 8'
},
{
url: 'https://orbsteppe.ru/katastrofa-vseh-splotila-kak-neravnodushnye-pomogali-postradavshim-ot-navodneniya-v-orenburzhe',
img: '/wp-content/uploads/2025/06/frame-239-1.png',
alt: 'Как неравнодушные помогали пострадавшим от наводнения в Оренбуржье',
date: '18/10/2023',
title: 'Как неравнодушные помогали пострадавшим от наводнения в Оренбуржье',
logo_alt: 'Логотип СМИ 9',
text: 'orbsteppe.ru'
}
] %}
<div class="swiper-slide">
<div class="smi-card-wrapper">
<a href="{{ slide.url }}" class="smi-card">
<img src="{{ slide.img }}" alt="{{ slide.alt }}" class="smi-card-img">
<div class="smi-card-date">{{ slide.date }}</div>
<div class="smi-card-title">{{ slide.title }}</div>
<div class="smi-card-label">
{% if slide.logo is defined %}
<img src="{{ slide.logo }}" alt="{{ slide.logo_alt }}">
{% endif %}
{% if slide.text is defined %}
<p>{{ slide.text }}</p>
{% endif %}
</div>
</a>
</div>
</div>
{% endfor %}
</div>
<div class="slider-arrows">
<button class="slider-arrow slider-arrow-prev smiSlider-prev"></button>
<button class="slider-arrow slider-arrow-next smiSlider-next"></button>
</div>
</div>
</div>
</div>
</section>

@ -0,0 +1,18 @@
<section class="main-reviews">
<div class="marketplace">
<div class="new-container">
<h2 class="main-reviews_title">Отзывы Покупателей</h2>
</div>
<div class="marketplace__swiper swiper">
<div class="swiper-wrapper">
{% for i in 1..9 %}
<div class="swiper-slide">
<div class="marketplace__slide">
<img src="/wp-content/themes/cosmopet/static/img/scrollable-{{ i }}.svg" alt="Review {{ i }}">
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>

@ -0,0 +1,45 @@
<div class="main-specialists">
<div class="new-container">
<h2 class="main-specialists_title">{{ main_specialists_title }}</h2>
<div class="main-specialists_wrapper swiper">
<div class="swiper-wrapper">
{% for item in main_specialists_items %}
<div class="main-specialists_item swiper-slide {% if loop.index is even %}reverse{% endif %}">
<div class="main-specialists_bio">
<div class="main-specialists_bio-image">
<img src="{{ item.image }}" alt="{{ item.title }}">
</div>
<div class="main-specialists_bio-info">
<p class="main-specialists_bio-name">{{ item.name }}</p>
<p class="main-specialists_bio-position">{{ item.position }}</p>
</div>
</div>
<div class="main-specialists_text">
<svg width="75" height="30" viewBox="0 0 75 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 30H75L31.058 3.63479C28.3919 2.03513 25 3.95558 25 7.06476V30Z" fill="white" />
</svg>
<p>{{ item.text }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="swiper-pagination"></div>
<div class="main-specialists_arrows">
<div class="swiper-button-prev">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 12.364H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.5 12.364L10.864 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.5 12.364L10.864 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="swiper-button-next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.364H4.5" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 12.364L14.636 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 12.364L14.636 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
</div>

@ -0,0 +1,253 @@
<div class="main-treats">
<div class="new-container">
<h2 class="main-food_title">Лакомства<br>на основе E-protein</h2>
<div class="main-food_wrapper">
<div class="main-food_products">
<div class="main-food_products-card even">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-186.png" alt="Ягненок на косточке, для собак, 100гр">
</div>
<div class="main-food_products-card-title">
Ягненок на косточке, для собак, 100гр
</div>
<div class="main-food_products-card-bottom">
<div class="main-treats_products-card-bottom-price">1303₽</div>
<button class="main-treats_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card odd">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1862.png" alt="Говядина на косточке, для собак, 100гр">
</div>
<div class="main-food_products-card-title">
Говядина на косточке, для собак, 100гр
</div>
<div class="main-food_products-card-bottom">
<div class="main-food_products-card-bottom-price">1303₽</div>
<button class="main-food_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card even">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1863.png" alt="Ягненок на косточке, для собак, 100гр">
</div>
<div class="main-food_products-card-title">
Ягненок на косточке, для собак, 100гр
</div>
<div class="main-food_products-card-bottom">
<div class="main-treats_products-card-bottom-price">1303₽</div>
<button class="main-treats_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card odd">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1864.png" alt="Говядина на косточке, для собак, 100гр">
</div>
<div class="main-food_products-card-title">
Говядина на косточке, для собак, 100гр
</div>
<div class="main-food_products-card-bottom">
<div class="main-treats_products-card-bottom-price">1303₽</div>
<button class="main-treats_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card even">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1865.png" alt="Ягненок на косточке, для собак, 100гр">
</div>
<div class="main-food_products-card-title">
Ягненок на косточке, для собак, 100гр
</div>
<div class="main-food_products-card-bottom">
<div class="main-treats_products-card-bottom-price">1303₽</div>
<button class="main-treats_products-cardbottom-btn">В корзину</button>
</div>
</div>
<div class="main-food_products-card odd">
<div class="main-food_products-card-img">
<div class="shadow-svg">
<svg width="239" height="240" viewBox="0 0 239 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_2819_3039)">
<path d="M11 113.961L48.0688 16H219L223.5 308L199.5 324H11V113.961Z" fill="url(#paint0_linear_2819_3039)" />
</g>
<defs>
<filter id="filter0_f_2819_3039" x="-4.3" y="0.7" width="243.1" height="338.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="7.65" result="effect1_foregroundBlur_2819_3039" />
</filter>
<linearGradient id="paint0_linear_2819_3039" x1="160.923" y1="166.395" x2="1.60953" y2="352.399" gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/image-1866.png" alt="Говядина на косточке, для собак, 100гр">
</div>
<div class="main-food_products-card-title">
Говядина на косточке, для собак, 100гр
</div>
<div class="main-food_products-card-bottom">
<div class="main-treats_products-card-bottom-price">1303₽</div>
<button class="main-treats_products-cardbottom-btn">В корзину</button>
</div>
</div>
</div>
<div class="main-food_reviews">
<div class="main-food_reviews-title">Отзывы</div>
<img class="main-food_reviews-star" src="/wp-content/uploads/2025/07/white_star_with_4_rays_background_uniform_purple_stylized_3d_illustration__7bb9c7b9-0db3-4d70-8bee-2db16a58e4d1.png" alt="Звезда">
<div class="main-treats_reviews-slider swiper">
<div class="swiper-wrapper">
<div class="main-food_reviews-slide swiper-slide">
<div class="main-food_reviews-slide-top">
<img src="/wp-content/uploads/2025/07/ellipse-36.png" alt="" >
<div class="main-food_reviews-slide-top-info">
<p class="main-food_reviews-slide-top-info-name">JOSHUA JONES</p>
<p class="main-food_reviews-slide-top-info-followers">+900млн followers</p>
</div>
</div>
<img src="/wp-content/uploads/2025/07/nz6_1871-1.png" alt="Коровкина Татьяна Сергеевна" class="main-food_reviews-slide-img">
<p class="main-food_reviews-slide-name">Коровкина Татьяна Сергеевна</p>
<p class="main-food_reviews-slide-position">Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород</p>
<p class="main-food_reviews-slide-text">Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.</p>
</div>
<div class="main-food_reviews-slide swiper-slide">
<div class="main-food_reviews-slide-top">
<img src="/wp-content/uploads/2025/07/ellipse-36.png" alt="" >
<div class="main-food_reviews-slide-top-info">
<p class="main-food_reviews-slide-top-info-name">JOSHUA JONES</p>
<p class="main-food_reviews-slide-top-info-followers">+900млн followers</p>
</div>
</div>
<img src="/wp-content/uploads/2025/07/nz6_1871-1.png" alt="Коровкина Татьяна Сергеевна" class="main-food_reviews-slide-img">
<p class="main-food_reviews-slide-name">Коровкина Татьяна Сергеевна</p>
<p class="main-food_reviews-slide-position">Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород</p>
<p class="main-food_reviews-slide-text">Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.</p>
</div>
<div class="main-food_reviews-slide swiper-slide">
<div class="main-food_reviews-slide-top">
<img src="/wp-content/uploads/2025/07/ellipse-36.png" alt="" >
<div class="main-food_reviews-slide-top-info">
<p class="main-food_reviews-slide-top-info-name">JOSHUA JONES</p>
<p class="main-food_reviews-slide-top-info-followers">+900млн followers</p>
</div>
</div>
<img src="/wp-content/uploads/2025/07/nz6_1871-1.png" alt="Коровкина Татьяна Сергеевна" class="main-food_reviews-slide-img">
<p class="main-food_reviews-slide-name">Коровкина Татьяна Сергеевна</p>
<p class="main-food_reviews-slide-position">Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород</p>
<p class="main-food_reviews-slide-text">Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.</p>
</div>
</div>
<div class="main-treats_reviews-slider-index "></div>
<div class="main-food_arrows">
<div class="swiper-button-prev">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 12.364H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.5 12.364L10.864 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.5 12.364L10.864 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="swiper-button-next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.364H4.5" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 12.364L14.636 18.728" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 12.364L14.636 6.00005" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Loading…
Cancel
Save