64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { ArrowRight } from "lucide-react";
|
||
import { motion } from "framer-motion";
|
||
|
||
export default function Hero() {
|
||
return (
|
||
<section className="pt-32 pb-0 px-6 md:px-12">
|
||
{/* Main Headline */}
|
||
<div className="max-w-7xl mx-auto py-16 md:py-24">
|
||
<motion.h1
|
||
initial={{ y: 40, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
|
||
className="editorial-headline text-4xl md:text-6xl lg:text-[5.5rem] text-black uppercase"
|
||
>
|
||
Dijital Varlık ve Görsel<br />
|
||
Hikaye <span className="text-primary">Mimarlığı.</span>
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
initial={{ y: 20, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: 1, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||
className="text-[11px] md:text-[13px] tracking-[0.15em] text-black/40 max-w-2xl leading-[2] mt-8"
|
||
>
|
||
Profesyonel prodüksiyondan akıllı reklam yönetimine kadar markanızın tüm dijital ekosistemini estetikle şekillendiriyoruz.
|
||
</motion.p>
|
||
</div>
|
||
|
||
{/* Divider */}
|
||
<motion.div
|
||
initial={{ scaleX: 0 }}
|
||
animate={{ scaleX: 1 }}
|
||
transition={{ duration: 1.5, delay: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||
className="section-divider origin-left"
|
||
/>
|
||
|
||
{/* Bottom info row */}
|
||
<motion.div
|
||
initial={{ y: 20, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: 1, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||
className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 py-8 gap-8"
|
||
>
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40">Konum</span>
|
||
<span className="text-[11px] text-black/70">Muğla, Türkiye</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40">Hizmetler</span>
|
||
<span className="text-[11px] text-black/70">Drone · Video · Sosyal Medya · Reklam</span>
|
||
</div>
|
||
<div className="flex items-center gap-4 md:justify-end">
|
||
<Link href="/contact" className="button-primary group">
|
||
Teklif Al
|
||
<ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
);
|
||
} |