bender/af61a031-8638-42c8-b5e5-a31c1c581cb3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-14 13:59:50 +00:00
parent deeaa9525c
commit fada718360
1 changed files with 162 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

610
src/app/page.tsx
View File

@@ -30,464 +30,178 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Categories",
id: "#hero",
},
{
name: "Careers",
id: "#careers",
},
{
name: "Pricing",
id: "#pricing",
},
{
name: "Support",
id: "#faq",
},
]}
brandName="Udemy Clone"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Categories", id: "#hero" },
{ name: "Careers", id: "#careers" },
{ name: "Pricing", id: "#pricing" },
{ name: "Support", id: "#faq" },
]}
brandName="Udemy Clone"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "gradient-bars",
}}
title="Reimagine your career in the AI era"
description="Future-proof your skills with our Personal Plan. Get access to a variety of fresh content from real-world experts to advance your career."
buttons={[
{
text: "Start Learning",
href: "#",
},
{
text: "Explore AI Courses",
href: "#",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749869.jpg?_wi=1"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/financial-advisor-presents-detailed-stock-market-analysis-clients_482257-107526.jpg",
alt: "Student 1",
},
{
src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",
alt: "Student 2",
},
{
src: "http://img.b2bpic.net/free-photo/diverse-team-analyzing-goods-quality-control-report-tablet_482257-84290.jpg",
alt: "Student 3",
},
{
src: "http://img.b2bpic.net/free-photo/staistics-business-strategy-planning-research-digital-tablet-concept_53876-26413.jpg",
alt: "Student 4",
},
{
src: "http://img.b2bpic.net/free-photo/single-gesture-lifestyle-white-male_1262-2168.jpg",
alt: "Student 5",
},
]}
avatarText="Join 200M+ learners worldwide"
marqueeItems={[
{
type: "text",
text: "AI Prompt Engineering",
},
{
type: "text",
text: "Data Science Fundamentals",
},
{
type: "text",
text: "Cloud Architecture",
},
{
type: "text",
text: "Full Stack Development",
},
{
type: "text",
text: "Digital Strategy",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{ variant: "gradient-bars" }}
title="Reimagine your career in the AI era"
description="Future-proof your skills with our Personal Plan. Get access to a variety of fresh content from real-world experts to advance your career."
buttons={[{ text: "Start Learning", href: "#" }, { text: "Explore AI Courses", href: "#" }]}
imageSrc="http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749869.jpg"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/financial-advisor-presents-detailed-stock-market-analysis-clients_482257-107526.jpg", alt: "Student 1" },
{ src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg", alt: "Student 2" },
{ src: "http://img.b2bpic.net/free-photo/diverse-team-analyzing-goods-quality-control-report-tablet_482257-84290.jpg", alt: "Student 3" },
{ src: "http://img.b2bpic.net/free-photo/staistics-business-strategy-planning-research-digital-tablet-concept_53876-26413.jpg", alt: "Student 4" },
{ src: "http://img.b2bpic.net/free-photo/single-gesture-lifestyle-white-male_1262-2168.jpg", alt: "Student 5" },
]}
avatarText="Join 200M+ learners worldwide"
marqueeItems={[{ type: "text", text: "AI Prompt Engineering" }, { type: "text", text: "Data Science Fundamentals" }, { type: "text", text: "Cloud Architecture" }, { type: "text", text: "Full Stack Development" }, { type: "text", text: "Digital Strategy" }]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Skills to transform your career and life"
description="From critical skills to technical topics, we support your professional development with in-demand content."
metrics={[
{
value: "17K+",
title: "Companies Trust",
},
{
value: "200M+",
title: "Learners World-Wide",
},
{
value: "50K+",
title: "Expert Instructors",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-taking-notes-high-angle_23-2149455518.jpg?_wi=1"
mediaAnimation="blur-reveal"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Skills to transform your career and life"
description="From critical skills to technical topics, we support your professional development with in-demand content."
metrics={[{ value: "17K+", title: "Companies Trust" }, { value: "200M+", title: "Learners World-Wide" }, { value: "50K+", title: "Expert Instructors" }]}
imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-taking-notes-high-angle_23-2149455518.jpg"
mediaAnimation="blur-reveal"
metricsAnimation="slide-up"
/>
</div>
<div id="featured" data-section="featured">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Development",
description: "Master Python, Web Dev, and Data Science.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/gamer-sitting-gaming-chair-battling-flying-robots-with-futuristic-gun-singleplayer-shooter_482257-116204.jpg",
},
items: [
{
icon: Code,
text: "Full Stack Mastery",
},
{
icon: Terminal,
text: "Python Certification",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749869.jpg?_wi=2",
imageAlt: "software engineer professional workspace",
},
{
title: "Business",
description: "PMP, Leadership, and Management essentials.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/man-pointing-important-papers-cork-board_329181-15333.jpg",
},
items: [
{
icon: Briefcase,
text: "PMP Training",
},
{
icon: BarChart,
text: "Data Analysis",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-taking-notes-high-angle_23-2149455518.jpg?_wi=2",
imageAlt: "software engineer professional workspace",
},
{
title: "Design",
description: "Graphic design, AutoCAD, and creative arts.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/empty-space-with-maquette-table-design-urban-property-plan-building-model-layout-nobody-office-with-architecture-project-real-estate-development-presentation_482257-29970.jpg",
},
items: [
{
icon: Palette,
text: "Graphic Design",
},
{
icon: Layout,
text: "UI/UX Foundations",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/employee-working-project-planning-with-files-data-charts-computer-startup-office-business-woman-using-papers-design-strategy-management-leadership-job-development_482257-32268.jpg?_wi=1",
imageAlt: "software engineer professional workspace",
},
]}
title="Popular Skills & Trends"
description="Top-tier content across development, business, and design."
/>
</div>
<div id="featured" data-section="featured">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Development", description: "Master Python, Web Dev, and Data Science.", media: { imageSrc: "http://img.b2bpic.net/free-photo/gamer-sitting-gaming-chair-battling-flying-robots-with-futuristic-gun-singleplayer-shooter_482257-116204.jpg", imageAlt: "software engineer professional workspace" },
items: [{ icon: Code, text: "Full Stack Mastery" }, { icon: Terminal, text: "Python Certification" }],
reverse: false
},
{
title: "Business", description: "PMP, Leadership, and Management essentials.", media: { imageSrc: "http://img.b2bpic.net/free-photo/man-pointing-important-papers-cork-board_329181-15333.jpg", imageAlt: "software engineer professional workspace" },
items: [{ icon: Briefcase, text: "PMP Training" }, { icon: BarChart, text: "Data Analysis" }],
reverse: true
},
{
title: "Design", description: "Graphic design, AutoCAD, and creative arts.", media: { imageSrc: "http://img.b2bpic.net/free-photo/empty-space-with-maquette-table-design-urban-property-plan-building-model-layout-nobody-office-with-architecture-project-real-estate-development-presentation_482257-29970.jpg", imageAlt: "software engineer professional workspace" },
items: [{ icon: Palette, text: "Graphic Design" }, { icon: Layout, text: "UI/UX Foundations" }],
reverse: false
}
]}
title="Popular Skills & Trends"
description="Top-tier content across development, business, and design."
/>
</div>
<div id="careers" data-section="careers">
<ProductCardOne
animationType="scale-rotate"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
products={[
{
id: "1",
name: "Cloud Engineer",
price: "$129,937",
imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-scientist-uses-pc-update-servers-tech_482257-126364.jpg",
},
{
id: "2",
name: "Data Scientist",
price: "$126,629",
imageSrc: "http://img.b2bpic.net/free-photo/employee-working-project-planning-with-files-data-charts-computer-startup-office-business-woman-using-papers-design-strategy-management-leadership-job-development_482257-32268.jpg?_wi=2",
},
{
id: "3",
name: "Digital Marketer",
price: "$61,126",
imageSrc: "http://img.b2bpic.net/free-photo/employee-drinking-coffee-holding-laptop-working-strategy_482257-78092.jpg",
},
{
id: "4",
name: "Project Manager",
price: "$98,000",
imageSrc: "http://img.b2bpic.net/free-photo/work-office-doesn-t-have-boring_329181-10357.jpg",
},
{
id: "5",
name: "Game Developer",
price: "$92,000",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-has-two-tickets-passport-goes-online-laptop-booking-hotel-planning-his-holiday-sitting-living-room_1258-314651.jpg",
},
{
id: "6",
name: "UI/UX Designer",
price: "$85,000",
imageSrc: "http://img.b2bpic.net/free-photo/creative-agency-production-department-team-leader-developing-professional-game-technology-3d-digital-artist-sitting-computer-desk-while-working-environmental-design_482257-42927.jpg",
},
]}
title="Explore In-Demand Careers"
description="Step into your dream role with our career-focused learning paths."
/>
</div>
<div id="careers" data-section="careers">
<ProductCardOne
animationType="scale-rotate"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
products={[
{ id: "1", name: "Cloud Engineer", price: "$129,937", imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-scientist-uses-pc-update-servers-tech_482257-126364.jpg" },
{ id: "2", name: "Data Scientist", price: "$126,629", imageSrc: "http://img.b2bpic.net/free-photo/employee-working-project-planning-with-files-data-charts-computer-startup-office-business-woman-using-papers-design-strategy-management-leadership-job-development_482257-32268.jpg" },
{ id: "3", name: "Digital Marketer", price: "$61,126", imageSrc: "http://img.b2bpic.net/free-photo/employee-drinking-coffee-holding-laptop-working-strategy_482257-78092.jpg" },
{ id: "4", name: "Project Manager", price: "$98,000", imageSrc: "http://img.b2bpic.net/free-photo/work-office-doesn-t-have-boring_329181-10357.jpg" },
{ id: "5", name: "Game Developer", price: "$92,000", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-has-two-tickets-passport-goes-online-laptop-booking-hotel-planning-his-holiday-sitting-living-room_1258-314651.jpg" },
{ id: "6", name: "UI/UX Designer", price: "$85,000", imageSrc: "http://img.b2bpic.net/free-photo/creative-agency-production-department-team-leader-developing-professional-game-technology-3d-digital-artist-sitting-computer-desk-while-working-environmental-design_482257-42927.jpg" }
]}
title="Explore In-Demand Careers"
description="Step into your dream role with our career-focused learning paths."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "personal",
badge: "Popular",
price: "$14.00/mo",
name: "Personal Plan",
buttons: [
{
text: "Subscribe Now",
href: "#",
},
],
features: [
"Access to top courses",
"AI coaching",
"Fresh content daily",
],
},
{
id: "team",
price: "$29.00/mo",
name: "Team Plan",
buttons: [
{
text: "Contact Sales",
href: "#",
},
],
features: [
"Collaboration tools",
"Team reporting",
"Skill analytics",
],
},
{
id: "enterprise",
price: "Custom",
name: "Enterprise",
buttons: [
{
text: "Request Demo",
href: "#",
},
],
features: [
"Dedicated support",
"SSO integration",
"Custom roadmap",
],
},
]}
title="Choose your plan"
description="Start today and get ahead before everyone else."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "personal", badge: "Popular", price: "$14.00/mo", name: "Personal Plan", buttons: [{ text: "Subscribe Now", href: "#" }], features: ["Access to top courses", "AI coaching", "Fresh content daily"] },
{ id: "team", price: "$29.00/mo", name: "Team Plan", buttons: [{ text: "Contact Sales", href: "#" }], features: ["Collaboration tools", "Team reporting", "Skill analytics"] },
{ id: "enterprise", price: "Custom", name: "Enterprise", buttons: [{ text: "Request Demo", href: "#" }], features: ["Dedicated support", "SSO integration", "Custom roadmap"] }
]}
title="Choose your plan"
description="Start today and get ahead before everyone else."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"Microsoft",
"Google",
"Amazon",
"Volkswagen",
"Samsung",
"Cisco",
"Volkswagen",
]}
title="Trusted by 17,000+ companies"
description="Join others transforming their lives through learning."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={["Microsoft", "Google", "Amazon", "Volkswagen", "Samsung", "Cisco", "Volkswagen"]}
title="Trusted by 17,000+ companies"
description="Join others transforming their lives through learning."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Cris M.",
role: "Graduate",
company: "Google",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-lady-blinking-camera-academic-dress-looking-confident_176474-82319.jpg",
},
{
id: "2",
name: "Alvin Lim",
role: "CTO",
company: "Dimensional",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119894.jpg",
},
{
id: "3",
name: "Sarah W.",
role: "Marketing",
company: "GrowthCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/education-diploma-certificate-laptop_23-2148769648.jpg",
},
{
id: "4",
name: "David K.",
role: "Product",
company: "StartUp",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-successful-businessman-standing-restaurant-with-crossed-arm_23-2147955259.jpg",
},
{
id: "5",
name: "Emily J.",
role: "Designer",
company: "CreativeLab",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_23-2150379215.jpg",
},
]}
title="Join others transforming lives"
description="Learners around the world are elevating their careers daily."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Cris M.", role: "Graduate", company: "Google", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-lady-blinking-camera-academic-dress-looking-confident_176474-82319.jpg" },
{ id: "2", name: "Alvin Lim", role: "CTO", company: "Dimensional", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119894.jpg" },
{ id: "3", name: "Sarah W.", role: "Marketing", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/education-diploma-certificate-laptop_23-2148769648.jpg" },
{ id: "4", name: "David K.", role: "Product", company: "StartUp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-successful-businessman-standing-restaurant-with-crossed-arm_23-2147955259.jpg" },
{ id: "5", name: "Emily J.", role: "Designer", company: "CreativeLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_23-2150379215.jpg" }
]}
title="Join others transforming lives"
description="Learners around the world are elevating their careers daily."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "1",
title: "How does personal plan work?",
content: "You get unlimited access to a library of top-rated courses.",
},
{
id: "2",
title: "Can I get certified?",
content: "Yes, complete projects and prep for certifications with our tools.",
},
{
id: "3",
title: "Is AI coaching available?",
content: "Yes, our new AI assistant helps you practice roles.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/helpline-operator-troubleshooting-errors-solar-production-systems_482257-125765.jpg"
title="Common Questions"
description="Find answers to your questions about getting started."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{ id: "1", title: "How does personal plan work?", content: "You get unlimited access to a library of top-rated courses." },
{ id: "2", title: "Can I get certified?", content: "Yes, complete projects and prep for certifications with our tools." },
{ id: "3", title: "Is AI coaching available?", content: "Yes, our new AI assistant helps you practice roles." }
]}
imageSrc="http://img.b2bpic.net/free-photo/helpline-operator-troubleshooting-errors-solar-production-systems_482257-125765.jpg"
title="Common Questions"
description="Find answers to your questions about getting started."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Stay Updated"
title="Ready to reimagine your career?"
description="Sign up for updates on fresh content and career guides."
inputPlaceholder="Enter your professional email"
buttonText="Join Now"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Stay Updated"
title="Ready to reimagine your career?"
description="Sign up for updates on fresh content and career guides."
inputPlaceholder="Enter your professional email"
buttonText="Join Now"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-vector/minimal-gold-badge-collection_53876-67147.jpg"
logoText="Udemy Clone"
columns={[
{
title: "Platform",
items: [
{
label: "Udemy Business",
href: "#",
},
{
label: "Teach on Udemy",
href: "#",
},
],
},
{
title: "About",
items: [
{
label: "Careers",
href: "#",
},
{
label: "Blog",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Help Center",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-vector/minimal-gold-badge-collection_53876-67147.jpg"
logoText="Udemy Clone"
columns={[
{ title: "Platform", items: [{ label: "Udemy Business", href: "#" }, { label: "Teach on Udemy", href: "#" }] },
{ title: "About", items: [{ label: "Careers", href: "#" }, { label: "Blog", href: "#" }] },
{ title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Terms", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);