62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
|
||
export default function About() {
|
||
return (
|
||
<section id="about" className="py-24 md:py-32 bg-primary relative">
|
||
<div className="container mx-auto px-6 md:px-12 flex flex-col md:flex-row items-center gap-16">
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
transition={{ duration: 0.8 }}
|
||
className="w-full md:w-1/2 relative"
|
||
>
|
||
<div className="relative aspect-[4/5] md:aspect-square w-full">
|
||
<div className="absolute inset-0 bg-accent1/10 translate-x-4 translate-y-4" />
|
||
<img
|
||
src="https://images.unsplash.com/photo-1574096079513-d8259312b785?q=80&w=1974&auto=format&fit=crop"
|
||
alt="Luna Cocktail Vibe"
|
||
className="w-full h-full object-cover grayscale-[30%] hover:grayscale-0 transition-all duration-700"
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="w-full md:w-1/2"
|
||
>
|
||
<h2 className="font-serif text-4xl md:text-5xl text-text-main mb-6">
|
||
Luna is not just a bar.<br />
|
||
<span className="text-accent1 italic">It's a lifestyle.</span>
|
||
</h2>
|
||
|
||
<div className="w-16 h-1 bg-accent2 mb-8" />
|
||
|
||
<p className="text-text-main/80 text-lg leading-relaxed font-light mb-6">
|
||
Muğla'nın kalbinde, rooftop konseptiyle premium bir kaçış noktası.
|
||
Golden hour esnasında eşsiz kokteyl deneyimiyle başlayan hikayemiz,
|
||
gecenin ilerleyen saatlerinde canlı müzik ve DJ performanslarıyla ritmini artırıyor.
|
||
</p>
|
||
|
||
<p className="text-text-main/80 text-lg leading-relaxed font-light mb-10">
|
||
Karanlık ama sıcak, lüks ama erişilebilir atmosferimizde; imza kokteyllerimiz,
|
||
Soul Club ve Latin Geceleri gibi özel konseptlerimizle
|
||
kendinizi müziğin ve lezzetin akışına bırakın.
|
||
</p>
|
||
|
||
<p className="font-serif text-xl text-text-main italic border-l-2 border-accent1 pl-4">
|
||
"Nights like these, only at Luna."
|
||
</p>
|
||
</motion.div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|