242 lines
15 KiB
TypeScript
242 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Sparkles, Mail, Github, Linkedin, Twitter, Globe } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="inset-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="CodeClub"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Join Us", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="CODECLUB"
|
|
description="Welcome to the ultimate hub for computer enthusiasts, developers, and tech innovators. Connect, learn, and build amazing projects together."
|
|
buttons={[
|
|
{ text: "Join Today", href: "contact" },
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg", imageAlt: "Coding and programming"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg", imageAlt: "Tech community collaboration"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18941.jpg", imageAlt: "Innovation and technology"
|
|
}
|
|
]}
|
|
autoplayDelay={5000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="About Us"
|
|
tagIcon={Sparkles}
|
|
title="Empowering the Next Generation of Tech Leaders"
|
|
description="Our computer club is a vibrant community dedicated to fostering innovation and technical excellence. We bring together passionate developers, students, and professionals who share a love for technology. Through workshops, hackathons, and collaborative projects, we create opportunities for growth, networking, and real-world learning."
|
|
metrics={[
|
|
{ value: "200+", title: "Active Members" },
|
|
{ value: "50+", title: "Annual Events" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-adults-meeting-up-study_23-2149064525.jpg"
|
|
imageAlt="Computer club members collaborating"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThree
|
|
title="What We Offer"
|
|
description="Discover the amazing opportunities and resources available to our community members"
|
|
tag="Opportunities"
|
|
features={[
|
|
{
|
|
id: "01", title: "Hands-On Workshops", description: "Learn cutting-edge technologies through interactive sessions led by industry experts and experienced members.", imageSrc: "http://img.b2bpic.net/free-photo/learning-education-ideas-insight-intelligence-study-concept_53876-120116.jpg", imageAlt: "Hands-on coding workshop"
|
|
},
|
|
{
|
|
id: "02", title: "Networking Events", description: "Connect with like-minded developers, make lasting friendships, and build professional relationships that matter.", imageSrc: "http://img.b2bpic.net/free-photo/group-friends-taking-selfie_53876-40336.jpg", imageAlt: "Networking and community connection"
|
|
},
|
|
{
|
|
id: "03", title: "Project Collaboration", description: "Build impressive projects with teammates, gain real-world experience, and showcase your work to the community.", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-colleagues-sitting-office-coworking_171337-17041.jpg", imageAlt: "Team project development"
|
|
},
|
|
{
|
|
id: "04", title: "Hackathons & Competitions", description: "Participate in exciting hackathons, coding competitions, and challenges that push your skills to the next level.", imageSrc: "http://img.b2bpic.net/free-photo/human-resources-employees-meeting-with-candidate-remote-call-interview_482257-130019.jpg", imageAlt: "Hackathon event"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet Our Leaders"
|
|
description="The passionate individuals driving our club's vision and success"
|
|
tag="Leadership"
|
|
members={[
|
|
{
|
|
id: "1", name: "Alex Chen", role: "Club President", description: "Full-stack developer with 5+ years of experience. Passionate about building inclusive tech communities.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Alex Chen", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Github, url: "https://github.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "2", name: "Sarah Rodriguez", role: "Vice President", description: "Cloud architect and DevOps enthusiast. Leads our infrastructure and deployment initiatives.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Rodriguez", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Twitter, url: "https://twitter.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "3", name: "Marcus Johnson", role: "Events Coordinator", description: "Organizes all club events and workshops. Brings energy and creativity to every gathering.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Marcus Johnson", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Globe, url: "https://example.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "4", name: "Emma Taylor", role: "Community Manager", description: "Keeps our community engaged and supportive. Ensures everyone feels welcomed and valued.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Emma Taylor", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Twitter, url: "https://twitter.com" }
|
|
]
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Members Say"
|
|
description="Real stories from our community members about their experiences and growth"
|
|
tag="Member Feedback"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "David Park", handle: "@davidpark", testimonial: "Joining this club completely transformed my career. The connections I made and skills I learned are invaluable.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "David Park"
|
|
},
|
|
{
|
|
id: "2", name: "Jessica Lee", handle: "@jessicadev", testimonial: "The best tech community I've ever been part of. Everyone is supportive and eager to help each other grow.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Jessica Lee"
|
|
},
|
|
{
|
|
id: "3", name: "Michael Thompson", handle: "@mythompson", testimonial: "Outstanding workshops and amazing people. This club pushed me to challenge myself and achieve my goals.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Michael Thompson"
|
|
},
|
|
{
|
|
id: "4", name: "Sophia Martinez", handle: "@sophiam", testimonial: "Found my passion for open-source development here. The community's enthusiasm is absolutely contagious!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sophia Martinez"
|
|
},
|
|
{
|
|
id: "5", name: "James Wilson", handle: "@jamesdevelops", testimonial: "Built my first production app with members from the club. The mentorship and support were incredible.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "James Wilson"
|
|
},
|
|
{
|
|
id: "6", name: "Nina Kapoor", handle: "@ninatech", testimonial: "This club gave me the confidence to transition into tech. Forever grateful for this amazing community!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Nina Kapoor"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find answers to common questions about our club, membership, and activities."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I join the computer club?", content: "Joining is easy! Simply fill out our membership form on the Contact page, attend one of our events, or reach out to any club leader. We welcome members of all skill levels."
|
|
},
|
|
{
|
|
id: "2", title: "Is there a membership fee?", content: "No, membership is completely free! We believe in making technology education accessible to everyone in our community."
|
|
},
|
|
{
|
|
id: "3", title: "When do you meet?", content: "We hold regular meetings every Thursday at 6 PM in the tech lab. We also organize special events and workshops throughout the month. Check our events page for the full schedule."
|
|
},
|
|
{
|
|
id: "4", title: "What skill level should I have?", content: "We welcome members of all skill levels, from complete beginners to experienced developers. Everyone learns from each other in a supportive environment."
|
|
},
|
|
{
|
|
id: "5", title: "What projects do you work on?", content: "We work on diverse projects including web applications, mobile apps, AI/ML projects, game development, and open-source contributions. Members choose projects that interest them."
|
|
},
|
|
{
|
|
id: "6", title: "How can I get mentorship?", content: "We have a mentorship program where experienced members guide newcomers. Just ask one of our leaders, and we'll match you with a mentor who fits your interests."
|
|
}
|
|
]}
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Involved"
|
|
tagIcon={Mail}
|
|
title="Ready to Join the Community?"
|
|
description="Sign up for our newsletter to stay updated on upcoming events, workshops, and exciting opportunities. Be part of something amazing!"
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you'll receive updates about our events and initiatives."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="CodeClub"
|
|
copyrightText="© 2025 CodeClub. All rights reserved. Empowering the next generation of tech leaders."
|
|
socialLinks={[
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Mail, href: "mailto:contact@codeclub.com", ariaLabel: "Email" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |