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

216
app/services/page.tsx Normal file
View File

@ -0,0 +1,216 @@
import Image from "next/image";
import alpukatImage from "../../images/alpukat.jpg";
import kelorImage from "../../images/kelor.jpg";
import udangImage from "../../images/udang-1.jpg";
import kambingImage from "../../images/kambing-pe.jpg";
const servicesNavItems = [
{ label: "Home", href: "/" },
{ label: "Tentang", href: "/about" },
{ label: "Layanan", href: "/services", active: true },
{ label: "Kontak", href: "/contact" }
];
const serviceHighlights = [
"Analisis tanah dan lingkungan",
"Pendampingan pengendalian hama terpadu",
"Implementasi teknologi smart farming"
];
export default function ServicesPage() {
return (
<main className="page-shell">
<header className="topbar">
<div className="container topbar-inner">
<a className="brand" href="/" 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">
{servicesNavItems.map((item) => (
<a
key={item.label}
href={item.href}
className={item.active ? "nav-active" : undefined}
aria-current={item.active ? "page" : undefined}
>
{item.label}
</a>
))}
</nav>
<a className="button button-primary topbar-cta" href="/contact">
Konsultasi Sekarang
</a>
</div>
</header>
<section className="services-page-shell">
<div className="container">
<section className="services-hero">
<span className="services-kicker">Ekosistem Kami</span>
<h1>
Pertanian berkelanjutan, <span>dikelola dengan presisi.</span>
</h1>
<p>
Kelola Bumi mendukung agribisnis Indonesia melalui konsultasi
modern, sarana produksi unggul, dan integrasi pasar yang rapi.
</p>
</section>
<section className="services-bento-grid">
<article className="services-feature services-feature-large">
<div className="services-feature-copy">
<div className="services-badge-icon">01</div>
<h3>Jasa Konsultasi Pertanian</h3>
<p>
Pendampingan strategis berbasis data lapangan untuk membantu
optimalisasi hasil dan pengelolaan usaha yang lebih terukur.
</p>
<ul className="services-checklist">
{serviceHighlights.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
<a className="services-inline-link" href="/contact">
Pelajari Lebih Lanjut
</a>
</div>
<div className="services-feature-media">
<Image
src={kelorImage}
alt="Konsultasi pertanian"
fill
className="services-media-image"
sizes="(max-width: 1024px) 100vw, 25vw"
/>
</div>
</article>
<article className="services-feature services-feature-card">
<div className="services-card-image">
<Image
src={alpukatImage}
alt="Benih dan bibit unggul"
fill
className="services-media-image"
sizes="(max-width: 1024px) 100vw, 33vw"
/>
<span className="services-card-tag">Premium Grade</span>
</div>
<div className="services-card-body">
<div className="services-badge-icon services-badge-secondary">02</div>
<h3>Benih & Bibit Unggul</h3>
<p>
Bibit dan bahan tanam terpilih untuk produktivitas tinggi,
adaptif terhadap iklim lokal, dan cocok untuk pengembangan
komoditas strategis.
</p>
<a className="services-inline-link services-link-secondary" href="/contact">
Lihat Katalog
</a>
</div>
</article>
<article className="services-feature services-feature-card">
<div className="services-card-image">
<Image
src={kambingImage}
alt="Pupuk dan nutrisi tanaman"
fill
className="services-media-image"
sizes="(max-width: 1024px) 100vw, 33vw"
/>
</div>
<div className="services-card-body">
<div className="services-badge-icon services-badge-tertiary">03</div>
<h3>Pupuk & Nutrisi</h3>
<p>
Distribusi nutrisi organik dan anorganik yang disesuaikan
dengan profil lahan, tahap tumbuh, dan target produktivitas.
</p>
<a className="services-inline-link services-link-tertiary" href="/contact">
Panduan Nutrisi
</a>
</div>
</article>
<article className="services-feature services-feature-market">
<div className="services-feature-copy">
<div className="services-badge-icon services-badge-market">04</div>
<h3>Penjualan Hasil Pertanian</h3>
<p>
Kami menjembatani produsen dengan pasar yang lebih luas agar
penyerapan hasil, harga, dan distribusi berjalan lebih efisien.
</p>
<div className="services-stats-grid">
<div>
<strong>85%</strong>
<span>Efisiensi rantai pasok</span>
</div>
<div>
<strong>120+</strong>
<span>Mitra pasar</span>
</div>
</div>
<a className="button button-secondary" href="/contact">
Ajukan Kemitraan
</a>
</div>
<div className="services-market-media">
<Image
src={udangImage}
alt="Penjualan hasil pertanian"
fill
className="services-media-image"
sizes="(max-width: 1024px) 100vw, 45vw"
/>
</div>
</article>
</section>
<section className="services-cta">
<div className="services-cta-content">
<h2>Siap mengoptimalkan hasil panen Anda?</h2>
<p>
Bergabunglah dengan pendekatan pertanian presisi bersama PT.
Kelola Bumi Nusantara.
</p>
<div className="services-cta-actions">
<a className="button services-cta-primary" href="/contact">
Mulai Sekarang
</a>
<a className="button services-cta-secondary" href="/contact">
Bicara dengan Spesialis
</a>
</div>
</div>
<div className="services-cta-orb services-cta-orb-green" />
<div className="services-cta-orb services-cta-orb-orange" />
</section>
</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>
);
}