From edbabca3dc0748df79ab58bcec9dbb1d3d52f35c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 1 Jun 2026 05:16:30 +0000
Subject: [PATCH] Update src/app/goals/page.tsx

---
 src/app/goals/page.tsx | 138 +++++++++++++++++++++++++++--------------
 1 file changed, 90 insertions(+), 48 deletions(-)

diff --git a/src/app/goals/page.tsx b/src/app/goals/page.tsx
index f522934..10e0731 100644
--- a/src/app/goals/page.tsx
+++ b/src/app/goals/page.tsx
@@ -1,70 +1,106 @@
 "use client";
 
+import { useState, useEffect } from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Facebook, Linkedin, Twitter } from "lucide-react";
+import { Facebook, Linkedin, Twitter } from 'lucide-react';
 
 export default function GoalsPage() {
+  const [financialGoal, setFinancialGoal] = useState<number>(0);
+  const [requiredCapital, setRequiredCapital] = useState<number>(0);
+  const [currentIncome, setCurrentIncome] = useState<number>(0);
+  const [remainingFunds, setRemainingFunds] = useState<number>(0);
+
+  useEffect(() => {
+    setRemainingFunds(Math.max(0, financialGoal + requiredCapital - currentIncome));
+  }, [financialGoal, requiredCapital, currentIncome]);
+
   return (
     <ThemeProvider
-      defaultButtonVariant="bounce-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="mediumSmall"
-      sizing="medium"
-      background="floatingGradient"
-      cardStyle="solid"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="mediumSmall"
+        sizing="medium"
+        background="floatingGradient"
+        cardStyle="solid"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
             navItems={[
-              { name: "Home", id: "/" },
-              { name: "Biznes Topish", id: "/#biznes-topish" },
-              { name: "Mening Biznes Profilim", id: "/profile" },
-              { name: "Yangi Biznes Qo'shish", id: "/register" },
-              { name: "Goals", id: "/goals" }
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "Biznes Topish",                id: "/#biznes-topish"},
+              {
+                name: "Mening Biznes Profilim",                id: "/profile"},
+              {
+                name: "Yangi Biznes Qo'shish",                id: "/register"},
+              {
+                name: "Goals",                id: "/goals"},
             ]}
             logoSrc="http://img.b2bpic.net/free-vector/illustration-entrepreneur-conccept_53876-5536.jpg"
             logoAlt="Biznes-Hub Logo"
             brandName="Biznes-Hub"
             button={{
-              text: "Get Started",              href: "/register"
-            }}
+              text: "Get Started",              href: "/register"}}
           />
         </div>
 
-        <div id="goals" data-section="goals">
-          <MetricCardSeven
-            textboxLayout="default"
-            useInvertedBackground={true}
-            metrics={[
-              {
-                id: "goal-1",                value: "500,000 $",                title: "Dream Home",                items: [
-                  "Savings Needed: 400,000 $",                  "Current Income: 5,000 $ / month",                  "Remaining: 250,000 $"
-                ]
-              },
-              {
-                id: "goal-2",                value: "1,000,000 $",                title: "Retirement Fund",                items: [
-                  "Savings Needed: 800,000 $",                  "Current Income: 7,000 $ / month",                  "Remaining: 600,000 $"
-                ]
-              },
-              {
-                id: "goal-3",                value: "200,000 $",                title: "Startup Capital",                items: [
-                  "Savings Needed: 150,000 $",                  "Current Income: 3,000 $ / month",                  "Remaining: 100,000 $"
-                ]
-              }
-            ]}
-            title="Financial Goals Tracker"
-            description="Set your financial objectives, track your progress, and visualize your path to success."
-            animationType="slide-up"
-          />
+        <div id="goals-content" data-section="goals-content" className="min-h-screen py-20 flex items-center justify-center">
+          <div className="bg-card p-8 rounded-lg shadow-xl max-w-lg w-full">
+            <h1 className="text-4xl font-extrabold text-foreground mb-6 text-center">Biznes Maqsadlaringiz</h1>
+            <p className="text-lg text-foreground/80 mb-8 text-center">Moliyaviy maqsadlaringizni kiriting va kerakli mablag'ni hisoblang.</p>
+
+            <div className="space-y-6">
+              <div>
+                <label htmlFor="financialGoal" className="block text-foreground text-sm font-semibold mb-2">Moliyaviy Maqsad (USD)</label>
+                <input
+                  type="number"
+                  id="financialGoal"
+                  value={financialGoal}
+                  onChange={(e) => setFinancialGoal(parseFloat(e.target.value) || 0)}
+                  className="w-full p-3 border border-gray-300 rounded-md bg-background text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
+                  placeholder="Misol: 100000"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="requiredCapital" className="block text-foreground text-sm font-semibold mb-2">Talab Qilinadigan Kapital (USD)</label>
+                <input
+                  type="number"
+                  id="requiredCapital"
+                  value={requiredCapital}
+                  onChange={(e) => setRequiredCapital(parseFloat(e.target.value) || 0)}
+                  className="w-full p-3 border border-gray-300 rounded-md bg-background text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
+                  placeholder="Misol: 50000"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="currentIncome" className="block text-foreground text-sm font-semibold mb-2">Joriy Daromad (USD)</label>
+                <input
+                  type="number"
+                  id="currentIncome"
+                  value={currentIncome}
+                  onChange={(e) => setCurrentIncome(parseFloat(e.target.value) || 0)}
+                  className="w-full p-3 border border-gray-300 rounded-md bg-background text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
+                  placeholder="Misol: 20000"
+                />
+              </div>
+
+              <div className="pt-4">
+                <h2 className="text-xl font-semibold text-foreground">Qolgan Mablag':</h2>
+                <p className="text-3xl font-bold text-primary-cta mt-2">{remainingFunds.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</p>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div id="footer" data-section="footer">
@@ -74,13 +110,19 @@ export default function GoalsPage() {
             logoText="Biznes-Hub"
             copyrightText="© 2024 Biznes-Hub. Barcha huquqlar himoyalangan."
             socialLinks={[
-              { icon: Facebook, href: "https://facebook.com/bizneshub", ariaLabel: "Facebook" },
-              { icon: Linkedin, href: "https://linkedin.com/bizneshub", ariaLabel: "LinkedIn" },
-              { icon: Twitter, href: "https://twitter.com/bizneshub", ariaLabel: "Twitter" }
+              {
+                icon: Facebook,
+                href: "https://facebook.com/bizneshub",                ariaLabel: "Facebook"},
+              {
+                icon: Linkedin,
+                href: "https://linkedin.com/bizneshub",                ariaLabel: "LinkedIn"},
+              {
+                icon: Twitter,
+                href: "https://twitter.com/bizneshub",                ariaLabel: "Twitter"},
             ]}
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}