Merge version_1 into main #1
352
src/app/page.tsx
352
src/app/page.tsx
@@ -16,254 +16,126 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
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">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="PythonArc"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="PythonArc"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Master Python Today"
|
||||
description="Unlock your potential with industry-standard Python courses. From syntax foundations to advanced data analysis, we guide you every step of the way."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Learning",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "View Curriculum",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/modern-python-code-editor-view-with-dark-1774601372399-c04c6cf5.png",
|
||||
imageAlt: "Python coding environment",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/data-analytics-dashboard-with-clean-char-1774601372017-68e260b2.png",
|
||||
imageAlt: "Data analytics dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/collaborative-developer-workspace-modern-1774601371504-f6d2d420.png",
|
||||
imageAlt: "Developer team collaborating",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Master Python Today"
|
||||
description="Unlock your potential with industry-standard Python courses. From syntax foundations to advanced data analysis, we guide you every step of the way."
|
||||
buttons={[
|
||||
{ text: "Start Learning", href: "#features" },
|
||||
{ text: "View Curriculum", href: "#features" }
|
||||
]}
|
||||
slides={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/modern-python-code-editor-view-with-dark-1774601372399-c04c6cf5.png", imageAlt: "Python coding environment" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/data-analytics-dashboard-with-clean-char-1774601372017-68e260b2.png", imageAlt: "Data analytics dashboard" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/collaborative-developer-workspace-modern-1774601371504-f6d2d420.png", imageAlt: "Developer team collaborating" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Interactive Lessons",
|
||||
description: "Learn by doing with our embedded code editor.",
|
||||
tag: "Practice",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/interactive-learning-interface-showing-c-1774601374620-f7d807ae.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Industry Certification",
|
||||
description: "Boost your resume with our recognized certificates.",
|
||||
tag: "Certification",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/modern-digital-certificate-layout-clean--1774601369972-be1cadbd.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Career Support",
|
||||
description: "Get guidance from senior engineers.",
|
||||
tag: "Mentorship",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/mentorship-session-interface-showing-vid-1774601370135-7c04ebe3.png",
|
||||
},
|
||||
]}
|
||||
title="Why Learn with Us"
|
||||
description="Our curriculum is designed by industry experts to help you build real-world software applications."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "1", title: "Interactive Lessons", description: "Learn by doing with our embedded code editor.", tag: "Practice", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/interactive-learning-interface-showing-c-1774601374620-f7d807ae.png" },
|
||||
{ id: "2", title: "Industry Certification", description: "Boost your resume with our recognized certificates.", tag: "Certification", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/modern-digital-certificate-layout-clean--1774601369972-be1cadbd.png" },
|
||||
{ id: "3", title: "Career Support", description: "Get guidance from senior engineers.", tag: "Mentorship", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/mentorship-session-interface-showing-vid-1774601370135-7c04ebe3.png" }
|
||||
]}
|
||||
title="Why Learn with Us"
|
||||
description="Our curriculum is designed by industry experts to help you build real-world software applications."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15K+",
|
||||
description: "Active Students",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "98%",
|
||||
description: "Employment Rate",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "500+",
|
||||
description: "Curated Projects",
|
||||
},
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Empowering thousands of developers worldwide."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15K+", description: "Active Students" },
|
||||
{ id: "m2", value: "98%", description: "Employment Rate" },
|
||||
{ id: "m3", value: "500+", description: "Curated Projects" }
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Empowering thousands of developers worldwide."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Software Engineer",
|
||||
company: "TechInnovate",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-female-professional-smilin-1774601370974-9f151f9a.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Chen",
|
||||
role: "Data Scientist",
|
||||
company: "DataHub",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-young-male-data-analyst-in-1774601373570-40214b37.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Watson",
|
||||
role: "Back-end Dev",
|
||||
company: "CodeFlow",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-woman-developer-working-on-1774601369275-39dfb81e.png",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Michael Ross",
|
||||
role: "Full-stack Dev",
|
||||
company: "WebWorks",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-male-developer-smiling-hig-1774601374388-a34e5628.png",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Average Rating",
|
||||
},
|
||||
{
|
||||
value: "120+",
|
||||
label: "Partners",
|
||||
},
|
||||
{
|
||||
value: "100K",
|
||||
label: "Code Commits",
|
||||
},
|
||||
]}
|
||||
title="Student Stories"
|
||||
description="Hear from those who transformed their careers."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="blur-reveal"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "Software Engineer", company: "TechInnovate", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-female-professional-smilin-1774601370974-9f151f9a.png" },
|
||||
{ id: "2", name: "David Chen", role: "Data Scientist", company: "DataHub", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-young-male-data-analyst-in-1774601373570-40214b37.png" },
|
||||
{ id: "3", name: "Emily Watson", role: "Back-end Dev", company: "CodeFlow", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-woman-developer-working-on-1774601369275-39dfb81e.png" },
|
||||
{ id: "4", name: "Michael Ross", role: "Full-stack Dev", company: "WebWorks", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWOOUVyghAerF126vaCWwltIAk/portrait-of-a-male-developer-smiling-hig-1774601374388-a34e5628.png" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "4.9/5", label: "Average Rating" },
|
||||
{ value: "120+", label: "Partners" },
|
||||
{ value: "100K", label: "Code Commits" }
|
||||
]}
|
||||
title="Student Stories"
|
||||
description="Hear from those who transformed their careers."
|
||||
/>
|
||||
</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 start from absolute basics.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How long is the program?",
|
||||
content: "The program is self-paced and averages 6 months.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Is there support?",
|
||||
content: "Yes, our mentors are available via Slack 24/7.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Get answers to common questions about our platform."
|
||||
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 start from absolute basics." },
|
||||
{ id: "f2", title: "How long is the program?", content: "The program is self-paced and averages 6 months." },
|
||||
{ id: "f3", title: "Is there support?", content: "Yes, our mentors are available via Slack 24/7." }
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Get answers to common questions about our platform."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Metrics",
|
||||
href: "#metrics",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 PythonArc Inc."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Metrics", href: "#metrics" }]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [{ label: "Careers", href: "#" }, { label: "Blog", href: "#" }]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [{ label: "Contact", href: "#" }, { label: "Help Center", href: "#" }]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 PythonArc Inc."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user