86 lines
3.6 KiB
TypeScript
86 lines
3.6 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from "framer-motion";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowRight } from "lucide-react";
|
||
|
||
const SERVICES = [
|
||
{
|
||
title: "Ağır Nakliyat",
|
||
description: "Gabari dışı yüklerin özel low-bed araçlarla taşınması.",
|
||
image: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=2070&auto=format&fit=crop"
|
||
},
|
||
{
|
||
title: "Mobil Vinç",
|
||
description: "300-500 ton kapasiteli teleskopik vinç çözümleri.",
|
||
image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
|
||
},
|
||
{
|
||
title: "Sepetli Platform",
|
||
description: "75 metreye kadar yüksek irtifa çalışma alanları.",
|
||
image: "https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
|
||
}
|
||
];
|
||
|
||
export function ServicesPreview() {
|
||
return (
|
||
<section className="py-24 bg-surface text-on-surface">
|
||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
|
||
<div className="max-w-2xl">
|
||
<span className="font-label text-xs uppercase tracking-[0.4em] text-primary font-bold mb-4 block">Uzmanlık Alanlarımız</span>
|
||
<h2 className="font-headline text-5xl md:text-8xl font-black uppercase leading-none tracking-tighter">
|
||
Büyük Yüklerin <br/> <span className="text-primary">Kusursuz</span> Taşıyıcısı
|
||
</h2>
|
||
</div>
|
||
<Link
|
||
href="/hizmetler"
|
||
className="group flex items-center gap-4 text-on-surface font-headline font-bold uppercase tracking-widest text-sm"
|
||
>
|
||
Tüm Hizmetler
|
||
<div className="bg-primary p-4 text-on-primary group-hover:translate-x-4 transition-transform">
|
||
<ArrowRight size={20} />
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-px bg-outline-variant/20">
|
||
{SERVICES.map((service, idx) => (
|
||
<motion.div
|
||
key={service.title}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: idx * 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="group relative h-[600px] overflow-hidden flex flex-col justify-end p-12"
|
||
>
|
||
<Image
|
||
src={service.image}
|
||
alt={service.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 33vw"
|
||
className="object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-1000 z-0"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent z-10" />
|
||
|
||
<div className="relative z-20">
|
||
<h3 className="font-headline text-4xl font-black text-white uppercase mb-4 tracking-tighter">{service.title}</h3>
|
||
<p className="font-body text-on-surface-variant mb-8 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500">
|
||
{service.description}
|
||
</p>
|
||
<Link
|
||
href="/hizmetler"
|
||
className="bg-primary text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all"
|
||
>
|
||
Detaylar
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|