Merge version_17 into main

Merge version_17 into main

src/app/page.tsx

@@ -1,17 +1,18 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Award, CheckCircle, HelpCircle, Sparkles, Star, Zap } from 'lucide-react';
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
+import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import FaqBase from "@/components/sections/faq/FaqBase";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Award, CheckCircle, HelpCircle, Sparkles, Star, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,6 +33,7 @@ export default function LandingPage() {
           brandName="AIInfluencer"
           navItems={[
             { name: "О решении", id: "features" },
+            { name: "Детали", id: "features-new" },
             { name: "Возможности", id: "about" },
             { name: "Цены", id: "pricing" },
             { name: "Кейсы", id: "testimonials" },
@@ -42,66 +44,74 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitDoubleCarousel
+        <HeroBillboardGallery
           title="ИИ-инфлюенсер, который работает на ваш бренд"
-          description="Создаём цифровой персонаж под ключ: от концепции образа до фото, видео и социальных сетей. Масштабируйте контент без зависимости от моделей и студий — за часы, а не недели."
+          description="Создаём цифровых инфлюенсеров под ключ. Мгновенное масштабирование контента 
+и полная независимость от традиционных фото/видеопродакшенов."
           tag="Премиум решение"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
-          leftCarouselItems={[
+          mediaItems={[
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/a-stunning-ai-generated-digital-avatar-i-1774194910432-1461835b.png", imageAlt: "Профессиональный цифровой аватар в деловом стиле" },
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/a-fashion-forward-ai-digital-avatar-wear-1774194910927-6824c557.png", imageAlt: "Модный цифровой аватар в стиле лайфстайл" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/an-ai-generated-digital-ambassador-showc-1774194909389-ce75c1c6.png", imageAlt: "Цифровой персонаж для демонстрации товаров" }
-          ]}
-          rightCarouselItems={[
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/an-ai-generated-digital-ambassador-showc-1774194909389-ce75c1c6.png", imageAlt: "Цифровой персонаж для демонстрации товаров" },
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/a-sophisticated-ai-generated-digital-ava-1774194910526-cd71f11f.png", imageAlt: "Цифровой аватар для красоты и косметики" },
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/an-ai-digital-avatar-in-content-creator--1774194909300-d0714293.png", imageAlt: "AI персонаж для создателей контента" },
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/multiple-ai-generated-digital-avatars-in-1774194909542-c2fb2887.jpg", imageAlt: "Разнообразные цифровые персонажи в разных стилях" }
           ]}
+          mediaAnimation="blur-reveal"
           buttons={[
             { text: "Заказать демонстрацию", href: "#contact" },
             { text: "Посмотреть кейсы", href: "#testimonials" }
           ]}
           buttonAnimation="slide-up"
-          carouselPosition="right"
-          marqueeItems={[
-            { type: "text", text: "Premium AI Generation" },
-            { type: "text", text: "Instant Production" },
-            { type: "text", text: "Unlimited Variations" },
-            { type: "text", text: "Brand Consistency" },
-            { type: "text", text: "24/7 Availability" }
-          ]}
-          marqueeSpeed={40}
-          showMarqueeCard={true}
         />
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardSixteen
+        <FeatureCardEight
           title="Инновационное решение против традиционного маркетинга"
           description="Наш сервис устраняет основные проблемы классических подходов к созданию контента, предоставляя масштабируемую, быструю и экономичную альтернативу."
           tag="Сравнение"
           tagIcon={CheckCircle}
           tagAnimation="blur-reveal"
-          negativeCard={{
-            items: [
-              "Зависимость от моделей и их графика",              "Длительный поиск и кастинг",              "Высокие расходы на студийные сессии",              "Медленная итерация и правки",              "Ограниченное количество вариаций",              "Проблемы с согласованием бренда"
-            ]
-          }}
-          positiveCard={{
-            items: [
-              "Полная свобода в создании персонажа",              "Минуты на разработку концепции",              "Автоматизированное производство контента",              "Мгновенные вариации и изменения",              "Неограниченные версии персонажа",              "Идеальная визуальная консистентность"
-            ]
-          }}
-          textboxLayout="split"
+          textboxLayout="default"
           useInvertedBackground={true}
-          animationType="blur-reveal"
-          buttons={[{ text: "Узнать больше", href: "#about" }]}
+          features={[
+            {
+              id: 1,              title: "Быстрое создание персонажей",              description: "Мгновенная разработка концепции и создание персонажей за часы, а не недели. Забудьте о длительном поиске и кастинге моделей.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/ai-character-creation-interface-mockup-s-1774194908990-2b13e334.png",              imageAlt: "AI character creation interface"
+            },
+            {
+              id: 2,              title: "Масштабируемый и вариативный контент",              description: "Получайте неограниченное количество вариаций контента и идеальную визуальную консистентность без привязки к моделям или студиям.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/ai-influencer-on-a-digital-screen-interf-1774194910309-a78b871c.png",              imageAlt: "AI influencer on digital screen"
+            },
+            {
+              id: 3,              title: "Экономия ресурсов и времени",              description: "Автоматизированное производство контента и мгновенные итерации значительно сокращают расходы и сроки, позволяя фокусироваться на стратегии.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/dashboard-showing-ai-content-production-m-1774194911000-8041c2d0.png",              imageAlt: "AI content production dashboard"
+            }
+          ]}
+          buttons={[{ text: "Узнать больше", href: "#about" }]
+          }
           buttonAnimation="slide-up"
         />
       </div>
 
+      <div id="features-new" data-section="features-new">
+        <FeatureBorderGlow
+          title="Максимизируйте охват и владение с нашими ИИ-инфлюенсерами"
+          description="Получайте эксклюзивные изображения, мультиформатный контент и полное владение правами, чтобы превзойти конкурентов и уверенно доминировать в цифровом пространстве."
+          tag="Технологии"
+          tagIcon={Zap}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            { icon: Sparkles, title: "Уникальные образы", description: "Создайте цифровые аватары, которые идеально соответствуют эстетике вашего бренда." },
+            { icon: CheckCircle, title: "Мультиформатный контент", description: "Получайте фото и видео для любых платформ — от соцсетей до рекламных кампаний." },
+            { icon: Award, title: "Полное владение", description: "Все права на созданных персонажей и контент принадлежат только вам." }
+          ]}
+        />
+      </div>
+
       <div id="about" data-section="about">
         <MediaAbout
           title="Полный цикл создания: от идеи к готовому активу"
@@ -112,11 +122,26 @@ export default function LandingPage() {
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/a-sophisticated-infographic-or-diagram-s-1774194910201-1305e1bb.png"
           imageAlt="Процесс создания ИИ-инфлюенсера"
           useInvertedBackground={false}
-          buttons={[{ text: "Начать проект", href: "#contact" }]}
+          buttons={[{ text: "Начать проект", href: "#contact" }]
+          }
           buttonAnimation="blur-reveal"
         />
       </div>
 
+      <div id="about-extra" data-section="about-extra">
+        <TextSplitAbout
+          title="Что делает нас особенными"
+          description={[
+            "Мы создаем не просто изображения, а полноценные цифровые личности, способные эффективно взаимодействовать с вашей аудиторией. Это позволяет вашему бренду масштабировать контент, сохраняя при этом уникальность и консистентность.",            "Забудьте о сложностях традиционных фотосессий и видеосъемок. С нами вы получаете качественный контент для любых платформ, быстро и с полным контролем над каждым аспектом. Мы делаем технологии доступными для вашего креатива."
+          ]}
+          buttons={[{ text: "Узнать больше", href: "#features" }]
+          }
+          buttonAnimation="slide-up"
+          showBorder={true}
+          useInvertedBackground={true}
+        />
+      </div>
+
       <div id="pricing" data-section="pricing">
         <PricingCardNine
           title="Гибкие планы для любого бизнеса"
@@ -150,15 +175,16 @@ export default function LandingPage() {
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/enterprise-solution-showcase-unlimited-c-1774194910255-311f8351.png",              imageAlt: "Пакет Enterprise"
             }
           ]}
-          buttons={[{ text: "Посмотреть все возможности", href: "#features" }]}
+          buttons={[{ text: "Посмотреть все возможности", href: "#features" }]
+          }
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardOne
-          title="Что говорят наши клиенты"
-          description="Истории успеха от брендов, агентств и предпринимателей, которые трансформировали свой контент-маркетинг с помощью AI-инфлюенсеров."
-          tag="Кейсы"
+          title="Пионеры AI-маркетинга делятся успехом"
+          description="Откройте для себя, как AIInfluencer перевернул стратегии брендов, повысив вовлеченность и ROI. Узнайте, почему они выбрали будущее контента."
+          tag="Истории успеха"
           tagIcon={Star}
           tagAnimation="blur-reveal"
           textboxLayout="default"
@@ -191,33 +217,15 @@ export default function LandingPage() {
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/professional-headshot-of-a-beauty-or-lif-1774194911435-f531bff5.png"
             }
           ]}
