431 lines
16 KiB
TypeScript
431 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
|
|
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
|
|
import { Zap, Target, Sparkles, Rocket, Award, Users, HelpCircle, Youtube, Linkedin, Twitter, Github, Star } from "lucide-react";
|
|
|
|
export default function Page() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="outline"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Start Code"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Courses", id: "courses" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Enroll Now",
|
|
href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Master Modern Technology"
|
|
description="Learn industry-leading IT skills through hands-on training and expert instruction. Build your future in web development, cybersecurity, and data science."
|
|
tag="IT Excellence"
|
|
tagIcon={Zap}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492693670-lj7ueobz.png",
|
|
imageAlt: "Students coding in classroom"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672727126-a97a9rhj.jpg",
|
|
imageAlt: "Developer working on computer"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672729251-otls1mux.jpg",
|
|
imageAlt: "Programming code on screen"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492694761-e96hadsf.jpg",
|
|
imageAlt: "IT classroom with computers"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672728464-s6bmwda4.jpg",
|
|
imageAlt: "Collaborative team workspace"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Explore Courses",
|
|
href: "courses"
|
|
},
|
|
{
|
|
text: "Get in Touch",
|
|
href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<ParallaxAbout
|
|
title="Building Future Tech Leaders"
|
|
description="Start Code is dedicated to providing comprehensive IT education that bridges the gap between academic theory and real-world industry demands. Our expert instructors bring years of professional experience to every course, ensuring students gain practical skills needed for success."
|
|
tag="About Us"
|
|
tagIcon={Target}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672728464-s6bmwda4.jpg"
|
|
imageAlt="Professional IT workspace"
|
|
buttons={[
|
|
{
|
|
text: "Learn Our Mission",
|
|
href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwenty
|
|
title="Why Choose Start Code"
|
|
description="We offer a comprehensive approach to IT education with modern facilities, expert instruction, and job-focused curriculum that prepares you for real-world challenges."
|
|
images={[
|
|
{
|
|
id: 1,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492695669-hy749o3o.jpg",
|
|
imageAlt: "Web development training"
|
|
},
|
|
{
|
|
id: 2,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672730035-e2exv3ex.jpg",
|
|
imageAlt: "Backend programming instruction"
|
|
},
|
|
{
|
|
id: 3,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766750470920-ue3bb9wg.jpg",
|
|
imageAlt: "Database management course"
|
|
},
|
|
{
|
|
id: 4,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672731012-02y7h7no.jpg",
|
|
imageAlt: "Cybersecurity training"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
tag="Our Programs"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{
|
|
text: "View All Programs",
|
|
href: "courses"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="courses" data-section="courses">
|
|
<ProductCardTwo
|
|
title="Our IT Courses"
|
|
description="Choose from our carefully designed courses tailored to match industry demands and career advancement opportunities."
|
|
tag="Enrollment"
|
|
tagIcon={Rocket}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Start Code",
|
|
name: "Web Development Fundamentals",
|
|
price: "$499",
|
|
rating: 5,
|
|
reviewCount: "1.2k",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672731963-dy25hbg0.jpg",
|
|
imageAlt: "Web Development course"
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Start Code",
|
|
name: "Python Programming Essentials",
|
|
price: "$449",
|
|
rating: 5,
|
|
reviewCount: "980",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740382604-lxm5r8ne.jpg",
|
|
imageAlt: "Python Programming course"
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Start Code",
|
|
name: "Data Science & Analytics",
|
|
price: "$599",
|
|
rating: 5,
|
|
reviewCount: "850",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766750472136-03c1edmk.jpg",
|
|
imageAlt: "Data Science course"
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Start Code",
|
|
name: "Cybersecurity Mastery",
|
|
price: "$649",
|
|
rating: 5,
|
|
reviewCount: "745",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766750473080-tf9sz4t0.jpg",
|
|
imageAlt: "Cybersecurity course"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Browse All Courses",
|
|
href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Johnson",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg",
|
|
imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Michael Chen",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492698706-udp5pns4.jpg",
|
|
imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emma Rodriguez",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743064968-mn7r0vxe.jpg",
|
|
imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "David Kim",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743065834-k1ycryfc.jpg",
|
|
imageAlt: "David Kim"
|
|
}
|
|
]}
|
|
cardTitle="Over 5,000 students have successfully completed our IT courses and launched their tech careers"
|
|
cardTag="Student Success"
|
|
cardTagIcon={Award}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
title="Expert Instructors"
|
|
description="Learn from industry professionals with years of real-world experience in software development, cybersecurity, and IT infrastructure."
|
|
tag="Our Team"
|
|
tagIcon={Users}
|
|
team={[
|
|
{
|
|
id: "1",
|
|
name: "Robert Chen",
|
|
role: "Senior Developer & Course Lead",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg",
|
|
imageAlt: "Robert Chen"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Lisa Patterson",
|
|
role: "Cybersecurity Specialist",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg",
|
|
imageAlt: "Lisa Patterson"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "James Wilson",
|
|
role: "Full Stack Developer",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg",
|
|
imageAlt: "James Wilson"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Amanda Foster",
|
|
role: "Data Science Mentor",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg",
|
|
imageAlt: "Amanda Foster"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our courses, enrollment process, and learning experience."
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What is the minimum experience level required?",
|
|
content: "Our courses are designed for learners of all levels. We offer beginner-friendly courses for those new to IT, as well as advanced programs for experienced professionals looking to specialize."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "How long are the courses?",
|
|
content: "Course duration varies from 4 weeks for intensive bootcamps to 12 weeks for comprehensive programs. We also offer flexible learning options with self-paced modules."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Do you offer job placement assistance?",
|
|
content: "Yes! We provide career counseling, resume review, interview preparation, and connect graduates with our network of hiring partners in the IT industry."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "What is your refund policy?",
|
|
content: "We offer a 14-day money-back guarantee if you're not satisfied with your course. After 14 days, refunds are handled on a case-by-case basis."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Do you offer flexible payment options?",
|
|
content: "Yes, we support multiple payment methods including installment plans, corporate training discounts, and financing options for eligible students."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "Are courses available online?",
|
|
content: "Most of our courses are available both in-person and online. Check individual course pages to see the available learning formats."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your career in technology? Get in touch with our enrollment team to discuss your learning goals and find the perfect course for you."
|
|
animationType="reveal-blur"
|
|
buttons={[
|
|
{
|
|
text: "Contact Us",
|
|
href: "contact"
|
|
},
|
|
{
|
|
text: "Schedule a Call",
|
|
href: "contact"
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseSocial
|
|
logoText="Start Code"
|
|
description="Empowering the next generation of IT professionals with quality education and career support."
|
|
copyrightText="© 2025 Start Code. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Courses",
|
|
items: [
|
|
{
|
|
label: "Web Development",
|
|
href: "courses"
|
|
},
|
|
{
|
|
label: "Python Programming",
|
|
href: "courses"
|
|
},
|
|
{
|
|
label: "Data Science",
|
|
href: "courses"
|
|
},
|
|
{
|
|
label: "Cybersecurity",
|
|
href: "courses"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "about"
|
|
},
|
|
{
|
|
label: "Team",
|
|
href: "team"
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "contact"
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "contact"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Terms of Service",
|
|
href: "terms"
|
|
},
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "privacy"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
socialLinks={[
|
|
{
|
|
icon: Youtube,
|
|
href: "https://youtube.com",
|
|
ariaLabel: "YouTube"
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com",
|
|
ariaLabel: "LinkedIn"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com",
|
|
ariaLabel: "Twitter"
|
|
},
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com",
|
|
ariaLabel: "GitHub"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |