Update src/app/page.tsx
This commit is contained in:
127
src/app/page.tsx
127
src/app/page.tsx
@@ -6,22 +6,12 @@ import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboard
|
|||||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||||
import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
|
import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Quote, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({});
|
|
||||||
|
|
||||||
const toggleFlip = (id: string) => {
|
|
||||||
setFlippedCards(prev => ({
|
|
||||||
...prev,
|
|
||||||
[id]: !prev[id]
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="expand-hover"
|
defaultButtonVariant="expand-hover"
|
||||||
@@ -136,109 +126,42 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<div className="py-16 md:py-24">
|
<TestimonialCardThirteen
|
||||||
<div className="w-content-width mx-auto px-6">
|
title="What Our Members Say"
|
||||||
<div className="mb-12">
|
description="Real stories from computer club members about their learning journey and growth."
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">What Our Members Say</h2>
|
tag="Community"
|
||||||
<p className="text-lg text-foreground/75">Real stories from computer club members about their learning journey and growth.</p>
|
tagIcon={MessageSquare}
|
||||||
</div>
|
testimonials={[
|
||||||
|
|
||||||
<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: "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", 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: "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", 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: "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", 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: "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", 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: "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", 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"
|
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"
|
||||||
}
|
}
|
||||||
].map((testimonial) => (
|
]}
|
||||||
<div
|
showRating={true}
|
||||||
key={testimonial.id}
|
textboxLayout="default"
|
||||||
className="h-64 cursor-pointer perspective"
|
animationType="slide-up"
|
||||||
onClick={() => toggleFlip(testimonial.id)}
|
useInvertedBackground={false}
|
||||||
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>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
|
|||||||
Reference in New Issue
Block a user