diff --git a/src/app/how-it-works/page.tsx b/src/app/how-it-works/page.tsx new file mode 100644 index 0000000..1d705ef --- /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 ( +
+ {/* Header with Back Button */} +
+ {/* Background Elements */} +
+
+
+
+
+
+
+
+
+ +
+ {/* Back Button */} + + + {/* Hero Section */} +
+

+ + How It Works + +

+

+ Discover how easy it is to swap skills, connect with peers, and grow your expertise + through our innovative peer-to-peer learning platform. +

+
+
+
+ + {/* Steps Section */} +
+
+ {steps.map((step, index) => ( +
+ {/* Step Content */} +
+
+
+ {step.number} +
+ +
+ +

+ {step.title} +

+ +

+ {step.description} +

+ +
+ {step.features.map((feature, idx) => ( +
+ + {feature} +
+ ))} +
+
+ + {/* Step Visual */} +
+
+ {/* Background Pattern */} +
+
+
+
+ + {/* Icon */} + + + {/* Step Number */} +
+ {step.number} +
+
+
+
+ ))} +
+
+ + {/* Benefits Section */} +
+
+
+
+ +
+
+

Why Choose SkillSwap Hub?

+

Join thousands of learners building skills together

+
+ +
+ {[ + { + 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) => ( +
+
+ +
+

{benefit.title}

+

{benefit.description}

+
+ ))} +
+
+
+ + {/* CTA Section */} +
+

Ready to Start Your Journey?

+

+ Join our community of learners and teachers. Start swapping skills today! +

+ +
+ + +
+
+
+ ); +}; + +export default HowItWorksPage; \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 28784d4..bc56476 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, @@ -19,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; @@ -130,13 +141,15 @@ const EnhancedHeroSection = () => {
router.push('/dashboard')} + onClick={() => router.push(isUserLoggedIn ? '/dashboard' : '/register')} >
New Features
- Check out the team dashboard + + {isUserLoggedIn ? 'Check out the dashboard' : 'Explore the dashboard'} +
@@ -162,13 +175,13 @@ const EnhancedHeroSection = () => { {/* CTA Buttons */}
- @@ -243,6 +256,9 @@ export default function Home() { {/* Success Stories - Now with consistent blue theme */} + {/* Contact Us Section */} + + {/* Footer */}