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

64
design/DESIGN.md Normal file
View File

@@ -0,0 +1,64 @@
# Design System Strategy: Industrial Precision
## 1. Overview & Creative North Star: "The Kinetic Monolith"
The heavy lifting industry is defined by the intersection of massive scale and surgical precision. This design system moves away from the "cluttered construction" aesthetic, opting instead for **The Kinetic Monolith**. This North Star envisions the UI as a series of heavy, interlocking structural slabs—imposing, stable, and powerful—yet animated with a modern, high-tech fluidity.
To break the "standard corporate template" look, we utilize **Hard-Edge Brutalism** mixed with **Editorial Sophistication**. We embrace zero-radius corners (0px) to mimic the sharp cut of steel beams, and we leverage extreme typographic scales to command authority. This is not just a rental service; it is an engineering power-house.
---
## 2. Colors: High-Contrast Industrialism
Our palette is rooted in the high-visibility world of heavy machinery. We use contrast not just for accessibility, but as a structural tool.
* **Primary (Industrial Yellow - #FFD700):** This is our "Action Signal." Use `primary_container` (#FFD700) for high-priority CTAs and `primary_fixed_dim` (#E9C400) for interactive states. It represents the crane, the caution, and the energy.
* **Surface Foundation (Deep Charcoal - #131313):** We avoid pure pitch black in favor of `surface` (#131313) to allow for depth.
* **The "No-Line" Rule:** Direct intervention: **No 1px solid borders.** To separate a fleet category from a service description, shift the background from `surface` to `surface_container_low`. Boundaries are felt through tonal shifts, not drawn with lines.
* **Surface Hierarchy & Nesting:** Treat the layout as an assembly line.
* Main Page: `surface`
* Structural Sections: `surface_container`
* Interactive Cards: `surface_container_high`
* **Signature Textures:** For hero sections, apply a subtle 10% opacity noise grain or a linear gradient from `surface` to `surface_container_highest` to mimic the matte finish of powder-coated steel.
---
## 3. Typography: The Engineering Scale
We use typography to convey weight. Our choices reflect the blueprint and the brand’s industrial backbone.
* **Display & Headlines (Space Grotesk):** A geometric sans-serif with a mechanical soul. The wide apertures and "tech" feel of Space Grotesk suggest precision. Use `display-lg` (3.5rem) with tight letter-spacing (-0.02em) for hero headlines to create a "wall of text" effect that feels immovable.
* **Body & Labels (Inter):** The "Workhorse." Inter provides a neutral, highly legible contrast to the aggressive display type. Use `body-lg` for technical specifications and `label-sm` (uppercase with 0.05em tracking) for metadata like "Crane Capacity" or "Job Site Location."
* **Visual Hierarchy:** Headlines should always be `on_surface` or `primary`. Body text should utilize `on_surface_variant` (#D0C6AB) to reduce visual noise in long technical descriptions.
---
## 4. Elevation & Depth: Tonal Layering
In a world of 0px border radii, traditional shadows feel out of place. We achieve depth through **Structural Stacking**.
* **The Layering Principle:** Instead of lifting an object off the page, we "carve" it into the interface. A "Heavy Lift" service card should be `surface_container_lowest` (#0E0E0E) nested within a `surface_container` (#20201F) section. This creates a recessed, high-end "machined" look.
* **The "Ghost Border" Fallback:** Where separation is critical for accessibility, use `outline_variant` at 15% opacity. It should be felt as a subtle change in light, not a hard edge.
* **Glassmorphism & Depth:** For navigation bars or floating action menus, use `surface_bright` at 70% opacity with a `40px` backdrop blur. This keeps the "Industrial Yellow" of the primary content visible as it scrolls beneath, maintaining brand energy throughout the journey.
---
## 5. Components: The Machined Toolkit
* **Buttons:**
* **Primary:** `primary_container` (#FFD700) background, `on_primary` (#3A3000) text. **0px border radius.** Hover state: `primary_fixed_dim`.
* **Secondary:** `surface_container_highest` background, `primary` text. This looks like a dark steel plate with yellow engraving.
* **Heavy Duty Cards:** No dividers. Separate the "Header" of the card from the "Body" by using a `surface_container_high` top section and a `surface_container` bottom section.
* **Input Fields:** Use `surface_container_lowest` for the field background with a `primary` 2px bottom-only border on focus. This mimics the "underlined" look of technical architectural drawings.
* **Fleet Status Chips:** Use `tertiary_container` (Cyan/Teal) for "Available" and `error_container` for "In Maintenance." These should be rectangular, sharp, and high-contrast.
* **The "Load Meter":** A custom component for this industry. A thick horizontal bar using `primary_container` to show crane capacity usage, set against a `surface_container_highest` track.
---
## 6. Do's and Don'ts
### Do:
* **Do** use intentional asymmetry. Align heavy text blocks to the left and allow large "crane-arm" imagery to break the grid and bleed off the right edge of the screen.
* **Do** use "Extreme Contrast." Pair a `display-lg` headline with a `label-sm` sub-headline for an editorial, high-end feel.
* **Do** use `primary` (Yellow) sparingly as a spotlight. If everything is yellow, nothing is important.
### Don't:
* **Don't** use rounded corners. Everything must be 0px. Softness contradicts the brand’s "Robust and Reliable" personality.
* **Don't** use standard 1px grey dividers. Use white space or a background color shift of 2–3% to define sections.
* **Don't** use generic stock photography. Use high-contrast, desaturated imagery of machinery with "Industrial Yellow" accents highlighted.

350
design/filo_aydo_an_nakliyat_vin/code.html Normal file
View File

@@ -0,0 +1,350 @@
<!DOCTYPE html>
<html class="dark" lang="tr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>MAKİNE PARKURUMUZ | TITAN CRANE</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": {
"primary-container": "#ffd700",
"primary-fixed-dim": "#e9c400",
"outline-variant": "#4d4732",
"error-container": "#93000a",
"error": "#ffb4ab",
"on-secondary-container": "#b4b5b5",
"on-secondary-fixed": "#1a1c1c",
"on-error-container": "#ffdad6",
"inverse-surface": "#e5e2e1",
"tertiary-fixed-dim": "#00dbe8",
"surface-variant": "#353535",
"surface-container-high": "#2a2a2a",
"surface": "#131313",
"secondary-fixed": "#e2e2e2",
"on-secondary-fixed-variant": "#454747",
"surface-container-highest": "#353535",
"inverse-primary": "#705d00",
"surface-container-lowest": "#0e0e0e",
"primary": "#fff6df",
"secondary-fixed-dim": "#c6c6c7",
"outline": "#999077",
"on-surface": "#e5e2e1",
"surface-bright": "#393939",
"surface-dim": "#131313",
"background": "#131313",
"secondary": "#c6c6c7",
"on-error": "#690005",
"on-tertiary": "#00363a",
"on-background": "#e5e2e1",
"on-tertiary-container": "#006a70",
"on-primary-fixed": "#221b00",
"surface-container-low": "#1c1b1b",
"on-primary": "#3a3000",
"primary-fixed": "#ffe16d",
"on-primary-container": "#705e00",
"surface-container": "#20201f",
"tertiary": "#defcff",
"on-secondary": "#2f3131",
"tertiary-container": "#00f1ff",
"secondary-container": "#454747",
"on-tertiary-fixed": "#002022",
"inverse-on-surface": "#313030",
"surface-tint": "#e9c400",
"on-primary-fixed-variant": "#544600",
"on-surface-variant": "#d0c6ab",
"tertiary-fixed": "#79f5ff",
"on-tertiary-fixed-variant": "#004f54"
},
"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;
font-family: 'Inter', sans-serif;
}
h1, h2, h3, .font-headline {
font-family: 'Space Grotesk', sans-serif;
}
.grain-texture {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.05;
}
</style>
</head>
<body class="text-on-surface">
<!-- TopNavBar -->
<nav class="fixed top-0 w-full z-50 rounded-none bg-[#131313]/70 backdrop-blur-xl flex justify-between items-center px-8 py-4 w-full max-w-full">
<div class="text-2xl font-black text-[#FFD700] tracking-tighter uppercase font-headline">TITAN CRANE</div>
<div class="hidden md:flex space-x-8">
<a class="text-[#FFD700] border-b-2 border-[#FFD700] pb-1 font-space-grotesk uppercase tracking-tighter text-sm" href="#">Fleet</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Services</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Safety</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Projects</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Locations</a>
</div>
<button class="bg-primary-container text-on-primary px-6 py-2 font-bold uppercase text-xs tracking-widest active:scale-95 transition-transform hover:bg-[#E9C400]">
Request a Quote
</button>
</nav>
<!-- Hero Section -->
<header class="relative h-[716px] flex items-end overflow-hidden bg-surface-container-lowest">
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover grayscale opacity-60" data-alt="Massive yellow mobile crane against a dark dramatic sky with high contrast industrial lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvyLR2euo0fVVJkD-pAUW5zCbh36Xhb1cSRdpfUNDLDM6DmaXORj2DONfF1VoGVkBnNh4uRcvCKTWsTVFYWn6Sw_KeBLJXICZZFUNpOfL0gild7ZnBMjDkR0PEzcvETXmR8vxVOsgJX_d44GkU3iMgOqQoHcYuxckCgAwIsPKKrKDRh0t4bI2MHtD4ndwtEmNqfDmALm3p-3dV6I-4ZSFifLniBhyJ5KkYAV4f3wHxbhn7JiJ_20b3KFvYCnYA7nCBNinlPnpl6pw"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
</div>
<div class="relative z-10 w-full px-8 pb-16">
<div class="max-w-7xl mx-auto">
<span class="text-primary-container font-label text-sm tracking-[0.3em] uppercase mb-4 block">PRESIZONEL GÜÇ</span>
<h1 class="text-6xl md:text-8xl font-black text-on-surface uppercase tracking-tighter leading-none mb-6">
MAKİNE <br/><span class="text-primary-container">PARKURUMUZ</span>
</h1>
<div class="w-24 h-2 bg-primary-container"></div>
</div>
</div>
<div class="grain-texture absolute inset-0 pointer-events-none"></div>
</header>
<!-- Filter System -->
<section class="bg-surface-container border-y border-outline-variant/10">
<div class="max-w-7xl mx-auto px-8 py-6">
<div class="flex flex-wrap items-center gap-4">
<span class="text-on-surface-variant font-label text-xs uppercase tracking-widest mr-4">Filtrele:</span>
<button class="bg-primary-container text-on-primary px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Hepsi</button>
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Mobil Vinç</button>
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Sepetli Platform</button>
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Hiyap</button>
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Kule Vinç</button>
</div>
</div>
</section>
<!-- Fleet Grid -->
<main class="max-w-7xl mx-auto px-8 py-20">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1">
<!-- Card 1 -->
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
<div class="aspect-[4/3] overflow-hidden relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Modern yellow mobile crane telescopic boom extending against industrial backdrop" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDW0yUd90QJSDeEWjis8tC8BkjXiWlSkY00JYzv9G7TwcoFYkaIYTpUck4XVO2OiMtKwW1-wUCy5J8Kj5UlhEw01bLPfiVxjb9FHBa2ObodH0ComQfNNBjvrbtVwBP9M4M5qrRCn3PrLOaKOYy2x61IIkcFnJD5JtW_N1bfooX_PAu9KJ5v7QAe9E22C0A-L_h_R9GKbhoPwoIkBaeKw4Bs-FjKZN1BD_U6j-0PON5OfVabv-NzpXdHeGvJBe0rqj6rUpDL5o4_SG0"/>
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 text-[10px] font-black uppercase tracking-tighter">Müsait</div>
</div>
<div class="p-8 flex-1 flex flex-col">
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Liebherr LTM 1300</h3>
<p class="text-on-surface-variant text-sm mb-6 font-light">Endüstriyel ağır kaldırma operasyonları için maksimum stabilite ve erişim gücü.</p>
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
<span class="text-on-surface font-headline font-bold text-xl">300 Ton</span>
</div>
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Bom Boyu</span>
<span class="text-on-surface font-headline font-bold text-xl">78 Metre</span>
</div>
</div>
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
İncele
</button>
</div>
</div>
<!-- Card 2 -->
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
<div class="aspect-[4/3] overflow-hidden relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Heavy duty truck mounted crane parked in industrial warehouse lot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1rvUBmDiCZcwh4MCEpjG2qF9o-Fc4Hz_L3MrEufnrnv46lExtWOk76OA6ui1jglnvFSOEMB7MCdt2X8zEC4T719Kq17e-6_K5h-XQmfj2mJjw4m48b4ZZ15VeuF1ZPXrEe7NqvJ5c7siwOdV-mgBqIqG3ycICi09GZ0zU1Fn91q_s8YwenDl6t8vOB6KMN0H2nDRTwmC54lw3jL5nW2qvLDVidbB8kbsR-n2Irc9RUaymcg9kxj4q2rITVjCqVCxek7LB4DHcFtE"/>
<div class="absolute top-4 left-4 bg-tertiary-container text-on-tertiary px-3 py-1 text-[10px] font-black uppercase tracking-tighter">Bakımda</div>
</div>
<div class="p-8 flex-1 flex flex-col">
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Hiyap 75 Ton</h3>
<p class="text-on-surface-variant text-sm mb-6 font-light">Şehir içi dar alanlarda yüksek manevra kabiliyeti ve pratik yükleme çözümü.</p>
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
<span class="text-on-surface font-headline font-bold text-xl">75 Ton</span>
</div>
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Bom Boyu</span>
<span class="text-on-surface font-headline font-bold text-xl">32 Metre</span>
</div>
</div>
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
İncele
</button>
</div>
</div>
<!-- Card 3 -->
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
<div class="aspect-[4/3] overflow-hidden relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Yellow aerial platform lift extended high into the air against a blue sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAi-Q4h-JrRWfnROwByq5pf-yrdbV8MIB9RTkcdaVTEhjA2BVBlYiBW-Z2F9aD3D8ygfEbb_KR6eDr9ZsWmlRAkUs_Gm2Ux33h2rms_iRjn_bM_yCCz230UrB9Sy0utqUI66mGTgIQNvFdYBP3vLtRYui48ZZJOUPGqaHrnb-zn3npSV0dZsgT313suK0IAUPSvCsOstC6eXIf-EHdv3zfqcnnp3vMpKx6f-FdMEAbuWretxr9K1SeuVICkQWliGSlo2uDjG3S_vWM"/>
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 text-[10px] font-black uppercase tracking-tighter">Müsait</div>
</div>
<div class="p-8 flex-1 flex flex-col">
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Sepetli Platform 45M</h3>
<p class="text-on-surface-variant text-sm mb-6 font-light">Yüksek irtifa montaj ve bakım çalışmaları için güvenli çalışma sahası.</p>
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
<span class="text-on-surface font-headline font-bold text-xl">450 Kg</span>
</div>
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Yükseklik</span>
<span class="text-on-surface font-headline font-bold text-xl">45 Metre</span>
</div>
</div>
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
İncele
</button>
</div>
</div>
<!-- Card 4 -->
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
<div class="aspect-[4/3] overflow-hidden relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Heavy duty all-terrain mobile crane with yellow chassis on a construction site" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2XvHmZb4DIEfnkB7faNLimT5zC12Ux1ML8WsQk7zNuo-z7Iyav0u1YBmZ8RTIWGyAxPVlM_dahw5Y1wXYdXBHjc8o4n1mY2T5rFQ9AexyhJZZwkuhq3bfAcDv6b23Fz2idusXu5_e-xSMwJrmqzqOiX_IfnoP7YFkfvYr-6iQwCSyi_Ha0Q4OFl4nHTabSp8IqFMymL-61yygmH7UJDOSgmhP1gromESI9ZLfI8YoMqAQHGYVDayD44nNLyR6_ziuNc5fb1Bttkg"/>
</div>
<div class="p-8 flex-1 flex flex-col">
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Groove GMK 6300</h3>
<p class="text-on-surface-variant text-sm mb-6 font-light">Zorlu arazi koşullarında üstün performans sunan ağır sınıf mobil vinç.</p>
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
<span class="text-on-surface font-headline font-bold text-xl">300 Ton</span>
</div>
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Bom Boyu</span>
<span class="text-on-surface font-headline font-bold text-xl">80 Metre</span>
</div>
</div>
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
İncele
</button>
</div>
</div>
<!-- Card 5 -->
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
<div class="aspect-[4/3] overflow-hidden relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Yellow industrial crane boom and cables detail against a grey overcast sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDN7cNjdslGdfC328kuBjhiTN2f9xbE_KEv7d-3TmDzvwVUinf_XRpRc0ZWsXbIsrqIhknNB1TFYBFq_0uFxplE9XJo26TABtJF_GBDLzap33ysKQ23V7kVOEUZ-B3D2OphMIDPKVrGQMGkRI68peJ0cHaQVaPURs51uFwpazcn26brK-KeWkWLXUclY-Vp3CSXKnypnRnTxgY16JDL6ON8d-v3kvDn_c3Lf6EdYJeBoSWbUkzC62boQR2qgcfGeWHTnnUeKcMKvck"/>
</div>
<div class="p-8 flex-1 flex flex-col">
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Manitou MT 1840</h3>
<p class="text-on-surface-variant text-sm mb-6 font-light">Teleskopik yükleyici ile şantiye içi malzeme taşıma ve yükleme çözümleri.</p>
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
<span class="text-on-surface font-headline font-bold text-xl">4 Ton</span>
</div>
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Yükseklik</span>
<span class="text-on-surface font-headline font-bold text-xl">18 Metre</span>
</div>
</div>
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
İncele
</button>
</div>
</div>
<!-- Card 6 -->
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
<div class="aspect-[4/3] overflow-hidden relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Giant tower crane components assembly at a major construction infrastructure project" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfokNl49gClI2o2IfZuf6cDESoZL2vluhuMXHzuSlIepJVIWqXCFyLhF1jKMQ-YEWx7YhI76AnlCRjGBs-6zZuBqeZNdzr3bXAW3_ikytHbgYgDC9YJDhjJTvFHfecTXdaraq9m6wT1x1qr17lbsA2O2gYsU33ds261WouhAaHWD_4mXKqoURMM3YriKE-Bn4EUTM2-AgU4g4KtuvHjOzG3vzjOzmvtBlEH77Qc_9MKBE9qKesxE0wHxsLtrbrcfmO2okGtEf5gAE"/>
</div>
<div class="p-8 flex-1 flex flex-col">
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Kule Vinç T-Serisi</h3>
<p class="text-on-surface-variant text-sm mb-6 font-light">Geniş kapsama alanı ve yüksek kaldırma performansı ile uzun vadeli projeler.</p>
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
<span class="text-on-surface font-headline font-bold text-xl">12 Ton</span>
</div>
<div>
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Yarıçap</span>
<span class="text-on-surface font-headline font-bold text-xl">60 Metre</span>
</div>
</div>
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
İncele
</button>
</div>
</div>
</div>
</main>
<!-- Load Meter Component - Custom Component from Design System -->
<section class="max-w-7xl mx-auto px-8 mb-20">
<div class="bg-surface-container p-12 relative overflow-hidden">
<div class="relative z-10 grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-black text-on-surface uppercase tracking-tighter mb-4">HAFTALIK PARKUR <span class="text-primary-container">DOLULUK ORANI</span></h2>
<p class="text-on-surface-variant text-sm uppercase tracking-widest">Şu anki aktif çalışma kapasitemiz ve müsaitlik durumu.</p>
</div>
<div class="space-y-6">
<div>
<div class="flex justify-between text-[10px] font-bold uppercase tracking-widest mb-2">
<span>Ağır Sınıf Mobil Vinçler</span>
<span class="text-primary-container">85% Dolu</span>
</div>
<div class="h-4 bg-surface-container-highest w-full">
<div class="h-full bg-primary-container" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-[10px] font-bold uppercase tracking-widest mb-2">
<span>Sepetli Platformlar</span>
<span class="text-primary-container">40% Dolu</span>
</div>
<div class="h-4 bg-surface-container-highest w-full">
<div class="h-full bg-primary-container" style="width: 40%"></div>
</div>
</div>
</div>
</div>
<div class="grain-texture absolute inset-0 pointer-events-none"></div>
</div>
</section>
<!-- Call to Action -->
<section class="bg-primary-container py-24 text-center">
<div class="max-w-4xl mx-auto px-8">
<h2 class="text-5xl md:text-7xl font-black text-on-primary uppercase tracking-tighter mb-8 leading-none">PROJENİZ İÇİN <br/>EN GÜÇLÜ ÇÖZÜM</h2>
<p class="text-on-primary text-lg mb-12 font-medium opacity-80">Uzman operatör kadromuz ve teknolojik makine parkurumuzla 7/24 hizmetinizdeyiz.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-on-primary text-primary-container px-12 py-5 font-black uppercase text-sm tracking-widest hover:bg-surface-container-lowest transition-all">HEMEN TEKLİF AL</button>
<button class="border-2 border-on-primary text-on-primary px-12 py-5 font-black uppercase text-sm tracking-widest hover:bg-on-primary hover:text-primary-container transition-all">KATALOĞU İNDİR</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-[#0E0E0E] w-full rounded-none border-t border-[#FFD700]/10 flex flex-col md:flex-row justify-between items-center px-8 py-12 w-full">
<div class="mb-8 md:mb-0">
<div class="text-[#FFD700] font-black text-2xl tracking-tighter mb-2 uppercase font-headline">TITAN HEAVY LIFT</div>
<p class="text-[#D0C6AB]/60 font-inter text-xs tracking-widest uppercase">© 2024 TITAN HEAVY LIFT. ALL RIGHTS RESERVED.</p>
</div>
<div class="flex flex-wrap justify-center gap-8">
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Terms of Service</a>
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Privacy Policy</a>
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Fleet Specifications</a>
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Operator Portal</a>
</div>
</footer>
<!-- Floating WhatsApp -->
<a class="fixed bottom-8 right-8 z-[100] bg-[#25D366] text-white p-4 shadow-2xl flex items-center justify-center transition-transform hover:scale-110 active:scale-95" href="https://wa.me/900000000000">
<svg class="w-8 h-8" fill="currentColor" viewbox="0 0 24 24">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"></path>
</svg>
</a>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 777 KiB

297
design/hakk_m_zda_aydo_an_nakliyat_vin/code.html Normal file
View File

@@ -0,0 +1,297 @@
<!DOCTYPE html>
<html class="dark" lang="tr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Hakkımızda | Aydoğan Nakliyat</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&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": {
"primary-fixed-dim": "#e9c400",
"surface-container-lowest": "#0e0e0e",
"on-primary-fixed-variant": "#544600",
"surface-container-high": "#2a2a2a",
"primary": "#fff6df",
"on-surface-variant": "#d0c6ab",
"surface-tint": "#e9c400",
"on-secondary": "#2f3131",
"tertiary": "#defcff",
"surface-container-low": "#1c1b1b",
"on-primary-fixed": "#221b00",
"surface-container-highest": "#353535",
"on-surface": "#e5e2e1",
"surface-dim": "#131313",
"error-container": "#93000a",
"inverse-primary": "#705d00",
"primary-container": "#ffd700",
"on-primary": "#3a3000",
"background": "#131313",
"surface-container": "#20201f",
"surface": "#131313",
"outline-variant": "#4d4732"
},
"borderRadius": {
"DEFAULT": "0px",
"lg": "0px",
"xl": "0px",
"full": "9999px"
},
"fontFamily": {
"headline": ["Space Grotesk", "sans-serif"],
"body": ["Inter", "sans-serif"],
"label": ["Inter", "sans-serif"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
background-color: #131313;
color: #e5e2e1;
}
</style>
</head>
<body class="font-body">
<!-- Shared Header -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-outline-variant px-6 lg:px-20 py-4 bg-surface sticky top-0 z-50">
<div class="flex items-center gap-4 text-white">
<div class="size-8 text-primary-container">
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-white text-xl font-headline font-bold leading-tight tracking-[-0.015em]">Aydoğan Nakliyat</h2>
</div>
<div class="hidden md:flex flex-1 justify-end gap-8">
<nav class="flex items-center gap-9">
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">Anasayfa</a>
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">Hizmetler</a>
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">Galeri</a>
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">İletişim</a>
</nav>
<button class="flex items-center justify-center bg-surface-container-highest text-white px-4 py-2 hover:bg-primary-container hover:text-on-primary transition-all">
<span class="material-symbols-outlined mr-2" data-icon="phone">phone</span>
<span class="text-sm font-bold">Hemen Ara</span>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="relative h-[614px] min-h-[400px] flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center z-0" data-alt="Heavy industrial crane towering against a dramatic sunset sky at a construction site with sharp steel textures and golden lighting" style="background-image: linear-gradient(to bottom, rgba(19, 19, 19, 0.4), rgba(19, 19, 19, 0.9)), url('https://lh3.googleusercontent.com/aida-public/AB6AXuDgXwx1ScSKzThcSZVBFwN2BfXUpbEFYwOgbCkAXqa4hzIeOQRxqMHjyzUIMv0C7EmaDkB7J4CF5mJ8SBTZLJ91xh_wxkyNpzz53jpwiygithDN0XoMXWrhddNaK2byvFVuhqiHmEMoOvoqq1s0I9TAq4IVB9gWhQvf76BPuUy6BHSm-ly6tFv4NxoFbr5r_oauFVge63qLtA6XBwV-jtNe_Dqt4HR8Mktf5ECW_6PjSQCFrtSu3h4PF3VfTWKGjxfbkak2qbNTYnA');">
</div>
<div class="relative z-10 text-center px-4">
<h1 class="text-primary-container text-6xl md:text-8xl font-headline font-black tracking-tighter uppercase">
Hakkımızda
</h1>
<div class="h-1 w-24 bg-primary-container mx-auto mt-4 mb-6"></div>
<p class="text-on-surface text-lg md:text-xl max-w-2xl mx-auto font-light tracking-wide">
Dalaman'ın güvenilir çözüm ortağı: Tecrübe, güç ve hassasiyetle yükseliyoruz.
</p>
</div>
</section>
<!-- Our Story -->
<section class="py-20 px-6 lg:px-20 bg-surface">
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="relative">
<div class="absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-primary-container"></div>
<img alt="Our Story" class="grayscale hover:grayscale-0 transition-all duration-700" data-alt="Wide angle shot of a large yellow heavy-duty crane parked at an industrial site in Dalaman with mountain background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzBYFgesJhpqzuW-5vjLXy989WMZa7pD-d3JQJTOGKzaJ5YiXNYLSMY3aAByWjMgfuSYT5d5lqSaMObGYU2Yo6eyWgIrajXeSRzOJ9uqzLgt7Ui4Ssl_pmcGKjzqA3zYFm1Q-HHdevkymKLOID80gM69nTigSgqvbADDs5lmMH5I0ws9n7mskTpCooZslypTrss6hE-MNWmRnnFK492nXC9DS-F3yKDmI1B-sVuNgtwK1X-jS01uPyz_X2eo1QoQ6rX5EOU1vsHSk"/>
<div class="absolute -bottom-8 -right-8 bg-primary-container p-8 hidden md:block">
<p class="text-on-primary font-headline font-black text-4xl">20+</p>
<p class="text-on-primary text-xs uppercase font-bold tracking-widest">Yıllık Tecrübe</p>
</div>
</div>
<div class="flex flex-col gap-6">
<span class="text-primary-container font-label text-sm uppercase tracking-[0.3em]">Kurumsal Kimliğimiz</span>
<h2 class="text-4xl md:text-5xl font-headline font-bold text-on-surface leading-none">Dalaman'ın Gücü, Sizin Güveniniz.</h2>
<p class="text-on-surface-variant text-lg leading-relaxed">
Aydoğan Nakliyat Vinç olarak, Dalaman ve çevresinde uzun yıllardır güvenilirlik ve tecrübeyle hizmet vermekteyiz. Sektördeki köklü geçmişimizle, her projede en yüksek standartları hedefliyoruz.
</p>
<p class="text-on-surface-variant text-lg leading-relaxed">
Ağır yük nakliyatından hassas vinç operasyonlarına kadar, modern filomuz ve uzman kadromuzla projelerinizin her aşamasında yanınızdayız. Mühendislik odaklı yaklaşımımızla, en zorlu coğrafi koşullarda bile kusursuz hizmet sağlıyoruz.
</p>
</div>
</div>
</section>
<!-- Core Values -->
<section class="py-20 bg-surface-container-low border-y border-outline-variant">
<div class="max-w-7xl mx-auto px-6 lg:px-20">
<div class="text-center mb-16">
<h2 class="text-3xl font-headline font-bold text-white uppercase tracking-wider">Temel Değerlerimiz</h2>
<div class="w-16 h-1 bg-primary-container mx-auto mt-4"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Value 1 -->
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="security">security</span>
<h3 class="text-xl font-headline font-bold text-white mb-3">Güvenlik</h3>
<p class="text-on-surface-variant text-sm">Sıfır kaza politikasıyla, tüm operasyonlarımızda uluslararası güvenlik standartlarını uyguluyoruz.</p>
</div>
<!-- Value 2 -->
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="speed">speed</span>
<h3 class="text-xl font-headline font-bold text-white mb-3">Hız</h3>
<p class="text-on-surface-variant text-sm">Zamanın değerini biliyoruz. En karmaşık projeleri bile belirlenen takvim dahilinde tamamlıyoruz.</p>
</div>
<!-- Value 3 -->
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="precision_manufacturing">precision_manufacturing</span>
<h3 class="text-xl font-headline font-bold text-white mb-3">Hassasiyet</h3>
<p class="text-on-surface-variant text-sm">Milimetrik hesaplamalarla, en değerli yüklerinizi en ufak bir zarar görmeden taşıyoruz.</p>
</div>
<!-- Value 4 -->
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="group">group</span>
<h3 class="text-xl font-headline font-bold text-white mb-3">Müşteri Odaklılık</h3>
<p class="text-on-surface-variant text-sm">Her projenin kendine has ihtiyaçları vardır. Size özel esnek ve akılcı çözümler üretiyoruz.</p>
</div>
</div>
</div>
</section>
<!-- Mission & Vision -->
<section class="py-20 px-6 lg:px-20 bg-surface">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant border border-outline-variant">
<div class="bg-surface-container-high p-12 lg:p-20">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-primary-container flex items-center justify-center">
<span class="material-symbols-outlined text-on-primary" data-icon="rocket_launch">rocket_launch</span>
</div>
<h2 class="text-3xl font-headline font-bold text-white uppercase tracking-tight">Misyonumuz</h2>
</div>
<p class="text-on-surface-variant text-lg leading-relaxed italic">
"Modern teknolojiyi geleneksel iş ahlakıyla birleştirerek, Dalaman bölgesindeki altyapı ve inşaat projelerine en güvenilir, en hızlı ve en profesyonel lojistik ve vinç desteğini sağlamak."
</p>
</div>
<div class="bg-surface-container-lowest p-12 lg:p-20">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-primary-container flex items-center justify-center">
<span class="material-symbols-outlined text-on-primary" data-icon="visibility">visibility</span>
</div>
<h2 class="text-3xl font-headline font-bold text-white uppercase tracking-tight">Vizyonumuz</h2>
</div>
<p class="text-on-surface-variant text-lg leading-relaxed">
"Sektörde yenilikçi çözümlerimiz ve sarsılmaz güvenilirliğimizle, sadece Dalaman'da değil, tüm Ege ve Akdeniz bölgesinde ağır nakliyat ve vinç hizmetlerinde lider marka olmak."
</p>
</div>
</div>
</section>
<!-- Stats -->
<section class="py-16 bg-primary-container">
<div class="max-w-7xl mx-auto px-6 lg:px-20 flex flex-wrap justify-between gap-12 text-on-primary">
<div class="flex flex-col items-center md:items-start">
<span class="text-5xl font-headline font-black">20+</span>
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Yıllık Tecrübe</span>
</div>
<div class="flex flex-col items-center md:items-start">
<span class="text-5xl font-headline font-black">1500+</span>
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Tamamlanan Proje</span>
</div>
<div class="flex flex-col items-center md:items-start">
<span class="text-5xl font-headline font-black">25+</span>
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Modern Araç Filosu</span>
</div>
<div class="flex flex-col items-center md:items-start">
<span class="text-5xl font-headline font-black">500t</span>
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Maksimum Kaldırma Kapasitesi</span>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="relative py-24 px-6 lg:px-20 overflow-hidden bg-surface-container-lowest">
<div class="absolute right-0 top-0 h-full w-1/3 opacity-20 hidden lg:block">
<img class="h-full w-full object-cover" data-alt="Technical close-up of heavy industrial gears and steel chains from a crane system with industrial yellow highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_ZX-fbwQbf9kIEKnJnFtu5NQ363H44RdCxqVhdpgIUb0jKFxAqO6uKqCDRQ7qS49Sd7Kwt8VTe_lzV0ZEHkJJnL767brwA1lticCl17-MHc78XDvJhCZjD6r6oLqhTgut5U9LvjXY0UjD3VH0HPo7_MLdK45SnTu3nqQ7Y11hqTwxxyWaqzmT0qKiYbIs0ryfiebNF9wu4JaIE_pWilEt7JiwhZNWb1jcZWCn1FDrAskjvDf2ioo-CD1mk7vXVcKI4_DhUvcqXP8"/>
</div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="max-w-2xl">
<h2 class="text-4xl md:text-6xl font-headline font-black text-white leading-tight mb-8">
BÜYÜK PROJELER, <span class="text-primary-container">GÜÇLÜ ÇÖZÜMLER</span> İSTER.
</h2>
<p class="text-on-surface-variant text-xl mb-10">
Sizin için en uygun vinç ve nakliyat çözümünü birlikte planlayalım. Projenizin detaylarını paylaşın, profesyonel teklifimizi sunalım.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary-container text-on-primary px-10 py-5 font-headline font-bold text-lg hover:bg-white transition-all">
Teklif İste
</button>
<button class="border-2 border-primary-container text-primary-container px-10 py-5 font-headline font-bold text-lg hover:bg-primary-container hover:text-on-primary transition-all">
Hizmetlerimiz
</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-surface-container-low border-t border-outline-variant pt-20 pb-10">
<div class="max-w-7xl mx-auto px-6 lg:px-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
<div>
<div class="flex items-center gap-2 mb-6">
<div class="size-6 text-primary-container">
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-xl font-headline font-bold text-white">Aydoğan Nakliyat</span>
</div>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">
Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri sunuyoruz. Tecrübemizle yükünüzü hafifletiyoruz.
</p>
</div>
<div>
<h4 class="text-white font-headline font-bold mb-6 uppercase text-sm tracking-widest">Hızlı Bağlantılar</h4>
<ul class="flex flex-col gap-3">
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Anasayfa</a></li>
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Hizmetlerimiz</a></li>
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Galeri</a></li>
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Hakkımızda</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-headline font-bold mb-6 uppercase text-sm tracking-widest">İletişim Bilgileri</h4>
<ul class="flex flex-col gap-4 text-on-surface-variant text-sm">
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary-container" data-icon="location_on">location_on</span>
<span>Dalaman, Muğla, Türkiye</span>
</li>
<li class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary-container" data-icon="call">call</span>
<span>+90 (5XX) XXX XX XX</span>
</li>
<li class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary-container" data-icon="mail">mail</span>
<span>info@aydogannakliyat.com</span>
</li>
</ul>
</div>
<div>
<h4 class="text-white font-headline font-bold mb-6 uppercase text-sm tracking-widest">Çalışma Saatleri</h4>
<ul class="flex flex-col gap-3 text-on-surface-variant text-sm">
<li class="flex justify-between"><span>Pazartesi - Cumartesi:</span> <span>08:00 - 19:00</span></li>
<li class="flex justify-between"><span>Pazar:</span> <span class="text-primary-container">Acil Durum</span></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 lg:px-20 border-t border-outline-variant pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-on-surface-variant font-medium">
<p>© 2024 Aydoğan Nakliyat Vinç. Tüm Hakları Saklıdır.</p>
<div class="flex gap-6">
<a class="hover:text-primary-container" href="#">Gizlilik Politikası</a>
<a class="hover:text-primary-container" href="#">KVKK</a>
</div>
</div>
</footer>
<!-- WhatsApp Floating Icon -->
<a class="fixed bottom-8 right-8 z-[100] bg-[#25D366] text-white p-4 rounded-full shadow-2xl hover:scale-110 transition-transform flex items-center justify-center" href="https://wa.me/905000000000" target="_blank">
<svg fill="currentColor" height="32" viewbox="0 0 448 512" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.7 17.8 69.7 27.2 106.2 27.2 122.4 0 222-99.6 222-222 0-59.3-23-115.1-65-157.1zM223.9 445.9c-33.1 0-65.4-8.9-93.6-25.7l-6.7-4-69.6 18.3 18.6-67.9-4.4-7c-18.4-29.4-28.1-63.3-28.1-98.2 0-101.7 82.8-184.5 184.5-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.7-186.6 184.7zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.2-8.5-44.2-27.1-16.4-14.6-27.4-32.7-30.6-38.2-3.2-5.6-.3-8.6 2.4-11.3 2.5-2.5 5.5-6.5 8.3-9.7 2.8-3.3 3.7-5.6 5.6-9.3 1.9-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.2 5.8 23.5 9.2 31.5 11.8 13.3 4.2 25.4 3.6 35 2.2 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path>
</svg>
</a>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 KiB

291
design/hizmetlerimiz_aydo_an_nakliyat_vin/code.html Normal file
View File

@@ -0,0 +1,291 @@
<!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;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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary": "#3a3000",
"background": "#131313",
"error": "#ffb4ab",
"outline": "#999077",
"secondary-container": "#454747",
"on-error-container": "#ffdad6",
"surface-container": "#20201f",
"secondary-fixed-dim": "#c6c6c7",
"primary-container": "#ffd700",
"secondary": "#c6c6c7",
"on-tertiary-fixed-variant": "#004f54",
"on-secondary-fixed-variant": "#454747",
"tertiary-fixed-dim": "#00dbe8",
"inverse-surface": "#e5e2e1",
"tertiary-fixed": "#79f5ff",
"tertiary-container": "#00f1ff",
"inverse-on-surface": "#313030",
"secondary-fixed": "#e2e2e2",
"surface-bright": "#393939",
"on-error": "#690005",
"on-background": "#e5e2e1",
"surface": "#131313",
"on-tertiary": "#00363a",
"outline-variant": "#4d4732",
"surface-container-lowest": "#0e0e0e",
"primary-fixed-dim": "#e9c400",
"surface-container-high": "#2a2a2a",
"on-primary-fixed-variant": "#544600",
"primary": "#fff6df",
"on-surface-variant": "#d0c6ab",
"surface-tint": "#e9c400",
"on-secondary": "#2f3131",
"tertiary": "#defcff",
"surface-container-low": "#1c1b1b",
"surface-variant": "#353535",
"on-primary-fixed": "#221b00",
"on-tertiary-fixed": "#002022",
"on-primary-container": "#705e00",
"on-tertiary-container": "#006a70",
"on-surface": "#e5e2e1",
"surface-dim": "#131313",
"error-container": "#93000a",
"inverse-primary": "#705d00",
"surface-container-highest": "#353535",
"on-secondary-fixed": "#1a1c1c",
"primary-fixed": "#ffe16d",
"on-secondary-container": "#b4b5b5"
},
"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
}
.grain-texture {
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuBVwwV1AWmSjh-DBeqCdb2UTs8eFT_RmZr-5H8WwzjfLASrJY99H9HTmAHD5opdxRXZEVAiVf74SzfO2e_wpfs9a7C5Tn8wRPGLDpioUM-iyLB2fkQmxFbweDOLQQeRmbggDPcZFnmFiKG8qA8WeVKAWAx2RtwenmI7yD_qzMEnAy-Q2LaDJBzSTl_IQc-XwH80daKeIBOEjfsVZG7OREHX8JpnnLwJmulLITAurtFflvbiMiAG3D2lQ4k7oyyZFwX0-S4add9EzqE);
opacity: 0.05
}</style>
</head>
<body class="bg-background text-on-background">
<!-- TopNavBar Shell -->
<header class="fixed top-0 w-full z-50 bg-[#131313]/70 backdrop-blur-xl duration-300 ease-in-out">
<nav class="flex justify-between items-center px-8 h-20 w-full">
<div class="text-2xl font-black tracking-tighter text-[#FFD700] font-headline uppercase">
IRON &amp; AMBER
</div>
<div class="hidden md:flex gap-8 font-headline tracking-tight uppercase text-sm">
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Hizmetler</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Filo</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Projeler</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Hakkımızda</a>
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">İletişim</a>
</div>
<button class="bg-[#FFD700] text-[#3A3000] px-6 py-2 font-headline font-bold uppercase hover:bg-[#E9C400] transition-all">
Teklif Al
</button>
</nav>
</header>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative h-[614px] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10">
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover opacity-40 grayscale group-hover:grayscale-0 transition-all duration-700" data-alt="dramatic wide shot of industrial cranes against a dark moody sunset sky with sharp metallic details and high contrast" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDwqSqF8cra4s8At58Qo27cjXx5m7VTzIWpj9O82VD-gI2HBnIi1MpJs93KtibYShoKFucIMIduy0TxTGEDVJvfm0r0ZB5DSDElbQYJjgjwlwg4cL5cvkG1foS1prcOz08fXmPUEKW0WD2c8FEQMZ6scJH7tG_8EozXUg0-UmzgovkycTEVtgd0pOx9t75ZrdDVi9EEHSkTqBAe6QhFgcmluUEt_kX4mDRGaKFDqoEWs1PJ94_nybPwsZCaDyebX6BYtXCyPTwJ4TI"/>
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div>
</div>
<div class="relative z-10 max-w-4xl">
<p class="text-primary-container font-headline font-bold tracking-[0.2em] uppercase mb-4 text-sm">Endüstriyel Güç ve Mühendislik Çözümleri</p>
<h1 class="text-7xl md:text-9xl font-black font-headline tracking-tighter text-on-surface leading-[0.9] uppercase">
Hizmetlerimiz
</h1>
<div class="mt-8 flex gap-4">
<div class="h-1 w-24 bg-primary-container"></div>
</div>
</div>
</section>
<!-- Services Grid -->
<section class="py-24 px-8 md:px-16 bg-surface">
<div class="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
<!-- Card 1: Mobil Vinç -->
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
<div>
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="precision_manufacturing">precision_manufacturing</span>
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Mobil Vinç Kiralama</h3>
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
500 tona kadar kaldırma kapasitesine sahip geniş filomuzla, en zorlu şantiye koşullarında yüksek hassasiyetli operasyonlar.
</p>
</div>
<div class="mt-12">
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
Teklif Al
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
<!-- Subtle Background Image for Card -->
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
<img class="w-full h-full object-contain object-right-bottom" data-alt="technical blueprint of a mobile crane arm with mechanical joints and heavy hydraulic systems" src="https://lh3.googleusercontent.com/aida-public/AB6AXuANXgTwtnfZAFquOw7HpfE2qtolA0Z9o4XQT-FhR3kMhiMV8slT27bO3MbdvaWlb9SqJWHwX5cdRjpbvHPAcjB5bWc_Gr1ukSjeNQTjhKpYDbXf-7iQAbl6vO64cKymJR9bomQQgsZf0ly8Ypt1MGaYa42zVw_psCsXwRP8oqeHIuRasy0-cJiM2qJ8Zt0GAdlTuJ3tMsJ9fzHavgliwLDMFkxLw5eMOT6QLaDWzHlNNBYtRsiMs2_8TnG4PHgi-D-EXy5Z1GZjbAY"/>
</div>
</div>
<!-- Card 2: Sepetli Platform -->
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
<div>
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="height">height</span>
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Sepetli Platform</h3>
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
75 metreye kadar erişim sağlayan modern platform filomuzla yüksek irtifa montaj ve bakım işlerinizde maksimum güvenlik.
</p>
</div>
<div class="mt-12">
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
Teklif Al
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
<img class="w-full h-full object-contain object-right-bottom" data-alt="industrial lift platform mechanical structure showing the telescopic boom mechanism" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtmvvD8rlL-hCcOw4pkjudj6MGroo3uBv4S1nfGUTopjMu0U3Msp4k5RzxOzI-4hfNTPcB354QejZyrizHahV00R8N6tw9sp5R9fx6l2ySXQGw8iwQx_T962PfROQ5cqc3ul4QeAbvCn6wFhEqV8dm-AkW_3PoBZNEmtDUgOK3njdiJE7McFrE8AcjtLcjVsS76YJ-79rQklEDSTBridOQhx-7ttWTiAALZmvrsTF0qazX_tDpNSkQb-HFYpNC4yhmpfr2jX5IFVQ"/>
</div>
</div>
<!-- Card 3: Ağır Nakliyat -->
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
<div>
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="conveyor_belt">conveyor_belt</span>
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Ağır Nakliyat</h3>
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
Gabari dışı ve ağır tonajlı yüklerin özel ekipmanlar ve low-bed araçlarla emniyetli bir şekilde taşınması ve konumlandırılması.
</p>
</div>
<div class="mt-12">
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
Teklif Al
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
<img class="w-full h-full object-contain object-right-bottom" data-alt="massive multi-axle heavy transport trailer carrying a large industrial transformer" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrf0iOTsZNrVAFqtriXdBuiH10S9pduEgn54N1MPF9n_llxMc_OQK25_OgAoRznmFhTJAMEzAdORN7c5x3YMobLAr168lX8afjJLQJA01Y6VC9yG6a95l_bnln5toBh0gdGsIu_0wpev4AIlxpdlNrf9DnnpFCcVHnsqj1ioaLlHdHaUzR11hpZvQGGB4AElZTveripGz5VIp7-nOI53MUpzn5uYrSFa9Sb4iGM6wpoY4i-_4egSbxCjaq9VLRWlJuN069pk7pdo0"/>
</div>
</div>
<!-- Card 4: Proje Taşımacılığı -->
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
<div>
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="architecture">architecture</span>
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Proje Taşımacılığı</h3>
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
Anahtar teslim endüstriyel tesis taşıma ve kurulum projeleri için mühendislik temelli uçtan uca lojistik planlama.
</p>
</div>
<div class="mt-12">
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
Teklif Al
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
<img class="w-full h-full object-contain object-right-bottom" data-alt="complex logistics map with technical routing lines and industrial site markings" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDaH8bz8pUVZksNKTaJCf3RgNgb1qDqtcuEQtrW_1ZXw2QFLvacS97LwbYCZhl08kZ-I6VNRC_fL-sEcUg6Eb3FxreeXN9uJHvqTbepMb7B8Hp-1JFQ0kvL8hMOuZGeoEFHbULBG5luTL6J0XS7vWjA5Iy4I3FqYc39s19Id5SjIT2_Z6eZ_dLlwqS7eJTDgptQwplcDLQ44zUp3MvS00qZOTasQDbYrpNK4poks-Vzpch3O5X75nYAFt-EGJhmvenOl7WS2T_gfHY"/>
</div>
</div>
</div>
</section>
<!-- Why Choose Us / Metrics -->
<section class="py-24 px-8 md:px-16 bg-surface-container-lowest border-y border-outline-variant/10">
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<div>
<h2 class="text-5xl font-headline font-black uppercase mb-8 leading-tight">
Neden IRON &amp; AMBER?
</h2>
<p class="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 class="space-y-12">
<div class="flex gap-6">
<div class="text-primary-container text-5xl font-black font-headline">01</div>
<div>
<h4 class="text-xl font-headline font-bold uppercase mb-2">Hassas Mühendislik</h4>
<p class="text-on-surface-variant text-sm">Her kaldırma operasyonu için detaylı simülasyon ve planlama.</p>
</div>
</div>
<div class="flex gap-6">
<div class="text-primary-container text-5xl font-black font-headline">02</div>
<div>
<h4 class="text-xl font-headline font-bold uppercase mb-2">Sertifikalı Operatörler</h4>
<p class="text-on-surface-variant text-sm">Uluslararası standartlarda eğitim almış uzman teknik ekip.</p>
</div>
</div>
<div class="flex gap-6">
<div class="text-primary-container text-5xl font-black font-headline">03</div>
<div>
<h4 class="text-xl font-headline font-bold uppercase mb-2">7/24 Teknik Destek</h4>
<p class="text-on-surface-variant text-sm">Kesintisiz operasyon için anında müdahale ve destek hizmeti.</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container-high p-8 flex flex-col justify-center border-l-4 border-primary-container">
<span class="text-5xl font-black font-headline text-primary-container mb-2">500T</span>
<span class="text-xs uppercase tracking-widest font-bold opacity-60">Max Kapasite</span>
</div>
<div class="bg-surface-container-high p-8 flex flex-col justify-center">
<span class="text-5xl font-black font-headline text-on-surface mb-2">15+</span>
<span class="text-xs uppercase tracking-widest font-bold opacity-60">Yıllık Deneyim</span>
</div>
<div class="bg-surface-container-high p-8 flex flex-col justify-center">
<span class="text-5xl font-black font-headline text-on-surface mb-2">100%</span>
<span class="text-xs uppercase tracking-widest font-bold opacity-60">İş Güvenliği</span>
</div>
<div class="bg-surface-container-high p-8 flex flex-col justify-center border-l-4 border-primary-container">
<span class="text-5xl font-black font-headline text-primary-container mb-2">24/7</span>
<span class="text-xs uppercase tracking-widest font-bold opacity-60">Aktif Operasyon</span>
</div>
</div>
</div>
</section>
</main>
<!-- Footer Shell -->
<footer class="bg-[#131313] w-full border-t-0 flex flex-col md:flex-row justify-between items-center px-8 py-12 transition-opacity duration-200">
<div class="flex flex-col gap-4 mb-8 md:mb-0">
<div class="text-[#FFD700] font-black text-2xl font-headline uppercase tracking-tighter">IRON &amp; AMBER</div>
<p class="text-[#D0C6AB] font-inter text-xs uppercase tracking-widest">© 2024 IRON &amp; AMBER INDUSTRIAL SOLUTIONS</p>
</div>
<div class="flex flex-wrap justify-center gap-8 text-[#D0C6AB] font-inter text-sm uppercase tracking-widest">
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Mobil Vinç Kiralama</a>
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Sepetli Platform</a>
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Ağır Nakliyat</a>
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Teknik Destek</a>
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">KVKK</a>
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Gizlilik Politikası</a>
</div>
</footer>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

395
design/homepage.html Normal file
View File

@@ -0,0 +1,395 @@
<!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&amp;family=Inter:wght@300;400;500;600;700;800&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 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>

BIN
design/homepage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 385 KiB

64
design/iron_amber/DESIGN.md Normal file
View File

@@ -0,0 +1,64 @@
# Design System Strategy: Industrial Precision
## 1. Overview & Creative North Star: "The Kinetic Monolith"
The heavy lifting industry is defined by the intersection of massive scale and surgical precision. This design system moves away from the "cluttered construction" aesthetic, opting instead for **The Kinetic Monolith**. This North Star envisions the UI as a series of heavy, interlocking structural slabs—imposing, stable, and powerful—yet animated with a modern, high-tech fluidity.
To break the "standard corporate template" look, we utilize **Hard-Edge Brutalism** mixed with **Editorial Sophistication**. We embrace zero-radius corners (0px) to mimic the sharp cut of steel beams, and we leverage extreme typographic scales to command authority. This is not just a rental service; it is an engineering power-house.
---
## 2. Colors: High-Contrast Industrialism
Our palette is rooted in the high-visibility world of heavy machinery. We use contrast not just for accessibility, but as a structural tool.
* **Primary (Industrial Yellow - #FFD700):** This is our "Action Signal." Use `primary_container` (#FFD700) for high-priority CTAs and `primary_fixed_dim` (#E9C400) for interactive states. It represents the crane, the caution, and the energy.
* **Surface Foundation (Deep Charcoal - #131313):** We avoid pure pitch black in favor of `surface` (#131313) to allow for depth.
* **The "No-Line" Rule:** Direct intervention: **No 1px solid borders.** To separate a fleet category from a service description, shift the background from `surface` to `surface_container_low`. Boundaries are felt through tonal shifts, not drawn with lines.
* **Surface Hierarchy & Nesting:** Treat the layout as an assembly line.
* Main Page: `surface`
* Structural Sections: `surface_container`
* Interactive Cards: `surface_container_high`
* **Signature Textures:** For hero sections, apply a subtle 10% opacity noise grain or a linear gradient from `surface` to `surface_container_highest` to mimic the matte finish of powder-coated steel.
---
## 3. Typography: The Engineering Scale
We use typography to convey weight. Our choices reflect the blueprint and the brand’s industrial backbone.
* **Display & Headlines (Space Grotesk):** A geometric sans-serif with a mechanical soul. The wide apertures and "tech" feel of Space Grotesk suggest precision. Use `display-lg` (3.5rem) with tight letter-spacing (-0.02em) for hero headlines to create a "wall of text" effect that feels immovable.
* **Body & Labels (Inter):** The "Workhorse." Inter provides a neutral, highly legible contrast to the aggressive display type. Use `body-lg` for technical specifications and `label-sm` (uppercase with 0.05em tracking) for metadata like "Crane Capacity" or "Job Site Location."
* **Visual Hierarchy:** Headlines should always be `on_surface` or `primary`. Body text should utilize `on_surface_variant` (#D0C6AB) to reduce visual noise in long technical descriptions.
---
## 4. Elevation & Depth: Tonal Layering
In a world of 0px border radii, traditional shadows feel out of place. We achieve depth through **Structural Stacking**.
* **The Layering Principle:** Instead of lifting an object off the page, we "carve" it into the interface. A "Heavy Lift" service card should be `surface_container_lowest` (#0E0E0E) nested within a `surface_container` (#20201F) section. This creates a recessed, high-end "machined" look.
* **The "Ghost Border" Fallback:** Where separation is critical for accessibility, use `outline_variant` at 15% opacity. It should be felt as a subtle change in light, not a hard edge.
* **Glassmorphism & Depth:** For navigation bars or floating action menus, use `surface_bright` at 70% opacity with a `40px` backdrop blur. This keeps the "Industrial Yellow" of the primary content visible as it scrolls beneath, maintaining brand energy throughout the journey.
---
## 5. Components: The Machined Toolkit
* **Buttons:**
* **Primary:** `primary_container` (#FFD700) background, `on_primary` (#3A3000) text. **0px border radius.** Hover state: `primary_fixed_dim`.
* **Secondary:** `surface_container_highest` background, `primary` text. This looks like a dark steel plate with yellow engraving.
* **Heavy Duty Cards:** No dividers. Separate the "Header" of the card from the "Body" by using a `surface_container_high` top section and a `surface_container` bottom section.
* **Input Fields:** Use `surface_container_lowest` for the field background with a `primary` 2px bottom-only border on focus. This mimics the "underlined" look of technical architectural drawings.
* **Fleet Status Chips:** Use `tertiary_container` (Cyan/Teal) for "Available" and `error_container` for "In Maintenance." These should be rectangular, sharp, and high-contrast.
* **The "Load Meter":** A custom component for this industry. A thick horizontal bar using `primary_container` to show crane capacity usage, set against a `surface_container_highest` track.
---
## 6. Do's and Don'ts
### Do:
* **Do** use intentional asymmetry. Align heavy text blocks to the left and allow large "crane-arm" imagery to break the grid and bleed off the right edge of the screen.
* **Do** use "Extreme Contrast." Pair a `display-lg` headline with a `label-sm` sub-headline for an editorial, high-end feel.
* **Do** use `primary` (Yellow) sparingly as a spotlight. If everything is yellow, nothing is important.
### Don't:
* **Don't** use rounded corners. Everything must be 0px. Softness contradicts the brand’s "Robust and Reliable" personality.
* **Don't** use standard 1px grey dividers. Use white space or a background color shift of 2–3% to define sections.
* **Don't** use generic stock photography. Use high-contrast, desaturated imagery of machinery with "Industrial Yellow" accents highlighted.

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