Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.good-production.xyz/Good-Production/cosmopet-architecture

Browse Source
pull/36/head
Антон 1 month ago
parent 692bd3e30c 0af3851332
commit c0b10e8a0e
12 changed files with 1745 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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. 213
      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

5
wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php
Unescape View File

@ -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 {

882
wp-content/themes/cosmopet/static/css/new-front-page.css
Unescape View File

@ -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;
}

213
wp-content/themes/cosmopet/static/js/new-front-page.js
Unescape View File

@ -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,
},
}
});
});

6
wp-content/themes/cosmopet/templates/_pages/new-front-page.twig
Unescape View File

@ -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 %}

13
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig
Unescape View File

@ -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>

233
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-food.twig
Unescape View File

@ -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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients
Unescape View File

118
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-media.twig
Unescape View File

@ -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>

18
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-reviews.twig
Unescape View File

@ -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
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists
Unescape View File

45
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-specialists.twig
Unescape View File

@ -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>

253
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-treats.twig
Unescape View File

@ -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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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">1 303 ₽</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>
Write Preview
Loading…
Cancel
Save