src/app/dashboard/page.tsx

@@ -3,8 +3,8 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+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() {
@@ -45,22 +45,23 @@ export default function DashboardPage() {
 
             <div className="md:col-span-3 space-y-12">
               <div id="metrics" data-section="metrics">
-                <MetricCardTwo
+                <MetricCardThree
                   animationType="blur-reveal"
-                  gridVariant="bento-grid"
                   title="Daily Progress"
                   description="Track your journey across all active paths."
+                  textboxLayout="default"
+                  useInvertedBackground={false}
                   metrics={[
-                    { id: "1", value: "85%", description: "Deep Work Completion" },
-                    { id: "2", value: "12", description: "Active Streaks" },
-                    { id: "3", value: "480", description: "XP Gained Today" },
+                    { 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">
-                <FeatureBorderGlow
-                  animationType="scale-rotate"
+                <FeatureHoverPattern
+                  animationType="blur-reveal"
                   textboxLayout="default"
                   useInvertedBackground={true}
                   title="Daily Missions"