-          buttons={[{ text: "Смотреть больше примеров", href: "#contact" }]}
-        />
-      </div>
-
-      <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Доверие лидеров индустрии"
-          description="Работаем с ведущими брендами, агентствами и платформами, которые выбрали AI-инфлюенсеры для масштабирования своего контента."
-          tag="Партнеры"
-          tagIcon={CheckCircle}
-          tagAnimation="blur-reveal"
-          names={["Fashion Brand Group", "Beauty Retail Co.", "Digital Agency Pro", "E-commerce Platform", "Luxury Goods Inc.", "SaaS Solutions", "Premium Jewelry"]}
-          logos={[
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/logo-or-brand-mark-for-a-major-russian-e-1774194910089-a8df7bbf.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/logo-for-a-premium-beauty-or-cosmetics-b-1774194911583-21ee01c9.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/logo-for-a-contemporary-fashion-or-lifes-1774194909169-084f23d0.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/logo-for-a-digital-marketing-or-creative-1774194908733-cb8bc44e.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/logo-for-a-luxury-lifestyle-or-premium-c-1774194913225-aedfb538.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/logo-for-a-saas-or-technology-company-mo-1774194910188-f9173489.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/logo-for-a-premium-jewelry-or-luxury-acc-1774194908887-914e3f12.jpg"
-          ]}
-          textboxLayout="default"
-          useInvertedBackground={true}
-          speed={40}
-          showCard={true}
-          buttons={[{ text: "Присоединиться к партнерам", href: "#contact" }]}
+          buttons={[{ text: "Занять место в Waitlist", href: "#contact" }]
+          }
         />
       </div>
 
       <div id="faq" data-section="faq">
         <FaqBase
-          title="Часто задаваемые вопросы"
-          description="Ответы на самые популярные вопросы о создании AI-инфлюенсеров, процессе работы и возможностях нашего сервиса."
+          title="Все, что вы хотели знать об AI-инфлюенсерах"
+          description="Мы собрали ответы на ключевые вопросы о нашей платформе, от создания персонажей до использования контента и преимуществ раннего доступа."
           tag="Информация"
           tagIcon={HelpCircle}
           tagAnimation="slide-up"
@@ -226,11 +234,17 @@ export default function LandingPage() {
           faqsAnimation="slide-up"
           faqs={[
             {
-              id: "1",              title: "Как долго создается AI-инфлюенсер?",              content: "Стандартный персонаж создается за 5-7 дней. Профессиональные пакеты с несколькими вариантами обрабатываются за 2-3 дня. Для срочных проектов возможны ускоренные сроки при согласовании с командой."
+              id: "1",              title: "Как долго создается AI-инфлюенсер?",              content: "Даже сложный AI-инфлюенсер готов всего за 5-7 дней, позволяя вам быстро запускать кампании, обеспечивая быструю окупаемость инвестиций."
             },
             {
               id: "2",              title: "Можно ли использовать персонаж для разных платформ?",              content: "Да, AI-инфлюенсер может адаптироваться под любые платформы: Instagram, TikTok, YouTube, Telegram и другие. Мы предоставляем мультиформатный выход с оптимизацией для каждого канала."
             },
+            {
+              id: "7",              title: "Как рассчитываются кредиты для генерации контента?",              content: "Наши тарифные планы включают определенное количество генераций контента (кредитов). Дополнительные кредиты можно приобрести отдельно или обновить план для большего объема."
+            },
+            {
+              id: "8",              title: "Какие уникальные функции генерации контента вы предлагаете?",              content: "Мы предлагаем передовые функции, такие как создание динамических поз, изменение настроения персонажа, генерация фонов и интеграция продуктов, обеспечивая неограниченные креативные возможности."
+            },
             {
               id: "3",              title: "Каковы авторские права на созданный контент?",              content: "Вы полностью владеете правами на созданного персонажа и весь контент. Это ваш эксклюзивный цифровой актив, который может использоваться без ограничений."
             },
@@ -244,15 +258,16 @@ export default function LandingPage() {
               id: "6",              title: "Можно ли получить белый лейбл (white-label) решение?",              content: "Да, для агентств и крупных компаний мы предоставляем white-label решение с вашим брендингом. Свяжитесь с нами для обсуждения условий и интеграции API."
             }
           ]}
-          buttons={[{ text: "Остались вопросы?", href: "#contact" }]}
+          buttons={[{ text: "Присоединиться к обсуждению", href: "#contact" }]
+          }
         />
       </div>
 
       <div id="contact" data-section="contact">
         <ContactSplit
-          tag="Свяжитесь с нами"
-          title="Начните создавать AI-инфлюенсеров сегодня"
-          description="Оставьте заявку на демонстрацию, консультацию или уточнение деталей вашего проекта. Наша команда ответит в течение 24 часов."
+          tag="Присоединяйтесь"
+          title="Станьте первыми в очереди: Запишитесь в наш Waitlist!"
+          description="Наши AI-инфлюенсеры революционизируют маркетинг. Зарегистрируйтесь, чтобы получить ранний доступ и эксклюзивные обновления."
           background={{ variant: "radial-gradient" }}
           useInvertedBackground={true}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BJ5dWgRXPkFHxu1a8nQ1RJCGs2/professional-imagery-showing-a-modern-di-1774194910155-1ad941c8.png"
@@ -260,8 +275,8 @@ export default function LandingPage() {
           mediaAnimation="blur-reveal"
           mediaPosition="right"
           inputPlaceholder="Ваш email адрес"
-          buttonText="Отправить заявку"
-          termsText="Отправляя форму, вы согласны с нашей политикой конфиденциальности и условиями использования."
+          buttonText="Присоединиться к Waitlist"
+          termsText="Записываясь в Waitlist, вы соглашаетесь с нашей политикой конфиденциальности и условиями использования."
         />
       </div>
 
@@ -301,10 +316,10 @@ export default function LandingPage() {
               ]
             }
           ]}
-          bottomLeftText="© 2024 AIInfluencer. Все права защищены."
-          bottomRightText="Создано для премиум-брендов и инноваторов"
+          bottomLeftText="© 2024 AIInfluencer. Все права защищены. Будущее маркетинга уже здесь."
+          bottomRightText="Расширяем возможности брендов через AI-инфлюенсеров."
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,14 +10,14 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
   --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
   --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */