Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -14,6 +14,34 @@ import FooterBase from "@/components/sections/footer/FooterBase";
 import { Lock, BookOpen, TrendingUp, Play, Compass, Award, Film, Star, Users, Video, Clock, CheckCircle, MessageCircle } from "lucide-react";
 
 export default function HomePage() {
+  const handleAuthSubmit = (emailAndKey: string) => {
+    // Parse email and license key from input
+    // Format expected: "email@example.com license-key-123"
+    const parts = emailAndKey.trim().split(/\s+/);
+    const email = parts[0];
+    const licenseKey = parts.slice(1).join(" ");
+    
+    if (!email || !licenseKey) {
+      alert("Please enter both your email and license key");
+      return;
+    }
+    
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      alert("Please enter a valid email address");
+      return;
+    }
+    
+    // Here you would typically send authentication request to your backend
+    console.log("Authentication attempt:", { email, licenseKey });
+    
+    // Mock authentication success
+    alert(`Authentication successful!\nEmail: ${email}\nLicense Key: ${licenseKey}`);
+    // In a real app, you'd redirect to dashboard or set auth token
+    // window.location.href = '/dashboard';
+  };
+
   const navItems = [
     { name: "Dashboard", id: "dashboard" },
     { name: "Courses", id: "courses" },
@@ -22,8 +50,7 @@ export default function HomePage() {
 
   const footerColumns = [
     {
-      title: "Product",
+      title: "Product",      items: [
-      items: [
         { label: "Courses", href: "/courses" },
         { label: "Dashboard", href: "/dashboard" },
         { label: "Pricing", href: "/" },
@@ -31,8 +58,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Company",
+      title: "Company",      items: [
-      items: [
         { label: "About Us", href: "/" },
         { label: "Blog", href: "/" },
         { label: "Careers", href: "/" },
@@ -40,8 +66,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Legal",
+      title: "Legal",      items: [
-      items: [
         { label: "Privacy Policy", href: "/" },
         { label: "Terms of Service", href: "/" },
         { label: "License Agreement", href: "/" },
@@ -49,8 +74,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Connect",
+      title: "Connect",      items: [
-      items: [
         { label: "Twitter", href: "https://twitter.com" },
         { label: "LinkedIn", href: "https://linkedin.com" },
         { label: "GitHub", href: "https://github.com" },
@@ -79,7 +103,7 @@ export default function HomePage() {
       <div id="auth-hero" data-section="auth-hero">
         <HeroLogoBillboard
           logoText="LearnHub"
-          description="Unlock your learning journey. Enter your email, license key, and access your personalized learning platform."
+          description="Unlock your learning journey. Enter your email and license key to access your personalized learning platform."
           buttons={[
             { text: "Sign In Now", href: "/" },
             { text: "Learn More", href: "/" },
@@ -95,15 +119,16 @@ export default function HomePage() {
         <ContactSplit
           tag="Secure Access"
           title="Login to Your Account"
-          description="Enter your credentials to access exclusive learning content and continue your educational journey."
+          description="Enter your email and license key to authenticate and access exclusive learning content."
           tagIcon={Lock}
           tagAnimation="slide-up"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
           mediaAnimation="opacity"
-          inputPlaceholder="Enter your email"
+          inputPlaceholder="Enter your email and license key"
           buttonText="Verify & Login"
           termsText="By logging in, you agree to our Terms of Service and Privacy Policy."
+          onSubmit={handleAuthSubmit}
         />
       </div>
 
@@ -121,24 +146,16 @@ export default function HomePage() {
           buttonAnimation="slide-up"
           bulletPoints={[
             {
-              title: "Progress Tracking",
+              title: "Progress Tracking",              description: "Monitor your learning progress in real-time across all courses.",              icon: TrendingUp,
-              description: "Monitor your learning progress in real-time across all courses.",
-              icon: TrendingUp,
             },
             {
-              title: "Video Library",
+              title: "Video Library",              description: "Access a comprehensive collection of educational video content.",              icon: Play,
-              description: "Access a comprehensive collection of educational video content.",
-              icon: Play,
             },
             {
-              title: "Personalized Path",
+              title: "Personalized Path",              description: "Customized learning recommendations based on your interests.",              icon: Compass,
-              description: "Customized learning recommendations based on your interests.",
-              icon: Compass,
             },
             {
-              title: "Certificates",
+              title: "Certificates",              description: "Earn certificates upon completion of courses.",              icon: Award,
-              description: "Earn certificates upon completion of courses.",
-              icon: Award,
             },
           ]}
           imageSrc="http://img.b2bpic.net/free-vector/template-user-panel-dashboard_23-2148368852.jpg?_wi=1"
@@ -165,33 +182,13 @@ export default function HomePage() {
           animationType="slide-up"
           products={[
             {
-              id: "course-1",
+              id: "course-1",              name: "Fundamentals of Web Development",              price: "Beginner",              imageSrc: "http://img.b2bpic.net/free-psd/gradient-e-learning-template_23-2149955899.jpg?_wi=1",              imageAlt: "Web Development Course"},
-              name: "Fundamentals of Web Development",
-              price: "Beginner",
-              imageSrc: "http://img.b2bpic.net/free-psd/gradient-e-learning-template_23-2149955899.jpg?_wi=1",
-              imageAlt: "Web Development Course",
-            },
             {
-              id: "course-2",
+              id: "course-2",              name: "Advanced JavaScript & React",              price: "Intermediate",              imageSrc: "http://img.b2bpic.net/free-psd/online-study-banner-template_23-2148813631.jpg?_wi=1",              imageAlt: "Advanced JavaScript Course"},
-              name: "Advanced JavaScript & React",
-              price: "Intermediate",
-              imageSrc: "http://img.b2bpic.net/free-psd/online-study-banner-template_23-2148813631.jpg?_wi=1",
-              imageAlt: "Advanced JavaScript Course",
-            },
             {
-              id: "course-3",
+              id: "course-3",              name: "Full Stack Development Masterclass",              price: "Advanced",              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-language-learning-facebook-template_23-2150134743.jpg?_wi=1",              imageAlt: "Full Stack Course"},
-              name: "Full Stack Development Masterclass",
-              price: "Advanced",
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-language-learning-facebook-template_23-2150134743.jpg?_wi=1",
-              imageAlt: "Full Stack Course",
-            },
             {
-              id: "course-4",
+              id: "course-4",              name: "Cloud Architecture & DevOps",              price: "Expert",              imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2151068952.jpg?_wi=1",              imageAlt: "Cloud DevOps Course"},
-              name: "Cloud Architecture & DevOps",
-              price: "Expert",
-              imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2151068952.jpg?_wi=1",
-              imageAlt: "Cloud DevOps Course",
-            },
           ]}
         />
       </div>
@@ -211,33 +208,17 @@ export default function HomePage() {
           carouselMode="buttons"
           features={[
             {
-              id: "feature-1",
+              id: "feature-1",              title: "HD Video Content",              tags: ["1080p", "Downloadable"],
-              title: "HD Video Content",
+              imageSrc: "http://img.b2bpic.net/free-psd/gradient-e-learning-template_23-2149955899.jpg?_wi=2",              imageAlt: "HD Video Quality"},
-              tags: ["1080p", "Downloadable"],
-              imageSrc: "http://img.b2bpic.net/free-psd/gradient-e-learning-template_23-2149955899.jpg?_wi=2",
-              imageAlt: "HD Video Quality",
-            },
             {
-              id: "feature-2",
+              id: "feature-2",              title: "Interactive Lessons",              tags: ["Quizzes", "Exercises"],
-              title: "Interactive Lessons",
+              imageSrc: "http://img.b2bpic.net/free-psd/online-study-banner-template_23-2148813631.jpg?_wi=2",              imageAlt: "Interactive Learning"},
-              tags: ["Quizzes", "Exercises"],
-              imageSrc: "http://img.b2bpic.net/free-psd/online-study-banner-template_23-2148813631.jpg?_wi=2",
-              imageAlt: "Interactive Learning",
-            },
             {
-              id: "feature-3",
+              id: "feature-3",              title: "Live Support",              tags: ["Chat", "Forums"],
-              title: "Live Support",
+              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-language-learning-facebook-template_23-2150134743.jpg?_wi=2",              imageAlt: "Live Support"},
-              tags: ["Chat", "Forums"],
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-language-learning-facebook-template_23-2150134743.jpg?_wi=2",
-              imageAlt: "Live Support",
-            },
             {
-              id: "feature-4",
+              id: "feature-4",              title: "Lifetime Access",              tags: ["Always Available", "Updates"],
-              title: "Lifetime Access",
+              imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2151068952.jpg?_wi=2",              imageAlt: "Lifetime Access"},
-              tags: ["Always Available", "Updates"],
-              imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2151068952.jpg?_wi=2",
-              imageAlt: "Lifetime Access",
-            },
           ]}
         />
       </div>
@@ -256,29 +237,17 @@ export default function HomePage() {
           animationType="slide-up"
           metrics={[
             {
-              id: "metric-1",
+              id: "metric-1",              icon: Users,
-              icon: Users,
+              title: "Active Learners",              value: "50,000+"},
-              title: "Active Learners",
-              value: "50,000+",
-            },
             {
-              id: "metric-2",
+              id: "metric-2",              icon: Video,
-              icon: Video,
+              title: "Video Courses",              value: "500+"},
-              title: "Video Courses",
-              value: "500+",
-            },
             {
-              id: "metric-3",
+              id: "metric-3",              icon: Clock,
-              icon: Clock,
+              title: "Hours of Content",              value: "5,000+"},
-              title: "Hours of Content",
-              value: "5,000+",
-            },
             {
-              id: "metric-4",
+              id: "metric-4",              icon: CheckCircle,
-              icon: CheckCircle,
+              title: "Completions",              value: "100,000+"},
-              title: "Completions",
-              value: "100,000+",
-            },
           ]}
         />
       </div>
@@ -299,47 +268,23 @@ export default function HomePage() {
           topMarqueeDirection="left"
           testimonials={[
             {
-              id: "testimonial-1",
+              id: "testimonial-1",              name: "Sarah Johnson",              handle: "@sarah_learns",              testimonial:
-              name: "Sarah Johnson",
+                "LearnHub transformed my career! The video courses are comprehensive and the instructors are excellent. Highly recommend!"},
-              handle: "@sarah_learns",
-              testimonial:
-                "LearnHub transformed my career! The video courses are comprehensive and the instructors are excellent. Highly recommend!",
-            },
             {
-              id: "testimonial-2",
+              id: "testimonial-2",              name: "Michael Chen",              handle: "@michael_dev",              testimonial:
-              name: "Michael Chen",
+                "The structured learning path and lifetime access make this platform invaluable. I've completed 5 courses already!"},
-              handle: "@michael_dev",
-              testimonial:
-                "The structured learning path and lifetime access make this platform invaluable. I've completed 5 courses already!",
-            },
             {
-              id: "testimonial-3",
+              id: "testimonial-3",              name: "Emily Rodriguez",              handle: "@emily_coder",              testimonial:
-              name: "Emily Rodriguez",
+                "Best investment in my education. The interactive exercises and live support made all the difference in my learning journey."},
-              handle: "@emily_coder",
-              testimonial:
-                "Best investment in my education. The interactive exercises and live support made all the difference in my learning journey.",
-            },
             {
-              id: "testimonial-4",
+              id: "testimonial-4",              name: "David Kim",              handle: "@david_tech",              testimonial:
-              name: "David Kim",
+                "From beginner to confident developer. LearnHub's curriculum is well-designed and the community support is amazing."},
-              handle: "@david_tech",
-              testimonial:
-                "From beginner to confident developer. LearnHub's curriculum is well-designed and the community support is amazing.",
-            },
             {
-              id: "testimonial-5",
+              id: "testimonial-5",              name: "Jessica Martinez",              handle: "@jessica_learns",              testimonial:
-              name: "Jessica Martinez",
+                "Clear explanations, practical projects, and excellent pacing. This is exactly what I needed to level up my skills."},
-              handle: "@jessica_learns",
-              testimonial:
-                "Clear explanations, practical projects, and excellent pacing. This is exactly what I needed to level up my skills.",
-            },
             {
-              id: "testimonial-6",
+              id: "testimonial-6",              name: "Alex Thompson",              handle: "@alex_builder",              testimonial:
-              name: "Alex Thompson",
+                "Affordable, comprehensive, and accessible. LearnHub made quality education available to everyone. Grateful!"},
-              handle: "@alex_builder",
-              testimonial:
-                "Affordable, comprehensive, and accessible. LearnHub made quality education available to everyone. Grateful!",
-            },
           ]}
         />
       </div>