256 lines
16 KiB
HTML
256 lines
16 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"/>
|
|
<title>About Us | Kelola Bumi</title>
|
|
<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;
|
|
}
|
|
.bento-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 24px;
|
|
}
|
|
</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="max-w-7xl mx-auto w-full flex justify-between items-center">
|
|
<div class="flex items-center gap-2">
|
|
<img alt="Kelola Bumi Logo" class="h-10 w-auto" data-alt="minimalist logo for an agricultural technology company featuring a stylized green leaf integrated with a globe icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBjrLlZPafeXjMqiHTRQCwxp4J4yvyZSabDvyc3xCRn9Ln1o5lXkVtYb9-MTH6HIQpEEaCZBzJ5M72M2J3tvXePvpOFNLpJwWFYLbD9UEiHSG15thtGmpFxx-yVPAZhOKU8ZZkCxifWiUrxrtGdJ1i3M5tnvv_dBpQFF9eTN_yS29Fa7NBBzJ5K4SGNWXeLW7J27RjJjv_MwGDO9WceIlAU4h_91feUzQN6vpSFNoT4bWG8Hwl2YWDRqOxwR6mu8i55ecXNcHn6G7HJ"/>
|
|
<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-green-700 dark:text-green-400 border-b-2 border-green-600 pb-1" 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-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Contact</a>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-bold scale-95 active:scale-90 transition-transform">
|
|
Consult Now
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<main class="pt-20">
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[614px] flex items-center overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img class="w-full h-full object-cover" data-alt="wide aerial shot of vibrant green Indonesian rice terraces during a clear morning with soft sunlight and misty mountains in the distance" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6Um2mPILv3yNlw4OlJVVxCT8uLezhcJYqv3mxDUjO0NBO6eVcX3_UnXrl8HHpDoZ9gsO51vNMCJFZ3r193achL_k1aAHyAxdPvvRu8raaxfEtuGBJ-HVfYuI0KDUphgV6T88XO19NWrlSSWOMZREXlUiGLVmBJXm8keI0AiZCr3EkO8hAZA76EHuq18R365dtqrDCM8nHX10v1Q6Y3SIg5ruRpW0g8_LFJjanFSAyXrW-CeHKR9j7_4tkNAW5XjwJzMrBgV5g-fLB"/>
|
|
<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-7xl mx-auto px-8 w-full">
|
|
<span class="font-label-caps text-primary uppercase mb-4 block">Tentang Kami</span>
|
|
<h1 class="font-h1 text-h1 text-on-surface max-w-2xl mb-6">Membangun Negeri Melalui Sektor Agraria</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
|
|
Berdedikasi untuk memajukan kedaulatan pangan Indonesia melalui integrasi teknologi presisi dan kearifan lokal sejak 2015.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<!-- History & Experience Section -->
|
|
<section class="py-24 px-8 max-w-7xl mx-auto">
|
|
<div class="flex flex-col md:flex-row gap-16 items-center">
|
|
<div class="flex-1 space-y-6">
|
|
<h2 class="font-h2 text-h2 text-primary">Sejarah Perjalanan</h2>
|
|
<p class="font-body-md text-on-surface-variant leading-relaxed">
|
|
PT. Kelola Bumi Nusantara didirikan pada tahun 2015 dengan semangat untuk merevolusi ekosistem pertanian di Indonesia. Bermula dari sebuah inisiatif kecil di Jawa Barat, kini kami telah berkembang menjadi mitra strategis bagi ribuan petani dan institusi di seluruh pelosok negeri.
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-8 pt-4">
|
|
<div class="border-l-4 border-secondary pl-4">
|
|
<div class="text-h3 font-h3 text-secondary">2015</div>
|
|
<div class="text-label-caps text-outline uppercase">Tahun Berdiri</div>
|
|
</div>
|
|
<div class="border-l-4 border-primary pl-4">
|
|
<div class="text-h3 font-h3 text-primary">500+</div>
|
|
<div class="text-label-caps text-outline uppercase">Proyek Sukses</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 w-full">
|
|
<div class="relative rounded-2xl overflow-hidden aspect-video border border-outline-variant shadow-sm">
|
|
<img class="w-full h-full object-cover" data-alt="close-up of a modern farmer holding a digital tablet in a lush greenhouse, showing data charts and plant health metrics" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCErp7hZccSJ2M9E8VyhyCGMpa-rV4wUl-zmRKs-rZOFpr3ecFMck8U45pDQ6iuaPSqQeo1Ck6fPrZvWr2oISbo5_uDl9Hf00Z5w9gqOW0I0KbrrU5czevDThckibSA1UiEC30UPphOWqRR2_NnYuJo2A0HfrVWKVmsX5iRjmDhgw_Eo_fDewvf6CStqjDG6DYknFZU_J7euDyzr707aQ1BUIEeykXv2VAea1h8B9489TRu4mCfyelaRGJ0FqzU5Q4AhntvmrOvIXma"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Vision & Mission (Bento Style) -->
|
|
<section class="py-24 bg-surface-container-low">
|
|
<div class="max-w-7xl mx-auto px-8">
|
|
<div class="mb-16 text-center">
|
|
<h2 class="font-h2 text-h2 mb-4">Visi & Misi Kami</h2>
|
|
<div class="w-20 h-1 bg-secondary mx-auto rounded-full"></div>
|
|
</div>
|
|
<div class="bento-grid">
|
|
<!-- Vision Card -->
|
|
<div class="col-span-12 md:col-span-8 bg-surface-container-lowest p-10 rounded-2xl border border-outline-variant hover:shadow-lg transition-shadow">
|
|
<span class="material-symbols-outlined text-secondary text-4xl mb-6">visibility</span>
|
|
<h3 class="font-h3 text-h3 text-on-surface mb-4">Visi</h3>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">
|
|
Menjadi perusahaan agribisnis terkemuka yang menginspirasi transformasi sektor agraria nasional menuju kemandirian pangan yang berkelanjutan dan modern.
|
|
</p>
|
|
</div>
|
|
<!-- Mission Header -->
|
|
<div class="col-span-12 md:col-span-4 bg-primary p-10 rounded-2xl flex flex-col justify-center text-on-primary">
|
|
<h3 class="font-h3 text-h3 mb-4">Misi Strategis</h3>
|
|
<p class="opacity-90">Langkah nyata kami untuk mewujudkan masa depan pertanian Indonesia yang lebih tangguh.</p>
|
|
</div>
|
|
<!-- Mission Item 1 -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-8 rounded-2xl border border-outline-variant group hover:border-primary transition-colors">
|
|
<div class="w-12 h-12 bg-primary-fixed flex items-center justify-center rounded-xl mb-6 group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-on-primary-fixed group-hover:text-on-primary">school</span>
|
|
</div>
|
|
<h4 class="font-h3 text-h3 text-on-surface mb-3">1. Edukasi & Konsultasi</h4>
|
|
<p class="text-on-surface-variant">Memberikan pendampingan teknis dan transfer pengetahuan berbasis data kepada para pelaku usaha tani.</p>
|
|
</div>
|
|
<!-- Mission Item 2 -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-8 rounded-2xl border border-outline-variant group hover:border-primary transition-colors">
|
|
<div class="w-12 h-12 bg-primary-fixed flex items-center justify-center rounded-xl mb-6 group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-on-primary-fixed group-hover:text-on-primary">science</span>
|
|
</div>
|
|
<h4 class="font-h3 text-h3 text-on-surface mb-3">2. Benih & Pupuk</h4>
|
|
<p class="text-on-surface-variant">Menyediakan input pertanian berkualitas tinggi yang ramah lingkungan dan optimal untuk berbagai kondisi lahan.</p>
|
|
</div>
|
|
<!-- Mission Item 3 -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-8 rounded-2xl border border-outline-variant group hover:border-primary transition-colors">
|
|
<div class="w-12 h-12 bg-primary-fixed flex items-center justify-center rounded-xl mb-6 group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-on-primary-fixed group-hover:text-on-primary">inventory_2</span>
|
|
</div>
|
|
<h4 class="font-h3 text-h3 text-on-surface mb-3">3. Rantai Pasok</h4>
|
|
<p class="text-on-surface-variant">Membangun ekosistem logistik yang efisien untuk memastikan hasil panen terserap pasar dengan nilai ekonomi terbaik.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Trust Section -->
|
|
<section class="py-24 px-8 max-w-7xl mx-auto">
|
|
<div class="bg-inverse-surface rounded-3xl p-12 flex flex-col md:flex-row items-center justify-between gap-8">
|
|
<div class="text-inverse-on-surface max-w-xl">
|
|
<h2 class="font-h2 text-h2 mb-4">Siap Bertumbuh Bersama?</h2>
|
|
<p class="opacity-80">Jadilah bagian dari revolusi pertanian Indonesia. Kami siap mendampingi langkah Anda menuju kesuksesan agribisnis.</p>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<button class="bg-secondary text-on-secondary px-8 py-4 rounded-xl font-bold hover:bg-secondary/90 transition-all">
|
|
Hubungi Kami
|
|
</button>
|
|
<button class="border border-outline text-inverse-on-surface px-8 py-4 rounded-xl font-bold hover:bg-white/10 transition-all">
|
|
Layanan Kami
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-slate-900">
|
|
<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 items-center md:items-start gap-4">
|
|
<div class="text-lg font-bold text-green-800 dark:text-green-600">Kelola Bumi</div>
|
|
<p class="font-sans text-xs uppercase tracking-widest text-slate-500 text-center md:text-left">
|
|
© 2024 Kelola Bumi. Precision Agriculture for a Sustainable Future.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap justify-center gap-6">
|
|
<a class="font-sans text-xs uppercase tracking-widest text-slate-500 hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" 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 opacity-80 hover:opacity-100" 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 opacity-80 hover:opacity-100" 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 opacity-80 hover:opacity-100" href="#">Career</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |