Update src/app/page.tsx
This commit is contained in:
368
src/app/page.tsx
368
src/app/page.tsx
@@ -29,263 +29,135 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "How it Works",
|
||||
id: "how-it-works",
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "skills",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="STEMAZ"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "How it Works", id: "how-it-works" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="STEMAZ"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
title="Build. Measure. Improve."
|
||||
description="The ultimate platform for applied STEM education, empowering students to solve real-world challenges through a unique 5D skill system."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start a Challenge",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-child-making-diy-project-from-upcycled-materials_23-2149391061.jpg",
|
||||
imageAlt: "student tablet robotics education",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-analyzing-data-charts-files-computer-plan-financial-project-business-woman-wokring-with-documents-design-marketing-strategy-company-development_482257-33674.jpg",
|
||||
imageAlt: "coding student dashboard",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coworkers-office-with-architecture-plans-computer_329181-12372.jpg",
|
||||
imageAlt: "teamwork engineering project",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trigonometry-algebra-equation-knowledge-learn-concept_53876-123006.jpg",
|
||||
imageAlt: "radar chart skill assessment",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-sliders-collection_23-2150173999.jpg",
|
||||
imageAlt: "student progress bar UI",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/international-day-education-futuristic-style_23-2150998697.jpg",
|
||||
imageAlt: "global STEM education community",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Build. Measure. Improve."
|
||||
description="The ultimate platform for applied STEM education, empowering students to solve real-world challenges through a unique 5D skill system."
|
||||
buttons={[{ text: "Start a Challenge", href: "#contact" }]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/young-child-making-diy-project-from-upcycled-materials_23-2149391061.jpg", imageAlt: "student tablet robotics education" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-analyzing-data-charts-files-computer-plan-financial-project-business-woman-wokring-with-documents-design-marketing-strategy-company-development_482257-33674.jpg", imageAlt: "coding student dashboard" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/coworkers-office-with-architecture-plans-computer_329181-12372.jpg", imageAlt: "teamwork engineering project" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/trigonometry-algebra-equation-knowledge-learn-concept_53876-123006.jpg", imageAlt: "radar chart skill assessment" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-vector/gradient-sliders-collection_23-2150173999.jpg", imageAlt: "student progress bar UI" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/international-day-education-futuristic-style_23-2150998697.jpg", imageAlt: "global STEM education community" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About STEMAZ"
|
||||
title="Transforming Education Through Challenges"
|
||||
description="STEMAZ bridges the gap between theoretical classroom learning and practical problem-solving. We provide the tools for schools and teachers to inspire the next generation of engineers and innovators."
|
||||
subdescription="Our mission is to help every student track their growth using a data-driven approach to holistic skill development."
|
||||
icon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-scientist-observing-girls-experimenting-with-chemistry_23-2148571320.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="student problem solving"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About STEMAZ"
|
||||
title="Transforming Education Through Challenges"
|
||||
description="STEMAZ bridges the gap between theoretical classroom learning and practical problem-solving. We provide the tools for schools and teachers to inspire the next generation of engineers and innovators."
|
||||
subdescription="Our mission is to help every student track their growth using a data-driven approach to holistic skill development."
|
||||
icon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-scientist-observing-girls-experimenting-with-chemistry_23-2148571320.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="student problem solving"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Define Challenge",
|
||||
description: "Educators create customized challenges mapped to real-world problems.",
|
||||
tag: "Create",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-tulips-clipboard-light-table_23-2148100653.jpg",
|
||||
imageAlt: "teamwork lab environment",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Submit Project",
|
||||
description: "Students build solutions in teams and submit their work for review.",
|
||||
tag: "Build",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-digital-tablet-meeting_1098-487.jpg",
|
||||
imageAlt: "data metrics tracking icon",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "5D Evaluation",
|
||||
description: "Assess skills across Engineering, Creativity, Management, Enterprise, and Communication.",
|
||||
tag: "Evaluate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/innovation-development-rocket-graphic-concept_53876-120019.jpg",
|
||||
imageAlt: "skills assessment 5D chart",
|
||||
},
|
||||
]}
|
||||
title="The STEMAZ Workflow"
|
||||
description="A seamless pipeline designed for efficiency and engagement."
|
||||
/>
|
||||
</div>
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Define Challenge", description: "Educators create customized challenges mapped to real-world problems.", tag: "Create", imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-tulips-clipboard-light-table_23-2148100653.jpg", imageAlt: "teamwork lab environment" },
|
||||
{ id: "f2", title: "Submit Project", description: "Students build solutions in teams and submit their work for review.", tag: "Build", imageSrc: "http://img.b2bpic.net/free-photo/close-up-digital-tablet-meeting_1098-487.jpg", imageAlt: "data metrics tracking icon" },
|
||||
{ id: "f3", title: "5D Evaluation", description: "Assess skills across Engineering, Creativity, Management, Enterprise, and Communication.", tag: "Evaluate", imageSrc: "http://img.b2bpic.net/free-photo/innovation-development-rocket-graphic-concept_53876-120019.jpg", imageAlt: "skills assessment 5D chart" }
|
||||
]}
|
||||
title="The STEMAZ Workflow"
|
||||
description="A seamless pipeline designed for efficiency and engagement."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "5",
|
||||
title: "Core Dimensions",
|
||||
items: [
|
||||
"Engineering",
|
||||
"Creativity",
|
||||
"Management",
|
||||
"Enterprise",
|
||||
"Communication",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="The 5D Skill Model"
|
||||
description="Move beyond traditional grading with our comprehensive radar-chart approach to measuring success."
|
||||
/>
|
||||
</div>
|
||||
<div id="skills" data-section="skills">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "5", title: "Core Dimensions", items: ["Engineering", "Creativity", "Management", "Enterprise", "Communication"] }
|
||||
]}
|
||||
title="The 5D Skill Model"
|
||||
description="Move beyond traditional grading with our comprehensive radar-chart approach to measuring success."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="audience" data-section="audience">
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "For Schools",
|
||||
price: "Management",
|
||||
variant: "Institution-wide",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-through-microscope-teacher-standing-nearby_259150-60326.jpg",
|
||||
imageAlt: "student tablet robotics education",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "For Teachers",
|
||||
price: "Operations",
|
||||
variant: "Classroom control",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-holding-laptop-while-wearing-virtual-reality-headset_23-2148556177.jpg",
|
||||
imageAlt: "coding student dashboard",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "For Students",
|
||||
price: "Growth",
|
||||
variant: "Personal profile",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950196.jpg",
|
||||
imageAlt: "teamwork engineering project",
|
||||
},
|
||||
]}
|
||||
title="Who STEMAZ Serves"
|
||||
description="Tailored solutions for every member of the education ecosystem."
|
||||
/>
|
||||
</div>
|
||||
<div id="audience" data-section="audience">
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{ id: "p1", name: "For Schools", price: "Management", variant: "Institution-wide", imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-through-microscope-teacher-standing-nearby_259150-60326.jpg", imageAlt: "student tablet robotics education" },
|
||||
{ id: "p2", name: "For Teachers", price: "Operations", variant: "Classroom control", imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-holding-laptop-while-wearing-virtual-reality-headset_23-2148556177.jpg", imageAlt: "coding student dashboard" },
|
||||
{ id: "p3", name: "For Students", price: "Growth", variant: "Personal profile", imageSrc: "http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950196.jpg", imageAlt: "teamwork engineering project" }
|
||||
]}
|
||||
title="Who STEMAZ Serves"
|
||||
description="Tailored solutions for every member of the education ecosystem."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"TechAcademy",
|
||||
"InnovateLab",
|
||||
"STEMForce",
|
||||
"EduBuilder",
|
||||
"FutureSchool",
|
||||
"GlobalSTEM",
|
||||
"NextGenInnovations",
|
||||
]}
|
||||
title="Trusted by Forward-Thinking Institutions"
|
||||
description="Joining a global community of educators shaping the next generation."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["TechAcademy", "InnovateLab", "STEMForce", "EduBuilder", "FutureSchool", "GlobalSTEM", "NextGenInnovations"]}
|
||||
title="Trusted by Forward-Thinking Institutions"
|
||||
description="Joining a global community of educators shaping the next generation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How does the evaluation work?",
|
||||
content: "Teachers use our 5-dimensional slider interface to evaluate student performance, instantly generating a radar chart.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I integrate with my LMS?",
|
||||
content: "We support standard CSV exports and are actively building API integrations for popular LMS platforms.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is the platform mobile responsive?",
|
||||
content: "Absolutely, the platform is designed to be fully responsive for students to work on tablets and laptops.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions? We have answers."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How does the evaluation work?", content: "Teachers use our 5-dimensional slider interface to evaluate student performance, instantly generating a radar chart." },
|
||||
{ id: "q2", title: "Can I integrate with my LMS?", content: "We support standard CSV exports and are actively building API integrations for popular LMS platforms." },
|
||||
{ id: "q3", title: "Is the platform mobile responsive?", content: "Absolutely, the platform is designed to be fully responsive for students to work on tablets and laptops." }
|
||||
]}
|
||||
sideTitle="Questions? We have answers."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get Started"
|
||||
title="Start your STEM journey today"
|
||||
description="Join the waitlist or schedule a demo to see how STEMAZ can revolutionize your STEM curriculum."
|
||||
buttons={[
|
||||
{
|
||||
text: "Request a Demo",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get Started"
|
||||
title="Start your STEM journey today"
|
||||
description="Join the waitlist or schedule a demo to see how STEMAZ can revolutionize your STEM curriculum."
|
||||
buttons={[{ text: "Request a Demo", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="STEMAZ"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Contact Support",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="STEMAZ"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Contact Support", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user