wirabasalamah/kelolabumi-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Kelola Bumi website

Browse Source
This commit is contained in:
Wira Basalamah
2026-04-23 01:43:48 +07:00
commit 65435dd167
129 changed files with 5434 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
stitch_kelola_bumi/beranda_kelola_bumi/code.html Normal file
View File

@ -0,0 +1,315 @@
<!DOCTYPE html>
<html class="light" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Kelola Bumi - Solusi Terintegrasi Pertanian Berkelanjutan</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=Manrope: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 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;
vertical-align: middle;
}
.botanical-shadow {
box-shadow: 0 10px 30px -5px rgba(18, 109, 39, 0.08);
}
</style>
</head>
<body class="bg-background text-on-background font-body-md selection:bg-primary-fixed selection:text-on-primary-fixed">
<!-- TopNavBar -->
<header class="fixed top-0 left-0 w-full z-50 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 h-20">
<nav class="max-w-7xl mx-auto px-8 h-full flex justify-between items-center">
<div class="flex items-center gap-3">
<img alt="Kelola Bumi Logo" class="h-10 w-auto" data-alt="Professional minimalist logo for Kelola Bumi featuring organic shapes and clean typography in shades of green" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiD8-e-oTQP1XWWnWHvY7A7RhxUROeE1Jb3MRo4UkjiNNc4_ufMzruJjAPa1tEYmNo8Ta9_QQTW42uhd93v2R9-m1__ZlPVD2BDXUAQHkETQ4ogBbnpazYeJihAdlmp-rVv4HhSnx-k6OewsK_yp7vmtYmSJYP7WVrgtUUttBXy6rzHlw7mP8CRicp-Ih3AQa-vHKdOK3TJS_1SAZsjOPzhOCdcVSZp_rdW346UkQ1VuuadkcLm2IVMvnFzi8ulIlqdJmOqsbgmAkM"/>
<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 font-sans text-sm tracking-wide font-semibold">
<a class="text-green-700 dark:text-green-400 border-b-2 border-green-600 pb-1" href="#">Home</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">About</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Services</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Why Us</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Contact</a>
</div>
<button class="bg-primary hover:bg-on-primary-fixed-variant text-on-primary px-6 py-2.5 rounded-lg font-bold transition-all duration-200 scale-95 active:scale-90">
Consult Now
</button>
</nav>
</header>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative min-h-[870px] flex items-center overflow-hidden bg-surface-container-low">
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-r from-surface-container-low via-surface-container-low/80 to-transparent z-10"></div>
<img class="w-full h-full object-cover" data-alt="Cinematic aerial view of lush green rice terraces in Bali with morning mist and soft sunrise lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgJ1kXuCM8741Vz4-emYtnXC917eYnD8O8M6nPRX5uhasZjDLV5Kap6jP_HXIisT5Qo41ppKltQLRzHJuRmA2u56iKas_tabS7bVFNujKxRHLtwQjys5P98x0QOlzXE_OvW78ys59NHJbrov3suBM5yI3XaFR4ipzDpzPnWmN8H3Vb3gkCH-zhhcl3lDnXRqn6ybFcW7DZSU-7dQnbB_THs_wSQUZmrFk-Ow3DBqCdrMNmrAx8lmsSZQi7jAjrB3Ex4DMDiZQkQjQ3"/>
</div>
<div class="container max-w-7xl mx-auto px-8 relative z-20">
<div class="max-w-2xl">
<span class="inline-block px-4 py-1.5 bg-primary-fixed text-on-primary-fixed-variant rounded-full text-label-caps mb-6">
SINCE 2015 • PRECISION AGRICULTURE
</span>
<h1 class="font-h1 text-h1 text-on-surface mb-6">
Solusi Terintegrasi untuk Pertanian Berkelanjutan dan Inovatif.
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10 leading-relaxed">
Membangun masa depan pangan Indonesia melalui konsultasi ahli, penyediaan sarana produksi berkualitas, dan distribusi hasil tani unggulan sejak 2015.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary text-on-primary px-8 py-4 rounded-xl font-bold flex items-center gap-2 hover:bg-on-primary-fixed-variant transition-all botanical-shadow">
Mulai Transformasi <span class="material-symbols-outlined">arrow_forward</span>
</button>
<button class="bg-white border border-outline-variant text-primary px-8 py-4 rounded-xl font-bold hover:bg-surface-container transition-all">
Lihat Katalog Produk
</button>
</div>
</div>
</div>
</section>
<!-- Brief About Section (Bento Style) -->
<section class="py-xl bg-white">
<div class="container max-w-7xl mx-auto px-8">
<div class="text-center mb-16">
<h2 class="font-h2 text-h2 text-primary mb-4">Tentang Kami Singkat</h2>
<div class="w-20 h-1.5 bg-secondary-container mx-auto rounded-full"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 h-auto md:h-[600px]">
<!-- Large Card: Identity -->
<div class="md:col-span-8 group relative overflow-hidden rounded-3xl border border-outline-variant bg-surface-container p-10 flex flex-col justify-end">
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover opacity-20 group-hover:scale-105 transition-transform duration-700" data-alt="Close-up of healthy green crop plants in a modern precision-farming greenhouse setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1NYjI2ltST9HHFXDDcIBwCw3Uzj5D2VY_dVAVT6-KsENo2hUuLCx4EOmt8amhZeMdEoyw36z4f1chnVoe99wN5PoSjxp-9ScLiIrWzSNSiUg-xq-T9SBA8ki90OlLDeS7Arlk57_XsD3yVyN8iGLgICt8l-clj1Dn2Oqs8KdROSm1pFdmumIZMUnjuZZ7YyJ6UXqQyQonYB3QG8KuQXsYrXZL6y1431_kMA8ijgQbP0hzqWsKw1VUEYDbUZnwrtaqVWbHSgYGQBrn"/>
</div>
<div class="relative z-10">
<h3 class="font-h3 text-h3 text-primary mb-4">Pionir Agribisnis Modern</h3>
<p class="font-body-md text-on-surface-variant max-w-xl">
PT. Kelola Bumi Nusantara hadir untuk menjembatani kearifan lokal tanah Indonesia dengan teknologi pertanian global. Kami percaya bahwa setiap jengkal tanah memiliki potensi maksimal jika dikelola dengan presisi dan integritas.
</p>
</div>
</div>
<!-- Vertical Card: Heritage -->
<div class="md:col-span-4 bg-tertiary-container rounded-3xl p-10 flex flex-col justify-between text-on-tertiary-container">
<span class="material-symbols-outlined text-5xl">history_edu</span>
<div>
<div class="text-5xl font-black mb-2">9+</div>
<div class="font-label-caps uppercase tracking-widest">Tahun Berdedikasi</div>
<p class="mt-4 text-sm opacity-90">Mengawal ekosistem pangan dari hulu ke hilir dengan standar kualitas yang tak tertandingi sejak 2015.</p>
</div>
</div>
<!-- Small Card: Mission -->
<div class="md:col-span-4 border border-outline-variant rounded-3xl p-8 hover:bg-surface-container-high transition-colors">
<div class="w-12 h-12 bg-primary-fixed rounded-xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-on-primary-fixed-variant">eco</span>
</div>
<h4 class="font-bold text-lg mb-2">Konsultasi Ahli</h4>
<p class="text-sm text-on-surface-variant">Strategi agronomis berbasis data untuk meningkatkan produktivitas lahan Anda.</p>
</div>
<!-- Small Card: Tech -->
<div class="md:col-span-4 border border-outline-variant rounded-3xl p-8 hover:bg-surface-container-high transition-colors">
<div class="w-12 h-12 bg-secondary-fixed rounded-xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-on-secondary-fixed-variant">precision_manufacturing</span>
</div>
<h4 class="font-bold text-lg mb-2">Sarana Produksi</h4>
<p class="text-sm text-on-surface-variant">Penyediaan benih, pupuk, dan teknologi mekanisasi pertanian kelas dunia.</p>
</div>
<!-- Small Card: Distribution -->
<div class="md:col-span-4 border border-outline-variant rounded-3xl p-8 hover:bg-surface-container-high transition-colors">
<div class="w-12 h-12 bg-tertiary-fixed rounded-xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-on-tertiary-fixed-variant">local_shipping</span>
</div>
<h4 class="font-bold text-lg mb-2">Distribusi Unggul</h4>
<p class="text-sm text-on-surface-variant">Memastikan hasil panen petani mencapai pasar dengan nilai ekonomi terbaik.</p>
</div>
</div>
</div>
</section>
<!-- Core Services Section -->
<section class="py-xl bg-surface-container-lowest">
<div class="container max-w-7xl mx-auto px-8">
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
<div class="max-w-xl">
<h2 class="font-h2 text-h2 text-on-surface mb-4">Layanan Terintegrasi Kami</h2>
<p class="text-on-surface-variant">Pendekatan holistik untuk memastikan setiap tahap dalam rantai pasok pertanian berjalan efisien dan menguntungkan.</p>
</div>
<a class="text-primary font-bold flex items-center gap-2 hover:underline" href="#">
Lihat Semua Layanan <span class="material-symbols-outlined">chevron_right</span>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="group bg-white rounded-2xl border border-gray-100 botanical-shadow p-2 transition-transform hover:-translate-y-2">
<div class="h-64 rounded-xl overflow-hidden mb-6">
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" data-alt="Professional agronomist examining crop health with a digital tablet in a sunlit field" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVqWyaYaFj6WgxRK8Q-m1Aa-Dq05WPpFEUi0cajH5D2Uq9k5qTFDjPjHgARINZVkn2LikqFH-f3w7wlWbFqzIwEpkHsmjCsnvXpdsD_eFFLp-3nyS4AzKxTYtn0J0azeIaqMFqEANrsXIC7P8xfx-9jRTYu4dF3jvHzGufqbROjOamkIV9EASvuEu2WUAs3fYnwZ_Egmnn0odj6j-W1cpq61hKWyZicxc4qtXOq9jCOqy80ckMEvWIfHDE_D7Dwa8wS0LtwzfgRg_Q"/>
</div>
<div class="px-6 pb-8">
<h4 class="font-h3 text-xl mb-3 text-primary">Agronomy Consulting</h4>
<p class="text-on-surface-variant text-sm mb-6">Audit lahan, analisis tanah laboratorium, dan rekomendasi pemupukan presisi.</p>
<div class="flex items-center text-xs font-bold text-secondary gap-4">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">verified</span> Certified Experts</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">analytics</span> Data Driven</span>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="group bg-white rounded-2xl border border-gray-100 botanical-shadow p-2 transition-transform hover:-translate-y-2">
<div class="h-64 rounded-xl overflow-hidden mb-6">
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" data-alt="Modern high-tech grain silo and processing facility with clean architecture and industrial precision" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAryWTSUqXt7dePAFWjeAL9tV87slaLA46Wxn8f3W50KUQlcqvyGtlfN1S3LgWM78w3r3__bWPIKHi9T6W8iCMYWWfCJ1xIV9xbBzhwaaJ6mFrEuqYWqSNKpHSw83HE-kJkThC9cPh3vpWJOAIYFwK_Q1yuXLG8BxN7lEELApK4m2jugbgrHM-PZv0peHkCSzyh_ApHDCqBzabS3lvWGcPGLwL54cYG47KyXNWYwLj3wBHInrDcqgwjoRNUKeLu9ILa_kTCxDWpjPIz"/>
</div>
<div class="px-6 pb-8">
<h4 class="font-h3 text-xl mb-3 text-primary">Supply Chain Solution</h4>
<p class="text-on-surface-variant text-sm mb-6">Pengadaan sarana produksi berkualitas tinggi dan logistik hasil tani yang efisien.</p>
<div class="flex items-center text-xs font-bold text-secondary gap-4">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">inventory_2</span> Premium Input</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">route</span> Global Logistics</span>
</div>
</div>
</div>
<!-- Service 3 -->
<div class="group bg-white rounded-2xl border border-gray-100 botanical-shadow p-2 transition-transform hover:-translate-y-2">
<div class="h-64 rounded-xl overflow-hidden mb-6">
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" data-alt="Overhead view of a vibrant farmers market with fresh organic vegetables neatly arranged" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDujlVx7c6VJc-jYB-Wv3eTOybiMd1ESUswUTn-NrMn134uue3xCGwjvxzAcGeUyFVJVfBOkmBRDXX36tDPAIbXxMVuVp1euVvVxVVJEYYrH-b4pOFT_iFBsarzEVXQqg2nhVwgRILNOlCjMiQXxl6VSLPQYaUZRygmFPVGDcxF-vJ2nSqMPW1wE9QqPXH8UL22SwcMnp4gavz5ZRNXiDyiHNkC_Fay9VnF5M3Euz4EaswfXVg5tAroO1ERpI56Cm21QtPLS5gz542z"/>
</div>
<div class="px-6 pb-8">
<h4 class="font-h3 text-xl mb-3 text-primary">Market Access</h4>
<p class="text-on-surface-variant text-sm mb-6">Menghubungkan produsen lokal dengan jaringan pasar ritel dan industri strategis.</p>
<div class="flex items-center text-xs font-bold text-secondary gap-4">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">storefront</span> Direct Market</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">payments</span> Fair Trade</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-24 bg-primary text-on-primary overflow-hidden relative">
<div class="absolute top-0 right-0 w-1/3 h-full opacity-10 pointer-events-none">
<span class="material-symbols-outlined text-[300px] rotate-12">potted_plant</span>
</div>
<div class="container max-w-7xl mx-auto px-8 relative z-10">
<div class="max-w-3xl">
<h2 class="font-h1 text-h1 mb-6">Siap Memajukan Pertanian Bersama Kami?</h2>
<p class="text-body-lg opacity-90 mb-10">Hubungi tim ahli kami untuk mendiskusikan bagaimana PT. Kelola Bumi Nusantara dapat mengoptimalkan produktivitas dan keberlanjutan lahan Anda.</p>
<div class="flex flex-wrap gap-4">
<button class="bg-secondary-container text-on-secondary-container px-10 py-5 rounded-2xl font-black text-lg hover:bg-secondary-fixed transition-all scale-100 active:scale-95">
Jadwalkan Konsultasi Gratis
</button>
</div>
</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="max-w-7xl mx-auto py-12 px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<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">© 2024 Kelola Bumi. Precision Agriculture for a Sustainable Future.</p>
</div>
<div class="flex flex-wrap justify-center gap-8 font-sans text-xs uppercase tracking-widest text-slate-500">
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Privacy Policy</a>
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Terms of Service</a>
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Sustainability Report</a>
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Career</a>
</div>
<div class="flex gap-4">
<a class="w-10 h-10 rounded-full border border-outline-variant flex items-center justify-center text-primary hover:bg-primary-fixed transition-colors" href="#">
<span class="material-symbols-outlined">public</span>
</a>
<a class="w-10 h-10 rounded-full border border-outline-variant flex items-center justify-center text-primary hover:bg-primary-fixed transition-colors" href="#">
<span class="material-symbols-outlined">mail</span>
</a>
</div>
</div>
</footer>
</body></html>

