Merge version_4 into main

Merge version_4 into main

src/app/ai-image-generator/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { Wand2 } from "lucide-react";
+
+export default function AiImageGeneratorPage() {
+  const navItems = [
+    {
+      name: "Home",      id: "/"
+    },
+    {
+      name: "About",      id: "/#about"
+    },
+    {
+      name: "Features",      id: "/#features"
+    },
+    {
+      name: "Products",      id: "/#products"
+    },
+    {
+      name: "Pricing",      id: "/#pricing"
+    },
+    {
+      name: "Testimonials",      id: "/#testimonials"
+    },
+    {
+      name: "FAQ",      id: "/#faq"
+    },
+    {
+      name: "Contact",      id: "/#contact"
+    },
+    {
+      name: "AI Image Generator",      id: "/ai-image-generator"
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="noise"
+      cardStyle="solid"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={navItems}
+            button={{ text: "Browse Templates", href: "/#products" }}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ruakxa"
+            brandName="BuildDigital"
+          />
+        </div>
+
+        <div id="ai-tool" data-section="ai-tool" className="py-20 text-center">
+          <div className="container max-w-2xl mx-auto px-4">
+            <h1 className="text-5xl font-bold mb-6 flex items-center justify-center gap-4">
+              <Wand2 size={48} className="text-primary-cta" />
+              AI Image Generator
+            </h1>
+            <p className="text-xl text-foreground/70 mb-8">
+              Unleash your creativity with our cutting-edge AI image generation tool. Describe your vision, and let AI bring it to life in stunning visuals.
+            </p>
+            <div className="bg-card p-8 rounded-lg shadow-lg">
+              <p className="text-foreground/80 mb-4">
+                (Placeholder for AI Image Generation Interface)
+              </p>
+              <textarea
+                className="w-full p-3 mb-4 rounded-md bg-background-accent text-foreground border border-card-border focus:ring-2 focus:ring-primary-cta outline-none transition-all"
+                rows={4}
+                placeholder="Enter your prompt here, e.g., 'a futuristic city at sunset, cyberpunk style, highly detailed, 8k'"
+              ></textarea>
+              <button className="bg-primary-cta text-white px-6 py-3 rounded-md font-semibold hover:bg-primary-cta/90 transition-colors">
+                Generate Image
+              </button>
+            </div>
+            <p className="mt-8 text-sm text-foreground/50">
+              Please note: This is a placeholder. Full functionality coming soon!
+            </p>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function LoginPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              {
+                name: "Home", id: "#home"
+              },
+              {
+                name: "About", id: "#about"
+              },
+              {
+                name: "Features", id: "#features"
+              },
+              {
+                name: "Templates", id: "/templates"
+              },
+              {
+                name: "Pricing", id: "#pricing"
+              },
+              {
+                name: "Testimonials", id: "#testimonials"
+              },
+              {
+                name: "FAQ", id: "#faq"
+              },
+              {
+                name: "Contact", id: "#contact"
+              },
+              {
+                name: "Login", id: "/login"
+              }
+            ]}
+            button={{
+              text: "Browse Templates", href: "/templates"
+            }}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ruakxa"
+            brandName="BuildDigital"
+          />
+        </div>
+
+        <div id="login" data-section="login">
+          <ContactSplitForm
+            title="Log in to Your Account"
+            description="Access your personalized dashboard and template library."
+            inputs={[
+              {
+                name: "email", type: "email", placeholder: "Email address", required: true
+              },
+              {
+                name: "password", type: "password", placeholder: "Password", required: true
+              }
+            ]}
+            buttonText="Login"
+            mediaPosition="left"
+            imageSrc="http://img.b2bpic.net/free-photo/view-young-entrepreneur-doing-paperwork-at-desk-computer_1098-19600.jpg"
+            imageAlt="Person logging into a digital platform"
+            useInvertedBackground={true}
+            onSubmit={(data) => console.log("Login data:", data)}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ruakxa"
+            logoText="BuildDigital"
+            leftLink={{
+              text: "Privacy Policy", href: "#"
+            }}
+            rightLink={{
+              text: "Terms of Service", href: "#"
+            }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -18,15 +18,15 @@ import { Download, Edit, Globe, Layers, Lightbulb, Palette, Play, Rocket, Sparkl
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="bounce-effect"
+        defaultButtonVariant="shift-hover"
         defaultTextAnimation="entrance-slide"
         borderRadius="pill"
         contentWidth="smallMedium"
-        sizing="large"
-        background="noiseDiagonalGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="glass"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
         headingFontWeight="normal"
     >
       <ReactLenis root>
@@ -34,7 +34,7 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",          id: "#home"},
+          name: "Home",          id: "/"},
         {
           name: "About",          id: "#about"},
         {
@@ -49,9 +49,11 @@ export default function LandingPage() {
           name: "FAQ",          id: "#faq"},
         {
           name: "Contact",          id: "#contact"},
+        {
+          name: "AI Image Generator", id: "/ai-image-generator"}
       ]}
       button={{
-        text: "Browse Templates",        href: "#products"}}
+        text: "Browse Templates",          href: "/#products"}}
       logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ruakxa"
       brandName="BuildDigital"
     />
