Update src/app/account/page.tsx

Merge version_1 into main

src/app/account/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import TextBox from '@/components/Textbox';
+
+export default function AccountPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Account", id: "/account" },
+            ]}
+            brandName="AffiliMarket"
+          />
+        </div>
+        <div className="pt-32 pb-20 px-6 container mx-auto space-y-16">
+          <TextBox 
+            title="Account Management"
+            description="Manage your profile, view orders, and manage affiliate links."
+            textboxLayout="split"
+          />
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="p-6 rounded-lg bg-card shadow-sm border border-border">Profile Settings</div>
+            <div className="p-6 rounded-lg bg-card shadow-sm border border-border">Order History</div>
+            <div className="p-6 rounded-lg bg-card shadow-sm border border-border">Affiliate Links</div>
+          </div>
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="AffiliMarket"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { LayoutDashboard, Link, TrendingUp, BarChart3, Settings } from "lucide-react";
+
+export default function AffiliateDashboard() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="solid"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Dashboard", id: "/dashboard" },
+            ]}
+            brandName="AffiliMarket"
+          />
+        </div>
+
+        <div id="metrics" data-section="metrics">
+          <MetricCardTwo
+            title="Performance Analytics"
+            description="Real-time insights into your affiliate network performance."
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "clicks", value: "12.4k", description: "Total Clicks" },
+              { id: "conv", value: "4.2%", description: "Conversion Rate" },
+              { id: "rev", value: "$8,240", description: "Commission Earned" },
+            ]}
+          />
+        </div>
+
+        <div id="management" data-section="management">
+          <FeatureCardTwentyFive
+            title="Affiliate Management"
+            description="Easily manage your links, track conversions, and access marketing assets."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            features={[
+              { 
+                title: "Link Tracking", 
+                description: "Generate and manage unique referral links for all campaigns.", 
+                icon: Link, 
+                mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-stylus-pen-laptop-desktop-close-up_169016-47030.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-stylus-pen-laptop-desktop-close-up_169016-47030.jpg" }]
+              },
+              { 
+                title: "Commission Tracking", 
+                description: "Real-time monitoring of earned commissions across all networks.", 
+                icon: TrendingUp, 
+                mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/ai-robot-interacting-with-futuristic-data-interface_23-2152005489.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/ai-robot-interacting-with-futuristic-data-interface_23-2152005489.jpg" }]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="AffiliMarket"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -31,14 +31,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Features", id: "/#features" },
-          name: "Features",          id: "#features"},
+        { name: "Products", id: "/#products" },
-        {
+        { name: "Pricing", id: "/#pricing" },
-          name: "Products",          id: "#products"},
+        { name: "Account", id: "/account" },
-        {
+        { name: "Contact", id: "/#contact" },
-          name: "Pricing",          id: "#pricing"},
-        {
-          name: "Contact",          id: "#contact"},
       ]}
       brandName="AffiliMarket"
     />
