src/app/page.tsx

@@ -32,9 +32,9 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",          id: "#hero"},
+          name: "Home",          id: "/"},
         {
-          name: "Suppliers",          id: "#catalog"},
+          name: "Suppliers",          id: "/suppliers"},
         {
           name: "Pricing",          id: "#pricing"},
         {
@@ -195,7 +195,7 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Suppliers",              href: "#catalog"},
+              label: "Suppliers",              href: "/suppliers"},
             {
               label: "Pricing",              href: "#pricing"},
           ],

src/app/suppliers/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function SuppliersPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Suppliers", id: "/suppliers" },
+              { name: "Pricing", id: "/#pricing" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="FashionSource"
+          />
+        </div>
+
+        <div id="suppliers-list" data-section="product">
+          <ProductCardFour
+            title="All Verified Suppliers"
+            description="Our full directory of premium clothing manufacturers."
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            products={[
+              { id: "s1", name: "Premium Silk Mill", price: "High Quality", variant: "Silk", imageSrc: "http://img.b2bpic.net/free-photo/metalic-fabric-texture_53876-14494.jpg" },
+              { id: "s2", name: "Denim Fabric Plant", price: "Low MOQ", variant: "Denim", imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-concept-with-piles-clothes_23-2150871210.jpg" },
+              { id: "s3", name: "Wool & Knit Works", price: "Fast Shipping", variant: "Knit", imageSrc: "http://img.b2bpic.net/free-photo/various-type-fabric-clothes-shop_23-2148175735.jpg" },
+              { id: "s4", name: "Leather Tannery", price: "Verified", variant: "Leather", imageSrc: "http://img.b2bpic.net/free-photo/trendy-color-swatches-with-different-elements_23-2150169906.jpg" },
+              { id: "s5", name: "Linen Specialist", price: "Organic", variant: "Linen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-fashion-designer-adjusting-fabric-weighing-scale-machine-workshop_23-2148180384.jpg" },
+              { id: "s6", name: "Performance Textile Lab", price: "Technical", variant: "Synthetics", imageSrc: "http://img.b2bpic.net/free-photo/still-life-yoga-equipment_23-2151725265.jpg" },
+            ]}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Get Access"
+            title="Unlock Full Contact Details"
+            description="Ready to work with these suppliers? Join now for full access."
+            buttons={[{ text: "Join Today", href: "/#pricing" }]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Suppliers", href: "/suppliers" }] },
+              { items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
+            ]}
+            logoText="FashionSource"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}