@@ -75,7 +77,7 @@ export default function LandingPage() {
       enableKpiAnimation={true}
       buttons={[
         {
-          text: "Browse Templates",          href: "#products"},
+          text: "Browse Templates",          href: "/#products"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/woman-home-using-ai-software-turning-text-prompt-into-photos-drinking-coffee_482257-125868.jpg"
       imageAlt="Showcase of various digital product templates"
@@ -86,8 +88,7 @@ export default function LandingPage() {
         {
           src: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",          alt: "Portrait of middle aged businesswoman"},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",          alt: "Portrait of a smiling blonde businesswoman formal dressed."},
-        {
+          src: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",          alt: "Portrait of a smiling blonde businesswoman formal dressed."},            {
           src: "http://img.b2bpic.net/free-photo/confident-young-businesswoman-with-folded-arms_1262-1775.jpg",          alt: "Confident Young Businesswoman with Folded Arms"},
         {
           src: "http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg",          alt: "Closeup shot of a handsome male smiling"},
@@ -95,20 +96,20 @@ export default function LandingPage() {
       avatarText="Join our growing community!"
       marqueeItems={[
         {
-          type: "text-icon",          text: "Design Templates",          icon: Palette,
+          type: "text-icon",          text: "Design Templates",          icon: Palette
         },
         {
-          type: "text-icon",          text: "Video Presets",          icon: Play,
+          type: "text-icon",          text: "Video Presets",          icon: Play
         },
         {
-          type: "text-icon",          text: "Productivity Tools",          icon: Lightbulb,
+          type: "text-icon",          text: "Productivity Tools",          icon: Lightbulb
         },
         {
-          type: "text-icon",          text: "Web Themes",          icon: Globe,
+          type: "text-icon",          text: "Web Themes",          icon: Globe
         },
         {
-          type: "text-icon",          text: "Workflow Accelerators",          icon: Rocket,
-        },
+          type: "text-icon",          text: "Workflow Accelerators",          icon: Rocket
+        }
       ]}
     />
   </div>
@@ -118,11 +119,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       heading={[
         {
-          type: "text",          content: "Accelerate Your Creative Workflow"},
+          type: "text",          content: "Accelerate Your Creative Workflow"}
       ]}
       buttons={[
         {
-          text: "Learn More",          href: "#features"},
+          text: "Learn More",          href: "/#features"}
       ]}
     />
   </div>
@@ -139,8 +140,8 @@ export default function LandingPage() {
             {
               imageSrc: "http://img.b2bpic.net/free-photo/home-decor-renovation-style-architecture-building_53876-21272.jpg",              imageAlt: "Canva template customization interface"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-fitness-influencer_23-2151564813.jpg",              imageAlt: "CapCut video editing preset in use"},
-          ],
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-fitness-influencer_23-2151564813.jpg",              imageAlt: "CapCut video editing preset in use"}
+          ]
         },
         {
           title: "Multi-Platform Compatibility",          description: "Seamlessly integrate templates with your favorite tools, from Notion productivity systems to WordPress websites.",          icon: Layers,
@@ -148,8 +149,8 @@ export default function LandingPage() {
             {
               imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-wearing-cervical-neck-collar-office_482257-77523.jpg",              imageAlt: "Notion project management dashboard"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416723.jpg",              imageAlt: "Responsive WordPress website theme"},
-          ],
+              imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416723.jpg",              imageAlt: "Responsive WordPress website theme"}
+          ]
         },
         {
           title: "Instant Download & Support",          description: "Gain immediate access to your purchased templates with secure downloads and dedicated customer assistance.",          icon: Download,
@@ -157,9 +158,9 @@ export default function LandingPage() {
             {
               imageSrc: "http://img.b2bpic.net/free-photo/illustration-transportation-packages-delivery_53876-121518.jpg",              imageAlt: "Secure digital download process"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/network-connection-concept_1134-46.jpg",              imageAlt: "Diverse creator community collaboration"},
-          ],
-        },
+              imageSrc: "http://img.b2bpic.net/free-photo/network-connection-concept_1134-46.jpg",              imageAlt: "Diverse creator community collaboration"}
+          ]
+        }
       ]}
       title="Unlock Your Creative Potential"
       description="Explore powerful templates for every platform, designed to streamline your projects and elevate your output."
