From c23dd06cb7c9a88400847659ed1fa5b0651eca18 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 1 May 2026 10:11:47 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 173 +++++++++++++++--------------------------------
 1 file changed, 56 insertions(+), 117 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c83d351..0a24688 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,15 +4,16 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Shield, Sparkles, Star } from "lucide-react";
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import { Shield, Sparkles, Star, Zap, Palette, Users } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,12 +33,9 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Catalog",          id: "products"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "Catalog", id: "products" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Grayline"
     />
@@ -45,25 +43,14 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
-        variant: "sparkles-gradient"}}
+      background={{ variant: "sparkles-gradient" }}
       title="Grayline: Inspired Silhouettes"
       description="A collection of inspired silhouettes crafted from the finest fibers."
-      buttons={[
-        {
-          text: "Shop Now",          href: "#products"},
-      ]}
+      buttons={[{ text: "Shop Now", href: "#products" }]}
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together-with-camera_23-2149442899.jpg",          imageAlt: "Streetwear vibe 1"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/paint-background-poster-dirty-spotted_1194-8092.jpg",          imageAlt: "Streetwear vibe 2"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together_23-2149442898.jpg",          imageAlt: "Streetwear vibe 3"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-african-american-woman-printed-tshirt-posed-indoor-steel-stairs_627829-2160.jpg",          imageAlt: "Streetwear vibe 4"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/wavy-smoke-black-background_23-2148210927.jpg",          imageAlt: "Streetwear vibe 5"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together-with-camera_23-2149442899.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/paint-background-poster-dirty-spotted_1194-8092.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together_23-2149442898.jpg" }
       ]}
       mediaAnimation="blur-reveal"
     />
@@ -74,108 +61,78 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="The Grayline Standard"
       metrics={[
-        {
-          icon: Sparkles,
-          label: "Designs Crafted",          value: "150+"},
-        {
-          icon: Shield,
-          label: "Quality Grade",          value: "A++"},
-        {
-          icon: Star,
-          label: "Happy Fans",          value: "10K+"},
+        { icon: Sparkles, label: "Designs Crafted", value: "150+" },
+        { icon: Shield, label: "Quality Grade", value: "A++" },
+        { icon: Star, label: "Happy Fans", value: "10K+" },
       ]}
       metricsAnimation="slide-up"
     />
   </div>
 
