93 lines
4.0 KiB
TypeScript
93 lines
4.0 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { Hammer, Truck, Building2 } from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const SERVICES = [
|
||
{
|
||
id: "01",
|
||
title: "Mobil Vinç",
|
||
description: "Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.",
|
||
icon: Hammer,
|
||
bg: "bg-surface-container",
|
||
},
|
||
{
|
||
id: "02",
|
||
title: "Ağır Nakliyat",
|
||
description: "Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.",
|
||
icon: Truck,
|
||
bg: "bg-surface-container-high",
|
||
},
|
||
{
|
||
id: "03",
|
||
title: "Sepetli Platform",
|
||
description: "Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.",
|
||
icon: Building2,
|
||
bg: "bg-surface-container-highest",
|
||
},
|
||
];
|
||
|
||
export function ServicesPreview() {
|
||
return (
|
||
<section className="py-24 md:py-32 px-6 md:px-12 bg-surface" id="Services">
|
||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 md:mb-24 gap-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-3xl"
|
||
>
|
||
<span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Hizmetlerimiz</span>
|
||
<h2 className="font-headline text-4xl md:text-7xl font-bold tracking-tighter text-white leading-[0.9] text-balance">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
|
||
</motion.div>
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
className="text-left md:text-right"
|
||
>
|
||
<p className="text-on-surface-variant font-body text-base md:text-lg max-w-sm">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3">
|
||
{SERVICES.map((service, index) => (
|
||
<motion.div
|
||
key={service.title}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className={cn(
|
||
"group relative aspect-square overflow-hidden p-8 md:p-16 transition-all duration-500",
|
||
service.bg
|
||
)}
|
||
>
|
||
<div className="relative z-10 h-full flex flex-col justify-between">
|
||
<service.icon className="w-12 h-12 md:w-16 md:h-16 text-primary group-hover:scale-110 transition-transform duration-500" strokeWidth={1} />
|
||
<div>
|
||
<h3 className="font-headline text-2xl md:text-4xl font-bold mb-4 uppercase leading-none">{service.title}</h3>
|
||
<p className="text-on-surface-variant text-sm md:text-base leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{service.description}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Number Background */}
|
||
<div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity pointer-events-none">
|
||
<span className="font-headline text-[12rem] font-black leading-none">{service.id}</span>
|
||
</div>
|
||
|
||
{/* Hover Overlay */}
|
||
<div className="absolute inset-0 bg-primary translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex flex-col items-center justify-center gap-6 p-8">
|
||
<p className="text-on-primary text-center font-body font-medium leading-tight">Profesyonel operasyonel destek ve kiralama seçenekleri için.</p>
|
||
<button className="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all">
|
||
Detaylar
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|