@@ -175,22 +176,22 @@ export default function LandingPage() {
       products={[
         {
           id: "p1",          brand: "Canva",          name: "Social Media Starter Kit",          price: "$29.00",          rating: 5,
-          reviewCount: "120 reviews",          imageSrc: "http://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-stories_23-2150683758.jpg",          imageAlt: "Canva Social Media Starter Kit"},
+          reviewCount: "120 reviews",          imageSrc: "http://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-stories_23-2150683758.jpg?_wi=1",          imageAlt: "Canva Social Media Starter Kit"},
         {
           id: "p2",          brand: "CapCut",          name: "Dynamic Video Intro Pack",          price: "$39.00",          rating: 4.8,
-          reviewCount: "85 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/cinema-still-life_23-2148017206.jpg",          imageAlt: "CapCut Dynamic Video Intro Pack"},
+          reviewCount: "85 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/cinema-still-life_23-2148017206.jpg?_wi=1",          imageAlt: "CapCut Dynamic Video Intro Pack"},
         {
           id: "p3",          brand: "Notion",          name: "Ultimate Productivity Hub",          price: "$49.00",          rating: 4.9,
-          reviewCount: "150 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/glasses-calculator-coins-tablet-white-neat-desk_1387-289.jpg",          imageAlt: "Notion Ultimate Productivity Hub"},
+          reviewCount: "150 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/glasses-calculator-coins-tablet-white-neat-desk_1387-289.jpg?_wi=1",          imageAlt: "Notion Ultimate Productivity Hub"},
         {
           id: "p4",          brand: "WordPress",          name: "Elegant Portfolio Theme",          price: "$79.00",          rating: 4.7,
-          reviewCount: "70 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg",          imageAlt: "WordPress Elegant Portfolio Theme"},
+          reviewCount: "70 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg?_wi=1",          imageAlt: "WordPress Elegant Portfolio Theme"},
         {
           id: "p5",          brand: "Alight Motion",          name: "Animated Infographics Pack",          price: "$34.00",          rating: 4.6,
-          reviewCount: "60 reviews",          imageSrc: "http://img.b2bpic.net/free-vector/colorful-infographics-timeline-flat-design_52683-16867.jpg",          imageAlt: "Alight Motion Animated Infographics Pack"},
+          reviewCount: "60 reviews",          imageSrc: "http://img.b2bpic.net/free-vector/colorful-infographics-timeline-flat-design_52683-16867.jpg?_wi=1",          imageAlt: "Alight Motion Animated Infographics Pack"},
         {
           id: "p6",          brand: "Figma",          name: "Modern Mobile UI Kit",          price: "$59.00",          rating: 4.9,
-          reviewCount: "95 reviews",          imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-application_23-2148676935.jpg",          imageAlt: "Figma Modern Mobile UI Kit"},
+          reviewCount: "95 reviews",          imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-application_23-2148676935.jpg?_wi=1",          imageAlt: "Figma Modern Mobile UI Kit"}
       ]}
       title="Popular Templates"
       description="Explore our best-selling digital products, from trending social media kits to powerful web development themes."
