249 lines
14 KiB
HTML
249 lines
14 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"/>
|
||
<title>İletişim | Aydoğan Nakliyat Vinç</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700&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 id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"surface-bright": "#393939",
|
||
"outline-variant": "#4d4732",
|
||
"on-error": "#690005",
|
||
"on-background": "#e5e2e1",
|
||
"surface": "#131313",
|
||
"on-tertiary": "#00363a",
|
||
"inverse-surface": "#e5e2e1",
|
||
"inverse-on-surface": "#313030",
|
||
"secondary-fixed": "#e2e2e2",
|
||
"tertiary-fixed": "#79f5ff",
|
||
"tertiary-container": "#00f1ff",
|
||
"secondary": "#c6c6c7",
|
||
"on-tertiary-fixed-variant": "#004f54",
|
||
"on-secondary-fixed-variant": "#454747",
|
||
"primary-container": "#ffd700",
|
||
"tertiary-fixed-dim": "#00dbe8",
|
||
"error": "#ffb4ab",
|
||
"outline": "#999077",
|
||
"on-primary": "#3a3000",
|
||
"background": "#131313",
|
||
"surface-container": "#20201f",
|
||
"secondary-fixed-dim": "#c6c6c7",
|
||
"secondary-container": "#454747",
|
||
"on-error-container": "#ffdad6",
|
||
"inverse-primary": "#705d00",
|
||
"surface-container-highest": "#353535",
|
||
"on-secondary-fixed": "#1a1c1c",
|
||
"error-container": "#93000a",
|
||
"on-secondary-container": "#b4b5b5",
|
||
"primary-fixed": "#ffe16d",
|
||
"surface-variant": "#353535",
|
||
"on-primary-fixed": "#221b00",
|
||
"on-tertiary-fixed": "#002022",
|
||
"surface-container-low": "#1c1b1b",
|
||
"surface-dim": "#131313",
|
||
"on-primary-container": "#705e00",
|
||
"on-tertiary-container": "#006a70",
|
||
"on-surface": "#e5e2e1",
|
||
"primary": "#fff6df",
|
||
"surface-container-high": "#2a2a2a",
|
||
"on-primary-fixed-variant": "#544600",
|
||
"surface-tint": "#e9c400",
|
||
"on-secondary": "#2f3131",
|
||
"tertiary": "#defcff",
|
||
"on-surface-variant": "#d0c6ab",
|
||
"surface-container-lowest": "#0e0e0e",
|
||
"primary-fixed-dim": "#e9c400"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0px",
|
||
"lg": "0px",
|
||
"xl": "0px",
|
||
"full": "9999px"
|
||
},
|
||
"fontFamily": {
|
||
"headline": ["Space Grotesk"],
|
||
"body": ["Inter"],
|
||
"label": ["Inter"]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
}
|
||
body {
|
||
background-color: #131313;
|
||
color: #e5e2e1;
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
h1, h2, h3, h4 {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
<!-- TopNavBar -->
|
||
<nav class="fixed top-0 w-full z-50 rounded-none bg-[#131313]/70 backdrop-blur-xl flex justify-between items-center px-6 py-4 w-full">
|
||
<div class="text-2xl font-black tracking-tighter text-[#FFD700]">Aydoğan Nakliyat Vinç</div>
|
||
<div class="hidden md:flex gap-8 items-center">
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Fleet</a>
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Services</a>
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Safety</a>
|
||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#FFD700] border-b-2 border-[#FFD700] pb-1" href="#">Contact</a>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary px-6 py-2 font-bold uppercase tracking-tighter hover:bg-primary-fixed-dim active:scale-95 transition-all duration-150">
|
||
Request a Quote
|
||
</button>
|
||
</nav>
|
||
<!-- Hero Section -->
|
||
<section class="relative h-[409px] min-h-[300px] flex items-center justify-start px-12 pt-20 overflow-hidden bg-surface-container-lowest">
|
||
<div class="absolute inset-0 opacity-40">
|
||
<img alt="" class="w-full h-full object-cover grayscale" data-alt="close-up of industrial steel construction machinery and crane hydraulics in dramatic lighting with high contrast and deep shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfkKct5D5377QaAJJkrQWe4e1bB-ePs2iyvcGIM20gmCTblVxW51Pzx33a5BGtv2dyYafOhcQH1ZucqiYi7xFbfXxCqGyqK8hXRNsN1fWPOKvAy0Nn8F8JjxR7zpGVWu_xXIEeoYZWnUr3NXL4A11sgKXAuaNqH1n31-pKbA18vgWIIHHE5X683sgE8dTiSqtYHKtpDO0RHSTp_Knh60ikeLM_N35WWs0opR8PV7WGZPjTwM6J5f2r5k2EUGANBnF62L5aLUddyKs"/>
|
||
<div class="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent"></div>
|
||
</div>
|
||
<div class="relative z-10 max-w-4xl">
|
||
<h1 class="text-6xl md:text-8xl font-black uppercase tracking-tighter text-on-surface mb-2">
|
||
İletişim
|
||
</h1>
|
||
<div class="h-1 w-24 bg-primary-container"></div>
|
||
</div>
|
||
</section>
|
||
<!-- Main Content -->
|
||
<main class="grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[600px]">
|
||
<!-- Left Column: Contact Details -->
|
||
<section class="bg-surface-container p-12 lg:p-24 flex flex-col justify-center">
|
||
<h2 class="text-3xl font-bold tracking-tighter uppercase mb-12 text-on-surface">Operasyon Merkezi</h2>
|
||
<div class="space-y-12">
|
||
<!-- Address -->
|
||
<div class="flex items-start gap-6 group">
|
||
<div class="bg-surface-container-high p-4 text-primary-container group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
||
<span class="material-symbols-outlined text-3xl" data-icon="foundation">foundation</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-label-sm uppercase tracking-widest text-on-surface-variant mb-1 font-bold">Adres</p>
|
||
<p class="text-xl font-medium text-on-surface leading-snug">
|
||
Merkez Mah. Sanayi Sitesi No: 42<br/>Dalaman / Muğla
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Phone -->
|
||
<div class="flex items-start gap-6 group">
|
||
<div class="bg-surface-container-high p-4 text-primary-container group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
||
<span class="material-symbols-outlined text-3xl" data-icon="distance">distance</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-label-sm uppercase tracking-widest text-on-surface-variant mb-1 font-bold">Telefon</p>
|
||
<p class="text-3xl font-black text-on-surface tracking-tighter">
|
||
+90 252 692 XX XX
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Email -->
|
||
<div class="flex items-start gap-6 group">
|
||
<div class="bg-surface-container-high p-4 text-primary-container group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
||
<span class="material-symbols-outlined text-3xl" data-icon="contact_support">contact_support</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-label-sm uppercase tracking-widest text-on-surface-variant mb-1 font-bold">E-Posta</p>
|
||
<p class="text-xl font-medium text-on-surface">
|
||
info@aydogannakliyat.com
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Social/Status Indicators -->
|
||
<div class="mt-20 flex gap-4">
|
||
<div class="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-xs font-bold uppercase tracking-widest flex items-center gap-2">
|
||
<span class="w-2 h-2 bg-primary-container"></span>
|
||
7/24 Aktif Operasyon
|
||
</div>
|
||
<div class="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-xs font-bold uppercase tracking-widest flex items-center gap-2">
|
||
<span class="w-2 h-2 bg-tertiary-container"></span>
|
||
Muğla & Çevresi
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Right Column: Contact Form -->
|
||
<section class="bg-surface-container-low p-12 lg:p-24 flex flex-col justify-center border-l border-outline-variant/10">
|
||
<h2 class="text-3xl font-bold tracking-tighter uppercase mb-8 text-on-surface">Teklif Talebi & Mesaj</h2>
|
||
<form action="#" class="space-y-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="space-y-2">
|
||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Adınız Soyadınız</label>
|
||
<input class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="Ahmet Yılmaz" type="text"/>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">E-Posta</label>
|
||
<input class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="ahmet@example.com" type="email"/>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Telefon Numarası</label>
|
||
<input class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="+90 5xx xxx xx xx" type="tel"/>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Mesajınız / İş Detayları</label>
|
||
<textarea class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="Taşıma yükü, mesafe ve tarih bilgisi belirtiniz..." rows="4"></textarea>
|
||
</div>
|
||
<button class="w-full bg-primary-container text-on-primary py-5 text-xl font-black uppercase tracking-widest hover:bg-primary-fixed-dim transition-all active:scale-[0.98]" type="submit">
|
||
Gönder
|
||
</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
<!-- Map Section -->
|
||
<section class="w-full h-[500px] bg-surface-container-lowest relative">
|
||
<div class="absolute inset-0 flex items-center justify-center grayscale contrast-125 brightness-50 opacity-80">
|
||
<!-- Mock Map Background -->
|
||
<img alt="Map Location" class="w-full h-full object-cover" data-alt="stylized architectural map design of a city grid in dark charcoal tones with professional industrial aesthetics" data-location="Dalaman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD5Desu88UuLMQs0-2cNDeOMzanJF6G0Iiqrqo56itv6tXw1SexCDPYVblKrKLUKnyFvfSZiI2ArtL9z5dbDDuNUQUl4BFaON7rfxsXdIH7e89b4rqym8pfsugGqVybr4O91VQ5BqQ1q2od53qa3PzpP8AyPbuWZO9xHuFWu0nHx_SDxjDatzVeE5ZySY2qXYf2bJ_5GORZltIllO3vG5aDJMGzgnj1hLOcI29jxVlMve3ssgUQcFPJren6byGVzPXyTe44_5yHZ-k"/>
|
||
</div>
|
||
<div class="absolute inset-0 bg-surface/20"></div>
|
||
<div class="relative z-10 h-full flex items-center justify-center">
|
||
<div class="bg-surface p-8 border-l-4 border-primary-container max-w-sm">
|
||
<span class="material-symbols-outlined text-primary-container text-4xl mb-4" data-icon="distance" style="font-variation-settings: 'FILL' 1;">distance</span>
|
||
<h3 class="text-2xl font-black uppercase tracking-tighter text-on-surface mb-2">Lokasyonumuz</h3>
|
||
<p class="text-on-surface-variant leading-relaxed mb-6 italic">
|
||
Dalaman Sanayi Sitesi'nin kalbinde, tüm Ege ve Akdeniz bölgesine hızlı erişim noktasındayız.
|
||
</p>
|
||
<a class="text-primary-container font-bold uppercase tracking-widest text-sm flex items-center gap-2 hover:gap-4 transition-all" href="#">
|
||
Yol Tarifi Al <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Footer -->
|
||
<footer class="w-full rounded-none border-t border-[#D0C6AB]/10 bg-[#0E0E0E] flex flex-col md:flex-row justify-between items-center px-12 py-16 w-full">
|
||
<div class="mb-8 md:mb-0">
|
||
<div class="text-[#FFD700] font-black uppercase text-xl mb-2">Aydoğan Nakliyat Vinç</div>
|
||
<p class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] max-w-xs">
|
||
© 2024 Aydoğan Nakliyat Vinç. All rights reserved. Precision Engineering & Heavy Lifting.
|
||
</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-8 justify-center">
|
||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Privacy Policy</a>
|
||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Terms of Service</a>
|
||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Fleet Safety</a>
|
||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Certifications</a>
|
||
</div>
|
||
</footer>
|
||
<!-- Floating WhatsApp Action (Inspired by SideNavBar CTAs) -->
|
||
<div class="fixed bottom-8 right-8 z-50">
|
||
<a class="group flex items-center gap-4 bg-primary-container text-on-primary p-4 shadow-2xl active:scale-90 transition-all duration-200" href="https://wa.me/902526920000">
|
||
<div class="flex flex-col items-end">
|
||
<span class="text-[10px] font-black uppercase tracking-tighter opacity-70">Direct Line</span>
|
||
<span class="font-headline font-bold text-sm">WHATSAPP</span>
|
||
</div>
|
||
<span class="material-symbols-outlined text-3xl" data-icon="contact_support" style="font-variation-settings: 'FILL' 1;">contact_support</span>
|
||
</a>
|
||
</div>
|
||
</body></html> |