+ {/* Header Section */}
+
+
+
+
Welcome Back, User
+
Manage your investments and track your portfolio growth
+
+
+
+
+
+
+
-
+ {/* Investment Status Cards */}
+
+
+ {/* Total Balance Card */}
+
+
+
+
Total Balance
+
+
+ {showBalance ? "₹2,50,000" : "••••••"}
+
+
+
+
+
+
+
Updated just now
+
-
-
-
+ {/* Today's Profit Card */}
+
+
+ {/* Active Investments Card */}
+
+
+
+
Active Investments
+
4
+
+
+
+
Diversified portfolio
+
+
+
+
+ {/* Tab Navigation */}
+
+
+
+
+
+
+
+ {/* Overview Tab */}
+ {activeTab === "overview" && (
+
+
+
Portfolio Summary
+
+
+
Total Invested
+
₹2,50,000
+
+
+
Total Returns
+
₹2,50,000
+
+
+
+
Pending Withdraw
+
₹0
+
+
+
+
+
+
Quick Actions
+
+
+
+
+
+
+ )}
+
+ {/* Transactions Tab */}
+ {activeTab === "transactions" && (
+
+
+
+
+
+ | Date |
+ Type |
+ Amount |
+ Status |
+
+
+
+
+ | Dec 20, 2024 |
+
+
+ Investment
+ |
+ ₹1,00,000 |
+
+ Completed
+ |
+
+
+ | Dec 20, 2024 |
+
+
+ Profit Return
+ |
+ +₹1,00,000 |
+
+ Completed
+ |
+
+
+ | Dec 19, 2024 |
+
+
+ Investment
+ |
+ ₹1,50,000 |
+
+ Completed
+ |
+
+
+ | Dec 19, 2024 |
+
+
+ Profit Return
+ |
+ +₹1,50,000 |
+
+ Completed
+ |
+
+
+
+
+
+ )}
+
+ {/* Account Settings Tab */}
+ {activeTab === "settings" && (
+
+ {/* Account Information */}
+
+
Account Information
+
+
+
+
User Name
+
+
+
+
user@financeflow.com
+
+
+
+
+91 98765 43210
+
+
+
+
FF-2024-001234
+
+
+
+
+ {/* Security Settings */}
+
+
+
+ Security Settings
+
+
+
+
+
+
+
+ {/* Logout */}
+
+
+ )}
+
diff --git a/src/app/deposit/page.tsx b/src/app/deposit/page.tsx
new file mode 100644
index 0000000..b9bfdcd
--- /dev/null
+++ b/src/app/deposit/page.tsx
@@ -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
) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ 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 (
+
+
+
+
+
+
+
+
+ {/* Deposit Form */}
+
+
+ Make a Deposit
+
+
+ Start investing with just ₹1,000 and watch your money double in 8 hours.
+
+
+ {submitted && (
+
+
+
+ Deposit processed successfully! Your investment is now active.
+
+
+ )}
+
+
+
+
+ {/* Information Panel */}
+
+
+
+
+
+
+
+ How It Works
+
+
+
+ -
+ 1
+ Make your deposit using any of our payment methods
+
+ -
+ 2
+ Your funds are immediately invested in our diversified portfolio
+
+ -
+ 3
+ Watch your investment grow in real-time on your dashboard
+
+ -
+ 4
+ After 8 hours, your money has doubled and is ready to withdraw
+
+
+
+
+
+
+
+
+
+
+ 8-Hour Timeline
+
+
+
+
Hour 0: Deposit processed immediately
+
Hour 4: Portfolio reaches 50% growth
+
Hour 8: Money doubled, available for withdrawal
+
+
+
+
+
+
+
+
+
+ Payment Options
+
+
+
+
Bank Transfer - Fastest option
+
All Major Credit/Debit Cards
+
Digital Wallets & UPI
+
+
+
+
+ View Withdrawals →
+
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+ Welcome Back
+
+
+ Sign in to your FinanceFlow account
+
+
+
+ {/* Status Messages */}
+ {submitStatus === "success" && (
+
+
+
+
+ Login successful!
+
+
+ Redirecting to your dashboard...
+
+
+
+ )}
+
+ {submitStatus === "error" && Object.keys(errors).length > 0 && (
+
+
+
+
+ Please fix the errors below
+
+
+
+ )}
+
+ {/* Form */}
+
+
+ {/* Divider */}
+
+
+ {/* Sign Up Link */}
+
+ Don't have an account?{" "}
+
+ Create one now
+
+
+
+
+ {/* Additional Info */}
+
+ Your data is secure and protected by industry-leading encryption
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
new file mode 100644
index 0000000..95dd4ed
--- /dev/null
+++ b/src/app/signup/page.tsx
@@ -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>({});
+ const [isLoading, setIsLoading] = useState(false);
+ const [userId, setUserId] = useState(null);
+ const [copiedField, setCopiedField] = useState(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 = {};
+
+ 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 = {};
+
+ 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 (
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+ Create Account
+
+
+ {formStep === "email"
+ ? "Get started with FinanceFlow"
+ : formStep === "details"
+ ? "Complete your profile"
+ : "Your account is ready"}
+
+
+
+ {/* Progress Bar */}
+
+
= 0
+ ? "bg-blue-600 dark:bg-blue-400"
+ : "bg-gray-300 dark:bg-gray-600"
+ }`}
+ >
+
= 0
+ ? "bg-blue-600 dark:bg-blue-400"
+ : "bg-gray-300 dark:bg-gray-600"
+ }`}
+ >
+
+
+
+ {/* Step 1: Email */}
+ {formStep === "email" && (
+
+ )}
+
+ {/* Step 2: Details */}
+ {formStep === "details" && (
+
+ )}
+
+ {/* Step 3: Confirmation */}
+ {formStep === "confirmation" && userId && (
+
+
+
+
+
+ Account created successfully!
+
+
+ Your account is ready to use. Save your credentials below.
+
+
+
+
+
+
+
+ Your User ID
+
+
+
+ {userId}
+
+
+
+
+
+
+
+ Your Email
+
+
+
+ {email}
+
+
+
+
+
+
+
+
+ Go to Login
+
+
+ Back to Home
+
+
+
+ )}
+
+ {/* Footer Links */}
+ {formStep !== "confirmation" && (
+
+ Already have an account?{" "}
+
+ Sign in
+
+
+ )}
+
+
+
+ Your data is secure and protected by industry-leading encryption
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+ Withdrawal Center
+
+
+ Manage your investments and withdraw your profits instantly.
+
+
+
+ {/* Stats */}
+
+
+
+ Active Investments
+
+
+ {activeInvestments.length}
+
+
+
+
+ Ready to Withdraw
+
+
+ {maturedInvestments.length}
+
+
+
+
+ Total Withdrawn
+
+
+ ₹{withdrawnInvestments.length}
+
+
+
+
+ Total Earnings
+
+
+ ₹{totalEarnings.toLocaleString("en-IN")}
+
+
+
+
+ {/* Success Message */}
+ {submitted && (
+
+
+
+
+
Withdrawal Successful!
+
Your funds have been transferred to your bank account. You will receive a confirmation SMS shortly.
+
+
+
+ )}
+
+ {/* Main Content */}
+
+ {/* Active Investments */}
+
+
+
+ Your Investments
+
+
+ {investments.length === 0 ? (
+
+
+
+ No active investments yet.
+
+
+ Make Your First Deposit →
+
+
+ ) : (
+
+ {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 (
+
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"
+ }`}
+ >
+
+
+
+
+ ₹{inv.amount.toLocaleString("en-IN")} Investment
+
+ {status === "withdrawn" && (
+
+ Withdrawn
+
+ )}
+ {isReady && (
+
+ Ready
+
+ )}
+
+
+ {inv.investmentType.charAt(0).toUpperCase() + inv.investmentType.slice(1)} • {inv.paymentMethod}
+
+
+
+
Deposit
+
+ {new Date(inv.depositTime).toLocaleDateString()}
+
+
+
+
Maturity
+
+ {new Date(inv.maturityTime).toLocaleDateString()}
+
+
+
+
Return
+
+ ₹{inv.expectedReturn.toLocaleString("en-IN")}
+
+
+
+
+
+ {status === "withdrawn" ? (
+
+
+ Completed
+
+ ) : (
+
+
+ {remainingTime[inv.id] || "Loading..."}
+
+
+ {isReady ? "Available now" : "Until ready"}
+
+
+ )}
+
+
+
+ );
+ })}
+
+ )}
+
+
+
+ {/* Withdrawal Form */}
+
+
+ Withdraw Funds
+
+
+ {investments.length === 0 ? (
+
+ Create an investment first to start withdrawing.
+
+ ) : selectedInvestment ? (
+
+ ) : (
+
+ Select an investment from the list to withdraw.
+
+ )}
+
+
+
+ Withdrawal Info
+
+
+ -
+
+ Instant bank transfer
+
+ -
+
+ Zero hidden fees
+
+ -
+
+ Available 24/7
+
+
+
+
+
+
+