Update src/app/goals/page.tsx
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user