Update src/app/page.tsx

src/app/page.tsx

@@ -2,55 +2,21 @@
 
 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 TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
 import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Bot, Brain, Sparkles, User, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, FileDown, Receipt, Target, DollarSign, Users, Settings, PieChart } 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: "Features", id: "features" },
-        { name: "Planning", id: "planning" },
         { 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: PiggyBankIconMock },
-                { 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."},
-    ];
-
-    function PiggyBankIconMock(props: any) { return <Target {...props} />; }
-
     const pricingPlans = [
         {
             id: "basic",            price: "Free",            name: "Personal",            buttons: [{ text: "Get Started", href: "#" }],
@@ -74,70 +40,69 @@ export default function FinanceAppPage() {
             contentWidth="medium"
             sizing="medium"
             background="none"
-            cardStyle="gradient-bordered"
+            cardStyle="glass-elevated"
             primaryButtonStyle="gradient"
-            secondaryButtonStyle="layered"
+            secondaryButtonStyle="glass"
-            headingFontWeight="semibold"
+            headingFontWeight="normal"
         >
-            <NavbarStyleFullscreen
+            <div id="nav" data-section="nav">
-                navItems={navItems}
+                <NavbarStyleFullscreen
-                brandName="FinFlow"
+                    navItems={navItems}
-            />
+                    brandName="FinFlow"
-            <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: "$" },
-                        { title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$" },
-                        { title: "Health Score", values: [85, 88, 92] },
-                    ],
-                    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">
-                <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>
-            <FeatureHoverPattern
+            <div id="hero" data-section="hero">
-                animationType="slide-up"
+                <HeroBillboardDashboard
-                tag="Capabilities"
+                    background={{ variant: "plain" }}
-                title="Powerful Tools for Better Decisions"
+                    tag="Smart Finance"
-                description="Leverage smart technology to predict future trends and stay within your budget."
+                    tagIcon={DollarSign}
-                textboxLayout="default"
+                    title="Master Your Money With Intelligent Automation"
-                useInvertedBackground={false}
+                    description="Track expenses, reach savings goals, and get AI-driven financial insights in one unified dashboard."
-                features={[
+                    buttons={[{ text: "Get Started", href: "#" }]}
-                    { icon: Receipt, title: "OCR Receipt Scanning", description: "Scan your physical receipts and let AI extract details automatically." },
+                    dashboard={{
-                    { icon: Brain, title: "Smart Forecasting", description: "Predict your monthly spending and balance with AI-driven trend analysis." },
+                        title: "Finance Overview",                        logoIcon: PieChart,
-                    { icon: Users, title: "Family Mode", description: "Collaborate with family members to manage shared household accounts securely." },
+                        sidebarItems: [{ icon: PieChart, active: true }, { icon: Receipt }, { icon: DollarSign }],
-                    { icon: Shield, title: "Secure Backup", description: "Your financial data is encrypted and backed up for peace of mind." },
+                        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" },
-            <MetricSplitMediaAbout
+                            { title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$", description: "Spending analysis" },
-                tag="Insights"
+                            { title: "Health Score", values: [85, 88, 92], description: "Financial wellness" },
-                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."
+                        listItems: [
-                metrics={[{ value: "95%", title: "User Budget Success" }, { value: "2M+", title: "Transactions Tracked" }]}
+                            { icon: Receipt, title: "Grocery store", status: "-$85.00" },
-                useInvertedBackground={false}
+                            { icon: DollarSign, title: "Salary Deposit", status: "+$4200.00" },
-            />
+                            { icon: Clock, title: "Electric Bill", status: "-$120.00" },
-            <div id="pricing">
+                        ],
+                    }}
+                />
+            </div>
+            <div id="features" data-section="features">
+                <FeatureHoverPattern
+                    animationType="slide-up"
+                    title="Powerful Tools for Better Decisions"
+                    description="Leverage smart technology to predict future trends and stay within your budget."
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                    features={[
+                        { icon: Receipt, title: "OCR Receipt Scanning", description: "Scan your physical receipts and let AI extract details automatically." },
+                        { icon: Brain, title: "Smart Forecasting", description: "Predict your monthly spending and balance with AI-driven trend analysis." },
+                        { icon: Users, title: "Family Mode", description: "Collaborate with family members to manage shared household accounts securely." },
+                        { icon: Shield, title: "Secure Backup", description: "Your financial data is encrypted and backed up for peace of mind." },
+                    ]}
+                />
+            </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"
@@ -148,10 +113,22 @@ export default function FinanceAppPage() {
                     useInvertedBackground={false}
                 />
             </div>
-            <FooterBaseCard
+            <div id="contact" data-section="contact">
-                logoText="FinFlow"
+                <ContactCTA
-                columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }]}
+                    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: "#" }, { label: "Pricing", href: "#" }] }]}
+                />
+            </div>
         </ThemeProvider>
     );
 }