From 878b2d1739508044905c281e0eab079a415525d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Obed=E2=9C=A8=E2=9C=A8?=
 <135765970+obed-smart@users.noreply.github.com>
Date: Tue, 7 Oct 2025 19:45:53 +0100
Subject: [PATCH 1/5] Update Footer.tsx

---
 components/landingpage/landing/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/landingpage/landing/Footer.tsx b/components/landingpage/landing/Footer.tsx
index a128671..98570a6 100644
--- a/components/landingpage/landing/Footer.tsx
+++ b/components/landingpage/landing/Footer.tsx
@@ -66,7 +66,7 @@ export const Footer = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid md:grid-cols-4 gap-8 mb-8">
           <div className="space-y-4">
-            <Button  className="text-2xl font-bold velo-logo-gradient">VELO</Button>
+            <Button  className="text-2xl font-bold velo-logo-gradient">VELO.</Button>
             <p className="text-sm text-muted-foreground">
               Fast, secure, and borderless payments for Nigerian businesses.
             </p>

From da55378b90561284ad648baa09bc6be7f9cfff4e Mon Sep 17 00:00:00 2001
From: chukwu obed <codingwithsmart@gmail.com>
Date: Tue, 7 Oct 2025 21:23:33 +0100
Subject: [PATCH 2/5] refactor: Updated the bank account section UI and and
 used demo data for the profile component

---
 components/auth/protected-route.tsx       |   4 +-
 components/context/AuthContext.tsx        |   2 +-
 components/landingpage/landing/Footer.tsx |  99 ++++---
 components/landingpage/landing/hero.tsx   |   4 +-
 components/profile/bank-accounts.tsx      | 318 +++++++++++++++-------
 5 files changed, 268 insertions(+), 159 deletions(-)

diff --git a/components/auth/protected-route.tsx b/components/auth/protected-route.tsx
index 34bf437..05ad305 100644
--- a/components/auth/protected-route.tsx
+++ b/components/auth/protected-route.tsx
@@ -27,10 +27,10 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
       setIsChecking(false);
     } else {
       // Only redirect if we're not already on the auth page
-      if (!pathname.includes('/auth')) {
+      if (!pathname.includes('/')) {
         console.log('Not authenticated - redirecting to auth');
         // Use replace: false to allow back button to work properly
-        router.push("/auth");
+        router.push("/");
       }
       setIsChecking(false);
     }
diff --git a/components/context/AuthContext.tsx b/components/context/AuthContext.tsx
index 7adfa02..fff414b 100644
--- a/components/context/AuthContext.tsx
+++ b/components/context/AuthContext.tsx
@@ -268,7 +268,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     setToken(null);
     setUser(null);
     setIsLoading(false);
-    router.push("/auth");
+    router.push("/");
   };
 
   const register = async (
diff --git a/components/landingpage/landing/Footer.tsx b/components/landingpage/landing/Footer.tsx
index 496dbb0..bc19d92 100644
--- a/components/landingpage/landing/Footer.tsx
+++ b/components/landingpage/landing/Footer.tsx
@@ -1,91 +1,83 @@
-import { HugeiconsIcon } from "@hugeicons/react";
+import { HugeiconsIcon } from '@hugeicons/react';
 import {
   DiscordFreeIcons,
   NewTwitterIcon,
   TelegramFreeIcons,
-} from "@hugeicons/core-free-icons";
+} from '@hugeicons/core-free-icons';
 
-import Link from "next/link";
-import { Button } from "@/components/ui/buttons";
+import Link from 'next/link';
+import { Button } from '@/components/ui/buttons';
 
 export const Footer = () => {
-
-
   const footerLinks = [
     {
-      title: "Product",
+      title: 'Product',
       links: [
-        { name: "Features", href: "#features" },
-        { name: "How It Works", href: "#how-it-works" },
-        { name: "Privacy Policy", href: "#privacy" },
-        { name: "FAQs", href: "#faq" },
-        { name: "Contacts", href: "/contact" },
+        { name: 'Features', href: '#features' },
+        { name: 'How It Works', href: '#how-it-works' },
+        { name: 'Privacy Policy', href: '#privacy' },
+        { name: 'FAQs', href: '#faq' },
+        { name: 'Contacts', href: '/contact' },
       ],
     },
     {
-      title: "Company",
+      title: 'Company',
       links: [
-        { name: "About", href: "/about" },
-        { name: "Blog", href: "/blog" },
-        { name: "Careers", href: "#" },
+        { name: 'About', href: '/about' },
+        { name: 'Blog', href: '/blog' },
+        { name: 'Careers', href: '#' },
       ],
     },
     {
-      title: "Legal",
+      title: 'Legal',
       links: [
-        { name: "Privacy", href: "#privacy" },
-        { name: " Terms of Service", href: "#terms" },
-        { name: "Security", href: "#" },
+        { name: 'Privacy', href: '#privacy' },
+        { name: ' Terms of Service', href: '#terms' },
+        { name: 'Security', href: '#' },
       ],
     },
-  ]
-
+  ];
 
   const socials = [
     {
-      name: "X",
+      name: 'X',
       icon: <HugeiconsIcon icon={NewTwitterIcon} />,
-      link: "https://www.x.com",
+      link: 'https://www.x.com',
     },
     {
-      name: "Discord",
+      name: 'Discord',
       icon: <HugeiconsIcon icon={DiscordFreeIcons} />,
-      link: "https://www.discord.com",
+      link: 'https://www.discord.com',
     },
     {
-      name: "Telegram",
+      name: 'Telegram',
       icon: <HugeiconsIcon icon={TelegramFreeIcons} />,
-      link: "https://www.telegram.com",
+      link: 'https://www.telegram.com',
     },
   ];
 
