feat: build IPTEK company website with full bilingual support

- Complete Next.js 16 app with App Router: Home, About, Products, Contact, Privacy pages
- Product detail pages: ZappCare, Unified TMS, EMR Clinic
- Bilingual support (Indonesian/English) via LanguageContext + translations.ts
- Language switcher pill button (🇮🇩 ID / 🇬🇧 EN) in Navbar with localStorage persistence
- Navbar with logo, responsive mobile menu, translated nav links
- Contact form with captcha, server action email sending, translated labels
- Material Design 3 color tokens, Manrope + Inter fonts, Material Symbols icons
- Local product image assets and company logo

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/contact/ContactForm.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { sendContactEmail, type ContactPayload } from "@/app/actions/sendContact";
+import { useLang } from "@/context/LanguageContext";
+import { t } from "@/lib/translations";
+
+function generateCaptcha() {
+  const a = Math.floor(Math.random() * 9) + 1;
+  const b = Math.floor(Math.random() * 9) + 1;
+  return { a, b, answer: a + b };
+}
+
+const inputClass =
+  "w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all text-on-surface placeholder:text-on-surface-variant/50";
+
+export default function ContactForm() {
+  const { lang } = useLang();
+  const tr = t[lang].contact;
+
+  const [formData, setFormData] = useState<Omit<ContactPayload, never>>({
+    name: "",
+    email: "",
+    company: "",
+    phone: "",
+    topic: "",
+    message: "",
+  });
+  const [captcha, setCaptcha] = useState({ a: 0, b: 0, answer: 0 });
+  const [captchaInput, setCaptchaInput] = useState("");
+  const [captchaError, setCaptchaError] = useState(false);
+  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const refreshCaptcha = useCallback(() => {
+    setCaptcha(generateCaptcha());
+    setCaptchaInput("");
+    setCaptchaError(false);
+  }, []);
+
+  useEffect(() => {
+    refreshCaptcha();
+  }, [refreshCaptcha]);
+
+  function handleChange(
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) {
+    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (parseInt(captchaInput, 10) !== captcha.answer) {
+      setCaptchaError(true);
+      refreshCaptcha();
+      return;
+    }
+
+    setStatus("loading");
+    const result = await sendContactEmail(formData);
+
+    if (result.ok) {
+      setStatus("success");
+    } else {
+      setStatus("error");
+      setErrorMsg(result.error);
+      refreshCaptcha();
+    }
+  }
+
+  function handleReset() {
+    setFormData({ name: "", email: "", company: "", phone: "", topic: "", message: "" });
+    setStatus("idle");
+    setErrorMsg("");
+    refreshCaptcha();
+  }
+
+  if (status === "success") {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center py-16">
+        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6">
+          <span
+            className="material-symbols-outlined text-green-600 text-4xl"
+            style={{ fontVariationSettings: "'FILL' 1" }}
+          >
+            check_circle
+          </span>
+        </div>
+        <h3 className="font-headline text-2xl font-bold text-on-surface mb-3">{tr.successTitle}</h3>
+        <p className="text-on-surface-variant max-w-sm">
+          {tr.successDesc}{" "}
+          <strong>{formData.email}</strong>.
+        </p>
+        <button onClick={handleReset} className="mt-8 text-primary font-bold hover:underline">
+          {tr.sendAnother}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <h2 className="font-headline text-2xl font-bold text-on-surface mb-8">{tr.formTitle}</h2>
+      <form onSubmit={handleSubmit} className="space-y-6" noValidate>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-semibold text-on-surface mb-2">
+              {tr.nameLabel} <span className="text-error">*</span>
+            </label>
+            <input
+              type="text"
+              name="name"
+              required
+              value={formData.name}
+              onChange={handleChange}
+              placeholder="John Doe"
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold text-on-surface mb-2">
+              {tr.emailLabel} <span className="text-error">*</span>
+            </label>
+            <input
+              type="email"
+              name="email"
+              required
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="john@company.com"
+              className={inputClass}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-semibold text-on-surface mb-2">{tr.companyLabel}</label>
+            <input
+              type="text"
+              name="company"
+              value={formData.company}
+              onChange={handleChange}
+              placeholder={tr.companyPlaceholder}
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold text-on-surface mb-2">
+              {tr.phoneLabel}
+            </label>
+            <input
+              type="tel"
+              name="phone"
+              value={formData.phone}
+              onChange={handleChange}
+              placeholder="+62 812-xxxx-xxxx"
+              className={inputClass}
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-semibold text-on-surface mb-2">
+            {tr.topicLabel} <span className="text-error">*</span>
+          </label>
+          <select
+            name="topic"
+            required
+            value={formData.topic}
+            onChange={handleChange}
+            className={inputClass}
+          >
+            <option value="">{tr.topicPlaceholder}</option>
+            {tr.topics.map((topic) => (
+              <option key={topic} value={topic}>
+                {topic}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-semibold text-on-surface mb-2">
+            {tr.messageLabel} <span className="text-error">*</span>
+          </label>
+          <textarea
+            name="message"
+            required
+            rows={5}
+            value={formData.message}
+            onChange={handleChange}
+            placeholder={tr.messagePlaceholder}
+            className={`${inputClass} resize-none`}
+          />
+        </div>
+
+        {/* CAPTCHA */}
+        <div className="bg-surface-container-low border border-outline-variant rounded-xl p-5">
+          <div className="flex items-center gap-3 mb-3">
+            <span
+              className="material-symbols-outlined text-primary"
+              style={{ fontVariationSettings: "'FILL' 1" }}
+            >
+              security
+            </span>
+            <p className="text-sm font-semibold text-on-surface">{tr.captchaLabel}</p>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-3">
+              <div className="bg-primary/10 text-primary font-black text-2xl font-headline px-4 py-2 rounded-lg select-none tracking-widest">
+                {captcha.a} + {captcha.b}
+              </div>
+              <span className="text-on-surface-variant font-bold text-xl">=</span>
+              <input
+                type="number"
+                inputMode="numeric"
+                value={captchaInput}
+                onChange={(e) => {
+                  setCaptchaInput(e.target.value);
+                  setCaptchaError(false);
+                }}
+                placeholder="?"
+                required
+                className={`w-20 px-3 py-2 rounded-lg border text-center font-bold text-lg focus:outline-none focus:ring-2 transition-all ${
+                  captchaError
+                    ? "border-error bg-error-container/30 text-error focus:ring-error/20"
+                    : "border-outline-variant bg-surface focus:border-primary focus:ring-primary/20 text-on-surface"
+                }`}
+              />
+            </div>
+            <button
+              type="button"
+              onClick={refreshCaptcha}
+              className="ml-auto text-on-surface-variant hover:text-primary transition-colors"
+              title={lang === "id" ? "Ganti soal" : "New question"}
+            >
+              <span className="material-symbols-outlined">refresh</span>
+            </button>
+          </div>
+          {captchaError && (
+            <p className="text-error text-sm mt-2 flex items-center gap-1">
+              <span className="material-symbols-outlined text-base" style={{ fontVariationSettings: "'FILL' 1" }}>error</span>
+              {tr.captchaError}
+            </p>
+          )}
+        </div>
+
+        {status === "error" && (
+          <div className="bg-error-container text-on-error-container px-4 py-3 rounded-lg text-sm flex items-center gap-2">
+            <span className="material-symbols-outlined text-base shrink-0" style={{ fontVariationSettings: "'FILL' 1" }}>error</span>
+            {errorMsg}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={status === "loading"}
+          className="w-full bg-gradient-to-br from-primary to-primary-container text-on-primary py-4 rounded-lg font-bold text-base shadow-lg hover:opacity-90 transition-all active:scale-[0.99] disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          {status === "loading" ? (
+            <>
+              <span className="material-symbols-outlined animate-spin text-base">progress_activity</span>
+              {tr.sendingBtn}
+            </>
+          ) : (
+            <>
+              <span className="material-symbols-outlined text-base">send</span>
+              {tr.submitBtn}
+            </>
+          )}
+        </button>
+      </form>
+    </>
+  );
+}

app/contact/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import ContactForm from "./ContactForm";
+import { useLang } from "@/context/LanguageContext";
+import { t } from "@/lib/translations";
+
+const MAP_SRC =
+  "https://maps.google.com/maps?q=-6.35861,106.8111146&z=16&output=embed";
+
+export default function ContactPage() {
+  const { lang } = useLang();
+  const tr = t[lang].contact;
+
+  const contactInfo = [
+    {
+      icon: "language",
+      title: "Website",
+      value: "www.iptek.co",
+      href: "https://www.iptek.co",
+      sub: null,
+    },
+    {
+      icon: "chat",
+      title: "WhatsApp",
+      value: "+62 817 221 121",
+      href: "https://wa.me/62817221121",
+      sub: null,
+    },
+    {
+      icon: "mail",
+      title: "Email",
+      value: "support@iptek.co",
+      href: "mailto:support@iptek.co",
+      sub: null,
+    },
+    {
+      icon: "location_on",
+      title: lang === "id" ? "Kantor" : "Office",
+      value: "Jl. Srengseng Sawah No.51 C",
+      href: "https://maps.google.com/?q=-6.35861,106.8111146",
+      sub: "Kel. Srengseng Sawah, Jagakarsa\nJakarta Selatan, DKI Jakarta 12640",
+    },
+  ];
+
+  return (
+    <>
+      {/* Header */}
+      <section className="py-20 bg-surface-container-low text-center">
+        <div className="max-w-3xl mx-auto px-6">
+          <p className="text-primary font-bold uppercase tracking-widest text-sm mb-4">
+            {tr.badge}
+          </p>
+          <h1 className="font-headline text-5xl font-extrabold text-on-surface mb-6">
+            {tr.heroTitle}
+          </h1>
+          <p className="text-on-surface-variant text-lg leading-relaxed">
+            {tr.heroSub}
+          </p>
+        </div>
+      </section>
+
+      <section className="py-24 bg-surface">
+        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-3 gap-12">
+          {/* Sidebar */}
+          <div className="space-y-8">
+            <div>
+              <h2 className="font-headline text-2xl font-bold text-on-surface mb-3">
+                {tr.infoTitle}
+              </h2>
+              <p className="text-on-surface-variant leading-relaxed text-sm">
+                {tr.infoSub}
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              {contactInfo.map((item) => (
+                <a
+                  key={item.title}
+                  href={item.href}
+                  target={item.href.startsWith("http") ? "_blank" : undefined}
+                  rel="noopener noreferrer"
+                  className="flex items-start gap-4 p-4 bg-surface-container-low rounded-xl hover:bg-surface-container transition-colors group"
+                >
+                  <div className="w-11 h-11 bg-primary/10 text-primary rounded-lg flex items-center justify-center shrink-0 group-hover:bg-primary group-hover:text-white transition-colors mt-0.5">
+                    <span className="material-symbols-outlined text-xl">{item.icon}</span>
+                  </div>
+                  <div>
+                    <p className="text-[11px] font-bold text-on-surface-variant uppercase tracking-widest mb-0.5">
+                      {item.title}
+                    </p>
+                    <p className="font-semibold text-on-surface text-sm leading-snug">
+                      {item.value}
+                    </p>
+                    {item.sub && (
+                      <p className="text-on-surface-variant text-xs leading-relaxed mt-0.5 whitespace-pre-line">
+                        {item.sub}
+                      </p>
+                    )}
+                  </div>
+                </a>
+              ))}
+            </div>
+
+            {/* Map */}
+            <div className="rounded-xl overflow-hidden shadow-md border border-outline-variant">
+              <iframe
+                src={MAP_SRC}
+                width="100%"
+                height="220"
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title={lang === "id" ? "Lokasi Kantor IPTEK" : "IPTEK Office Location"}
+              />
+              <a
+                href="https://maps.google.com/?q=-6.35861,106.8111146"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center gap-2 py-3 bg-surface-container-low text-primary text-sm font-semibold hover:bg-surface-container transition-colors"
+              >
+                <span className="material-symbols-outlined text-base">open_in_new</span>
+                {lang === "id" ? "Buka di Google Maps" : "Open in Google Maps"}
+              </a>
+            </div>
+          </div>
+
+          {/* Form */}
+          <div className="lg:col-span-2 bg-surface-container-lowest rounded-2xl shadow-sm p-8">
+            <ContactForm />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}