291 lines
18 KiB
HTML
291 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="tr"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;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 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 & 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 & 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 & AMBER</div>
|
||
<p class="text-[#D0C6AB] font-inter text-xs uppercase tracking-widest">© 2024 IRON & 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> |