BIN
stitch_kelola_bumi/beranda_kelola_bumi/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 724 KiB

259
stitch_kelola_bumi/kontak_kelola_bumi/code.html Normal file
View File

@ -0,0 +1,259 @@
<!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&amp;family=Manrope:wght@200..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 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>

BIN
stitch_kelola_bumi/kontak_kelola_bumi/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 559 KiB

275
stitch_kelola_bumi/layanan_produk_kelola_bumi/code.html Normal file
View File

@ -0,0 +1,275 @@
<!DOCTYPE html>
<html class="light" lang="en"><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&amp;family=Manrope:wght@200..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 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">
<!-- TopAppBar -->
<header class="fixed top-0 left-0 w-full z-50 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 flex justify-between items-center px-8 h-20">
<div class="flex items-center gap-3">
<img alt="Kelola Bumi Logo" class="h-10 w-auto" data-alt="minimalist logo for an agricultural tech company featuring a stylized green leaf and geometric circular shapes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIbAThAJEIXkuA77jKCJvh9_H-ULOt2kz30Uu1W4MTe9289J-dPwRJOWi9EQDGwYv9dHBr-xdhu57g7I5Q8Y0D_GyQKmHYkk0jH4ZGFusnvzlg9fCVLBO9zL5_ws1M4QJs5AhJ1LGQSza9sHcpNuBcHJXCUx0nT78EUXJwk4xP9Ys15C9emb5hwcyLJAUUdWSVRtRZRsdA5n3WhPzfMc1aRUC23-8x7LlI_vvw1bfisfWbPUTcCsOoFeT6qmDnX1jgXmVRtwmWli_8"/>
<span class="text-2xl font-black text-green-700 dark:text-green-500 tracking-tighter">Kelola Bumi</span>
</div>
<nav class="hidden md:flex items-center gap-8 font-sans text-sm tracking-wide font-semibold">
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Home</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">About</a>
<a class="text-green-700 dark:text-green-400 border-b-2 border-green-600 pb-1" href="#">Services</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Why Us</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Contact</a>
</nav>
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-full font-bold scale-95 active:scale-90 transition-transform">
Consult Now
</button>
</div>
</header>
<main class="pt-32 pb-20 px-8 max-w-7xl mx-auto">
<!-- Hero Section -->
<section class="mb-20 text-center max-w-3xl mx-auto">
<span class="font-label-caps text-secondary mb-4 block uppercase tracking-widest">Our Ecosystem</span>
<h1 class="font-h1 text-h1 text-on-surface mb-6">Sustainable Agriculture, <span class="text-primary">Precisely Managed.</span></h1>
<p class="font-body-lg text-body-lg text-outline">Empowering Indonesian agribusiness through modern technology, high-yield resources, and seamless market integration.</p>
</section>
<!-- Services Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<!-- A. Jasa Konsultasi Pertanian -->
<div class="md:col-span-8 group relative overflow-hidden rounded-xl border border-[#E0E0E0] bg-surface-container-lowest botanical-shadow p-8 flex flex-col justify-between transition-all hover:border-primary/30">
<div class="flex justify-between items-start">
<div class="max-w-md">
<div class="mb-6 h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-3xl" data-icon="monitoring">monitoring</span>
</div>
<h3 class="font-h3 text-h3 mb-4">Jasa Konsultasi Pertanian</h3>
<p class="text-outline mb-6">Strategic insights powered by field data. We help you optimize yield through scientific analysis and technology.</p>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-on-surface-variant">
<span class="material-symbols-outlined text-primary text-sm" data-icon="check_circle" data-weight="fill">check_circle</span>
Soil &amp; Environmental Analysis
</li>
<li class="flex items-center gap-3 text-on-surface-variant">
<span class="material-symbols-outlined text-primary text-sm" data-icon="check_circle" data-weight="fill">check_circle</span>
Integrated Pest Management
</li>
<li class="flex items-center gap-3 text-on-surface-variant">
<span class="material-symbols-outlined text-primary text-sm" data-icon="check_circle" data-weight="fill">check_circle</span>
Smart Tech Implementation
</li>
</ul>
</div>
<div class="hidden lg:block w-64 h-64 rounded-xl overflow-hidden shadow-sm">
<img alt="Consulting" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="professional agronomist using a digital tablet in a high-tech greenhouse with lush green plants in the background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdH_-tRdzxo3I85Gd34Sxugt1Mx-_OMfCiK5ynJivu6xQYbgkbZxRv4mOuynvXEpB1T_2HOTs6mKOoTpD1I0n68PcltRc8Yq6EHZthjVglfkO7E_ig1812Jh4aaqQ4LIsKWxX036EX61DD0cYTY4w2JwabXBIakZD6ecYua1qEW_vT3BqxqUNRC6APNcdnoU9oplFPyikczLRLdz54K3ykBzJMKEEOUjiabBxQlqRoc8Q3uqnnorNnOvfcSXW7fkbzlexky7NKT8ZH"/>
</div>
</div>
<button class="w-fit flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all">
Learn More <span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
<!-- B. Benih & Bibit Unggul -->
<div class="md:col-span-4 group rounded-xl border border-[#E0E0E0] bg-white botanical-shadow overflow-hidden flex flex-col transition-all hover:border-primary/30">
<div class="h-48 relative overflow-hidden">
<img alt="Seeds" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="close-up of young green sprouts emerging from dark rich fertile soil in a nursery tray with soft sunlight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiUjy8INzD8VGQQFd6ZLGND76Os6YpcD_yit1EV7hMkR50DQVdbbZdrHxd5klwaGYSnL1qTH65er8pYO5wZO9Vo6NmYuVC4jN5Yw7yGH6UZ0ojSJ9p7gIIVx2Tv5hX6_N97HklsBJmxXY-kN-pd4w9e4RNvdepMps0gNLAxCPGdmZD5nAglwdsL-BnV4Z3yeddjYAg3HwqlSuN0bP4sLulRoweNjC0X_5VDihc2KAIn1EcdlRRkIBCrXB410UnnJic6c6PIw3mM9BS"/>
<div class="absolute top-4 left-4">
<span class="bg-primary-container text-on-primary-container text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Premium Grade</span>
</div>
</div>
<div class="p-6 flex-1 flex flex-col">
<div class="mb-4 h-10 w-10 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
<span class="material-symbols-outlined" data-icon="potted_plant">potted_plant</span>
</div>
<h3 class="font-h3 text-xl mb-2">Benih &amp; Bibit Unggul</h3>
<p class="text-on-surface-variant text-sm mb-6">Genetically superior seeds certified for Indonesian climate resilience and high productivity.</p>
<div class="mt-auto">
<button class="text-secondary font-bold text-sm flex items-center gap-1">
Browse Catalog <span class="material-symbols-outlined text-sm" data-icon="open_in_new">open_in_new</span>
</button>
</div>
</div>
</div>
<!-- C. Pupuk & Nutrisi Tanaman -->
<div class="md:col-span-4 group rounded-xl border border-[#E0E0E0] bg-white botanical-shadow overflow-hidden flex flex-col transition-all hover:border-primary/30">
<div class="h-48 relative overflow-hidden">
<img alt="Fertilizer" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="organic fertilizer being hand-spread onto garden soil with rich textures and earth tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMm-7fE1tHKkJ0XcTfYg75Tw0EezuxQ-UEae0te-Px_RvuTqLW3AeyjYGzYflmLa4CZRlmKYTti18RW9lj70SNsooMsHfFMJlfICYx0DZJMsdrf5cMYMkfh--Pi6l1vJsRqQWUIy7_LYHhrY30gcPVQoylrDuvcJRDWZv7ORrR4TLwNSI8roQ3IevW9greLGiXfPraKgGWslheEI7TxAvJ0tWUUohmTL6qMR2YEGBl1L8cMJ0-FpnRyHfRkAX9nJjiPR7bOWZPAI8D"/>
</div>
<div class="p-6 flex-1 flex flex-col">
<div class="mb-4 h-10 w-10 rounded-lg bg-tertiary-container/20 flex items-center justify-center text-tertiary">
<span class="material-symbols-outlined" data-icon="science">science</span>
</div>
<h3 class="font-h3 text-xl mb-2">Pupuk &amp; Nutrisi</h3>
<p class="text-on-surface-variant text-sm mb-6">Balanced organic and inorganic distribution systems tailored for specific soil profiles and crop stages.</p>
<div class="mt-auto">
<button class="text-tertiary font-bold text-sm flex items-center gap-1">
Nutrition Guide <span class="material-symbols-outlined text-sm" data-icon="description">description</span>
</button>
</div>
</div>
</div>
<!-- D. Penjualan Hasil Pertanian -->
<div class="md:col-span-8 group relative overflow-hidden rounded-xl border border-[#E0E0E0] bg-surface-container-high botanical-shadow p-8 flex flex-col md:flex-row gap-8 items-center transition-all hover:border-primary/30">
<div class="flex-1">
<div class="mb-6 h-12 w-12 rounded-lg bg-secondary-container/20 flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined text-3xl" data-icon="storefront">storefront</span>
</div>
<h3 class="font-h3 text-h3 mb-4">Penjualan Hasil Pertanian</h3>
<p class="text-outline mb-6">We bridge the gap between farmers and global markets, ensuring fair pricing and efficient supply chain logistics.</p>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="bg-white/50 p-4 rounded-lg border border-white">
<span class="block text-2xl font-bold text-primary">85%</span>
<span class="text-xs font-label-caps opacity-70">Supply Chain Efficiency</span>
</div>
<div class="bg-white/50 p-4 rounded-lg border border-white">
<span class="block text-2xl font-bold text-primary">120+</span>
<span class="text-xs font-label-caps opacity-70">Market Partners</span>
</div>
</div>
<button class="bg-white text-on-surface px-6 py-2.5 rounded-full font-bold border border-outline/20 hover:bg-surface-container-lowest transition-all">
Partnership Inquiry
</button>
</div>
<div class="flex-1 w-full h-64 md:h-full rounded-xl overflow-hidden relative">
<img alt="Market" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="busy outdoor farmers market stall with vibrant colorful fresh vegetables and crates of local harvest" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKHUubBo7eqBQvUdwkwD-FOIg2EsCKq45XZqPsJtu_o6rBAQF5tsUWvi551lz1w1H2hLWIX-WNNWDS76ErEh3hL0X0vW7u1vjUoPsk5D0cmzsJGfE_cqAntw5lIfkATot4oZ2pimeSLn2MV8u2w8JQ5ZEsk9OxCq1Q6k-WxMYq1o4uV8DD7Uvc_j5A4I6nAi3XblhO17BcUM0bCKtxxn675fU41uAlf7G8vckDIdTMzyDPQ5DjzIxG62FYFmSz_SevmgUaXitMKhDv"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
</div>
</div>
</div>
<!-- Call to Action -->
<section class="mt-24 bg-primary rounded-2xl p-12 text-center text-on-primary relative overflow-hidden">
<div class="relative z-10">
<h2 class="font-h2 text-h2 mb-4">Ready to optimize your harvest?</h2>
<p class="font-body-lg text-body-lg mb-8 opacity-90">Join the precision agriculture revolution with PT. Kelola Bumi Nusantara.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-white text-primary px-8 py-3 rounded-full font-bold text-lg hover:bg-surface-container-lowest transition-all">
Get Started
</button>
<button class="bg-transparent border-2 border-white/30 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-white/10 transition-all">
Talk to Specialist
</button>
</div>
</div>
<!-- Decorative circle -->
<div class="absolute -bottom-20 -right-20 w-64 h-64 bg-tertiary rounded-full opacity-20 blur-3xl"></div>
<div class="absolute -top-20 -left-20 w-64 h-64 bg-secondary rounded-full opacity-20 blur-3xl"></div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-50 dark:bg-slate-900 border-t border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto py-12 px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex flex-col items-center md:items-start gap-4">
<div class="flex items-center gap-2">
<span class="text-lg font-bold text-green-800 dark:text-green-600">Kelola Bumi</span>
</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 gap-8 flex-wrap justify-center">
<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>

