236 lines
8.2 KiB
TypeScript
236 lines
8.2 KiB
TypeScript
import Image from "next/image";
|
|
import aboutHeroImage from "../../images/file8.jpg";
|
|
import historyImage from "../../images/kelor.jpg";
|
|
import strategyImage from "../../images/alpukat.jpg";
|
|
|
|
const aboutNavItems = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Tentang", href: "/about", active: true },
|
|
{ label: "Layanan", href: "/services" },
|
|
{ label: "Kontak", href: "/contact" }
|
|
];
|
|
|
|
const missions = [
|
|
{
|
|
title: "1. Edukasi & Konsultasi",
|
|
description:
|
|
"Memberikan pendampingan teknis, perencanaan kebun, dan transfer pengetahuan yang relevan dengan kondisi lapangan."
|
|
},
|
|
{
|
|
title: "2. Input & Pengembangan",
|
|
description:
|
|
"Mendukung penyediaan bibit, sarana produksi, dan penguatan sistem budidaya yang efektif dan bertanggung jawab."
|
|
},
|
|
{
|
|
title: "3. Rantai Pasok",
|
|
description:
|
|
"Merapikan alur distribusi komoditas agar hasil usaha agraria terserap pasar dengan kualitas dan nilai yang lebih baik."
|
|
}
|
|
];
|
|
|
|
export default function AboutPage() {
|
|
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">
|
|
{aboutNavItems.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="about-hero">
|
|
<div className="about-hero-media" aria-hidden="true">
|
|
<Image
|
|
src={aboutHeroImage}
|
|
alt=""
|
|
fill
|
|
priority
|
|
className="hero-image"
|
|
sizes="100vw"
|
|
/>
|
|
<div className="about-hero-overlay" />
|
|
</div>
|
|
|
|
<div className="container about-hero-content">
|
|
<span className="section-kicker">Tentang Kami</span>
|
|
<h1>Membangun negeri melalui sektor agraria yang terkelola lebih baik.</h1>
|
|
<p>
|
|
Kelola Bumi berdedikasi memperkuat rantai nilai agribisnis Indonesia
|
|
melalui integrasi disiplin operasional, pendekatan budidaya presisi,
|
|
dan pemahaman lokal yang nyata sejak 2015.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section section-light">
|
|
<div className="container about-history-grid">
|
|
<div className="about-copy">
|
|
<p className="section-kicker">Sejarah Perjalanan</p>
|
|
<h2>Berawal dari inisiatif lapangan, tumbuh menjadi mitra agraria.</h2>
|
|
<p>
|
|
Kelola Bumi dibangun dengan fokus pada pengelolaan usaha agraria
|
|
yang lebih terstruktur. Dari pengembangan komoditas hingga dukungan
|
|
distribusi, kami bertumbuh bersama kebutuhan pelaku usaha tani,
|
|
kebun, peternakan, dan perikanan di berbagai wilayah.
|
|
</p>
|
|
|
|
<div className="about-stats">
|
|
<div className="about-stat">
|
|
<strong>2015</strong>
|
|
<span>Tahun Berdiri</span>
|
|
</div>
|
|
<div className="about-stat">
|
|
<strong>500+</strong>
|
|
<span>Inisiatif & Proyek</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="about-image-card">
|
|
<Image
|
|
src={historyImage}
|
|
alt="Aktivitas pengembangan komoditas Kelola Bumi"
|
|
fill
|
|
className="media-image"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section section-soft">
|
|
<div className="container">
|
|
<div className="section-heading section-heading-centered">
|
|
<p className="section-kicker">Visi & Misi</p>
|
|
<h2>Landasan kerja untuk pertumbuhan agribisnis yang sehat.</h2>
|
|
</div>
|
|
|
|
<div className="about-bento-grid">
|
|
<article className="about-vision-card">
|
|
<span className="about-mark">Visi</span>
|
|
<h3>
|
|
Menjadi perusahaan agrikultur yang dipercaya untuk menghubungkan
|
|
potensi lahan, komoditas, dan pasar secara berkelanjutan.
|
|
</h3>
|
|
<p>
|
|
Kami ingin menghadirkan sistem kerja agraria yang modern namun
|
|
tetap berpijak pada realitas lapangan dan nilai kemitraan jangka
|
|
panjang.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="about-mission-intro">
|
|
<p className="section-kicker section-kicker-inverse">Misi Strategis</p>
|
|
<h3>Langkah nyata untuk sektor agraria yang lebih tangguh.</h3>
|
|
<p>
|
|
Pendekatan kami dirancang agar konsultasi, input, dan distribusi
|
|
berjalan sebagai satu sistem yang saling menguatkan.
|
|
</p>
|
|
</article>
|
|
|
|
{missions.map((mission, index) => (
|
|
<article key={mission.title} className="about-mission-card">
|
|
<div className="mini-icon">{String(index + 1).padStart(2, "0")}</div>
|
|
<h4>{mission.title}</h4>
|
|
<p>{mission.description}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section section-showcase">
|
|
<div className="container about-purpose-grid">
|
|
<div className="about-copy">
|
|
<p className="section-kicker">Cara Kami Bekerja</p>
|
|
<h2>Strategi yang dekat dengan kebutuhan riil di lapangan.</h2>
|
|
<p>
|
|
Setiap proyek kami awali dengan pemahaman konteks: komoditas,
|
|
kondisi lahan, kesiapan pasokan, dan target pasar. Dari sana,
|
|
solusi dibangun agar lebih presisi dan dapat dijalankan.
|
|
</p>
|
|
<a className="button button-primary" href="/contact">
|
|
Hubungi Kami
|
|
</a>
|
|
</div>
|
|
|
|
<div className="about-purpose-card">
|
|
<div className="about-purpose-media">
|
|
<Image
|
|
src={strategyImage}
|
|
alt="Komoditas unggulan Kelola Bumi"
|
|
fill
|
|
className="showcase-image"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
<div className="about-purpose-body">
|
|
<h3>Kolaborasi, presisi, dan kesinambungan.</h3>
|
|
<p>
|
|
Kami memadukan kualitas input, disiplin pengelolaan, dan
|
|
orientasi pasar agar setiap tahapan usaha agraria bergerak lebih
|
|
efisien dan bernilai.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="cta-section">
|
|
<div className="container cta-inner">
|
|
<div>
|
|
<p className="section-kicker cta-kicker">Bertumbuh Bersama</p>
|
|
<h2>Siap mendiskusikan kebutuhan agrikultur Anda?</h2>
|
|
<p>
|
|
Kami siap mendampingi langkah Anda melalui konsultasi, penguatan
|
|
operasional, dan strategi pengembangan komoditas yang lebih terarah.
|
|
</p>
|
|
</div>
|
|
<a className="button button-accent" href="/services">
|
|
Lihat Layanan Kami
|
|
</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>
|
|
);
|
|
}
|