first commit
This commit is contained in:
170
app/hizmetler/page.tsx
Normal file
170
app/hizmetler/page.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
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 { Metadata } from "next";
|
||||
import { SERVICES } from "@/lib/data";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Muğla Vinç Kiralama ve Ağır Nakliyat Hizmetleri",
|
||||
description: "Dalaman merkezli 500 tona kadar mobil vinç kiralama, sepetli platform, ağır nakliyat ve proje taşımacılığı. Ege Bölgesi ve Türkiye geneli profesyonel çözümler.",
|
||||
keywords: ["muğla vinç kiralama", "dalaman vinç kiralama", "sepetli platform", "ağır nakliyat muğla", "proje taşımacılığı", "fethiye vinç", "ortaca vinç"],
|
||||
};
|
||||
|
||||
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() {
|
||||
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-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Cranes at sunset"
|
||||
fill
|
||||
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 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">
|
||||
Teklif Al
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</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
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user