BIN
stitch_kelola_bumi/layanan_produk_kelola_bumi/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 630 KiB

256
stitch_kelola_bumi/tentang_kami_kelola_bumi/code.html Normal file
View File

@ -0,0 +1,256 @@
<!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&amp;family=Manrope:wght@200..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 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 &amp; 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 &amp; 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 &amp; 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>

BIN
stitch_kelola_bumi/tentang_kami_kelola_bumi/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 623 KiB

176
stitch_kelola_bumi/terra_tech_ethos/DESIGN.md Normal file
View File

@ -0,0 +1,176 @@
---
name: Terra-Tech Ethos
colors:
surface: '#f4faff'
surface-dim: '#cfdce4'
surface-bright: '#f4faff'
surface-container-lowest: '#ffffff'
surface-container-low: '#e9f6fd'
surface-container: '#e3f0f8'
surface-container-high: '#ddeaf2'
surface-container-highest: '#d7e4ec'
on-surface: '#111d23'
on-surface-variant: '#40493e'
inverse-surface: '#263238'
inverse-on-surface: '#e6f3fb'
outline: '#707a6d'
outline-variant: '#bfcaba'
surface-tint: '#126d27'
primary: '#126d27'
on-primary: '#ffffff'
primary-container: '#66bb6a'
on-primary-container: '#004814'
inverse-primary: '#83da85'
secondary: '#8b5000'
on-secondary: '#ffffff'
secondary-container: '#ff9800'
on-secondary-container: '#653900'
tertiary: '#106d20'
on-tertiary: '#ffffff'
tertiary-container: '#64bb63'
on-tertiary-container: '#00480f'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#9ff79f'
primary-fixed-dim: '#83da85'
on-primary-fixed: '#002105'
on-primary-fixed-variant: '#005318'
secondary-fixed: '#ffdcbe'
secondary-fixed-dim: '#ffb870'
on-secondary-fixed: '#2c1600'
on-secondary-fixed-variant: '#693c00'
tertiary-fixed: '#9df898'
tertiary-fixed-dim: '#82db7e'
on-tertiary-fixed: '#002204'
on-tertiary-fixed-variant: '#005312'
background: '#f4faff'
on-background: '#111d23'
surface-variant: '#d7e4ec'
typography:
h1:
fontFamily: Space Grotesk
fontSize: 48px
fontWeight: '700'
lineHeight: '1.2'
letterSpacing: -0.02em
h2:
fontFamily: Space Grotesk
fontSize: 36px
fontWeight: '600'
lineHeight: '1.3'
letterSpacing: -0.01em
h3:
fontFamily: Space Grotesk
fontSize: 24px
fontWeight: '600'
lineHeight: '1.4'
body-lg:
fontFamily: Manrope
fontSize: 18px
fontWeight: '400'
lineHeight: '1.6'
body-md:
fontFamily: Manrope
fontSize: 16px
fontWeight: '400'
lineHeight: '1.6'
label-caps:
fontFamily: Manrope
fontSize: 12px
fontWeight: '700'
lineHeight: '1.4'
letterSpacing: 0.05em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
unit: 4px
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 40px
container-max: 1280px
gutter: 24px
---
## Brand & Style
The design system is built on the philosophy of "Precision Agriculture"—merging the raw, organic vitality of Indonesian soil with modern technological efficiency. The visual style is **Corporate / Modern** with a lean towards **Minimalism**. It prioritizes clarity and high-quality whitespace to evoke a sense of sustainability and transparency.
The target audience ranges from institutional investors and government stakeholders to modern agrarian entrepreneurs. The UI must feel authoritative and grounded (trustworthy) while utilizing crisp layouts and innovative interactions (forward-thinking).
Key visual principles:
- **Clarity over Clutter:** Every element serves a functional purpose in the data-heavy landscape of agribusiness.
- **Organic Precision:** Combining soft, rounded corners with a strict underlying grid.
- **Sustainability through Efficiency:** Using a light-mode default to reduce visual fatigue and represent clean, open air.
## Colors
The palette is derived directly from the lifecycle of a plant—the vibrant green of a new leaf and the earthy orange of rich soil and harvest.
- **Primary (Leaf Green):** Used for primary actions, success states, and brand highlights. It represents growth and innovation.
- **Secondary (Earthy Orange):** Used for accent elements, notifications, and interactive highlights. It provides warmth and energy.
- **Tertiary (Deep Forest):** A grounding green used for hover states and sophisticated brand moments.
- **Neutral (Charcoal & Cool Gray):** We avoid pure black to maintain a professional, soft-touch readability. Charcoal is used for headings, while medium grays are reserved for secondary information and borders.
- **Background:** A pure white base ensures the "clean" and "professional" requirement is met, allowing the vibrant primary colors to pop without visual vibration.
## Typography
This design system utilizes a dual-font strategy to balance innovation with readability.
- **Headlines (Space Grotesk):** Chosen for its geometric, slightly technical appearance. It mirrors the logo's structured look, providing a sense of technological advancement and precision.
- **Body & UI (Manrope):** A highly legible, modern sans-serif. It is approachable and refined, ensuring that long-form agricultural reports or data dashboards remain easy to parse.
- **Hierarchy:** We use generous line heights (1.6) for body text to maintain an airy, "sustainable" feel. Headline tracking is slightly tightened to feel more impactful and editorial.
## Layout & Spacing
The layout philosophy follows a **Fixed Grid** system for desktop to maintain a professional, organized structure, transitioning to a fluid model for mobile devices.
- **Grid:** A 12-column grid system with 24px gutters. Content is usually contained within a 1280px max-width wrapper.
- **Rhythm:** An 8px linear scale is used for all spacing. For tight UI elements (like inside cards), use 8px or 16px. For structural section spacing, use 40px or 64px.
- **Density:** We employ a "Medium" density. This provides enough room for data-heavy agribusiness tools while ensuring the interface never feels cramped or overwhelming.
## Elevation & Depth
This design system uses **Tonal Layers** and **Low-Contrast Outlines** to create depth, avoiding heavy drop shadows to maintain a clean, modern aesthetic.
- **Surface Tiers:** Backgrounds are white (#FFFFFF), while secondary containers (like sidebars or cards) may use a subtle cool gray (#F5F7F8).
- **Shadows:** When necessary for functional depth (e.g., active dropdowns or floating action buttons), use a "Botanical Shadow"—a very soft, diffused shadow with a slight tint of the Primary Green color at 5-10% opacity.
- **Borders:** Use 1px borders in a light gray (#E0E0E0) to define card boundaries and input fields, rather than relying on elevation.
## Shapes
The shape language is **Rounded (0.5rem)**. This choice softens the "corporate" edge of the company, making the brand feel more accessible and organic, like the natural curves found in agriculture.
- **Standard Elements:** Buttons and Input Fields use a 8px (0.5rem) radius.
- **Containers:** Large cards and Modals use 16px (1rem) for a more distinct, modern container feel.
- **Pills:** Status tags and small chips use a full-round (pill) shape to differentiate them from actionable buttons.
## Components
### Buttons
- **Primary:** Solid Leaf Green with White text. Bold weight. High contrast.
- **Secondary:** Outlined Leaf Green with Green text. Used for less urgent actions.
- **Tertiary:** Earthy Orange text with no background. Used for "Warning" or "Special Interest" actions like "Harvest Alerts."
### Cards
- **Style:** 1px border (#E0E0E0) with 16px rounded corners. No shadow unless hovered.
- **Usage:** Used to group data visualizations, crop health stats, or regional updates.
### Input Fields
- **Style:** Light gray border, 8px radius. On focus, the border transitions to Primary Green with a 2px stroke.
- **Labels:** Always visible above the field in Manrope Bold (12px).
### Chips & Tags
- **Status Tags:** Pill-shaped. Use low-opacity tints of the color (e.g., light green background with dark green text for "Active").
### Additional Contextual Components
- **Data Visualizations:** Use the secondary Earthy Orange for "Alert" thresholds and Primary Green for "Healthy" growth metrics.
- **Progress Bars:** Thick, 8px rounded bars used for tracking harvest cycles or supply chain milestones.