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

wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Template Name: New Main Page
+ * Description: Front page template
+ */
+
+if (!class_exists('Timber')) {
+    echo 'Timber не установлен. Пожалуйста, активируйте плагин Timber.';
+    return;
+}
+
+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/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/new-front-page.js', array(), null, true);
+}
+add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
+
+$context = Timber::context();
+
+if (function_exists('get_field')) {
+    // main
+    $context['main_slider'] = get_field('main_slider');
+    // about
+    $context['main_about_title']  = get_field('main_about-title');
+    $context['main_about_image']  = get_field('main_about-image');
+    $context['main_about_text']  = get_field('main_about-text');
+    $context['main_about_banner_bg']  = get_field('main_about-banner-bg');
+    $context['main_about_banner_title']  = get_field('main_about-banner-title');
+    $context['main_about_banner_descr']  = get_field('main_about-banner-descr');
+    // why
+    $context['main_why_title']  = get_field('main_why-title');
+    $context['main_why_items']  = get_field('main_why-items');
+    $context['main_why_text']  = get_field('main_why-text');
+    $context['main_why_logos']  = get_field('main_why-logos');
+    // ingredients
+    $context['main_ingredients_title']  = get_field('main_ingredients-title');
+    $context['main_ingredients_slider']  = get_field('main_ingredients-slider');
+}
+
+try {
+    Timber::render('_pages/new-front-page.twig', $context); // Рендерим отдельный Twig-шаблон
+} catch (Exception $e) {
+    error_log('Ошибка рендеринга: ' . $e->getMessage());
+    echo 'Произошла ошибка при рендеринге шаблона. Проверь логи: ' . $e->getMessage();
+}
+?>

wp-content/themes/cosmopet/static/css/new-front-page.css

