Update src/app/page.tsx

src/app/page.tsx

@@ -2,57 +2,28 @@
 
 import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
 import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
 import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Bot, Brain, User, CheckCircle, Send, DollarSign, Target, Clock, FileDown, PieChart, Receipt, Users, Shield, ArrowRight } from "lucide-react";
+import { DollarSign, Receipt, Brain, Users, Shield, PieChart, Clock } from "lucide-react";
 
 export default function FinanceAppPage() {
     const navItems = [
-        { name: "Dashboard", id: "features" },
-        { name: "Planning", id: "planning" },
+        { name: "Features", id: "features" },
         { name: "Pricing", id: "pricing" },
         { name: "Contact", id: "contact" },
     ];
 
-    const features: FeatureCard[] = [
-        {
-            bentoComponent: "3d-task-list",            title: "Quick Entry",            items: [
-                { icon: DollarSign, label: "Coffee - $5", time: "Now" },
-                { icon: Receipt, label: "Grocery Scan", time: "10m ago" },
-                { icon: CheckCircle, label: "Salary Received", time: "1h ago" },
-                { icon: Send, label: "Rent Payment", time: "2h ago" },
-            ],
-            description: "Instantly record income and expenses on the go with smart categorization."},
-        {
-            bentoComponent: "chat",            aiIcon: Bot,
-            userIcon: User,
-            exchanges: [
-                { userMessage: "How much did I spend on dining?", aiResponse: "You've spent $450 on dining this month, which is 10% lower than your average." },
-                { userMessage: "Am I on track for my savings?", aiResponse: "Yes! You're currently $200 ahead of your monthly savings goal." },
-            ],
-            placeholder: "Ask FinAI anything...",            title: "AI Financial Assistant",            description: "Get instant insights, budget advice, and spending reports via natural chat."},
-        {
-            bentoComponent: "3d-card-grid",            items: [
-                { name: "Budget", icon: Target },
-                { name: "Savings", icon: ArrowRight },
-                { name: "Bills", icon: Clock },
-                { name: "Reports", icon: FileDown },
-            ],
-            centerIcon: Brain,
-            title: "Smart Management",            description: "Integrated planning tools to help you take full control of your financial health."},
-    ];
-
     const pricingPlans = [
         {
             id: "basic",            price: "Free",            name: "Personal",            buttons: [{ text: "Get Started", href: "#" }],
             features: ["Manual entries", "Basic reporting", "Mobile app access", "Single user"],
         },
         {
-            id: "premium",            badge: "Most Recommended",            price: "$12/mo",            name: "Premium",            buttons: [{ text: "Get Started Now", href: "#" }],
+            id: "premium",            badge: "Popular",            price: "$12/mo",            name: "Premium",            buttons: [{ text: "Start Trial", href: "#" }],
             features: ["Auto categorization", "Receipt OCR", "Custom PDF reports", "Family mode", "Budget Planner"],
         },
         {
@@ -69,10 +40,10 @@ export default function FinanceAppPage() {
             contentWidth="medium"
             sizing="medium"
             background="none"
-            cardStyle="gradient-bordered"
+            cardStyle="glass-elevated"
             primaryButtonStyle="gradient"
-            secondaryButtonStyle="layered"
-            headingFontWeight="semibold"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
         >
             <div id="nav" data-section="nav">
                 <NavbarStyleFullscreen
@@ -80,43 +51,34 @@ export default function FinanceAppPage() {
                     brandName="FinFlow"
                 />
             </div>
-            <HeroBillboardDashboard
-                background={{ variant: "canvas-reveal" }}
-                tag="Smart Finance"
-                tagIcon={DollarSign}
-                title="Master Your Money With Intelligent Automation"
-                description="Track expenses, reach savings goals, and get AI-driven financial insights in one unified dashboard."
-                buttons={[{ text: "Get Started", href: "#" }]}
-                dashboard={{
-                    title: "Finance Overview",                    logoIcon: PieChart,
-                    stats: [
-                        { title: "Monthly Income", values: [5000, 5200, 5100], valuePrefix: "$", description: "Total monthly earnings across all accounts." },
-                        { title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$", description: "Sum of all verified expenditure for the period." },
-                        { title: "Health Score", values: [85, 88, 92], description: "Aggregate metric of your overall financial standing." },
-                    ],
-                    chartTitle: "Balance Trends",                    chartData: [{ value: 10 }, { value: 30 }, { value: 20 }, { value: 60 }, { value: 40 }],
-                    listTitle: "Recent Activity",                    listItems: [
-                        { icon: Receipt, title: "Grocery store", status: "-$85.00" },
-                        { icon: DollarSign, title: "Salary Deposit", status: "+$4200.00" },
-                        { icon: Clock, title: "Electric Bill", status: "-$120.00" },
-                    ],
-                }}
-            />
-            <div id="features" data-section="features">
-                <FeatureBento
-                    features={features}
-                    animationType="slide-up"
-                    tag="Features"
-                    title="Everything You Need to Thrive"
-                    description="From automated bill reminders to deep analytics, we simplify your financial journey."
-                    textboxLayout="default"
-                    useInvertedBackground={false}
+            <div id="hero" data-section="hero">
+                <HeroBillboardDashboard
+                    background={{ variant: "plain" }}
+                    tag="Smart Finance"
+                    tagIcon={DollarSign}
+                    title="Master Your Money With Intelligent Automation"
+                    description="Track expenses, reach savings goals, and get AI-driven financial insights in one unified dashboard."
+                    buttons={[{ text: "Get Started", href: "#" }]}
+                    dashboard={{
+                        title: "Finance Overview",                        logoIcon: PieChart,
+                        sidebarItems: [{ icon: PieChart, active: true }, { icon: Receipt }, { icon: DollarSign }],
+                        buttons: [{ text: "Export" }, { text: "Settings" }],
+                        imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800",                        stats: [
+                            { title: "Monthly Income", values: [5000, 5200, 5100], valuePrefix: "$", description: "Income trends" },
+                            { title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$", description: "Spending analysis" },
+                            { title: "Health Score", values: [85, 88, 92], description: "Financial wellness" },
+                        ],
+                        listItems: [
+                            { icon: Receipt, title: "Grocery store", status: "-$85.00" },
+                            { icon: DollarSign, title: "Salary Deposit", status: "+$4200.00" },
+                            { icon: Clock, title: "Electric Bill", status: "-$120.00" },
+                        ],
+                    }}
                 />
             </div>
-            <div id="planning" data-section="planning">
+            <div id="features" data-section="features">
                 <FeatureHoverPattern
                     animationType="slide-up"
-                    tag="Capabilities"
                     title="Powerful Tools for Better Decisions"
                     description="Leverage smart technology to predict future trends and stay within your budget."
                     textboxLayout="default"
@@ -129,21 +91,42 @@ export default function FinanceAppPage() {
                     ]}
                 />
             </div>
+            <div id="about" data-section="about">
+                <MetricSplitMediaAbout
+                    tag="Insights"
+                    title="Financial Health at a Glance"
+                    description="See exactly where your money goes. Get a clear view of your net worth, spending habits, and future potential with our interactive dashboard."
+                    metrics={[{ value: "95%", title: "User Budget Success" }, { value: "2M+", title: "Transactions Tracked" }]}
+                    useInvertedBackground={false}
+                    mediaAnimation="slide-up"
+                    metricsAnimation="slide-up"
+                />
+            </div>
             <div id="pricing" data-section="pricing">
                 <PricingCardThree
                     plans={pricingPlans}
                     animationType="slide-up"
                     tag="Pricing"
-                    title="Choose the Plan That Fits Your Goals"
-                    description="Unlock premium features designed to help you save more and spend smarter."
+                    title="Affordable Plans for Everyone"
+                    description="Scale your financial tracking as you grow your wealth."
                     textboxLayout="default"
                     useInvertedBackground={false}
                 />
             </div>
+            <div id="contact" data-section="contact">
+                <ContactCTA
+                    tag="Get Started"
+                    title="Ready to take control?"
+                    description="Join thousands of users optimizing their finances with FinFlow today."
+                    buttons={[{ text: "Contact Us", href: "#" }]}
+                    background={{ variant: "plain" }}
+                    useInvertedBackground={false}
+                />
+            </div>
             <div id="footer" data-section="footer">
                 <FooterBaseCard
                     logoText="FinFlow"
-                    columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }]}
+                    columns={[{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] }]}
                 />
             </div>
         </ThemeProvider>