@@ -207,21 +208,21 @@ export default function LandingPage() {
           id: "plan1",          tag: "Starter",          price: "$0",          period: "Free",          description: "Explore basic templates to kickstart your creative projects.",          button: {
             text: "Start Free"},
           featuresTitle: "Includes:",          features: [
-            "Access to Free Templates",            "Standard Download Speed",            "Community Support",            "Basic Customization Options"],
+            "Access to Free Templates",            "Standard Download Speed",            "Community Support",            "Basic Customization Options"]
         },
         {
           id: "plan2",          tag: "Pro",          tagIcon: Sparkles,
           price: "$19",          period: "per month",          description: "Unlock a vast library of premium templates for serious creators.",          button: {
             text: "Get Pro"},
           featuresTitle: "Everything in Starter, plus:",          features: [
-            "Unlimited Premium Downloads",            "High-Speed Downloads",            "Priority Email Support",            "Advanced Customization Tools",            "Early Access to New Releases"],
+            "Unlimited Premium Downloads",            "High-Speed Downloads",            "Priority Email Support",            "Advanced Customization Tools",            "Early Access to New Releases"]
         },
         {
           id: "plan3",          tag: "Agency",          price: "$49",          period: "per month",          description: "Ideal for teams and agencies managing multiple client projects.",          button: {
             text: "Get Agency"},
           featuresTitle: "Everything in Pro, plus:",          features: [
-            "Team Collaboration Features",            "Dedicated Account Manager",            "White-Label Options",            "Bulk Template Licensing",            "Custom Integration Support"],
-        },
+            "Team Collaboration Features",            "Dedicated Account Manager",            "White-Label Options",            "Bulk Template Licensing",            "Custom Integration Support"]
+        }
       ]}
       title="Flexible Plans for Every Creator"
       description="Whether you're an individual creator or a growing agency, find the perfect plan to access our premium template library."
@@ -235,20 +236,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",          name: "Sarah Johnson",          handle: "@CreativeSarah",          testimonial: "BuildDigital has been a game-changer for my content creation. The templates save me countless hours, allowing me to focus on strategy instead of design.",          imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-standing-with-crossed-arms_23-2148095775.jpg",          imageAlt: "Sarah Johnson, content creator",          icon: Star,
+          id: "t1",          name: "Sarah Johnson",          handle: "@CreativeSarah",          testimonial: "BuildDigital has been a game-changer for my content creation. The templates save me countless hours, allowing me to focus on strategy instead of design.",          imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-standing-with-crossed-arms_23-2148095775.jpg",          imageAlt: "Sarah Johnson, content creator",          icon: Star
         },
         {
-          id: "t2",          name: "Michael Chen",          handle: "@TechBizMichael",          testimonial: "The Notion templates are incredibly well-designed and functional. They've streamlined our internal processes and boosted team productivity significantly.",          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-cheerful-gardener-smiling-looking-camera-posing_176420-3837.jpg",          imageAlt: "Michael Chen, small business owner",          icon: Star,
+          id: "t2",          name: "Michael Chen",          handle: "@TechBizMichael",          testimonial: "The Notion templates are incredibly well-designed and functional. They've streamlined our internal processes and boosted team productivity significantly.",          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-cheerful-gardener-smiling-looking-camera-posing_176420-3837.jpg",          imageAlt: "Michael Chen, small business owner",          icon: Star
         },
         {
-          id: "t3",          name: "Emily Rodriguez",          handle: "@DesignFlows",          testimonial: "As a freelance designer, having access to these high-quality Canva and CapCut assets gives me a huge advantage. My clients are always impressed!",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-brunette-student-girl-wearing-elegant-black-dress-keeping-arms-folded-while-sitting-front-laptop-computer-working-diploma-project-online-using-free-wi-fi-coffee-break_273609-74.jpg",          imageAlt: "Emily Rodriguez, freelance designer",          icon: Star,
+          id: "t3",          name: "Emily Rodriguez",          handle: "@DesignFlows",          testimonial: "As a freelance designer, having access to these high-quality Canva and CapCut assets gives me a huge advantage. My clients are always impressed!",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-brunette-student-girl-wearing-elegant-black-dress-keeping-arms-folded-while-sitting-front-laptop-computer-working-diploma-project-online-using-free-wi-fi-coffee-break_273609-74.jpg",          imageAlt: "Emily Rodriguez, freelance designer",          icon: Star
         },
         {
-          id: "t4",          name: "David Kim",          handle: "@AgencyAlpha",          testimonial: "We use BuildDigital for all our client projects. The variety and quality of WordPress themes and video presets are unmatched, saving us time and resources.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-digital-nomad-freelancer-connects-video-call-laptop-pointing-finger_1258-245280.jpg",          imageAlt: "David Kim, marketing agency owner",          icon: Star,
+          id: "t4",          name: "David Kim",          handle: "@AgencyAlpha",          testimonial: "We use BuildDigital for all our client projects. The variety and quality of WordPress themes and video presets are unmatched, saving us time and resources.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-digital-nomad-freelancer-connects-video-call-laptop-pointing-finger_1258-245280.jpg",          imageAlt: "David Kim, marketing agency owner",          icon: Star
         },
         {
-          id: "t5",          name: "Jessica Lee",          handle: "@EduTechJess",          testimonial: "The educational templates are fantastic for standardizing our online course materials. They look professional and are easy for my team to adapt.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-drawing-ipad_23-2150172056.jpg",          imageAlt: "Jessica Lee, educator",          icon: Star,
-        },
+          id: "t5",          name: "Jessica Lee",          handle: "@EduTechJess",          testimonial: "The educational templates are fantastic for standardizing our online course materials. They look professional and are easy for my team to adapt.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-drawing-ipad_23-2150172056.jpg",          imageAlt: "Jessica Lee, educator",          icon: Star
+        }
       ]}
       title="What Our Creators Say"
       description="Hear from satisfied users who have transformed their workflows and elevated their projects with BuildDigital templates."
@@ -279,7 +280,7 @@ export default function LandingPage() {
         {
           id: "faq3",          title: "Can I customize the templates?",          content: "Absolutely! All templates are designed to be fully customizable. You can easily edit text, colors, images, and layout to match your brand and specific project needs."},
         {
-          id: "faq4",          title: "What if I need support or have an issue?",          content: "Our support team is here to help. You can reach us via the contact form on this page or by emailing support@builddigital.com. We strive to respond within 24-48 hours."},
+          id: "faq4",          title: "What if I need support or have an issue?",          content: "Our support team is here to help. You can reach us via the contact form on this page or by emailing support@builddigital.com. We strive to respond within 24-48 hours."}
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/3d-speech-bubbles-with-question-marks_107791-15946.jpg"
       imageAlt="Person thinking with question marks, digital problem solving"
@@ -322,4 +323,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f514c;
-  --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #159c49;
-  --background-accent: #a8e8ba;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffffe6;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/templates/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function TemplatesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              {
+                name: "Home", id: "#home"
+              },
+              {
+                name: "About", id: "#about"
+              },
+              {
+                name: "Features", id: "#features"
+              },
+              {
+                name: "Templates", id: "/templates"
+              },
+              {
+                name: "Pricing", id: "#pricing"
+              },
+              {
+                name: "Testimonials", id: "#testimonials"
+              },
+              {
+                name: "FAQ", id: "#faq"
+              },
+              {
+                name: "Contact", id: "#contact"
+              },
+              {
+                name: "Login", id: "/login"
+              }
+            ]}
+            button={{
+              text: "Browse Templates", href: "/templates"
+            }}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ruakxa"
+            brandName="BuildDigital"
+          />
+        </div>
+
+        <div id="templates" data-section="templates">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={[
+              {
+                id: "t1",                name: "Pro Social Media Kit",                price: "$35.00",                imageSrc: "http://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-stories_23-2150683758.jpg?_wi=2",                imageAlt: "Canva Social Media Template"},
+              {
+                id: "t2",                name: "YouTube Intro Pack",                price: "$45.00",                imageSrc: "http://img.b2bpic.net/free-photo/cinema-still-life_23-2148017206.jpg?_wi=2",                imageAlt: "CapCut Video Intro Template"},
+              {
+                id: "t3",                name: "Advanced Notion Planner",                price: "$55.00",                imageSrc: "http://img.b2bpic.net/free-photo/glasses-calculator-coins-tablet-white-neat-desk_1387-289.jpg?_wi=2",                imageAlt: "Notion Productivity Template"},
+              {
+                id: "t4",                name: "Modern Portfolio WordPress Theme",                price: "$89.00",                imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg?_wi=2",                imageAlt: "WordPress Website Template"},
+              {
+                id: "t5",                name: "Infographic Video Template",                price: "$40.00",                imageSrc: "http://img.b2bpic.net/free-vector/colorful-infographics-timeline-flat-design_52683-16867.jpg?_wi=2",                imageAlt: "Alight Motion Infographic Template"},
+              {
+                id: "t6",                name: "SaaS Dashboard UI Kit",                price: "$65.00",                imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-application_23-2148676935.jpg?_wi=2",                imageAlt: "Figma UI Kit Template"}
+            ]}
+            title="Our Premium Templates"
+            description="Discover a wide array of professionally designed templates for all your creative and business needs."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ruakxa"
+            logoText="BuildDigital"
+            leftLink={{
+              text: "Privacy Policy", href: "#"
+            }}
+            rightLink={{
+              text: "Terms of Service", href: "#"
+            }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}