@@ -0,0 +1,376 @@
+main {
+    padding-top: 0px;
+    background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
+}
+.new-container {
+    max-width:1240px;
+    margin: 0 auto;
+}
+
+/* Main Slider */
+
+.swiper-container {
+    width: 100%;
+    height: 100vh;
+}
+.main-slider .swiper-slide {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding-top: 85px;
+    padding-left: 60px;
+}
+.swiper-fade .swiper-slide {
+    transition-property: opacity;
+}
+.swiper-fade .swiper-slide {
+    pointer-events: auto;
+}
+.swiper-fade .swiper-slide .swiper-slide-active {
+    opacity: 1;
+}
+.overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, rgba(29, 78, 216, 0.8), transparent);
+}
+.content {
+    position: absolute;
+    bottom: 40px;
+    left: 40px;
+    right: 40px;
+    color: white;
+    z-index: 10;
+}
+.main-slider-content_title {
+    font-weight: 700;
+    font-size: 48px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: #fff;
+    margin-bottom: 32px;
+    width: 45%;
+}
+.main-slider-content_descr {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+    color: #fff;
+    margin-bottom: 32px;
+    width: 45%;
+}
+.main-slider-content_btn {
+    width: 159px;
+    height: 56px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    background-color: #fff;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 120%;
+    color: #121212;
+    border: 2px solid #fff;
+    border-radius: 100px;
+}
+
+/* Main About */
+
+.main-about {
+    /* box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15); */
+    background: #f2f2f2;
+    border-radius: 60px 60px 0px 0px;
+    padding: 55px 65px;
+    margin-top: -50px;
+    position: relative;
+    z-index: 90;
+}
+.main-about_title {
+    font-weight: 700;
+    font-size: 40px;
+    color: #121212;
+}
+.main-about-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.main-about_text {
+    font-weight: 500;
+    font-size: 20px;
+    color: #121212;
+}
+.main-about_banner {
+    height: 255px;
+    border-radius: 40px;
+    padding: 40px 40px 24px 40px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 20px;
+}
+.main-about_banner-title {
+    font-weight: 400;
+    font-size: 24px;
+    color: #f2f2f2;
+}
+.main-about_banner-divider {
+    border-radius: 100px;
+    width: 108px;
+    height: 1px;
+    background: #f2f2f2;
+}
+.main-about_banner-descr {
+    font-weight: 400;
+    font-size: 16px;
+    color: #f2f2f2;
+    max-width: 50%;
+}
+.main-about_banner-btn {
+    border: 2px solid #f2f2f2;
+    border-radius: 100px;
+    width: 333px;
+    height: 48px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 20px;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 120%;
+    color: #fff;
+}
+
+/* Main Why */
+
+.main-why {
+    background: #f2f2f2;
+    margin-top: -1%;
+    padding-top: 5%;
+    padding-bottom: 5%;
+}
+.main-why_title {
+    font-weight: 700;
+    font-size: 64px;
+    text-transform: uppercase;
+    color: #121212;
+}
+.main-why_wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 25px;
+    margin-top: 5%;
+}
+.main-why_item {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 40px;
+    padding: 40px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 20px;
+}
+.main-why_item-title {
+    font-weight: 700;
+    font-size: 20px;
+    color: #121212;
+    max-width: 50%;
+}
+.main-why_item-descr {
+    font-weight: 500;
+    font-size: 14px;
+    color: #121212;
+    margin-bottom: 7%;
+}
+.main-why_item-image {
+    position: absolute;
+    top: -25%;
+    right: 5%;
+}
+.main-why_item-index {
+    position: absolute;
+    bottom: 3%;
+    right: 3%;
+    font-weight: 500;
+    font-size: 48px;
+    text-align: right;
+    background: radial-gradient(278.91% 196.13% at 128.36%  -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.main-why_bottom {
+    margin-top: 25px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 40px;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+.main-why_bottom-text {
+    font-weight: 500;
+    font-size: 16px;
+    text-align: center;
+    color: #121212;
+}
+.main-why_bottom-logos {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 20px;
+}
+
+/* Main Ingredients */
+
+.main-ingredients {
+    background: #f2f2f2;
+    margin-top: -1%;
+    padding-top: 5%;
+    padding-bottom: 5%;
+}
+.main-ingredients_title {
+    font-weight: 700;
+    font-size: 64px;
+    text-transform: uppercase;
+    color: #121212;
+}
+.main-ingredients .swiper {
+    width: 100%;
+    height: 400px;
+    padding: 0 60px;
+    position: relative;
+    overflow: visible;
+}
+.main-ingredients .swiper-slide {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s ease;
+    opacity: 0.3;
+    transform: scale(0.7);
+}
+.main-ingredients .swiper-slide-active {
+    opacity: 1;
+    transform: scale(1);
+}
+.ingredient-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 40px 30px;
+    text-align: center;
+    width: 429px;
+    height: 546px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+.main-ingredients .swiper-slide-active .ingredient-card {
+    /* background-image: url(/wp-content/themes/cosmopet/static/img/border.png); */
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+}
+.ingredient-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem;
+    margin-bottom: 30px;
+}
+.ingredients-swiper .swiper-slide {
+    transition: all 0.3s ease-in-out;
+}
+.ingredients-swiper .swiper-wrapper {
+    justify-content: center;
+}
+.ingredients-swiper .swiper-slide {
+    transition: all 0.4s ease;
+    transform-origin: center center;
+}
+.protein .ingredient-icon {
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+}
+.prebiotics .ingredient-icon {
+    background: linear-gradient(135deg, #c8e6c9, #4caf50);
+}
+.omega .ingredient-icon {
+    background: linear-gradient(135deg, #ffcc80, #ff9800);
+}
+.ingredient-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #2c3e50;
+    margin-bottom: 15px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.ingredient-description {
+    font-size: 0.9rem;
+    color: #555;
+    line-height: 1.5;
+    opacity: 0.8;
+}
+.main-ingredients .swiper-button-next,
+.main-ingredients .swiper-button-prev {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    color: #2c3e50;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+.main-ingredients .swiper-button-next:hover,
+.main-ingredients .swiper-button-prev:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: scale(1.1);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+}
+.main-ingredients .swiper-button-next::after,
+.main-ingredients .swiper-button-prev::after {
+    font-size: 16px;
+    font-weight: 600;
+}
+.main-ingredients .swiper-button-next {
+    right: 10px;
+}
+.main-ingredients .swiper-button-prev {
+    left: 10px;
+}
+@media (max-width: 768px) {
+    .main-ingredients .swiper {
+        padding: 0 40px;
+    }  
+    .ingredient-card {
+        width: 260px;
+        height: 300px;
+        padding: 30px 20px;
+    }
+    .title {
+        font-size: 2rem;
+        margin-bottom: 40px;
+    }
+}
+
+
+
+
+
+
+  
+
+
+
+  

wp-content/themes/cosmopet/static/js/new-front-page.js

@@ -0,0 +1,86 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Main slider
+    const mainSwiper = new Swiper('.main-slider', {
+        effect: 'fade',
+        fadeEffect: { crossFade: true },
+        autoplay: { delay: 5000, disableOnInteraction: false },
+        loop: true
+    });
+
+    // Ingredients slider
+    const swiper = new Swiper('.ingredients-swiper', {
+        slidesPerView: 5,
+        centeredSlides: true,
+        centeredSlidesBounds: true,
+        loop: true,
+        autoplay: {
+            delay: 4000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        },
+        watchSlidesProgress: true,
+        slideToClickedSlide: true,
+        effect: 'slide',
+        speed: 800,
+        on: {
+            init() {
+                updateSlideStates(this);
+            },
+            slideChange() {
+                updateSlideStates(this);
+            },
+        }
+    });
+
+        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;
+            }
+        };
+
+        updateSlide(activeSlide, 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];
+            }
+            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), 0.85, 0.6, 6);
+        updateSlide(getPrev(activeSlide, 2), 0.75, 0.4, 4);
+
+        updateSlide(getNext(activeSlide, 1), 0.85, 0.6, 6);
+        updateSlide(getNext(activeSlide, 2), 0.75, 0.4, 4);
+    }
+
+});

