From 74d40fabb584636c847934808973d569513d75ee Mon Sep 17 00:00:00 2001
From: AdithaBuwaneka <adithabuwaneka0@gmail.com>
Date: Tue, 22 Jul 2025 18:03:07 +0530
Subject: [PATCH 1/4] feat: add Contact Us section to homepage and update
 footer link

---
 src/app/page.tsx                             |   4 +
 src/components/homepage/ContactUsSection.tsx | 117 +++++++++++++++++++
 src/components/homepage/Footer.tsx           |   2 +-
 3 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 src/components/homepage/ContactUsSection.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 28784d48..531f41f6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import Chatbot from "@/components/chatassistant/chatbot";
 import Footer from "@/components/homepage/Footer";
 import SuccessStoriesCarousel from "@/components/homepage/SuccessStoriesCarousel";
 import TrendingSkills from "@/components/homepage/TrendingSkills";
+import ContactUsSection from "@/components/homepage/ContactUsSection";
 import { 
   ArrowRight, 
   Sparkles, 
@@ -243,6 +244,9 @@ export default function Home() {
       {/* Success Stories - Now with consistent blue theme */}
       <SuccessStoriesCarousel />
       
+      {/* Contact Us Section */}
+      <ContactUsSection />
+      
       {/* Footer */}
       <Footer />
     </>
diff --git a/src/components/homepage/ContactUsSection.tsx b/src/components/homepage/ContactUsSection.tsx
new file mode 100644
index 00000000..8be8d6b8
--- /dev/null
+++ b/src/components/homepage/ContactUsSection.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { MessageCircle, Mail, Phone, ArrowRight, Users, Star, Clock } from 'lucide-react';
+
+const ContactUsSection: React.FC = () => {
+  const router = useRouter();
+
+  const handleContactUsClick = () => {
+    router.push('/contact-us');
+  };
+
+  return (
+    <section className="bg-gradient-to-b from-blue-800 to-[#006699] py-20 px-6 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-16 left-16 text-cyan-300 opacity-20 text-2xl">+</div>
+        <div className="absolute top-32 right-32 text-cyan-300 opacity-20 text-lg">+</div>
+        <div className="absolute top-48 left-48 text-cyan-300 opacity-20 text-lg">+</div>
+        <div className="absolute top-24 right-64 text-cyan-300 opacity-20 text-lg">+</div>
+        <div className="absolute top-80 right-16 text-cyan-300 opacity-20 text-lg">+</div>
+        
+        {/* Flowing lines similar to success stories */}
+        <div className="absolute -right-20 top-1/2 w-96 h-96 bg-gradient-to-l from-cyan-400/10 to-transparent rounded-full blur-3xl"></div>
+        <div className="absolute -left-20 bottom-1/4 w-80 h-80 bg-gradient-to-r from-blue-400/10 to-transparent rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="container mx-auto relative z-10">
+        <div className="max-w-4xl mx-auto text-center">
+          {/* Header */}
+          <div className="mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+              <span className="bg-gradient-to-r from-cyan-300 to-blue-200 bg-clip-text text-transparent">
+                Got Questions?
+              </span>
+              <br />
+              <span className="text-blue-100">We're Here to Help!</span>
+            </h2>
+            <p className="text-xl text-blue-100 leading-relaxed max-w-2xl mx-auto">
+              Whether you need support, have feedback, or want to learn more about our platform, 
+              our team is ready to assist you on your skill-swapping journey.
+            </p>
+          </div>
+
+          {/* Contact Options */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+            {/* Quick Support */}
+            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-cyan-300/20 hover:bg-white/15 transition-all duration-300 transform hover:scale-105">
+              <div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <Clock className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-2">Quick Support</h3>
+              <p className="text-blue-100 text-sm mb-4">Get instant help with common questions and issues</p>
+              <div className="text-cyan-300 text-sm font-medium">24/7 Available</div>
+            </div>
+
+            {/* Personal Help */}
+            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-cyan-300/20 hover:bg-white/15 transition-all duration-300 transform hover:scale-105">
+              <div className="w-16 h-16 bg-gradient-to-r from-purple-400 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <Users className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-2">Personal Help</h3>
+              <p className="text-blue-100 text-sm mb-4">Connect with our support team for personalized assistance</p>
+              <div className="text-cyan-300 text-sm font-medium">Response within hours</div>
+            </div>
+
+            {/* Feedback & Ideas */}
+            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-cyan-300/20 hover:bg-white/15 transition-all duration-300 transform hover:scale-105">
+              <div className="w-16 h-16 bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <Star className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-xl font-semibold text-white mb-2">Feedback & Ideas</h3>
+              <p className="text-blue-100 text-sm mb-4">Share your thoughts and help us improve the platform</p>
+              <div className="text-cyan-300 text-sm font-medium">Your voice matters</div>
+            </div>
+          </div>
+
+          {/* Main CTA */}
+          <div className="bg-white/5 backdrop-blur-md rounded-3xl p-8 border border-white/20">
+            <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+              <div className="text-left md:text-left">
+                <h3 className="text-2xl font-bold text-white mb-2">Ready to get in touch?</h3>
+                <p className="text-blue-100">
+                  Send us a message and we'll respond as soon as possible. We're here to help you succeed!
+                </p>
+              </div>
+              <button
+                onClick={handleContactUsClick}
+                className="group bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:from-cyan-300 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-cyan-500/25 flex items-center gap-2 whitespace-nowrap"
+              >
+                <MessageCircle className="w-5 h-5" />
+                Contact Us
+                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </button>
+            </div>
+          </div>
+
+          {/* Contact Methods */}
+          <div className="flex flex-col md:flex-row justify-center items-center gap-8 mt-12 text-blue-100">
+            <div className="flex items-center gap-2 hover:text-white transition-colors">
+              <Mail className="w-5 h-5 text-cyan-300" />
+              <span>support@skillswaphub.com</span>
+            </div>
+            <div className="hidden md:block w-px h-6 bg-blue-300/30"></div>
+            <div className="flex items-center gap-2 hover:text-white transition-colors">
+              <MessageCircle className="w-5 h-5 text-cyan-300" />
+              <span>Live Chat Available</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ContactUsSection;
\ No newline at end of file
diff --git a/src/components/homepage/Footer.tsx b/src/components/homepage/Footer.tsx
index 2de63d05..4e8328f4 100644
--- a/src/components/homepage/Footer.tsx
+++ b/src/components/homepage/Footer.tsx
@@ -49,7 +49,7 @@ const Footer: FC = () => {
             <ul className="space-y-3 text-sm">
               <li><Link href="/help" className="text-blue-100 hover:text-white transition-colors">Help Center</Link></li>
               <li><Link href="/safety" className="text-blue-100 hover:text-white transition-colors">Safety Guidelines</Link></li>
-              <li><Link href="/contact" className="text-blue-100 hover:text-white transition-colors">Contact Us</Link></li>
+              <li><Link href="/contact-us" className="text-blue-100 hover:text-white transition-colors">Contact Us</Link></li>
               <li><Link href="/feedback" className="text-blue-100 hover:text-white transition-colors">Feedback</Link></li>
               <li><Link href="/report" className="text-blue-100 hover:text-white transition-colors">Report Issue</Link></li>
             </ul>

From 7f662b8f77ea6d9e38c3c4de6f3ded5876b67814 Mon Sep 17 00:00:00 2001
From: AdithaBuwaneka <adithabuwaneka0@gmail.com>
Date: Tue, 22 Jul 2025 18:21:35 +0530
Subject: [PATCH 2/4] feat: enhance hero section with user authentication
 checks and dynamic routing

---
 src/app/page.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 531f41f6..8818707a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,11 +20,21 @@ import {
   Play
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/context/AuthContext';
 
 // Enhanced Hero Section Component
 const EnhancedHeroSection = () => {
   const router = useRouter();
+  const { user } = useAuth();
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  // Direct check - no extra state needed
+  const isUserLoggedIn = !!user && !!user._id;
+  
+  // Debug log
+  useEffect(() => {
+    console.log('Direct Auth Check - user:', user);
+    console.log('Direct Auth Check - isUserLoggedIn:', isUserLoggedIn);
+  }, [user, isUserLoggedIn]);
   const [isVisible, setIsVisible] = useState(false);
   const [stats, setStats] = useState<{
     activeLearners: number | null;
@@ -131,13 +141,15 @@ const EnhancedHeroSection = () => {
         <div className={`mb-8 transform transition-all duration-1000 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
           <div 
             className="inline-flex items-center gap-3 bg-white/10 backdrop-blur-md rounded-full px-6 py-3 border border-cyan-300/20 hover:bg-white/15 transition-all duration-300 cursor-pointer group"
-            onClick={() => router.push('/dashboard')}
+            onClick={() => router.push(isUserLoggedIn ? '/dashboard' : '/register')}
           >
             <div className="flex items-center gap-2">
               <Sparkles className="w-4 h-4 text-cyan-300 animate-pulse" />
               <span className="text-sm font-medium text-cyan-100">New Features</span>
             </div>
-            <span className="text-sm text-blue-100">Check out the team dashboard</span>
+            <span className="text-sm text-blue-100">
+              {isUserLoggedIn ? 'Check out the dashboard' : 'Explore the dashboard'}
+            </span>
             <ArrowRight className="w-4 h-4 text-cyan-300 group-hover:translate-x-1 transition-transform" />
           </div>
         </div>
@@ -164,9 +176,9 @@ const EnhancedHeroSection = () => {
         <div className={`flex flex-col sm:flex-row gap-4 justify-center mb-16 transform transition-all duration-1000 delay-600 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
           <button 
             className="group bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:from-cyan-300 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-cyan-500/25 flex items-center justify-center gap-2"
-            onClick={() => router.push('/register')}
+            onClick={() => router.push(isUserLoggedIn ? '/dashboard' : '/register')}
           >
-            Join Now
+            {isUserLoggedIn ? 'Go to Dashboard' : 'Join Now'}
             <Zap className="w-5 h-5 group-hover:animate-pulse" />
           </button>
           <button className="group bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded-2xl font-semibold text-lg border border-white/20 hover:bg-white/20 transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2">

From 8646e58522f35fb2198c4f706fd2547de75362f9 Mon Sep 17 00:00:00 2001
From: AdithaBuwaneka <adithabuwaneka0@gmail.com>
Date: Tue, 22 Jul 2025 18:26:25 +0530
Subject: [PATCH 3/4] feat: update button styles in EnhancedHeroSection for
 improved accessibility and consistency

---
 src/app/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8818707a..bc56476c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -175,13 +175,13 @@ const EnhancedHeroSection = () => {
         {/* CTA Buttons */}
         <div className={`flex flex-col sm:flex-row gap-4 justify-center mb-16 transform transition-all duration-1000 delay-600 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
           <button 
-            className="group bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:from-cyan-300 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-cyan-500/25 flex items-center justify-center gap-2"
+            className="group bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:from-cyan-300 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-cyan-500/25 flex items-center justify-center gap-2 min-w-[220px] h-[60px]"
             onClick={() => router.push(isUserLoggedIn ? '/dashboard' : '/register')}
           >
             {isUserLoggedIn ? 'Go to Dashboard' : 'Join Now'}
             <Zap className="w-5 h-5 group-hover:animate-pulse" />
           </button>
-          <button className="group bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded-2xl font-semibold text-lg border border-white/20 hover:bg-white/20 transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2">
+          <button className="group bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded-2xl font-semibold text-lg border border-white/20 hover:bg-white/20 transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2 min-w-[220px] h-[60px]">
             <Play className="w-5 h-5" />
             Watch Demo
           </button>

From 825713679e04e4dac37db90ccba4d6659260372e Mon Sep 17 00:00:00 2001
From: AdithaBuwaneka <adithabuwaneka0@gmail.com>
Date: Tue, 22 Jul 2025 18:29:36 +0530
Subject: [PATCH 4/4] feat: create How It Works page with step-by-step skill
 exchange guide and benefits section

---
 src/app/how-it-works/page.tsx | 210 ++++++++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 src/app/how-it-works/page.tsx

diff --git a/src/app/how-it-works/page.tsx b/src/app/how-it-works/page.tsx
new file mode 100644
index 00000000..1d705ef2
--- /dev/null
+++ b/src/app/how-it-works/page.tsx
@@ -0,0 +1,210 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { ArrowLeft, Users, MessageCircle, Star, BookOpen, Trophy, CheckCircle, ArrowRight, Play, Zap } from 'lucide-react';
+
+const HowItWorksPage = () => {
+  const router = useRouter();
+
+  const steps = [
+    {
+      number: '01',
+      title: 'Create Your Profile',
+      description: 'Sign up and tell us about the skills you want to learn and the ones you can teach. Build your comprehensive skill profile.',
+      icon: Users,
+      color: 'from-blue-500 to-cyan-500',
+      features: ['Add your skills', 'Set learning goals', 'Upload portfolio', 'Complete verification']
+    },
+    {
+      number: '02',
+      title: 'Find Perfect Matches',
+      description: 'Our smart algorithm connects you with users who want to learn what you teach and can teach what you want to learn.',
+      icon: Star,
+      color: 'from-purple-500 to-blue-500',
+      features: ['Smart matching', 'Filter by location', 'Skill compatibility', 'User ratings']
+    },
+    {
+      number: '03',
+      title: 'Connect & Chat',
+      description: 'Start conversations with your matches through our secure chat platform. Plan your skill exchange sessions together.',
+      icon: MessageCircle,
+      color: 'from-green-500 to-blue-500',
+      features: ['Real-time messaging', 'File sharing', 'Video calls', 'Schedule meetings']
+    },
+    {
+      number: '04',
+      title: 'Learn & Teach',
+      description: 'Exchange skills through virtual or in-person sessions. Track your progress and build lasting professional relationships.',
+      icon: Trophy,
+      color: 'from-orange-500 to-red-500',
+      features: ['Flexible scheduling', 'Progress tracking', 'Session notes', 'Skill certificates']
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-[#006699] via-blue-700 to-indigo-900">
+      {/* Header with Back Button */}
+      <div className="relative overflow-hidden">
+        {/* Background Elements */}
+        <div className="absolute inset-0">
+          <div className="absolute top-16 left-16 text-cyan-300 opacity-20 text-2xl">+</div>
+          <div className="absolute top-32 right-32 text-cyan-300 opacity-20 text-lg">+</div>
+          <div className="absolute top-48 left-48 text-cyan-300 opacity-20 text-lg">+</div>
+          <div className="absolute -right-20 top-1/4 w-96 h-96 bg-gradient-to-l from-cyan-400/10 to-transparent rounded-full blur-3xl"></div>
+        </div>
+
+        <div className="relative z-10 container mx-auto px-6 py-8">
+          {/* Back Button */}
+          <button
+            onClick={() => router.back()}
+            className="inline-flex items-center gap-2 text-blue-100 hover:text-white transition-colors duration-300 mb-8 group"
+          >
+            <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
+            <span className="font-medium">Back</span>
+          </button>
+
+          {/* Hero Section */}
+          <div className="text-center mb-16">
+            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
+              <span className="bg-gradient-to-r from-cyan-300 to-blue-200 bg-clip-text text-transparent">
+                How It Works
+              </span>
+            </h1>
+            <p className="text-xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
+              Discover how easy it is to swap skills, connect with peers, and grow your expertise 
+              through our innovative peer-to-peer learning platform.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Steps Section */}
+      <div className="container mx-auto px-6 py-16">
+        <div className="space-y-16">
+          {steps.map((step, index) => (
+            <div
+              key={step.number}
+              className={`flex flex-col ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} items-center gap-12 lg:gap-16`}
+            >
+              {/* Step Content */}
+              <div className="flex-1 text-center lg:text-left">
+                <div className="inline-flex items-center gap-3 mb-4">
+                  <div className={`w-12 h-12 rounded-full bg-gradient-to-r ${step.color} flex items-center justify-center text-white font-bold text-lg`}>
+                    {step.number}
+                  </div>
+                  <step.icon className="w-8 h-8 text-cyan-300" />
+                </div>
+                
+                <h3 className="text-3xl md:text-4xl font-bold text-white mb-4">
+                  {step.title}
+                </h3>
+                
+                <p className="text-lg text-blue-100 mb-6 leading-relaxed">
+                  {step.description}
+                </p>
+                
+                <div className="grid grid-cols-2 gap-3">
+                  {step.features.map((feature, idx) => (
+                    <div key={idx} className="flex items-center gap-2 text-sm text-blue-200">
+                      <CheckCircle className="w-4 h-4 text-green-400 flex-shrink-0" />
+                      <span>{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Step Visual */}
+              <div className="flex-1 flex justify-center">
+                <div className={`relative w-80 h-80 bg-gradient-to-r ${step.color} rounded-3xl flex items-center justify-center overflow-hidden`}>
+                  {/* Background Pattern */}
+                  <div className="absolute inset-0 opacity-20">
+                    <div className="absolute inset-4 border-2 border-white/30 rounded-2xl"></div>
+                    <div className="absolute inset-8 border border-white/20 rounded-xl"></div>
+                  </div>
+                  
+                  {/* Icon */}
+                  <step.icon className="w-32 h-32 text-white relative z-10" />
+                  
+                  {/* Step Number */}
+                  <div className="absolute top-4 right-4 w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
+                    <span className="text-white font-bold text-lg">{step.number}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Benefits Section */}
+      <div className="bg-gradient-to-r from-blue-800/50 to-[#006699]/50 py-16 relative overflow-hidden">
+        <div className="absolute inset-0">
+          <div className="absolute -left-20 bottom-1/4 w-80 h-80 bg-gradient-to-r from-cyan-400/10 to-transparent rounded-full blur-3xl"></div>
+        </div>
+        
+        <div className="container mx-auto px-6 relative z-10">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold text-white mb-4">Why Choose SkillSwap Hub?</h2>
+            <p className="text-xl text-blue-100">Join thousands of learners building skills together</p>
+          </div>
+          
+          <div className="grid md:grid-cols-3 gap-8">
+            {[
+              {
+                icon: BookOpen,
+                title: 'Learn Anything',
+                description: 'Access a wide range of skills from coding to cooking, taught by passionate experts.'
+              },
+              {
+                icon: Users,
+                title: 'Build Network',
+                description: 'Connect with like-minded individuals and build lasting professional relationships.'
+              },
+              {
+                icon: Zap,
+                title: 'Grow Fast',
+                description: 'Accelerate your learning through personalized, hands-on skill exchange sessions.'
+              }
+            ].map((benefit, index) => (
+              <div key={index} className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-cyan-300/20 hover:bg-white/15 transition-all duration-300">
+                <div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                  <benefit.icon className="w-8 h-8 text-white" />
+                </div>
+                <h3 className="text-xl font-semibold text-white mb-3 text-center">{benefit.title}</h3>
+                <p className="text-blue-100 text-center">{benefit.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="container mx-auto px-6 py-16 text-center">
+        <h2 className="text-4xl font-bold text-white mb-6">Ready to Start Your Journey?</h2>
+        <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
+          Join our community of learners and teachers. Start swapping skills today!
+        </p>
+        
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <button 
+            className="group bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:from-cyan-300 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-cyan-500/25 flex items-center justify-center gap-2 min-w-[220px]"
+            onClick={() => router.push('/register')}
+          >
+            Get Started
+            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+          </button>
+          <button 
+            className="group bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded-2xl font-semibold text-lg border border-white/20 hover:bg-white/20 transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2 min-w-[220px]"
+            onClick={() => router.push('/')}
+          >
+            <ArrowLeft className="w-5 h-5" />
+            Back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HowItWorksPage;
\ No newline at end of file