From 0af3851332a245c33d0fa66f87e1188225b5715e Mon Sep 17 00:00:00 2001 From: maksim Date: Tue, 8 Jul 2025 00:43:57 +0300 Subject: [PATCH] =?UTF-8?q?Task:7199=20|=20=D0=92=D0=B5=D1=80=D1=81=D1=82?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD=D0=BE=20=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../template-new-front-page.php | 5 + .../cosmopet/static/css/new-front-page.css | 882 +++++++++++++++++- .../cosmopet/static/js/new-front-page.js | 213 ++++- .../templates/_pages/new-front-page.twig | 6 + .../_pages/new-front-page/main-bot.twig | 13 + .../_pages/new-front-page/main-food.twig | 233 +++++ .../_pages/new-front-page/main-ingredients | 0 .../_pages/new-front-page/main-media.twig | 118 +++ .../_pages/new-front-page/main-reviews.twig | 18 + .../_pages/new-front-page/main-specialists | 0 .../new-front-page/main-specialists.twig | 45 + .../_pages/new-front-page/main-treats.twig | 253 +++++ 12 files changed, 1745 insertions(+), 41 deletions(-) delete mode 100644 wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients delete mode 100644 wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists create mode 100644 wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists.twig diff --git a/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php b/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php index 1ea5abd..5bf83ac 100644 --- a/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php +++ b/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php @@ -11,8 +11,10 @@ if (!class_exists('Timber')) { 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-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_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); } add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); @@ -37,6 +39,9 @@ if (function_exists('get_field')) { // ingredients $context['main_ingredients_title'] = get_field('main_ingredients-title'); $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 { diff --git a/wp-content/themes/cosmopet/static/css/new-front-page.css b/wp-content/themes/cosmopet/static/css/new-front-page.css index ca43379..91aab79 100644 --- a/wp-content/themes/cosmopet/static/css/new-front-page.css +++ b/wp-content/themes/cosmopet/static/css/new-front-page.css @@ -244,7 +244,7 @@ main { } .main-ingredients .swiper { width: 100%; - height: 400px; + height: 320px; padding: 0 60px; position: relative; overflow: visible; @@ -266,8 +266,8 @@ main { border-radius: 20px; padding: 40px 30px; text-align: center; - width: 429px; - height: 546px; + width: 240px; + height: 320px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); @@ -349,6 +349,19 @@ main { .main-ingredients .swiper-button-prev { 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) { .main-ingredients .swiper { 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; +} + + + + + + diff --git a/wp-content/themes/cosmopet/static/js/new-front-page.js b/wp-content/themes/cosmopet/static/js/new-front-page.js index a820ff7..bd80a90 100644 --- a/wp-content/themes/cosmopet/static/js/new-front-page.js +++ b/wp-content/themes/cosmopet/static/js/new-front-page.js @@ -10,9 +10,11 @@ document.addEventListener('DOMContentLoaded', function() { // Ingredients slider const swiper = new Swiper('.ingredients-swiper', { slidesPerView: 5, + spaceBetween: -40, centeredSlides: true, centeredSlidesBounds: true, loop: true, + loopAdditionalSlides: 25, // 🔥 вот он! autoplay: { delay: 4000, disableOnInteraction: false, @@ -36,51 +38,186 @@ document.addEventListener('DOMContentLoaded', function() { }); function updateSlideStates(swiper) { - const slides = swiper.slides; - - slides.forEach((slide) => { - slide.style.opacity = '0.3'; - slide.style.transform = 'scale(0.7)'; - slide.style.zIndex = '1'; - }); - - // Найдём активный слайд по классу - const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active')); - if (!activeSlide) return; - - // Обнулим все - const updateSlide = (slide, scale, opacity, zIndex) => { - if (slide) { - slide.style.transform = `scale(${scale})`; - slide.style.opacity = opacity; - slide.style.zIndex = zIndex; - } - }; + const slides = swiper.slides; + + slides.forEach((slide) => { + slide.style.opacity = '0.2'; + slide.style.transform = 'translateZ(-200px) scale(0.7)'; + slide.style.zIndex = '1'; + }); + + const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active')); + if (!activeSlide) return; + + const updateSlide = (slide, z, scale, opacity, zIndex) => { + if (slide) { + slide.style.transform = `translateZ(${z}px) scale(${scale})`; + slide.style.opacity = opacity; + slide.style.zIndex = zIndex; + } + }; - updateSlide(activeSlide, 1, 1, 10); + updateSlide(activeSlide, 0, 1, 1, 10); - // Пройдем от активного — назад и вперёд - const getPrev = (el, n) => { - let node = el; - for (let i = 0; i < n; i++) { - node = node.previousElementSibling || swiper.slides[swiper.slides.length - 1]; + const getPrev = (el, n) => { + let node = el; + for (let i = 0; i < n; i++) { + node = node.previousElementSibling || swiper.slides[swiper.slides.length - 1]; + } + return node; + }; + + const getNext = (el, n) => { + let node = el; + for (let i = 0; i < n; i++) { + node = node.nextElementSibling || swiper.slides[0]; + } + return node; + }; + + updateSlide(getPrev(activeSlide, 1), -100, 0.85, 0.5, 6); + updateSlide(getPrev(activeSlide, 2), -200, 0.75, 0.3, 4); + + updateSlide(getNext(activeSlide, 1), -100, 0.85, 0.5, 6); + 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 } - return node; - }; + } + }); - const getNext = (el, n) => { - let node = el; - for (let i = 0; i < n; i++) { - node = node.nextElementSibling || swiper.slides[0]; + // 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); } - return node; - }; + } + }); - updateSlide(getPrev(activeSlide, 1), 0.85, 0.6, 6); - updateSlide(getPrev(activeSlide, 2), 0.75, 0.4, 4); + 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, + + }); - updateSlide(getNext(activeSlide, 1), 0.85, 0.6, 6); - updateSlide(getNext(activeSlide, 2), 0.75, 0.4, 4); + // 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, + }, + } + }); + }); + + diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig index 838c3de..cf720af 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig @@ -7,4 +7,10 @@ {% 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-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 %} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig index e69de29..a5d8633 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig @@ -0,0 +1,13 @@ +
+
+
+
Первый в России
+

ветеринарный бот с бесплатными вет консультациями

+ Перейтиarrow +
+
+
+
+
+
+
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-food.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-food.twig index e69de29..d11420a 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-food.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-food.twig @@ -0,0 +1,233 @@ +
+
+

сухой гипоаллергенный корм

+
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Рыба, крупные, adult, 15мм, 2кг +
+
+ Рыба, крупные, adult, 15мм, 2кг +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Индейка, крупные, adult, 15мм, 2кг +
+
+ Индейка, крупные, adult, 15мм, 2кг +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Рыба, крупные, adult, 15мм, 2кг +
+
+ Рыба, крупные, adult, 15мм, 2кг +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Индейка, крупные, adult, 15мм, 2кг +
+
+ Индейка, крупные, adult, 15мм, 2кг +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Рыба, крупные, adult, 15мм, 2кг +
+
+ Рыба, крупные, adult, 15мм, 2кг +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Индейка, крупные, adult, 15мм, 2кг +
+
+ Индейка, крупные, adult, 15мм, 2кг +
+
+
1 303 ₽
+ +
+
+ Вся продукция +
+
+
Отзывы
+ Звезда +
+
+
+ Коровкина Татьяна Сергеевна +

Коровкина Татьяна Сергеевна

+

Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород

+

Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.

+
+
+ Коровкина Татьяна Сергеевна +

Коровкина Татьяна Сергеевна

+

Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород

+

Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.

+
+
+ Коровкина Татьяна Сергеевна +

Коровкина Татьяна Сергеевна

+

Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород

+

Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.

+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+
+
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients deleted file mode 100644 index e69de29..0000000 diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-media.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-media.twig index e69de29..78e7c09 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-media.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-media.twig @@ -0,0 +1,118 @@ +
+
+

Сми о нас

+
+
+
+ {% 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' + } + ] %} +
+
+ + {{ slide.alt }} +
{{ slide.date }}
+
{{ slide.title }}
+
+ {% if slide.logo is defined %} + {{ slide.logo_alt }} + {% endif %} + {% if slide.text is defined %} +

{{ slide.text }}

+ {% endif %} +
+ +
+
+ {% endfor %} +
+
+ + +
+
+
+
+
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-reviews.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-reviews.twig index e69de29..c9b359a 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-reviews.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-reviews.twig @@ -0,0 +1,18 @@ +
+
+
+

Отзывы Покупателей

+
+
+
+ {% for i in 1..9 %} +
+
+ Review {{ i }} +
+
+ {% endfor %} +
+
+
+
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists deleted file mode 100644 index e69de29..0000000 diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists.twig new file mode 100644 index 0000000..a3c4300 --- /dev/null +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists.twig @@ -0,0 +1,45 @@ +
+
+

{{ main_specialists_title }}

+
+
+ {% for item in main_specialists_items %} +
+
+
+ {{ item.title }} +
+
+

{{ item.name }}

+

{{ item.position }}

+
+
+
+ + + +

{{ item.text }}

+
+
+ {% endfor %} +
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+
+
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-treats.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-treats.twig index e69de29..521f645 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-treats.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-treats.twig @@ -0,0 +1,253 @@ +
+
+

Лакомства
на основе E-protein

+
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Ягненок на косточке, для собак, 100гр +
+
+ Ягненок на косточке, для собак, 100гр +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Говядина на косточке, для собак, 100гр +
+
+ Говядина на косточке, для собак, 100гр +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Ягненок на косточке, для собак, 100гр +
+
+ Ягненок на косточке, для собак, 100гр +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Говядина на косточке, для собак, 100гр +
+
+ Говядина на косточке, для собак, 100гр +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Ягненок на косточке, для собак, 100гр +
+
+ Ягненок на косточке, для собак, 100гр +
+
+
1 303 ₽
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+ Говядина на косточке, для собак, 100гр +
+
+ Говядина на косточке, для собак, 100гр +
+
+
1 303 ₽
+ +
+
+
+
+
Отзывы
+ Звезда +
+
+
+
+ +
+

JOSHUA JONES

+

+900млн followers

+
+
+ Коровкина Татьяна Сергеевна +

Коровкина Татьяна Сергеевна

+

Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород

+

Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.

+
+
+
+ +
+

JOSHUA JONES

+

+900млн followers

+
+
+ Коровкина Татьяна Сергеевна +

Коровкина Татьяна Сергеевна

+

Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород

+

Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.

+
+
+
+ +
+

JOSHUA JONES

+

+900млн followers

+
+
+ Коровкина Татьяна Сергеевна +

Коровкина Татьяна Сергеевна

+

Дерматолог, эндокринолог, пластический хирург, стаж — 14 лет, ЦВМ Звенигород

+

Cosmopet для моих пациентов иногда единственный выход. Так как корм содержит альтернативный источник белка, он подходит питомцу тогда, когда все остальное не переносится. Cosmopet для моих пациентов иногда единственный выход. переносится. Cosmopet иногда единственный выход.

+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+
+
\ No newline at end of file