Initial Kelola Bumi website

app/contact/page.tsx

@@ -0,0 +1,145 @@
+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>
+  );
+}