Initial Kelola Bumi website
This commit is contained in:
Wira Basalamah
183
app/contact/contact-form.tsx
Normal file
183
app/contact/contact-form.tsx
Normal file
@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useEffect, useMemo, useState } from "react";
|
||||
|
||||
type SubmitState =
|
||||
| { type: "idle"; message: string }
|
||||
| { type: "success"; message: string }
|
||||
| { type: "error"; message: string };
|
||||
|
||||
const initialState: SubmitState = {
|
||||
type: "idle",
|
||||
message: ""
|
||||
};
|
||||
|
||||
export function ContactForm() {
|
||||
const [submitState, setSubmitState] = useState<SubmitState>(initialState);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [captchaPrompt, setCaptchaPrompt] = useState("");
|
||||
const [captchaToken, setCaptchaToken] = useState("");
|
||||
const [captchaLoading, setCaptchaLoading] = useState(true);
|
||||
const startedAt = useMemo(() => Date.now().toString(), []);
|
||||
|
||||
async function loadCaptcha() {
|
||||
setCaptchaLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/contact/captcha", {
|
||||
cache: "no-store"
|
||||
});
|
||||
const data = (await response.json()) as { prompt?: string; token?: string };
|
||||
|
||||
setCaptchaPrompt(data.prompt ?? "");
|
||||
setCaptchaToken(data.token ?? "");
|
||||
} finally {
|
||||
setCaptchaLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
void loadCaptcha();
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setSubmitState(initialState);
|
||||
|
||||
const form = event.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/contact", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
fullName: formData.get("fullName"),
|
||||
email: formData.get("email"),
|
||||
subject: formData.get("subject"),
|
||||
message: formData.get("message"),
|
||||
website: formData.get("website"),
|
||||
startedAt: formData.get("startedAt"),
|
||||
captchaAnswer: formData.get("captchaAnswer"),
|
||||
captchaToken
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
const data = (await response.json()) as { message?: string };
|
||||
|
||||
if (!response.ok) {
|
||||
setSubmitState({
|
||||
type: "error",
|
||||
message: data.message ?? "Pesan gagal dikirim. Silakan coba lagi."
|
||||
});
|
||||
await loadCaptcha();
|
||||
return;
|
||||
}
|
||||
|
||||
form.reset();
|
||||
await loadCaptcha();
|
||||
setSubmitState({
|
||||
type: "success",
|
||||
message: data.message ?? "Pesan berhasil dikirim."
|
||||
});
|
||||
} catch {
|
||||
setSubmitState({
|
||||
type: "error",
|
||||
message: "Terjadi kendala jaringan saat mengirim pesan."
|
||||
});
|
||||
await loadCaptcha();
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="contact-form" onSubmit={handleSubmit}>
|
||||
<input type="hidden" name="startedAt" value={startedAt} />
|
||||
<div className="contact-honeypot" aria-hidden="true">
|
||||
<label htmlFor="website">
|
||||
Website
|
||||
<input
|
||||
id="website"
|
||||
name="website"
|
||||
type="text"
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="contact-form-grid">
|
||||
<label className="contact-field">
|
||||
<span>Nama Lengkap</span>
|
||||
<input name="fullName" type="text" placeholder="Masukkan nama Anda" required />
|
||||
</label>
|
||||
<label className="contact-field">
|
||||
<span>Alamat Email</span>
|
||||
<input name="email" type="email" placeholder="nama@email.com" required />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="contact-field">
|
||||
<span>Subjek Layanan</span>
|
||||
<select name="subject" defaultValue="Konsultasi Pertanian">
|
||||
<option>Konsultasi Pertanian</option>
|
||||
<option>Teknologi Smart Farming</option>
|
||||
<option>Kemitraan Bisnis</option>
|
||||
<option>Lainnya</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="contact-field">
|
||||
<span>Pesan Anda</span>
|
||||
<textarea
|
||||
name="message"
|
||||
rows={6}
|
||||
placeholder="Ceritakan kebutuhan pertanian Anda..."
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="contact-captcha-card">
|
||||
<div className="contact-captcha-copy">
|
||||
<span>Verifikasi Anti-Bot</span>
|
||||
<strong>{captchaLoading ? "Memuat captcha..." : `Berapa hasil ${captchaPrompt}`}</strong>
|
||||
</div>
|
||||
<div className="contact-captcha-row">
|
||||
<input
|
||||
name="captchaAnswer"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
placeholder="Jawaban captcha"
|
||||
required
|
||||
disabled={captchaLoading}
|
||||
/>
|
||||
<button
|
||||
className="button button-secondary contact-captcha-refresh"
|
||||
type="button"
|
||||
onClick={() => void loadCaptcha()}
|
||||
disabled={captchaLoading || isSubmitting}
|
||||
>
|
||||
Ulangi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{submitState.message ? (
|
||||
<p
|
||||
className={`contact-submit-message contact-submit-message-${submitState.type}`}
|
||||
role="status"
|
||||
>
|
||||
{submitState.message}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<button className="button button-primary contact-submit" type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Mengirim..." : "Kirim Pesan Sekarang"}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
145
app/contact/page.tsx
Normal file
145
app/contact/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user