wp-content/themes/cosmopet/templates/_pages/new-front-page.twig

@@ -0,0 +1,10 @@
+{% set bodyClass = 'main-np' %}
+{% set headerClass = 'white' %}
+{% extends 'layout.twig' %}
+
+{% block content %}
+  {% include '/templates/_pages/new-front-page/main-slider.twig' %}
+  {% include '/templates/_pages/new-front-page/main-about.twig' %}
+  {% include '/templates/_pages/new-front-page/main-why.twig' %}
+  {% include '/templates/_pages/new-front-page/main-ingredients.twig' %}
+{% endblock %}

wp-content/themes/cosmopet/templates/_pages/new-front-page/main-about.twig

@@ -0,0 +1,18 @@
+<div class="main-about">
+    <div class="new-container">
+        <div class="main-about_title">{{ main_about_title }}</div>
+        <div class="main-about-bottom">
+            <img src="{{ main_about_image }}" class="main-about_image" alt="{{ main_about_title }}">
+            <div class="main-about_text">
+                <p>{{ main_about_text }}</p>
+            </div>
+        </div>
+
+        <div class="main-about_banner" style="background:url({{ main_about_banner_bg }}); background-size: cover; background-position: center;">
+            <div class="main-about_banner-title">{{ main_about_banner_title }}</div>
+            <div class="main-about_banner-divider"></div>
+            <div class="main-about_banner-descr">{{ main_about_banner_descr }}</div>
+            <a href="#" class="main-about_banner-btn">Начать сотрудничество<img src="/wp-content/uploads/2025/07/group-1000001373-2.png"></a>
+        </div>
+    </div>
+</div>

wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients.twig

@@ -0,0 +1,23 @@
+<div class="main-ingredients">
+    <div class="new-container">
+        <h2 class="main-ingredients_title">{{ main_ingredients_title }}</h2>
+        <div class="swiper ingredients-swiper">
+            <div class="swiper-wrapper">
+            {% for slide in main_ingredients_slider %}    
+                <div class="swiper-slide">
+                    <div class="ingredient-card protein">
+                        <img src="{{ slide.image }}" class="ingredient-icon" alt="{{ slide.title }}">
+                        <div class="ingredient-title">{{ slide.title }}</div>
+                        <div class="ingredient-description">
+                            {{ slide.descr }}
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}    
+            </div>
+            
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
+        </div>
+    </div>    
+</div>

wp-content/themes/cosmopet/templates/_pages/new-front-page/main-slider.twig

@@ -0,0 +1,14 @@
+<div class="main-slider swiper-container">
+  <div class="swiper-wrapper">
+    {% for slide in main_slider %}
+      <div class="swiper-slide" style="background-image: url('{{ slide.main_slider_bg }}'); background-size: cover; background-position: center;">
+        <div class="main-slider-content">
+            <h2 class="main-slider-content_title">{{ slide.main_slider_title }}</h2>
+            <p class="main-slider-content_descr">{{ slide.main_slider_descr }}</p>
+            <a href="{{ slide.main_slider_link }}" class="main-slider-content_btn">Купить<img src="/wp-content/uploads/2025/07/group-1000001373.png"></a>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+
+</div>

wp-content/themes/cosmopet/templates/_pages/new-front-page/main-why.twig

@@ -0,0 +1,27 @@
+<div class="main-why">
+    <div class="new-container">
+        <h2 class="main-why_title">{{ main_why_title }}</h2>
+        <div class="main-why_wrapper">
+        {% for item in main_why_items %}
+            <div class="main-why_item" style="background-image: url('{{ item.bg }}'); background-size: cover; background-position: center;">
+                <div class="main-why_item-title">{{ item.title }}</div> 
+                <div class="main-why_item-descr">{{ item.descr }}</div> 
+                <img src="{{ item.image }}" class="main-why_item-image" alt="{{ item.title }}">
+                <div class="main-why_item-index">
+                    {{ loop.index < 10 ? '0' ~ loop.index : loop.index }}
+                </div> 
+            </div>
+        {% endfor %}    
+        </div>
+        <div class="main-why_bottom">
+            <div class="main-why_bottom-text">
+                <p>{{ main_why_text }}</p>
+            </div>
+            <div class="main-why_bottom-logos">
+            {% for logo in main_why_logos %}
+                <img src="{{ logo.logo }}" alt="Логотип сертификации">
+            {% endfor %}     
+            </div>
+        </div>
+    </div>    
+</div>