Update Footer.tsx

components/auth/protected-route.tsx

@@ -15,32 +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('/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>
     );
   }
@@ -50,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;
-}
+}

components/context/AuthContext.tsx

@@ -288,7 +288,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     setToken(null);
     setUser(null);
     setIsLoading(false);
-    router.push("/auth/login");
+    router.push("/");
   };
 
   const register = async (

components/landingpage/landing/Footer.tsx

@@ -1,89 +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">
-            <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>
@@ -93,21 +87,26 @@ 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>
             ))}
           </div>
         </div>
       </div>
     </footer>
-  )
+  );
 };
 
 export default Footer;

components/landingpage/landing/hero.tsx

@@ -5,8 +5,17 @@ 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 } from "react"
+import { useState , useRef, useEffect} from "react"
+
+const paprika = Paprika({
+  subsets: ["latin"],
+  weight: ["400"],
+  variable: "--font-paprika",
+});
+
 export function Hero() {
+const sectionRef = useRef<HTMLElement>(null)
+  const [isVisible, setIsVisible] = useState(false)
 
 
   const scrollToFeatures = () => {
@@ -58,11 +67,10 @@ export function Hero() {
 
             <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" />
@@ -110,7 +118,7 @@ export function Hero() {
 
             {/* 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 */}

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 },