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

343
app/page.tsx Normal file
View File

@ -0,0 +1,343 @@
import Image, { type StaticImageData } from "next/image";
import alpukatImage from "../images/alpukat.jpg";
import fileEightImage from "../images/file8.jpg";
import kelorImage from "../images/kelor.jpg";
import kambingImage from "../images/kambing-pe.jpg";
import udangImage from "../images/udang-1.jpg";
type MiniCard = {
title: string;
description: string;
icon: string;
tone: "primary" | "secondary" | "tertiary";
};
type ServiceCard = {
title: string;
description: string;
image: StaticImageData;
badgeLeft: string;
badgeRight: string;
};
const navItems = [
{ label: "Home", href: "#home" },
{ label: "Tentang", href: "/about" },
{ label: "Layanan", href: "/services" },
{ label: "Kontak", href: "/contact" }
];
const miniCards: MiniCard[] = [
{
title: "Konsultasi Ahli",
description:
"Strategi agronomis berbasis data untuk menaikkan produktivitas lahan dengan pendekatan terukur.",
icon: "01",
tone: "primary"
},
{
title: "Sarana Produksi",
description:
"Benih, pupuk, bibit, dan dukungan budidaya yang dipilih untuk menjaga kualitas serta efisiensi usaha tani.",
icon: "02",
tone: "secondary"
},
{
title: "Distribusi Unggul",
description:
"Pengelolaan hasil panen dan komoditas agribisnis agar sampai ke pasar dengan nilai ekonomi terbaik.",
icon: "03",
tone: "tertiary"
}
];
const serviceCards: ServiceCard[] = [
{
title: "Agronomy Consulting",
description:
"Pemetaan kebutuhan kebun, evaluasi varietas, dan pendampingan tanam sampai panen untuk lahan produktif.",
image: kelorImage,
badgeLeft: "Certified Experts",
badgeRight: "Data Driven"
},
{
title: "Integrated Supply",
description:
"Rantai pasok input agribisnis dari pembibitan, penguatan kebun, sampai pengembangan komoditas unggulan.",
image: alpukatImage,
badgeLeft: "Premium Input",
badgeRight: "Reliable Network"
},
{
title: "Market Access",
description:
"Konektivitas pasar untuk komoditas hasil kebun, peternakan, dan perikanan melalui jejaring distribusi yang rapi.",
image: udangImage,
badgeLeft: "Direct Market",
badgeRight: "Fair Value"
}
];
export default function HomePage() {
return (
<main className="page-shell" id="home">
<header className="topbar">
<div className="container topbar-inner">
<a className="brand" href="#home" aria-label="Kelola Bumi">
<Image
src="/logo_kelolabumi.png"
alt="Kelola Bumi Logo"
width={240}
height={40}
priority
/>
</a>
<nav className="nav desktop-nav" aria-label="Navigasi utama">
{navItems.map((item) => (
<a key={item.label} href={item.href}>
{item.label}
</a>
))}
</nav>
<a className="button button-primary topbar-cta" href="/contact">
Konsultasi Sekarang
</a>
</div>
</header>
<section className="hero">
<div className="hero-image-wrap" aria-hidden="true">
<Image
src={fileEightImage}
alt=""
fill
priority
className="hero-image"
sizes="100vw"
/>
<div className="hero-overlay" />
</div>
<div className="container hero-content">
<div className="hero-copy">
<span className="eyebrow">SINCE 2015 • PRECISION AGRICULTURE</span>
<h1>Solusi terintegrasi untuk pertanian berkelanjutan dan inovatif.</h1>
<p>
Kelola Bumi membangun ekosistem agribisnis dari hulu ke hilir
melalui konsultasi ahli, pengadaan sarana produksi, dan distribusi
komoditas unggulan Indonesia.
</p>
<div className="hero-actions">
<a className="button button-primary" href="#layanan">
Mulai Transformasi
<span aria-hidden="true">→</span>
</a>
<a className="button button-secondary" href="/about">
Lihat Profil Perusahaan
</a>
</div>
</div>
<div className="hero-panel">
<div className="hero-stat-card">
<span className="stat-label">Fokus Ekosistem</span>
<strong>Tanaman, peternakan, dan perikanan</strong>
<p>
Portofolio aset lokal diintegrasikan dalam pendekatan budidaya
yang relevan dengan kondisi lapangan.
</p>
</div>
<div className="hero-highlight-grid">
<article>
<span>01</span>
<h3>Produktivitas</h3>
<p>Optimasi lahan berbasis kebutuhan spesifik komoditas.</p>
</article>
<article>
<span>02</span>
<h3>Keberlanjutan</h3>
<p>Pendekatan budidaya yang menjaga mutu tanah dan hasil.</p>
</article>
</div>
</div>
</div>
</section>
<section className="section section-light" id="tentang">
<div className="container">
<div className="section-heading section-heading-centered">
<p className="section-kicker">Tentang Kami</p>
<h2>Pionir agribisnis modern yang membumi.</h2>
</div>
<div className="bento-grid">
<article className="bento-identity">
<div className="media-backdrop">
<Image
src={kelorImage}
alt="Komoditas tanaman Kelola Bumi"
fill
className="media-image"
sizes="(max-width: 1024px) 100vw, 66vw"
/>
</div>
<div className="identity-copy">
<p className="section-kicker">Profil Singkat</p>
<h3>Menjembatani potensi lokal dengan sistem budidaya presisi.</h3>
<p>
Kelola Bumi hadir untuk mempertemukan pengalaman lapangan,
jaringan distribusi, dan orientasi kualitas dalam satu rantai
nilai agribisnis yang lebih sehat.
</p>
</div>
</article>
<article className="bento-years">
<div className="icon-badge">KB</div>
<div>
<strong>9+</strong>
<h3>Tahun Berdedikasi</h3>
<p>
Mengawal pengembangan komoditas dengan disiplin operasional
sejak 2015.
</p>
</div>
</article>
{miniCards.map((card) => (
<article
key={card.title}
className={`mini-card mini-card-${card.tone}`}
id={card.title === "Distribusi Unggul" ? "keunggulan" : undefined}
>
<div className="mini-icon">{card.icon}</div>
<h4>{card.title}</h4>
<p>{card.description}</p>
</article>
))}
</div>
</div>
</section>
<section className="section section-soft" id="layanan">
<div className="container">
<div className="section-heading section-heading-split">
<div>
<p className="section-kicker">Layanan Inti</p>
<h2>Layanan terintegrasi untuk setiap tahap pengembangan usaha.</h2>
</div>
<p className="section-side-note">
Pendekatan holistik untuk pembibitan, penguatan kebun, pengolahan
komoditas, dan akses pasar yang lebih stabil.
</p>
</div>
<div className="services-grid">
{serviceCards.map((card) => (
<article key={card.title} className="service-card">
<div className="service-image-wrap">
<Image
src={card.image}
alt={card.title}
fill
className="service-image"
sizes="(max-width: 1024px) 100vw, 33vw"
/>
</div>
<div className="service-body">
<h3>{card.title}</h3>
<p>{card.description}</p>
<div className="service-badges">
<span>{card.badgeLeft}</span>
<span>{card.badgeRight}</span>
</div>
</div>
</article>
))}
</div>
</div>
</section>
<section className="section section-showcase">
<div className="container showcase-grid">
<div className="showcase-copy">
<p className="section-kicker">Portofolio Komoditas</p>
<h2>Dukungan visual dan lapangan yang dekat dengan realitas agribisnis.</h2>
<p>
Aset lokal dari folder `images` kami gunakan untuk membangun
identitas visual yang terasa relevan dengan sektor pertanian,
peternakan, dan perikanan.
</p>
<a className="button button-primary" href="/contact">
Diskusikan Kebutuhan Anda
</a>
</div>
<div className="showcase-stack" aria-label="Galeri komoditas unggulan">
<figure className="showcase-tall">
<Image
src={alpukatImage}
alt="Komoditas alpukat"
fill
className="showcase-image"
sizes="(max-width: 1024px) 100vw, 30vw"
/>
</figure>
<figure className="showcase-small">
<Image
src={kambingImage}
alt="Peternakan kambing"
fill
className="showcase-image"
sizes="(max-width: 1024px) 50vw, 20vw"
/>
</figure>
<figure className="showcase-small">
<Image
src={udangImage}
alt="Budidaya udang"
fill
className="showcase-image"
sizes="(max-width: 1024px) 50vw, 20vw"
/>
</figure>
</div>
</div>
</section>
<section className="cta-section" id="cta-konsultasi">
<div className="container cta-inner">
<div>
<p className="section-kicker cta-kicker">Mulai Konsultasi</p>
<h2>Siap memajukan pertanian bersama Kelola Bumi?</h2>
<p>
Hubungi tim kami untuk membahas strategi budidaya, kebutuhan
pasokan, atau pengembangan pasar yang paling sesuai.
</p>
</div>
<a className="button button-accent" href="/contact">
Jadwalkan Konsultasi Gratis
</a>
</div>
</section>
<footer className="footer">
<div className="container footer-inner">
<div>
<div className="footer-brand">Kelola Bumi</div>
<p>© 2026 PT Kelola Bumi Nusantara. An Agricultural Company.</p>
</div>
<div className="footer-links">
<a href="/">Home</a>
<a href="/about">Tentang</a>
<a href="/services">Layanan</a>
<a href="/contact">Kontak</a>
</div>
</div>
</footer>
</main>
);
}