Update src/app/page.tsx
This commit is contained in:
150
src/app/page.tsx
150
src/app/page.tsx
@@ -5,51 +5,51 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Zap, Users, Award, Handshake, Github, Linkedin, Twitter } from "lucide-react";
|
||||
import { Zap, Users, Award, Handshake } from "lucide-react";
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [flippedCards, setFlippedCards] = useState<{[key: string]: boolean}>({});
|
||||
const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
|
||||
|
||||
const toggleFlip = (memberId: string) => {
|
||||
setFlippedCards(prev => ({
|
||||
setFlipped(prev => ({
|
||||
...prev,
|
||||
[memberId]: !prev[memberId]
|
||||
}));
|
||||
};
|
||||
|
||||
// Team members with social links
|
||||
const teamMembers = [
|
||||
{
|
||||
id: "1", name: "Alex Johnson", role: "Club President", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=1", imageAlt: "Alex Johnson, Club President", socials: [
|
||||
{ icon: Github, href: "https://github.com/alexjohnson", label: "GitHub" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com/in/alexjohnson", label: "LinkedIn" },
|
||||
{ icon: Twitter, href: "https://twitter.com/alexjohnson", label: "Twitter" }
|
||||
{ icon: "linkedin", url: "https://linkedin.com/in/alexjohnson" },
|
||||
{ icon: "github", url: "https://github.com/alexjohnson" },
|
||||
{ icon: "twitter", url: "https://twitter.com/alexjohnson" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2", name: "Sarah Chen", role: "VP of Projects", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=2", imageAlt: "Sarah Chen, VP of Projects", socials: [
|
||||
{ icon: Github, href: "https://github.com/sarahchen", label: "GitHub" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com/in/sarahchen", label: "LinkedIn" },
|
||||
{ icon: Twitter, href: "https://twitter.com/sarahchen", label: "Twitter" }
|
||||
{ icon: "linkedin", url: "https://linkedin.com/in/sarahchen" },
|
||||
{ icon: "github", url: "https://github.com/sarahchen" },
|
||||
{ icon: "twitter", url: "https://twitter.com/sarahchen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3", name: "Marcus Williams", role: "Tech Lead", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=3", imageAlt: "Marcus Williams, Tech Lead", socials: [
|
||||
{ icon: Github, href: "https://github.com/marcuswilliams", label: "GitHub" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com/in/marcuswilliams", label: "LinkedIn" },
|
||||
{ icon: Twitter, href: "https://twitter.com/marcuswilliams", label: "Twitter" }
|
||||
{ icon: "linkedin", url: "https://linkedin.com/in/marcuswilliams" },
|
||||
{ icon: "github", url: "https://github.com/marcuswilliams" },
|
||||
{ icon: "twitter", url: "https://twitter.com/marcuswilliams" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4", name: "Emily Rodriguez", role: "Community Manager", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=4", imageAlt: "Emily Rodriguez, Community Manager", socials: [
|
||||
{ icon: Github, href: "https://github.com/emilyrodriguez", label: "GitHub" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com/in/emilyrodriguez", label: "LinkedIn" },
|
||||
{ icon: Twitter, href: "https://twitter.com/emilyrodriguez", label: "Twitter" }
|
||||
{ icon: "linkedin", url: "https://linkedin.com/in/emilyrodriguez" },
|
||||
{ icon: "github", url: "https://github.com/emilyrodriguez" },
|
||||
{ icon: "twitter", url: "https://twitter.com/emilyrodriguez" }
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -137,85 +137,75 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<div className="w-full">
|
||||
<div className="mx-auto w-content-width px-vw-1_5">
|
||||
<div className="flex flex-col gap-vw-2 mb-vw-3">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-accent/10 px-4 py-2 mb-4">
|
||||
<Users className="w-4 h-4" />
|
||||
<span className="text-sm font-medium text-foreground/70">Leadership</span>
|
||||
</div>
|
||||
<h2 className="text-5xl font-medium text-foreground mb-4">Meet Our Team</h2>
|
||||
<p className="text-foreground/70">The passionate individuals driving innovation and mentorship within CodeClub.</p>
|
||||
<div className="w-full py-20">
|
||||
<div className="w-full max-w-screen-2xl mx-auto px-4 md:px-8">
|
||||
<div className="mb-12">
|
||||
<div className="inline-flex items-center gap-2 mb-4">
|
||||
<Users className="w-5 h-5" />
|
||||
<span className="text-sm font-medium">Leadership</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Meet Our Team</h2>
|
||||
<p className="text-lg text-foreground/80">The passionate individuals driving innovation and mentorship within CodeClub.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{teamMembers.map((member) => {
|
||||
const isFlipped = flippedCards[member.id];
|
||||
return (
|
||||
<div key={member.id} className="h-96">
|
||||
{teamMembers.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="h-96 cursor-pointer perspective"
|
||||
onClick={() => toggleFlip(member.id)}
|
||||
>
|
||||
<div
|
||||
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||
style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: flipped[member.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
||||
}}
|
||||
>
|
||||
{/* Front side - Image */}
|
||||
<div
|
||||
className="relative w-full h-full cursor-pointer transition-transform duration-500 transform-gpu"
|
||||
style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
||||
}}
|
||||
onClick={() => toggleFlip(member.id)}
|
||||
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-4 flex flex-col items-center justify-center"
|
||||
style={{ backfaceVisibility: 'hidden' }}
|
||||
>
|
||||
{/* Front side - Profile */}
|
||||
<div
|
||||
className="absolute w-full h-full rounded-lg overflow-hidden bg-card border border-accent/20 flex flex-col items-end justify-end p-6 shadow-lg"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden'
|
||||
}}
|
||||
>
|
||||
<div className="w-full h-64 mb-4 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={member.imageSrc}
|
||||
alt={member.imageAlt}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent" />
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-xl font-semibold text-white">{member.name}</h3>
|
||||
<p className="text-sm text-white/80">{member.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-center">{member.name}</h3>
|
||||
<p className="text-sm text-foreground/60 text-center mt-2">{member.role}</p>
|
||||
<p className="text-xs text-foreground/50 text-center mt-4">Click to view social links</p>
|
||||
</div>
|
||||
|
||||
{/* Back side - Social Links */}
|
||||
<div
|
||||
className="absolute w-full h-full rounded-lg overflow-hidden bg-primary-cta border border-accent/20 flex flex-col items-center justify-center p-6 shadow-lg"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
transform: 'rotateY(180deg)'
|
||||
}}
|
||||
>
|
||||
<div className="text-center mb-6">
|
||||
<p className="text-white font-medium text-lg">Connect</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
{member.socials.map((social) => {
|
||||
const Icon = social.icon;
|
||||
return (
|
||||
<a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-white/20 hover:bg-white/30 text-white transition-colors"
|
||||
title={social.label}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
<span className="text-sm font-medium">{social.label}</span>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* Back side - Social Links */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-gradient-to-br from-primary-cta to-primary-cta/80 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
transform: 'rotateY(180deg)'
|
||||
}}
|
||||
>
|
||||
<h3 className="text-xl font-bold text-white mb-6 text-center">{member.name}</h3>
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
{member.socials.map((social, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={social.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full py-3 px-4 bg-white/20 hover:bg-white/30 text-white rounded-lg text-center font-medium transition-colors capitalize"
|
||||
>
|
||||
{social.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-white/70 text-center mt-6">Click to flip back</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user