395 lines
24 KiB
HTML
395 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="tr"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"primary-container": "#ffd700",
|
||
"background": "#131313",
|
||
"surface": "#131313",
|
||
"outline": "#999077",
|
||
"surface-container-highest": "#353535",
|
||
"on-primary-container": "#705e00",
|
||
"tertiary-fixed": "#79f5ff",
|
||
"secondary-fixed-dim": "#c6c6c7",
|
||
"surface-container-lowest": "#0e0e0e",
|
||
"on-error": "#690005",
|
||
"on-tertiary-container": "#006a70",
|
||
"on-primary-fixed-variant": "#544600",
|
||
"error": "#ffb4ab",
|
||
"inverse-on-surface": "#313030",
|
||
"on-error-container": "#ffdad6",
|
||
"secondary-fixed": "#e2e2e2",
|
||
"secondary": "#c6c6c7",
|
||
"inverse-surface": "#e5e2e1",
|
||
"on-primary": "#3a3000",
|
||
"surface-variant": "#353535",
|
||
"on-tertiary": "#00363a",
|
||
"surface-dim": "#131313",
|
||
"tertiary-fixed-dim": "#00dbe8",
|
||
"primary": "#fff6df",
|
||
"on-surface-variant": "#d0c6ab",
|
||
"primary-fixed": "#ffe16d",
|
||
"surface-container-low": "#1c1b1b",
|
||
"tertiary-container": "#00f1ff",
|
||
"secondary-container": "#454747",
|
||
"primary-fixed-dim": "#e9c400",
|
||
"on-secondary-fixed": "#1a1c1c",
|
||
"surface-container-high": "#2a2a2a",
|
||
"on-background": "#e5e2e1",
|
||
"on-surface": "#e5e2e1",
|
||
"outline-variant": "#4d4732",
|
||
"on-primary-fixed": "#221b00",
|
||
"on-tertiary-fixed": "#002022",
|
||
"tertiary": "#defcff",
|
||
"surface-tint": "#e9c400",
|
||
"on-secondary-fixed-variant": "#454747",
|
||
"inverse-primary": "#705d00",
|
||
"error-container": "#93000a",
|
||
"surface-bright": "#393939",
|
||
"on-secondary-container": "#b4b5b5",
|
||
"on-tertiary-fixed-variant": "#004f54",
|
||
"on-secondary": "#2f3131",
|
||
"surface-container": "#20201f"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0px",
|
||
"lg": "0px",
|
||
"xl": "0px",
|
||
"full": "9999px"
|
||
},
|
||
"fontFamily": {
|
||
"headline": ["Space Grotesk"],
|
||
"body": ["Inter"],
|
||
"label": ["Inter"]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||
.text-stroke { -webkit-text-stroke: 1px rgba(255, 215, 0, 0.3); color: transparent; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-surface font-body selection:bg-primary-container selection:text-on-primary">
|
||
<!-- TopNavBar -->
|
||
<nav class="fixed top-0 left-0 w-full z-[100] flex justify-between items-center px-12 py-6 bg-neutral-900/70 dark:bg-neutral-900/70 backdrop-blur-xl border-b border-white/10">
|
||
<div class="text-2xl font-black tracking-tighter text-yellow-400">Aydoğan Nakliyat Vinç</div>
|
||
<div class="hidden md:flex items-center gap-8">
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-yellow-400 border-b-2 border-yellow-400 pb-1" href="#">Services</a>
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-white/80 hover:text-yellow-400 transition-colors duration-300" href="#">Fleet</a>
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-white/80 hover:text-yellow-400 transition-colors duration-300" href="#">About</a>
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-white/80 hover:text-yellow-400 transition-colors duration-300" href="#">Contact</a>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary px-6 py-3 font-headline font-bold uppercase tracking-widest text-sm hover:bg-primary-fixed-dim active:scale-95 transition-all">
|
||
Request a Quote
|
||
</button>
|
||
</nav>
|
||
<!-- SideNavBar (WhatsApp FAB) -->
|
||
<div class="fixed bottom-8 right-8 z-50">
|
||
<a class="bg-green-600 text-white font-['Inter'] font-semibold w-16 h-16 flex items-center justify-center shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] hover:translate-x-1 hover:translate-y-1 hover:shadow-none active:scale-90 transition-all" href="#">
|
||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||
</a>
|
||
</div>
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="relative h-screen w-full flex items-center overflow-hidden">
|
||
<div class="absolute inset-0 z-0">
|
||
<img class="w-full h-full object-cover" data-alt="Massive yellow construction crane standing tall against a dramatic orange and purple sunset sky on the Dalaman coast, industrial aesthetic, 8k resolution" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4"/>
|
||
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
||
</div>
|
||
<div class="relative z-10 px-12 max-w-5xl">
|
||
<div class="mb-6 flex items-center gap-4">
|
||
<span class="h-[2px] w-12 bg-primary-container"></span>
|
||
<span class="font-label text-sm uppercase tracking-[0.3em] text-primary-container font-bold">Dalaman / Muğla</span>
|
||
</div>
|
||
<h1 class="font-headline text-6xl md:text-8xl font-bold leading-[0.9] tracking-tighter text-white mb-8">
|
||
Dalaman’ın Güçlü Çözüm Ortağı: <span class="text-primary-container">Aydoğan Vinç</span>
|
||
</h1>
|
||
<ul class="space-y-4 mb-12">
|
||
<li class="flex items-center gap-4 group">
|
||
<span class="w-2 h-2 bg-primary-container"></span>
|
||
<span class="font-headline text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors">Ağır Nakliyat</span>
|
||
</li>
|
||
<li class="flex items-center gap-4 group">
|
||
<span class="w-2 h-2 bg-primary-container"></span>
|
||
<span class="font-headline text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors">Sepetli Platform</span>
|
||
</li>
|
||
<li class="flex items-center gap-4 group">
|
||
<span class="w-2 h-2 bg-primary-container"></span>
|
||
<span class="font-headline text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors">Mobil Vinç Kiralama</span>
|
||
</li>
|
||
</ul>
|
||
<div class="flex gap-4">
|
||
<button class="bg-primary-container text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-primary-fixed-dim transition-all">
|
||
Hizmet Alın
|
||
</button>
|
||
<button class="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg border border-white/10 hover:bg-white hover:text-black transition-all">
|
||
Filomuz
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Absolute Texture Overlay -->
|
||
<div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></div>
|
||
</section>
|
||
<!-- Stats Grid (Kinetic Monolith) -->
|
||
<section class="grid grid-cols-2 md:grid-cols-4 bg-surface-container-lowest border-y border-white/5">
|
||
<div class="p-12 border-r border-white/5 flex flex-col justify-center">
|
||
<span class="text-primary-container font-headline text-5xl font-black mb-2">150T</span>
|
||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Maksimum Kapasite</span>
|
||
</div>
|
||
<div class="p-12 border-r border-white/5 flex flex-col justify-center">
|
||
<span class="text-primary-container font-headline text-5xl font-black mb-2">24/7</span>
|
||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Teknik Destek</span>
|
||
</div>
|
||
<div class="p-12 border-r border-white/5 flex flex-col justify-center">
|
||
<span class="text-primary-container font-headline text-5xl font-black mb-2">15+</span>
|
||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Modern Filo</span>
|
||
</div>
|
||
<div class="p-12 flex flex-col justify-center">
|
||
<span class="text-primary-container font-headline text-5xl font-black mb-2">100%</span>
|
||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Güvenlik Kaydı</span>
|
||
</div>
|
||
</section>
|
||
<!-- Services Section (Bento Style) -->
|
||
<section class="py-32 px-12 bg-surface" id="Services">
|
||
<div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-8">
|
||
<div class="max-w-2xl">
|
||
<span class="font-label text-sm uppercase tracking-[0.3em] text-primary-container font-bold mb-4 block">Hizmetlerimiz</span>
|
||
<h2 class="font-headline text-6xl font-bold tracking-tighter text-white">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-on-surface-variant font-body max-w-sm mb-6">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-0">
|
||
<!-- Service Card 1 -->
|
||
<div class="group relative aspect-square bg-surface-container overflow-hidden p-12 border border-white/5">
|
||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||
<span class="material-symbols-outlined text-primary-container text-5xl" style="font-variation-settings: 'FILL' 1;">precision_manufacturing</span>
|
||
<div>
|
||
<h3 class="font-headline text-3xl font-bold mb-4 uppercase">Mobil Vinç</h3>
|
||
<p class="text-on-surface-variant leading-relaxed">Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute bottom-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||
<span class="font-headline text-9xl font-black">01</span>
|
||
</div>
|
||
<div class="absolute inset-0 bg-primary-container translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex items-center justify-center">
|
||
<button class="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8">Detaylar</button>
|
||
</div>
|
||
</div>
|
||
<!-- Service Card 2 -->
|
||
<div class="group relative aspect-square bg-surface-container-high overflow-hidden p-12 border border-white/5">
|
||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||
<span class="material-symbols-outlined text-primary-container text-5xl" style="font-variation-settings: 'FILL' 1;">local_shipping</span>
|
||
<div>
|
||
<h3 class="font-headline text-3xl font-bold mb-4 uppercase">Ağır Nakliyat</h3>
|
||
<p class="text-on-surface-variant leading-relaxed">Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute bottom-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||
<span class="font-headline text-9xl font-black">02</span>
|
||
</div>
|
||
<div class="absolute inset-0 bg-primary-container translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex items-center justify-center">
|
||
<button class="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8">Detaylar</button>
|
||
</div>
|
||
</div>
|
||
<!-- Service Card 3 -->
|
||
<div class="group relative aspect-square bg-surface-container-highest overflow-hidden p-12 border border-white/5">
|
||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||
<span class="material-symbols-outlined text-primary-container text-5xl" style="font-variation-settings: 'FILL' 1;">elevator</span>
|
||
<div>
|
||
<h3 class="font-headline text-3xl font-bold mb-4 uppercase">Sepetli Platform</h3>
|
||
<p class="text-on-surface-variant leading-relaxed">Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute bottom-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||
<span class="font-headline text-9xl font-black">03</span>
|
||
</div>
|
||
<div class="absolute inset-0 bg-primary-container translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex items-center justify-center">
|
||
<button class="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8">Detaylar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Fleet Section -->
|
||
<section class="py-32 bg-surface-container-low overflow-hidden" id="Fleet">
|
||
<div class="px-12 mb-20">
|
||
<h2 class="font-headline text-7xl font-bold tracking-tighter text-stroke uppercase">Makine Parkuru</h2>
|
||
<h3 class="font-headline text-5xl font-bold text-white -mt-8">Modern ve Güçlü Filo</h3>
|
||
</div>
|
||
<div class="flex gap-8 overflow-x-auto no-scrollbar px-12 pb-12">
|
||
<!-- Vehicle Card 1 -->
|
||
<div class="min-w-[450px] bg-surface flex flex-col">
|
||
<div class="h-80 overflow-hidden relative">
|
||
<img class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" data-alt="Modern all-terrain telescopic crane in yellow parked on an industrial site, heavy machinery close-up, sharp focus, technical lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDz5b4r2KouL9upv0olAupqoFkF2Irw10VTeLh8XSl4F94ujjrHJ6keKViHybvoJlR3RgL-WrvsCYDjKNuVYUdALEH7KEjvZmZm40mxJWzQGN_aFUEllY41CpcYxAmHjiyrkgTKgEh9qZuDQ62Pzi-sffDKM9dv8bNg3YWH-ypFworfKyQiaXgLS0wucMj9LpVlzzl2zXrKv6WTv8hJr986CWoKM8b1mTI8ajgq_2oF9vltwrfrZDT8LYEKtgGSmIM84AAlzqZXwMU"/>
|
||
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 font-label text-xs font-bold uppercase">Mevcut</div>
|
||
</div>
|
||
<div class="p-8 border-x border-b border-white/5">
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div>
|
||
<h4 class="font-headline text-2xl font-bold text-white mb-1">Liebherr LTM 1100</h4>
|
||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Mobil Teleskopik Vinç</span>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="bg-surface-container-high p-4">
|
||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Kapasite</span>
|
||
<span class="font-headline font-bold text-lg">100 TON</span>
|
||
</div>
|
||
<div class="bg-surface-container-high p-4">
|
||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Bom Uzunluğu</span>
|
||
<span class="font-headline font-bold text-lg">60 METRE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Vehicle Card 2 -->
|
||
<div class="min-w-[450px] bg-surface flex flex-col">
|
||
<div class="h-80 overflow-hidden relative">
|
||
<img class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" data-alt="Industrial crane truck with articulated arm standing in a loading dock area, sunset lighting, high contrast commercial photography style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTUgbJ7VOHrnV2PY8AX4lAxBfdbp3hP7HdMRv4RJsWYQv6_coiWlqlodtyBjta-2PoSZnOXc1pKQHpbZGS9_6VLIUPyZ-sUH15ENiBjf466dq7GpPBHpS1uqFXm44tK_ZJ0okneK2mtHwo5h459sPzZ5iXakBitbs70sI0X86VQm2dePia2r1weEXW6Znhn8pOcB_hwLybrmfyEhr-b47X20UbQrbSFp2WCIGZUv4IsAlgn775KDuQH96BvaSLC56kOZG8Q5S9Tu0"/>
|
||
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 font-label text-xs font-bold uppercase">Mevcut</div>
|
||
</div>
|
||
<div class="p-8 border-x border-b border-white/5">
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div>
|
||
<h4 class="font-headline text-2xl font-bold text-white mb-1">Hiyap 75 Ton</h4>
|
||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Kamyon Üstü Vinç</span>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="bg-surface-container-high p-4">
|
||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Kapasite</span>
|
||
<span class="font-headline font-bold text-lg">75 TON</span>
|
||
</div>
|
||
<div class="bg-surface-container-high p-4">
|
||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Erişim</span>
|
||
<span class="font-headline font-bold text-lg">35 METRE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Vehicle Card 3 -->
|
||
<div class="min-w-[450px] bg-surface flex flex-col">
|
||
<div class="h-80 overflow-hidden relative">
|
||
<img class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" data-alt="Hydraulic crane arm detail with heavy chains and hooks, industrial textures of steel and oil, 8k resolution, cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfXE8_qXbdFXu-5NJjxR_il3lZOkzp6NaLTMMtNr_1_dO0ohKzutRHZLm3Rs3xuwheOE_PUWTDxIavnRfKcdCpASPX9AlxSuZFWaZKax5RWmgLnIBk-ojo_XghFLjC1ES1ACDK-PdB901GE3AxkMj-lWSFkbU8PaUhJ9XxizBHb4BVtvej64-5uXmm9e99Cax1_Xs8_Hm9L7uR8PRX5teGng9Q1gxbGbFCAQw5WG3cZrPESDEbj4osSFEwW8lokMlO0uB9xsaGZxw"/>
|
||
<div class="absolute top-4 left-4 bg-error-container text-white px-3 py-1 font-label text-xs font-bold uppercase">Bakımda</div>
|
||
</div>
|
||
<div class="p-8 border-x border-b border-white/5">
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div>
|
||
<h4 class="font-headline text-2xl font-bold text-white mb-1">Teleskopik Platform</h4>
|
||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Yüksek İrtifa Erişimi</span>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="bg-surface-container-high p-4">
|
||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Yükseklik</span>
|
||
<span class="font-headline font-bold text-lg">45 METRE</span>
|
||
</div>
|
||
<div class="bg-surface-container-high p-4">
|
||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Sepet Kapasitesi</span>
|
||
<span class="font-headline font-bold text-lg">300 KG</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Capacity Load Meter Section (Custom Component) -->
|
||
<section class="py-24 px-12 bg-surface flex flex-col items-center">
|
||
<div class="w-full max-w-4xl text-center mb-16">
|
||
<h3 class="font-headline text-4xl font-bold mb-8 uppercase tracking-tight">Projeleriniz İçin Optimum Güç Hesabı</h3>
|
||
<div class="space-y-12">
|
||
<div>
|
||
<div class="flex justify-between font-label text-xs uppercase tracking-widest mb-4">
|
||
<span>Ağır Yük Transferi</span>
|
||
<span class="text-primary-container">85% Verimlilik</span>
|
||
</div>
|
||
<div class="h-6 w-full bg-surface-container-highest">
|
||
<div class="h-full bg-primary-container w-[85%]"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between font-label text-xs uppercase tracking-widest mb-4">
|
||
<span>Mobil Vinç Operasyonları</span>
|
||
<span class="text-primary-container">95% Başarı</span>
|
||
</div>
|
||
<div class="h-6 w-full bg-surface-container-highest">
|
||
<div class="h-full bg-primary-container w-[95%]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Call to Action Section -->
|
||
<section class="relative py-40 px-12 overflow-hidden">
|
||
<div class="absolute inset-0 z-0">
|
||
<img class="w-full h-full object-cover" data-alt="Industrial construction site at night with bright floodlights illuminating steel structures and crane silhouettes, dramatic shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfGw5gCmOA1OaPBLY-dOl2wTGviHc5c2Xn05kgak1sHagc64z3vjbl8Ov1KBLQPkoLFdv0ktOtczfX5VEdrujgg8rgBnw40Bzc7Ai836w4QATDFGTdmpO9aHk3s7nLib4yerxLzG1woNJ2SChKlZ831GmYaHOH6NJYOf-N-zjb8Tc2086UpH97RBMUqb7yXw-kdpvj7u-er1ujBxir2hi5WVWKuX_kMdJ-aM-co4c8AfQpo_sO32TcwzB93hhlq6eGc8m23YMoJfU"/>
|
||
<div class="absolute inset-0 bg-neutral-900/80 backdrop-blur-sm"></div>
|
||
</div>
|
||
<div class="relative z-10 text-center max-w-3xl mx-auto">
|
||
<h2 class="font-headline text-5xl md:text-7xl font-bold text-white mb-8">Sıradaki Büyük Projeniz İçin Hazır mısınız?</h2>
|
||
<p class="text-xl text-on-surface-variant mb-12">Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri için hemen fiyat teklifi alın.</p>
|
||
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
||
<input class="bg-surface-container-lowest border-none font-body px-8 py-5 text-lg w-full md:w-80 focus:ring-2 focus:ring-primary-container" placeholder="Telefon Numaranız" type="text"/>
|
||
<button class="bg-primary-container text-on-primary font-headline font-black uppercase tracking-widest px-12 py-5 text-lg hover:bg-primary-fixed-dim transition-all">
|
||
Sizi Arayalım
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- Footer -->
|
||
<footer class="w-full py-16 px-12 grid grid-cols-1 md:grid-cols-4 gap-12 bg-neutral-900 border-t border-neutral-800">
|
||
<div class="col-span-1 md:col-span-1">
|
||
<div class="text-xl font-black text-white mb-6">Aydoğan Nakliyat Vinç</div>
|
||
<p class="text-neutral-500 font-label text-xs leading-loose">
|
||
Ağır sanayi ve inşaat sektöründe güvenin simgesi. Modern ekipmanlarımız ve uzman kadromuzla Dalaman'ın en güçlü ortağıyız.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-yellow-400 font-['Inter'] text-xs uppercase tracking-widest mb-6 font-bold">Dalaman HQ</h4>
|
||
<ul class="space-y-4">
|
||
<li><span class="text-neutral-500 font-label text-xs uppercase tracking-widest">Adres: Merkez Mah. Sanayi Sitesi No: 42 Dalaman / Muğla</span></li>
|
||
<li><span class="text-neutral-500 font-label text-xs uppercase tracking-widest">Tel: +90 252 692 XX XX</span></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-yellow-400 font-['Inter'] text-xs uppercase tracking-widest mb-6 font-bold">Services</h4>
|
||
<ul class="space-y-4">
|
||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Mobil Vinç Kiralama</a></li>
|
||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Sepetli Platform</a></li>
|
||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Lojistik Çözümleri</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-yellow-400 font-['Inter'] text-xs uppercase tracking-widest mb-6 font-bold">Fleet Catalog</h4>
|
||
<ul class="space-y-4">
|
||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Ağır Yük Vinçleri</a></li>
|
||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Teleskopik Vinçler</a></li>
|
||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Privacy Policy</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-span-full border-t border-white/5 pt-12 flex flex-col md:flex-row justify-between items-center gap-8">
|
||
<span class="text-neutral-500 font-label text-xs uppercase tracking-widest">© 2024 Aydoğan Nakliyat Vinç. All Rights Reserved.</span>
|
||
<div class="flex gap-6">
|
||
<a class="text-white/40 hover:text-yellow-400 transition-colors" href="#"><span class="material-symbols-outlined">social_leaderboard</span></a>
|
||
<a class="text-white/40 hover:text-yellow-400 transition-colors" href="#"><span class="material-symbols-outlined">camera</span></a>
|
||
<a class="text-white/40 hover:text-yellow-400 transition-colors" href="#"><span class="material-symbols-outlined">share</span></a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body></html> |