176 lines
7.4 KiB
TypeScript
176 lines
7.4 KiB
TypeScript
'use client';
|
||
|
||
import { Navbar } from "@/components/Navbar";
|
||
import { Footer } from "@/components/Footer";
|
||
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
||
import { CTASection } from "@/components/CTASection";
|
||
import { Settings, ArrowUp, Truck, Compass, ArrowRight, Shield, Zap, Clock } from "lucide-react";
|
||
import Image from "next/image";
|
||
import { cn } from "@/lib/utils";
|
||
import { SERVICES, siteConfig } from "@/lib/data";
|
||
|
||
const FEATURES = [
|
||
{
|
||
id: "01",
|
||
title: "Hassas Mühendislik",
|
||
description: "Her kaldırma operasyonu için detaylı simülasyon ve planlama.",
|
||
icon: <Shield className="w-6 h-6" />
|
||
},
|
||
{
|
||
id: "02",
|
||
title: "Sertifikalı Operatörler",
|
||
description: "Uluslararası standartlarda eğitim almış uzman teknik ekip.",
|
||
icon: <Zap className="w-6 h-6" />
|
||
},
|
||
{
|
||
id: "03",
|
||
title: "7/24 Teknik Destek",
|
||
description: "Kesintisiz operasyon için anında müdahale ve destek hizmeti.",
|
||
icon: <Clock className="w-6 h-6" />
|
||
}
|
||
];
|
||
|
||
const STATS = [
|
||
{ label: "Max Kapasite", value: "500T", highlighted: true },
|
||
{ label: "Yıllık Deneyim", value: "15+", highlighted: false },
|
||
{ label: "İş Güvenliği", value: "100%", highlighted: false },
|
||
{ label: "Aktif Operasyon", value: "24/7", highlighted: true }
|
||
];
|
||
|
||
export default function ServicesPage() {
|
||
const handleWhatsApp = (serviceTitle: string) => {
|
||
const message = encodeURIComponent(`Merhaba, ${serviceTitle} hizmetiniz hakkında bilgi ve teklif almak istiyorum.`);
|
||
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
|
||
};
|
||
|
||
return (
|
||
<main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
|
||
<Navbar />
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative h-[60vh] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10">
|
||
<div className="absolute inset-0 z-0">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
|
||
alt="Cranes at sunset"
|
||
fill
|
||
sizes="100vw"
|
||
className="object-cover opacity-40 grayscale"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div>
|
||
</div>
|
||
<div className="relative z-10 max-w-4xl">
|
||
<p className="text-primary font-headline font-bold tracking-[0.2em] uppercase mb-4 text-sm">
|
||
Endüstriyel Güç ve Mühendislik Çözümleri
|
||
</p>
|
||
<h1 className="text-7xl md:text-9xl font-black font-headline tracking-tighter text-on-surface leading-[0.9] uppercase">
|
||
Hizmetlerimiz
|
||
</h1>
|
||
<div className="mt-8 flex gap-4">
|
||
<div className="h-1 w-24 bg-primary"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Services Grid */}
|
||
<section className="py-24 px-8 md:px-16 bg-surface">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
|
||
{SERVICES.map((service, index) => (
|
||
<div
|
||
key={index}
|
||
className="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden"
|
||
>
|
||
<div className="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
|
||
<div>
|
||
<div className="mb-8">
|
||
{index === 0 && <Settings className="w-12 h-12 text-primary" />}
|
||
{index === 1 && <ArrowUp className="w-12 h-12 text-primary" />}
|
||
{index === 2 && <Truck className="w-12 h-12 text-primary" />}
|
||
{index === 3 && <Compass className="w-12 h-12 text-primary" />}
|
||
</div>
|
||
<h3 className="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">
|
||
{service.title}
|
||
</h3>
|
||
<p className="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
<div className="mt-12">
|
||
<button
|
||
onClick={() => handleWhatsApp(service.title)}
|
||
className="flex items-center gap-4 bg-primary text-on-primary px-8 py-4 font-headline font-bold uppercase hover:brightness-110 transition-all group"
|
||
>
|
||
Teklif Al
|
||
<ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{/* Subtle Background Image for Card */}
|
||
<div className="absolute right-0 bottom-0 w-1/2 h-full opacity-5 pointer-events-none grayscale group-hover:opacity-10 transition-opacity">
|
||
<Image
|
||
src={service.image}
|
||
alt={service.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 25vw"
|
||
className="object-contain object-right-bottom"
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Why Choose Us */}
|
||
<section className="py-24 px-8 md:px-16 bg-surface-container-lowest border-y border-outline-variant/10">
|
||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||
<div>
|
||
<h2 className="text-5xl font-headline font-black uppercase mb-8 leading-tight">
|
||
Neden AYDOĞAN NAKLİYAT?
|
||
</h2>
|
||
<p className="text-on-surface-variant font-body text-xl mb-12 leading-relaxed">
|
||
Endüstriyel operasyonlarda güvenlik bir seçenek değil, zorunluluktur. Mühendislik odaklı yaklaşımımızla riskleri minimize ediyoruz.
|
||
</p>
|
||
<div className="space-y-12">
|
||
{FEATURES.map((feature) => (
|
||
<div key={feature.id} className="flex gap-6">
|
||
<div className="text-primary text-5xl font-black font-headline">{feature.id}</div>
|
||
<div>
|
||
<h4 className="text-xl font-headline font-bold uppercase mb-2">{feature.title}</h4>
|
||
<p className="text-on-surface-variant text-sm">{feature.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{STATS.map((stat, index) => (
|
||
<div
|
||
key={index}
|
||
className={cn(
|
||
"bg-surface-container-high p-8 flex flex-col justify-center transition-all hover:translate-y-[-4px]",
|
||
stat.highlighted && "border-l-4 border-primary"
|
||
)}
|
||
>
|
||
<span className={cn(
|
||
"text-5xl font-black font-headline mb-2",
|
||
stat.highlighted ? "text-primary" : "text-on-surface"
|
||
)}>
|
||
{stat.value}
|
||
</span>
|
||
<span className="text-xs uppercase tracking-widest font-bold opacity-60">
|
||
{stat.label}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<CTASection />
|
||
<Footer />
|
||
<FloatingWhatsApp />
|
||
</main>
|
||
);
|
||
}
|