323 lines
18 KiB
TypeScript
323 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
|
|
import React, { useState } from 'react';
|
|
|
|
export default function LandingPage() {
|
|
const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({});
|
|
|
|
const toggleFlip = (id: string) => {
|
|
setFlippedCards(prev => ({
|
|
...prev,
|
|
[id]: !prev[id]
|
|
}));
|
|
};
|
|
|
|
const testimonials = [
|
|
{
|
|
id: "1", name: "Alex Chen", handle: "@AlexDev", testimonial: "CompClub transformed my coding skills. The workshops and mentorship helped me land my dream job at a top tech company. Grateful for this amazing community!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1", imageAlt: "Alex Chen", fullTestimonial: "CompClub transformed my coding skills in ways I never expected. The workshops and mentorship helped me land my dream job at a top tech company. I went from struggling with basic algorithms to confidently tackling system design problems. The community support was incredible throughout my entire journey. Grateful for this amazing community!"
|
|
},
|
|
{
|
|
id: "2", name: "Sarah Mitchell", handle: "@SarahCodes", testimonial: "The collaborative projects here are incredible. I've built friendships and a portfolio that actually impresses recruiters. Best decision ever!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2", imageAlt: "Sarah Mitchell", fullTestimonial: "The collaborative projects here are absolutely incredible. I've built lifelong friendships and a portfolio that actually impresses recruiters. Working on real-world applications with talented peers pushed me to learn faster and deeper than I ever could alone. Best decision ever!"
|
|
},
|
|
{
|
|
id: "3", name: "Jordan Lee", handle: "@JordanDev", testimonial: "From zero experience to building full-stack applications in just a few months. The mentorship here is unmatched. Highly recommend CompClub!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3", imageAlt: "Jordan Lee", fullTestimonial: "From zero experience to building full-stack applications in just a few months. The mentorship here is truly unmatched. Expert mentors were always available to guide me through challenges and celebrate my wins. The structured learning path made everything clear and achievable. Highly recommend CompClub!"
|
|
},
|
|
{
|
|
id: "4", name: "Maya Patel", handle: "@MayaCode", testimonial: "The hackathons taught me so much about teamwork and problem-solving. Plus, winning first place was the cherry on top!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4", imageAlt: "Maya Patel", fullTestimonial: "The hackathons taught me so much about teamwork, time management, and creative problem-solving under pressure. Building amazing projects in 48 hours with brilliant people was exhilarating. Plus, winning first place was the cherry on top!"
|
|
},
|
|
{
|
|
id: "5", name: "David Brown", handle: "@DavidDeveloper", testimonial: "CompClub isn't just about coding. It's about building a network of passionate people who genuinely want to help each other succeed.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5", imageAlt: "David Brown", fullTestimonial: "CompClub isn't just about coding. It's about building a genuine network of passionate people who truly want to help each other succeed. The culture of mentoring and support runs deep in this community. I've made friends who've become collaborators on side projects and potential co-founders."
|
|
},
|
|
{
|
|
id: "6", name: "Lisa Wong", handle: "@LisaTech", testimonial: "The industry expert talks opened my eyes to so many career possibilities. This community has given me the confidence to pursue my tech dreams.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6", imageAlt: "Lisa Wong", fullTestimonial: "The industry expert talks opened my eyes to so many career possibilities I didn't even know existed. Hearing directly from engineers at FAANG companies was incredibly inspiring. This community has given me the confidence and skills to pursue my tech dreams with clarity and purpose."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="CompClub"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Community", id: "testimonials" },
|
|
{ name: "Join", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="CompClub"
|
|
description="Explore the future of technology. Connect with fellow tech enthusiasts, build groundbreaking projects, and master the skills shaping tomorrow's digital world."
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Join Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
layoutOrder="default"
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-young-people-casual-clothes-working-modern-office_146671-16433.jpg"
|
|
imageAlt="Computer Club Community"
|
|
frameStyle="card"
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Building the Next Generation of Tech Leaders Through Collaboration, Learning, and Innovation"
|
|
metrics={[
|
|
{ icon: Users, label: "Active Members", value: "500+" },
|
|
{ icon: Code, label: "Projects Completed", value: "150+" },
|
|
{ icon: Award, label: "Competitions Won", value: "25+" },
|
|
{ icon: Zap, label: "Monthly Workshops", value: "12" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
title="What We Offer"
|
|
description="Discover the opportunities and resources available to every member of our thriving computer club community."
|
|
tag="Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Hands-On Coding Workshops", content: "Weekly sessions where members learn cutting-edge programming languages, frameworks, and development techniques. From beginner fundamentals to advanced system design, our expert mentors guide you every step of the way."
|
|
},
|
|
{
|
|
id: "2", title: "Collaborative Project Development", content: "Work on real-world projects with fellow enthusiasts. Build applications, contribute to open source, and create portfolios that showcase your technical excellence to potential employers."
|
|
},
|
|
{
|
|
id: "3", title: "Industry Expert Talks & Networking", content: "Connect with software engineers, data scientists, and tech leaders from top companies. Gain insider insights into the industry, career paths, and emerging technologies shaping our digital future."
|
|
},
|
|
{
|
|
id: "4", title: "Hackathon & Competition Events", content: "Participate in exciting hackathons and coding competitions to test your skills, earn recognition, and win prizes. Build your competitive edge while having fun with the community."
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
|
|
imageAlt="Coding Workshop"
|
|
mediaAnimation="opacity"
|
|
useInvertedBackground={false}
|
|
mediaPosition="left"
|
|
buttons={[
|
|
{ text: "Explore Programs", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Our Impact"
|
|
description="Measurable outcomes showcasing the success and growth of our computer club community."
|
|
tag="Success Stories"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ id: "1", icon: BookOpen, title: "Topics Mastered", value: "50+" },
|
|
{ id: "2", icon: GitBranch, title: "Code Repositories", value: "200+" },
|
|
{ id: "3", icon: Trophy, title: "Success Rate", value: "92%" },
|
|
{ id: "4", icon: Briefcase, title: "Job Placements", value: "85+" }
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View Success Stories", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<div className="py-16 px-4 md:px-0">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="text-center mb-12">
|
|
<div className="inline-block mb-4 px-4 py-2 rounded-full bg-opacity-10 border border-current border-opacity-20">
|
|
<span className="text-sm font-medium">Community Voices</span>
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-4">What Our Members Say</h2>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">Real stories from computer club members about their learning journey and growth.</p>
|
|
</div>
|
|
|
|
{/* Flip Cards Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{testimonials.map((testimonial) => {
|
|
const isFlipped = flippedCards[testimonial.id];
|
|
return (
|
|
<div
|
|
key={testimonial.id}
|
|
className="h-80 cursor-pointer perspective"
|
|
onClick={() => toggleFlip(testimonial.id)}
|
|
>
|
|
<div className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
|
style={{
|
|
transformStyle: 'preserve-3d',
|
|
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
|
}}
|
|
>
|
|
{/* Front */}
|
|
<div
|
|
className="absolute w-full h-full rounded-xl p-6 flex flex-col justify-between bg-white dark:bg-gray-900 shadow-lg border border-gray-200 dark:border-gray-700"
|
|
style={{
|
|
backfaceVisibility: 'hidden'
|
|
}}
|
|
>
|
|
{/* Author Info at Top */}
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<img
|
|
src={testimonial.imageSrc}
|
|
alt={testimonial.imageAlt}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
<div>
|
|
<p className="font-semibold text-gray-900 dark:text-white">{testimonial.name}</p>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">{testimonial.handle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Short Testimonial */}
|
|
<div className="flex-grow">
|
|
<p className="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
|
|
"{testimonial.testimonial}"
|
|
</p>
|
|
</div>
|
|
|
|
{/* Flip Hint */}
|
|
<div className="mt-4 text-center">
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Click to read full testimonial →</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Back */}
|
|
<div
|
|
className="absolute w-full h-full rounded-xl p-6 flex flex-col justify-between bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900 dark:to-indigo-900 shadow-lg border border-blue-200 dark:border-blue-700"
|
|
style={{
|
|
backfaceVisibility: 'hidden',
|
|
transform: 'rotateY(180deg)'
|
|
}}
|
|
>
|
|
{/* Author Info at Top */}
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<img
|
|
src={testimonial.imageSrc}
|
|
alt={testimonial.imageAlt}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
<div>
|
|
<p className="font-semibold text-gray-900 dark:text-white">{testimonial.name}</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-300">{testimonial.handle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Full Testimonial */}
|
|
<div className="flex-grow">
|
|
<p className="text-gray-800 dark:text-gray-200 text-sm leading-relaxed">
|
|
"{testimonial.fullTestimonial}"
|
|
</p>
|
|
</div>
|
|
|
|
{/* Flip Hint */}
|
|
<div className="mt-4 text-center">
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">← Click to see summary</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="text-center mt-12">
|
|
<button
|
|
onClick={() => {
|
|
window.location.hash = 'contact';
|
|
}}
|
|
className="px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-semibold hover:shadow-lg transition-shadow"
|
|
>
|
|
Join Our Community
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Involved"
|
|
title="Ready to Join CompClub?"
|
|
description="Sign up for our newsletter to receive updates about upcoming workshops, events, and opportunities. Be part of a thriving community of tech enthusiasts!"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Sign Up"
|
|
termsText="We respect your privacy. Unsubscribe anytime. Check out our Community Guidelines and Terms."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="CompClub"
|
|
copyrightText="© 2025 CompClub. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Events", href: "#features" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Tutorials", href: "#" },
|
|
{ label: "Code Repository", href: "https://github.com" },
|
|
{ label: "FAQ", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Discord", href: "https://discord.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |