Merge version_4 into main

Merge version_4 into main

src/app/catalog/accessories/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function AccessoriesPage() {
+  const products = [
+    { id: "a1", brand: "Oakley", name: "Sunglasses", price: "6 900 ₽", rating: 4, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg?_wi=1" }
+  ];
+
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="reveal-blur" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[
+          { name: "Главная", id: "/" },
+          { name: "Каталог", id: "/catalog" },
+          { name: "Новинки", id: "/catalog/new" },
+          { name: "Кроссовки", id: "/catalog/sneakers" },
+          { name: "Одежда", id: "/catalog/clothes" },
+          { name: "Аксессуары", id: "/catalog/accessories" },
+        ]}
+        brandName="DARK BOX"
+      />
+      <div className="pt-32">
+        <ProductCardTwo 
+          title="Аксессуары"
+          description="Дополнения к образу."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={products}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/catalog/clothes/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function ClothesPage() {
+  const products = [
+    { id: "c1", brand: "Stussy", name: "Hoodie Logo", price: "8 500 ₽", rating: 4, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-winter-day-boxing-hands_627829-1456.jpg?_wi=1" },
+    { id: "c2", brand: "Carhartt", name: "T-Shirt", price: "4 200 ₽", rating: 5, reviewCount: "35", imageSrc: "http://img.b2bpic.net/free-photo/view-handsome-young-man-looking-camera_197531-33430.jpg?_wi=1" }
+  ];
+
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="reveal-blur" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[
+          { name: "Главная", id: "/" },
+          { name: "Каталог", id: "/catalog" },
+          { name: "Новинки", id: "/catalog/new" },
+          { name: "Кроссовки", id: "/catalog/sneakers" },
+          { name: "Одежда", id: "/catalog/clothes" },
+          { name: "Аксессуары", id: "/catalog/accessories" },
+        ]}
+        brandName="DARK BOX"
+      />
+      <div className="pt-32">
+        <ProductCardTwo 
+          title="Одежда"
+          description="Трендовая стритвир одежда."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={products}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/catalog/new/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function NewArrivalsPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="reveal-blur" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[
+          { name: "Главная", id: "/" },
+          { name: "Каталог", id: "/catalog" },
+          { name: "Новинки", id: "/catalog/new" },
+          { name: "Кроссовки", id: "/catalog/sneakers" },
+          { name: "Одежда", id: "/catalog/clothes" },
+          { name: "Аксессуары", id: "/catalog/accessories" },
+        ]}
+        brandName="DARK BOX"
+      />
+      <div className="pt-32">
+        <ProductCardTwo 
+          title="Новинки"
+          description="Последние поступления."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={[]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/catalog/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function CatalogPage() {
+  const products = [
+    { id: "1", brand: "Nike", name: "Air Jordan 1", price: "15 900 ₽", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005704.jpg?_wi=2" },
+    { id: "2", brand: "Adidas", name: "Yeezy Boost", price: "22 000 ₽", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/view-white-ice-skates-with-cherries_23-2150806796.jpg?_wi=1" },
+    { id: "3", brand: "Stussy", name: "Hoodie Logo", price: "8 500 ₽", rating: 4, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-winter-day-boxing-hands_627829-1456.jpg?_wi=2" }
+  ];
+
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="reveal-blur" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[
+          { name: "Главная", id: "/" },
+          { name: "Каталог", id: "/catalog" },
+          { name: "Новинки", id: "/catalog/new" },
+          { name: "Кроссовки", id: "/catalog/sneakers" },
+          { name: "Одежда", id: "/catalog/clothes" },
+          { name: "Аксессуары", id: "/catalog/accessories" },
+        ]}
+        brandName="DARK BOX"
+      />
+      <div className="pt-32">
+        <ProductCardTwo 
+          title="Полный каталог"
+          description="Все товары в наличии."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={products}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/catalog/sale/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function SalePage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="reveal-blur" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[
+          { name: "Главная", id: "/" },
+          { name: "Каталог", id: "/catalog" },
+          { name: "Новинки", id: "/catalog/new" },
+          { name: "Кроссовки", id: "/catalog/sneakers" },
+          { name: "Одежда", id: "/catalog/clothes" },
+          { name: "Аксессуары", id: "/catalog/accessories" },
+        ]}
+        brandName="DARK BOX"
+      />
+      <div className="pt-32">
+        <ProductCardTwo 
+          title="Распродажа"
+          description="Выгодные предложения."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={[]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/catalog/sneakers/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function SneakersPage() {
+  const products = [
+    { id: "s1", brand: "Nike", name: "Air Jordan 1", price: "15 900 ₽", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005704.jpg?_wi=2" },
+    { id: "s2", brand: "Adidas", name: "Yeezy Boost", price: "22 000 ₽", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/view-white-ice-skates-with-cherries_23-2150806796.jpg?_wi=2" }
+  ];
+
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="reveal-blur" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[
+          { name: "Главная", id: "/" },
+          { name: "Каталог", id: "/catalog" },
+          { name: "Новинки", id: "/catalog/new" },
+          { name: "Кроссовки", id: "/catalog/sneakers" },
+          { name: "Одежда", id: "/catalog/clothes" },
+          { name: "Аксессуары", id: "/catalog/accessories" },
+        ]}
+        brandName="DARK BOX"
+      />
+      <div className="pt-32">
+        <ProductCardTwo 
+          title="Кроссовки"
+          description="Подборка лучшей обуви."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={products}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contacts/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Mail, MapPin, Phone } from "lucide-react";
+
+export default function ContactsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="noiseDiagonalGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Главная", id: "/" },
+            { name: "Каталог", id: "/catalog" },
+            { name: "Контакты", id: "/contacts" },
+          ]}
+          brandName="DARK BOX"
+        />
+        
+        <ContactText
+          text="Свяжитесь с нами"
+          background={{ variant: "plain" }}
+          buttons={[
+              { text: "Telegram", href: "https://t.me/darkbox" },
+              { text: "WhatsApp", href: "https://wa.me/79990000000" }
+          ]}
+          useInvertedBackground={false}
+        />
+
+        <div className="flex flex-col items-center py-20 px-6 space-y-8">
+           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl">
+               <div className="flex flex-col items-center text-center p-6 bg-card rounded-2xl">
+                    <MapPin className="mb-4 h-8 w-8 text-accent" />
+                    <h3 className="font-bold mb-2">Адрес</h3>
+                    <p>ул. Мира, 44, Краснодар</p>
+               </div>
+               <div className="flex flex-col items-center text-center p-6 bg-card rounded-2xl">
+                    <Phone className="mb-4 h-8 w-8 text-accent" />
+                    <h3 className="font-bold mb-2">Телефон</h3>
+                    <p>+7 (999) 000-00-00</p>
+               </div>
+               <div className="flex flex-col items-center text-center p-6 bg-card rounded-2xl">
+                    <Mail className="mb-4 h-8 w-8 text-accent" />
+                    <h3 className="font-bold mb-2">Почта</h3>
+                    <p>info@darkbox.ru</p>
+               </div>
+           </div>
+        </div>
+
+        <FooterLogoEmphasis
+          columns={[
+            { items: [{ label: "Главная", href: "/" }, { label: "Контакты", href: "/contacts" }] },
+          ]}
+          logoText="DARK BOX"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -14,13 +14,6 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import { Briefcase, Watch, Zap } from "lucide-react";
 
 export default function LandingPage() {
-  const scrollTo = (id: string) => {
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -38,12 +31,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        { name: "Главная", id: "hero" },
+        { name: "Главная", id: "/" },
-        { name: "Каталог", id: "catalog" },
+        { name: "Каталог", id: "/catalog" },
-        { name: "Новинки", id: "new" },
+        { name: "Новинки", id: "/catalog/new" },
-        { name: "Кроссовки", id: "sneakers" },
+        { name: "Кроссовки", id: "/catalog/sneakers" },
-        { name: "Одежда", id: "clothes" },
+        { name: "Одежда", id: "/catalog/clothes" },
-        { name: "Аксессуары", id: "accessories" },
+        { name: "Аксессуары", id: "/catalog/accessories" },
       ]}
       brandName="DARK BOX"
     />
@@ -61,7 +54,7 @@ export default function LandingPage() {
         { name: "User 5", handle: "@client", testimonial: "Профессиональный подбор одежды.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583924.jpg?_wi=1", imageAlt: "dark fashion showroom interior" },
       ]}
       buttons={[
-        { text: "Смотреть каталог", onClick: () => scrollTo('catalog') },
+        { text: "Смотреть каталог", href: "/catalog" },
         { text: "Написать в Telegram", href: "https://t.me/darkbox" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/empty-shopping-mall-with-casual-formal-wear-brands_482257-88618.jpg?_wi=2"
@@ -109,18 +102,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="new" data-section="new">
-  </div>
-
-  <div id="sneakers" data-section="sneakers">
-  </div>
-
-  <div id="clothes" data-section="clothes">
-  </div>
-
-  <div id="accessories" data-section="accessories">
-  </div>
-
   <div id="catalog" data-section="catalog">
       <ProductCardTwo
       animationType="slide-up"
@@ -129,11 +110,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         { id: "1", brand: "Nike", name: "Air Jordan 1", price: "15 900 ₽", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005704.jpg?_wi=2" },
-        { id: "2", brand: "Adidas", name: "Yeezy Boost", price: "22 000 ₽", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/view-white-ice-skates-with-cherries_23-2150806796.jpg" },
+        { id: "2", brand: "Adidas", name: "Yeezy Boost", price: "22 000 ₽", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/view-white-ice-skates-with-cherries_23-2150806796.jpg?_wi=3" },
-        { id: "3", brand: "Stussy", name: "Hoodie Logo", price: "8 500 ₽", rating: 4, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-winter-day-boxing-hands_627829-1456.jpg" },
+        { id: "3", brand: "Stussy", name: "Hoodie Logo", price: "8 500 ₽", rating: 4, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-winter-day-boxing-hands_627829-1456.jpg?_wi=3" },
-        { id: "4", brand: "Carhartt", name: "T-Shirt", price: "4 200 ₽", rating: 5, reviewCount: "35", imageSrc: "http://img.b2bpic.net/free-photo/view-handsome-young-man-looking-camera_197531-33430.jpg" },
+        { id: "4", brand: "Carhartt", name: "T-Shirt", price: "4 200 ₽", rating: 5, reviewCount: "35", imageSrc: "http://img.b2bpic.net/free-photo/view-handsome-young-man-looking-camera_197531-33430.jpg?_wi=2" },
         { id: "5", brand: "Nike", name: "Tech Fleece", price: "11 000 ₽", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/cute-slim-african-american-girl-red-dress-with-dreadlocks-backpack-posed-outdoor-sitting-stairs-stylish-black-model_627829-3286.jpg" },
-        { id: "6", brand: "Oakley", name: "Sunglasses", price: "6 900 ₽", rating: 4, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg" },
+        { id: "6", brand: "Oakley", name: "Sunglasses", price: "6 900 ₽", rating: 4, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg?_wi=2" },
       ]}
       title="Новые поступления"
       description="Последние модели в наличии."
@@ -192,8 +173,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        { items: [{ label: "Telegram Канал", href: "#" }, { label: "Администратор", href: "#" }] },
+        { items: [{ label: "Telegram Канал", href: "https://t.me/darkbox" }, { label: "Администратор", href: "https://t.me/darkbox_admin" }] },
-        { items: [{ label: "Адрес: ул. Мира, 44", href: "#" }, { label: "Часы работы: 11-21", href: "#" }] },
+        { items: [{ label: "Адрес: ул. Мира, 44" }, { label: "Часы работы: 11-21" }] },
       ]}
       logoText="DARK BOX"
     />
@@ -201,4 +182,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/product/[slug]/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { useParams } from 'next/navigation';
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const slug = Array.isArray(params.slug) ? params.slug[0] : params.slug || 'product';
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="noiseDiagonalGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+            navItems={[
+                { name: "Главная", id: "/" },
+                { name: "Каталог", id: "/catalog" },
+                { name: "Новинки", id: "/catalog/new" },
+                { name: "Кроссовки", id: "/catalog/sneakers" },
+                { name: "Одежда", id: "/catalog/clothes" },
+                { name: "Аксессуары", id: "/catalog/accessories" },
+            ]}
+            brandName="DARK BOX"
+            />
+        </div>
+        
+        <div className="pt-32 pb-20">
+            <ProductCardThree
+                animationType="slide-up"
+                textboxLayout="default"
+                gridVariant="one-large-left-three-stacked-right"
+                useInvertedBackground={false}
+                title={slug.replace(/-/g, ' ').toUpperCase()}
+                description="Индивидуальная карточка товара с полной спецификацией и информацией о наличии. Закажите через Telegram для быстрого ответа."
+                products={[
+                    { 
+                      id: slug, 
+                      name: slug.replace(/-/g, ' ').toUpperCase(), 
+                      price: "12 900 ₽", 
+                      imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005704.jpg?_wi=2" 
+                    }
+                ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+            columns={[
+                { items: [{ label: "Telegram Канал", href: "https://t.me/darkbox" }, { label: "Администратор", href: "https://t.me/darkbox_admin" }] },
+                { items: [{ label: "Адрес: ул. Мира, 44" }, { label: "Часы работы: 11-21" }] },
+            ]}
+            logoText="DARK BOX"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}