Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -10,9 +10,41 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { TrendingUp, Sparkles, DollarSign, Award, MessageSquare, Rocket, Users, ThumbsUp, Headphones, Zap, Crown } from 'lucide-react';
+import { TrendingUp, Sparkles, DollarSign, Award, MessageSquare, Rocket, Users, ThumbsUp, Headphones, Zap, Crown, BarChart3, PieChart, Wallet } from 'lucide-react';
+import { useState } from 'react';
+import Input from '@/components/form/Input';
 
 export default function FinanceTrackPage() {
+  const [incomeAmount, setIncomeAmount] = useState('');
+  const [incomeSource, setIncomeSource] = useState('');
+  const [expenseAmount, setExpenseAmount] = useState('');
+  const [expenseCategory, setExpenseCategory] = useState('');
+  const [bankBalance, setBankBalance] = useState('12,500.00');
+  const [monthlyIncome, setMonthlyIncome] = useState('8,000.00');
+  const [monthlyExpenses, setMonthlyExpenses] = useState('3,200.00');
+
+  const handleAddIncome = () => {
+    if (incomeAmount && incomeSource) {
+      const newBalance = (parseFloat(bankBalance.replace(/,/g, '')) + parseFloat(incomeAmount)).toFixed(2);
+      const newIncome = (parseFloat(monthlyIncome.replace(/,/g, '')) + parseFloat(incomeAmount)).toFixed(2);
+      setBankBalance(newBalance.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      setMonthlyIncome(newIncome.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      setIncomeAmount('');
+      setIncomeSource('');
+    }
+  };
+
+  const handleAddExpense = () => {
+    if (expenseAmount && expenseCategory) {
+      const newBalance = (parseFloat(bankBalance.replace(/,/g, '')) - parseFloat(expenseAmount)).toFixed(2);
+      const newExpenses = (parseFloat(monthlyExpenses.replace(/,/g, '')) + parseFloat(expenseAmount)).toFixed(2);
+      setBankBalance(newBalance.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      setMonthlyExpenses(newExpenses.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      setExpenseAmount('');
+      setExpenseCategory('');
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -30,6 +62,7 @@ export default function FinanceTrackPage() {
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "home" },
+            { name: "Dashboard", id: "dashboard" },
             { name: "Features", id: "features" },
             { name: "Pricing", id: "pricing" },
             { name: "FAQ", id: "faq" },
@@ -73,6 +106,152 @@ export default function FinanceTrackPage() {
         />
       </div>
 
+      <div id="dashboard" data-section="dashboard">
+        <section className="py-16 md:py-24 px-4 md:px-8">
+          <div className="max-w-6xl mx-auto">
+            <div className="mb-12 text-center">
+              <h2 className="text-4xl md:text-5xl font-bold mb-4">Your Financial Dashboard</h2>
+              <p className="text-lg text-foreground/75 max-w-2xl mx-auto">Manage your income and expenses in real-time with our intuitive dashboard</p>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+              {/* Income Entry Form */}
+              <div className="bg-card rounded-lg p-6 shadow-sm border border-accent/20">
+                <div className="flex items-center gap-2 mb-4">
+                  <TrendingUp className="w-5 h-5 text-primary-cta" />
+                  <h3 className="text-xl font-semibold">Add Income</h3>
+                </div>
+                <div className="space-y-4">
+                  <Input
+                    value={incomeSource}
+                    onChange={setIncomeSource}
+                    placeholder="Income source (e.g., Salary)"
+                    type="text"
+                  />
+                  <Input
+                    value={incomeAmount}
+                    onChange={setIncomeAmount}
+                    placeholder="Amount"
+                    type="number"
+                  />
+                  <button
+                    onClick={handleAddIncome}
+                    className="w-full bg-primary-cta text-primary-cta-text py-2 px-4 rounded-lg font-medium hover:opacity-90 transition-opacity"
+                  >
+                    Add Income
+                  </button>
+                </div>
+              </div>
+
+              {/* Expense Entry Form */}
+              <div className="bg-card rounded-lg p-6 shadow-sm border border-accent/20">
+                <div className="flex items-center gap-2 mb-4">
+                  <Wallet className="w-5 h-5 text-primary-cta" />
+                  <h3 className="text-xl font-semibold">Add Expense</h3>
+                </div>
+                <div className="space-y-4">
+                  <select
+                    value={expenseCategory}
+                    onChange={(e) => setExpenseCategory(e.target.value)}
+                    className="w-full px-4 py-2 rounded-lg bg-background border border-accent/20 text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
+                  >
+                    <option value="">Select category</option>
+                    <option value="Food">Food & Dining</option>
+                    <option value="Transport">Transport</option>
+                    <option value="Utilities">Utilities</option>
+                    <option value="Entertainment">Entertainment</option>
+                    <option value="Shopping">Shopping</option>
+                    <option value="Other">Other</option>
+                  </select>
+                  <Input
+                    value={expenseAmount}
+                    onChange={setExpenseAmount}
+                    placeholder="Amount"
+                    type="number"
+                  />
+                  <button
+                    onClick={handleAddExpense}
+                    className="w-full bg-primary-cta text-primary-cta-text py-2 px-4 rounded-lg font-medium hover:opacity-90 transition-opacity"
+                  >
+                    Add Expense
+                  </button>
+                </div>
+              </div>
+
+              {/* Bank Balance */}
+              <div className="bg-card rounded-lg p-6 shadow-sm border border-accent/20">
+                <div className="flex items-center gap-2 mb-4">
+                  <DollarSign className="w-5 h-5 text-primary-cta" />
+                  <h3 className="text-xl font-semibold">Bank Balance</h3>
+                </div>
+                <div className="text-4xl font-bold text-primary-cta mb-2">${bankBalance}</div>
+                <p className="text-sm text-foreground/50">Total available funds</p>
+              </div>
+            </div>
+
+            {/* Metrics Display */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {/* Monthly Income vs Expenses */}
+              <div className="bg-card rounded-lg p-6 shadow-sm border border-accent/20">
+                <div className="flex items-center gap-2 mb-4">
+                  <BarChart3 className="w-5 h-5 text-primary-cta" />
+                  <h3 className="text-lg font-semibold">Monthly Income</h3>
+                </div>
+                <div className="text-3xl font-bold text-green-600 mb-2">${monthlyIncome}</div>
+                <div className="h-2 bg-accent rounded-full overflow-hidden">
+                  <div className="h-full w-4/5 bg-green-600"></div>
+                </div>
+                <p className="text-xs text-foreground/50 mt-2">Income this month</p>
+              </div>
+
+              {/* Monthly Expenses */}
+              <div className="bg-card rounded-lg p-6 shadow-sm border border-accent/20">
+                <div className="flex items-center gap-2 mb-4">
+                  <Wallet className="w-5 h-5 text-primary-cta" />
+                  <h3 className="text-lg font-semibold">Monthly Expenses</h3>
+                </div>
+                <div className="text-3xl font-bold text-red-600 mb-2">${monthlyExpenses}</div>
+                <div className="h-2 bg-accent rounded-full overflow-hidden">
+                  <div className="h-full w-2/5 bg-red-600"></div>
+                </div>
+                <p className="text-xs text-foreground/50 mt-2">Expenses this month</p>
+              </div>
+
+              {/* Spending by Category */}
+              <div className="bg-card rounded-lg p-6 shadow-sm border border-accent/20">
+                <div className="flex items-center gap-2 mb-4">
+                  <PieChart className="w-5 h-5 text-primary-cta" />
+                  <h3 className="text-lg font-semibold">Top Categories</h3>
+                </div>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Food & Dining</span>
+                    <span className="text-sm font-semibold">35%</span>
+                  </div>
+                  <div className="h-1.5 bg-accent rounded-full overflow-hidden">
+                    <div className="h-full w-7/12 bg-primary-cta"></div>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Transport</span>
+                    <span className="text-sm font-semibold">28%</span>
+                  </div>
+                  <div className="h-1.5 bg-accent rounded-full overflow-hidden">
+                    <div className="h-full w-4/12 bg-primary-cta"></div>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Other</span>
+                    <span className="text-sm font-semibold">37%</span>
+                  </div>
+                  <div className="h-1.5 bg-accent rounded-full overflow-hidden">
+                    <div className="h-full w-5/12 bg-primary-cta"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
       <div id="features" data-section="features">
         <FeatureCardSeven
           title="Powerful Features for Complete Financial Control"