Update src/app/page.tsx
This commit is contained in:
131
src/app/page.tsx
131
src/app/page.tsx
@@ -10,33 +10,36 @@ 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';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [flipped, setFlipped] = useState<Record<string, boolean>>({});
|
||||
const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({});
|
||||
|
||||
const toggleFlip = (id: string) => {
|
||||
setFlipped(prev => ({ ...prev, [id]: !prev[id] }));
|
||||
setFlippedCards(prev => ({
|
||||
...prev,
|
||||
[id]: !prev[id]
|
||||
}));
|
||||
};
|
||||
|
||||
const testimonialCards = [
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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."
|
||||
}
|
||||
];
|
||||
|
||||
@@ -154,62 +157,97 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<div className="w-full py-20 px-6 md:px-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<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-accent/10 text-sm font-medium">
|
||||
<span className="flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
Community Voices
|
||||
</span>
|
||||
<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-foreground/70">Real stories from computer club members about their learning journey and growth.</p>
|
||||
<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">
|
||||
{testimonialCards.map((card) => {
|
||||
const isFlipped = flipped[card.id];
|
||||
{testimonials.map((testimonial) => {
|
||||
const isFlipped = flippedCards[testimonial.id];
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
className="h-96 cursor-pointer perspective"
|
||||
onClick={() => toggleFlip(card.id)}
|
||||
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-style:preserve-3d]"
|
||||
<div className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||
style={{
|
||||
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
||||
}}
|
||||
>
|
||||
{/* Front of card */}
|
||||
{/* Front */}
|
||||
<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' }}
|
||||
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'
|
||||
}}
|
||||
>
|
||||
{card.imageSrc && (
|
||||
{/* Author Info at Top */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<img
|
||||
src={card.imageSrc}
|
||||
alt={card.imageAlt}
|
||||
className="w-24 h-24 rounded-full object-cover mb-4 border-2 border-primary-cta"
|
||||
src={testimonial.imageSrc}
|
||||
alt={testimonial.imageAlt}
|
||||
className="w-12 h-12 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Back of card */}
|
||||
{/* 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 bg-card rounded-lg p-6 flex items-center justify-center text-center border border-accent/20 [backface-visibility:hidden]"
|
||||
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)',
|
||||
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>
|
||||
{/* 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>
|
||||
@@ -218,10 +256,13 @@ export default function LandingPage() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<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"
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user