95 lines
3.6 KiB
TypeScript
95 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { motion } from 'framer-motion';
|
|
import { Waves, Leaf, Music } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
const features = [
|
|
{ icon: Waves, titleKey: 'card1_title', descKey: 'card1_desc', color: 'text-aqua', bg: 'bg-aqua/10' },
|
|
{ icon: Leaf, titleKey: 'card2_title', descKey: 'card2_desc', color: 'text-amber', bg: 'bg-amber/10' },
|
|
{ icon: Music, titleKey: 'card3_title', descKey: 'card3_desc', color: 'text-coral', bg: 'bg-coral/10' },
|
|
];
|
|
|
|
export default function About() {
|
|
const t = useTranslations('About');
|
|
|
|
return (
|
|
<section id="about" className="py-28 bg-sand text-midnight relative">
|
|
<div className="container mx-auto px-6 lg:px-12">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
|
|
|
{/* Left content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-8"
|
|
>
|
|
<div>
|
|
<span className="text-xs tracking-[0.4em] uppercase font-black text-coral mb-4 block">
|
|
— Beach & More
|
|
</span>
|
|
<h2 className="font-heading text-5xl md:text-6xl font-black leading-tight text-midnight mb-6">
|
|
{t('title')}
|
|
</h2>
|
|
<p className="text-lg leading-relaxed text-midnight/60">{t('description')}</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{features.map(({ icon: Icon, titleKey, descKey, color, bg }, i) => (
|
|
<motion.div
|
|
key={titleKey}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 + 0.2 }}
|
|
className="flex items-start gap-4 p-4 rounded-2xl hover:bg-sandy/50 transition-colors"
|
|
>
|
|
<div className={`p-3 rounded-xl ${bg} ${color} flex-shrink-0`}>
|
|
<Icon size={20} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-heading text-lg font-bold mb-0.5">{t(titleKey)}</h3>
|
|
<p className="text-midnight/55 text-sm leading-relaxed">{t(descKey)}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Right image */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="relative"
|
|
>
|
|
{/* Glow ring */}
|
|
<div
|
|
className="absolute inset-0 rounded-3xl opacity-30 blur-2xl scale-105"
|
|
style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827, #00BFA5)' }}
|
|
/>
|
|
<div className="relative h-[560px] w-full rounded-3xl overflow-hidden shadow-2xl">
|
|
<Image
|
|
src="https://picsum.photos/800/1100?random=2"
|
|
alt="Kozmos atmosferi"
|
|
fill
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
className="object-cover"
|
|
/>
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{ background: 'linear-gradient(to top, rgba(8,13,24,0.35) 0%, transparent 55%)' }}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|