Merge version_4 into main

Merge version_4 into main

src/app/account/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function AccountPage() {
+  const canonicalNavItems = [
+    { name: "Home", id: "/" },
+    { name: "Categories", id: "/categories" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Search", id: "/search" },
+    { name: "Wishlist", id: "/wishlist" },
+    { name: "Account", id: "/account" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer Dashboard", id: "/customer/dashboard" },
+    { name: "Seller Dashboard", id: "/seller-dashboard" },
+    { name: "Seller Portal", id: "/seller/dashboard" },
+    { name: "Checkout", id: "/checkout" },
+    { name: "Downloads", id: "/downloads" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={canonicalNavItems}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started",              href: "#products"}}
+            animateOnLoad={true}
+          />
+        </div>
+        <main className="min-h-screen py-20">
+          <section className="container mx-auto px-4">
+            <h1 className="text-4xl font-bold mb-8">User Account</h1>
+            <p className="text-lg">Manage your profile, orders, and settings.</p>
+            {/* Placeholder for user account content */}
+          </section>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates",                    href: "#products"},
+                  {
+                    label: "Logos",                    href: "#products"},
+                  {
+                    label: "Social Media Kits",                    href: "#products"},
+                  {
+                    label: "Banners & Flyers",                    href: "#products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us",                    href: "#about"},
+                  {
+                    label: "Features",                    href: "#features"},
+                  {
+                    label: "Pricing",                    href: "#pricing"},
+                  {
+                    label: "Contact",                    href: "/contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy",                    href: "#"},
+                  {
+                    label: "Terms of Service",                    href: "#"},
+                  {
+                    label: "Refund Policy",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/categories/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function CategoriesPage() {
+  const canonicalNavItems = [
+    { name: "Home", id: "/" },
+    { name: "Categories", id: "/categories" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Search", id: "/search" },
+    { name: "Wishlist", id: "/wishlist" },
+    { name: "Account", id: "/account" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer Dashboard", id: "/customer/dashboard" },
+    { name: "Seller Dashboard", id: "/seller-dashboard" },
+    { name: "Seller Portal", id: "/seller/dashboard" },
+    { name: "Checkout", id: "/checkout" },
+    { name: "Downloads", id: "/downloads" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={canonicalNavItems}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started",              href: "#products"}}
+            animateOnLoad={true}
+          />
+        </div>
+        <main className="min-h-screen py-20">
+          <section className="container mx-auto px-4">
+            <h1 className="text-4xl font-bold mb-8">Product Categories</h1>
+            <p className="text-lg">Explore our wide range of design categories.</p>
+            {/* Placeholder for categories content */}
+          </section>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates",                    href: "#products"},
+                  {
+                    label: "Logos",                    href: "#products"},
+                  {
+                    label: "Social Media Kits",                    href: "#products"},
+                  {
+                    label: "Banners & Flyers",                    href: "#products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us",                    href: "#about"},
+                  {
+                    label: "Features",                    href: "#features"},
+                  {
+                    label: "Pricing",                    href: "#pricing"},
+                  {
+                    label: "Contact",                    href: "/contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy",                    href: "#"},
+                  {
+                    label: "Terms of Service",                    href: "#"},
+                  {
+                    label: "Refund Policy",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { Sparkles } from "lucide-react";
+
+export default function CheckoutPage() {
+  const canonicalNavItems = [
+    { name: "Home", id: "/" },
+    { name: "Categories", id: "/categories" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Search", id: "/search" },
+    { name: "Wishlist", id: "/wishlist" },
+    { name: "Account", id: "/account" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer Dashboard", id: "/customer/dashboard" },
+    { name: "Seller Dashboard", id: "/seller-dashboard" },
+    { name: "Seller Portal", id: "/seller/dashboard" },
+    { name: "Checkout", id: "/checkout" },
+    { name: "Downloads", id: "/downloads" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={canonicalNavItems}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started", href: "#products"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="checkout-hero" data-section="checkout-hero">
+          <HeroBillboardTestimonial
+            useInvertedBackground={false}
+            background={{
+              variant: "animated-grid"}}
+            title="Secure Checkout"
+            description="Your payment is safe with us. Complete your purchase with confidence using our encrypted payment gateway. Instant access to your digital products awaits!"
+            testimonials={[]}
+            testimonialRotationInterval={5000}
+            buttons={[
+              {
+                text: "Back to Products", href: "#products"},
+            ]}
+            avatars={[]}
+            avatarText=""
+            imageSrc="http://img.b2bpic.net/free-photo/data-security-payment-online_1491-187.jpg"
+            imageAlt="Secure payment transaction"
+            mediaAnimation="slide-up"
+            tag="Transaction Secured"
+            tagIcon={Sparkles}
+            marqueeItems={[]}
+            marqueeSpeed={30}
+            showMarqueeCard={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates", href: "#products"},
+                  {
+                    label: "Logos", href: "#products"},
+                  {
+                    label: "Social Media Kits", href: "#products"},
+                  {
+                    label: "Banners & Flyers", href: "#products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us", href: "#about"},
+                  {
+                    label: "Features", href: "#features"},
+                  {
+                    label: "Pricing", href: "#pricing"},
+                  {
+                    label: "Contact", href: "/contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy", href: "#"},
+                  {
+                    label: "Terms of Service", href: "#"},
+                  {
+                    label: "Refund Policy", href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/customer/dashboard/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+export default function CustomerDashboardPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "#contact" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer", id: "/customer/dashboard" },
+    { name: "Seller", id: "/seller/dashboard" }
+  ];
+
+  const purchaseHistory = [
+    { id: "p1", designName: "Modern Social Media Pack", date: "2023-10-26", price: "$29.99" },
+    { id: "p2", designName: "Abstract Business Logo", date: "2023-09-15", price: "$49.99" },
+    { id: "p3", designName: "Event Promotion Flyer", date: "2023-08-01", price: "$24.99" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            brandName="DesignFlow"
+            button={{ text: "Get Started", href: "#products" }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div className="min-h-[calc(100vh-80px)] p-8">
+          <div className="max-w-4xl mx-auto bg-card text-foreground p-8 rounded-lg shadow-xl">
+            <h1 className="text-4xl font-bold mb-8 text-center">Customer Dashboard</h1>
+
+            <section className="mb-8">
+              <h2 className="text-2xl font-semibold mb-4">Welcome, Customer!</h2>
+              <p className="text-lg">Here you can manage your profile, view your purchase history, and access your downloaded designs.</p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4">Purchase History</h2>
+              {purchaseHistory.length === 0 ? (
+                <p>You haven't made any purchases yet.</p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="min-w-full divide-y divide-accent-border">
+                    <thead>
+                      <tr>
+                        <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Design Name</th>
+                        <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Date</th>
+                        <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Price</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-accent-border">
+                      {purchaseHistory.map((item) => (
+                        <tr key={item.id}>
+                          <td className="px-6 py-4 whitespace-nowrap">{item.designName}</td>
+                          <td className="px-6 py-4 whitespace-nowrap">{item.date}</td>
+                          <td className="px-6 py-4 whitespace-nowrap">{item.price}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </section>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/downloads/page.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { Sparkles } from "lucide-react";
+
+export default function DownloadsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home", id: "#home"},
+              {
+                name: "Products", id: "#products"},
+              {
+                name: "Features", id: "#features"},
+              {
+                name: "Testimonials", id: "#testimonials"},
+              {
+                name: "Pricing", id: "#pricing"},
+              {
+                name: "FAQ", id: "#faq"},
+              {
+                name: "Checkout", id: "/checkout"},
+              {
+                name: "Downloads", id: "/downloads"},
+              {
+                name: "Contact", id: "#contact"},
+            ]}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started", href: "#products"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="downloads-hero" data-section="downloads-hero">
+          <HeroBillboardTestimonial
+            useInvertedBackground={false}
+            background={{
+              variant: "animated-grid"}}
+            title="Your Digital Downloads"
+            description="Access all your purchased digital products instantly. Download your graphic designs anytime, anywhere. Thank you for choosing DesignFlow!"
+            testimonials={[]}
+            testimonialRotationInterval={5000}
+            buttons={[
+              {
+                text: "Browse More Designs", href: "#products"},
+            ]}
+            avatars={[]}
+            avatarText=""
+            imageSrc="http://img.b2bpic.net/free-photo/young-man-sitting-cafe-with-laptop-downloading-something_1303-12003.jpg"
+            imageAlt="Man downloading digital products"
+            mediaAnimation="slide-up"
+            tag="Instant Access"
+            tagIcon={Sparkles}
+            marqueeItems={[]}
+            marqueeSpeed={30}
+            showMarqueeCard={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates", href: "#products"},
+                  {
+                    label: "Logos", href: "#products"},
+                  {
+                    label: "Social Media Kits", href: "#products"},
+                  {
+                    label: "Banners & Flyers", href: "#products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us", href: "#about"},
+                  {
+                    label: "Features", href: "#features"},
+                  {
+                    label: "Pricing", href: "#pricing"},
+                  {
+                    label: "Contact", href: "#contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy", href: "#"},
+                  {
+                    label: "Terms of Service", href: "#"},
+                  {
+                    label: "Refund Policy", href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import Input from '@/components/form/Input';
+import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';
+import { useState } from "react";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Login submitted:", { email, password });
+    // Add authentication logic here
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "#contact" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer", id: "/customer/dashboard" },
+    { name: "Seller", id: "/seller/dashboard" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            brandName="DesignFlow"
+            button={{ text: "Get Started", href: "#products" }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div className="min-h-[calc(100vh-80px)] flex items-center justify-center p-4">
+          <div className="w-full max-w-md bg-card text-foreground p-8 rounded-lg shadow-xl">
+            <h1 className="text-3xl font-bold mb-6 text-center">Login to DesignFlow</h1>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1">Email</label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="your.email@example.com"
+                  value={email}
+                  onChange={setEmail}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1">Password</label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="********"
+                  value={password}
+                  onChange={setPassword}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <ButtonTextUnderline
+                type="submit"
+                text="Login"
+                className="w-full justify-center"
+              />
+              <p className="text-center text-sm mt-4">
+                Don't have an account?{" "}
+                <a href="/register" className="text-primary-cta hover:underline">Register here</a>
+              </p>
+            </form>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -34,23 +34,33 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",          id: "#home"},
+          name: "Home",          id: "/"},
         {
-          name: "Products",          id: "#products"},
+          name: "Categories",          id: "/categories"},
         {
-          name: "Features",          id: "#features"},
+          name: "Products",          id: "/products"},
         {
-          name: "Testimonials",          id: "#testimonials"},
+          name: "Features",          id: "/features"},
         {
-          name: "Pricing",          id: "#pricing"},
+          name: "Search",          id: "/search"},
         {
-          name: "FAQ",          id: "#faq"},
+          name: "Wishlist",          id: "/wishlist"},
         {
-          name: "Contact",          id: "#contact"},
+          name: "Testimonials",          id: "/testimonials"},
+        {
+          name: "Pricing",          id: "/pricing"},
+        {
+          name: "FAQ",          id: "/faq"},
+        {
+          name: "Seller Dashboard",          id: "/seller-dashboard"},
+        {
+          name: "Account",          id: "/account"},
+        {
+          name: "Contact",          id: "/contact"},
       ]}
       brandName="DesignFlow"
       button={{
-        text: "Get Started",        href: "#products"}}
+        text: "Get Started",        href: "/products"}}
       animateOnLoad={true}
     />
   </div>
@@ -82,9 +92,9 @@ export default function LandingPage() {
       testimonialRotationInterval={5000}
       buttons={[
         {
-          text: "Browse Designs",          href: "#products"},
+          text: "Browse Designs",          href: "/products"},
         {
-          text: "Become a Seller",          href: "#contact"},
+          text: "Become a Seller",          href: "/seller-dashboard"},
       ]}
       avatars={[
         {
@@ -287,7 +297,7 @@ export default function LandingPage() {
       text="Ready to elevate your brand or showcase your designs? Our team is here to help. Get in touch with us today for support, partnerships, or any inquiries."
       buttons={[
         {
-          text: "Contact Us",          href: "mailto:support@designflow.com"},
+          text: "Contact Us",          href: "/contact"},
       ]}
     />
   </div>
@@ -299,25 +309,25 @@ export default function LandingPage() {
         {
           title: "Products",          items: [
             {
-              label: "Canva Templates",              href: "#products"},
+              label: "Canva Templates",              href: "/products"},
             {
-              label: "Logos",              href: "#products"},
+              label: "Logos",              href: "/products"},
             {
-              label: "Social Media Kits",              href: "#products"},
+              label: "Social Media Kits",              href: "/products"},
             {
-              label: "Banners & Flyers",              href: "#products"},
+              label: "Banners & Flyers",              href: "/products"},
           ],
         },
         {
           title: "Company",          items: [
             {
-              label: "About Us",              href: "#about"},
+              label: "About Us",              href: "/about"},
             {
-              label: "Features",              href: "#features"},
+              label: "Features",              href: "/features"},
             {
-              label: "Pricing",              href: "#pricing"},
+              label: "Pricing",              href: "/pricing"},
             {
-              label: "Contact",              href: "#contact"},
+              label: "Contact",              href: "/contact"},
           ],
         },
         {
@@ -337,4 +347,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/register/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import Input from '@/components/form/Input';
+import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';
+import { useState } from "react";
+
+export default function RegisterPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleRegister = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      alert("Passwords do not match!");
+      return;
+    }
+    console.log("Registration submitted:", { name, email, password });
+    // Add registration logic here
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "#contact" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer", id: "/customer/dashboard" },
+    { name: "Seller", id: "/seller/dashboard" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            brandName="DesignFlow"
+            button={{ text: "Get Started", href: "#products" }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div className="min-h-[calc(100vh-80px)] flex items-center justify-center p-4">
+          <div className="w-full max-w-md bg-card text-foreground p-8 rounded-lg shadow-xl">
+            <h1 className="text-3xl font-bold mb-6 text-center">Register for DesignFlow</h1>
+            <form onSubmit={handleRegister} className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-1">Name</label>
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="John Doe"
+                  value={name}
+                  onChange={setName}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1">Email</label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="your.email@example.com"
+                  value={email}
+                  onChange={setEmail}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1">Password</label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="********"
+                  value={password}
+                  onChange={setPassword}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1">Confirm Password</label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="********"
+                  value={confirmPassword}
+                  onChange={setConfirmPassword}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <ButtonTextUnderline
+                type="submit"
+                text="Register"
+                className="w-full justify-center"
+              />
+              <p className="text-center text-sm mt-4">
+                Already have an account?{" "}
+                <a href="/login" className="text-primary-cta hover:underline">Login here</a>
+              </p>
+            </form>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/search/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function SearchPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "Categories",                id: "/categories"},
+              {
+                name: "Products",                id: "/products"},
+              {
+                name: "Features",                id: "/features"},
+              {
+                name: "Search",                id: "/search"},
+              {
+                name: "Wishlist",                id: "/wishlist"},
+              {
+                name: "Testimonials",                id: "/testimonials"},
+              {
+                name: "Pricing",                id: "/pricing"},
+              {
+                name: "FAQ",                id: "/faq"},
+              {
+                name: "Seller Dashboard",                id: "/seller-dashboard"},
+              {
+                name: "Account",                id: "/account"},
+              {
+                name: "Contact",                id: "/contact"},
+            ]}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started",              href: "/products"}}
+            animateOnLoad={true}
+          />
+        </div>
+        <main className="min-h-screen py-20">
+          <section className="container mx-auto px-4">
+            <h1 className="text-4xl font-bold mb-8">Search Marketplace</h1>
+            <p className="text-lg">Find the perfect design by searching our extensive catalog.</p>
+            {/* Placeholder for search input and results */}
+          </section>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates",                    href: "/products"},
+                  {
+                    label: "Logos",                    href: "/products"},
+                  {
+                    label: "Social Media Kits",                    href: "/products"},
+                  {
+                    label: "Banners & Flyers",                    href: "/products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us",                    href: "/about"},
+                  {
+                    label: "Features",                    href: "/features"},
+                  {
+                    label: "Pricing",                    href: "/pricing"},
+                  {
+                    label: "Contact",                    href: "/contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy",                    href: "#"},
+                  {
+                    label: "Terms of Service",                    href: "#"},
+                  {
+                    label: "Refund Policy",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/seller-dashboard/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function SellerDashboardPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "Categories",                id: "/categories"},
+              {
+                name: "Products",                id: "/products"},
+              {
+                name: "Features",                id: "/features"},
+              {
+                name: "Search",                id: "/search"},
+              {
+                name: "Wishlist",                id: "/wishlist"},
+              {
+                name: "Testimonials",                id: "/testimonials"},
+              {
+                name: "Pricing",                id: "/pricing"},
+              {
+                name: "FAQ",                id: "/faq"},
+              {
+                name: "Seller Dashboard",                id: "/seller-dashboard"},
+              {
+                name: "Account",                id: "/account"},
+              {
+                name: "Contact",                id: "/contact"},
+            ]}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started",              href: "/products"}}
+            animateOnLoad={true}
+          />
+        </div>
+        <main className="min-h-screen py-20">
+          <section className="container mx-auto px-4">
+            <h1 className="text-4xl font-bold mb-8">Seller Dashboard</h1>
+            <p className="text-lg">Manage your products, sales, and earnings.</p>
+            {/* Placeholder for seller dashboard content */}
+          </section>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates",                    href: "/products"},
+                  {
+                    label: "Logos",                    href: "/products"},
+                  {
+                    label: "Social Media Kits",                    href: "/products"},
+                  {
+                    label: "Banners & Flyers",                    href: "/products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us",                    href: "/about"},
+                  {
+                    label: "Features",                    href: "/features"},
+                  {
+                    label: "Pricing",                    href: "/pricing"},
+                  {
+                    label: "Contact",                    href: "/contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy",                    href: "#"},
+                  {
+                    label: "Terms of Service",                    href: "#"},
+                  {
+                    label: "Refund Policy",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/seller/dashboard/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';
+
+export default function SellerDashboardPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "#contact" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer", id: "/customer/dashboard" },
+    { name: "Seller", id: "/seller/dashboard" }
+  ];
+
+  const uploadedDesigns = [
+    { id: "d1", name: "Modern Social Media Pack", status: "Active", sales: 15 },
+    { id: "d2", name: "Ultimate Instagram Kit", status: "Active", sales: 10 },
+    { id: "d3", name: "Professional Business Card", status: "Pending Review", sales: 0 }
+  ];
+
+  const handleUploadDesign = () => {
+    alert("Upload Design functionality coming soon!");
+  };
+
+  const handleManageDesign = (designId: string) => {
+    alert(`Manage design ${designId} functionality coming soon!`);
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            brandName="DesignFlow"
+            button={{ text: "Get Started", href: "#products" }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div className="min-h-[calc(100vh-80px)] p-8">
+          <div className="max-w-4xl mx-auto bg-card text-foreground p-8 rounded-lg shadow-xl">
+            <h1 className="text-4xl font-bold mb-8 text-center">Seller Dashboard</h1>
+
+            <section className="mb-8 flex justify-between items-center">
+              <h2 className="text-2xl font-semibold">Your Designs</h2>
+              <ButtonTextUnderline
+                text="Upload New Design"
+                onClick={handleUploadDesign}
+              />
+            </section>
+
+            <section>
+              {uploadedDesigns.length === 0 ? (
+                <p>You haven't uploaded any designs yet. Click "Upload New Design" to get started!</p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="min-w-full divide-y divide-accent-border">
+                    <thead>
+                      <tr>
+                        <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Design Name</th>
+                        <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Status</th>
+                        <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Sales</th>
+                        <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-accent-border">
+                      {uploadedDesigns.map((design) => (
+                        <tr key={design.id}>
+                          <td className="px-6 py-4 whitespace-nowrap">{design.name}</td>
+                          <td className="px-6 py-4 whitespace-nowrap">{design.status}</td>
+                          <td className="px-6 py-4 whitespace-nowrap">{design.sales}</td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <ButtonTextUnderline
+                              text="Manage"
+                              onClick={() => handleManageDesign(design.id)}
+                              className="text-primary-cta hover:underline"
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </section>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f3251;
-  --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --background: #000000;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #ff0012;
+  --primary-cta-text: #000000;
+  --secondary-cta: #333333;
+  --secondary-cta-text: #ffffff;
+  --accent: #666666;
+  --background-accent: #333333;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/wishlist/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function WishlistPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "Categories",                id: "/categories"},
+              {
+                name: "Products",                id: "/products"},
+              {
+                name: "Features",                id: "/features"},
+              {
+                name: "Search",                id: "/search"},
+              {
+                name: "Wishlist",                id: "/wishlist"},
+              {
+                name: "Testimonials",                id: "/testimonials"},
+              {
+                name: "Pricing",                id: "/pricing"},
+              {
+                name: "FAQ",                id: "/faq"},
+              {
+                name: "Seller Dashboard",                id: "/seller-dashboard"},
+              {
+                name: "Account",                id: "/account"},
+              {
+                name: "Contact",                id: "/contact"},
+            ]}
+            brandName="DesignFlow"
+            button={{
+              text: "Get Started",              href: "/products"}}
+            animateOnLoad={true}
+          />
+        </div>
+        <main className="min-h-screen py-20">
+          <section className="container mx-auto px-4">
+            <h1 className="text-4xl font-bold mb-8">My Wishlist</h1>
+            <p className="text-lg">View and manage your saved designs.</p>
+            {/* Placeholder for wishlist content */}
+          </section>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DesignFlow"
+            columns={[
+              {
+                title: "Products",                items: [
+                  {
+                    label: "Canva Templates",                    href: "/products"},
+                  {
+                    label: "Logos",                    href: "/products"},
+                  {
+                    label: "Social Media Kits",                    href: "/products"},
+                  {
+                    label: "Banners & Flyers",                    href: "/products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us",                    href: "/about"},
+                  {
+                    label: "Features",                    href: "/features"},
+                  {
+                    label: "Pricing",                    href: "/pricing"},
+                  {
+                    label: "Contact",                    href: "/contact"},
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  {
+                    label: "Privacy Policy",                    href: "#"},
+                  {
+                    label: "Terms of Service",                    href: "#"},
+                  {
+                    label: "Refund Policy",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 DesignFlow. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}