Update src/app/products/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,17 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Award, CheckCircle, Facebook, Instagram, Sparkles } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,267 +28,132 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Shop",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Spicy Gals"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Products", id: "/products" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Spicy Gals"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Spicy Fashion, Premium Quality, Always On Trend"
-      description="Discover the latest womens styles at Spicy Gals. Shop online or visit us at Nehru Nagar, Bhilai—where bold fashion meets everyday elegance."
-      buttons={[
-        {
-          text: "Shop Now",
-          href: "#products",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/pretty-brunette-girl-swimsuit-covering-face-with-straw-hat-playfully-looking-camera-beach-bed-with-transparent-curtains_574295-2281.jpg"
-      imageAlt="Spicy Gals Fashion Showcase"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardScroll
+            background={{ variant: "gradient-bars" }}
+            title="Spicy Fashion, Premium Quality, Always On Trend"
+            description="Discover the latest womens styles at Spicy Gals. Shop online or visit us at Nehru Nagar, Bhilai—where bold fashion meets everyday elegance."
+            buttons={[{ text: "Shop Now", href: "/products" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/pretty-brunette-girl-swimsuit-covering-face-with-straw-hat-playfully-looking-camera-beach-bed-with-transparent-curtains_574295-2281.jpg"
+            imageAlt="Spicy Gals Fashion Showcase"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={true}
-      title="Bhilai’s Premier Destination for Trendy Fashion"
-      buttons={[
-        {
-          text: "Visit Store",
-          href: "#contact",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextAbout
+            useInvertedBackground={true}
+            title="Bhilai’s Premier Destination for Trendy Fashion"
+            buttons={[{ text: "Visit Store", href: "#contact" }]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Exclusive Designs",
-          subtitle: "Unique pieces you won't find anywhere else in Bhilai.",
-          category: "Curated",
-          value: "1",
-        },
-        {
-          id: "f2",
-          title: "Premium Quality",
-          subtitle: "High-end fabrics that feel as good as they look.",
-          category: "Quality",
-          value: "2",
-        },
-        {
-          id: "f3",
-          title: "Trendy Arrivals",
-          subtitle: "Fresh collections updated weekly to keep your style fresh.",
-          category: "Style",
-          value: "3",
-        },
-      ]}
-      title="Why Spicy Gals?"
-      description="Fashion that fits your vibe and your life."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { id: "f1", title: "Exclusive Designs", subtitle: "Unique pieces you won't find anywhere else in Bhilai.", category: "Curated", value: "1" },
+              { id: "f2", title: "Premium Quality", subtitle: "High-end fabrics that feel as good as they look.", category: "Quality", value: "2" },
+              { id: "f3", title: "Trendy Arrivals", subtitle: "Fresh collections updated weekly to keep your style fresh.", category: "Style", value: "3" },
+            ]}
+            title="Why Spicy Gals?"
+            description="Fashion that fits your vibe and your life."
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "Casual Chic Top",
-          price: "₹899",
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-black-african-american-woman-stylish-outfit-green-studio-background_285396-10817.jpg",
-        },
-        {
-          id: "p2",
-          name: "Premium Cotton Dress",
-          price: "₹1599",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-woman-long-grey-dress_613910-7108.jpg",
-        },
-        {
-          id: "p3",
-          name: "Everyday Elegance Set",
-          price: "₹1299",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-client-wheelchair-examining-clothes-racks-retail-store_482257-118472.jpg",
-        },
-        {
-          id: "p4",
-          name: "Modern Workwear Blouse",
-          price: "₹999",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-elegant-pensive-girl-wearing-trendy-warm-outfit-raising-leg-up-looking-away-while-leaning-street-lantern-cold-winter-weather_8353-12631.jpg",
-        },
-        {
-          id: "p5",
-          name: "Trendsetter Skirt",
-          price: "₹1199",
-          imageSrc: "http://img.b2bpic.net/free-photo/trendy-lady-with-pink-sunglasses-posing-outside-shorthaired-girl-beige-jacket-jeans-tshirt-looking-into-camera-white-background_197531-29363.jpg",
-        },
-        {
-          id: "p6",
-          name: "Boho Evening Wrap",
-          price: "₹1799",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-casual-african-american-man-jeans-jacket-black-beret-clothes-store-looking-new-military-shirt_627829-1676.jpg",
-        },
-      ]}
-      title="Latest Collections"
-      description="Explore our curated picks for the season."
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={true}
+            products={[
+              { id: "p1", name: "Casual Chic Top", price: "₹899", imageSrc: "https://www.instagram.com/p/C9_12345/media/?size=l&_wi=1" },
+              { id: "p2", name: "Premium Cotton Dress", price: "₹1599", imageSrc: "https://www.instagram.com/p/C9_67890/media/?size=l&_wi=1" },
+              { id: "p3", name: "Everyday Elegance Set", price: "₹1299", imageSrc: "https://www.instagram.com/p/C9_abcde/media/?size=l&_wi=1" },
+              { id: "p4", name: "Modern Workwear Blouse", price: "₹999", imageSrc: "https://www.instagram.com/p/C9_fghij/media/?size=l" },
+            ]}
+            title="Latest Collections"
+            description="Explore our curated picks for the season."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          title: "Happy Customers",
-          value: "5000+",
-          icon: Sparkles,
-        },
-        {
-          id: "m2",
-          title: "Styles Curated",
-          value: "200+",
-          icon: CheckCircle,
-        },
-        {
-          id: "m3",
-          title: "Years in Style",
-          value: "5",
-          icon: Award,
-        },
-      ]}
-      title="Our Community"
-      description="Growing fashionably in Bhilai."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            title="Our Community"
+            tag="Stats"
+            metrics={[
+              { id: "m1", value: "5000+", description: "Happy Customers" },
+              { id: "m2", value: "200+", description: "Styles Curated" },
+              { id: "m3", value: "5", description: "Years in Style" },
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Priya S.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-shopping_23-2149241334.jpg",
-        },
-        {
-          id: "2",
-          name: "Ananya K.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-sexy-modern-businesswoman-model-hot-beautiful-woman-white-suit-posing-street-background-fashion-female-walking-outdoors-sunglasses_158538-20202.jpg",
-        },
-        {
-          id: "3",
-          name: "Riya M.",
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-buying-clothes-apparel-store_23-2148101715.jpg",
-        },
-        {
-          id: "4",
-          name: "Sneha P.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-shop-owner-her-modern-clothing-store-young-african-american-woman-standing-near-hangers-with-male-shirts-trousers-underwear-fashion-clothes-business-startup-shopping-concept_74855-21499.jpg",
-        },
-        {
-          id: "5",
-          name: "Divya R.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-trying-out-new-clothes_23-2148660714.jpg",
-        },
-      ]}
-      cardTitle="What Our Gals Say"
-      cardAnimation="slide-up"
-      cardTag="Testimonials"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            title="What Our Gals Say"
+            description="Hear from our wonderful community."
+            textboxLayout="default"
+            useInvertedBackground={true}
+            showRating={true}
+            animationType="slide-up"
+            testimonials={[
+              { id: "1", name: "Priya S.", handle: "@priyas", testimonial: "Love the trendy collection!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-shopping_23-2149241334.jpg" },
+              { id: "2", name: "Ananya K.", handle: "@ananyak", testimonial: "Quality is top-notch.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-sexy-modern-businesswoman-model-hot-beautiful-woman-white-suit-posing-street-background-fashion-female-walking-outdoors-sunglasses_158538-20202.jpg" },
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Where is the store located?",
-          content: "We are located in Nehru Nagar, Bhilai. Visit us for a personalized shopping experience!",
-        },
-        {
-          id: "q2",
-          title: "Can I shop online?",
-          content: "Yes! You can browse our collection here and place your order online.",
-        },
-        {
-          id: "q3",
-          title: "Do you offer returns?",
-          content: "We offer easy returns within 7 days of purchase for unused items.",
-        },
-      ]}
-      sideTitle="Shopping with Spicy Gals"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            faqs={[
+              { id: "q1", title: "Where is the store located?", content: "We are located in Nehru Nagar, Bhilai." },
+              { id: "q2", title: "Can I shop online?", content: "Yes, browse and order online." },
+              { id: "q3", title: "Do you offer returns?", content: "Easy returns within 7 days." },
+            ]}
+            title="Shopping with Spicy Gals"
+            description="Get answers to your common questions."
+            faqsAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contact"
-      title="Visit Us Today"
-      description="Swing by Nehru Nagar and experience the latest trends firsthand."
-      imageSrc="http://img.b2bpic.net/free-photo/elegant-women-with-shopping-bags-city_1157-26763.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Contact"
+            title="Visit Us Today"
+            description="Swing by Nehru Nagar and experience the latest trends firsthand."
+            buttons={[{ text: "Visit Us", href: "#" }]}
+            background={{ variant: "gradient-bars" }}
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Spicy Gals"
-      copyrightText="© 2025 Spicy Gals | Retail"
-      socialLinks={[
-        {
-          icon: Instagram,
-          href: "#",
-          ariaLabel: "Instagram",
-        },
-        {
-          icon: Facebook,
-          href: "#",
-          ariaLabel: "Facebook",
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Spicy Gals"
+            leftLink={{ text: "Privacy", href: "#" }}
+            rightLink={{ text: "Terms", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="largeSmallSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Products", id: "/products" },
+            ]}
+            brandName="Spicy Gals"
+        />
+        <div className="pt-32 pb-20">
+            <ProductCatalog
+                layout="page"
+                products={[
+                    { id: "1", name: "Summer Floral Dress", price: "₹1499", rating: 5, imageSrc: "https://www.instagram.com/p/C9_12345/media/?size=l&_wi=2" },
+                    { id: "2", name: "Urban Denim Jacket", price: "₹1999", rating: 4, imageSrc: "https://www.instagram.com/p/C9_67890/media/?size=l&_wi=2" },
+                    { id: "3", name: "Casual White Tee", price: "₹599", rating: 5, imageSrc: "https://www.instagram.com/p/C9_abcde/media/?size=l&_wi=2" }
+                ]}
+            />
+        </div>
+        <FooterLogoReveal
+            logoText="Spicy Gals"
+            leftLink={{ text: "Privacy", href: "#" }}
+            rightLink={{ text: "Terms", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}