Initial Kelola Bumi website
This commit is contained in:
Wira Basalamah
235
app/about/page.tsx
Normal file
235
app/about/page.tsx
Normal file
@ -0,0 +1,235 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user