350 lines
24 KiB
HTML
350 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="tr"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<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&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"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> |