@@ -47,56 +44,18 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Scale Your Affiliate Revenue"
       description="The enterprise-grade platform to manage your affiliate networks and automate bulk product logistics seamlessly."
       testimonials={[
-        {
+        { name: "Sarah J.", handle: "@sarahj", testimonial: "Increased our affiliate revenue by 300% in months.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg" },
-          name: "Sarah J.",          handle: "@sarahj",          testimonial: "Increased our affiliate revenue by 300% in months.",          rating: 5,
+        { name: "Mike Chen", handle: "@mchen", testimonial: "Bulk management features are game-changing.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg"},
+        { name: "Alex R.", handle: "@alexr", testimonial: "Easiest platform to use for bulk logistics.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-with-arms-crossed-outside-modern-office-building_1139-1074.jpg" },
-        {
+        { name: "Emily Kim", handle: "@ekim", testimonial: "Support is top tier and performance is flawless.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg" },
-          name: "Mike Chen",          handle: "@mchen",          testimonial: "Bulk management features are game-changing.",          rating: 5,
+        { name: "David W.", handle: "@dwong", testimonial: "A must-have for any large scale affiliate network.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/self-assured-business-leader-conference-room_1262-3068.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg"},
-        {
-          name: "Alex R.",          handle: "@alexr",          testimonial: "Easiest platform to use for bulk logistics.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-with-arms-crossed-outside-modern-office-building_1139-1074.jpg"},
-        {
-          name: "Emily Kim",          handle: "@ekim",          testimonial: "Support is top tier and performance is flawless.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg"},
-        {
-          name: "David W.",          handle: "@dwong",          testimonial: "A must-have for any large scale affiliate network.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/self-assured-business-leader-conference-room_1262-3068.jpg"},
-      ]}
-      buttons={[
-        {
-          text: "Start Free Trial",          href: "#pricing"},
       ]}
+      buttons={[{ text: "Start Free Trial", href: "/#pricing" }]}
       imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-stylus-pen-laptop-desktop-close-up_169016-47030.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg",          alt: "Sarah"},
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg",          alt: "Mike"},
-        {
-          src: "http://img.b2bpic.net/free-photo/senior-businessman-with-arms-crossed-outside-modern-office-building_1139-1074.jpg",          alt: "Alex"},
-        {
-          src: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg",          alt: "Emily"},
-        {
-          src: "http://img.b2bpic.net/free-photo/self-assured-business-leader-conference-room_1262-3068.jpg",          alt: "David"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Trusted by 500+ networks"},
-        {
-          type: "text",          text: "Automated Logistics"},
-        {
-          type: "text",          text: "Precision Tracking"},
-        {
-          type: "text",          text: "24/7 Global Support"},
-        {
-          type: "text",          text: "Enterprise Analytics"},
-      ]}
     />
   </div>
 
@@ -104,8 +63,7 @@ export default function LandingPage() {
       <TextSplitAbout
       useInvertedBackground={false}
       title="Why AffiliMarket"
-      description={[
+      description={["We provide the infrastructure for growth.", "Manage thousands of products with ease.", "Built for high-volume performance."]}
-        "We provide the infrastructure for growth.",        "Manage thousands of products with ease.",        "Built for high-volume performance."]}
     />
   </div>
 
@@ -115,45 +73,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Automated Tracking", description: "Precision tracking across all networks.", media: { imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599363.jpg" }, items: [{ icon: Zap, text: "Real-time updates" }, { icon: Shield, text: "Secure data" }], reverse: false },
-          title: "Automated Tracking",          description: "Precision tracking across all networks.",          media: {
+        { title: "Bulk Automation", description: "Streamline product logistics efficiently.", media: { imageSrc: "http://img.b2bpic.net/free-photo/ai-robot-interacting-with-futuristic-data-interface_23-2152005489.jpg?_wi=1" }, items: [{ icon: Bot, text: "Reduce human error" }, { icon: CheckCircle, text: "Instant fulfillment" }], reverse: true },
-            imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599363.jpg"},
+        { title: "Growth Analytics", description: "Powerful metrics to optimize ROI.", media: { imageSrc: "http://img.b2bpic.net/free-photo/minimalist-abstract-gradient-green-layers-paper_23-2148793009.jpg?_wi=1" }, items: [{ icon: BarChart, text: "Deep insights" }, { icon: Award, text: "ROI-focused" }], reverse: false },
-          items: [
-            {
-              icon: Zap,
-              text: "Real-time updates"},
-            {
-              icon: Shield,
-              text: "Secure data"},
-          ],
-          reverse: false,
-        },
-        {
-          title: "Bulk Automation",          description: "Streamline product logistics efficiently.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/ai-robot-interacting-with-futuristic-data-interface_23-2152005489.jpg?_wi=1"},
-          items: [
-            {
-              icon: Bot,
-              text: "Reduce human error"},
-            {
-              icon: CheckCircle,
-              text: "Instant fulfillment"},
-          ],
-          reverse: true,
-        },
-        {
-          title: "Growth Analytics",          description: "Powerful metrics to optimize ROI.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/minimalist-abstract-gradient-green-layers-paper_23-2148793009.jpg?_wi=1"},
-          items: [
-            {
-              icon: BarChart,
-              text: "Deep insights"},
-            {
-              icon: Award,
-              text: "ROI-focused"},
-          ],
-          reverse: false,
-        },
       ]}
       title="Built for Scale"
       description="Everything you need to run high-volume affiliate campaigns."