+  <div id="design-showcase" data-section="design-showcase">
+      <MetricCardEleven
+        animationType="slide-up"
+        title="Design Philosophy"
+        description="We believe in the intersection of classic tailoring and urban edge."
+        metrics={[
+            { id: "d1", value: "Avant-Garde", title: "Aesthetic", description: "Experimental silhouettes", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-touching-marble-bust_171337-16535.jpg" },
+            { id: "d2", value: "Sustainable", title: "Material", description: "Ethically sourced textiles", imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17674.jpg" }
+        ]}
+      />
+  </div>
+
   <div id="features" data-section="features">
       <FeatureCardSeven
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Premium Fibers",          description: "Ethically sourced materials designed for maximum comfort and longevity.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-touching-marble-bust_171337-16535.jpg",          imageAlt: "Fiber detail"},
-        {
-          title: "Modern Silhouettes",          description: "Unique cuts that push the boundaries of streetwear.",          imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17674.jpg",          imageAlt: "Silhouette detail"},
-        {
-          title: "Limited Drops",          description: "Each piece is part of a curated, limited-release collection.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8q7h58",          imageAlt: "Drop detail"},
+        { title: "Premium Fibers", description: "Ethically sourced materials.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-touching-marble-bust_171337-16535.jpg" },
+        { title: "Modern Silhouettes", description: "Unique cuts.", imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17674.jpg" },
       ]}
       title="Redefining Drip"
-      description="Exclusively crafted for the modern generation."
+      description="Exclusively crafted."
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardFour
+      <ProductCardTwo
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",          name: "Luxury Hoodie",          price: "$150",          variant: "Midnight",          imageSrc: "http://img.b2bpic.net/free-photo/teenager-outside-enjoying-music-headphones-while-sitting-skateboard_23-2148758496.jpg"},
-        {
-          id: "p2",          name: "Tech Joggers",          price: "$120",          variant: "Slate",          imageSrc: "http://img.b2bpic.net/free-photo/female-holding-hand-forehead-orange-hoodie-looking-forgetful_176474-86783.jpg"},
-        {
-          id: "p3",          name: "Graphic Icon Tee",          price: "$85",          variant: "White",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=09auns"},
-        {
-          id: "p4",          name: "Bomber Jacket",          price: "$290",          variant: "Black",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-k-pop-clothing-urban-scene_23-2149096946.jpg"},
-        {
-          id: "p5",          name: "Chain Accessory",          price: "$65",          variant: "Silver",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-friends-posing-together_52683-88926.jpg"},
-        {
-          id: "p6",          name: "Designer Kicks",          price: "$350",          variant: "Neon Blue",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-with-skateboard_23-2147995905.jpg"},
-      ]}
       title="Shop the Collection"
       description="Browse our latest high-end apparel."
-    />
-  </div>
-
-  <div id="social" data-section="social">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Vogue Street",        "Hypebeast",        "Highsnobiety",        "Complex",        "GQ Style",        "The Drip Hub",        "Urban Culture"]}
-      title="Seen on the Streets"
-      description="Featured in leading fashion circles."
+      products={[
+        { id: "p1", brand: "Grayline", name: "Luxury Hoodie", price: "$150", rating: 5, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/teenager-outside-enjoying-music-headphones-while-sitting-skateboard_23-2148758496.jpg" },
+        { id: "p2", brand: "Grayline", name: "Tech Joggers", price: "$120", rating: 4, reviewCount: "28", imageSrc: "http://img.b2bpic.net/free-photo/female-holding-hand-forehead-orange-hoodie-looking-forgetful_176474-86783.jpg" }
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="split"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",          title: "Amazing quality!",          quote: "The fit is absolutely perfect, never seen anything like it.",          name: "Alex R.",          role: "Fashion Influencer",          imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-violet-dress-cap-posed-outdoor-sitting-bench-making-selfie-phone_627829-13729.jpg"},
-        {
-          id: "t2",          title: "New favorite brand",          quote: "Grayline defines the modern streetwear aesthetic.",          name: "Jamie L.",          role: "Designer",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5454.jpg"},
-        {
-          id: "t3",          title: "Insane drip",          quote: "The textures and cuts are premium level.",          name: "Casey P.",          role: "Creator",          imageSrc: "http://img.b2bpic.net/free-photo/blogger-influencer-shooting-herself_1268-21898.jpg"},
-        {
-          id: "t4",          title: "Worth every cent",          quote: "Quality exceeds expectations, highly recommend.",          name: "Jordan M.",          role: "Model",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-people-2000s-fashion-style_23-2149442832.jpg"},
-        {
-          id: "t5",          title: "Top tier apparel",          quote: "Finally, streetwear that feels as good as it looks.",          name: "Sam K.",          role: "Photographer",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-skateboard_23-2148937849.jpg"},
-      ]}
-      title="What They Say"
-      description="The community loves the Grayline aesthetic."
-    />
+      <TestimonialCardTwelve
+        cardTitle="Community Favorites"
+        cardTag="Reviews"
+        cardAnimation="slide-up"
+        useInvertedBackground={true}
+        testimonials={[
+            { id: "t1", name: "Alex R.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-violet-dress-cap-posed-outdoor-sitting-bench-making-selfie-phone_627829-13729.jpg" },
+            { id: "t2", name: "Jamie L.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5454.jpg" }
+        ]}
+      />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqSplitMedia
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",          title: "How long is shipping?",          content: "Most orders are shipped within 48 hours."},
-        {
-          id: "f2",          title: "Do you offer returns?",          content: "Yes, within 30 days of purchase in original condition."},
-        {
-          id: "f3",          title: "Where are you based?",          content: "We operate from global creative hubs to serve you best."},
+        { id: "f1", title: "Shipping?", content: "48 hours." },
+        { id: "f2", title: "Returns?", content: "30 days." },
       ]}
-      sideTitle="Grayline Questions"
+      title="Questions"
       faqsAnimation="blur-reveal"
+      imageSrc="http://img.b2bpic.net/free-photo/town-square_1359-1083.jpg"
     />
   </div>
 
@@ -183,37 +140,19 @@ export default function LandingPage() {
       <ContactSplit
       tag="Connect"
       useInvertedBackground={true}
-      background={{
-        variant: "plain"}}
+      background={{ variant: "plain" }}
       title="Join the Drop List"
-      description="Get exclusive early access to our limited collections."
+      description="Get exclusive early access."
       imageSrc="http://img.b2bpic.net/free-photo/town-square_1359-1083.jpg"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
-          title: "Shop",          items: [
-            {
-              label: "All",              href: "#products"},
-            {
-              label: "New Arrivals",              href: "#"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "Contact Us",              href: "#contact"},
-            {
-              label: "FAQ",              href: "#"},
-          ],
-        },
+        { title: "Shop", items: [{ label: "All", href: "#products" }] },
+        { title: "Support", items: [{ label: "Contact Us", href: "#contact" }] },
       ]}
-      bottomLeftText="© 2024 Grayline"
-      bottomRightText="All rights reserved"
     />
   </div>
       </ReactLenis>
-- 
2.49.1