bender/a97a02cf-6585-4cd6-94f9-c90f6a08bd94
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-02-27 12:51:54 +00:00
parent dd5f258db8
commit 978a71f0e4
1 changed files with 105 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/app/page.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -6,12 +6,40 @@ import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboard
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
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, Quote, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
import { useState } from 'react';
export default function LandingPage() {
const [flipped, setFlipped] = useState<Record<string, boolean>>({});
const toggleFlip = (id: string) => {
setFlipped(prev => ({ ...prev, [id]: !prev[id] }));
};
const testimonialCards = [
{
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"
},
{
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"
},
{
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"
},
{
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"
},
{
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"
},
{
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"
}
];
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
@@ -126,42 +154,80 @@ export default function LandingPage() {
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="What Our Members Say"
description="Real stories from computer club members about their learning journey and growth."
tag="Community"
tagIcon={MessageSquare}
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!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1"
},
{
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!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2"
},
{
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!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3"
},
{
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!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4"
},
{
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.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5"
},
{
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.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6"
}
]}
showRating={true}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
<div className="w-full py-20 px-6 md:px-12">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<div className="inline-block mb-4 px-4 py-2 rounded-full bg-accent/10 text-sm font-medium">
<span className="flex items-center gap-2">
<MessageSquare className="w-4 h-4" />
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-foreground/70">Real stories from computer club members about their learning journey and growth.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{testimonialCards.map((card) => {
const isFlipped = flipped[card.id];
return (
<div
key={card.id}
className="h-96 cursor-pointer perspective"
onClick={() => toggleFlip(card.id)}
>
<div
className="relative w-full h-full transition-transform duration-500 [transform-style:preserve-3d]"
style={{
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
}}
>
{/* Front of card */}
<div
className="absolute w-full h-full bg-card rounded-lg p-6 flex flex-col items-center justify-center text-center border border-accent/20 [backface-visibility:hidden]"
style={{ backfaceVisibility: 'hidden' }}
>
{card.imageSrc && (
<img
src={card.imageSrc}
alt={card.imageAlt}
className="w-24 h-24 rounded-full object-cover mb-4 border-2 border-primary-cta"
/>
)}
<h3 className="text-xl font-bold mb-1">{card.name}</h3>
<p className="text-sm text-foreground/60 mb-4">{card.handle}</p>
<p className="text-sm text-foreground/80 flex-1 flex items-center justify-center">Click to read testimonial</p>
</div>
{/* Back of card */}
<div
className="absolute w-full h-full bg-card rounded-lg p-6 flex items-center justify-center text-center border border-accent/20 [backface-visibility:hidden]"
style={{
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
}}
>
<div className="flex flex-col items-center justify-center h-full">
<p className="text-sm leading-relaxed mb-4 flex-1 flex items-center">{card.testimonial}</p>
<p className="text-xs text-foreground/60">— {card.name}</p>
</div>
</div>
</div>
</div>
);
})}
</div>
<div className="text-center mt-12">
<button
onClick={() => window.location.hash = 'contact'}
className="px-8 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
>
Join Our Community
</button>
</div>
</div>
</div>
</div>
<div id="contact" data-section="contact">