344 lines
11 KiB
TypeScript
344 lines
11 KiB
TypeScript
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>
|
|
);
|
|
}
|