Add src/app/customer/dashboard/page.tsx

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>
+  );
+}