259 lines
15 KiB
HTML
259 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Manrope:wght@200..800&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": {
|
|
"outline": "#707a6d",
|
|
"secondary": "#8b5000",
|
|
"on-primary-fixed": "#002105",
|
|
"on-surface": "#111d23",
|
|
"on-primary-fixed-variant": "#005318",
|
|
"surface-container-low": "#e9f6fd",
|
|
"background": "#f4faff",
|
|
"surface-container": "#e3f0f8",
|
|
"inverse-on-surface": "#e6f3fb",
|
|
"on-secondary-fixed": "#2c1600",
|
|
"inverse-surface": "#263238",
|
|
"tertiary-container": "#64bb63",
|
|
"tertiary": "#106d20",
|
|
"outline-variant": "#bfcaba",
|
|
"on-background": "#111d23",
|
|
"on-tertiary-fixed": "#002204",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"primary-fixed": "#9ff79f",
|
|
"on-primary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"secondary-container": "#ff9800",
|
|
"surface-container-highest": "#d7e4ec",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-high": "#ddeaf2",
|
|
"on-secondary-fixed-variant": "#693c00",
|
|
"surface-tint": "#126d27",
|
|
"on-surface-variant": "#40493e",
|
|
"secondary-fixed": "#ffdcbe",
|
|
"surface-dim": "#cfdce4",
|
|
"primary": "#126d27",
|
|
"on-tertiary": "#ffffff",
|
|
"inverse-primary": "#83da85",
|
|
"primary-container": "#66bb6a",
|
|
"on-secondary-container": "#653900",
|
|
"surface-variant": "#d7e4ec",
|
|
"surface": "#f4faff",
|
|
"on-error": "#ffffff",
|
|
"on-tertiary-container": "#00480f",
|
|
"secondary-fixed-dim": "#ffb870",
|
|
"surface-bright": "#f4faff",
|
|
"on-primary-container": "#004814",
|
|
"primary-fixed-dim": "#83da85",
|
|
"on-tertiary-fixed-variant": "#005312",
|
|
"tertiary-fixed": "#9df898",
|
|
"tertiary-fixed-dim": "#82db7e",
|
|
"error-container": "#ffdad6"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"unit": "4px",
|
|
"xs": "4px",
|
|
"md": "16px",
|
|
"lg": "24px",
|
|
"container-max": "1280px",
|
|
"xl": "40px",
|
|
"sm": "8px",
|
|
"gutter": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"h2": ["Space Grotesk"],
|
|
"h3": ["Space Grotesk"],
|
|
"body-lg": ["Manrope"],
|
|
"label-caps": ["Manrope"],
|
|
"body-md": ["Manrope"],
|
|
"h1": ["Space Grotesk"]
|
|
},
|
|
"fontSize": {
|
|
"h2": ["36px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"h3": ["24px", {"lineHeight": "1.4", "fontWeight": "600"}],
|
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "1.4", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"h1": ["48px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.botanical-shadow {
|
|
box-shadow: 0 10px 30px -10px rgba(18, 109, 39, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-md">
|
|
<!-- TopNavBar -->
|
|
<nav class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-8 h-20 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
|
|
<div class="flex items-center gap-2">
|
|
<img alt="Kelola Bumi Logo" class="h-10 w-auto" data-alt="clean professional logo for an agricultural technology company featuring a green leaf motif and modern typography" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBwmONIxl-E17N5ubFFKqFbDWMIikoWRO6fFUJKLqFHMnFBzGy4mFTvhFhcqYKqu-tQZL6peKPx8Ne0bAVjnrVFYhlIopgPsTiMw5f9sgCYUkjF8LJsXIAbW6oDKJWe_TQDrhtgUBnewoalwlzCjMSRIoWqsveLgcnBUUowh773f2UfU1GhO9_y39RSe0tTRz4JeaJaRJYgPg2w5BsiJBL5k8X2hG5BDnpvMwgeL63Js7ja5zQvbJawnb-9I-GrCdc2T1AO7yM5PC34"/>
|
|
<span class="text-2xl font-black text-green-700 dark:text-green-500 tracking-tighter">Kelola Bumi</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a class="font-sans text-sm tracking-wide font-semibold text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Home</a>
|
|
<a class="font-sans text-sm tracking-wide font-semibold text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">About</a>
|
|
<a class="font-sans text-sm tracking-wide font-semibold text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Services</a>
|
|
<a class="font-sans text-sm tracking-wide font-semibold text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Why Us</a>
|
|
<a class="font-sans text-sm tracking-wide font-semibold text-green-700 dark:text-green-400 border-b-2 border-green-600 pb-1" href="#">Contact</a>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-bold hover:opacity-90 active:scale-95 transition-all">
|
|
Consult Now
|
|
</button>
|
|
</nav>
|
|
<main class="pt-20">
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[400px] flex items-center justify-center overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img alt="Agricultural Landscape" class="w-full h-full object-cover" data-alt="expansive view of lush green terraced rice fields in Indonesia during a clear sunny day with mountains in the background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAHzmDMbNfQRPJapFWjNlYSuxjYMMFqWIuy9-P9g5p6udhYCdpQMft9U9zfrlDWVOmBHbohLPe-r0P0_CDzqfXRwvh1c-UYIa9rnzSdcUCZxFTSsfATxEc8q7oKKpe31d7Uk1dA1yNL_zJnc3NlI3fSU_j5h18D7yBcPfFr6rc0RL3r5EycogNwRfJRfFOhAbtjO6NXkdKiWD40xpyVqQ8V_RfvhYrdzdxLTsquZYdYEz6O5dobrLCgCqqGEtOnKmWyR8wdf1soW7hR"/>
|
|
<div class="absolute inset-0 bg-primary/20 backdrop-brightness-75"></div>
|
|
</div>
|
|
<div class="relative z-10 text-center px-4 max-w-4xl">
|
|
<h1 class="font-h1 text-h1 text-white mb-4">Mari Bertumbuh Bersama PT. Kelola Bumi Nusantara</h1>
|
|
<p class="text-white/90 font-body-lg text-body-lg">Solusi teknologi pertanian presisi untuk masa depan yang lebih hijau dan berkelanjutan.</p>
|
|
</div>
|
|
</section>
|
|
<!-- Main Content Grid -->
|
|
<section class="max-w-7xl mx-auto px-8 py-20">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
|
<!-- Contact Information & Map -->
|
|
<div class="lg:col-span-5 space-y-12">
|
|
<div class="space-y-8">
|
|
<div class="flex items-start gap-4">
|
|
<div class="bg-primary-fixed p-3 rounded-xl text-primary">
|
|
<span class="material-symbols-outlined text-2xl">location_on</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-h3 text-h3 text-primary mb-2">Alamat Kantor</h3>
|
|
<p class="text-on-surface-variant font-body-md">Jl. Raya Petir Kp. Babakan RT. 001 RW. 001 Babakan Dramaga Kabupaten Bogor Jawa Barat 16680</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="bg-primary-fixed p-3 rounded-xl text-primary">
|
|
<span class="material-symbols-outlined text-2xl">call</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-h3 text-h3 text-primary mb-2">WhatsApp/Telepon</h3>
|
|
<p class="text-on-surface-variant font-body-md">+0852-8403-6641</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="bg-primary-fixed p-3 rounded-xl text-primary">
|
|
<span class="material-symbols-outlined text-2xl">mail</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-h3 text-h3 text-primary mb-2">Email</h3>
|
|
<p class="text-on-surface-variant font-body-md">info@kelolabumi.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="bg-primary-fixed p-3 rounded-xl text-primary">
|
|
<span class="material-symbols-outlined text-2xl">share</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-h3 text-h3 text-primary mb-2">Media Sosial</h3>
|
|
<p class="text-on-surface-variant font-body-md">@kelolabumiofficial</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Map Section -->
|
|
<div class="rounded-2xl overflow-hidden border border-outline-variant h-[300px] botanical-shadow relative">
|
|
<img alt="Map Location" class="w-full h-full object-cover grayscale opacity-50" data-alt="abstract satellite view of a city grid with green park areas and road networks in a clean minimalist style" data-location="Dramaga, Bogor" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDRj62q5kd8xusFjARJ4pWO6y_Rfm4Hs-hf_JahGUFizjATyzIWTfHdnZdyK19AQDP2g9d_kR8AkjJjxNrunTHFiX7bfM_pTdp-6vAcS90u7VNE11pTYpRaLbb3o0iGnqzps9w1N9q8U8h53YnTQhc7LmlTtpRKHeynsE6X0fryVd8DIrkhREfCB88FLTClN6R5PbBvsAgScQpW58vp7ZkIxt0KTCslzf7i5ZCAPj0nWutjaLfIyAN7AA62jHdAU1i02a6m3aHNA5DM"/>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="bg-white px-6 py-4 rounded-full botanical-shadow flex items-center gap-3 border border-primary/20">
|
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
|
<span class="font-bold text-primary">Kunjungi Kami di Bogor</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Contact Form Card -->
|
|
<div class="lg:col-span-7">
|
|
<div class="bg-white p-8 md:p-12 rounded-[32px] border border-outline-variant botanical-shadow">
|
|
<h2 class="font-h2 text-h2 text-on-surface mb-8">Kirim Pesan</h2>
|
|
<form class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">Nama Lengkap</label>
|
|
<input class="w-full px-4 py-3 rounded-xl border border-outline-variant focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all bg-surface" placeholder="Masukkan nama Anda" type="text"/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">Alamat Email</label>
|
|
<input class="w-full px-4 py-3 rounded-xl border border-outline-variant focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all bg-surface" placeholder="name@email.com" type="email"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">Subjek Layanan</label>
|
|
<select class="w-full px-4 py-3 rounded-xl border border-outline-variant focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all bg-surface appearance-none">
|
|
<option>Konsultasi Pertanian</option>
|
|
<option>Teknologi Smart Farming</option>
|
|
<option>Kemitraan Bisnis</option>
|
|
<option>Lainnya</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">Pesan Anda</label>
|
|
<textarea class="w-full px-4 py-3 rounded-xl border border-outline-variant focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all bg-surface resize-none" placeholder="Ceritakan kebutuhan pertanian Anda..." rows="6"></textarea>
|
|
</div>
|
|
<button class="w-full bg-primary text-on-primary font-bold py-4 rounded-xl hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2" type="submit">
|
|
<span class="material-symbols-outlined">send</span>
|
|
Kirim Pesan Sekarang
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Newsletter / CTA -->
|
|
<section class="bg-surface-container py-16 px-8 mb-20 max-w-7xl mx-auto rounded-[40px] border border-outline-variant">
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-8 text-center md:text-left">
|
|
<div>
|
|
<h2 class="font-h2 text-h2 text-primary">Siap Berinovasi?</h2>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">Dapatkan update terbaru mengenai teknologi pertanian presisi langsung di email Anda.</p>
|
|
</div>
|
|
<div class="flex w-full md:w-auto gap-3">
|
|
<input class="px-6 py-4 rounded-xl border border-outline-variant flex-grow md:w-64" placeholder="Email Anda" type="email"/>
|
|
<button class="bg-secondary text-on-secondary px-8 py-4 rounded-xl font-bold hover:opacity-90 transition-all">Subskripsi</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full bg-gray-50 dark:bg-slate-900 border-t border-gray-200 dark:border-gray-800">
|
|
<div class="w-full py-12 px-8 flex flex-col md:flex-row justify-between items-center gap-6 max-w-7xl mx-auto">
|
|
<div class="flex flex-col gap-2">
|
|
<span class="text-lg font-bold text-green-800 dark:text-green-600">Kelola Bumi</span>
|
|
<p class="font-sans text-xs uppercase tracking-widest text-slate-500">© 2024 Kelola Bumi. Precision Agriculture for a Sustainable Future.</p>
|
|
</div>
|
|
<div class="flex gap-8">
|
|
<a class="font-sans text-xs uppercase tracking-widest text-slate-500 hover:text-green-600 hover:underline transition-all underline-offset-4" href="#">Privacy Policy</a>
|
|
<a class="font-sans text-xs uppercase tracking-widest text-slate-500 hover:text-green-600 hover:underline transition-all underline-offset-4" href="#">Terms of Service</a>
|
|
<a class="font-sans text-xs uppercase tracking-widest text-slate-500 hover:text-green-600 hover:underline transition-all underline-offset-4" href="#">Sustainability Report</a>
|
|
<a class="font-sans text-xs uppercase tracking-widest text-slate-500 hover:text-green-600 hover:underline transition-all underline-offset-4" href="#">Career</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |