474 lines
26 KiB
TypeScript
474 lines
26 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { useReveal } from '@/hooks/useReveal';
|
|
import GSAPAnimator from '@/components/GSAPAnimator';
|
|
import SectionEyebrow from '@/components/SectionEyebrow';
|
|
|
|
function Reveal({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
|
|
const { ref, visible } = useReveal();
|
|
return (
|
|
<div ref={ref} style={{
|
|
opacity: visible ? 1 : 0,
|
|
transform: visible ? 'translateY(0)' : 'translateY(48px)',
|
|
transition: `opacity 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s, transform 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s`,
|
|
}}>{children}</div>
|
|
);
|
|
}
|
|
|
|
export default function AboutUsPage() {
|
|
return (
|
|
<main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
|
|
<GSAPAnimator />
|
|
|
|
{/* ── HERO ── */}
|
|
<section style={{
|
|
minHeight: '100vh', background: 'radial-gradient(ellipse 120% 90% at 22% 0%, #3a2b5e 0%, #251c40 38%, #1a1530 100%)',
|
|
display: 'flex', alignItems: 'center',
|
|
padding: '120px 8% 80px',
|
|
margin: '20px', borderRadius: '32px',
|
|
position: 'relative', overflow: 'hidden',
|
|
}}>
|
|
{/* Background photo */}
|
|
<Image src="/images/stock/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
|
|
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,21,48,0.1) 0%, rgba(26,21,48,0.55) 85%)' }} />
|
|
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
|
|
{/* Accent blobs */}
|
|
<div style={{ position: 'absolute', top: '-12%', right: '-8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.22) 0%, transparent 70%)', filter: 'blur(10px)', pointerEvents: 'none' }} />
|
|
<div style={{ position: 'absolute', bottom: '-15%', left: '-10%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
|
{/* Big ghost text */}
|
|
<div style={{
|
|
position: 'absolute', top: '50%', left: '50%',
|
|
transform: 'translate(-50%,-50%)',
|
|
fontSize: 'clamp(120px, 22vw, 320px)', fontWeight: 900,
|
|
fontFamily: 'Sora, sans-serif', color: 'transparent',
|
|
WebkitTextStroke: '1px rgba(244,190,40,0.08)',
|
|
letterSpacing: '-0.06em', lineHeight: 1,
|
|
whiteSpace: 'nowrap', userSelect: 'none',
|
|
pointerEvents: 'none', zIndex: 0,
|
|
}}>LOYALY</div>
|
|
|
|
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
|
<div style={{ maxWidth: 760 }}>
|
|
<h1 data-gsap="heading" style={{
|
|
fontSize: 'clamp(52px, 9vw, 140px)', fontWeight: 800,
|
|
letterSpacing: '-0.06em', lineHeight: 0.88,
|
|
color: '#ffffff', margin: '0 0 36px', fontFamily: 'Sora, sans-serif',
|
|
}}>
|
|
The People<br />
|
|
<span style={{ color: '#f4be28' }}>Behind</span> Loyaly.
|
|
</h1>
|
|
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 560, margin: '0 auto' }}>
|
|
We're not just building a product. We're redefining retail, one store at a time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── OUR STORY ── */}
|
|
<section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
|
<div className="au-story-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'start' }}>
|
|
<Reveal>
|
|
<SectionEyebrow variant="line" style={{ marginBottom: 24 }}>Our Story</SectionEyebrow>
|
|
<h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
|
|
We started with<br />a simple idea.
|
|
</h2>
|
|
</Reveal>
|
|
<Reveal delay={0.15}>
|
|
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 32px' }}>
|
|
Offline retail deserves the same intelligence as online. A store owner in Coimbatore shouldn't be flying blind while an e-commerce algorithm knows exactly what every user wants.
|
|
</p>
|
|
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
|
|
Today, we're building a connected ecosystem where businesses grow smarter and customers shop better together.
|
|
</p>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── MISSION & VISION ── */}
|
|
<section style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(60px, 9vh, 104px) 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 28 }}>
|
|
{/* Ambient top glow */}
|
|
<div aria-hidden style={{ position: 'absolute', top: '-24%', left: '50%', transform: 'translateX(-50%)', width: 680, height: 420, background: 'radial-gradient(ellipse, rgba(244,190,40,0.12) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
|
|
|
{/* Section header */}
|
|
<div style={{ position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: 640, margin: '0 auto clamp(44px, 6vh, 68px)' }}>
|
|
<h2 style={{ margin: 0, fontSize: 'clamp(30px, 4.5vw, 60px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1, color: '#fff', fontFamily: 'Sora, sans-serif' }}>
|
|
What drives <span style={{ color: '#f4be28' }}>everything</span> we do.
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="au-mv-grid" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
|
|
{[
|
|
{
|
|
label: 'Mission', emoji: '🎯', bg: 'linear-gradient(160deg, #ffffff 0%, #fdf4e2 100%)', textColor: '#171512',
|
|
border: 'rgba(244,190,40,0.45)',
|
|
pillBg: 'rgba(244,190,40,0.14)', pillText: '#8a5a14', pillBorder: 'rgba(244,190,40,0.5)',
|
|
orb1: 'rgba(244,190,40,0.20)', orb2: 'rgba(255,152,0,0.14)',
|
|
gfx: 'rgba(244,190,40,0.38)',
|
|
body: 'Loyaly exists to close the gap between digital discovery and physical purchase. We give local stores the tools to compete, and give shoppers a reason to keep coming back.',
|
|
},
|
|
{
|
|
label: 'Vision', emoji: '🔮', bg: 'linear-gradient(160deg, #fff7e2 0%, #ffe6a8 100%)', textColor: '#171512',
|
|
border: 'rgba(244,190,40,0.55)',
|
|
pillBg: '#f4be28', pillText: '#171512', pillBorder: 'rgba(201,150,15,0.6)',
|
|
orb1: 'rgba(255,255,255,0.7)', orb2: 'rgba(244,190,40,0.3)',
|
|
gfx: 'rgba(201,150,15,0.32)',
|
|
body: 'Empowering every neighbourhood, making exceptional in-store experiences and real Lyts accessible to all.',
|
|
},
|
|
].map((mv, i) => (
|
|
<Reveal key={i} delay={i * 0.15}>
|
|
<div className="au-mv-card" style={{
|
|
position: 'relative',
|
|
padding: 'clamp(40px, 4vw, 60px)', borderRadius: 28, background: mv.bg,
|
|
border: `1px solid ${mv.border}`,
|
|
boxShadow: '0 24px 60px -30px rgba(23,21,18,0.22)',
|
|
height: '100%', minHeight: 360,
|
|
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 24,
|
|
margin: 0, boxSizing: 'border-box',
|
|
}}>
|
|
{/* Animated background orbs (clipped to the card) */}
|
|
<div className="au-mv-bg" aria-hidden style={{ position: 'absolute', inset: 0, borderRadius: 28, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
|
|
<span className="au-mv-orb au-mv-orb-1" style={{ position: 'absolute', top: '-18%', left: '-12%', width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb1} 0%, transparent 70%)` }} />
|
|
<span className="au-mv-orb au-mv-orb-2" style={{ position: 'absolute', bottom: '-20%', right: '-10%', width: 240, height: 240, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb2} 0%, transparent 70%)` }} />
|
|
</div>
|
|
|
|
{/* Pop-out corner sticker */}
|
|
<span aria-hidden style={{ position: 'absolute', top: -22, right: -14, fontSize: 46, transform: 'rotate(12deg)', zIndex: 2 }}>{mv.emoji}</span>
|
|
|
|
{/* Tilted sticker-pill label */}
|
|
<span style={{
|
|
position: 'relative', zIndex: 1,
|
|
display: 'inline-flex', alignItems: 'center', gap: 7, alignSelf: 'flex-start',
|
|
transform: 'rotate(-2deg)', padding: '8px 16px', borderRadius: 100,
|
|
background: mv.pillBg, color: mv.pillText, border: `1.5px solid ${mv.pillBorder}`,
|
|
fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif',
|
|
}}>{mv.emoji} {mv.label}</span>
|
|
|
|
<p style={{ position: 'relative', zIndex: 1, fontSize: 'clamp(21px, 2.4vw, 34px)', fontWeight: 500, lineHeight: 1.3, color: mv.textColor, fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.015em' }}>
|
|
{mv.body}
|
|
</p>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── MARKET OPPORTUNITY ── */}
|
|
<section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
|
<div className="au-market-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'start' }}>
|
|
<Reveal>
|
|
<SectionEyebrow variant="pill" style={{ marginBottom: 24 }}>Market Opportunity</SectionEyebrow>
|
|
<h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
|
|
13 Million Stores.<br />One Opportunity.
|
|
</h2>
|
|
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
|
|
India's retail market is one of the largest and fastest-growing in the world. We're building Loyaly for the stores that power it, and the shoppers who love them.
|
|
</p>
|
|
</Reveal>
|
|
<Reveal delay={0.15}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
{[
|
|
{ val: '13 Million+', label: 'Total Retail Stores Across India' },
|
|
{ val: '2 Million+', label: 'Organised & High-Footfall Stores' },
|
|
{ val: '50,000+', label: 'Stores In Our Launch Cities' },
|
|
].map((m) => (
|
|
<div key={m.label} style={{ padding: '28px 32px', borderRadius: 20, background: '#faf9f6', border: '1px solid rgba(0,0,0,0.06)' }}>
|
|
<div style={{ fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 900, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{m.val}</div>
|
|
<div style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', marginTop: 6 }}>{m.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── TEAM ── */}
|
|
<TeamCarousel />
|
|
|
|
{/* ── CLOSE: POINT TO THE CREW ── */}
|
|
<section style={{
|
|
padding: '160px 8%', background: '#f4be28',
|
|
margin: '0 20px 20px', borderRadius: 24,
|
|
display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
|
|
position: 'relative', overflow: 'hidden',
|
|
}}>
|
|
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.2) 0%,transparent 60%)', pointerEvents: 'none' }} />
|
|
<Reveal>
|
|
<p style={{ fontSize: 'clamp(32px, 6vw, 90px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.95, color: '#111', margin: '0 0 48px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
|
|
"We're not just building a product. We're redefining retail."
|
|
</p>
|
|
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
|
|
<Link href="/solutions_page" style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 10,
|
|
padding: '18px 44px', background: '#111', color: '#f4be28',
|
|
fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
|
|
fontFamily: 'Sora, sans-serif',
|
|
}}>See Our Products →</Link>
|
|
<Link href="/contacts" style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 10,
|
|
padding: '18px 44px', background: 'rgba(0,0,0,0.08)', color: '#111',
|
|
fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none',
|
|
fontFamily: 'Sora, sans-serif', border: '1px solid rgba(0,0,0,0.15)',
|
|
}}>Join Us</Link>
|
|
</div>
|
|
</Reveal>
|
|
</section>
|
|
|
|
<style>{`
|
|
/* Animated gradient glow ring behind each card */
|
|
.au-mv-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(130deg, #f4be28, #ff9f1c, #f4be28);
|
|
background-size: 220% 220%;
|
|
z-index: -1;
|
|
filter: blur(11px);
|
|
opacity: 0.45;
|
|
animation: auMvGlow 7s ease-in-out infinite;
|
|
}
|
|
@keyframes auMvGlow {
|
|
0%, 100% { background-position: 0% 50%; opacity: 0.35; }
|
|
50% { background-position: 100% 50%; opacity: 0.6; }
|
|
}
|
|
.au-mv-orb { filter: blur(26px); will-change: transform; }
|
|
.au-mv-orb-1 { animation: auMvDrift1 10s ease-in-out infinite; }
|
|
.au-mv-orb-2 { animation: auMvDrift2 13s ease-in-out infinite; }
|
|
@keyframes auMvDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(44px, -34px) scale(1.2); } }
|
|
@keyframes auMvDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-38px, 30px) scale(1.16); } }
|
|
.au-mv-gfx { animation: auMvGfxFloat 16s ease-in-out infinite; }
|
|
@keyframes auMvGfxFloat {
|
|
0%, 100% { transform: translate(0, 0) scale(0.82); }
|
|
25% { transform: translate(-34px, -22px) scale(1); }
|
|
50% { transform: translate(-14px, -48px) scale(1.22); }
|
|
75% { transform: translate(-42px, -14px) scale(1); }
|
|
}
|
|
.au-mv-ringspin { transform-box: fill-box; transform-origin: center; animation: auMvSpin 12s linear infinite; }
|
|
@keyframes auMvSpin { to { transform: rotate(360deg); } }
|
|
.au-mv-ringpulse { transform-box: fill-box; transform-origin: center; animation: auMvRingPulse 4.5s ease-in-out infinite; }
|
|
@keyframes auMvRingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.65; } }
|
|
.au-mv-dot { transform-box: fill-box; transform-origin: center; animation: auMvDotPulse 1.8s ease-in-out infinite; }
|
|
.au-mv-dot-2 { animation-delay: 0.6s; }
|
|
.au-mv-dot-3 { animation-delay: 1.2s; }
|
|
@keyframes auMvDotPulse { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.9); opacity: 0.2; } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.au-mv-orb-1, .au-mv-orb-2, .au-mv-card::before, .au-mv-gfx, .au-mv-ringspin, .au-mv-ringpulse, .au-mv-dot { animation: none !important; }
|
|
}
|
|
@media (max-width: 860px) {
|
|
.au-story-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
|
|
.au-market-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
|
|
.au-mv-grid { grid-template-columns: 1fr !important; }
|
|
.au-mv-grid > div > div { padding: 48px 32px !important; min-height: 280px !important; }
|
|
}
|
|
`}</style>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
/* ── Team Carousel ─────────────────────────────────────────────────────── */
|
|
|
|
const TEAM_MEMBERS = [
|
|
{ name: 'Coming Soon', role: 'Co-Founder & CEO', gradient: 'linear-gradient(160deg,#1a0a3a 0%,#4a2080 100%)', initials: '?' },
|
|
{ name: 'Coming Soon', role: 'Head of Product', gradient: 'linear-gradient(160deg,#0a1a3a 0%,#1a5080 100%)', initials: '?' },
|
|
{ name: 'Coming Soon', role: 'Lead Engineer', gradient: 'linear-gradient(160deg,#1a1200 0%,#f4be28 100%)', initials: '✦' },
|
|
{ name: 'Coming Soon', role: 'Head of Design', gradient: 'linear-gradient(160deg,#0a2a1a 0%,#1a8050 100%)', initials: '?' },
|
|
{ name: 'Coming Soon', role: 'Growth & Marketing', gradient: 'linear-gradient(160deg,#2a0a1a 0%,#80203a 100%)', initials: '?' },
|
|
];
|
|
|
|
function TeamCarousel() {
|
|
const [active, setActive] = useState(2);
|
|
|
|
const CARD_W = 320;
|
|
const CARD_GAP = 24;
|
|
const STEP = CARD_W + CARD_GAP;
|
|
|
|
return (
|
|
<section style={{ padding: '100px 0 120px', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, overflow: 'hidden', position: 'relative' }}>
|
|
{/* Grid bg */}
|
|
<div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '60px 60px' }} />
|
|
|
|
{/* Header */}
|
|
<div style={{ textAlign: 'center', marginBottom: 72, position: 'relative', zIndex: 2, padding: '0 8%' }}>
|
|
<SectionEyebrow variant="dot" style={{ marginBottom: 16 }}>The Team</SectionEyebrow>
|
|
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>
|
|
Builders. Thinkers.<br />Retail obsessives.
|
|
</h2>
|
|
<p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
|
|
Profiles coming soon. We're still busy building the future of retail.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Carousel viewport */}
|
|
<div style={{ position: 'relative', zIndex: 2, height: 'clamp(380px,48vw,560px)', overflow: 'hidden' }}>
|
|
{/* Sliding track — translate so active card is always centered */}
|
|
<div style={{
|
|
display: 'flex',
|
|
gap: CARD_GAP,
|
|
alignItems: 'center',
|
|
height: '100%',
|
|
position: 'absolute',
|
|
left: '50%',
|
|
transform: `translateX(calc(-50% - ${(active - 2) * STEP}px))`,
|
|
transition: 'transform 0.6s cubic-bezier(0.22,1,0.36,1)',
|
|
paddingLeft: STEP * 2,
|
|
paddingRight: STEP * 2,
|
|
}}>
|
|
{TEAM_MEMBERS.map((member, i) => {
|
|
const dist = Math.abs(i - active);
|
|
const isActive = i === active;
|
|
const scale = isActive ? 1 : dist === 1 ? 0.82 : 0.68;
|
|
const blur = isActive ? 0 : dist === 1 ? 2 : 4;
|
|
const opacity = isActive ? 1 : dist === 1 ? 0.72 : 0.42;
|
|
const cardH = isActive ? '100%' : dist === 1 ? '82%' : '68%';
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
onClick={() => setActive(i)}
|
|
style={{
|
|
flexShrink: 0,
|
|
width: CARD_W,
|
|
height: cardH,
|
|
borderRadius: 32,
|
|
background: member.gradient,
|
|
cursor: isActive ? 'default' : 'pointer',
|
|
filter: `blur(${blur}px)`,
|
|
transform: `scale(${scale})`,
|
|
opacity,
|
|
transition: 'all 0.6s cubic-bezier(0.22,1,0.36,1)',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
boxShadow: isActive ? '0 40px 100px rgba(0,0,0,0.75)' : '0 10px 40px rgba(0,0,0,0.35)',
|
|
border: isActive ? '1.5px solid rgba(244,190,40,0.4)' : '1px solid rgba(255,255,255,0.07)',
|
|
alignSelf: 'center',
|
|
}}
|
|
>
|
|
{/* Dark gradient overlay */}
|
|
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.8) 100%)', zIndex: 2 }} />
|
|
|
|
{/* Watermark */}
|
|
<div style={{
|
|
position: 'absolute', top: '40%', left: '50%',
|
|
transform: 'translate(-50%,-50%)',
|
|
fontSize: 96, fontWeight: 900,
|
|
color: 'rgba(255,255,255,0.06)', fontFamily: 'Sora, sans-serif',
|
|
userSelect: 'none', pointerEvents: 'none', lineHeight: 1,
|
|
}}>{member.initials}</div>
|
|
|
|
{/* Avatar */}
|
|
<div style={{
|
|
position: 'absolute', top: '35%', left: '50%',
|
|
transform: 'translate(-50%,-50%)',
|
|
width: isActive ? 76 : 52, height: isActive ? 76 : 52,
|
|
borderRadius: '50%',
|
|
background: 'rgba(255,255,255,0.07)',
|
|
border: `2px solid rgba(244,190,40,${isActive ? 0.4 : 0.2})`,
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
transition: 'all 0.6s ease', zIndex: 3,
|
|
}}>
|
|
<div style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgba(244,190,40,0.15)', border: '1px solid rgba(244,190,40,0.3)' }} />
|
|
</div>
|
|
|
|
{/* Name & role */}
|
|
<div style={{
|
|
position: 'absolute', bottom: 0, left: 0, right: 0,
|
|
padding: '20px 22px 26px', zIndex: 4,
|
|
opacity: isActive ? 1 : 0,
|
|
transition: 'opacity 0.4s ease',
|
|
}}>
|
|
<div style={{ fontSize: 17, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginBottom: 4 }}>{member.name}</div>
|
|
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>{member.role}</div>
|
|
</div>
|
|
|
|
{/* Gold dot */}
|
|
{isActive && (
|
|
<div style={{ position: 'absolute', top: 18, right: 18, zIndex: 4, width: 10, height: 10, borderRadius: '50%', background: '#f4be28', boxShadow: '0 0 14px rgba(244,190,40,0.9)' }} />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Edge fade masks */}
|
|
<div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(90deg,#07070d 0%,transparent 18%,transparent 82%,#07070d 100%)', zIndex: 10 }} />
|
|
</div>
|
|
|
|
{/* Navigation dots + arrow buttons */}
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 24, marginTop: 44, position: 'relative', zIndex: 2 }}>
|
|
|
|
{/* Left arrow */}
|
|
<button
|
|
onClick={() => setActive(a => Math.max(0, a - 1))}
|
|
disabled={active === 0}
|
|
className="carousel-arrow"
|
|
style={{
|
|
width: 48, height: 48, borderRadius: '50%', border: '1.5px solid rgba(244,190,40,0.35)',
|
|
background: active === 0 ? 'rgba(255,255,255,0.04)' : 'rgba(244,190,40,0.1)',
|
|
color: active === 0 ? 'rgba(255,255,255,0.2)' : '#f4be28',
|
|
cursor: active === 0 ? 'default' : 'pointer',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
transition: 'all 0.3s ease',
|
|
animation: active > 0 ? 'arrowPulse 2s ease-in-out infinite' : 'none',
|
|
}}
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M19 12H5M12 5l-7 7 7 7"/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Dots */}
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
{TEAM_MEMBERS.map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setActive(i)}
|
|
style={{
|
|
width: i === active ? 28 : 8, height: 8,
|
|
borderRadius: 4, border: 'none', cursor: 'pointer', padding: 0,
|
|
background: i === active ? '#f4be28' : 'rgba(255,255,255,0.2)',
|
|
transition: 'all 0.35s ease',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right arrow */}
|
|
<button
|
|
onClick={() => setActive(a => Math.min(TEAM_MEMBERS.length - 1, a + 1))}
|
|
disabled={active === TEAM_MEMBERS.length - 1}
|
|
className="carousel-arrow"
|
|
style={{
|
|
width: 48, height: 48, borderRadius: '50%', border: '1.5px solid rgba(244,190,40,0.35)',
|
|
background: active === TEAM_MEMBERS.length - 1 ? 'rgba(255,255,255,0.04)' : 'rgba(244,190,40,0.1)',
|
|
color: active === TEAM_MEMBERS.length - 1 ? 'rgba(255,255,255,0.2)' : '#f4be28',
|
|
cursor: active === TEAM_MEMBERS.length - 1 ? 'default' : 'pointer',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
transition: 'all 0.3s ease',
|
|
animation: active < TEAM_MEMBERS.length - 1 ? 'arrowPulse 2s ease-in-out 0.3s infinite' : 'none',
|
|
}}
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes arrowPulse {
|
|
0%,100% { box-shadow: 0 0 0 0 rgba(244,190,40,0); transform: scale(1); }
|
|
50% { box-shadow: 0 0 0 8px rgba(244,190,40,0.15); transform: scale(1.08); }
|
|
}
|
|
.carousel-arrow:hover:not(:disabled) {
|
|
background: rgba(244,190,40,0.22) !important;
|
|
border-color: rgba(244,190,40,0.7) !important;
|
|
transform: scale(1.12) !important;
|
|
box-shadow: 0 0 20px rgba(244,190,40,0.3) !important;
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
}
|