first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,366 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Calendar, Music, Disc3, CalendarDays, Zap } from 'lucide-react';
|
||||
|
||||
/* ── static data ───────────────────────────────── */
|
||||
|
||||
const WEEK_DAYS = ['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Paz'];
|
||||
const ACTIVE_DAYS: Record<number, string> = {
|
||||
3: '#FF5A36',
|
||||
4: '#00E5FF',
|
||||
5: '#00E5FF',
|
||||
};
|
||||
|
||||
/* ── sub-components ────────────────────────────── */
|
||||
|
||||
function VinylDisc() {
|
||||
return (
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: 'linear' }}
|
||||
className="w-36 h-36 md:w-44 md:h-44 rounded-full relative flex-shrink-0"
|
||||
style={{
|
||||
background:
|
||||
'repeating-conic-gradient(#0a0f1e 0deg 18deg, #141e30 18deg 36deg)',
|
||||
boxShadow: '0 0 48px rgba(0,229,255,0.35), 0 0 80px rgba(0,229,255,0.12)',
|
||||
}}
|
||||
>
|
||||
{/* Grooves */}
|
||||
{[55, 45, 35].map((size) => (
|
||||
<div
|
||||
key={size}
|
||||
className="absolute rounded-full border border-white/[0.04]"
|
||||
style={{ inset: `${(100 - size) / 2}%` }}
|
||||
/>
|
||||
))}
|
||||
{/* Label */}
|
||||
<div
|
||||
className="absolute inset-[35%] rounded-full flex items-center justify-center"
|
||||
style={{ background: 'radial-gradient(circle, #00E5FF, #0084A8)' }}
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-white/80" />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function EqBars({ color }: { color: string }) {
|
||||
const heights = [0.4, 0.8, 0.5, 1, 0.65, 0.9, 0.45, 0.75, 0.55, 0.85];
|
||||
return (
|
||||
<div className="flex items-end gap-[3px] h-8">
|
||||
{heights.map((h, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="w-1.5 rounded-full origin-bottom"
|
||||
style={{ background: color, height: `${h * 100}%` }}
|
||||
animate={{ scaleY: [h, h > 0.6 ? 0.2 : 1, h] }}
|
||||
transition={{
|
||||
duration: 0.5 + Math.random() * 0.4,
|
||||
repeat: Infinity,
|
||||
repeatType: 'mirror',
|
||||
delay: i * 0.07,
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WineGlassIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M8 22h8" />
|
||||
<path d="M12 15v7" />
|
||||
<path d="M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z" />
|
||||
<path d="M7 10h10" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── main component ────────────────────────────── */
|
||||
|
||||
export default function Events() {
|
||||
const t = useTranslations('Events');
|
||||
|
||||
return (
|
||||
<section
|
||||
id="events"
|
||||
className="pt-28 pb-36 text-white relative overflow-hidden"
|
||||
style={{ background: '#080D18' }}
|
||||
>
|
||||
{/* Aurora background blobs */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div
|
||||
className="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full opacity-[0.12]"
|
||||
style={{ background: 'radial-gradient(circle, #00E5FF 0%, transparent 70%)' }}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full opacity-[0.1]"
|
||||
style={{ background: 'radial-gradient(circle, #FF5A36 0%, transparent 70%)' }}
|
||||
/>
|
||||
<div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full opacity-[0.05]"
|
||||
style={{ background: 'radial-gradient(circle, #FFA827 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Fine dot grid */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.035] pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px)',
|
||||
backgroundSize: '36px 36px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-6 lg:px-12 relative z-10 space-y-10">
|
||||
|
||||
{/* ── Header ───────────────────────────────── */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Zap size={13} className="text-coral" />
|
||||
<span className="text-xs tracking-[0.4em] uppercase font-black text-coral">
|
||||
Live Events
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-heading text-5xl md:text-6xl font-black leading-tight">
|
||||
{t('title')}
|
||||
</h2>
|
||||
<p className="text-white/45 mt-3 text-base max-w-md leading-relaxed">
|
||||
{t('description')}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.button
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="self-start lg:self-auto flex items-center gap-2 px-7 py-3.5 rounded-full font-black text-sm text-white flex-shrink-0 transition-all hover:scale-105"
|
||||
style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827)' }}
|
||||
>
|
||||
<CalendarDays size={15} />
|
||||
{t('view_calendar')}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* ── Weekly schedule bar ───────────────────── */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center gap-2 md:gap-4 bg-white/[0.04] rounded-2xl px-6 py-4 border border-white/[0.07]"
|
||||
>
|
||||
{WEEK_DAYS.map((day, i) => {
|
||||
const accent = ACTIVE_DAYS[i];
|
||||
const isActive = !!accent;
|
||||
return (
|
||||
<div key={day} className="flex-1 flex flex-col items-center gap-2">
|
||||
<span
|
||||
className={`text-[10px] font-black uppercase tracking-wider ${
|
||||
isActive ? 'text-white' : 'text-white/25'
|
||||
}`}
|
||||
>
|
||||
{day}
|
||||
</span>
|
||||
<div
|
||||
className={`w-1.5 h-1.5 rounded-full transition-all ${isActive ? 'scale-125' : ''}`}
|
||||
style={{
|
||||
background: isActive ? accent : 'rgba(255,255,255,0.12)',
|
||||
boxShadow: isActive ? `0 0 8px ${accent}` : 'none',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
|
||||
{/* ── Featured Event: DJ Nights ────────────── */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="border-spin-cyan rounded-3xl p-px overflow-hidden"
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-8 md:p-10 flex flex-col md:flex-row items-center gap-8 overflow-hidden relative"
|
||||
style={{ background: '#0C1828' }}
|
||||
>
|
||||
{/* Glow center */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at 80% 50%, rgba(0,229,255,0.08) 0%, transparent 60%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Left: text */}
|
||||
<div className="flex-1 relative z-10">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-[0.35em] px-3 py-1.5 rounded-full"
|
||||
style={{ background: '#00E5FF1A', color: '#00E5FF' }}
|
||||
>
|
||||
EN POPÜLER
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 text-white/40 text-xs">
|
||||
<Calendar size={11} />
|
||||
<span>{t('cards.dj.time')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-heading text-4xl md:text-5xl font-black mb-3 text-white leading-tight">
|
||||
{t('cards.dj.title')}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-3 mb-7">
|
||||
<Disc3 size={18} style={{ color: '#00E5FF' }} />
|
||||
<span className="text-white/50 text-sm">Open-air · Beach Stage</span>
|
||||
</div>
|
||||
|
||||
<EqBars color="#00E5FF" />
|
||||
</div>
|
||||
|
||||
{/* Right: vinyl */}
|
||||
<div className="relative z-10 flex-shrink-0">
|
||||
<VinylDisc />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* ── Secondary events: 2-col grid ─────────── */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
|
||||
{/* Rakı Geceleri */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="border-spin-coral rounded-3xl p-px group cursor-pointer"
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-7 h-full flex flex-col gap-5 relative overflow-hidden transition-colors duration-300 group-hover:bg-[#110a0a]"
|
||||
style={{ background: '#0C0808' }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-400 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at 20% 50%, rgba(255,90,54,0.1) 0%, transparent 65%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div
|
||||
className="w-12 h-12 rounded-2xl flex items-center justify-center"
|
||||
style={{ background: '#FF5A361A', color: '#FF5A36' }}
|
||||
>
|
||||
<WineGlassIcon />
|
||||
</div>
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full"
|
||||
style={{ background: '#FF5A361A', color: '#FF5A36' }}
|
||||
>
|
||||
PER
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-heading text-2xl font-black text-white mb-2">
|
||||
{t('cards.raki.title')}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1.5 text-sm text-white/40">
|
||||
<Calendar size={12} />
|
||||
<span>{t('cards.raki.time')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<EqBars color="#FF5A36" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Canlı Müzik */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="border-spin-amber rounded-3xl p-px group cursor-pointer"
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-7 h-full flex flex-col gap-5 relative overflow-hidden transition-colors duration-300 group-hover:bg-[#110d04]"
|
||||
style={{ background: '#0C0A04' }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-400 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at 80% 50%, rgba(255,168,39,0.1) 0%, transparent 65%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div
|
||||
className="w-12 h-12 rounded-2xl flex items-center justify-center"
|
||||
style={{ background: '#FFA8271A', color: '#FFA827' }}
|
||||
>
|
||||
<Music size={22} />
|
||||
</div>
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full"
|
||||
style={{ background: '#FFA8271A', color: '#FFA827' }}
|
||||
>
|
||||
★ ÖZEL
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-heading text-2xl font-black text-white mb-2">
|
||||
{t('cards.live_music.title')}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1.5 text-sm text-white/40">
|
||||
<Calendar size={12} />
|
||||
<span>{t('cards.live_music.time')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<EqBars color="#FFA827" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Wave → sand */}
|
||||
<div className="absolute bottom-0 left-0 w-full leading-none pointer-events-none">
|
||||
<svg viewBox="0 0 1440 64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" className="w-full h-16">
|
||||
<path d="M0,20 C360,64 720,0 1080,40 C1260,56 1380,10 1440,20 L1440,64 L0,64 Z" fill="#FFF8EE" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user