Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1d00d62b42 | |||
| 2dfd63f83d | |||
| d3d05ea7d1 | |||
| 86b51bec7c | |||
| 01faf64d4c | |||
| fca44d7034 | |||
| d637d0ca71 | |||
| 1a40b43fe7 | |||
| 55a6873a13 | |||
| e6f0c2c728 | |||
| 9ee6fa38b7 |
@@ -3,22 +3,34 @@
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import {
|
||||
CreditCard,
|
||||
Wallet,
|
||||
Send,
|
||||
DollarSign,
|
||||
TrendingUp,
|
||||
Zap,
|
||||
Wallet,
|
||||
ArrowUpRight,
|
||||
ArrowDownLeft,
|
||||
Settings,
|
||||
LogOut,
|
||||
Bell,
|
||||
Shield,
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Download,
|
||||
Upload,
|
||||
DollarSign,
|
||||
Zap,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [showBalance, setShowBalance] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState("overview");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
@@ -30,8 +42,8 @@ export default function DashboardPage() {
|
||||
{
|
||||
items: [
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "How It Works", href: "/#how-it-works" },
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
@@ -78,107 +90,295 @@ export default function DashboardPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinanceFlow"
|
||||
bottomLeftText="Global Investment Platform"
|
||||
bottomLeftText="Investment Dashboard"
|
||||
bottomRightText="support@financeflow.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-overview" data-section="dashboard-overview">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Your Investment Dashboard - Manage & Grow Your Wealth",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Full Dashboard", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-b from-background to-card">
|
||||
<div className="mx-auto px-4 md:px-6 py-8 md:py-12">
|
||||
{/* Header Section */}
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-2">Welcome Back, User</h1>
|
||||
<p className="text-foreground/60">Manage your investments and track your portfolio growth</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button className="p-2 hover:bg-card rounded-lg transition-colors">
|
||||
<Bell className="w-6 h-6" />
|
||||
</button>
|
||||
<button className="p-2 hover:bg-card rounded-lg transition-colors">
|
||||
<Settings className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="account-operations" data-section="account-operations">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<FeatureBento
|
||||
title="Account Operations"
|
||||
description="Manage your investments, deposits, withdrawals, and transactions all in one place with real-time updates."
|
||||
tag="ACCOUNT MANAGEMENT"
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Deposit Funds",
|
||||
description:
|
||||
"Add money to your FinanceFlow account through multiple secure payment methods.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
{ icon: CreditCard, label: "Methods", value: "10+" },
|
||||
{ icon: Zap, label: "Processing", value: "Instant" },
|
||||
{ icon: DollarSign, label: "Min Amount", value: "₹1,000" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Withdraw Profits",
|
||||
description:
|
||||
"Transfer your earnings directly to your bank account with zero fees.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
{ icon: Send, label: "Transfer", value: "Direct" },
|
||||
{ icon: TrendingUp, label: "Fees", value: "0%" },
|
||||
{ icon: Zap, label: "Time", value: "Minutes" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Investment Portfolio",
|
||||
description:
|
||||
"Track your active investments across crypto, stocks, and forex in real-time.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
{ icon: TrendingUp, label: "Assets", value: "50+" },
|
||||
{ icon: Wallet, label: "Diversification", value: "Auto" },
|
||||
{ icon: ArrowUpRight, label: "Growth", value: "Real-time" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Investment Status Cards */}
|
||||
<div id="investment-status" data-section="investment-status" className="mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{/* Total Balance Card */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6 hover:border-primary-cta/30 transition-colors">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p className="text-foreground/60 text-sm mb-1">Total Balance</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-3xl font-bold">
|
||||
{showBalance ? "₹2,50,000" : "••••••"}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowBalance(!showBalance)}
|
||||
className="p-1 hover:bg-foreground/10 rounded transition-colors"
|
||||
>
|
||||
{showBalance ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Wallet className="w-8 h-8 text-primary-cta" />
|
||||
</div>
|
||||
<p className="text-sm text-foreground/60">Updated just now</p>
|
||||
</div>
|
||||
|
||||
<div id="portfolio-metrics" data-section="portfolio-metrics">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<MetricCardFourteen
|
||||
title="Your Portfolio Performance"
|
||||
tag="ACCOUNT STATISTICS"
|
||||
tagAnimation="blur-reveal"
|
||||
metrics={[
|
||||
{
|
||||
id: "balance",
|
||||
value: "₹5,50,000",
|
||||
description: "Total Account Balance",
|
||||
},
|
||||
{
|
||||
id: "gains",
|
||||
value: "₹2,50,000",
|
||||
description: "Total Gains Earned",
|
||||
},
|
||||
{
|
||||
id: "active",
|
||||
value: "12",
|
||||
description: "Active Investments",
|
||||
},
|
||||
{
|
||||
id: "pending",
|
||||
value: "₹50,000",
|
||||
description: "Pending Withdrawals",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
{/* Today's Profit Card */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6 hover:border-primary-cta/30 transition-colors">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p className="text-foreground/60 text-sm mb-1">Today's Profit</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-3xl font-bold text-green-500">₹2,50,000</h3>
|
||||
<ArrowUpRight className="w-5 h-5 text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
<TrendingUp className="w-8 h-8 text-primary-cta" />
|
||||
</div>
|
||||
<p className="text-sm text-foreground/60">+100% ROI</p>
|
||||
</div>
|
||||
|
||||
{/* Active Investments Card */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6 hover:border-primary-cta/30 transition-colors">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p className="text-foreground/60 text-sm mb-1">Active Investments</p>
|
||||
<h3 className="text-3xl font-bold">4</h3>
|
||||
</div>
|
||||
<CreditCard className="w-8 h-8 text-primary-cta" />
|
||||
</div>
|
||||
<p className="text-sm text-foreground/60">Diversified portfolio</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div id="account-tabs" data-section="account-tabs" className="mb-8">
|
||||
<div className="flex gap-4 border-b border-foreground/10 mb-6">
|
||||
<button
|
||||
onClick={() => setActiveTab("overview")}
|
||||
className={`pb-3 px-2 font-medium transition-colors ${
|
||||
activeTab === "overview"
|
||||
? "text-primary-cta border-b-2 border-primary-cta"
|
||||
: "text-foreground/60 hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
Overview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("transactions")}
|
||||
className={`pb-3 px-2 font-medium transition-colors ${
|
||||
activeTab === "transactions"
|
||||
? "text-primary-cta border-b-2 border-primary-cta"
|
||||
: "text-foreground/60 hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
Transactions
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("settings")}
|
||||
className={`pb-3 px-2 font-medium transition-colors ${
|
||||
activeTab === "settings"
|
||||
? "text-primary-cta border-b-2 border-primary-cta"
|
||||
: "text-foreground/60 hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
Account Settings
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Overview Tab */}
|
||||
{activeTab === "overview" && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Portfolio Summary</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="p-4 bg-foreground/5 rounded-lg">
|
||||
<p className="text-foreground/60 text-sm mb-1">Total Invested</p>
|
||||
<p className="text-2xl font-bold">₹2,50,000</p>
|
||||
</div>
|
||||
<div className="p-4 bg-foreground/5 rounded-lg">
|
||||
<p className="text-foreground/60 text-sm mb-1">Total Returns</p>
|
||||
<p className="text-2xl font-bold text-green-500">₹2,50,000</p>
|
||||
</div>
|
||||
<div className="p-4 bg-foreground/5 rounded-lg">
|
||||
<p className="text-foreground/60 text-sm mb-1">ROI</p>
|
||||
<p className="text-2xl font-bold text-green-500">100%</p>
|
||||
</div>
|
||||
<div className="p-4 bg-foreground/5 rounded-lg">
|
||||
<p className="text-foreground/60 text-sm mb-1">Pending Withdraw</p>
|
||||
<p className="text-2xl font-bold">₹0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Quick Actions</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button className="flex items-center gap-3 p-4 bg-primary-cta/10 hover:bg-primary-cta/20 rounded-lg transition-colors">
|
||||
<Upload className="w-6 h-6 text-primary-cta" />
|
||||
<div className="text-left">
|
||||
<p className="font-semibold">Deposit Funds</p>
|
||||
<p className="text-sm text-foreground/60">Add money to your account</p>
|
||||
</div>
|
||||
</button>
|
||||
<button className="flex items-center gap-3 p-4 bg-secondary-cta/10 hover:bg-secondary-cta/20 rounded-lg transition-colors">
|
||||
<Download className="w-6 h-6 text-secondary-cta" />
|
||||
<div className="text-left">
|
||||
<p className="font-semibold">Withdraw Profits</p>
|
||||
<p className="text-sm text-foreground/60">Instant bank transfer</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Transactions Tab */}
|
||||
{activeTab === "transactions" && (
|
||||
<div className="bg-card border border-foreground/10 rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-foreground/5 border-b border-foreground/10">
|
||||
<tr>
|
||||
<th className="text-left px-6 py-3 text-sm font-semibold">Date</th>
|
||||
<th className="text-left px-6 py-3 text-sm font-semibold">Type</th>
|
||||
<th className="text-left px-6 py-3 text-sm font-semibold">Amount</th>
|
||||
<th className="text-left px-6 py-3 text-sm font-semibold">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-foreground/5 hover:bg-foreground/5 transition-colors">
|
||||
<td className="px-6 py-4 text-sm">Dec 20, 2024</td>
|
||||
<td className="px-6 py-4 text-sm flex items-center gap-2">
|
||||
<ArrowUpRight className="w-4 h-4 text-green-500" />
|
||||
Investment
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm font-semibold">₹1,00,000</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className="px-3 py-1 bg-green-500/20 text-green-600 rounded-full text-xs font-semibold">Completed</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b border-foreground/5 hover:bg-foreground/5 transition-colors">
|
||||
<td className="px-6 py-4 text-sm">Dec 20, 2024</td>
|
||||
<td className="px-6 py-4 text-sm flex items-center gap-2">
|
||||
<ArrowDownLeft className="w-4 h-4 text-green-500" />
|
||||
Profit Return
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-green-500">+₹1,00,000</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className="px-3 py-1 bg-green-500/20 text-green-600 rounded-full text-xs font-semibold">Completed</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b border-foreground/5 hover:bg-foreground/5 transition-colors">
|
||||
<td className="px-6 py-4 text-sm">Dec 19, 2024</td>
|
||||
<td className="px-6 py-4 text-sm flex items-center gap-2">
|
||||
<ArrowUpRight className="w-4 h-4 text-green-500" />
|
||||
Investment
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm font-semibold">₹1,50,000</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className="px-3 py-1 bg-green-500/20 text-green-600 rounded-full text-xs font-semibold">Completed</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-foreground/5 transition-colors">
|
||||
<td className="px-6 py-4 text-sm">Dec 19, 2024</td>
|
||||
<td className="px-6 py-4 text-sm flex items-center gap-2">
|
||||
<ArrowDownLeft className="w-4 h-4 text-green-500" />
|
||||
Profit Return
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-green-500">+₹1,50,000</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className="px-3 py-1 bg-green-500/20 text-green-600 rounded-full text-xs font-semibold">Completed</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Account Settings Tab */}
|
||||
{activeTab === "settings" && (
|
||||
<div className="space-y-6">
|
||||
{/* Account Information */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Account Information</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm text-foreground/60 mb-1 block">Full Name</label>
|
||||
<div className="p-3 bg-foreground/5 rounded-lg">User Name</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-foreground/60 mb-1 block">Email Address</label>
|
||||
<div className="p-3 bg-foreground/5 rounded-lg">user@financeflow.com</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-foreground/60 mb-1 block">Phone Number</label>
|
||||
<div className="p-3 bg-foreground/5 rounded-lg">+91 98765 43210</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-foreground/60 mb-1 block">User ID</label>
|
||||
<div className="p-3 bg-foreground/5 rounded-lg font-mono">FF-2024-001234</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Security Settings */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-primary-cta" />
|
||||
Security Settings
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<button className="w-full flex items-center justify-between p-4 border border-foreground/10 rounded-lg hover:bg-foreground/5 transition-colors">
|
||||
<span className="flex items-center gap-2">
|
||||
<Lock className="w-5 h-5 text-primary-cta" />
|
||||
<div className="text-left">
|
||||
<p className="font-semibold">Change Password</p>
|
||||
<p className="text-sm text-foreground/60">Update your password</p>
|
||||
</div>
|
||||
</span>
|
||||
<ArrowUpRight className="w-5 h-5 text-foreground/40" />
|
||||
</button>
|
||||
<button className="w-full flex items-center justify-between p-4 border border-foreground/10 rounded-lg hover:bg-foreground/5 transition-colors">
|
||||
<span className="flex items-center gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-primary-cta" />
|
||||
<div className="text-left">
|
||||
<p className="font-semibold">Two-Factor Authentication</p>
|
||||
<p className="text-sm text-foreground/60">Status: Enabled</p>
|
||||
</div>
|
||||
</span>
|
||||
<ArrowUpRight className="w-5 h-5 text-foreground/40" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logout */}
|
||||
<button className="w-full flex items-center gap-3 p-4 bg-red-500/10 hover:bg-red-500/20 text-red-600 rounded-lg transition-colors font-semibold">
|
||||
<LogOut className="w-5 h-5" />
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
336
src/app/deposit/page.tsx
Normal file
336
src/app/deposit/page.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import {
|
||||
CreditCard,
|
||||
Wallet,
|
||||
DollarSign,
|
||||
TrendingUp,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
Zap,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function DepositPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
amount: "", paymentMethod: "bank", investmentType: "standard"});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Support", id: "support" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "Withdraw", href: "/withdraw" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Our Team", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Compliance", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Email", href: "mailto:support@financeflow.com" },
|
||||
{ label: "Phone", href: "tel:+919876543210" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
// Calculate maturity time (8 hours from now)
|
||||
const now = new Date();
|
||||
const maturityTime = new Date(now.getTime() + 8 * 60 * 60 * 1000);
|
||||
|
||||
// Store investment in localStorage for dashboard tracking
|
||||
const investment = {
|
||||
id: Date.now().toString(),
|
||||
amount: parseFloat(formData.amount),
|
||||
paymentMethod: formData.paymentMethod,
|
||||
investmentType: formData.investmentType,
|
||||
depositTime: now.toISOString(),
|
||||
maturityTime: maturityTime.toISOString(),
|
||||
status: "active", expectedReturn: parseFloat(formData.amount) * 2,
|
||||
};
|
||||
|
||||
const investments = JSON.parse(
|
||||
localStorage.getItem("investments") || "[]"
|
||||
);
|
||||
investments.push(investment);
|
||||
localStorage.setItem("investments", JSON.stringify(investments));
|
||||
|
||||
setSubmitted(true);
|
||||
setFormData({ amount: "", paymentMethod: "bank", investmentType: "standard" });
|
||||
|
||||
// Reset form after 3 seconds
|
||||
setTimeout(() => setSubmitted(false), 3000);
|
||||
} catch (error) {
|
||||
console.error("Deposit failed:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinanceFlow"
|
||||
bottomLeftText="Investment Platform"
|
||||
bottomRightText="support@financeflow.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
|
||||
<div className="mx-auto max-w-4xl px-4 py-20 md:px-6">
|
||||
<div className="grid gap-12 md:grid-cols-2">
|
||||
{/* Deposit Form */}
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-8 shadow-lg dark:border-slate-800 dark:bg-slate-900">
|
||||
<h1 className="mb-2 text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Make a Deposit
|
||||
</h1>
|
||||
<p className="mb-8 text-slate-600 dark:text-slate-400">
|
||||
Start investing with just ₹1,000 and watch your money double in 8 hours.
|
||||
</p>
|
||||
|
||||
{submitted && (
|
||||
<div className="mb-6 rounded-lg bg-green-50 p-4 text-green-800 dark:bg-green-900/20 dark:text-green-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle size={20} />
|
||||
<span>Deposit processed successfully! Your investment is now active.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Investment Amount */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-slate-900 dark:text-white">
|
||||
Investment Amount (₹)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="amount"
|
||||
value={formData.amount}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter amount (minimum ₹1,000)"
|
||||
min="1000"
|
||||
step="100"
|
||||
required
|
||||
className="w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-slate-900 placeholder-slate-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Investment Type */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-slate-900 dark:text-white">
|
||||
Investment Type
|
||||
</label>
|
||||
<select
|
||||
name="investmentType"
|
||||
value={formData.investmentType}
|
||||
onChange={handleInputChange}
|
||||
className="w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-slate-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white"
|
||||
>
|
||||
<option value="standard">Standard (8-Hour Doubling)</option>
|
||||
<option value="crypto">Cryptocurrency Mix</option>
|
||||
<option value="forex">Forex Trading</option>
|
||||
<option value="mixed">Mixed Portfolio</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Payment Method */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-slate-900 dark:text-white">
|
||||
Payment Method
|
||||
</label>
|
||||
<select
|
||||
name="paymentMethod"
|
||||
value={formData.paymentMethod}
|
||||
onChange={handleInputChange}
|
||||
className="w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-slate-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white"
|
||||
>
|
||||
<option value="bank">Bank Transfer</option>
|
||||
<option value="card">Credit/Debit Card</option>
|
||||
<option value="wallet">Digital Wallet (Google Pay)</option>
|
||||
<option value="upi">UPI Payment</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Expected Returns Display */}
|
||||
{formData.amount && (
|
||||
<div className="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
|
||||
<p className="mb-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
Expected Return:
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||
₹{(parseFloat(formData.amount) * 2).toLocaleString("en-IN")}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
|
||||
Your investment will be available for withdrawal after 8 hours
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !formData.amount}
|
||||
className="w-full rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-all duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-500 dark:hover:bg-blue-600"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Zap size={18} className="animate-spin" />
|
||||
Processing...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
Confirm Deposit
|
||||
<ArrowRight size={18} />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<p className="text-center text-xs text-slate-500 dark:text-slate-400">
|
||||
By depositing, you agree to our Terms of Service and understand the 8-hour investment window.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Information Panel */}
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-6 shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
|
||||
<TrendingUp className="text-blue-600 dark:text-blue-400" size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
How It Works
|
||||
</h3>
|
||||
</div>
|
||||
<ol className="space-y-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<li className="flex gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-white text-xs font-bold flex-shrink-0">1</span>
|
||||
<span>Make your deposit using any of our payment methods</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-white text-xs font-bold flex-shrink-0">2</span>
|
||||
<span>Your funds are immediately invested in our diversified portfolio</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-white text-xs font-bold flex-shrink-0">3</span>
|
||||
<span>Watch your investment grow in real-time on your dashboard</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-white text-xs font-bold flex-shrink-0">4</span>
|
||||
<span>After 8 hours, your money has doubled and is ready to withdraw</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-6 shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
|
||||
<Clock className="text-green-600 dark:text-green-400" size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
8-Hour Timeline
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<p><span className="font-semibold text-slate-900 dark:text-white">Hour 0:</span> Deposit processed immediately</p>
|
||||
<p><span className="font-semibold text-slate-900 dark:text-white">Hour 4:</span> Portfolio reaches 50% growth</p>
|
||||
<p><span className="font-semibold text-slate-900 dark:text-white">Hour 8:</span> Money doubled, available for withdrawal</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-6 shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
|
||||
<CreditCard className="text-purple-600 dark:text-purple-400" size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Payment Options
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<p className="flex items-center gap-2"><Wallet size={16} /> Bank Transfer - Fastest option</p>
|
||||
<p className="flex items-center gap-2"><CreditCard size={16} /> All Major Credit/Debit Cards</p>
|
||||
<p className="flex items-center gap-2"><DollarSign size={16} /> Digital Wallets & UPI</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/withdraw"
|
||||
className="block rounded-lg bg-slate-900 px-6 py-3 text-center font-semibold text-white transition-all duration-300 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500/50 dark:bg-slate-800 dark:hover:bg-slate-700"
|
||||
>
|
||||
View Withdrawals →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="FinanceFlow"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
283
src/app/login/page.tsx
Normal file
283
src/app/login/page.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Lock, Mail, AlertCircle, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState<"success" | "error" | null>(null);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Support", id: "support" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Our Team", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Compliance", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Email", href: "mailto:support@financeflow.com" },
|
||||
{ label: "Phone", href: "tel:+919876543210" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: { email?: string; password?: string } = {};
|
||||
|
||||
if (!email) {
|
||||
newErrors.email = "Email is required";
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
newErrors.email = "Please enter a valid email address";
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
newErrors.password = "Password is required";
|
||||
} else if (password.length < 6) {
|
||||
newErrors.password = "Password must be at least 6 characters";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitStatus(null);
|
||||
|
||||
if (!validateForm()) {
|
||||
setSubmitStatus("error");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
setSubmitStatus("success");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setErrors({});
|
||||
// In a real app, redirect to dashboard
|
||||
} catch (error) {
|
||||
setSubmitStatus("error");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinanceFlow"
|
||||
bottomLeftText="Global Investment Platform"
|
||||
bottomRightText="support@financeflow.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center px-4 md:px-6 py-16">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 rounded-2xl p-8 shadow-lg border border-blue-100 dark:border-gray-700">
|
||||
{/* Header */}
|
||||
<div className="mb-8 text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 mb-4">
|
||||
<Lock className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Welcome Back
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Sign in to your FinanceFlow account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Status Messages */}
|
||||
{submitStatus === "success" && (
|
||||
<div className="mb-6 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-green-800 dark:text-green-200">
|
||||
Login successful!
|
||||
</p>
|
||||
<p className="text-sm text-green-700 dark:text-green-300 mt-1">
|
||||
Redirecting to your dashboard...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{submitStatus === "error" && Object.keys(errors).length > 0 && (
|
||||
<div className="mb-6 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-red-800 dark:text-red-200">
|
||||
Please fix the errors below
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
{/* Email Field */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
if (errors.email) setErrors({ ...errors, email: undefined });
|
||||
}}
|
||||
placeholder="you@example.com"
|
||||
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors ${
|
||||
errors.email
|
||||
? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
|
||||
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
|
||||
} text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Password
|
||||
</label>
|
||||
<Link
|
||||
href="#"
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
Forgot?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (errors.password) setErrors({ ...errors, password: undefined });
|
||||
}}
|
||||
placeholder="••••••••"
|
||||
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors ${
|
||||
errors.password
|
||||
? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
|
||||
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
|
||||
} text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.password}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full mt-6 px-4 py-2.5 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Signing in...
|
||||
</>
|
||||
) : (
|
||||
"Sign In"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center gap-3 my-6">
|
||||
<div className="flex-1 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">or</span>
|
||||
<div className="flex-1 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
</div>
|
||||
|
||||
{/* Sign Up Link */}
|
||||
<p className="text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
href="/signup"
|
||||
className="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
Create one now
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<p className="text-center text-xs text-gray-500 dark:text-gray-400 mt-6">
|
||||
Your data is secure and protected by industry-leading encryption
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="FinanceFlow" columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
166
src/app/page.tsx
166
src/app/page.tsx
@@ -32,7 +32,7 @@ export default function HomePage() {
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Support", id: "support" },
|
||||
{ name: "Referral", id: "referral" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -41,7 +41,7 @@ export default function HomePage() {
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Support", href: "/support" },
|
||||
{ label: "Referral Program", href: "/referral" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -104,19 +104,13 @@ export default function HomePage() {
|
||||
slides={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/initial-public-offering-ipo-concept-background-with-growth-chart_1017-54362.jpg",
|
||||
imageAlt: "Investment dashboard showcasing returns",
|
||||
},
|
||||
"http://img.b2bpic.net/free-vector/initial-public-offering-ipo-concept-background-with-growth-chart_1017-54362.jpg", imageAlt: "Investment dashboard showcasing returns"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/top-view-business-items-with-growth-chart-hands-fists_23-2148780564.jpg",
|
||||
imageAlt: "Portfolio growth visualization",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/top-view-business-items-with-growth-chart-hands-fists_23-2148780564.jpg", imageAlt: "Portfolio growth visualization"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/digital-smart-city-concept-big-data-transmission-processing-data-center-warehouse_39422-780.jpg",
|
||||
imageAlt: "Cryptocurrency investment options",
|
||||
},
|
||||
"http://img.b2bpic.net/free-vector/digital-smart-city-concept-big-data-transmission-processing-data-center-warehouse_39422-780.jpg", imageAlt: "Cryptocurrency investment options"},
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
showDimOverlay={false}
|
||||
@@ -133,66 +127,48 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Secure Login",
|
||||
description:
|
||||
"Create your unique login ID and secure user account with enterprise-grade encryption.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Secure Login", description:
|
||||
"Create your unique login ID and secure user account with enterprise-grade encryption.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Shield, label: "Security", value: "256-bit" },
|
||||
{ icon: Lock, label: "Encryption", value: "2FA" },
|
||||
{ icon: CheckCircle, label: "Verified", value: "Instant" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Quick Deposits",
|
||||
description:
|
||||
"Add funds through multiple payment methods including bank transfer and digital wallets.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Quick Deposits", description:
|
||||
"Add funds through multiple payment methods including bank transfer and digital wallets.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: CreditCard, label: "Cards", value: "All Types" },
|
||||
{ icon: Wallet, label: "Digital", value: "G Pay" },
|
||||
{ icon: Zap, label: "Speed", value: "Instant" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "8-Hour Doubling",
|
||||
description:
|
||||
"Experience unprecedented growth with our proven investment strategy that doubles your money in 8 hours.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "8-Hour Doubling", description:
|
||||
"Experience unprecedented growth with our proven investment strategy that doubles your money in 8 hours.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: TrendingUp, label: "Returns", value: "100%" },
|
||||
{ icon: Clock, label: "Timeline", value: "8 Hours" },
|
||||
{ icon: Sparkles, label: "Guaranteed", value: "Yes" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Easy Withdrawals",
|
||||
description:
|
||||
"Withdraw your profits anytime with zero hidden fees. Direct bank transfer in minutes.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Easy Withdrawals", description:
|
||||
"Withdraw your profits anytime with zero hidden fees. Direct bank transfer in minutes.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: DollarSign, label: "No Fees", value: "100%" },
|
||||
{ icon: Send, label: "Direct", value: "Bank" },
|
||||
{ icon: Zap, label: "Speed", value: "Minutes" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Multiple Investments",
|
||||
description:
|
||||
"Diversify across cryptocurrency, stocks, forex, and other asset classes.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Multiple Investments", description:
|
||||
"Diversify across cryptocurrency, stocks, forex, and other asset classes.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Bitcoin, label: "Crypto", value: "20+" },
|
||||
{ icon: DollarSign, label: "Forex", value: "Major" },
|
||||
{ icon: TrendingUp, label: "Stocks", value: "500+" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Credit Card Integration",
|
||||
description:
|
||||
"Create and manage virtual credit cards for seamless payment processing and global transactions.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Credit Card Integration", description:
|
||||
"Create and manage virtual credit cards for seamless payment processing and global transactions.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: CreditCard, label: "Virtual", value: "Unlimited" },
|
||||
{ icon: Globe, label: "Global", value: "195" },
|
||||
{ icon: Lock, label: "Secure", value: "Verified" },
|
||||
@@ -214,25 +190,13 @@ export default function HomePage() {
|
||||
tagAnimation="blur-reveal"
|
||||
metrics={[
|
||||
{
|
||||
id: "users",
|
||||
value: "50,000+",
|
||||
description: "Active Investors Worldwide",
|
||||
},
|
||||
id: "users", value: "50,000+", description: "Active Investors Worldwide"},
|
||||
{
|
||||
id: "capital",
|
||||
value: "$250M+",
|
||||
description: "Total Capital Managed",
|
||||
},
|
||||
id: "capital", value: "$250M+", description: "Total Capital Managed"},
|
||||
{
|
||||
id: "returns",
|
||||
value: "100%+",
|
||||
description: "Average Returns in 8 Hours",
|
||||
},
|
||||
id: "returns", value: "100%+", description: "Average Returns in 8 Hours"},
|
||||
{
|
||||
id: "uptime",
|
||||
value: "99.9%",
|
||||
description: "Platform Uptime Guarantee",
|
||||
},
|
||||
id: "uptime", value: "99.9%", description: "Platform Uptime Guarantee"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
@@ -245,9 +209,7 @@ export default function HomePage() {
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "How FinanceFlow Works: Simple 4-Step Process",
|
||||
},
|
||||
type: "text", content: "How FinanceFlow Works: Simple 4-Step Process"},
|
||||
]}
|
||||
buttons={[{ text: "Create Account", href: "/dashboard" }]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -265,45 +227,21 @@ export default function HomePage() {
|
||||
tagAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Rajesh Kumar",
|
||||
role: "Entrepreneur",
|
||||
company: "Tech Startup",
|
||||
rating: 5,
|
||||
id: "1", name: "Rajesh Kumar", role: "Entrepreneur", company: "Tech Startup", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/isolated-shot-attractive-successful-young-brunette-bearded-male-entrepreneur-wearing-trendy-jacket-casual-white-t-shirt-keeping-his-arms-folded-expressing-reluctancy-disagreement_343059-821.jpg",
|
||||
imageAlt: "professional businessman corporate portrait",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/isolated-shot-attractive-successful-young-brunette-bearded-male-entrepreneur-wearing-trendy-jacket-casual-white-t-shirt-keeping-his-arms-folded-expressing-reluctancy-disagreement_343059-821.jpg?_wi=1", imageAlt: "professional businessman corporate portrait"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Priya Sharma",
|
||||
role: "Financial Advisor",
|
||||
company: "Investment Group",
|
||||
rating: 5,
|
||||
id: "2", name: "Priya Sharma", role: "Financial Advisor", company: "Investment Group", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg",
|
||||
imageAlt: "professional businesswoman corporate photo",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg?_wi=1", imageAlt: "professional businesswoman corporate photo"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Amit Patel",
|
||||
role: "Business Owner",
|
||||
company: "E-commerce",
|
||||
rating: 5,
|
||||
id: "3", name: "Amit Patel", role: "Business Owner", company: "E-commerce", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiley-businesswoman-using-sign-language-outdoors-work_23-2148740316.jpg",
|
||||
imageAlt: "professional business person portrait",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/smiley-businesswoman-using-sign-language-outdoors-work_23-2148740316.jpg?_wi=1", imageAlt: "professional business person portrait"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sneha Verma",
|
||||
role: "Investor",
|
||||
company: "Wealth Management",
|
||||
rating: 5,
|
||||
id: "4", name: "Sneha Verma", role: "Investor", company: "Wealth Management", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/business-woman-by-skyscraper-using-phone_1303-11016.jpg",
|
||||
imageAlt: "professional woman corporate portrait",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/business-woman-by-skyscraper-using-phone_1303-11016.jpg?_wi=1", imageAlt: "professional woman corporate portrait"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "₹25L+", label: "Total Profits Earned" },
|
||||
@@ -328,41 +266,23 @@ export default function HomePage() {
|
||||
tagAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I create my login ID and user ID?",
|
||||
content:
|
||||
"Simply sign up on our platform with your email and phone number. You'll instantly receive a unique login ID and user ID. Use your credentials to access your dashboard and start investing.",
|
||||
},
|
||||
id: "1", title: "How do I create my login ID and user ID?", content:
|
||||
"Simply sign up on our platform with your email and phone number. You'll instantly receive a unique login ID and user ID. Use your credentials to access your dashboard and start investing."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Is my money really doubled in 8 hours?",
|
||||
content:
|
||||
"Yes! Our proprietary investment algorithm guarantees 100% returns on your investment within 8 hours. Your money is invested in diversified assets including cryptocurrency and forex markets.",
|
||||
},
|
||||
id: "2", title: "Is my money really doubled in 8 hours?", content:
|
||||
"Yes! Our proprietary investment algorithm guarantees 100% returns on your investment within 8 hours. Your money is invested in diversified assets including cryptocurrency and forex markets."},
|
||||
{
|
||||
id: "3",
|
||||
title: "What payment methods do you accept?",
|
||||
content:
|
||||
"We accept bank transfers, credit/debit cards, Google Pay, PhonePe, and other digital wallets. Deposits are processed instantly and securely.",
|
||||
},
|
||||
id: "3", title: "What payment methods do you accept?", content:
|
||||
"We accept bank transfers, credit/debit cards, Google Pay, PhonePe, and other digital wallets. Deposits are processed instantly and securely."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How do I withdraw my profits?",
|
||||
content:
|
||||
"Withdrawals are simple - just click 'Withdraw' in your dashboard, select your amount, and confirm. Funds are transferred directly to your bank account within minutes with zero fees.",
|
||||
},
|
||||
id: "4", title: "How do I withdraw my profits?", content:
|
||||
"Withdrawals are simple - just click 'Withdraw' in your dashboard, select your amount, and confirm. Funds are transferred directly to your bank account within minutes with zero fees."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Can I create credit cards through FinanceFlow?",
|
||||
content:
|
||||
"Yes! You can create virtual credit cards directly in your account. These can be used for online purchases, subscriptions, and global transactions instantly.",
|
||||
},
|
||||
id: "5", title: "Can I create credit cards through FinanceFlow?", content:
|
||||
"Yes! You can create virtual credit cards directly in your account. These can be used for online purchases, subscriptions, and global transactions instantly."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Is my account data safe and secure?",
|
||||
content:
|
||||
"Absolutely. We use 256-bit encryption, two-factor authentication, and enterprise-grade security protocols. Your data is never shared with third parties.",
|
||||
},
|
||||
id: "6", title: "Is my account data safe and secure?", content:
|
||||
"Absolutely. We use 256-bit encryption, two-factor authentication, and enterprise-grade security protocols. Your data is never shared with third parties."},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -399,4 +319,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
405
src/app/referral/page.tsx
Normal file
405
src/app/referral/page.tsx
Normal file
@@ -0,0 +1,405 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import {
|
||||
Share2,
|
||||
Gift,
|
||||
TrendingUp,
|
||||
Users,
|
||||
DollarSign,
|
||||
CheckCircle,
|
||||
Copy,
|
||||
Zap,
|
||||
Trophy,
|
||||
Wallet,
|
||||
Target,
|
||||
Sparkles,
|
||||
Shield,
|
||||
Lock,
|
||||
CreditCard,
|
||||
Bitcoin,
|
||||
Globe,
|
||||
Clock,
|
||||
Send,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ReferralPage() {
|
||||
const [copiedLink, setCopiedLink] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Rewards", id: "rewards" },
|
||||
{ name: "Support", id: "support" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Referral Program", href: "/referral" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Our Team", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Compliance", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Email", href: "mailto:support@financeflow.com" },
|
||||
{ label: "Phone", href: "tel:+919876543210" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleCopyLink = () => {
|
||||
const referralLink = "https://financeflow.com/ref/USER123456";
|
||||
navigator.clipboard.writeText(referralLink);
|
||||
setCopiedLink(true);
|
||||
setTimeout(() => setCopiedLink(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinanceFlow"
|
||||
bottomLeftText="Referral & Rewards Program"
|
||||
bottomRightText="support@financeflow.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<HeroCarouselLogo
|
||||
logoText="FinanceFlow Referral"
|
||||
description="Earn unlimited commissions by inviting friends to invest. Share your unique referral link and get rewarded instantly for every successful referral."
|
||||
buttons={[
|
||||
{ text: "Copy Referral Link", onClick: handleCopyLink },
|
||||
{ text: "View Dashboard", href: "/dashboard" },
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/referral-program-concept-illustration_114360-7793.jpg", imageAlt: "Referral program network illustration"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/loyalty-program-abstract-concept-vector-illustration-loyalty-reward-program-customer-retention-exclusive-benefits-members-only-perks-vip-status-abstract-metaphor_335657-3842.jpg", imageAlt: "Loyalty rewards program visualization"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/team-expansion-concept-vector-illustration_114360-9408.jpg", imageAlt: "Team expansion and growth visualization"},
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
showDimOverlay={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="referral-link" data-section="referral-link">
|
||||
<div className="mx-auto px-4 md:px-6 py-20">
|
||||
<FeatureBento
|
||||
title="Your Referral Link"
|
||||
description="Share this unique link with friends and earn instant commissions on every successful referral."
|
||||
tag="INVITE FRIENDS"
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Copy Your Link", description:
|
||||
"Click to copy your unique referral link and share it with friends via email, messaging, or social media.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Copy, label: "Action", value: "Copy" },
|
||||
{ icon: Share2, label: "Share", value: "Anywhere" },
|
||||
{ icon: CheckCircle, label: "Status", value: "Active" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Track Referrals", description:
|
||||
"Monitor all referrals in real-time. See who signed up, their investment amounts, and your earned commissions.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Users, label: "Referrals", value: "Real-time" },
|
||||
{ icon: TrendingUp, label: "Growth", value: "Live" },
|
||||
{ icon: Target, label: "Tracking", value: "Precise" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Earn Commissions", description:
|
||||
"Get 15% commission on your referral's first investment and 5% on all future investments with no limit.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: DollarSign, label: "First", value: "15%" },
|
||||
{ icon: Gift, label: "Recurring", value: "5%" },
|
||||
{ icon: Sparkles, label: "Unlimited", value: "Yes" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Instant Payouts", description:
|
||||
"Withdraw your earned commissions anytime to your bank account or wallet with zero fees.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Wallet, label: "Methods", value: "Multiple" },
|
||||
{ icon: Zap, label: "Speed", value: "Instant" },
|
||||
{ icon: Shield, label: "Fees", value: "Zero" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Bonus Tiers", description:
|
||||
"Unlock higher commission rates and exclusive rewards as you reach referral milestones.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Trophy, label: "Silver", value: "5 Refs" },
|
||||
{ icon: Trophy, label: "Gold", value: "15 Refs" },
|
||||
{ icon: Trophy, label: "Platinum", value: "50 Refs" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Team Referrals", description:
|
||||
"Build your referral team and earn commissions from their referrals too. Create a passive income stream.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Users, label: "Team", value: "Unlimited" },
|
||||
{ icon: TrendingUp, label: "Passive", value: "Income" },
|
||||
{ icon: Lock, label: "Secure", value: "Protected" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rewards" data-section="rewards">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<MetricCardFourteen
|
||||
title="Referral Program Statistics"
|
||||
tag="YOUR EARNINGS"
|
||||
tagAnimation="blur-reveal"
|
||||
metrics={[
|
||||
{
|
||||
id: "total-referrals", value: "125", description: "Total Active Referrals"},
|
||||
{
|
||||
id: "earned-commission", value: "₹3,75,000", description: "Total Commission Earned"},
|
||||
{
|
||||
id: "pending-payout", value: "₹50,000", description: "Pending Payout"},
|
||||
{
|
||||
id: "referral-level", value: "Platinum", description: "Current Tier Status"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{
|
||||
type: "text", content: "How to Earn: 4 Simple Steps to Start Referrals"},
|
||||
]}
|
||||
buttons={[{ text: "Start Referrals Now", href: "/dashboard" }]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<TestimonialCardSixteen
|
||||
title="Success Stories: Top Referrers Earning Big"
|
||||
description="Real testimonials from referrers who have built profitable networks through FinanceFlow's referral program."
|
||||
tag="REFERRER REVIEWS"
|
||||
tagAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Vikram Singh", role: "Top Referrer", company: "Platinum Member", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/isolated-shot-attractive-successful-young-brunette-bearded-male-entrepreneur-wearing-trendy-jacket-casual-white-t-shirt-keeping-his-arms-folded-expressing-reluctancy-disagreement_343059-821.jpg?_wi=2", imageAlt: "successful referrer portrait"},
|
||||
{
|
||||
id: "2", name: "Anjali Desai", role: "Active Referrer", company: "Gold Member", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg?_wi=2", imageAlt: "successful referrer portrait"},
|
||||
{
|
||||
id: "3", name: "Rohan Gupta", role: "Growing Referrer", company: "Silver Member", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiley-businesswoman-using-sign-language-outdoors-work_23-2148740316.jpg?_wi=2", imageAlt: "referrer portrait"},
|
||||
{
|
||||
id: "4", name: "Meera Nair", role: "New Referrer", company: "Bronze Member", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/business-woman-by-skyscraper-using-phone_1303-11016.jpg?_wi=2", imageAlt: "referrer portrait"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "₹50L+", label: "Total Referral Earnings" },
|
||||
{ value: "5,000+", label: "Active Referrers" },
|
||||
{ value: "10,000+", label: "Total Referrals" },
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Become a Referrer", href: "/dashboard" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bonus-tiers" data-section="bonus-tiers">
|
||||
<div className="mx-auto px-4 md:px-6 py-20">
|
||||
<FeatureBento
|
||||
title="Bonus Tier System"
|
||||
description="Unlock exclusive rewards and higher commission rates as you reach referral milestones."
|
||||
tag="LOYALTY TIERS"
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Bronze Tier", description:
|
||||
"Start your referral journey with our Bronze tier. Earn 15% on first investment and 3% on recurring investments.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Target, label: "Referrals", value: "1-5" },
|
||||
{ icon: DollarSign, label: "First", value: "15%" },
|
||||
{ icon: Gift, label: "Recurring", value: "3%" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Silver Tier", description:
|
||||
"Reach Silver with 5+ referrals. Enjoy 15% first investment commission and 4% on all recurring investments.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Target, label: "Referrals", value: "5-14" },
|
||||
{ icon: DollarSign, label: "First", value: "15%" },
|
||||
{ icon: Gift, label: "Recurring", value: "4%" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Gold Tier", description:
|
||||
"Achieve Gold with 15+ referrals. Unlock 15% first investment and 5% recurring commission plus exclusive bonuses.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Target, label: "Referrals", value: "15-49" },
|
||||
{ icon: DollarSign, label: "First", value: "15%" },
|
||||
{ icon: Gift, label: "Recurring", value: "5%" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Platinum Tier", description:
|
||||
"Reach Platinum with 50+ referrals. Earn 20% on first investments and 7% recurring with VIP perks and priority support.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Target, label: "Referrals", value: "50+" },
|
||||
{ icon: DollarSign, label: "First", value: "20%" },
|
||||
{ icon: Gift, label: "Recurring", value: "7%" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Diamond Tier", description:
|
||||
"Exclusive Diamond tier for 100+ referrals. Get 25% first investment, 10% recurring, and custom rewards packages.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Trophy, label: "Referrals", value: "100+" },
|
||||
{ icon: DollarSign, label: "First", value: "25%" },
|
||||
{ icon: Gift, label: "Recurring", value: "10%" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Elite VIP Tier", description:
|
||||
"Top-tier membership for 250+ referrals. Custom commission rates, dedicated account manager, and exclusive perks.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Trophy, label: "Referrals", value: "250+" },
|
||||
{ icon: DollarSign, label: "First", value: "Custom" },
|
||||
{ icon: Gift, label: "Recurring", value: "Custom" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<FaqBase
|
||||
title="Referral Program FAQ"
|
||||
description="Everything you need to know about our referral program, commissions, and bonus system."
|
||||
tag="HELP & SUPPORT"
|
||||
tagAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How do I get my unique referral link?", content:
|
||||
"Your unique referral link is automatically generated when you create your FinanceFlow account. You can find it in your Dashboard under 'Referral Program' or 'My Network'. Simply copy and share it with anyone you want to invite."},
|
||||
{
|
||||
id: "2", title: "How much commission do I earn per referral?", content:
|
||||
"You earn 15% commission on your referral's first investment. Additionally, you earn 3-10% recurring commission on all their future investments depending on your tier status. Higher tiers unlock better rates."},
|
||||
{
|
||||
id: "3", title: "When do I receive my referral commissions?", content:
|
||||
"Commissions are credited instantly to your account as soon as your referred friend completes their first investment. You can withdraw your earnings anytime to your bank account or wallet with zero fees."},
|
||||
{
|
||||
id: "4", title: "Is there a limit to how many people I can refer?", content:
|
||||
"No! There is absolutely no limit to the number of referrals. You can refer as many friends as you want and earn unlimited commissions. Build your network and create a passive income stream."},
|
||||
{
|
||||
id: "5", title: "What are the bonus tiers and how do I unlock them?", content:
|
||||
"We have 6 tier levels: Bronze, Silver, Gold, Platinum, Diamond, and Elite VIP. You unlock higher tiers by reaching referral milestones (5, 15, 50, 100, 250 referrals). Each tier comes with higher commission rates and exclusive rewards."},
|
||||
{
|
||||
id: "6", title: "Can I refer friends who are already FinanceFlow users?", content:
|
||||
"Yes, but you only earn commissions on new users who sign up using your unique referral link. Existing users cannot be referred. Make sure your friends use your link during signup to credit the referral properly."},
|
||||
{
|
||||
id: "7", title: "How do I track my referral activity and earnings?", content:
|
||||
"Your complete referral dashboard shows real-time statistics: active referrals, investment amounts, earned commissions, pending payouts, and your current tier status. Access it anytime from your main dashboard."},
|
||||
{
|
||||
id: "8", title: "Can my referrals also become referrers?", content:
|
||||
"Absolutely! Every user can become a referrer and build their own network. You earn commissions from their direct referrals, and they earn from theirs. This creates multiple income streams across your entire network."},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<ContactSplit
|
||||
tag="READY TO EARN"
|
||||
title="Start Referring Friends Today"
|
||||
description="Share your referral link and start earning passive income. No limits, unlimited earning potential."
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
mediaAnimation="blur-reveal"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Create Account & Get Link"
|
||||
termsText="By signing up, you agree to our Terms of Service and Referral Program Terms."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="FinanceFlow" columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
504
src/app/signup/page.tsx
Normal file
504
src/app/signup/page.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { UserPlus, Mail, Lock, AlertCircle, CheckCircle, Copy } from "lucide-react";
|
||||
|
||||
export default function SignupPage() {
|
||||
const [formStep, setFormStep] = useState<"email" | "details" | "confirmation">("email");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [fullName, setFullName] = useState("");
|
||||
const [phoneNumber, setPhoneNumber] = useState("");
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [userId, setUserId] = useState<string | null>(null);
|
||||
const [copiedField, setCopiedField] = useState<string | null>(null);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Support", id: "support" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Our Team", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Compliance", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Email", href: "mailto:support@financeflow.com" },
|
||||
{ label: "Phone", href: "tel:+919876543210" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const generateUserId = () => {
|
||||
return "FFL" + Math.random().toString(36).substring(2, 11).toUpperCase();
|
||||
};
|
||||
|
||||
const validateEmailStep = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!email) {
|
||||
newErrors.email = "Email is required";
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
newErrors.email = "Please enter a valid email address";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const validateDetailsStep = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!fullName) {
|
||||
newErrors.fullName = "Full name is required";
|
||||
} else if (fullName.length < 2) {
|
||||
newErrors.fullName = "Full name must be at least 2 characters";
|
||||
}
|
||||
|
||||
if (!phoneNumber) {
|
||||
newErrors.phoneNumber = "Phone number is required";
|
||||
} else if (!/^[0-9]{10}$/.test(phoneNumber.replace(/\D/g, ""))) {
|
||||
newErrors.phoneNumber = "Please enter a valid phone number";
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
newErrors.password = "Password is required";
|
||||
} else if (password.length < 8) {
|
||||
newErrors.password = "Password must be at least 8 characters";
|
||||
} else if (!/(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])/.test(password)) {
|
||||
newErrors.password = "Password must include uppercase, lowercase, and numbers";
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
newErrors.confirmPassword = "Passwords do not match";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleEmailStep = () => {
|
||||
if (validateEmailStep()) {
|
||||
setFormStep("details");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDetailsStep = async () => {
|
||||
if (validateDetailsStep()) {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
setUserId(generateUserId());
|
||||
setFormStep("confirmation");
|
||||
} catch (error) {
|
||||
setErrors({ submit: "An error occurred. Please try again." });
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string, field: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopiedField(field);
|
||||
setTimeout(() => setCopiedField(null), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinanceFlow"
|
||||
bottomLeftText="Global Investment Platform"
|
||||
bottomRightText="support@financeflow.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center px-4 md:px-6 py-16">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 rounded-2xl p-8 shadow-lg border border-blue-100 dark:border-gray-700">
|
||||
{/* Header */}
|
||||
<div className="mb-8 text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 mb-4">
|
||||
<UserPlus className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Create Account
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{formStep === "email"
|
||||
? "Get started with FinanceFlow"
|
||||
: formStep === "details"
|
||||
? "Complete your profile"
|
||||
: "Your account is ready"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="flex gap-2 mb-8">
|
||||
<div
|
||||
className={`flex-1 h-1 rounded-full transition-colors ${
|
||||
["email", "details", "confirmation"].indexOf(formStep) >= 0
|
||||
? "bg-blue-600 dark:bg-blue-400"
|
||||
: "bg-gray-300 dark:bg-gray-600"
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`flex-1 h-1 rounded-full transition-colors ${
|
||||
["details", "confirmation"].indexOf(formStep) >= 0
|
||||
? "bg-blue-600 dark:bg-blue-400"
|
||||
: "bg-gray-300 dark:bg-gray-600"
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`flex-1 h-1 rounded-full transition-colors ${
|
||||
formStep === "confirmation"
|
||||
? "bg-blue-600 dark:bg-blue-400"
|
||||
: "bg-gray-300 dark:bg-gray-600"
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* Step 1: Email */}
|
||||
{formStep === "email" && (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleEmailStep();
|
||||
}}
|
||||
className="space-y-5"
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
if (errors.email) setErrors({ ...errors, email: "" });
|
||||
}}
|
||||
placeholder="you@example.com"
|
||||
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors ${
|
||||
errors.email
|
||||
? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
|
||||
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
|
||||
} text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
|
||||
/>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-4 py-2.5 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Step 2: Details */}
|
||||
{formStep === "details" && (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleDetailsStep();
|
||||
}}
|
||||
className="space-y-5"
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="fullName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
id="fullName"
|
||||
type="text"
|
||||
value={fullName}
|
||||
onChange={(e) => {
|
||||
setFullName(e.target.value);
|
||||
if (errors.fullName) setErrors({ ...errors, fullName: "" });
|
||||
}}
|
||||
placeholder="John Doe"
|
||||
className={`w-full px-4 py-2 rounded-lg border transition-colors ${
|
||||
errors.fullName
|
||||
? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
|
||||
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
|
||||
} text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
|
||||
/>
|
||||
{errors.fullName && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.fullName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => {
|
||||
setPhoneNumber(e.target.value);
|
||||
if (errors.phoneNumber) setErrors({ ...errors, phoneNumber: "" });
|
||||
}}
|
||||
placeholder="+91 98765 43210"
|
||||
className={`w-full px-4 py-2 rounded-lg border transition-colors ${
|
||||
errors.phoneNumber
|
||||
? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
|
||||
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
|
||||
} text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
|
||||
/>
|
||||
{errors.phoneNumber && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.phoneNumber}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (errors.password) setErrors({ ...errors, password: "" });
|
||||
}}
|
||||
placeholder="At least 8 characters"
|
||||
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors ${
|
||||
errors.password
|
||||
? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
|
||||
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
|
||||
} text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
|
||||
/>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.password}</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
Must include uppercase, lowercase, and numbers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => {
|
||||
setConfirmPassword(e.target.value);
|
||||
if (errors.confirmPassword) setErrors({ ...errors, confirmPassword: "" });
|
||||
}}
|
||||
placeholder="Confirm your password"
|
||||
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors ${
|
||||
errors.confirmPassword
|
||||
? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
|
||||
: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
|
||||
} text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
|
||||
/>
|
||||
</div>
|
||||
{errors.confirmPassword && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.confirmPassword}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{errors.submit && (
|
||||
<div className="p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-800 dark:text-red-200">{errors.submit}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFormStep("email");
|
||||
setErrors({});
|
||||
}}
|
||||
className="flex-1 px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="flex-1 px-4 py-2.5 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
"Create Account"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Step 3: Confirmation */}
|
||||
{formStep === "confirmation" && userId && (
|
||||
<div className="space-y-6">
|
||||
<div className="p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 flex items-start gap-3">
|
||||
<CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-medium text-green-800 dark:text-green-200">
|
||||
Account created successfully!
|
||||
</p>
|
||||
<p className="text-sm text-green-700 dark:text-green-300 mt-1">
|
||||
Your account is ready to use. Save your credentials below.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 bg-gray-100 dark:bg-gray-700/50 rounded-lg p-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-2">
|
||||
Your User ID
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 px-3 py-2 bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600 font-mono text-sm text-gray-900 dark:text-white">
|
||||
{userId}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyToClipboard(userId, "userId")}
|
||||
className="p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
|
||||
title="Copy User ID"
|
||||
>
|
||||
{copiedField === "userId" ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
) : (
|
||||
<Copy className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-2">
|
||||
Your Email
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 px-3 py-2 bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600 font-mono text-sm text-gray-900 dark:text-white">
|
||||
{email}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyToClipboard(email, "email")}
|
||||
className="p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
|
||||
title="Copy Email"
|
||||
>
|
||||
{copiedField === "email" ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
) : (
|
||||
<Copy className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="w-full px-4 py-2.5 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600 text-white font-medium rounded-lg transition-colors text-center"
|
||||
>
|
||||
Go to Login
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-center"
|
||||
>
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer Links */}
|
||||
{formStep !== "confirmation" && (
|
||||
<p className="text-center text-sm text-gray-600 dark:text-gray-400 mt-6">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
href="/login"
|
||||
className="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-gray-500 dark:text-gray-400 mt-6">
|
||||
Your data is secure and protected by industry-leading encryption
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="FinanceFlow" columns={footerColumns} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
475
src/app/withdraw/page.tsx
Normal file
475
src/app/withdraw/page.tsx
Normal file
@@ -0,0 +1,475 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import {
|
||||
Send,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
TrendingUp,
|
||||
DollarSign,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Investment {
|
||||
id: string;
|
||||
amount: number;
|
||||
paymentMethod: string;
|
||||
investmentType: string;
|
||||
depositTime: string;
|
||||
maturityTime: string;
|
||||
status: string;
|
||||
expectedReturn: number;
|
||||
}
|
||||
|
||||
export default function WithdrawPage() {
|
||||
const [investments, setInvestments] = useState<Investment[]>([]);
|
||||
const [selectedInvestment, setSelectedInvestment] = useState<string | null>(null);
|
||||
const [withdrawAmount, setWithdrawAmount] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [remainingTime, setRemainingTime] = useState<Record<string, string>>({});
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Support", id: "support" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Deposit", href: "/deposit" },
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Our Team", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Compliance", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Email", href: "mailto:support@financeflow.com" },
|
||||
{ label: "Phone", href: "tel:+919876543210" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Load investments from localStorage
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem("investments");
|
||||
if (stored) {
|
||||
setInvestments(JSON.parse(stored));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Update countdown timers
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const newRemaining: Record<string, string> = {};
|
||||
|
||||
investments.forEach((inv) => {
|
||||
const maturity = new Date(inv.maturityTime).getTime();
|
||||
const now = new Date().getTime();
|
||||
const diff = maturity - now;
|
||||
|
||||
if (diff <= 0) {
|
||||
newRemaining[inv.id] = "Ready to Withdraw";
|
||||
} else {
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||
newRemaining[inv.id] = `${hours}h ${minutes}m ${seconds}s`;
|
||||
}
|
||||
});
|
||||
|
||||
setRemainingTime(newRemaining);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [investments]);
|
||||
|
||||
const handleWithdraw = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (!selectedInvestment) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
// Update investment status
|
||||
const updated = investments.map((inv) => {
|
||||
if (inv.id === selectedInvestment) {
|
||||
return {
|
||||
...inv,
|
||||
status: "withdrawn"};
|
||||
}
|
||||
return inv;
|
||||
});
|
||||
|
||||
setInvestments(updated);
|
||||
localStorage.setItem("investments", JSON.stringify(updated));
|
||||
|
||||
setSubmitted(true);
|
||||
setSelectedInvestment(null);
|
||||
setWithdrawAmount("");
|
||||
|
||||
setTimeout(() => setSubmitted(false), 3000);
|
||||
} catch (error) {
|
||||
console.error("Withdrawal failed:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedInv = investments.find((inv) => inv.id === selectedInvestment);
|
||||
const isMatured = selectedInv && new Date(selectedInv.maturityTime) <= new Date();
|
||||
const maxWithdraw = selectedInv ? selectedInv.expectedReturn : 0;
|
||||
|
||||
const activeInvestments = investments.filter(
|
||||
(inv) => inv.status === "active"
|
||||
);
|
||||
const maturedInvestments = investments.filter(
|
||||
(inv) => inv.status === "active" && new Date(inv.maturityTime) <= new Date()
|
||||
);
|
||||
const withdrawnInvestments = investments.filter(
|
||||
(inv) => inv.status === "withdrawn"
|
||||
);
|
||||
|
||||
const totalEarnings = withdrawnInvestments.reduce(
|
||||
(sum, inv) => sum + (inv.expectedReturn - inv.amount),
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinanceFlow"
|
||||
bottomLeftText="Investment Platform"
|
||||
bottomRightText="support@financeflow.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
|
||||
<div className="mx-auto max-w-6xl px-4 py-20 md:px-6">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
<h1 className="mb-3 text-4xl font-bold text-slate-900 dark:text-white">
|
||||
Withdrawal Center
|
||||
</h1>
|
||||
<p className="text-lg text-slate-600 dark:text-slate-400">
|
||||
Manage your investments and withdraw your profits instantly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mb-12 grid gap-4 md:grid-cols-4">
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-4 shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 mb-1">
|
||||
Active Investments
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
{activeInvestments.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-4 shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 mb-1">
|
||||
Ready to Withdraw
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||
{maturedInvestments.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-4 shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 mb-1">
|
||||
Total Withdrawn
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||
₹{withdrawnInvestments.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-4 shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 mb-1">
|
||||
Total Earnings
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
|
||||
₹{totalEarnings.toLocaleString("en-IN")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success Message */}
|
||||
{submitted && (
|
||||
<div className="mb-8 rounded-lg bg-green-50 p-6 text-green-800 dark:bg-green-900/20 dark:text-green-400">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle size={24} />
|
||||
<div>
|
||||
<h3 className="font-semibold">Withdrawal Successful!</h3>
|
||||
<p className="text-sm">Your funds have been transferred to your bank account. You will receive a confirmation SMS shortly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{/* Active Investments */}
|
||||
<div className="md:col-span-2">
|
||||
<div className="mb-8">
|
||||
<h2 className="mb-4 text-2xl font-bold text-slate-900 dark:text-white">
|
||||
Your Investments
|
||||
</h2>
|
||||
|
||||
{investments.length === 0 ? (
|
||||
<div className="rounded-lg border-2 border-dashed border-slate-300 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-900">
|
||||
<AlertCircle className="mx-auto mb-3 text-slate-400" size={40} />
|
||||
<p className="mb-4 text-slate-600 dark:text-slate-400">
|
||||
No active investments yet.
|
||||
</p>
|
||||
<Link
|
||||
href="/deposit"
|
||||
className="inline-block rounded-lg bg-blue-600 px-6 py-2 font-semibold text-white transition-all hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
|
||||
>
|
||||
Make Your First Deposit →
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{investments.map((inv) => {
|
||||
const isReady = new Date(inv.maturityTime) <= new Date();
|
||||
const isSelected = selectedInvestment === inv.id;
|
||||
const status = inv.status === "withdrawn" ? "withdrawn" : isReady ? "ready" : "active";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={inv.id}
|
||||
onClick={() => status !== "withdrawn" && setSelectedInvestment(inv.id)}
|
||||
className={`rounded-lg border-2 p-4 transition-all cursor-pointer ${
|
||||
isSelected
|
||||
? "border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/20"
|
||||
: status === "withdrawn"
|
||||
? "border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/50"
|
||||
: isReady
|
||||
? "border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900/20"
|
||||
: "border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white">
|
||||
₹{inv.amount.toLocaleString("en-IN")} Investment
|
||||
</h3>
|
||||
{status === "withdrawn" && (
|
||||
<span className="rounded-full bg-slate-600 px-2 py-1 text-xs font-semibold text-white">
|
||||
Withdrawn
|
||||
</span>
|
||||
)}
|
||||
{isReady && (
|
||||
<span className="rounded-full bg-green-600 px-2 py-1 text-xs font-semibold text-white">
|
||||
Ready
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
|
||||
{inv.investmentType.charAt(0).toUpperCase() + inv.investmentType.slice(1)} • {inv.paymentMethod}
|
||||
</p>
|
||||
<div className="flex gap-6 text-sm">
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400">Deposit</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">
|
||||
{new Date(inv.depositTime).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400">Maturity</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">
|
||||
{new Date(inv.maturityTime).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400">Return</p>
|
||||
<p className="font-semibold text-green-600 dark:text-green-400">
|
||||
₹{inv.expectedReturn.toLocaleString("en-IN")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
{status === "withdrawn" ? (
|
||||
<div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
|
||||
<CheckCircle size={20} />
|
||||
<span className="text-sm">Completed</span>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
{remainingTime[inv.id] || "Loading..."}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
|
||||
{isReady ? "Available now" : "Until ready"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Withdrawal Form */}
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900 h-fit sticky top-20">
|
||||
<h3 className="mb-4 text-lg font-bold text-slate-900 dark:text-white">
|
||||
Withdraw Funds
|
||||
</h3>
|
||||
|
||||
{investments.length === 0 ? (
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Create an investment first to start withdrawing.
|
||||
</p>
|
||||
) : selectedInvestment ? (
|
||||
<form onSubmit={handleWithdraw} className="space-y-4">
|
||||
<div className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 mb-1">
|
||||
Maximum Available
|
||||
</p>
|
||||
<p className="text-xl font-bold text-blue-600 dark:text-blue-400">
|
||||
₹{maxWithdraw.toLocaleString("en-IN")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!isMatured && (
|
||||
<div className="rounded-lg bg-amber-50 p-3 dark:bg-amber-900/20">
|
||||
<p className="text-xs text-amber-800 dark:text-amber-400 flex items-center gap-2">
|
||||
<Clock size={14} />
|
||||
This investment is not yet ready for withdrawal.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-slate-900 dark:text-white">
|
||||
Withdrawal Amount (₹)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={withdrawAmount}
|
||||
onChange={(e) => setWithdrawAmount(e.target.value)}
|
||||
max={maxWithdraw}
|
||||
min={0}
|
||||
step="100"
|
||||
disabled={!isMatured}
|
||||
placeholder="Enter amount"
|
||||
className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder-slate-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:opacity-50 disabled:cursor-not-allowed dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !withdrawAmount || !isMatured}
|
||||
className="w-full rounded-lg bg-green-600 px-4 py-2 font-semibold text-white transition-all duration-300 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-green-500 dark:hover:bg-green-600"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Zap size={16} className="animate-spin" />
|
||||
Processing...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Send size={16} />
|
||||
Withdraw Now
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedInvestment(null);
|
||||
setWithdrawAmount("");
|
||||
}}
|
||||
className="w-full rounded-lg border border-slate-300 px-4 py-2 font-semibold text-slate-900 transition-all hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-500/50 dark:border-slate-600 dark:text-white dark:hover:bg-slate-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Select an investment from the list to withdraw.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-6 border-t border-slate-200 pt-4 dark:border-slate-700">
|
||||
<h4 className="mb-3 font-semibold text-slate-900 dark:text-white">
|
||||
Withdrawal Info
|
||||
</h4>
|
||||
<ul className="space-y-2 text-xs text-slate-600 dark:text-slate-400">
|
||||
<li className="flex gap-2">
|
||||
<CheckCircle size={14} className="flex-shrink-0 text-green-600 dark:text-green-400 mt-0.5" />
|
||||
<span>Instant bank transfer</span>
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<CheckCircle size={14} className="flex-shrink-0 text-green-600 dark:text-green-400 mt-0.5" />
|
||||
<span>Zero hidden fees</span>
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<CheckCircle size={14} className="flex-shrink-0 text-green-600 dark:text-green-400 mt-0.5" />
|
||||
<span>Available 24/7</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="FinanceFlow"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user