Merge version_2 into main #4
153
src/app/page.tsx
153
src/app/page.tsx
@@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
@@ -10,8 +10,18 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
|
||||
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 { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({});
|
||||
|
||||
const toggleFlip = (id: string) => {
|
||||
setFlippedCards(prev => ({
|
||||
...prev,
|
||||
[id]: !prev[id]
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
@@ -126,42 +136,109 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="What Our Members Say"
|
||||
description="Real stories from computer club members about their learning journey and growth."
|
||||
tag="Community Voices"
|
||||
tagIcon={MessageSquare}
|
||||
tagAnimation="slide-up"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Join Our Community", href: "#contact" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
speed={40}
|
||||
topMarqueeDirection="left"
|
||||
/>
|
||||
<div className="py-16 md:py-24">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">What Our Members Say</h2>
|
||||
<p className="text-lg text-foreground/75">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">
|
||||
{[
|
||||
{
|
||||
id: "1", name: "Alex Chen", handle: "@AlexDev", shortText: "Landed dream job at top tech company", fullText: "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"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Sarah Mitchell", handle: "@SarahCodes", shortText: "Built impressive portfolio through projects", fullText: "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"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Jordan Lee", handle: "@JordanDev", shortText: "Full-stack development in just months", fullText: "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"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Maya Patel", handle: "@MayaCode", shortText: "Won first place in hackathon", fullText: "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"
|
||||
},
|
||||
{
|
||||
id: "5", name: "David Brown", handle: "@DavidDeveloper", shortText: "Built a supportive tech network", fullText: "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"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Lisa Wong", handle: "@LisaTech", shortText: "Discovered career possibilities", fullText: "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"
|
||||
}
|
||||
].map((testimonial) => (
|
||||
<div
|
||||
key={testimonial.id}
|
||||
className="h-64 cursor-pointer perspective"
|
||||
onClick={() => toggleFlip(testimonial.id)}
|
||||
style={{
|
||||
perspective: '1000px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="relative w-full h-full transition-transform duration-500"
|
||||
style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: flippedCards[testimonial.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
||||
}}
|
||||
>
|
||||
{/* Front side */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-card rounded-lg p-6 flex flex-col justify-between border border-accent/20"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
WebkitBackfaceVisibility: 'hidden'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{testimonial.imageSrc && (
|
||||
<img
|
||||
src={testimonial.imageSrc}
|
||||
alt={testimonial.name}
|
||||
className="w-12 h-12 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">{testimonial.name}</p>
|
||||
<p className="text-sm text-foreground/60">{testimonial.handle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/80 line-clamp-4">{testimonial.shortText}</p>
|
||||
</div>
|
||||
<p className="text-xs text-accent text-center mt-4">Click to read full testimonial</p>
|
||||
</div>
|
||||
|
||||
{/* Back side */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-primary-cta rounded-lg p-6 flex flex-col justify-between border border-accent/20"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
WebkitBackfaceVisibility: 'hidden',
|
||||
transform: 'rotateY(180deg)'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<p className="text-primary-cta-text text-sm leading-relaxed">{testimonial.fullText}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{testimonial.imageSrc && (
|
||||
<img
|
||||
src={testimonial.imageSrc}
|
||||
alt={testimonial.name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-primary-cta-text">{testimonial.name}</p>
|
||||
<p className="text-xs text-primary-cta-text/70">{testimonial.handle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-primary-cta-text/50 text-center mt-2">Click to go back</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
@@ -213,4 +290,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user