146 lines
4.2 KiB
TypeScript
146 lines
4.2 KiB
TypeScript
import Image from "next/image";
|
|
import contactHeroImage from "../../images/file8.jpg";
|
|
import mapImage from "../../images/alpukat.jpg";
|
|
import { ContactForm } from "./contact-form";
|
|
|
|
const contactNavItems = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Tentang", href: "/about" },
|
|
{ label: "Layanan", href: "/services" },
|
|
{ label: "Kontak", href: "/contact", active: true }
|
|
];
|
|
|
|
const contactDetails = [
|
|
{
|
|
title: "Alamat Kantor",
|
|
value:
|
|
"Jl. Raya Petir Kp. Babakan RT. 001 RW. 001 Babakan Dramaga Kabupaten Bogor Jawa Barat 16680"
|
|
},
|
|
{
|
|
title: "WhatsApp/Telepon",
|
|
value: "+0852-8403-6641"
|
|
},
|
|
{
|
|
title: "Email",
|
|
value: "info@kelolabumi.com"
|
|
},
|
|
{
|
|
title: "Media Sosial",
|
|
value: "@kelolabumiofficial"
|
|
}
|
|
];
|
|
|
|
export default function ContactPage() {
|
|
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">
|
|
{contactNavItems.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="mailto:info@kelolabumi.com">
|
|
Konsultasi Sekarang
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="contact-hero">
|
|
<div className="contact-hero-media" aria-hidden="true">
|
|
<Image
|
|
src={contactHeroImage}
|
|
alt=""
|
|
fill
|
|
priority
|
|
className="contact-hero-image"
|
|
sizes="100vw"
|
|
/>
|
|
<div className="contact-hero-overlay" />
|
|
</div>
|
|
<div className="container contact-hero-content">
|
|
<h1>Mari Bertumbuh Bersama PT. Kelola Bumi Nusantara</h1>
|
|
<p>
|
|
Solusi teknologi pertanian presisi untuk masa depan yang lebih hijau
|
|
dan berkelanjutan.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section section-light">
|
|
<div className="container contact-grid">
|
|
<div className="contact-sidebar">
|
|
<div className="contact-list">
|
|
{contactDetails.map((item, index) => (
|
|
<article key={item.title} className="contact-item">
|
|
<div className="contact-icon">{String(index + 1).padStart(2, "0")}</div>
|
|
<div>
|
|
<h3>{item.title}</h3>
|
|
<p>{item.value}</p>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
<div className="contact-map-card">
|
|
<Image
|
|
src={mapImage}
|
|
alt="Lokasi Kelola Bumi di Bogor"
|
|
fill
|
|
className="contact-map-image"
|
|
sizes="(max-width: 1024px) 100vw, 42vw"
|
|
/>
|
|
<a
|
|
className="contact-map-badge"
|
|
href="https://www.google.com/maps?q=-6.3580933,106.8108942"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Kunjungi Kami di Bogor
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="contact-form-card">
|
|
<h2>Kirim Pesan</h2>
|
|
<ContactForm />
|
|
</div>
|
|
</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>
|
|
);
|
|
}
|