258 lines
15 KiB
TypeScript
258 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
|
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
|
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Code, Target, Zap, Trophy, Heart, Calendar, Users, Mail, Github, Linkedin, Twitter, Briefcase, Rocket, Brain } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="fluid"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="CompClub"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Activities", id: "features" },
|
|
{ name: "Achievements", id: "metrics" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Events", id: "pricing" },
|
|
]}
|
|
button={{ text: "Join Us", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Welcome to CompClub"
|
|
description="Join a vibrant community of tech enthusiasts passionate about coding, innovation, and collaboration. Explore projects, learn new skills, and grow together."
|
|
tag="Tech Community"
|
|
tagIcon={Code}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg?_wi=1", imageAlt: "Computer club meeting"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/screen-with-white-color-put-your-text-there-group-young-people-casual-clothes-working-modern-office_146671-16524.jpg", imageAlt: "Tech workshop"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/team-software-engineers-doing-brainstorming-office_482257-123976.jpg", imageAlt: "Programming competition"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medical-themeobservation-room-with-computer-tomograph-group-doctors-meeting-mri-office-diagnostic-center-hospital_627829-6526.jpg", imageAlt: "Tech workspace"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/group-young-businesspeople-meeting-office_171337-7269.jpg?_wi=1", imageAlt: "Team collaboration"},
|
|
]}
|
|
buttons={[
|
|
{ text: "Join CompClub", href: "contact" },
|
|
{ text: "Learn More", href: "about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="About Us"
|
|
tagIcon={Target}
|
|
tagAnimation="slide-up"
|
|
title="Building Tomorrow's Tech Leaders"
|
|
description="CompClub is dedicated to fostering a community where aspiring programmers, developers, and tech enthusiasts can collaborate, learn, and innovate. We organize workshops, hackathons, and mentorship programs to help members develop their skills and build meaningful projects together."
|
|
metrics={[
|
|
{ value: "200+", title: "Active Members" },
|
|
{ value: "50+", title: "Projects Completed" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-young-businesspeople-meeting-office_171337-7269.jpg?_wi=2"
|
|
imageAlt="CompClub community gathering"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardMedia
|
|
title="Our Core Activities"
|
|
description="Discover what makes CompClub special and how we support member growth"
|
|
tag="What We Do"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "workshops", title: "Coding Workshops", description: "Interactive training sessions covering web development, mobile apps, AI, and more. Learn from experienced developers and peers.", tag: "Learning", imageSrc: "http://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg", imageAlt: "Coding workshop"},
|
|
{
|
|
id: "hackathons", title: "Hackathons & Competitions", description: "Participate in exciting coding competitions and 24-hour hackathons. Build innovative solutions, win prizes, and showcase your skills.", tag: "Competition", imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg?_wi=2", imageAlt: "Programming competition"},
|
|
{
|
|
id: "projects", title: "Collaborative Projects", description: "Work with club members on open-source projects and real-world applications. Build your portfolio while contributing to meaningful work.", tag: "Collaboration", imageSrc: "http://img.b2bpic.net/free-vector/minimal-painting-atelier-youtube-channel-art_23-2149415475.jpg", imageAlt: "Project showcase"},
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Member Achievements"
|
|
description="Celebrating the success of our community members"
|
|
tag="Success Stories"
|
|
tagIcon={Trophy}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "internships", value: "85", title: "Internships Landed", description: "Members placed at top tech companies", icon: Briefcase,
|
|
},
|
|
{
|
|
id: "startups", value: "12", title: "Startups Founded", description: "By our innovative members", icon: Rocket,
|
|
},
|
|
{
|
|
id: "skills", value: "2500+", title: "Skills Gained", description: "Knowledge shared across all areas", icon: Brain,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="What Members Say"
|
|
description="Real experiences from CompClub community members"
|
|
tag="Testimonials"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alex Chen", role: "Software Developer", testimonial: "CompClub transformed my coding journey. The workshops and mentorship helped me land my dream job at a tech startup. Highly grateful for this community!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Alex Chen"},
|
|
{
|
|
id: "2", name: "Sarah Johnson", role: "Full Stack Engineer", testimonial: "The collaborative projects gave me real-world experience that no course could provide. Working with talented peers elevated my skills to the next level.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Sarah Johnson"},
|
|
{
|
|
id: "3", name: "Marcus Williams", role: "AI Specialist", testimonial: "I joined as a beginner and now I'm mentoring others. CompClub's supportive environment made all the difference in my tech career growth.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Marcus Williams"},
|
|
{
|
|
id: "4", name: "Priya Patel", role: "Startup Founder", testimonial: "The hackathon at CompClub is where I met my co-founders. We built our startup idea in 24 hours and it's now generating revenue. Best experience ever!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "Priya Patel"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
title="Upcoming Events"
|
|
description="Mark your calendar for our exciting upcoming activities"
|
|
tag="Events"
|
|
tagIcon={Calendar}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "workshop", badge: "Web Development Workshop", badgeIcon: Code,
|
|
price: "FREE", subtitle: "Learn modern web technologies", buttons: [
|
|
{ text: "Register Now", href: "contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"3-day intensive workshop", "React & Node.js fundamentals", "Hands-on projects included", "Certificate of completion"],
|
|
},
|
|
{
|
|
id: "hackathon", badge: "Annual Hackathon", badgeIcon: Zap,
|
|
price: "FREE", subtitle: "24-hour coding challenge", buttons: [
|
|
{ text: "Sign Up", href: "contact" },
|
|
{ text: "Details", href: "#" },
|
|
],
|
|
features: [
|
|
"Prize pool: $10,000+", "Mentorship from industry experts", "Networking opportunities", "Prizes for top 3 teams"],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardEleven
|
|
title="Leadership Team"
|
|
description="Meet the dedicated members leading CompClub"
|
|
tag="Our Team"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
groups={[
|
|
{
|
|
id: "leadership", groupTitle: "Club Leadership", members: [
|
|
{
|
|
id: "1", title: "Jordan Reed", subtitle: "Club President", detail: "jordan@compclub.org", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=5", imageAlt: "Jordan Reed"},
|
|
{
|
|
id: "2", title: "Emily Zhang", subtitle: "Vice President", detail: "emily@compclub.org", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=6", imageAlt: "Emily Zhang"},
|
|
{
|
|
id: "3", title: "Michael Torres", subtitle: "Events Coordinator", detail: "michael@compclub.org", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=7", imageAlt: "Michael Torres"},
|
|
{
|
|
id: "4", title: "Lisa Anderson", subtitle: "Education Lead", detail: "lisa@compclub.org", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=8", imageAlt: "Lisa Anderson"},
|
|
{
|
|
id: "5", title: "David Kumar", subtitle: "Technical Lead", detail: "david@compclub.org", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=9", imageAlt: "David Kumar"},
|
|
{
|
|
id: "6", title: "Rachel Kim", subtitle: "Community Manager", detail: "rachel@compclub.org", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=10", imageAlt: "Rachel Kim"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Stay Connected"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Join Our Community"
|
|
description="Subscribe to our newsletter for exclusive updates about workshops, hackathons, and community events. Be the first to know about opportunities and member spotlights."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-vector/glowing-abstract-digital-technology-particle-wallpaper-design_1017-58162.jpg"
|
|
imageAlt="Tech innovation background"
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. You can unsubscribe at any time."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="CompClub"
|
|
copyrightText="© 2025 CompClub. All rights reserved."
|
|
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:hello@compclub.org", ariaLabel: "Email" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|