Merge version_1 into main #2
316
src/app/page.tsx
316
src/app/page.tsx
@@ -12,7 +12,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { ArrowRight, Box, Clock, MapPin, Network } from "lucide-react";
|
||||
import { ArrowRight, Box, Clock, MapPin, Network, GitBranch } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,26 +32,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Hero",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Structures",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{ name: "Hero", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Structures", id: "products" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="StudyAI"
|
||||
/>
|
||||
@@ -59,64 +44,21 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Master Computer Science with AI"
|
||||
description="An intelligent study assistant that breaks down complex data structures, algorithms, and full-stack frameworks into bite-sized learning paths."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Learning",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dm8abe&_wi=1"
|
||||
buttons={[{ text: "Start Learning", href: "#about" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dm8abe"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lk24dk",
|
||||
alt: "student portrait studio",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcn86a",
|
||||
alt: "software engineer professional",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2zq5h",
|
||||
alt: "researcher portrait clean",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4afauq",
|
||||
alt: "data scientist portrait",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0rha4a",
|
||||
alt: "happy student portrait",
|
||||
},
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lk24dk", alt: "student portrait studio" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcn86a", alt: "software engineer professional" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2zq5h", alt: "researcher portrait clean" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4afauq", alt: "data scientist portrait" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0rha4a", alt: "happy student portrait" },
|
||||
]}
|
||||
avatarText="Trusted by 15k+ students"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "React",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Algorithms",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "System Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Next.js",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Data Structures",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[{ type: "text", text: "React" }, { type: "text", text: "Algorithms" }, { type: "text", text: "System Design" }, { type: "text", text: "Next.js" }, { type: "text", text: "Data Structures" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -127,20 +69,11 @@ export default function LandingPage() {
|
||||
title="Built for Modern Developers"
|
||||
description="We bridge the gap between theoretical data structures and real-world framework implementation, powering your study flow with AI."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Framework Integration",
|
||||
description: "Seamlessly learn how structures apply in React, Next.js, and Node.",
|
||||
},
|
||||
{
|
||||
title: "AI Logic Paths",
|
||||
description: "Personalized pathways generated by our proprietary AI tutor.",
|
||||
},
|
||||
{
|
||||
title: "Visual Data Structures",
|
||||
description: "Watch algorithms execute in real-time within your browser.",
|
||||
},
|
||||
{ title: "Framework Integration", description: "Seamlessly learn how structures apply in React, Next.js, and Node." },
|
||||
{ title: "AI Logic Paths", description: "Personalized pathways generated by our proprietary AI tutor." },
|
||||
{ title: "Visual Data Structures", description: "Watch algorithms execute in real-time within your browser." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=56iwpc&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=56iwpc"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
@@ -152,64 +85,19 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Tree Visualizer",
|
||||
description: "Understand binary search trees with interactive nodes.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y0m2ii",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
text: "Interactive traversal",
|
||||
icon: GitBranch,
|
||||
},
|
||||
{
|
||||
text: "Complexity analysis",
|
||||
icon: Clock,
|
||||
},
|
||||
],
|
||||
title: "Tree Visualizer", description: "Understand binary search trees with interactive nodes.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y0m2ii" },
|
||||
items: [{ text: "Interactive traversal", icon: GitBranch }, { text: "Complexity analysis", icon: Clock }],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dm8abe&_wi=2",
|
||||
imageAlt: "tree data structure code",
|
||||
},
|
||||
{
|
||||
title: "Linked List Pathing",
|
||||
description: "Navigate memory blocks with our visual pointer tracer.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4yvn8w",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
text: "Memory visualizer",
|
||||
icon: Box,
|
||||
},
|
||||
{
|
||||
text: "Pointer logic",
|
||||
icon: ArrowRight,
|
||||
},
|
||||
],
|
||||
title: "Linked List Pathing", description: "Navigate memory blocks with our visual pointer tracer.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4yvn8w" },
|
||||
items: [{ text: "Memory visualizer", icon: Box }, { text: "Pointer logic", icon: ArrowRight }],
|
||||
reverse: true,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=56iwpc&_wi=2",
|
||||
imageAlt: "tree data structure code",
|
||||
},
|
||||
{
|
||||
title: "Graph Algorithm AI",
|
||||
description: "Pathfinding algorithms demonstrated on live grids.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4jo1ce",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
text: "Dijkstra demo",
|
||||
icon: MapPin,
|
||||
},
|
||||
{
|
||||
text: "Network load testing",
|
||||
icon: Network,
|
||||
},
|
||||
],
|
||||
title: "Graph Algorithm AI", description: "Pathfinding algorithms demonstrated on live grids.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4jo1ce" },
|
||||
items: [{ text: "Dijkstra demo", icon: MapPin }, { text: "Network load testing", icon: Network }],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vy903e&_wi=1",
|
||||
imageAlt: "tree data structure code",
|
||||
},
|
||||
]}
|
||||
title="The AI Difference"
|
||||
@@ -219,30 +107,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15k+",
|
||||
title: "Active Students",
|
||||
description: "Learning algorithms daily",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vy903e&_wi=2",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "200+",
|
||||
title: "Data Structures",
|
||||
description: "Fully visualized modules",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hk1h53",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "98%",
|
||||
title: "Success Rate",
|
||||
description: "Interviews passed with ease",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0snzz1",
|
||||
},
|
||||
{ id: "m1", value: "15k+", title: "Active Students", description: "Learning algorithms daily", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vy903e" },
|
||||
{ id: "m2", value: "200+", title: "Data Structures", description: "Fully visualized modules", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hk1h53" },
|
||||
{ id: "m3", value: "98%", title: "Success Rate", description: "Interviews passed with ease", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0snzz1" },
|
||||
]}
|
||||
title="Student Impact"
|
||||
description="Empowering thousands of developers across the globe."
|
||||
@@ -256,42 +127,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Array & List Basics",
|
||||
price: "Free",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=55lkv2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Stack & Queues",
|
||||
price: "$19",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6ouxrd",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Heaps & Hash Tables",
|
||||
price: "$29",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cso4oo",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Graph Traversal",
|
||||
price: "$39",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=busfo4",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Red-Black Trees",
|
||||
price: "$49",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nqwed9",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Dynamic Programming",
|
||||
price: "$59",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tzx94n",
|
||||
},
|
||||
{ id: "p1", name: "Array & List Basics", price: "Free", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=55lkv2" },
|
||||
{ id: "p2", name: "Stack & Queues", price: "$19", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6ouxrd" },
|
||||
{ id: "p3", name: "Heaps & Hash Tables", price: "$29", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cso4oo" },
|
||||
{ id: "p4", name: "Graph Traversal", price: "$39", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=busfo4" },
|
||||
{ id: "p5", name: "Red-Black Trees", price: "$49", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nqwed9" },
|
||||
{ id: "p6", name: "Dynamic Programming", price: "$59", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tzx94n" },
|
||||
]}
|
||||
title="Data Structure Modules"
|
||||
description="Expertly crafted modules for every modern stack."
|
||||
@@ -302,31 +143,11 @@ export default function LandingPage() {
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lk24dk",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Jordan P.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcn86a",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sam M.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2zq5h",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Casey T.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4afauq",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Riley K.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0rha4a",
|
||||
},
|
||||
{ id: "t1", name: "Alex R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lk24dk" },
|
||||
{ id: "t2", name: "Jordan P.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcn86a" },
|
||||
{ id: "t3", name: "Sam M.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2zq5h" },
|
||||
{ id: "t4", name: "Casey T.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4afauq" },
|
||||
{ id: "t5", name: "Riley K.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0rha4a" },
|
||||
]}
|
||||
cardTitle="Success Stories"
|
||||
cardTag="Community"
|
||||
@@ -339,21 +160,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Does it support React?",
|
||||
content: "Yes, our modules include full-stack React framework integrations.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is the AI adaptive?",
|
||||
content: "Yes, it tracks your progress and suggests harder modules accordingly.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I use it for interviews?",
|
||||
content: "Absolutely, our algorithm roadmap is geared toward coding interviews.",
|
||||
},
|
||||
{ id: "q1", title: "Does it support React?", content: "Yes, our modules include full-stack React framework integrations." },
|
||||
{ id: "q2", title: "Is the AI adaptive?", content: "Yes, it tracks your progress and suggests harder modules accordingly." },
|
||||
{ id: "q3", title: "Can I use it for interviews?", content: "Absolutely, our algorithm roadmap is geared toward coding interviews." },
|
||||
]}
|
||||
title="Study Queries"
|
||||
description="Answers to common questions about our AI platform."
|
||||
@@ -364,16 +173,9 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Ready to level up your engineering skills?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "mailto:hello@studyai.com",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Support", href: "mailto:hello@studyai.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -382,32 +184,8 @@ export default function LandingPage() {
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f9qi3s"
|
||||
logoText="StudyAI"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Roadmap",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Modules",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Platform", items: [{ label: "Roadmap", href: "#" }, { label: "Modules", href: "#" }] },
|
||||
{ title: "Resources", items: [{ label: "Blog", href: "#" }, { label: "Support", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user