Update src/app/dashboard/page.tsx

Merge version_1 into main

src/app/dashboard/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import { Activity, Flame, LayoutDashboard, Settings, Target, Zap } from "lucide-react";
+
+export default function DashboardPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="mediumSizeLargeTitles"
+        background="fluid"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Dashboard", id: "/dashboard" },
+                { name: "Home", id: "/" },
+              ]}
+              brandName="ManifiX"
+            />
+        </div>
+
+        <div className="pt-24 pb-12 px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="md:col-span-1">
+                <h2 className="text-2xl font-bold mb-6">Overview</h2>
+                <nav className="flex flex-col gap-4">
+                    <a href="#" className="flex items-center gap-3 p-3 rounded-xl bg-white/5 hover:bg-white/10"><LayoutDashboard className="w-5 h-5" /> Dashboard</a>
+                    <a href="#" className="flex items-center gap-3 p-3 rounded-xl text-white/60 hover:text-white"><Activity className="w-5 h-5" /> Analytics</a>
+                    <a href="#" className="flex items-center gap-3 p-3 rounded-xl text-white/60 hover:text-white"><Target className="w-5 h-5" /> Goals</a>
+                    <a href="#" className="flex items-center gap-3 p-3 rounded-xl text-white/60 hover:text-white"><Settings className="w-5 h-5" /> Settings</a>
+                </nav>
+            </div>
+
+            <div className="md:col-span-3 space-y-12">
+              <div id="metrics" data-section="metrics">
+                <MetricCardThree
+                  animationType="blur-reveal"
+                  title="Daily Progress"
+                  description="Track your journey across all active paths."
+                  textboxLayout="default"
+                  useInvertedBackground={false}
+                  metrics={[
+                    { id: "1", icon: Target, title: "Deep Work", value: "85%" },
+                    { id: "2", icon: Flame, title: "Streaks", value: "12" },
+                    { id: "3", icon: Zap, title: "XP Today", value: "480" },
+                  ]}
+                />
+              </div>
+
+              <div id="features" data-section="features">
+                <FeatureHoverPattern
+                  animationType="blur-reveal"
+                  textboxLayout="default"
+                  useInvertedBackground={true}
+                  title="Daily Missions"
+                  description="Unlock rewards by completing your focused tasks today."
+                  features={[
+                    { icon: Zap, title: "Morning Flow", description: "Complete a 15-min deep focus session." },
+                    { icon: Flame, title: "Streak Keeper", description: "Maintain your focus for 3 hours straight." },
+                    { icon: Target, title: "Goal Crusher", description: "Execute one high-priority project task." },
+                  ]}
+                />
+              </div>
+            </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,6 +33,7 @@ export default function LandingPage() {
         { name: "Features", id: "#features" },
         { name: "Pricing", id: "#pricing" },
         { name: "About", id: "#about" },
+        { name: "Dashboard", id: "/dashboard" },
       ]}
       brandName="ManifiX"
     />