Merge version_1 into main #2
487
src/app/page.tsx
487
src/app/page.tsx
@@ -19,354 +19,167 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Courses",
|
||||
id: "#courses",
|
||||
},
|
||||
{
|
||||
name: "Mentors",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="CodeStart"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Courses", id: "#courses" },
|
||||
{ name: "Mentors", id: "#team" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="CodeStart"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
logoText="CodeStart"
|
||||
description="Empowering students to launch their IT careers through mentorship and project-based learning. Learn Python, HTML, and JavaScript with ease."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Learning",
|
||||
href: "#courses",
|
||||
},
|
||||
{
|
||||
text: "See Our Mentors",
|
||||
href: "#team",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/concentrated-blonde-group-young-people-casual-clothes-working-modern-office_146671-16500.jpg?_wi=1"
|
||||
imageAlt="student coding laptop"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
logoText="CodeStart"
|
||||
description="Empowering students to launch their IT careers through mentorship and project-based learning. Learn Python, HTML, and JavaScript with ease."
|
||||
buttons={[
|
||||
{ text: "Start Learning", href: "#courses" },
|
||||
{ text: "See Our Mentors", href: "#team" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/concentrated-blonde-group-young-people-casual-clothes-working-modern-office_146671-16500.jpg"
|
||||
imageAlt="student coding laptop"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Mission: ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/people-coworking-concept-mixed-race-youngsters-work-school-project_273609-44839.jpg",
|
||||
alt: "mentor and student coding",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Making IT careers accessible to every student.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Our Mission: " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/people-coworking-concept-mixed-race-youngsters-work-school-project_273609-44839.jpg", alt: "mentor and student coding" },
|
||||
{ type: "text", content: " Making IT careers accessible to every student." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No stressful academic pressure",
|
||||
"No outdated learning materials",
|
||||
"No feeling lost during exercises",
|
||||
"No one-size-fits-all approach",
|
||||
"No hidden subscription fees",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Personalized 1-on-1 mentor support",
|
||||
"Hands-on project-based curriculum",
|
||||
"Industry-relevant skill training",
|
||||
"Community networking opportunities",
|
||||
"Portfolio building exercises",
|
||||
],
|
||||
}}
|
||||
title="Why Choose CodeStart?"
|
||||
description="We bridge the gap between classroom theory and industry-ready projects."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No stressful academic pressure", "No outdated learning materials", "No feeling lost during exercises", "No one-size-fits-all approach", "No hidden subscription fees"
|
||||
]
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Personalized 1-on-1 mentor support", "Hands-on project-based curriculum", "Industry-relevant skill training", "Community networking opportunities", "Portfolio building exercises"
|
||||
]
|
||||
}}
|
||||
title="Why Choose CodeStart?"
|
||||
description="We bridge the gap between classroom theory and industry-ready projects."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="courses" data-section="courses">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Python Fundamentals",
|
||||
price: "$99",
|
||||
variant: "Course",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18938.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "HTML & CSS Basics",
|
||||
price: "$79",
|
||||
variant: "Course",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-graphic-designer-vertical-business-card_23-2150814184.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "JavaScript Pro",
|
||||
price: "$129",
|
||||
variant: "Course",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/software-programming-web-development-concept_53876-176752.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "First Website Project",
|
||||
price: "$149",
|
||||
variant: "Workshop",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mockup-object-imitate-model-replica-design-reproduce-concept_53876-134069.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "First App Development",
|
||||
price: "$199",
|
||||
variant: "Workshop",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-holding-smartphone_23-2148389008.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Student Internship Program",
|
||||
price: "FREE",
|
||||
variant: "Mentorship",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/call-center-onboarding-specialist-providing-training-new-agent-recruit_482257-125824.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Programs"
|
||||
description="Start your journey today with our curated tracks."
|
||||
/>
|
||||
</div>
|
||||
<div id="courses" data-section="courses">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Python Fundamentals", price: "$99", variant: "Course", imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18938.jpg" },
|
||||
{ id: "p2", name: "HTML & CSS Basics", price: "$79", variant: "Course", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-graphic-designer-vertical-business-card_23-2150814184.jpg" },
|
||||
{ id: "p3", name: "JavaScript Pro", price: "$129", variant: "Course", imageSrc: "http://img.b2bpic.net/free-photo/software-programming-web-development-concept_53876-176752.jpg" }
|
||||
]}
|
||||
title="Our Programs"
|
||||
description="Start your journey today with our curated tracks."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "g1",
|
||||
groupTitle: "Lead Mentors",
|
||||
members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "Alex Rivers",
|
||||
subtitle: "Software Engineer",
|
||||
detail: "Expert in Python with 5 years of industry experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Sarah Chen",
|
||||
subtitle: "Web Developer",
|
||||
detail: "Frontend guru who helped 50+ students land jobs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Jordan Lee",
|
||||
subtitle: "Mobile Specialist",
|
||||
detail: "Passionate about teaching and mobile UX design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/concentrated-blonde-group-young-people-casual-clothes-working-modern-office_146671-16500.jpg?_wi=2",
|
||||
imageAlt: "mentor portrait",
|
||||
},
|
||||
]}
|
||||
title="Our Mentors"
|
||||
description="Experienced professionals dedicated to your student success."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "g1", groupTitle: "Lead Mentors", members: [
|
||||
{ id: "m1", title: "Alex Rivers", subtitle: "Software Engineer", detail: "Expert in Python with 5 years of industry experience.", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg" },
|
||||
{ id: "m2", title: "Sarah Chen", subtitle: "Web Developer", detail: "Frontend guru who helped 50+ students land jobs.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg" },
|
||||
{ id: "m3", title: "Jordan Lee", subtitle: "Mobile Specialist", detail: "Passionate about teaching and mobile UX design.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Our Mentors"
|
||||
description="Experienced professionals dedicated to your student success."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "John Doe",
|
||||
handle: "@johndoe",
|
||||
testimonial: "CodeStart helped me build my very first website in just two weeks!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/student-online-cute-guy-checked-shirt-with-glasses-studying-computer-happy-excited_140725-164461.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Alice Smith",
|
||||
handle: "@alicesmith",
|
||||
testimonial: "The mentor I was paired with made Python so easy to understand.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/inspired-designer_1098-13353.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mark Wilson",
|
||||
handle: "@markw",
|
||||
testimonial: "The internship program was the highlight of my learning journey.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-positive-african-american-college-student-with-cheerful-cute-smile-using-wireless-internet-connection-laptop-computer-coffee-shop-while-looking-information-online-research-project_273609-7476.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Elena Rodriguez",
|
||||
handle: "@elena_r",
|
||||
testimonial: "I never thought I could code an app, but here I am with my first project!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/student-stretching-while-doing-homework_23-2147669065.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Kevin Zhang",
|
||||
handle: "@kzhang",
|
||||
testimonial: "Highly recommend to any student looking to break into IT.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-female-graphic-designers-using-digital-tablet_1170-1029.jpg",
|
||||
},
|
||||
]}
|
||||
title="Success Stories"
|
||||
description="See how CodeStart has transformed the careers of students just like you."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "John Doe", handle: "@johndoe", testimonial: "CodeStart helped me build my very first website in just two weeks!", imageSrc: "http://img.b2bpic.net/free-photo/student-online-cute-guy-checked-shirt-with-glasses-studying-computer-happy-excited_140725-164461.jpg" },
|
||||
{ id: "t2", name: "Alice Smith", handle: "@alicesmith", testimonial: "The mentor I was paired with made Python so easy to understand.", imageSrc: "http://img.b2bpic.net/free-photo/inspired-designer_1098-13353.jpg" }
|
||||
]}
|
||||
title="Success Stories"
|
||||
description="See how CodeStart has transformed the careers of students just like you."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need prior experience?",
|
||||
content: "No, our courses are designed for complete beginners.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How does mentorship work?",
|
||||
content: "You are paired with a mentor who reviews your code and helps with obstacles.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are courses online?",
|
||||
content: "Yes, all our courses and meetings are held online.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "What tools do I need?",
|
||||
content: "A stable internet connection and a laptop or desktop computer.",
|
||||
},
|
||||
{
|
||||
id: "f5",
|
||||
title: "Can I get a certificate?",
|
||||
content: "Yes, you receive a digital certificate upon course completion.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Here is what you need to know about our courses and mentorship."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do I need prior experience?", content: "No, our courses are designed for complete beginners." },
|
||||
{ id: "f2", title: "How does mentorship work?", content: "You are paired with a mentor who reviews your code and helps with obstacles." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Here is what you need to know about our courses and mentorship."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get Started"
|
||||
title="Launch Your IT Career"
|
||||
description="Sign up for our newsletter to get tips and information on new internships."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get Started"
|
||||
title="Launch Your IT Career"
|
||||
description="Sign up for our newsletter to get tips and information on new internships."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-shot-code-editor-using-react-js_181624-61842.jpg"
|
||||
logoText="CodeStart"
|
||||
columns={[
|
||||
{
|
||||
title: "Learn",
|
||||
items: [
|
||||
{
|
||||
label: "Python",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "JavaScript",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "HTML",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "CSS",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Web Development",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Mentorship",
|
||||
href: "#team",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-shot-code-editor-using-react-js_181624-61842.jpg"
|
||||
logoText="CodeStart"
|
||||
columns={[
|
||||
{
|
||||
title: "Learn", items: [
|
||||
{ label: "Python", href: "#" },
|
||||
{ label: "JavaScript", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user