@@ -167,18 +89,12 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Tech Gadget Bundle", price: "$499", variant: "Electronics", imageSrc: "http://img.b2bpic.net/free-photo/purple-product-box_187299-46403.jpg?_wi=1" },
-          id: "p1",          name: "Tech Gadget Bundle",          price: "$499",          variant: "Electronics",          imageSrc: "http://img.b2bpic.net/free-photo/purple-product-box_187299-46403.jpg?_wi=1"},
+        { id: "p2", name: "Home Essentials Kit", price: "$299", variant: "Home", imageSrc: "http://img.b2bpic.net/free-photo/carton-box-sofa_23-2147801239.jpg?_wi=1" },
-        {
+        { id: "p3", name: "Software Starter", price: "$149", variant: "Software", imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072195.jpg?_wi=1" },
-          id: "p2",          name: "Home Essentials Kit",          price: "$299",          variant: "Home",          imageSrc: "http://img.b2bpic.net/free-photo/carton-box-sofa_23-2147801239.jpg?_wi=1"},
+        { id: "p4", name: "Kitchen Ware Bulk", price: "$349", variant: "Kitchen", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-event-sale-elements_23-2148675059.jpg" },
-        {
+        { id: "p5", name: "Garden Tools Set", price: "$199", variant: "Garden", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-purple-tin-cans-with-copy-space_23-2148785262.jpg" },
-          id: "p3",          name: "Software Starter",          price: "$149",          variant: "Software",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072195.jpg?_wi=1"},
+        { id: "p6", name: "Office Furniture", price: "$899", variant: "Office", imageSrc: "http://img.b2bpic.net/free-photo/front-view-stacked-plastic-food-receptacles_23-2148487833.jpg" },
-        {
-          id: "p4",          name: "Kitchen Ware Bulk",          price: "$349",          variant: "Kitchen",          imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-event-sale-elements_23-2148675059.jpg"},
-        {
-          id: "p5",          name: "Garden Tools Set",          price: "$199",          variant: "Garden",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-purple-tin-cans-with-copy-space_23-2148785262.jpg"},
-        {
-          id: "p6",          name: "Office Furniture",          price: "$899",          variant: "Office",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-stacked-plastic-food-receptacles_23-2148487833.jpg"},
       ]}
       title="Featured Bulk Products"
       description="Ready-to-sell bulk goods for your affiliate campaigns."
@@ -191,30 +107,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
+        { id: "basic", badge: "Entry", price: "$99", subtitle: "Perfect for starters.", buttons: [{ text: "Get Started" }], features: ["1k Monthly Sales", "Basic Support", "Real-time Tracking"] },
-          id: "basic",          badge: "Entry",          price: "$99",          subtitle: "Perfect for starters.",          buttons: [
+        { id: "pro", badge: "Pro", price: "$299", subtitle: "Best for growth teams.", buttons: [{ text: "Get Started" }], features: ["10k Monthly Sales", "Priority Support", "Advanced Analytics"] },
-            {
+        { id: "enterprise", badge: "Enterprise", price: "$999", subtitle: "For large operations.", buttons: [{ text: "Contact Sales" }], features: ["Unlimited Sales", "24/7 Dedicated Support", "Custom Integrations"] },
-              text: "Get Started"},
-          ],
-          features: [
-            "1k Monthly Sales",            "Basic Support",            "Real-time Tracking"],
-        },
-        {
-          id: "pro",          badge: "Pro",          price: "$299",          subtitle: "Best for growth teams.",          buttons: [
-            {
-              text: "Get Started"},
-          ],
-          features: [
-            "10k Monthly Sales",            "Priority Support",            "Advanced Analytics"],
-        },
-        {
-          id: "enterprise",          badge: "Enterprise",          price: "$999",          subtitle: "For large operations.",          buttons: [
-            {
-              text: "Contact Sales"},
-          ],
-          features: [
-            "Unlimited Sales",            "24/7 Dedicated Support",            "Custom Integrations"],
-        },
       ]}
       title="Scaling Plans"
       description="Plans designed for teams and high-volume networks."
@@ -226,16 +121,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", name: "John Doe", date: "Jan 2024", title: "CEO", quote: "The best platform for managing our networks.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg" },
-          id: "1",          name: "John Doe",          date: "Jan 2024",          title: "CEO",          quote: "The best platform for managing our networks.",          tag: "Pro",          avatarSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/ai-robot-interacting-with-futuristic-data-interface_23-2152005489.jpg?_wi=2",          imageAlt: "automation icon tech"},
+        { id: "2", name: "Jane Smith", date: "Feb 2024", title: "CMO", quote: "Bulk logistics made simple and efficient.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg" },
-        {
-          id: "2",          name: "Jane Smith",          date: "Feb 2024",          title: "CMO",          quote: "Bulk logistics made simple and efficient.",          tag: "Pro",          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-abstract-gradient-green-layers-paper_23-2148793009.jpg?_wi=2",          imageAlt: "growth chart concept"},
-        {
-          id: "3",          name: "Robert P.",          date: "Mar 2024",          title: "Founder",          quote: "Impressive performance even at scale.",          tag: "Enterprise",          avatarSrc: "http://img.b2bpic.net/free-photo/senior-businessman-with-arms-crossed-outside-modern-office-building_1139-1074.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/purple-product-box_187299-46403.jpg?_wi=2",          imageAlt: "product mockup box"},
-        {
-          id: "4",          name: "Anna W.",          date: "Apr 2024",          title: "Ops Manager",          quote: "Automation is simply world-class here.",          tag: "Pro",          avatarSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/carton-box-sofa_23-2147801239.jpg?_wi=2",          imageAlt: "electronics packaging bundle"},
-        {
-          id: "5",          name: "Chris B.",          date: "May 2024",          title: "Developer",          quote: "Integrations are so clean and easy.",          tag: "Enterprise",          avatarSrc: "http://img.b2bpic.net/free-photo/self-assured-business-leader-conference-room_1262-3068.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072195.jpg?_wi=2",          imageAlt: "software box package"},
       ]}
       title="Client Success"
       description="Hear from those growing with AffiliMarket."
@@ -247,12 +134,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Get Started Today"
       description="Ready to scale your affiliate business? Talk to our experts."
-      inputs={[
+      inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
-        {
-          name: "name",          type: "text",          placeholder: "Name"},
-        {
-          name: "email",          type: "email",          placeholder: "Email"},
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/empty-modern-office-with-focus-recruitment-process-hiring-new-personnel_482257-112386.jpg"
     />
   </div>
@@ -260,10 +142,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="AffiliMarket"
-      leftLink={{
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-        text: "Privacy Policy",        href: "#"}}
+      rightLink={{ text: "Terms of Service", href: "#" }}
-      rightLink={{
-        text: "Terms of Service",        href: "#"}}
     />
   </div>
       </ReactLenis>

src/app/product-catalog/page.tsx

@@ -0,0 +1,62 @@
+"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';
+import { useState } from "react";
+
+export default function ProductCatalogPage() {
+  const [search, setSearch] = useState("");
+  
+  const products = [
+    { id: "1", name: "Tech Gadget Bundle", price: "$499", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/purple-product-box_187299-46403.jpg?_wi=1", category: "Electronics" },
+    { id: "2", name: "Home Essentials Kit", price: "$299", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/carton-box-sofa_23-2147801239.jpg?_wi=1", category: "Home" },
+    { id: "3", name: "Software Starter", price: "$149", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072195.jpg?_wi=1", category: "Software" },
+  ];
+
+  const filters = [
+    { label: "Category", options: ["All", "Electronics", "Home", "Software"], selected: "All", onChange: (v: string) => console.log(v) },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="solid"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[{ name: "Home", id: "/" }, { name: "Catalog", id: "/product-catalog" }]}
+            brandName="AffiliMarket"
+          />
+        </div>
+        <div id="catalog" data-section="catalog" className="py-20">
+          <ProductCatalog 
+            layout="page"
+            products={products}
+            searchValue={search}
+            onSearchChange={setSearch}
+            filters={filters}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="AffiliMarket"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}