Merge version_4 into main

Merge version_4 into main

src/app/catalog/accessories/page.tsx

@@ -5,6 +5,10 @@ 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 
@@ -26,7 +30,7 @@ export default function AccessoriesPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          products={[]}
+          products={products}
         />
       </div>
     </ThemeProvider>

src/app/catalog/clothes/page.tsx

@@ -5,6 +5,11 @@ 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 
@@ -26,7 +31,7 @@ export default function ClothesPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          products={[]}
+          products={products}
         />
       </div>
     </ThemeProvider>

src/app/catalog/page.tsx

@@ -5,6 +5,12 @@ 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 
@@ -26,7 +32,7 @@ export default function CatalogPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          products={[]}
+          products={products}
         />
       </div>
     </ThemeProvider>

src/app/catalog/sneakers/page.tsx

@@ -5,6 +5,11 @@ 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 
@@ -26,7 +31,7 @@ export default function SneakersPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          products={[]}
+          products={products}
         />
       </div>
     </ThemeProvider>

src/app/contacts/page.tsx

@@ -3,8 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+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 (
@@ -30,14 +31,36 @@ export default function ContactsPage() {
           brandName="DARK BOX"
         />
         
-        <ContactCenter
+        <ContactText
-            tag="Связь"
+          text="Свяжитесь с нами"
-            title="Наши контакты"
+          background={{ variant: "plain" }}
-            description="Свяжитесь с нами через Telegram или посетите шоурум в Краснодаре."
+          buttons={[
-            background={{ variant: "plain" }}
+              { text: "Telegram", href: "https://t.me/darkbox" },
-            useInvertedBackground={false}
+              { 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" }] },

src/app/page.tsx

@@ -110,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="Последние модели в наличии."

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

@@ -3,10 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+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';
 
-export default function ProductDetailPage({ params }: { params: { slug: string } }) {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -21,35 +25,48 @@ export default function ProductDetailPage({ params }: { params: { slug: string }
         headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarStyleCentered
+        <div id="nav" data-section="nav">
-          navItems={[
+            <NavbarStyleCentered
-            { name: "Главная", id: "/" },
+            navItems={[
-            { name: "Каталог", id: "/" },
+                { name: "Главная", id: "/" },
-            { name: "Контакты", id: "/contacts" },
+                { name: "Каталог", id: "/catalog" },
-          ]}
+                { name: "Новинки", id: "/catalog/new" },
-          brandName="DARK BOX"
+                { name: "Кроссовки", id: "/catalog/sneakers" },
-        />
+                { name: "Одежда", id: "/catalog/clothes" },
+                { name: "Аксессуары", id: "/catalog/accessories" },
+            ]}
+            brandName="DARK BOX"
+            />
+        </div>
         
         <div className="pt-32 pb-20">
-            <ProductCardTwo
+            <ProductCardThree
                 animationType="slide-up"
                 textboxLayout="default"
-                gridVariant="uniform-all-items-equal"
+                gridVariant="one-large-left-three-stacked-right"
                 useInvertedBackground={false}
-                title={`Товар: ${params.slug}`}
+                title={slug.replace(/-/g, ' ').toUpperCase()}
-                description="Детальная информация о выбранном товаре."
+                description="Индивидуальная карточка товара с полной спецификацией и информацией о наличии. Закажите через Telegram для быстрого ответа."
                 products={[
-                    { id: params.slug, brand: "Premium", name: params.slug.replace(/-/g, ' ').toUpperCase(), price: "Уточняйте в TG", rating: 5, reviewCount: "0", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005704.jpg?_wi=2" }
+                    { 
+                      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>
 
-        <FooterLogoEmphasis
+        <div id="footer" data-section="footer">
-          columns={[
+            <FooterLogoEmphasis
-            { items: [{ label: "Главная", href: "/" }, { label: "Контакты", href: "/contacts" }] },
+            columns={[
-          ]}
+                { items: [{ label: "Telegram Канал", href: "https://t.me/darkbox" }, { label: "Администратор", href: "https://t.me/darkbox_admin" }] },
-          logoText="DARK BOX"
+                { items: [{ label: "Адрес: ул. Мира, 44" }, { label: "Часы работы: 11-21" }] },
-        />
+            ]}
+            logoText="DARK BOX"
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );