ayrisdev/aydogannakliyat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ayrisdev
2026-04-12 13:17:43 +03:00
parent 220cc00f46
commit 612ed769c3
41 changed files with 3633 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
design/u0130leti_u015fim_aydo_u011fan_nakliyat_vin_u00e7/code.html Normal file
View File

@@ -0,0 +1,249 @@
<!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&amp;family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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 &amp; Ç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 &amp; 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 &amp; 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>

BIN
design/u0130leti_u015fim_aydo_u011fan_nakliyat_vin_u00e7/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB