Add src/app/dashboard/page.tsx

src/app/dashboard/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Wallet, ShoppingCart, Hourglass, CheckCircle, Settings, LogOut } from "lucide-react";
+import Link from "next/link";
+
+export default function UserDashboardPage() {
+  const stats = [
+    { id: "balance", title: "Current Balance", value: "$1,250.50", icon: Wallet },
+    { id: "totalOrders", title: "Total Orders", value: "1,234", icon: ShoppingCart },
+    { id: "pendingOrders", title: "Pending Orders", value: "42", icon: Hourglass },
+    { id: "completedOrders", title: "Completed Orders", value: "1,192", icon: CheckCircle },
+  ];
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Dashboard", id: "/dashboard" },
+    { name: "New Order", id: "/new-order" },
+    { name: "My Orders", id: "/orders" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#features" },
+        { label: "Dashboard", href: "/dashboard" },
+        { label: "New Order", href: "/new-order" },
+        { label: "My Orders", href: "/orders" }
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <div className="flex flex-col lg:flex-row min-h-screen pt-20">
+          {/* Sidebar */}
+          <aside className="w-full lg:w-64 bg-card p-6 border-r border-border shadow-md">
+            <h2 className="text-2xl font-semibold mb-6 text-foreground">User Panel</h2>
+            <nav>
+              <ul>
+                <li className="mb-4">
+                  <Link href="/dashboard" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <Wallet className="mr-2 h-5 w-5" /> Dashboard
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/new-order" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <ShoppingCart className="mr-2 h-5 w-5" /> New Order
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/orders" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <Hourglass className="mr-2 h-5 w-5" /> My Orders
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/settings" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <Settings className="mr-2 h-5 w-5" /> Settings
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <button className="flex items-center text-foreground hover:text-red-500 transition-colors w-full text-left">
+                    <LogOut className="mr-2 h-5 w-5" /> Logout
+                  </button>
+                </li>
+              </ul>
+            </nav>
+          </aside>
+
+          {/* Main Content */}
+          <main className="flex-1 p-8 bg-background">
+            <h1 className="text-4xl font-bold mb-8 text-foreground">Dashboard Overview</h1>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+              {stats.map((stat) => (
+                <div key={stat.id} className="bg-card p-6 rounded-lg shadow-lg flex items-center space-x-4">
+                  <div classNameName="p-3 rounded-full bg-primary-cta bg-opacity-20">
+                    <stat.icon className="h-6 w-6 text-primary-cta" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-foreground-light">{stat.title}</p>
+                    <p className="text-2xl font-bold text-foreground">{stat.value}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Additional Dashboard Content would go here */}
+            <div className="bg-card p-6 rounded-lg shadow-lg">
+              <h2 className="text-2xl font-semibold mb-4 text-foreground">Recent Activity</h2>
+              <p className="text-foreground-light">Your recent orders and transactions will appear here.</p>
+            </div>
+          </main>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={footerColumns}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}