feat: add BIT.WMS product page template with features, benefits, and demo form

wp-content/themes/bitwms-child/page-templates/page-bit-wms.php

@@ -0,0 +1,347 @@
+<?php
+/**
+ * Template Name: БИТ.WMS
+ *
+ * Product page for БИТ.WMS — warehouse management system.
+ *
+ * @package bitwms-child
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+get_header();
+?>
+
+<main class="bit-wms-page">
+
+    <!-- =====================================================================
+         1. Hero
+         ===================================================================== -->
+    <section class="bitwms-hero">
+        <div class="container">
+            <h1>БИТ.WMS</h1>
+            <p class="bitwms-hero__subtitle">Комплексное решение для управления складом</p>
+            <p class="bitwms-hero__description">
+                БИТ.WMS&nbsp;&mdash; профессиональная система управления складом от&nbsp;Первого Бита.
+                Автоматизируйте все процессы склада: от&nbsp;приёмки до&nbsp;отгрузки,
+                сократите ошибки и&nbsp;повысьте эффективность команды.
+            </p>
+            <div class="bitwms-hero__actions">
+                <a href="#demo-form" class="btn btn-primary">Заказать демо</a>
+                <a href="#" class="btn btn-outline" data-popup="download-presentation">Скачать презентацию</a>
+            </div>
+        </div>
+    </section><!-- .bitwms-hero -->
+
+    <!-- =====================================================================
+         2. Features
+         ===================================================================== -->
+    <section class="bitwms-features">
+        <div class="container">
+            <h2>Функции БИТ.WMS</h2>
+            <div class="features-grid">
+
+                <div class="feature-card">
+                    <h3>Приёмка</h3>
+                    <p>
+                        Автоматическая идентификация товаров по&nbsp;штрихкоду или RFID, проверка
+                        по&nbsp;накладной, фиксация расхождений в&nbsp;режиме реального времени.
+                    </p>
+                    <p class="feature-card__result">Сокращение времени приёмки до&nbsp;40%</p>
+                </div>
+
+                <div class="feature-card">
+                    <h3>Размещение</h3>
+                    <p>
+                        Интеллектуальный подбор ячейки с&nbsp;учётом типа товара, условий хранения
+                        и&nbsp;топологии склада. ABC-зонирование и&nbsp;адресное хранение.
+                    </p>
+                    <p class="feature-card__result">Оптимальное использование площади склада</p>
+                </div>
+
+                <div class="feature-card">
+                    <h3>Хранение</h3>
+                    <p>
+                        Контроль сроков годности, учёт партий и&nbsp;серийных номеров.
+                        Управление остатками онлайн без&nbsp;ручных пересчётов.
+                    </p>
+                    <p class="feature-card__result">Актуальные остатки 24/7 без задержек</p>
+                </div>
+
+                <div class="feature-card">
+                    <h3>Отбор</h3>
+                    <p>
+                        Маршрутизация обходов, поддержка волновой сборки и&nbsp;мультиордерного
+                        отбора. Голосовое подтверждение и&nbsp;работа с&nbsp;ТСД.
+                    </p>
+                    <p class="feature-card__result">Производительность отбора выше на&nbsp;30%</p>
+                </div>
+
+                <div class="feature-card">
+                    <h3>Отгрузка</h3>
+                    <p>
+                        Автоматическая комплектация заказов, контроль весогабаритных характеристик,
+                        формирование отгрузочных документов и&nbsp;интеграция с&nbsp;перевозчиками.
+                    </p>
+                    <p class="feature-card__result">Ноль ошибок при&nbsp;отгрузке</p>
+                </div>
+
+                <div class="feature-card">
+                    <h3>Инвентаризация</h3>
+                    <p>
+                        Циклическая и&nbsp;сплошная инвентаризация без&nbsp;остановки работы склада.
+                        Автоматическое формирование ведомостей и&nbsp;актов расхождений.
+                    </p>
+                    <p class="feature-card__result">Инвентаризация без&nbsp;остановки склада</p>
+                </div>
+
+            </div><!-- .features-grid -->
+        </div>
+    </section><!-- .bitwms-features -->
+
+    <!-- =====================================================================
+         3. Why us
+         ===================================================================== -->
+    <section class="bitwms-why">
+        <div class="container">
+            <h2>Почему Первый Бит</h2>
+            <div class="why-grid">
+
+                <div class="why-grid__item">
+                    <h3>Быстро</h3>
+                    <p>
+                        Запускаем проекты за&nbsp;недели, а&nbsp;не&nbsp;месяцы. Проверенная
+                        методология внедрения и&nbsp;готовые отраслевые конфигурации.
+                    </p>
+                </div>
+
+                <div class="why-grid__item">
+                    <h3>Просто</h3>
+                    <p>
+                        Интуитивный интерфейс, обучение персонала за&nbsp;1&ndash;2 дня,
+                        подробная документация на&nbsp;русском языке.
+                    </p>
+                </div>
+
+                <div class="why-grid__item">
+                    <h3>Качественно</h3>
+                    <p>
+                        200+ успешных внедрений, 15+ лет экспертизы, собственная команда
+                        разработки и&nbsp;поддержки без&nbsp;передачи на&nbsp;аутсорс.
+                    </p>
+                </div>
+
+                <div class="why-grid__item">
+                    <h3>Открыто</h3>
+                    <p>
+                        Прозрачное ценообразование, фиксированные сроки и&nbsp;бюджет,
+                        доступ к&nbsp;исходному коду и&nbsp;регулярные обновления.
+                    </p>
+                </div>
+
+            </div><!-- .why-grid -->
+        </div>
+    </section><!-- .bitwms-why -->
+
+    <!-- =====================================================================
+         4. Cases
+         ===================================================================== -->
+    <section class="bitwms-cases">
+        <div class="container">
+            <h2>Кейсы внедрения</h2>
+
+            <?php
+            $cases_query = new WP_Query( array(
+                'post_type'      => 'case',
+                'posts_per_page' => 3,
+                'post_status'    => 'publish',
+                'orderby'        => 'date',
+                'order'          => 'DESC',
+            ) );
+
+            if ( $cases_query->have_posts() ) :
+            ?>
+                <div class="content-grid">
+                    <?php while ( $cases_query->have_posts() ) : $cases_query->the_post(); ?>
+                        <?php get_template_part( 'templates/content-card' ); ?>
+                    <?php endwhile; ?>
+                </div>
+            <?php
+                wp_reset_postdata();
+            endif;
+            ?>
+
+            <div class="bitwms-cases__more">
+                <a href="<?php echo esc_url( home_url( '/cases/' ) ); ?>" class="btn btn-outline">
+                    Все кейсы
+                </a>
+            </div>
+
+        </div>
+    </section><!-- .bitwms-cases -->
+
+    <!-- =====================================================================
+         5. Other solutions
+         ===================================================================== -->
+    <section class="bitwms-other">
+        <div class="container">
+            <h2>Возможно, вам будет интересно</h2>
+            <div class="other-grid">
+
+                <div class="other-card">
+                    <h3 class="other-card__title">1C:WMS Логистика</h3>
+                    <p class="other-card__description">
+                        Типовое решение на&nbsp;базе 1С:Предприятие для автоматизации
+                        складских процессов в&nbsp;малом и&nbsp;среднем бизнесе.
+                    </p>
+                    <a href="<?php echo esc_url( home_url( '/1c-wms-logistika/' ) ); ?>" class="btn btn-outline btn-sm">
+                        Подробнее
+                    </a>
+                </div>
+
+                <div class="other-card">
+                    <h3 class="other-card__title">Клеверенс</h3>
+                    <p class="other-card__description">
+                        Мобильная автоматизация складских операций: маркировка, инвентаризация
+                        и&nbsp;управление через мобильные устройства и&nbsp;ТСД.
+                    </p>
+                    <a href="<?php echo esc_url( home_url( '/kleverens/' ) ); ?>" class="btn btn-outline btn-sm">
+                        Подробнее
+                    </a>
+                </div>
+
+                <div class="other-card">
+                    <h3 class="other-card__title">1C:TMS</h3>
+                    <p class="other-card__description">
+                        Система управления транспортной логистикой: планирование маршрутов,
+                        контроль доставки и&nbsp;взаиморасчёты с&nbsp;перевозчиками.
+                    </p>
+                    <a href="<?php echo esc_url( home_url( '/1c-tms/' ) ); ?>" class="btn btn-outline btn-sm">
+                        Подробнее
+                    </a>
+                </div>
+
+            </div><!-- .other-grid -->
+        </div>
+    </section><!-- .bitwms-other -->
+
+    <!-- =====================================================================
+         6. Demo form
+         ===================================================================== -->
+    <section class="bitwms-demo" id="demo-form">
+        <div class="container">
+            <h2>Заказать демо БИТ.WMS</h2>
+            <p class="bitwms-demo__description">
+                Оставьте заявку, и&nbsp;наш эксперт свяжется с&nbsp;вами в&nbsp;течение рабочего дня,
+                чтобы провести персональную демонстрацию системы.
+                Вы&nbsp;также можете заполнить подробную
+                <a href="<?php echo esc_url( home_url( '/anketa/' ) ); ?>">анкету</a>
+                для подготовки индивидуального предложения.
+            </p>
+
+            <form class="demo-form" method="post" action="" novalidate>
+                <?php wp_nonce_field( 'bitwms_demo_form', 'bitwms_demo_nonce' ); ?>
+
+                <div class="demo-form__grid">
+
+                    <div class="demo-form__field">
+                        <label class="demo-form__label" for="demo-name">
+                            Имя <span class="demo-form__required" aria-hidden="true">*</span>
+                        </label>
+                        <input
+                            class="demo-form__input"
+                            type="text"
+                            id="demo-name"
+                            name="demo_name"
+                            placeholder="Иван Иванов"
+                            required
+                            autocomplete="name"
+                        >
+                    </div>
+
+                    <div class="demo-form__field">
+                        <label class="demo-form__label" for="demo-company">
+                            Компания
+                        </label>
+                        <input
+                            class="demo-form__input"
+                            type="text"
+                            id="demo-company"
+                            name="demo_company"
+                            placeholder="ООО Ромашка"
+                            autocomplete="organization"
+                        >
+                    </div>
+
+                    <div class="demo-form__field">
+                        <label class="demo-form__label" for="demo-phone">
+                            Телефон <span class="demo-form__required" aria-hidden="true">*</span>
+                        </label>
+                        <input
+                            class="demo-form__input"
+                            type="tel"
+                            id="demo-phone"
+                            name="demo_phone"
+                            placeholder="+7 (999) 000-00-00"
+                            required
+                            autocomplete="tel"
+                        >
+                    </div>
+
+                    <div class="demo-form__field">
+                        <label class="demo-form__label" for="demo-email">
+                            E-mail <span class="demo-form__required" aria-hidden="true">*</span>
+                        </label>
+                        <input
+                            class="demo-form__input"
+                            type="email"
+                            id="demo-email"
+                            name="demo_email"
+                            placeholder="ivan@example.com"
+                            required
+                            autocomplete="email"
+                        >
+                    </div>
+
+                </div><!-- .demo-form__grid -->
+
+                <div class="demo-form__field demo-form__field--full">
+                    <label class="demo-form__label" for="demo-comment">
+                        Комментарий
+                    </label>
+                    <textarea
+                        class="demo-form__input demo-form__textarea"
+                        id="demo-comment"
+                        name="demo_comment"
+                        rows="4"
+                        placeholder="Расскажите о&nbsp;задачах вашего склада..."
+                    ></textarea>
+                </div>
+
+                <div class="demo-form__consent">
+                    <label class="demo-form__consent-label">
+                        <input
+                            class="demo-form__checkbox"
+                            type="checkbox"
+                            name="demo_consent"
+                            value="1"
+                            required
+                        >
+                        <span>
+                            Я&nbsp;соглашаюсь с&nbsp;обработкой персональных данных в&nbsp;соответствии
+                            с&nbsp;<a href="<?php echo esc_url( home_url( '/privacy-policy/' ) ); ?>">политикой конфиденциальности</a>
+                        </span>
+                    </label>
+                </div>
+
+                <button type="submit" class="btn btn-primary demo-form__submit">
+                    Отправить заявку
+                </button>
+
+            </form><!-- .demo-form -->
+        </div>
+    </section><!-- .bitwms-demo -->
+
+</main><!-- .bit-wms-page -->
+
+<?php get_footer(); ?>

wp-content/themes/bitwms-child/style.css

@@ -825,3 +825,388 @@ body.sidebar-overlay::after {
         grid-template-columns: 1fr;
     }
 }
+
+/* ==========================================================================
+   Task 10: БИТ.WMS product page
+   ========================================================================== */
+
+/* ------------------------------------------------------------------
+   1. Hero
+   ------------------------------------------------------------------ */
+
+.bitwms-hero {
+    padding: 80px 0 60px;
+}
+
+.bitwms-hero h1 {
+    font-size: 4rem;
+    line-height: 1.1;
+    margin-bottom: var(--space-md);
+}
+
+.bitwms-hero__subtitle {
+    font-size: 1.5rem;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-gray-text);
+    margin-bottom: var(--space-lg);
+}
+
+.bitwms-hero__description {
+    font-size: 1.125rem;
+    max-width: 680px;
+    color: var(--color-gray-text);
+    margin-bottom: var(--space-xl);
+}
+
+.bitwms-hero__actions {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+@media (max-width: 767px) {
+    .bitwms-hero {
+        padding: 48px 0 40px;
+    }
+
+    .bitwms-hero h1 {
+        font-size: 2.5rem;
+    }
+
+    .bitwms-hero__subtitle {
+        font-size: 1.125rem;
+    }
+
+    .bitwms-hero__description {
+        font-size: 1rem;
+    }
+
+    .bitwms-hero__actions {
+        flex-direction: column;
+    }
+
+    .bitwms-hero__actions .btn {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+/* ------------------------------------------------------------------
+   2. Features
+   ------------------------------------------------------------------ */
+
+.bitwms-features {
+    padding: 80px 0;
+    background: var(--color-gray-light);
+}
+
+.bitwms-features h2 {
+    margin-bottom: 48px;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+}
+
+.feature-card {
+    background: var(--color-white);
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+}
+
+.feature-card h3 {
+    font-size: 1.25rem;
+    margin-bottom: var(--space-md);
+}
+
+.feature-card p {
+    font-size: 0.9375rem;
+    color: var(--color-gray-text);
+    flex: 1;
+}
+
+.feature-card__result {
+    color: var(--color-primary);
+    font-weight: var(--font-weight-bold);
+    font-size: 0.875rem;
+    margin-bottom: 0;
+}
+
+@media (max-width: 1024px) {
+    .features-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 767px) {
+    .bitwms-features {
+        padding: 48px 0;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ------------------------------------------------------------------
+   3. Why us
+   ------------------------------------------------------------------ */
+
+.bitwms-why {
+    padding: 80px 0;
+}
+
+.bitwms-why h2 {
+    margin-bottom: 48px;
+}
+
+.why-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 32px;
+}
+
+.why-grid__item h3 {
+    font-size: 1.25rem;
+    margin-bottom: var(--space-md);
+    position: relative;
+    padding-bottom: 16px;
+}
+
+.why-grid__item h3::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 32px;
+    height: 2px;
+    background: var(--color-primary);
+}
+
+.why-grid__item p {
+    font-size: 0.9375rem;
+    color: var(--color-gray-text);
+}
+
+@media (max-width: 1024px) {
+    .why-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 767px) {
+    .bitwms-why {
+        padding: 48px 0;
+    }
+
+    .why-grid {
+        grid-template-columns: 1fr;
+        gap: 24px;
+    }
+}
+
+/* ------------------------------------------------------------------
+   4. Cases
+   ------------------------------------------------------------------ */
+
+.bitwms-cases {
+    padding: 60px 0;
+    border-top: 1px solid var(--color-gray-light);
+}
+
+.bitwms-cases h2 {
+    margin-bottom: 40px;
+}
+
+.bitwms-cases__more {
+    margin-top: 40px;
+    text-align: center;
+}
+
+@media (max-width: 767px) {
+    .bitwms-cases {
+        padding: 40px 0;
+    }
+}
+
+/* ------------------------------------------------------------------
+   5. Other solutions
+   ------------------------------------------------------------------ */
+
+.bitwms-other {
+    padding: 60px 0;
+    background: var(--color-gray-light);
+}
+
+.bitwms-other h2 {
+    margin-bottom: 40px;
+}
+
+.other-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+}
+
+.other-card {
+    background: var(--color-white);
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+}
+
+.other-card__title {
+    font-size: 1.25rem;
+    margin-bottom: var(--space-md);
+}
+
+.other-card__description {
+    font-size: 0.9375rem;
+    color: var(--color-gray-text);
+    flex: 1;
+    margin-bottom: var(--space-lg);
+}
+
+@media (max-width: 1024px) {
+    .other-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 767px) {
+    .bitwms-other {
+        padding: 40px 0;
+    }
+
+    .other-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ------------------------------------------------------------------
+   6. Demo form
+   ------------------------------------------------------------------ */
+
+.bitwms-demo {
+    padding: 80px 0;
+}
+
+.bitwms-demo h2 {
+    margin-bottom: var(--space-md);
+}
+
+.bitwms-demo__description {
+    font-size: 1.0625rem;
+    color: var(--color-gray-text);
+    max-width: 600px;
+    margin-bottom: 40px;
+}
+
+.demo-form {
+    max-width: 600px;
+}
+
+.demo-form__grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.demo-form__field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.demo-form__field--full {
+    margin-bottom: 20px;
+}
+
+.demo-form__label {
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-black);
+}
+
+.demo-form__required {
+    color: var(--color-primary);
+}
+
+.demo-form__input {
+    width: 100%;
+    padding: 12px 16px;
+    font-family: var(--font-family-base);
+    font-size: 1rem;
+    color: var(--color-black);
+    background: var(--color-white);
+    border: 2px solid var(--color-gray-light);
+    border-radius: 0;
+    transition: border-color var(--transition-base);
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+.demo-form__input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+}
+
+.demo-form__input::placeholder {
+    color: var(--color-gray-text);
+    opacity: 1;
+}
+
+.demo-form__textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+.demo-form__consent {
+    margin-bottom: 24px;
+}
+
+.demo-form__consent-label {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    font-size: 0.875rem;
+    color: var(--color-gray-text);
+    cursor: pointer;
+}
+
+.demo-form__checkbox {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    margin-top: 2px;
+    border: 2px solid var(--color-gray-light);
+    accent-color: var(--color-primary);
+    cursor: pointer;
+}
+
+.demo-form__submit {
+    padding: 14px 40px;
+}
+
+@media (max-width: 767px) {
+    .bitwms-demo {
+        padding: 48px 0;
+    }
+
+    .demo-form__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .demo-form {
+        max-width: 100%;
+    }
+
+    .demo-form__submit {
+        width: 100%;
+    }
+}