Update src/app/page.tsx

src/app/page.tsx

@@ -5,13 +5,10 @@ import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/Nav
 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 { Bot, Brain, User, CheckCircle, Send, DollarSign, Target, Clock, FileDown, PieChart, Receipt, Users, Shield, ArrowRight } from "lucide-react";
 
 export default function FinanceAppPage() {
     const navItems = [
@@ -41,7 +38,7 @@ export default function FinanceAppPage() {
         {
             bentoComponent: "3d-card-grid",            items: [
                 { name: "Budget", icon: Target },
-                { name: "Savings", icon: PiggyBankIconMock },
+                { name: "Savings", icon: ArrowRight },
                 { name: "Bills", icon: Clock },
                 { name: "Reports", icon: FileDown },
             ],
@@ -49,15 +46,13 @@ export default function FinanceAppPage() {
             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: "#" }],
             features: ["Manual entries", "Basic reporting", "Mobile app access", "Single user"],
         },
         {
-            id: "premium",            badge: "Popular",            price: "$12/mo",            name: "Premium",            buttons: [{ text: "Start Trial", href: "#" }],
+            id: "premium",            badge: "Most Recommended",            price: "$12/mo",            name: "Premium",            buttons: [{ text: "Get Started Now", href: "#" }],
             features: ["Auto categorization", "Receipt OCR", "Custom PDF reports", "Family mode", "Budget Planner"],
         },
         {
@@ -79,10 +74,12 @@ export default function FinanceAppPage() {
             secondaryButtonStyle="layered"
             headingFontWeight="semibold"
         >
-            <NavbarStyleFullscreen
+            <div id="nav" data-section="nav">
-                navItems={navItems}
+                <NavbarStyleFullscreen
-                brandName="FinFlow"
+                    navItems={navItems}
-            />
+                    brandName="FinFlow"
+                />
+            </div>
             <HeroBillboardDashboard
                 background={{ variant: "canvas-reveal" }}
                 tag="Smart Finance"
@@ -93,9 +90,9 @@ export default function FinanceAppPage() {
                 dashboard={{
                     title: "Finance Overview",                    logoIcon: PieChart,
                     stats: [
-                        { title: "Monthly Income", values: [5000, 5200, 5100], valuePrefix: "$" },
+                        { title: "Monthly Income", values: [5000, 5200, 5100], valuePrefix: "$", description: "Total monthly earnings across all accounts." },
-                        { title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$" },
+                        { title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$", description: "Sum of all verified expenditure for the period." },
-                        { title: "Health Score", values: [85, 88, 92] },
+                        { 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: [
@@ -105,7 +102,7 @@ export default function FinanceAppPage() {
                     ],
                 }}
             />
-            <div id="features">
+            <div id="features" data-section="features">
                 <FeatureBento
                     features={features}
                     animationType="slide-up"
@@ -116,42 +113,39 @@ export default function FinanceAppPage() {
                     useInvertedBackground={false}
                 />
             </div>
-            <FeatureHoverPattern
+            <div id="planning" data-section="planning">
-                animationType="slide-up"
+                <FeatureHoverPattern
-                tag="Capabilities"
+                    animationType="slide-up"
-                title="Powerful Tools for Better Decisions"
+                    tag="Capabilities"
-                description="Leverage smart technology to predict future trends and stay within your budget."
+                    title="Powerful Tools for Better Decisions"
-                textboxLayout="default"
+                    description="Leverage smart technology to predict future trends and stay within your budget."
-                useInvertedBackground={false}
+                    textboxLayout="default"
-                features={[
+                    useInvertedBackground={false}
-                    { icon: Receipt, title: "OCR Receipt Scanning", description: "Scan your physical receipts and let AI extract details automatically." },
+                    features={[
-                    { icon: Brain, title: "Smart Forecasting", description: "Predict your monthly spending and balance with AI-driven trend analysis." },
+                        { icon: Receipt, title: "OCR Receipt Scanning", description: "Scan your physical receipts and let AI extract details automatically." },
-                    { icon: Users, title: "Family Mode", description: "Collaborate with family members to manage shared household accounts securely." },
+                        { icon: Brain, title: "Smart Forecasting", description: "Predict your monthly spending and balance with AI-driven trend analysis." },
-                    { icon: Shield, title: "Secure Backup", description: "Your financial data is encrypted and backed up for peace of mind." },
+                        { 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." },
-            />
+                    ]}
-            <MetricSplitMediaAbout
+                />
-                tag="Insights"
+            </div>
-                title="Financial Health at a Glance"
+            <div id="pricing" data-section="pricing">
-                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}
-            />
-            <div id="pricing">
                 <PricingCardThree
                     plans={pricingPlans}
                     animationType="slide-up"
                     tag="Pricing"
-                    title="Affordable Plans for Everyone"
+                    title="Choose the Plan That Fits Your Goals"
-                    description="Scale your financial tracking as you grow your wealth."
+                    description="Unlock premium features designed to help you save more and spend smarter."
                     textboxLayout="default"
                     useInvertedBackground={false}
                 />
             </div>
-            <FooterBaseCard
+            <div id="footer" data-section="footer">
-                logoText="FinFlow"
+                <FooterBaseCard
-                columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }]}
+                    logoText="FinFlow"
-            />
+                    columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }]}
+                />
+            </div>
         </ThemeProvider>
     );
 }