Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e63e27115d | |||
| edf2e592f1 | |||
| 3e1c174728 | |||
| 5acbb8d202 | |||
| 737d98f05a |
196
src/app/page.tsx
196
src/app/page.tsx
@@ -11,9 +11,33 @@ import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwe
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Lock, BookOpen, TrendingUp, Play, Compass, Award, Film, Star, Users, Video, Clock, CheckCircle, MessageCircle } from "lucide-react";
|
||||
import { Lock, BookOpen, TrendingUp, Play, Compass, Award, Film, Star, Users, Video, Clock, CheckCircle, MessageCircle, Mail, Key } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
const handleAuthSubmit = (formData: { email: string; licenseKey: string }) => {
|
||||
const { email, licenseKey } = formData;
|
||||
|
||||
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 +46,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{ label: "Courses", href: "/courses" },
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "Pricing", href: "/" },
|
||||
@@ -31,8 +54,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "/" },
|
||||
@@ -40,8 +62,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
{ label: "License Agreement", href: "/" },
|
||||
@@ -49,8 +70,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "GitHub", href: "https://github.com" },
|
||||
@@ -79,7 +99,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,7 +115,7 @@ 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" }}
|
||||
@@ -104,6 +124,8 @@ export default function HomePage() {
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Verify & Login"
|
||||
termsText="By logging in, you agree to our Terms of Service and Privacy Policy."
|
||||
onSubmit={(email: string) => handleAuthSubmit({ email, licenseKey: "" })}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AzUvBJHYEr3AqzmTLZpq3pxNrk/uploaded-1773618759773-xfkydkak.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -121,24 +143,16 @@ export default function HomePage() {
|
||||
buttonAnimation="slide-up"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Progress Tracking",
|
||||
description: "Monitor your learning progress in real-time across all courses.",
|
||||
icon: TrendingUp,
|
||||
title: "Progress Tracking", description: "Monitor your learning progress in real-time across all courses.", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
title: "Video Library",
|
||||
description: "Access a comprehensive collection of educational video content.",
|
||||
icon: Play,
|
||||
title: "Video Library", description: "Access a comprehensive collection of educational video content.", icon: Play,
|
||||
},
|
||||
{
|
||||
title: "Personalized Path",
|
||||
description: "Customized learning recommendations based on your interests.",
|
||||
icon: Compass,
|
||||
title: "Personalized Path", description: "Customized learning recommendations based on your interests.", icon: Compass,
|
||||
},
|
||||
{
|
||||
title: "Certificates",
|
||||
description: "Earn certificates upon completion of courses.",
|
||||
icon: Award,
|
||||
title: "Certificates", 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 +179,13 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -211,33 +205,17 @@ export default function HomePage() {
|
||||
carouselMode="buttons"
|
||||
features={[
|
||||
{
|
||||
id: "feature-1",
|
||||
title: "HD Video Content",
|
||||
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-1", title: "HD Video Content", 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",
|
||||
title: "Interactive Lessons",
|
||||
tags: ["Quizzes", "Exercises"],
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/online-study-banner-template_23-2148813631.jpg?_wi=2",
|
||||
imageAlt: "Interactive Learning",
|
||||
},
|
||||
id: "feature-2", title: "Interactive Lessons", 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",
|
||||
title: "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-3", title: "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",
|
||||
title: "Lifetime Access",
|
||||
tags: ["Always Available", "Updates"],
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/education-template-design_23-2151068952.jpg?_wi=2",
|
||||
imageAlt: "Lifetime Access",
|
||||
},
|
||||
id: "feature-4", title: "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 +234,17 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "metric-1",
|
||||
icon: Users,
|
||||
title: "Active Learners",
|
||||
value: "50,000+",
|
||||
},
|
||||
id: "metric-1", icon: Users,
|
||||
title: "Active Learners", value: "50,000+"},
|
||||
{
|
||||
id: "metric-2",
|
||||
icon: Video,
|
||||
title: "Video Courses",
|
||||
value: "500+",
|
||||
},
|
||||
id: "metric-2", icon: Video,
|
||||
title: "Video Courses", value: "500+"},
|
||||
{
|
||||
id: "metric-3",
|
||||
icon: Clock,
|
||||
title: "Hours of Content",
|
||||
value: "5,000+",
|
||||
},
|
||||
id: "metric-3", icon: Clock,
|
||||
title: "Hours of Content", value: "5,000+"},
|
||||
{
|
||||
id: "metric-4",
|
||||
icon: CheckCircle,
|
||||
title: "Completions",
|
||||
value: "100,000+",
|
||||
},
|
||||
id: "metric-4", icon: CheckCircle,
|
||||
title: "Completions", value: "100,000+"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -299,47 +265,23 @@ export default function HomePage() {
|
||||
topMarqueeDirection="left"
|
||||
testimonials={[
|
||||
{
|
||||
id: "testimonial-1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarah_learns",
|
||||
testimonial:
|
||||
"LearnHub transformed my career! The video courses are comprehensive and the instructors are excellent. Highly recommend!",
|
||||
},
|
||||
id: "testimonial-1", name: "Sarah Johnson", handle: "@sarah_learns", testimonial:
|
||||
"LearnHub transformed my career! The video courses are comprehensive and the instructors are excellent. Highly recommend!"},
|
||||
{
|
||||
id: "testimonial-2",
|
||||
name: "Michael Chen",
|
||||
handle: "@michael_dev",
|
||||
testimonial:
|
||||
"The structured learning path and lifetime access make this platform invaluable. I've completed 5 courses already!",
|
||||
},
|
||||
id: "testimonial-2", name: "Michael Chen", handle: "@michael_dev", testimonial:
|
||||
"The structured learning path and lifetime access make this platform invaluable. I've completed 5 courses already!"},
|
||||
{
|
||||
id: "testimonial-3",
|
||||
name: "Emily Rodriguez",
|
||||
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-3", name: "Emily Rodriguez", 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",
|
||||
name: "David Kim",
|
||||
handle: "@david_tech",
|
||||
testimonial:
|
||||
"From beginner to confident developer. LearnHub's curriculum is well-designed and the community support is amazing.",
|
||||
},
|
||||
id: "testimonial-4", name: "David Kim", handle: "@david_tech", testimonial:
|
||||
"From beginner to confident developer. LearnHub's curriculum is well-designed and the community support is amazing."},
|
||||
{
|
||||
id: "testimonial-5",
|
||||
name: "Jessica Martinez",
|
||||
handle: "@jessica_learns",
|
||||
testimonial:
|
||||
"Clear explanations, practical projects, and excellent pacing. This is exactly what I needed to level up my skills.",
|
||||
},
|
||||
id: "testimonial-5", name: "Jessica Martinez", 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",
|
||||
name: "Alex Thompson",
|
||||
handle: "@alex_builder",
|
||||
testimonial:
|
||||
"Affordable, comprehensive, and accessible. LearnHub made quality education available to everyone. Grateful!",
|
||||
},
|
||||
id: "testimonial-6", name: "Alex Thompson", handle: "@alex_builder", testimonial:
|
||||
"Affordable, comprehensive, and accessible. LearnHub made quality education available to everyone. Grateful!"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user