-
-
   return (
-    <footer className="border-t border-border/50 bg-muted/30">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="grid md:grid-cols-4 gap-8 mb-8">
-          <div className="space-y-4">
-            <Button  className="text-2xl font-bold velo-logo-gradient">VELO.</Button>
-
-            <Link href="#hero">
-            <Button  className="text-2xl font-bold velo-logo-gradient">
-              VELO</Button>
-              </Link>
-            <p className="text-sm text-muted-foreground">
+    <footer className='border-t border-border/50 bg-muted/30'>
+      <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
+        <div className='grid md:grid-cols-4 gap-8 mb-8'>
+          <div className='space-y-4'>
+            <Button className='text-2xl font-bold velo-logo-gradient'>
+              <Link href='#hero'>VELO.</Link>
+            </Button>
+            <p className='text-sm text-muted-foreground'>
               Fast, secure, and borderless payments for Nigerian businesses.
             </p>
           </div>
 
           {footerLinks.map((section) => (
             <div key={section.title}>
-              <h4 className="font-semibold mb-4">{section.title}</h4>
-              <ul className="space-y-2 text-sm text-muted-foreground">
+              <h4 className='font-semibold mb-4'>{section.title}</h4>
+              <ul className='space-y-2 text-sm text-muted-foreground'>
                 {section.links.map((link) => (
                   <li key={link.name}>
                     <Link
                       href={link.href}
-                      className="hover:text-foreground transition-colors"
+                      className='hover:text-foreground transition-colors'
                     >
                       {link.name}
                     </Link>
@@ -95,13 +87,18 @@ export const Footer = () => {
             </div>
           ))}
         </div>
-        <div className="pt-8 border-t border-border/50 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-sm text-muted-foreground">© 2025 VELO. All rights reserved.</p>
-          <div className="flex items-center gap-4">
-
+        <div className='pt-8 border-t border-border/50 flex flex-col md:flex-row justify-between items-center gap-4'>
+          <p className='text-sm text-muted-foreground'>
+            © 2025 VELO. All rights reserved.
+          </p>
+          <div className='flex items-center gap-4'>
             {socials.map((social, index) => (
-              <Link key={index} href={social.link} className="text-muted-foreground hover:text-foreground transition-colors">
-                <span className="sr-only">{social.name}</span>
+              <Link
+                key={index}
+                href={social.link}
+                className='text-muted-foreground hover:text-foreground transition-colors'
+              >
+                <span className='sr-only'>{social.name}</span>
                 {social.icon}
               </Link>
             ))}
@@ -109,7 +106,7 @@ export const Footer = () => {
         </div>
       </div>
     </footer>
-  )
+  );
 };
 
 export default Footer;
diff --git a/components/landingpage/landing/hero.tsx b/components/landingpage/landing/hero.tsx
index 1a16c5f..cd5879c 100644
--- a/components/landingpage/landing/hero.tsx
+++ b/components/landingpage/landing/hero.tsx
@@ -5,7 +5,7 @@ import { ArrowRight, ChevronDown, Play } from "lucide-react"
 import { Paprika } from "next/font/google"
 import Image from "next/image"
 import Link from "next/link"
-import { useState , useRef} from "react"
+import { useState , useRef, useEffect} from "react"
 
 const paprika = Paprika({
   subsets: ["latin"],
@@ -15,6 +15,8 @@ const paprika = Paprika({
 
 export function Hero() {
 const sectionRef = useRef<HTMLElement>(null)
+  const [isVisible, setIsVisible] = useState(false)
+
 
   const scrollToFeatures = () => {
     const featuresSection = document.getElementById("features")
diff --git a/components/profile/bank-accounts.tsx b/components/profile/bank-accounts.tsx
index 2df61cb..202a309 100644
--- a/components/profile/bank-accounts.tsx
+++ b/components/profile/bank-accounts.tsx
@@ -1,38 +1,88 @@
-"use client"
+'use client';
 
-import { useEffect, useState } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  CreditCard,
+  Plus,
+  Building2,
+  Hash,
+  User,
+  Loader2,
+  Copy,
+  Check,
+} from 'lucide-react';
+import { toast } from 'sonner';
 
-import { CreditCard, Plus, Building2, Hash, User, Loader2 } from "lucide-react"
-import { useAuth } from "../context/AuthContext"
-import { UserProfile } from "@/types/authContext"
-import { toast } from "sonner"
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/cards"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/cards';
+import { Button } from '../ui/buttons';
+import { UserProfile } from '@/types/authContext';
 
-import { Button } from "../ui/buttons"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog"
+
+
+export const DEMO_DATA: UserProfile = {
+  id: 'demo-user-123',
+  email: 'demo@example.com',
+  firstName: 'John',
+  lastName: 'Doe',
+  phoneNumber: '1234567890',
+  isEmailVerified: true,
+  kyc: null,
+  kycStatus: 'pending',
+  createdAt: new Date().toISOString(),
+  username: 'johndoe',
+  displayPicture: null,
+  bankDetails: {
+    bankName: 'Wells Fargo',
+    accountNumber: '1234567890',
+    accountName: 'John Doe',
+  },
+};
+
+
+const USE_DEMO_DATA = true;
 
 interface ProfileProps {
   user: UserProfile | null
 }
 
 
-export function BankAccounts({ user }: ProfileProps) {
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const { isLoading } = useAuth()
+export function BankAccounts({ user }: ProfileProps)  {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [copiedAccountNumber, setCopiedAccountNumber] = useState(false);
 
-  const [formData, setFormData] = useState<UserProfile | null>(null)
+  const [formData, setFormData] = useState<UserProfile | null>(
+    USE_DEMO_DATA ? DEMO_DATA : null
+  );
 
   useEffect(() => {
-    if (user) {
-      setFormData(user)
+    if (!USE_DEMO_DATA && user) {
+      setFormData(user);
     }
-  }, [user])
+  }, [user]);
 
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedAccountNumber(true);
+      toast.success('Copied to clipboard');
+      setTimeout(() => setCopiedAccountNumber(false), 2000);
+    } catch (err) {
+      toast.error('Failed to copy');
+    }
+  };
 
-  const handleAddAccount = async () => {
+ const handleAddAccount = async () => {
     if (!formData?.bankDetails?.accountName || !formData.bankDetails.accountNumber || !formData.bankDetails.bankName) {
       toast.error('Please fill in all fields.')
       return
@@ -54,67 +104,111 @@ export function BankAccounts({ user }: ProfileProps) {
       })
     }
   }
-
   return (
-    <Card className="transition-smooth hover:shadow-md">
-      <CardHeader className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0 pb-6">
-        <div className="flex items-center gap-2">
-          <CreditCard className="w-5 h-5 text-primary" />
-          <CardTitle className="text-lg sm:text-xl">Bank Accounts</CardTitle>
+    <Card className='transition-smooth hover:shadow-md'>
+      <CardHeader className='flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0 pb-6'>
+        <div className='flex items-center gap-2'>
+          <CreditCard className='w-5 h-5 text-primary' />
+          <CardTitle className='text-lg sm:text-xl'>Bank Accounts</CardTitle>
         </div>
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <DialogTrigger asChild>
-            <Button variant="outline" size="sm" className="gap-2 bg-transparent w-full sm:w-auto">
-              <Plus className="w-4 h-4" />
+            <Button
+              variant='outline'
+              size='sm'
+              className='gap-2 bg-transparent w-full sm:w-auto'
+            >
+              <Plus className='w-4 h-4' />
               Add Bank
             </Button>
           </DialogTrigger>
-          <DialogContent className="w-[95vw] max-w-md mx-auto bg-white">
+          <DialogContent className='w-[95vw] max-w-md mx-auto bg-white'>
             <DialogHeader>
               <DialogTitle>Add Bank Account</DialogTitle>
             </DialogHeader>
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="bankName">Bank Name</Label>
-                <div className="relative">
-                  <Building2 className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <div className='space-y-4'>
+              <div className='space-y-2'>
+                <Label htmlFor='bankName'>Bank Name</Label>
+                <div className='relative'>
+                  <Building2 className='absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground' />
                   <Input
-                    id="bankName"
+                    id='bankName'
                     value={formData?.bankDetails?.bankName}
-                    onChange={(e) => setFormData((prev) => ({ ...(prev ?? {}), bankName: e.target.value } as UserProfile))}
-                    className="pl-10"
-                    placeholder="Wells Fargo"
+                    onChange={(e) =>
+                      setFormData(
+                        (prev) =>
+                          ({
+                            ...(prev ?? {}),
+                            bankDetails: {
+                              ...(prev?.bankDetails ?? {}),
+                              bankName: e.target.value,
+                            },
+                          } as UserProfile)
+                      )
+                    }
+                    className='pl-10'
+                    placeholder='Wells Fargo'
                   />
                 </div>
               </div>
-              <div className="space-y-2">
-                <Label htmlFor="accountNumber">Account Number</Label>
-                <div className="relative">
-                  <Hash className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <div className='space-y-2'>
+                <Label htmlFor='accountNumber'>Account Number</Label>
+                <div className='relative'>
+                  <Hash className='absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground' />
                   <Input
-                    id="accountNumber"
+                    id='accountNumber'
                     value={formData?.bankDetails?.accountNumber}
-                    onChange={(e) => setFormData({ ...formData, accountNumber: e.target.value } as UserProfile)}
-                    className="pl-10"
-                    placeholder="1234567890"
+                    onChange={(e) =>
+                      setFormData(
+                        (prev) =>
+                          ({
+                            ...(prev ?? {}),
+                            bankDetails: {
+                              ...(prev?.bankDetails ?? {}),
+                              accountNumber: e.target.value,
+                            },
+                          } as UserProfile)
+                      )
+                    }
+                    className='pl-10'
+                    placeholder='1234567890'
                   />
                 </div>
               </div>
-              <div className="space-y-2">
-                <Label htmlFor="accountName">Account Name</Label>
-                <div className="relative">
-                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <div className='space-y-2'>
+                <Label htmlFor='accountName'>Account Name</Label>
+                <div className='relative'>
+                  <User className='absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground' />
                   <Input
-                    id="accountName"
+                    id='accountName'
                     value={formData?.bankDetails?.accountName}
-                    onChange={(e) => setFormData({ ...formData, accountName: e.target.value } as UserProfile)}
-                    className="pl-10"
-                    placeholder="John Doe"
+                    onChange={(e) =>
+                      setFormData(
+                        (prev) =>
+                          ({
+                            ...(prev ?? {}),
+                            bankDetails: {
+                              ...(prev?.bankDetails ?? {}),
+                              accountName: e.target.value,
+                            },
+                          } as UserProfile)
+                      )
+                    }
+                    className='pl-10'
+                    placeholder='John Doe'
                   />
                 </div>
               </div>
-              <Button onClick={handleAddAccount} disabled={isLoading} className="w-full gap-2">
-                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+              <Button
+                onClick={handleAddAccount}
+                disabled={isLoading}
+                className='w-full gap-2'
+              >
+                {isLoading ? (
+                  <Loader2 className='w-4 h-4 animate-spin' />
+                ) : (
+                  <Plus className='w-4 h-4' />
+                )}
                 Add Account
               </Button>
             </div>
@@ -128,66 +222,82 @@ export function BankAccounts({ user }: ProfileProps) {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -20 }}
-              className="text-center py-12"
+              className='text-center py-12'
             >
-              <CreditCard className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-muted-foreground mb-2">No bank accounts linked</h3>
-              <p className="text-sm text-muted-foreground">Add a bank account to get started</p>
+              <CreditCard className='w-12 h-12 text-muted-foreground mx-auto mb-4' />
+              <h3 className='text-lg font-medium text-muted-foreground mb-2'>
+                No bank accounts linked
+              </h3>
+              <p className='text-sm text-muted-foreground'>
+                Add a bank account to get started
+              </p>
             </motion.div>
           ) : (
-            <div className="space-y-4">
+            <div className='space-y-4'>
               <motion.div
                 key={user?.id}
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.1 }}
-                className="p-4 border rounded-lg bg-card hover:bg-accent/5 transition-smooth"
+                className='p-4 border rounded-lg bg-card hover:bg-accent/5 transition-smooth'
               >
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                  <div className="space-y-2 flex-1">
-                    <div className="flex items-center gap-3 flex-wrap">
-                      <Building2 className="w-5 h-5 text-primary" />
-                      <span className="font-medium">{formData.bankDetails.bankName}</span>
-                      {/* {account.isVerified ? (
-                          <Badge variant="secondary" className="bg-success/10 text-success border-success/20">
-                            <CheckCircle className="w-3 h-3 mr-1" />
-                            Verified
-                          </Badge>
-                        ) : (
-                          <Badge variant="secondary" className="bg-warning/10 text-warning border-warning/20">
-                            <Clock className="w-3 h-3 mr-1" />
-                            Pending
-                          </Badge>
-                        )} */}
+                <div className='space-y-4'>
+                  {/* Bank Name Section */}
+                  <div className='flex items-center gap-3'>
+                    <div className='flex items-center justify-center w-10 h-10 rounded-full bg-primary/10'>
+                      <Building2 className='w-5 h-5 text-primary' />
                     </div>
-                    <div className="text-sm text-muted-foreground space-y-1">
-                      <div className="flex items-center gap-2">
-                        <Hash className="w-3 h-3" />
-                        <span>
-                          ****{formData?.bankDetails?.accountNumber
-                            ? formData.bankDetails.accountNumber.slice(-4)
-                            : "----"}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <User className="w-3 h-3" />
-                        <span>{formData.bankDetails.accountName}</span>
+                    <div>
+                      <p className='text-xs text-muted-foreground'>Bank Name</p>
+                      <p className='font-semibold text-foreground'>
+                        {formData.bankDetails.bankName}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Account Number Section with Copy */}
+                  <div className='flex items-center justify-between gap-4 p-3 rounded-lg bg-muted/50 border border-border/80'>
+                    <div className='flex items-center gap-3 flex-1 min-w-0'>
+                      <Hash className='w-4 h-4 text-muted-foreground flex-shrink-0' />
+                      <div className='flex-1 min-w-0'>
+                        <p className='text-xs text-muted-foreground mb-0.5'>
+                          Account Number
+                        </p>
+                        <p className='font-mono text-sm font-medium text-foreground truncate'>
+                          {formData.bankDetails.accountNumber}
+                        </p>
                       </div>
                     </div>
+                    <Button
+                      variant='ghost'
+                      size='sm'
+                      onClick={() =>
+                        copyToClipboard(
+                          formData?.bankDetails?.accountNumber ?? ''
+                        )
+                      }
+                      className='flex-shrink-0 h-8 w-8 p-0'
+                    >
+                      {copiedAccountNumber ? (
+                        <Check className='w-4 h-4 text-success' />
+                      ) : (
+                        <Copy className='w-4 h-4' />
+                      )}
+                    </Button>
+                  </div>
+
+                  {/* Account Name Section */}
+                  <div className='flex items-center gap-3'>
+                    <User className='w-4 h-4 text-muted-foreground' />
+                    <div>
+                      <p className='text-xs text-muted-foreground'>
+                        Account Name
+                      </p>
+                      <p className='text-sm text-foreground'>
+                        {formData.bankDetails.accountName}
+                      </p>
+                    </div>
                   </div>
-                  {/* {!account.isVerified && (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleVerifyAccount(account.id)}
-                        disabled={isLoading}
-                        className="gap-2 w-full sm:w-auto"
-                      >
-                        {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Shield className="w-4 h-4" />}
-                        <span className="hidden sm:inline">Verify Bank</span>
-                        <span className="sm:hidden">Verify</span>
-                      </Button>
-                    )} */}
                 </div>
               </motion.div>
             </div>
@@ -195,5 +305,5 @@ export function BankAccounts({ user }: ProfileProps) {
         </AnimatePresence>
       </CardContent>
     </Card>
-  )
+  );
 }

From 56fd79c642ef8401f5e433fc22c5e240c20cc2c1 Mon Sep 17 00:00:00 2001
From: chukwu obed <codingwithsmart@gmail.com>
Date: Sun, 12 Oct 2025 20:32:49 +0100
Subject: [PATCH 3/5] refactor: Improve dashboard components and user profile
 forms

---
 components/landingpage/landing/hero.tsx       |   5 +-
 .../landingpage/landing/stats-landing.tsx     |   8 +-
 components/profile/bank-accounts.tsx          | 114 +++++++++++++-----
 components/profile/profile-form.tsx           |   1 -
 components/providers/starknet-provider.tsx    |  29 ++---
 5 files changed, 108 insertions(+), 49 deletions(-)

diff --git a/components/landingpage/landing/hero.tsx b/components/landingpage/landing/hero.tsx
index cd5879c..d1e6304 100644
--- a/components/landingpage/landing/hero.tsx
+++ b/components/landingpage/landing/hero.tsx
@@ -88,11 +88,10 @@ const sectionRef = useRef<HTMLElement>(null)
 
             <div className="flex flex-col sm:flex-row gap-3 max-w-xl">
 
-
               <Link href="auth/signup">
                 <Button
                   size="lg"
-                  className="w-full sm:w-auto px-8 py-4 h-auto bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-xl shadow-xl shadow-blue-500/25 hover:shadow-2xl hover:shadow-blue-500/40 transition-all"
+                  className="w-[calc(100%-50px)] mx-2 sm:w-auto px-8 py-4 h-auto bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-xl shadow-xl shadow-blue-500/25 hover:shadow-2xl hover:shadow-blue-500/40 transition-all"
                 >
                   Get Started For Free
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -140,7 +139,7 @@ const sectionRef = useRef<HTMLElement>(null)
 
             {/* 3D perspective container */}
             <div className="relative perspective-1000">
-              <div className="transform rotate-y-12 rotate-x-2 transition-transform duration-500 hover:rotate-y-6">
+              <div className="transform  rotate-y-12 rotate-x-2 transition-transform duration-500 hover:rotate-y-6">
                 {/* Dashboard mockup */}
                 <div className="relative bg-slate-900/90 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden">
                   {/* Browser chrome */}
diff --git a/components/landingpage/landing/stats-landing.tsx b/components/landingpage/landing/stats-landing.tsx
index 5b1b623..b9bfec6 100644
--- a/components/landingpage/landing/stats-landing.tsx
+++ b/components/landingpage/landing/stats-landing.tsx
@@ -9,14 +9,14 @@ export function Stats() {
     const sectionRef = useRef<HTMLDivElement>(null)
 
     const stats = [
-        { value: "100k+", label: "Active Users", icon: Users, target: 100, suffix: "k+", key: "users" as const },
+        { value: "50+", label: "Active Users", icon: Users, target: 50, suffix: "+", key: "users" as const },
         {
-            value: "₦2.5B+",
+            value: "₦200+",
             label: "Processed",
             icon: TrendingUp,
-            target: 2.5,
+            target: 200,
             prefix: "₦",
-            suffix: "B+",
+            suffix: "k+",
             key: "processed" as const,
         },
         { value: "99.9%", label: "Uptime", icon: Shield, target: 99.9, suffix: "%", key: "uptime" as const },
diff --git a/components/profile/bank-accounts.tsx b/components/profile/bank-accounts.tsx
index 202a309..7944fec 100644
--- a/components/profile/bank-accounts.tsx
+++ b/components/profile/bank-accounts.tsx
@@ -26,8 +26,7 @@ import {
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/cards';
 import { Button } from '../ui/buttons';
 import { UserProfile } from '@/types/authContext';
-
-
+import { useAuth } from '../context/AuthContext';
 
 export const DEMO_DATA: UserProfile = {
   id: 'demo-user-123',
@@ -42,24 +41,23 @@ export const DEMO_DATA: UserProfile = {
   username: 'johndoe',
   displayPicture: null,
   bankDetails: {
-    bankName: 'Wells Fargo',
+    bankName: 'Access Bank',
     accountNumber: '1234567890',
     accountName: 'John Doe',
   },
 };
 
-
 const USE_DEMO_DATA = true;
 
 interface ProfileProps {
-  user: UserProfile | null
+  user: UserProfile | null;
 }
 
-
-export function BankAccounts({ user }: ProfileProps)  {
+export function BankAccounts({ user }: ProfileProps) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [copiedAccountNumber, setCopiedAccountNumber] = useState(false);
+  const { updateProfile } = useAuth();
 
   const [formData, setFormData] = useState<UserProfile | null>(
     USE_DEMO_DATA ? DEMO_DATA : null
@@ -82,28 +80,90 @@ export function BankAccounts({ user }: ProfileProps)  {
     }
   };
 
- const handleAddAccount = async () => {
-    if (!formData?.bankDetails?.accountName || !formData.bankDetails.accountNumber || !formData.bankDetails.bankName) {
-      toast.error('Please fill in all fields.')
-      return
+  const handleAddAccount = async () => {
+    const bankDetails = formData?.bankDetails;
+    if (!bankDetails?.bankName || !bankDetails?.accountNumber) {
+      toast.error('Please fill in all required fields.');
+      return;
     }
 
+    setIsLoading(true);
+
     try {
-      // const onSuccess = await addBankAccount(formData)
-      const onSuccess = false;
-      if (onSuccess) {
-        setIsDialogOpen(false)
-        toast.success('Bank account added', {
-          description: "Your bank account has been added successfully."
-        })
-        setFormData(user)
+      // Call Paystack verification endpoint
+      const res = await fetch('/api/verify-account', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          accountNumber: bankDetails.accountNumber,
+          bankCode: bankDetails.bankName,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) throw new Error(data.error || 'Verification failed');
+
+      const verifiedName = data.account_name;
+      if (!verifiedName) throw new Error('No account name returned.');
+
+      setFormData((prev): UserProfile | null => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          bankDetails: {
+            bankName: prev.bankDetails?.bankName ?? '',
+            accountNumber: prev.bankDetails?.accountNumber ?? '',
+            accountName: verifiedName,
+          },
+        };
+      });
+
+      const userFullName = `${formData?.firstName || ''} ${
+        formData?.lastName || ''
+      }`.trim();
+
+      // Normalize names for comparison
+      const normalize = (name: string) =>
+        name.toLowerCase().replace(/\s+/g, ' ').trim();
+
+      const cleanUserName = normalize(userFullName);
+      const cleanBankName = normalize(verifiedName);
+
+      if (
+        !cleanBankName.includes(cleanUserName) &&
+        !cleanUserName.includes(cleanBankName)
+      ) {
+        toast.error('⚠️ Account name does not match your profile name.');
+        setIsLoading(false);
+        return;
+      }
+
+      const updatedProfile = {
+        ...formData,
+        bankDetails: {
+          bankName: bankDetails.bankName,
+          accountNumber: bankDetails.accountNumber,
+          accountName: verifiedName,
+        },
+      };
+
+      const savedUser = await updateProfile(updatedProfile);
+
+      if (savedUser) {
+        toast.success('✅ Bank account verified and added successfully.');
+        setFormData(savedUser);
+        setIsDialogOpen(false);
+      } else {
+        throw new Error('Failed to save bank account.');
       }
-    } catch (error: string | any) {
-      toast.error('Failed to add bank account', {
-        description: `Please try again. Error: ${error.message || error}`
-      })
+    } catch (error: any) {
+      toast.error(`❌ ${error.message || 'Verification failed'}`);
+    } finally {
+      setIsLoading(false);
     }
-  }
+  };
+
   return (
     <Card className='transition-smooth hover:shadow-md'>
       <CardHeader className='flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0 pb-6'>
@@ -122,7 +182,7 @@ export function BankAccounts({ user }: ProfileProps)  {
               Add Bank
             </Button>
           </DialogTrigger>
-          <DialogContent className='w-[95vw] max-w-md mx-auto bg-white'>
+          <DialogContent className='w-[95vw] max-w-md mx-auto bg-sidebar backdrop-blur-lg border border-border/50 shadow-lg'>
             <DialogHeader>
               <DialogTitle>Add Bank Account</DialogTitle>
             </DialogHeader>
@@ -175,7 +235,7 @@ export function BankAccounts({ user }: ProfileProps)  {
                   />
                 </div>
               </div>
-              <div className='space-y-2'>
+              {/* <div className='space-y-2'>
                 <Label htmlFor='accountName'>Account Name</Label>
                 <div className='relative'>
                   <User className='absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground' />
@@ -198,7 +258,7 @@ export function BankAccounts({ user }: ProfileProps)  {
                     placeholder='John Doe'
                   />
                 </div>
-              </div>
+              </div> */}
               <Button
                 onClick={handleAddAccount}
                 disabled={isLoading}
diff --git a/components/profile/profile-form.tsx b/components/profile/profile-form.tsx
index 136f51d..de2bfa4 100644
--- a/components/profile/profile-form.tsx
+++ b/components/profile/profile-form.tsx
@@ -56,7 +56,6 @@ export function ProfileForm() {
         const toastId = toast.loading('Updating profile...');
 
         try {
-            console.log("📤 Sending update with data:", formData);
             const updatedUser = await updateProfile(formData);
             
             if (updatedUser) {
diff --git a/components/providers/starknet-provider.tsx b/components/providers/starknet-provider.tsx
index 486c6f4..f8bc21d 100644
--- a/components/providers/starknet-provider.tsx
+++ b/components/providers/starknet-provider.tsx
@@ -1,35 +1,36 @@
-"use client";
-import React from "react";
-import { sepolia } from "@starknet-react/chains";
+'use client';
+import React from 'react';
+import { sepolia, mainnet } from '@starknet-react/chains';
 import {
   StarknetConfig,
   jsonRpcProvider,
   argent,
   braavos,
   voyager,
-} from "@starknet-react/core";
+} from '@starknet-react/core';
 
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
   // Manual connector setup - more reliable for detection
-  const connectors = [
-    argent(),
-    braavos(),
-  ];
+  const connectors = [argent(), braavos()];
 
   const rpc = (chain: any) => {
     if (chain.id === sepolia.id) {
-      return { 
-        nodeUrl: process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL || "https://starknet-sepolia.public.blastapi.io" 
+      return {
+        nodeUrl:
+          process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL ||
+          'https://starknet-sepolia.public.blastapi.io',
       };
     }
-    return { 
-      nodeUrl: process.env.NEXT_PUBLIC_MAINNET_RPC_URL || "https://starknet-mainnet.public.blastapi.io" 
+    return {
+      nodeUrl:
+        process.env.NEXT_PUBLIC_MAINNET_RPC_URL ||
+        'https://starknet-mainnet.public.blastapi.io',
     };
   };
 
   return (
     <StarknetConfig
-      chains={[sepolia]}
+      chains={[sepolia, mainnet]}
       connectors={connectors}
       explorer={voyager}
       autoConnect={true}
@@ -38,4 +39,4 @@ export function StarknetProvider({ children }: { children: React.ReactNode }) {
       {children}
     </StarknetConfig>
   );
-}
\ No newline at end of file
+}

From 7927ad8f1a5ab12af9eed39caa7527494d42036b Mon Sep 17 00:00:00 2001
From: chukwu obed <codingwithsmart@gmail.com>
Date: Sun, 12 Oct 2025 21:16:10 +0100
Subject: [PATCH 4/5] updated build

---
 components/profile/bank-accounts.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/profile/bank-accounts.tsx b/components/profile/bank-accounts.tsx
index 7944fec..6d61f4c 100644
--- a/components/profile/bank-accounts.tsx
+++ b/components/profile/bank-accounts.tsx
@@ -86,7 +86,6 @@ export function BankAccounts({ user }: ProfileProps) {
       toast.error('Please fill in all required fields.');
       return;
     }
-
     setIsLoading(true);
 
     try {

From 5629650238d2686185a1c59ae1759684b842aeb0 Mon Sep 17 00:00:00 2001
From: chukwu obed <codingwithsmart@gmail.com>
Date: Sun, 12 Oct 2025 21:33:42 +0100
Subject: [PATCH 5/5] updated build

---
 components/auth/protected-route.tsx  | 28 +++++++++-------------------
 components/profile/bank-accounts.tsx |  1 -
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/components/auth/protected-route.tsx b/components/auth/protected-route.tsx
index f56f5bb..6fae5d2 100644
--- a/components/auth/protected-route.tsx
+++ b/components/auth/protected-route.tsx
@@ -15,37 +15,27 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
   const [isChecking, setIsChecking] = useState(true);
 
   useEffect(() => {
-    // If still loading auth state, wait
-    if (isLoading) {
-      return;
-    }
+    if (isLoading) return;
 
-    // Check if user is authenticated
     const isAuthenticated = !!(token || user);
-    
+
     if (isAuthenticated) {
       setIsChecking(false);
     } else {
-      // Only redirect if we're not already on the auth page
-
-      if (!pathname.includes('/')) {
-        console.log('Not authenticated - redirecting to auth');
-        // Use replace: false to allow back button to work properly
-        router.push("/");
-      if (!pathname.includes('/auth/login')) {
-        console.log('Not authenticated - redirecting to auth');
-        // Use replace: false to allow back button to work properly
+      // Redirect logic for unauthenticated users
+      if (!pathname.includes("/auth/login")) {
+        console.log("Not authenticated - redirecting to login");
         router.push("/auth/login");
       }
       setIsChecking(false);
     }
   }, [user, isLoading, token, router, pathname]);
 
-  // Show loading while checking authentication
+  // Show loading spinner while checking auth
   if (isLoading || isChecking) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#2F80ED]"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#2F80ED]" />
       </div>
     );
   }
@@ -55,6 +45,6 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
     return <>{children}</>;
   }
 
-  // Return null if not authenticated (will redirect)
+  // Return null if not authenticated (redirect happens)
   return null;
-}
\ No newline at end of file
+}
diff --git a/components/profile/bank-accounts.tsx b/components/profile/bank-accounts.tsx
index 6d61f4c..3cae8e2 100644
--- a/components/profile/bank-accounts.tsx
+++ b/components/profile/bank-accounts.tsx
@@ -117,7 +117,6 @@ export function BankAccounts({ user }: ProfileProps) {
           },
         };
       });
-
       const userFullName = `${formData?.firstName || ''} ${
         formData?.lastName || ''
       }`.trim();