Merge version_1 into main #2
201
src/app/page.tsx
201
src/app/page.tsx
@@ -11,7 +11,7 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { BarChart, Code, Layout, Palette, Users } from "lucide-react";
|
||||
import { BarChart, Code, Layout, Palette, Users, Cpu } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -31,41 +31,23 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Courses",
|
||||
id: "courses",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Courses", id: "courses" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Flat IT School"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Build Your Future in Tech"
|
||||
description="Master programming, design, and data with Flat IT School. Learn from industry experts and land your dream job with our comprehensive, career-focused curriculum."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Courses",
|
||||
href: "#courses",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=1"
|
||||
buttons={[{ text: "View Courses", href: "#courses" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="Students working in a modern tech lab"
|
||||
/>
|
||||
@@ -76,9 +58,6 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="Why Choose Flat?"
|
||||
description="We bridge the gap between theory and practice. Our school focuses on real-world projects, mentorship, and career placement services to ensure you are job-ready from day one."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=2"
|
||||
imageAlt="Collaborative learning environment"
|
||||
videoSrc="https://www.w3schools.com/html/mov_bbb.mp4?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -89,62 +68,29 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Web Development",
|
||||
description: "Full-stack mastery from HTML/CSS to React and Node.js.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=3",
|
||||
imageAlt: "Coding",
|
||||
},
|
||||
id: "f1", title: "Web Development", description: "Full-stack mastery from HTML/CSS to React and Node.js.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png", imageAlt: "Coding"},
|
||||
items: [
|
||||
{
|
||||
icon: Code,
|
||||
text: "Industry-grade tools",
|
||||
},
|
||||
{
|
||||
icon: Layout,
|
||||
text: "Project-based learning",
|
||||
},
|
||||
{ icon: Code, text: "Industry-grade tools" },
|
||||
{ icon: Layout, text: "Project-based learning" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "UI/UX Design",
|
||||
description: "Learn to design intuitive, beautiful digital experiences.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=4",
|
||||
imageAlt: "Design",
|
||||
},
|
||||
id: "f2", title: "UI/UX Design", description: "Learn to design intuitive, beautiful digital experiences.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png", imageAlt: "Design"},
|
||||
items: [
|
||||
{
|
||||
icon: Palette,
|
||||
text: "Figma mastery",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
text: "User-centric methodology",
|
||||
},
|
||||
{ icon: Palette, text: "Figma mastery" },
|
||||
{ icon: Users, text: "User-centric methodology" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Data Science",
|
||||
description: "Uncover insights with Python, SQL, and data analytics.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=5",
|
||||
imageAlt: "Data",
|
||||
},
|
||||
id: "f3", title: "Data Science", description: "Uncover insights with Python, SQL, and data analytics.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png", imageAlt: "Data"},
|
||||
items: [
|
||||
{
|
||||
icon: BarChart,
|
||||
text: "Real-world datasets",
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
text: "Machine learning basics",
|
||||
},
|
||||
{ icon: BarChart, text: "Real-world datasets" },
|
||||
{ icon: Cpu, text: "Machine learning basics" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
@@ -161,49 +107,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
title: "Part-Time",
|
||||
price: "$1,200",
|
||||
period: "per course",
|
||||
features: [
|
||||
"Flexible hours",
|
||||
"Core curriculum",
|
||||
"Mentorship",
|
||||
],
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=6",
|
||||
id: "basic", title: "Part-Time", price: "$1,200", period: "per course", features: ["Flexible hours", "Core curriculum", "Mentorship"],
|
||||
button: { text: "Get Started" },
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
title: "Full-Time Intensive",
|
||||
price: "$3,500",
|
||||
period: "per program",
|
||||
features: [
|
||||
"Daily classes",
|
||||
"Job placement",
|
||||
"Advanced portfolio building",
|
||||
],
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=7",
|
||||
id: "pro", title: "Full-Time Intensive", price: "$3,500", period: "per program", features: ["Daily classes", "Job placement", "Advanced portfolio building"],
|
||||
button: { text: "Get Started" },
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
title: "Career Accelerator",
|
||||
price: "$5,000",
|
||||
period: "total",
|
||||
features: [
|
||||
"Personal career coach",
|
||||
"Guaranteed internship",
|
||||
"Networking events",
|
||||
],
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=8",
|
||||
id: "enterprise", title: "Career Accelerator", price: "$5,000", period: "total", features: ["Personal career coach", "Guaranteed internship", "Networking events"],
|
||||
button: { text: "Get Started" },
|
||||
},
|
||||
]}
|
||||
title="Simple Tuition Options"
|
||||
@@ -218,10 +131,7 @@ export default function LandingPage() {
|
||||
rating={5}
|
||||
author="Alice Thompson"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/professional-headshot-of-a-happy-tech-sc-1774613222191-33642daa.png",
|
||||
alt: "Alice",
|
||||
},
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/professional-headshot-of-a-happy-tech-sc-1774613222191-33642daa.png", alt: "Alice" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -233,21 +143,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do I need experience?",
|
||||
content: "No, our programs are beginner-friendly.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Is job placement guaranteed?",
|
||||
content: "Our career services work hard to connect you with our hiring partners.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I learn remotely?",
|
||||
content: "Yes, we offer both on-campus and fully remote options.",
|
||||
},
|
||||
{ id: "1", title: "Do I need experience?", content: "No, our programs are beginner-friendly." },
|
||||
{ id: "2", title: "Is job placement guaranteed?", content: "Our career services work hard to connect you with our hiring partners." },
|
||||
{ id: "3", title: "Can I learn remotely?", content: "Yes, we offer both on-campus and fully remote options." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about starting at Flat IT School."
|
||||
@@ -258,51 +156,22 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Ready to Start?"
|
||||
title="Join Our Next Cohort"
|
||||
description="Enter your email to receive our curriculum brochure and join our mailing list."
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Sign Up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png?_wi=9"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWvgtdb1fQBTiu9zMAAIRWAGuj/a-high-quality-image-of-a-diverse-group--1774613224602-69cf5c77.png"
|
||||
columns={[
|
||||
{
|
||||
title: "Programs",
|
||||
items: [
|
||||
{
|
||||
label: "Web Development",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "UI/UX Design",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Career",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Programs", items: [{ label: "Web Development", href: "#" }, { label: "UI/UX Design", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Career", href: "#" }] },
|
||||
]}
|
||||
logoText="Flat IT School"
|
||||
copyrightText="© 2025 | Flat IT School"
|
||||
videoSrc="https://www.w3schools.com/html/mov_bbb.mp4?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user