fix: activate all broken buttons and links across the site with WhatsApp integration
This commit is contained in:
@@ -1,91 +1,83 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Hammer, Truck, Building2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
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",
|
||||
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"
|
||||
},
|
||||
{
|
||||
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",
|
||||
title: "Mobil Vinç",
|
||||
description: "300-500 ton kapasiteli teleskopik vinç çözümleri.",
|
||||
image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?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 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
|
||||
)}
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
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>
|
||||
|
||||
{/* 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 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
|
||||
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user