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/about/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useLang } from "@/context/LanguageContext";
+import { t } from "@/lib/translations";
+
+const statValues = ["10+", "50+", "99%", "5+"];
+
+export default function AboutPage() {
+  const { lang } = useLang();
+  const tr = t[lang].about;
+
+  return (
+    <>
+      {/* Hero */}
+      <section className="py-24 bg-surface-container-low">
+        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div>
+            <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 leading-tight mb-6">
+              {tr.heroTitle}
+            </h1>
+            <p className="text-on-surface-variant text-lg leading-relaxed mb-6">{tr.heroP1}</p>
+            <p className="text-on-surface-variant text-lg leading-relaxed">{tr.heroP2}</p>
+          </div>
+          <div className="relative">
+            <div className="aspect-video rounded-2xl overflow-hidden shadow-2xl relative">
+              <Image
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLhC7YbrOjSOGDGykeub9Gv0rqDRi0hsNMmSzAoG3tzjUzncwKtV5K2b-JucjJmrRd0rspULAI38-t0UOTxm7u5e6Uz8mzil4O21TBJXMxZrSUH-h_BULKkAvi4YCmuYo-oGdB9vSNIxKTi5Kc72Rs9P9UeKcCTiFGah96K5s0reCKu6rypkeW5jfkMBK_xqyvcnqiXORWcDlkTE4iYyhYD6kXTmH5wC5k-8is7FHrgCsD2o_NDFF7oCJ_VfnLF3WiW21KNgszLOo"
+                alt="Tim IPTEK"
+                fill
+                className="object-cover"
+                unoptimized
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section className="py-16 bg-primary">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white">
+            {statValues.map((value, i) => (
+              <div key={i}>
+                <div className="text-4xl font-black font-headline mb-2">{value}</div>
+                <div className="text-blue-200 text-sm uppercase tracking-widest font-medium">{tr.stats[i]}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Mission & Vision */}
+      <section className="py-24 bg-surface">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div className="bg-surface-container-low p-10 rounded-2xl">
+              <div className="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-6">
+                <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>visibility</span>
+              </div>
+              <h2 className="font-headline text-2xl font-bold mb-4">{tr.visionTitle}</h2>
+              <p className="text-on-surface-variant leading-relaxed">{tr.visionDesc}</p>
+            </div>
+            <div className="bg-surface-container-low p-10 rounded-2xl">
+              <div className="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-6">
+                <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>flag</span>
+              </div>
+              <h2 className="font-headline text-2xl font-bold mb-4">{tr.missionTitle}</h2>
+              <p className="text-on-surface-variant leading-relaxed">{tr.missionDesc}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Values */}
+      <section className="py-24 bg-surface-container-low">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">{tr.valuesTitle}</h2>
+            <p className="text-on-surface-variant max-w-xl mx-auto">{tr.valuesSub}</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {tr.values.map((v) => (
+              <div key={v.title} className="bg-surface-container-lowest p-8 rounded-xl hover:shadow-lg transition-all hover:-translate-y-1">
+                <div className="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-4">
+                  <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>{v.icon}</span>
+                </div>
+                <h3 className="font-headline text-xl font-bold mb-2">{v.title}</h3>
+                <p className="text-sm text-on-surface-variant leading-relaxed">{v.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 bg-inverse-surface text-white text-center">
+        <div className="max-w-3xl mx-auto px-6">
+          <h2 className="font-headline text-4xl font-extrabold mb-6">{tr.ctaTitle}</h2>
+          <p className="text-slate-400 mb-10 text-lg">{tr.ctaSub}</p>
+          <Link href="/contact" className="bg-gradient-to-br from-primary to-primary-container text-white px-10 py-4 rounded-lg font-bold text-lg hover:opacity-90 transition-all inline-block">
+            {tr.ctaBtn}
+          </Link>
+        </div>
+      </section>
+    </>
+  );
+}

app/actions/sendContact.ts

@@ -0,0 +1,67 @@
+"use server";
+
+import nodemailer from "nodemailer";
+
+export type ContactPayload = {
+  name: string;
+  email: string;
+  company: string;
+  phone: string;
+  topic: string;
+  message: string;
+};
+
+export type SendResult = { ok: true } | { ok: false; error: string };
+
+export async function sendContactEmail(data: ContactPayload): Promise<SendResult> {
+  const { SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS } = process.env;
+
+  if (!SMTP_HOST || !SMTP_USER || !SMTP_PASS) {
+    return { ok: false, error: "Konfigurasi email server belum diatur." };
+  }
+
+  const transporter = nodemailer.createTransport({
+    host: SMTP_HOST,
+    port: Number(SMTP_PORT ?? 587),
+    secure: Number(SMTP_PORT) === 465,
+    auth: { user: SMTP_USER, pass: SMTP_PASS },
+  });
+
+  const html = `
+    <div style="font-family: Inter, sans-serif; max-width: 600px; margin: 0 auto; color: #191c1e;">
+      <div style="background: linear-gradient(135deg, #004cca, #0062ff); padding: 32px; border-radius: 12px 12px 0 0;">
+        <h1 style="color: white; margin: 0; font-size: 24px;">Pesan Baru dari Website IPTEK</h1>
+      </div>
+      <div style="background: #f7f9fb; padding: 32px; border-radius: 0 0 12px 12px; border: 1px solid #e0e3e5;">
+        <table style="width: 100%; border-collapse: collapse;">
+          <tr><td style="padding: 8px 0; color: #737687; width: 140px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Nama</td><td style="padding: 8px 0; font-weight: 500;">${data.name}</td></tr>
+          <tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Email</td><td style="padding: 8px 0;"><a href="mailto:${data.email}" style="color: #004cca;">${data.email}</a></td></tr>
+          <tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Perusahaan</td><td style="padding: 8px 0;">${data.company || "-"}</td></tr>
+          <tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">WhatsApp</td><td style="padding: 8px 0;">${data.phone || "-"}</td></tr>
+          <tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Topik</td><td style="padding: 8px 0;"><span style="background: #dbe1ff; color: #004cca; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600;">${data.topic}</span></td></tr>
+        </table>
+        <div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid #e0e3e5;">
+          <p style="color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px;">Pesan</p>
+          <p style="margin: 0; line-height: 1.7; white-space: pre-wrap;">${data.message}</p>
+        </div>
+        <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #e0e3e5; font-size: 12px; color: #737687;">
+          Dikirim pada ${new Date().toLocaleString("id-ID", { timeZone: "Asia/Jakarta", dateStyle: "long", timeStyle: "short" })} WIB
+        </div>
+      </div>
+    </div>
+  `;
+
+  try {
+    await transporter.sendMail({
+      from: `"IPTEK Website" <${SMTP_USER}>`,
+      to: "support@iptek.co",
+      replyTo: data.email,
+      subject: `[${data.topic}] Pesan dari ${data.name} – IPTEK Website`,
+      html,
+    });
+    return { ok: true };
+  } catch (err) {
+    console.error("Email send error:", err);
+    return { ok: false, error: "Gagal mengirim pesan. Silakan coba lagi atau hubungi kami langsung." };
+  }
+}

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>
+    </>
+  );
+}

app/globals.css

@@ -1,26 +1,97 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  --primary: #004cca;
-  --foreground: #171717;
+  --primary-container: #0062ff;
+  --on-primary: #ffffff;
+  --on-primary-fixed: #00174b;
+  --primary-fixed: #dbe1ff;
+  --primary-fixed-dim: #b4c5ff;
+  --inverse-primary: #b4c5ff;
+
+  --secondary: #495f84;
+  --on-secondary: #ffffff;
+  --secondary-container: #bcd2fe;
+  --on-secondary-container: #445a7f;
+
+  --tertiary: #005f75;
+  --on-tertiary: #ffffff;
+  --tertiary-container: #007995;
+  --on-tertiary-container: #e3f6ff;
+
+  --surface: #f7f9fb;
+  --surface-dim: #d8dadc;
+  --surface-bright: #f7f9fb;
+  --surface-container-lowest: #ffffff;
+  --surface-container-low: #f2f4f6;
+  --surface-container: #eceef0;
+  --surface-container-high: #e6e8ea;
+  --surface-container-highest: #e0e3e5;
+  --on-surface: #191c1e;
+  --on-surface-variant: #424656;
+
+  --outline: #737687;
+  --outline-variant: #c2c6d9;
+
+  --inverse-surface: #2d3133;
+  --inverse-on-surface: #eff1f3;
+
+  --error: #ba1a1a;
+  --on-error: #ffffff;
+  --error-container: #ffdad6;
+
+  --background: #f7f9fb;
+  --on-background: #191c1e;
 }
 
 @theme inline {
+  --color-primary: var(--primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary: var(--on-primary);
+  --color-on-primary-fixed: var(--on-primary-fixed);
+  --color-primary-fixed: var(--primary-fixed);
+  --color-primary-fixed-dim: var(--primary-fixed-dim);
+  --color-inverse-primary: var(--inverse-primary);
+
+  --color-secondary: var(--secondary);
+  --color-on-secondary: var(--on-secondary);
+  --color-secondary-container: var(--secondary-container);
+  --color-on-secondary-container: var(--on-secondary-container);
+
+  --color-tertiary: var(--tertiary);
+  --color-on-tertiary: var(--on-tertiary);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-on-tertiary-container: var(--on-tertiary-container);
+
+  --color-surface: var(--surface);
+  --color-surface-dim: var(--surface-dim);
+  --color-surface-bright: var(--surface-bright);
+  --color-surface-container-lowest: var(--surface-container-lowest);
+  --color-surface-container-low: var(--surface-container-low);
+  --color-surface-container: var(--surface-container);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-surface-container-highest: var(--surface-container-highest);
+  --color-on-surface: var(--on-surface);
+  --color-on-surface-variant: var(--on-surface-variant);
+
+  --color-outline: var(--outline);
+  --color-outline-variant: var(--outline-variant);
+
+  --color-inverse-surface: var(--inverse-surface);
+  --color-inverse-on-surface: var(--inverse-on-surface);
+
+  --color-error: var(--error);
+  --color-on-error: var(--on-error);
+  --color-error-container: var(--error-container);
+
   --color-background: var(--background);
-  --color-foreground: var(--foreground);
+  --color-on-background: var(--on-background);
-  --font-sans: var(--font-geist-sans);
+
-  --font-mono: var(--font-geist-mono);
+  --font-headline: "Manrope", sans-serif;
+  --font-body: "Inter", sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
+.material-symbols-outlined {
-  :root {
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-    --background: #0a0a0a;
+  vertical-align: middle;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }

app/layout.tsx

@@ -1,20 +1,26 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Manrope, Inter } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import { LanguageProvider } from "@/context/LanguageContext";
 
-const geistSans = Geist({
+const manrope = Manrope({
-  variable: "--font-geist-sans",
+  variable: "--font-headline",
   subsets: ["latin"],
+  weight: ["700", "800"],
 });
 
-const geistMono = Geist_Mono({
+const inter = Inter({
-  variable: "--font-geist-mono",
+  variable: "--font-body",
   subsets: ["latin"],
+  weight: ["400", "500", "600"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "IPTEK | Integrasi Persada Teknologi",
-  description: "Generated by create next app",
+  description:
+    "Solusi teknologi terintegrasi untuk bisnis modern. Kami menghadirkan ekosistem digital yang efisien dan berdampak nyata.",
 };
 
 export default function RootLayout({
@@ -23,11 +29,20 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
+    <html lang="id" className={`${manrope.variable} ${inter.variable}`}>
-      lang="en"
+      <head>
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+        <link
-    >
+          rel="stylesheet"
-      <body className="min-h-full flex flex-col">{children}</body>
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+        />
+      </head>
+      <body className="min-h-full flex flex-col bg-surface text-on-surface font-body">
+        <LanguageProvider>
+          <Navbar />
+          <main className="flex-1 pt-20">{children}</main>
+          <Footer />
+        </LanguageProvider>
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -1,65 +1,263 @@
+"use client";
+
+import Link from "next/link";
 import Image from "next/image";
+import zappcareProduk from "./zappcare_produk.png";
+import utmsProduk from "./utms_produk.png";
+import emrProduk from "./emr_produk.png";
+import { useLang } from "@/context/LanguageContext";
+import { t } from "@/lib/translations";
+
+const products = [
+  {
+    slug: "zappcare",
+    name: "ZappCare",
+    tag: "Communication",
+    features: ["User & Admin Panel", "Automated Messaging", "CRM Integration & Analytics"],
+    image: zappcareProduk,
+  },
+  {
+    slug: "utms",
+    name: "Unified TMS for EDC Onboarding",
+    tag: "Fintech Solution",
+    features: ["Simplified Application", "Document & Compliance", "Real-time Tracking"],
+    image: utmsProduk,
+  },
+  {
+    slug: "emrclinic",
+    name: "EMR Clinic",
+    tag: "Healthcare IT",
+    features: ["Patient Records & Scheduling", "Billing & Prescription", "Lab Integration"],
+    image: emrProduk,
+  },
+];
+
+const contacts = [
+  { icon: "language", title: "Website", value: "www.iptek.co" },
+  { icon: "chat", title: "WhatsApp", value: "+62 817 221 121" },
+  { icon: "mail", title: "Email", value: "support@iptek.co" },
+];
 
 export default function Home() {
+  const { lang } = useLang();
+  const tr = t[lang].home;
+
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <>
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      {/* Hero */}
+      <section className="relative min-h-[92vh] flex items-center overflow-hidden bg-surface-dim">
+        <div className="absolute inset-0 z-0">
+          <div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent z-10" />
           <Image
-          className="dark:invert"
+            src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2yLmz-MHti4ExPVSy2BlsZGnZ7jP9yqgDsdpIyR3BdmW5NyVcqXIUgrkc9EuVFgF-P3bL7b4NLLbpmSgMr8vyWZxtsUDi9rWqDNeRwiVz3TCqbCPZcMM_6eu5WvUs4V45ZEiOWP5CwGvoIcHsmA0dyFErj2ffxiAX3AUQCpHUbuqAu1cMqCm7UpxogS7vVF8efyZm-2bDIiMPBcPIfRoxm002b9V1yEJaS7JX9PgSG9v1vnSLt9ilkovFIaEv1Pu5rmNOhCJy5W4"
-          src="/next.svg"
+            alt="Digital connectivity"
-          alt="Next.js logo"
+            fill
-          width={100}
+            className="object-cover"
-          height={20}
             priority
+            unoptimized
           />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+        </div>
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+        <div className="relative z-20 max-w-7xl mx-auto px-6 w-full py-20 lg:py-0">
-            To get started, edit the page.tsx file.
+          <div className="max-w-2xl">
+            <h1 className="font-headline text-5xl md:text-7xl font-extrabold text-on-surface leading-[1.1] tracking-tight mb-6">
+              {tr.heroTitle}{" "}
+              <span className="text-primary">{tr.heroHighlight}</span>
             </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            <p className="text-on-surface-variant mb-10 leading-relaxed text-lg max-w-xl">
-            Looking for a starting point or more instructions? Head over to{" "}
+              {tr.heroSub}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
             </p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Link href="/contact" className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-4 rounded-lg font-bold text-base shadow-xl hover:opacity-90 transition-all text-center">
+                {tr.heroBtn1}
+              </Link>
+              <Link href="/products" className="bg-surface-container-highest text-on-surface px-8 py-4 rounded-lg font-bold text-base hover:bg-surface-container-high transition-all text-center">
+                {tr.heroBtn2}
+              </Link>
             </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          </div>
-          <a
+        </div>
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+      </section>
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+
-            target="_blank"
+      {/* About Preview */}
-            rel="noopener noreferrer"
+      <section className="py-24 bg-surface">
-          >
+        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="order-2 lg:order-1">
+            <div className="aspect-square rounded-2xl overflow-hidden shadow-2xl relative">
               <Image
-              className="dark:invert"
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLhC7YbrOjSOGDGykeub9Gv0rqDRi0hsNMmSzAoG3tzjUzncwKtV5K2b-JucjJmrRd0rspULAI38-t0UOTxm7u5e6Uz8mzil4O21TBJXMxZrSUH-h_BULKkAvi4YCmuYo-oGdB9vSNIxKTi5Kc72Rs9P9UeKcCTiFGah96K5s0reCKu6rypkeW5jfkMBK_xqyvcnqiXORWcDlkTE4iYyhYD6kXTmH5wC5k-8is7FHrgCsD2o_NDFF7oCJ_VfnLF3WiW21KNgszLOo"
-              src="/vercel.svg"
+                alt="Collaboration"
-              alt="Vercel logomark"
+                fill
-              width={16}
+                className="object-cover"
-              height={16}
+                unoptimized
               />
-            Deploy Now
+              <div className="absolute inset-0 bg-primary/10 mix-blend-overlay" />
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
             </div>
-      </main>
           </div>
+          <div className="order-1 lg:order-2">
+            <h2 className="font-headline text-4xl font-extrabold text-on-surface leading-tight mb-8">
+              {tr.aboutTitle}
+            </h2>
+            <div className="space-y-6 text-on-surface-variant leading-relaxed text-lg">
+              <p>{tr.aboutP1}</p>
+              <p>{tr.aboutP2}</p>
+            </div>
+            <div className="mt-10 flex gap-12">
+              <div>
+                <div className="text-3xl font-black text-primary mb-1">10+</div>
+                <div className="text-sm font-medium text-slate-500 uppercase tracking-widest">{tr.aboutStat1}</div>
+              </div>
+              <div>
+                <div className="text-3xl font-black text-primary mb-1">99%</div>
+                <div className="text-sm font-medium text-slate-500 uppercase tracking-widest">{tr.aboutStat2}</div>
+              </div>
+            </div>
+            <div className="mt-10">
+              <Link href="/about" className="text-primary font-bold inline-flex items-center gap-2 group">
+                {tr.aboutLink}
+                <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Why Choose Us */}
+      <section className="py-24 bg-surface-container-low">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">{tr.whyTitle}</h2>
+            <p className="text-on-surface-variant max-w-2xl mx-auto">{tr.whySub}</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
+            {tr.pillars.map((p) => (
+              <div key={p.title} className="bg-surface-container-lowest p-8 rounded-xl transition-all hover:shadow-[0_20px_50px_rgba(0,0,0,0.05)] hover:-translate-y-1">
+                <div className="w-12 h-12 bg-primary/10 text-primary flex items-center justify-center rounded-lg mb-6">
+                  <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>{p.icon}</span>
+                </div>
+                <h3 className="font-headline text-xl font-bold text-on-surface mb-3">{p.title}</h3>
+                <p className="text-sm text-on-surface-variant leading-relaxed">{p.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Products Preview */}
+      <section className="py-24 bg-surface">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
+            <div className="max-w-2xl">
+              <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">{tr.productsTitle}</h2>
+              <p className="text-on-surface-variant text-lg">{tr.productsSub}</p>
+            </div>
+            <Link href="/products" className="text-primary font-bold inline-flex items-center gap-2 group">
+              {tr.productsLink}
+              <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
+            </Link>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {products.map((product, i) => (
+              <div key={product.slug} className="group bg-surface-container-lowest rounded-2xl overflow-hidden border border-outline-variant/30 flex flex-col hover:shadow-xl transition-shadow">
+                <div className="aspect-video relative overflow-hidden">
+                  <Image src={product.image} alt={product.name} fill className="object-cover transition-transform duration-500 group-hover:scale-110" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+                  <div className="absolute bottom-4 left-4">
+                    <span className="bg-primary text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full">{product.tag}</span>
+                  </div>
+                </div>
+                <div className="p-8 flex flex-col flex-grow">
+                  <h3 className="font-headline text-2xl font-bold mb-3 leading-tight">{product.name}</h3>
+                  <p className="text-on-surface-variant text-sm mb-6 leading-relaxed">{tr.productDescs[i]}</p>
+                  <ul className="space-y-3 mb-8 flex-grow">
+                    {product.features.map((f) => (
+                      <li key={f} className="flex items-center gap-2 text-xs font-medium text-slate-600">
+                        <span className="material-symbols-outlined text-primary text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+                        {f}
+                      </li>
+                    ))}
+                  </ul>
+                  <Link href={`/products/${product.slug}`} className="w-full py-3 px-6 rounded-lg border-2 border-primary text-primary font-bold text-sm hover:bg-primary hover:text-white transition-all text-center block">
+                    {tr.productsBtn}
+                  </Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Target Market */}
+      <section className="py-24 bg-inverse-surface text-white">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+            <div>
+              <h2 className="font-headline text-4xl font-extrabold mb-8 leading-tight">{tr.sectorsTitle}</h2>
+              <div className="space-y-8">
+                {tr.sectors.map((item) => (
+                  <div key={item.title} className="flex gap-6">
+                    <div className="text-blue-300 shrink-0">
+                      <span className="material-symbols-outlined text-4xl">{item.icon}</span>
+                    </div>
+                    <div>
+                      <h4 className="text-xl font-bold mb-2">{item.title}</h4>
+                      <p className="text-slate-400">{item.desc}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="relative">
+              <div className="bg-primary/20 absolute -inset-4 rounded-3xl blur-3xl" />
+              <Image
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6A82v9LQWaGRaB0fuN817AH7QCAxoqIx7KcYxBUX35MwNH_bmW7YWFtjVKVqEr227abIBryBVKyDXhSVzLNQjgTLUiwD4FDp0EyAYoftxNPCjpKPvGY71g-iT5iabf_3NkX_q75nZQcOtAs9IIiM8wzgTJrWxq3SsbAx6h1fzTh2XYd6ldOL2vqA0L_vAvxsr1jHdSfLJKvBYvWqZgupCPvkyg8qXeqzQdqFIsvJ3eYxkpSOHsUYd5LimiAHk17d4XJ9TPzYP83c"
+                alt="Industry Sectors"
+                width={600}
+                height={340}
+                className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
+                unoptimized
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-24 bg-surface overflow-hidden">
+        <div className="max-w-5xl mx-auto px-6 text-center relative">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-3xl -z-10" />
+          <h2 className="font-headline text-5xl font-extrabold text-on-surface mb-8 leading-tight">
+            {tr.ctaTitle}
+          </h2>
+          <p className="text-on-surface-variant text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
+            {tr.ctaSub}
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-6">
+            <Link href="/contact" className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-10 py-5 rounded-lg font-bold text-lg shadow-2xl hover:scale-105 transition-transform text-center">
+              {tr.ctaBtn1}
+            </Link>
+            <Link href="/contact" className="border-2 border-primary text-primary px-10 py-5 rounded-lg font-bold text-lg hover:bg-primary/5 transition-all text-center">
+              {tr.ctaBtn2}
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Info */}
+      <section className="py-24 bg-surface-container-low">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
+            {contacts.map((item) => (
+              <div key={item.title} className="flex flex-col items-center text-center p-8 bg-surface-container-lowest rounded-2xl shadow-sm">
+                <div className="w-16 h-16 bg-primary text-on-primary rounded-full flex items-center justify-center mb-6">
+                  <span className="material-symbols-outlined text-3xl">{item.icon}</span>
+                </div>
+                <h4 className="font-headline text-xl font-bold mb-2">{item.title}</h4>
+                <p className="text-on-surface-variant">{item.value}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
   );
 }

app/privacy/BackButton.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export default function BackButton() {
+  const router = useRouter();
+  return (
+    <button
+      onClick={() => router.back()}
+      className="inline-flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all duration-300"
+    >
+      <span className="material-symbols-outlined">arrow_back</span>
+      <span>Back</span>
+    </button>
+  );
+}

app/privacy/page.tsx

@@ -0,0 +1,132 @@
+import BackButton from "./BackButton";
+
+export const metadata = {
+  title: "Privacy Policy | IPTEK (Integrasi Persada Teknologi)",
+  description:
+    "Kebijakan privasi IPTEK — bagaimana kami mengelola dan melindungi data Anda.",
+};
+
+export default function PrivacyPage() {
+  return (
+    <div className="pb-24 px-6 relative overflow-hidden">
+      {/* Decorative blurs */}
+      <div className="absolute top-0 right-0 -z-10 w-full h-full opacity-30 pointer-events-none">
+        <div className="absolute top-[-10%] right-[-5%] w-[600px] h-[600px] bg-primary-fixed blur-[120px] rounded-full" />
+        <div className="absolute bottom-[20%] left-[-10%] w-[400px] h-[400px] bg-secondary-fixed-dim blur-[100px] rounded-full" />
+      </div>
+
+      <div className="max-w-3xl mx-auto pt-16">
+        {/* Header */}
+        <div className="mb-16">
+          <div className="flex items-center gap-2 mb-4">
+            <span className="px-3 py-1 bg-primary-fixed text-on-primary-fixed-variant text-xs font-bold uppercase tracking-widest rounded-full">
+              Legal Documentation
+            </span>
+            <span className="text-outline text-xs font-medium">Updated Oct 2024</span>
+          </div>
+          <h1 className="font-headline text-5xl md:text-6xl font-extrabold tracking-tighter text-on-surface mb-6 leading-tight">
+            Privacy{" "}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-container">
+              Policy
+            </span>
+          </h1>
+          <p className="text-lg text-on-surface-variant font-medium leading-relaxed max-w-2xl">
+            Integrasi Persada Teknologi (IPTEK) is committed to protecting your
+            architectural digital data. This policy outlines how we handle information
+            in our pursuit of crystalline connectivity.
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="bg-surface-container-lowest rounded-xl p-8 md:p-12 shadow-xl shadow-slate-900/5 space-y-12">
+          <section>
+            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
+              1. Data Collection &amp; Architecture
+            </h2>
+            <div className="space-y-4 text-on-surface-variant leading-relaxed">
+              <p>
+                We collect information that allows us to integrate complex systems into
+                seamless operational workflows. This includes technical metadata,
+                professional contact information, and system interaction logs necessary
+                for architectural digital solutions.
+              </p>
+              <p>
+                Our systems are designed with "Security by Design" principles, ensuring
+                that data ingestion is minimal, purposeful, and transparent.
+              </p>
+            </div>
+          </section>
+
+          <section>
+            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
+              2. Integration Protocols
+            </h2>
+            <div className="space-y-4 text-on-surface-variant leading-relaxed">
+              <p>Information collected is utilized strictly to:</p>
+              <ul className="space-y-3 pl-4">
+                {[
+                  "Refine and optimize digital infrastructure performance.",
+                  "Deliver personalized enterprise technology insights.",
+                  "Ensure compliance with global security architecture standards.",
+                ].map((item) => (
+                  <li key={item} className="flex items-start gap-3">
+                    <span
+                      className="material-symbols-outlined text-primary text-lg shrink-0"
+                      style={{ fontVariationSettings: "'FILL' 1" }}
+                    >
+                      check_circle
+                    </span>
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </section>
+
+          <section>
+            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
+              3. Data Integrity &amp; Security
+            </h2>
+            <div className="space-y-4 text-on-surface-variant leading-relaxed">
+              <p>
+                IPTEK employs high-end crystalline connectivity security measures. We do
+                not use traditional clumsy firewalls but layered, intelligent defense
+                systems that utilize deep navy encryption protocols.
+              </p>
+              <p>
+                Data is stored in secure environments with strict multi-factor
+                authentication and zero-trust access hierarchies.
+              </p>
+            </div>
+          </section>
+
+          <section>
+            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
+              4. Third-Party Connectivity
+            </h2>
+            <div className="space-y-4 text-on-surface-variant leading-relaxed">
+              <p>
+                We do not sell your data. Integration with third-party systems occurs
+                only under explicit Service Level Agreements (SLAs) and strictly for the
+                purpose of extending the capabilities of your digital architecture.
+              </p>
+            </div>
+          </section>
+
+          <div className="pt-8 border-t border-outline-variant/30">
+            <p className="text-sm text-outline italic">
+              By using our services, you consent to the architectural data management
+              practices described in this policy. For detailed inquiries regarding your
+              data rights, please contact our Security Architecture department.
+            </p>
+          </div>
+        </div>
+
+        {/* Back link */}
+        <div className="mt-12 flex justify-center">
+          <BackButton />
+        </div>
+      </div>
+    </div>
+  );
+}

app/products/emrclinic/page.tsx

@@ -0,0 +1,303 @@
+import Image from "next/image";
+import Link from "next/link";
+import emrProduk from "@/app/emr_produk.png";
+
+export const metadata = {
+  title: "EMR Clinic | IPTEK - Precision Medical Integration",
+  description:
+    "EMR Clinic integrates clinical precision with operational excellence, transforming patient care into a seamless digital journey.",
+};
+
+const specialties = [
+  {
+    icon: "medical_services",
+    title: "General Practice",
+    desc: "Comprehensive tools for primary care providers including family health history and chronic care tracking.",
+  },
+  {
+    icon: "dentistry",
+    title: "Dental Care",
+    desc: "Charting, imaging integration, and treatment planning specifically for dental practitioners.",
+  },
+  {
+    icon: "psychology",
+    title: "Mental Health",
+    desc: "Highly private intake forms, session notes, and specialized telemedicine tools for therapists.",
+  },
+  {
+    icon: "ophthalmology",
+    title: "Ophthalmology",
+    desc: "Integrated diagnostic imaging and vision-specific patient records for eyecare clinics.",
+  },
+];
+
+const steps = [
+  {
+    num: "01",
+    color: "bg-primary",
+    title: "Discovery & Migration",
+    desc: "We audit your existing data and orchestrate a secure migration to the IPTEK cloud.",
+  },
+  {
+    num: "02",
+    color: "bg-primary-container",
+    title: "Workflow Tailoring",
+    desc: "Our architects configure the EMR system to match your clinic's unique operational DNA.",
+  },
+  {
+    num: "03",
+    color: "bg-secondary",
+    title: "Staff Calibration",
+    desc: "Hands-on training and simulation sessions to ensure 100% team readiness.",
+  },
+];
+
+export default function EMRClinicPage() {
+  return (
+    <div className="pt-4 overflow-x-hidden">
+
+      {/* Hero */}
+      <section className="relative overflow-hidden">
+        <div className="max-w-7xl mx-auto px-6 md:px-12 py-32 flex flex-col items-start min-h-[90vh] justify-center">
+          <div className="z-10 max-w-4xl">
+            <span className="bg-primary-container text-on-primary-container px-4 py-1.5 rounded-full text-xs font-bold tracking-widest mb-6 inline-block uppercase">
+              Enterprise Medical Solutions
+            </span>
+            <h1 className="font-headline font-extrabold text-7xl md:text-8xl text-on-surface leading-[1.05] tracking-tighter mb-8">
+              The Future of{" "}
+              <span className="text-primary italic">Clinic</span> Management.
+            </h1>
+            <p className="text-xl text-on-surface-variant max-w-2xl leading-relaxed mb-10">
+              Precision engineering for modern healthcare. EMR Clinic integrates clinical
+              precision with operational excellence, transforming patient care into a
+              seamless digital journey.
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Link
+                href="/contact"
+                className="bg-primary text-white px-8 py-4 rounded-xl font-bold flex items-center gap-2 group"
+              >
+                Get Started Today
+                <span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
+              </Link>
+              <Link
+                href="/contact"
+                className="bg-surface-container-high text-on-surface px-8 py-4 rounded-xl font-bold border border-outline-variant/20"
+              >
+                View Product Tour
+              </Link>
+            </div>
+          </div>
+        </div>
+        {/* Asymmetric background image */}
+        <div className="absolute top-1/2 -right-1/4 -translate-y-1/2 w-3/4 h-full hidden lg:block opacity-40 pointer-events-none">
+          <div className="relative w-full h-full">
+            <div className="absolute inset-0 bg-gradient-to-l from-primary-fixed-dim to-transparent rounded-full blur-[120px]" />
+            <Image
+              src={emrProduk}
+              alt="EMR Clinic"
+              fill
+              className="object-cover rounded-3xl mix-blend-overlay"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Problem & Solution */}
+      <section className="bg-surface-container-low">
+        <div className="max-w-7xl mx-auto px-6 md:px-12 py-32 grid md:grid-cols-2 gap-24 items-center">
+          <div className="space-y-8">
+            <h2 className="font-headline font-bold text-4xl tracking-tight">
+              Breaking the Cycle of Manual Inefficiency.
+            </h2>
+            <p className="text-lg text-on-surface-variant leading-relaxed">
+              Traditional clinic management is plagued by fragmented data, manual entry
+              errors, and disconnected workflows. Inefficient patient processing doesn't
+              just waste time — it impacts the quality of care.
+            </p>
+            <div className="grid grid-cols-1 gap-6">
+              {[
+                {
+                  icon: "warning",
+                  title: "Data Fragmentation",
+                  desc: "Patient records scattered across paper and legacy digital silos.",
+                },
+                {
+                  icon: "timer_off",
+                  title: "Resource Leakage",
+                  desc: "Overlapping appointments and manual billing creating financial gaps.",
+                },
+              ].map((item) => (
+                <div key={item.title} className="flex items-start gap-4 p-6 bg-surface-container-lowest rounded-2xl shadow-xl shadow-slate-900/5">
+                  <div className="p-3 bg-error-container text-error rounded-xl shrink-0">
+                    <span className="material-symbols-outlined">{item.icon}</span>
+                  </div>
+                  <div>
+                    <h4 className="font-bold text-on-surface">{item.title}</h4>
+                    <p className="text-sm text-on-surface-variant">{item.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="relative">
+            <div className="absolute -inset-4 bg-primary/10 rounded-[2rem] blur-3xl pointer-events-none" />
+            <div className="relative bg-surface-container-lowest p-12 rounded-[2rem] shadow-2xl">
+              <div className="mb-8">
+                <span className="text-primary font-bold tracking-widest uppercase text-xs">The IPTEK Solution</span>
+                <h3 className="font-headline font-bold text-3xl mt-2">Comprehensive EMR Integration.</h3>
+              </div>
+              <p className="text-on-surface-variant mb-8">
+                We replace chaos with a crystalline architecture of information. One
+                platform to unify every medical touchpoint.
+              </p>
+              <ul className="space-y-4">
+                {["Real-time Data Synchronization", "Automated Workflow Orchestration", "Predictive Patient Analytics"].map((item) => (
+                  <li key={item} className="flex items-center gap-3 font-semibold text-primary">
+                    <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Bento Grid */}
+      <section>
+        <div className="max-w-7xl mx-auto px-6 md:px-12 py-32">
+          <div className="flex flex-col items-center text-center mb-20">
+            <h2 className="font-headline font-bold text-5xl tracking-tighter mb-4">Core Capabilities.</h2>
+            <div className="w-24 h-1 bg-primary rounded-full" />
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:h-[800px]">
+            {/* Patient Records */}
+            <div className="md:col-span-8 bg-surface-container-low p-8 rounded-[2.5rem] flex flex-col justify-between group hover:bg-surface-container transition-all duration-300">
+              <div className="flex justify-between items-start">
+                <div>
+                  <h3 className="font-headline font-bold text-3xl mb-3">Unified Patient Records</h3>
+                  <p className="text-on-surface-variant max-w-md">
+                    360-degree view of patient history, diagnostics, and longitudinal health
+                    data in a single encrypted dashboard.
+                  </p>
+                </div>
+                <span className="material-symbols-outlined text-4xl text-primary p-4 bg-white rounded-full shrink-0">folder_shared</span>
+              </div>
+              <Image
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-QZysw01XkY4jAb1fHK9rbcmq_HfqrKnUN5jX0AVw6m8aAuzNAVCpZ7zTCYUVTyPocXlL5-nYr1CpXCmlNJGNezygXdFHojd4R3Lv-9_omSdtlQT2WlEa7smizFdueztHUSUqPOSYFihjppudE2HxhZvm-khHl3TSswy60zfdxF8OJamxnSGmiS9Ut-9JwS9v2m3i2G0T43RT_QBNvBPIx4SozSWzKHTPRkVhPxFytz5GfUQg52X1pTDaytSO14s97apsaqq7OZ0"
+                alt="Patient Records"
+                width={800}
+                height={192}
+                className="mt-8 h-48 w-full object-cover rounded-2xl grayscale group-hover:grayscale-0 transition-all"
+                unoptimized
+              />
+            </div>
+            {/* Smart Scheduling */}
+            <div className="md:col-span-4 bg-primary p-8 rounded-[2.5rem] text-on-primary flex flex-col justify-between">
+              <span className="material-symbols-outlined text-5xl">event_available</span>
+              <div>
+                <h3 className="font-headline font-bold text-2xl mb-2">Smart Scheduling</h3>
+                <p className="opacity-80 text-sm">
+                  AI-driven appointment optimization to reduce wait times and maximize clinical efficiency.
+                </p>
+              </div>
+            </div>
+            {/* Billing */}
+            <div className="md:col-span-4 bg-surface-container-lowest p-8 rounded-[2.5rem] border border-outline-variant/10 shadow-lg flex flex-col justify-between">
+              <div className="p-4 bg-secondary-container/30 w-fit rounded-2xl mb-6">
+                <span className="material-symbols-outlined text-primary">receipt_long</span>
+              </div>
+              <div>
+                <h3 className="font-headline font-bold text-2xl mb-2">Automated Billing</h3>
+                <p className="text-on-surface-variant text-sm">
+                  Seamless invoicing and insurance integration to accelerate revenue cycles.
+                </p>
+              </div>
+            </div>
+            {/* Remote Care */}
+            <div className="md:col-span-5 bg-surface-container-low p-8 rounded-[2.5rem] flex flex-col justify-between relative overflow-hidden">
+              <div>
+                <h3 className="font-headline font-bold text-2xl mb-2">Remote Care Hub</h3>
+                <p className="text-on-surface-variant text-sm">
+                  Integrated telemedicine and prescription management for modern, flexible healthcare delivery.
+                </p>
+              </div>
+              <div className="flex gap-4 mt-8">
+                {["TELEMEDICINE", "LAB INTEGRATION"].map((tag) => (
+                  <span key={tag} className="bg-white/80 px-4 py-2 rounded-full text-xs font-bold">{tag}</span>
+                ))}
+              </div>
+            </div>
+            {/* Security */}
+            <div className="md:col-span-3 bg-secondary p-8 rounded-[2.5rem] text-on-secondary flex flex-col items-center justify-center text-center">
+              <span className="material-symbols-outlined text-6xl mb-4" style={{ fontVariationSettings: "'FILL' 1" }}>security</span>
+              <h3 className="font-headline font-bold text-xl">HIPAA &amp; GDPR</h3>
+              <p className="text-xs opacity-70 mt-2">Military-grade encryption for total data integrity.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Specialty Support */}
+      <section className="py-32">
+        <div className="max-w-7xl mx-auto px-6 md:px-12">
+          <h2 className="font-headline font-bold text-4xl mb-12">One System. Every Specialty.</h2>
+          <div className="flex gap-8 overflow-x-auto pb-12 -mr-6 md:-mr-12" style={{ scrollbarWidth: "none" }}>
+            {specialties.map((s) => (
+              <div key={s.title} className="min-w-[320px] bg-white p-10 rounded-[2rem] shadow-xl shadow-slate-900/5 border border-outline-variant/5">
+                <span className="material-symbols-outlined text-4xl text-primary mb-6 block">{s.icon}</span>
+                <h4 className="font-bold text-2xl mb-2">{s.title}</h4>
+                <p className="text-on-surface-variant text-sm">{s.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Implementation Process */}
+      <section className="bg-on-surface text-surface">
+        <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="font-headline font-bold text-3xl leading-tight mb-4">Rapid, Guided Implementation.</h2>
+              <p className="text-surface-variant leading-relaxed mb-8">Our deployment architecture is designed for zero-downtime integration. We don't just provide software; we manage the transition.</p>
+              <Link href="/contact" className="flex items-center gap-2 text-primary font-bold group w-fit">
+                Read the Onboarding Whitepaper
+                <span className="material-symbols-outlined transition-transform group-hover:translate-x-2">arrow_right_alt</span>
+              </Link>
+            </div>
+            <div className="space-y-8 relative">
+              <div className="absolute left-5 top-3 bottom-3 w-px bg-surface-variant/20" />
+              {steps.map((step) => (
+                <div key={step.num} className="relative pl-14">
+                  <div className={`absolute left-0 top-0 w-10 h-10 ${step.color} rounded-full flex items-center justify-center font-bold text-white text-sm z-10`}>{step.num}</div>
+                  <h4 className="font-bold text-base mb-1">{step.title}</h4>
+                  <p className="text-surface-variant text-sm">{step.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section>
+        <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
+          <div className="bg-primary-container rounded-2xl p-10 md:p-14 text-center text-on-primary-container relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-primary via-primary-container to-blue-400 opacity-20 pointer-events-none" />
+            <div className="relative z-10">
+              <h2 className="font-headline font-extrabold text-4xl tracking-tighter mb-4">Ready to evolve your clinic?</h2>
+              <p className="max-w-xl mx-auto mb-8 opacity-90">Join 500+ clinics worldwide who have unified their operations with IPTEK EMR Clinic.</p>
+              <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                <Link href="/contact" className="bg-white text-primary px-8 py-3 rounded-xl font-black transition-transform hover:scale-105 text-center">Book a Live Demo</Link>
+                <Link href="/contact" className="bg-primary/20 border border-white/20 text-on-primary-container px-8 py-3 rounded-xl font-black transition-transform hover:scale-105 text-center">Speak to an Architect</Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  );
+}

app/products/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import zappcareProduk from "@/app/zappcare_produk.png";
+import { useLang } from "@/context/LanguageContext";
+import { t } from "@/lib/translations";
+
+export default function ProductsPage() {
+  const { lang } = useLang();
+  const tr = t[lang].products;
+
+  return (
+    <div className="pb-24 px-6 md:px-12 max-w-7xl mx-auto pt-12">
+      {/* Hero */}
+      <header className="mb-20 max-w-3xl">
+        <h1 className="font-headline text-5xl md:text-6xl font-extrabold tracking-tight text-on-surface mb-6 leading-tight">
+          {tr.heroTitle}
+        </h1>
+        <p className="text-lg text-on-surface-variant leading-relaxed">{tr.heroSub}</p>
+      </header>
+
+      {/* Bento Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+
+        {/* ZappCare — large card */}
+        <div id="zappcare" className="lg:col-span-8 group relative overflow-hidden rounded-xl bg-surface-container-lowest transition-all hover:shadow-2xl hover:shadow-primary/10">
+          <div className="flex flex-col md:flex-row h-full">
+            <div className="p-10 md:w-1/2 flex flex-col justify-between">
+              <div>
+                <div className="flex items-center gap-2 mb-6">
+                  <span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">chat_bubble</span>
+                  <span className="font-bold tracking-widest text-xs uppercase text-outline">Communication</span>
+                </div>
+                <h2 className="font-headline text-4xl font-bold mb-4">ZappCare</h2>
+                <p className="text-on-surface-variant mb-6 leading-relaxed">{tr.zappDesc}</p>
+                <div className="flex flex-wrap gap-2 mb-8">
+                  {["CRM Sync", "Multi-Agent", "Admin Panel"].map((tag) => (
+                    <span key={tag} className="px-3 py-1 bg-surface-variant text-on-surface-variant text-xs rounded-full font-medium">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <Link href="/products/zappcare" className="flex items-center gap-2 text-primary font-bold group/btn w-fit">
+                {tr.detailBtn}
+                <span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
+              </Link>
+            </div>
+            <div className="md:w-1/2 min-h-[300px] relative">
+              <Image
+                src={zappcareProduk}
+                alt="ZappCare"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Unified TMS */}
+        <div id="utms" className="lg:col-span-4 group relative overflow-hidden rounded-xl bg-surface-container-lowest p-8 flex flex-col transition-all hover:shadow-2xl hover:shadow-primary/10">
+          <div className="flex items-center gap-2 mb-6">
+            <span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">point_of_sale</span>
+            <span className="font-bold tracking-widest text-xs uppercase text-outline">Fintech</span>
+          </div>
+          <h2 className="font-headline text-3xl font-bold mb-4">Unified TMS</h2>
+          <p className="text-on-surface-variant mb-6 text-sm leading-relaxed">{tr.utmsDesc}</p>
+          <ul className="space-y-3 mb-8 flex-grow">
+            {["Simplified Onboarding", "Real-time Tracking"].map((item) => (
+              <li key={item} className="flex items-center gap-2 text-sm text-on-surface-variant">
+                <span className="material-symbols-outlined text-primary text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+                {item}
+              </li>
+            ))}
+          </ul>
+          <Link href="/products/utms" className="flex items-center gap-2 text-primary font-bold group/btn w-fit mt-auto">
+            {tr.detailBtn}
+            <span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
+          </Link>
+        </div>
+
+        {/* EMR Clinic */}
+        <div id="emrclinic" className="lg:col-span-4 group relative overflow-hidden rounded-xl bg-surface-container-lowest p-8 flex flex-col transition-all hover:shadow-2xl hover:shadow-primary/10">
+          <div className="flex items-center gap-2 mb-6">
+            <span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">medical_services</span>
+            <span className="font-bold tracking-widest text-xs uppercase text-outline">Health Tech</span>
+          </div>
+          <h2 className="font-headline text-3xl font-bold mb-4">EMR Clinic</h2>
+          <p className="text-on-surface-variant mb-6 text-sm leading-relaxed">{tr.emrDesc}</p>
+          <div className="grid grid-cols-2 gap-2 mb-8 flex-grow">
+            {["HIPAA Ready", "GDPR Compliant"].map((badge) => (
+              <div key={badge} className="p-3 bg-surface-container-low rounded-lg text-xs font-semibold text-center">
+                {badge}
+              </div>
+            ))}
+          </div>
+          <Link href="/products/emrclinic" className="flex items-center gap-2 text-primary font-bold group/btn w-fit mt-auto">
+            {tr.detailBtn}
+            <span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
+          </Link>
+        </div>
+
+        {/* Why Integrated Systems */}
+        <div className="lg:col-span-8 bg-primary rounded-xl p-10 text-white relative overflow-hidden">
+          <div className="relative z-10 max-w-lg">
+            <h2 className="font-headline text-4xl font-bold mb-6">{tr.whyTitle}</h2>
+            <p className="text-primary-fixed-dim mb-8 leading-relaxed">{tr.whyDesc}</p>
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <div className="text-3xl font-black mb-1">99.9%</div>
+                <div className="text-xs uppercase font-bold tracking-widest opacity-70">{tr.stat1}</div>
+              </div>
+              <div>
+                <div className="text-3xl font-black mb-1">10x</div>
+                <div className="text-xs uppercase font-bold tracking-widest opacity-70">{tr.stat2}</div>
+              </div>
+            </div>
+          </div>
+          <div className="absolute right-0 bottom-0 opacity-10 translate-x-1/4 translate-y-1/4 pointer-events-none">
+            <span className="material-symbols-outlined text-[300px]" style={{ fontVariationSettings: "'FILL' 1" }}>hub</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Technical Foundations */}
+      <section className="mt-32">
+        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
+          <div className="max-w-2xl">
+            <h2 className="font-headline text-3xl font-bold mb-4">{tr.techTitle}</h2>
+            <p className="text-on-surface-variant">{tr.techSub}</p>
+          </div>
+          <div className="flex gap-4">
+            <div className="px-6 py-3 bg-surface-container-high rounded-full font-semibold text-sm">{tr.badge1}</div>
+            <div className="px-6 py-3 bg-surface-container-high rounded-full font-semibold text-sm">{tr.badge2}</div>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-1">
+          {tr.tech.map((item) => (
+            <div key={item.title} className="bg-surface-container-low p-12 transition-colors hover:bg-surface-container">
+              <span className="material-symbols-outlined text-primary mb-6 text-4xl block">{item.icon}</span>
+              <h3 className="font-headline text-xl font-bold mb-4">{item.title}</h3>
+              <p className="text-sm text-on-surface-variant leading-relaxed">{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

app/products/utms/page.tsx

@@ -0,0 +1,309 @@
+import Image from "next/image";
+import Link from "next/link";
+import utmsProduk from "@/app/utms_produk.png";
+
+export const metadata = {
+  title: "Unified TMS | IPTEK EDC Merchant Onboarding",
+  description:
+    "Deploy your merchant terminals in hours, not days, with the IPTEK Unified Transaction Management System.",
+};
+
+const features = [
+  {
+    icon: "edit_document",
+    title: "Simplified Application",
+    desc: "Intelligent forms that adapt based on business type, reducing friction and incomplete submissions by 60%.",
+  },
+  {
+    icon: "cloud_upload",
+    title: "Document Management",
+    desc: "Cloud-native repository with automated indexing and OCR for rapid extraction of KYB data.",
+  },
+  {
+    icon: "verified_user",
+    title: "Compliance Automation",
+    desc: "Embedded AML/Sanction screening and fraud checks that run instantly in the background.",
+  },
+  {
+    icon: "monitoring",
+    title: "Real-time Tracking",
+    desc: "A transparent dashboard for merchants and banks to view the precise stage of every application.",
+  },
+  {
+    icon: "hub",
+    title: "Integration Hub",
+    desc: "Direct API hooks to leading payment gateways and central banking systems for immediate provisioning.",
+  },
+];
+
+export default function UTMSPage() {
+  return (
+    <div className="pt-4 overflow-x-hidden">
+
+      {/* Hero */}
+      <section className="relative px-6 md:px-12 py-24 overflow-hidden">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="relative z-10">
+            <span className="inline-block px-4 py-1.5 mb-6 text-sm font-bold tracking-widest text-primary uppercase bg-primary/10 rounded-full">
+              EDC Onboarding
+            </span>
+            <h1 className="font-headline text-6xl md:text-7xl font-extrabold text-on-surface leading-tight mb-8" style={{ letterSpacing: "-0.02em" }}>
+              EDC Onboarding,{" "}
+              <br />
+              <span className="text-primary italic">Redefined.</span>
+            </h1>
+            <p className="text-xl text-on-surface-variant max-w-lg mb-10 leading-relaxed">
+              Say goodbye to weeks of paperwork. Deploy your merchant terminals in hours,
+              not days, with the IPTEK Unified Transaction Management System.
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Link
+                href="/contact"
+                className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-4 rounded-lg font-bold text-lg shadow-xl shadow-primary/20 hover:scale-[1.02] transition-transform text-center"
+              >
+                Start Streamlining
+              </Link>
+              <Link
+                href="/contact"
+                className="bg-surface-container-highest text-on-surface px-8 py-4 rounded-lg font-bold text-lg hover:bg-surface-container-high transition-colors text-center"
+              >
+                Request Demo
+              </Link>
+            </div>
+          </div>
+
+          <div className="relative">
+            <div className="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl pointer-events-none" />
+            <div className="relative bg-surface-container-lowest rounded-2xl shadow-2xl overflow-hidden border border-outline-variant/20 rotate-2">
+              <Image
+                src={utmsProduk}
+                alt="Unified TMS"
+                className="w-full h-[500px] object-cover"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-8">
+                <div className="text-white">
+                  <div className="text-3xl font-bold">98% Faster</div>
+                  <div className="text-sm opacity-80 uppercase tracking-widest">Onboarding Speed</div>
+                </div>
+              </div>
+            </div>
+            {/* Floating card */}
+            <div className="absolute -bottom-8 -left-8 bg-surface-container-lowest p-6 rounded-xl shadow-2xl border border-outline-variant/20 max-w-xs -rotate-3">
+              <div className="flex items-center gap-4 mb-4">
+                <span className="material-symbols-outlined text-primary bg-primary/10 p-2 rounded-lg">speed</span>
+                <span className="font-bold text-on-surface">Real-time Approval</span>
+              </div>
+              <div className="h-2 bg-surface-container rounded-full overflow-hidden">
+                <div className="h-full bg-primary w-4/5" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Problem / Solution */}
+      <section className="px-6 md:px-12 py-24 bg-surface-container-low">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-20">
+            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">
+              Complexity is the Enemy.
+            </h2>
+            <p className="text-on-surface-variant max-w-2xl mx-auto text-lg">
+              Traditional merchant onboarding is fragmented, slow, and prone to human
+              error. IPTEK provides the clarity you need.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {/* Problem card */}
+            <div className="md:col-span-1 bg-surface-container-lowest p-10 rounded-xl border border-outline-variant/15">
+              <div className="mb-6 h-12 w-12 bg-error/10 rounded-lg flex items-center justify-center">
+                <span className="material-symbols-outlined text-error">dangerous</span>
+              </div>
+              <h3 className="font-headline text-xl font-bold mb-4">The Complexity Gap</h3>
+              <p className="text-on-surface-variant leading-relaxed mb-6">
+                Siloed document verification and manual data entry create bottlenecks that
+                frustrate merchants and delay revenue.
+              </p>
+              <ul className="space-y-3">
+                {["Manual KYB/KYC loops", "Fragmented email chains", "Unclear status updates"].map((item) => (
+                  <li key={item} className="flex items-center gap-2 text-sm text-on-surface-variant">
+                    <span className="material-symbols-outlined text-xs text-error">close</span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            {/* Solution card */}
+            <div className="md:col-span-2 bg-primary p-10 rounded-xl relative overflow-hidden flex flex-col justify-between">
+              <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
+                <Image
+                  src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5jUuxS4Pmo9fcwVoULcKkDrvHd9FZM664kcB33AUnCC9qgwcc3kYTge6TjK-97n6gihX-GlOfOL5APINdKkapjXIHsfimwkScUJ27QUXawDNwtrruel1Yc7MpMZPrvngEEdjHxRLEEWb9aKNzimMfao9LUEOj7VILBYyvvALkGKSvB0D_PEejW5j4QcxikzXcuZ3izqYJ4Ji3yxEEPHgbp_vQ0mzBLv3q9CgRnuNLgV0pvnbHrdTxsXfuvzwrTOeYMoF4PcP-BUM"
+                  alt="Network"
+                  fill
+                  className="object-cover"
+                  unoptimized
+                />
+              </div>
+              <div className="relative z-10 mb-8">
+                <div className="mb-6 h-12 w-12 bg-white/20 rounded-lg flex items-center justify-center">
+                  <span className="material-symbols-outlined text-white">bolt</span>
+                </div>
+                <h3 className="font-headline text-3xl font-bold text-white mb-4">
+                  Streamlined Unified TMS
+                </h3>
+                <p className="text-white/80 text-xl max-w-lg">
+                  One platform to manage the entire lifecycle of a merchant's EDC
+                  terminal, from application to active transactions.
+                </p>
+              </div>
+              <div className="grid grid-cols-2 gap-8 relative z-10">
+                <div>
+                  <div className="text-4xl font-bold text-white mb-2">40%</div>
+                  <div className="text-white/60 text-sm uppercase tracking-widest">OpEx Reduction</div>
+                </div>
+                <div>
+                  <div className="text-4xl font-bold text-white mb-2">24h</div>
+                  <div className="text-white/60 text-sm uppercase tracking-widest">Average Onboarding</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="px-6 md:px-12 py-32">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
+            <div className="max-w-2xl">
+              <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-6">
+                Integrated Intelligence for Seamless Operations.
+              </h2>
+              <p className="text-on-surface-variant text-lg">
+                Our features aren't just tools — they are the architectural pillars of
+                your merchant acquisition strategy.
+              </p>
+            </div>
+            <Link href="/contact" className="group flex items-center gap-2 text-primary font-bold whitespace-nowrap">
+              Learn about our architecture
+              <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
+            </Link>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((f) => (
+              <div key={f.title} className="group p-8 rounded-xl bg-surface hover:bg-surface-container-lowest transition-all hover:shadow-2xl hover:shadow-blue-900/5 border border-outline-variant/15">
+                <span className="material-symbols-outlined text-3xl text-primary mb-6 block">{f.icon}</span>
+                <h4 className="font-headline text-xl font-bold mb-4">{f.title}</h4>
+                <p className="text-on-surface-variant">{f.desc}</p>
+              </div>
+            ))}
+            {/* Custom modules card */}
+            <div className="group p-8 rounded-xl bg-primary/5 hover:bg-primary/10 transition-all border border-outline-variant/15 flex flex-col justify-center items-center text-center">
+              <div className="p-4 bg-primary rounded-full mb-4">
+                <span className="material-symbols-outlined text-white">add</span>
+              </div>
+              <h4 className="font-headline text-xl font-bold text-primary mb-2">Custom Modules</h4>
+              <p className="text-on-surface-variant">Built for scale. Talk to us about bespoke integrations.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Compliance & Security */}
+      <section className="px-6 md:px-12 py-24 bg-surface-dim/30">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-6">
+                Bank-Grade Security.
+                <br />
+                Regulatory Precision.
+              </h2>
+              <p className="text-on-surface-variant text-lg mb-8 leading-relaxed">
+                IPTEK handles the world's most sensitive financial data. Our Unified TMS
+                is built on a foundation of zero-trust architecture and rigorous
+                compliance protocols.
+              </p>
+              <div className="space-y-6">
+                {[
+                  {
+                    icon: "security",
+                    title: "PCI-DSS Level 1",
+                    desc: "The highest standard in payment security, maintained and audited annually.",
+                  },
+                  {
+                    icon: "lock_person",
+                    title: "AES-256 Encryption",
+                    desc: "End-to-end encryption for all merchant documents and transaction logs.",
+                  },
+                ].map((item) => (
+                  <div key={item.title} className="flex items-start gap-4">
+                    <span
+                      className="material-symbols-outlined text-primary p-2 bg-primary/10 rounded-lg"
+                      style={{ fontVariationSettings: "'FILL' 1" }}
+                    >
+                      {item.icon}
+                    </span>
+                    <div>
+                      <h5 className="font-bold">{item.title}</h5>
+                      <p className="text-sm text-on-surface-variant">{item.desc}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="bg-white/40 border border-white/50 p-2 rounded-2xl shadow-2xl overflow-hidden">
+              <Image
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyw9MpbakjrjM3eRtROhOGgzCfVkd-Sxke5oLoGbVj9EnBHK41QRqeQ6Tq-9NlJk6rl8l2AwFBWu2osowj0IGLqpe4e4MxrtDQjoHPKxImFAFL2WKh07-DQctyEFu8dcf2zJCTAHGe915mmUoOu4d5sQNXHScSGEeoqKLWP9PKsuKWCXLAupLV3AbmrTlCgcp9jQ9VpJHsihDhrVpV3kubJpuurjVo4Cb6wHS5vz3mMx79NPphAA0pYmbpAqlpLvXetdgz2l73A-0"
+                alt="Server security"
+                width={600}
+                height={320}
+                className="w-full h-80 object-cover rounded-xl grayscale opacity-80"
+                unoptimized
+              />
+              <div className="p-8">
+                <div className="flex gap-4">
+                  {[
+                    { icon: "verified", label: "ISO 27001" },
+                    { icon: "gpp_maybe", label: "GDPR Compliant" },
+                  ].map((badge) => (
+                    <div key={badge.label} className="bg-surface-container p-3 rounded-lg flex items-center justify-center gap-2">
+                      <span className="material-symbols-outlined text-on-surface-variant">{badge.icon}</span>
+                      <span className="font-bold text-xs">{badge.label}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="px-6 md:px-12 py-32 text-center">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="font-headline text-5xl font-extrabold mb-8">Ready to Scale?</h2>
+          <p className="text-xl text-on-surface-variant mb-12">
+            Join hundreds of financial institutions modernizing their payment architecture
+            with IPTEK.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
+            <Link
+              href="/contact"
+              className="bg-primary text-white px-10 py-5 rounded-lg font-bold text-xl shadow-2xl shadow-primary/30 hover:-translate-y-1 transition-transform text-center"
+            >
+              Request a Personalized Demo
+            </Link>
+            <Link
+              href="/contact"
+              className="bg-surface-container-highest text-on-surface px-10 py-5 rounded-lg font-bold text-xl text-center hover:bg-surface-container-high transition-colors"
+            >
+              Contact Sales
+            </Link>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  );
+}

app/products/zappcare/page.tsx

@@ -0,0 +1,321 @@
+import Image from "next/image";
+import Link from "next/link";
+import zappcareProduk from "@/app/zappcare_produk.png";
+
+export const metadata = {
+  title: "ZappCare | IPTEK Unified Communication",
+  description:
+    "Transform customer interactions with a custom-engineered WhatsApp Business layer designed for enterprise scale and operational clarity.",
+};
+
+const features = [
+  {
+    icon: "dashboard_customize",
+    title: "User/Admin Panels",
+    desc: "Distinct interfaces for frontline staff and managers to ensure focused productivity and oversight.",
+  },
+  {
+    icon: "smart_toy",
+    title: "Automated Messaging",
+    desc: "Smart triggers and scheduled responses to handle routine queries without human intervention.",
+  },
+  {
+    icon: "groups",
+    title: "Multi-user Support",
+    desc: "One number, infinite agents. Assign chats to specific teams or individual specialists instantly.",
+  },
+  {
+    icon: "query_stats",
+    title: "Analytics Dashboard",
+    desc: "Real-time heatmaps of engagement, response times, and conversion attribution.",
+  },
+  {
+    icon: "api",
+    title: "Deep Integration",
+    desc: "Seamlessly connect with your existing tech stack via our robust enterprise API.",
+  },
+  {
+    icon: "security",
+    title: "End-to-End Governance",
+    desc: "Enterprise-grade security ensuring all communications comply with your industry standards.",
+  },
+];
+
+export default function ZappCarePage() {
+  return (
+    <div className="pt-4">
+
+      {/* Hero */}
+      <section className="relative overflow-hidden bg-surface py-24 md:py-32">
+        <div className="max-w-7xl mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
+          <div className="z-10">
+            <div className="inline-flex items-center gap-2 px-3 py-1 bg-secondary-container text-on-secondary-fixed rounded-full text-xs font-bold tracking-widest uppercase mb-6">
+              <span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>verified</span>
+              Advanced WhatsApp Solutions
+            </div>
+            <h1 className="font-headline text-5xl md:text-7xl font-extrabold text-on-surface leading-tight tracking-tighter mb-8">
+              Elevate Your Business{" "}
+              <span className="text-primary">Conversation</span>
+            </h1>
+            <p className="text-lg md:text-xl text-on-surface-variant leading-relaxed mb-10 max-w-lg">
+              Transform customer interactions with a custom-engineered WhatsApp Business
+              layer designed for enterprise scale and operational clarity.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Link
+                href="/contact"
+                className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-4 rounded-xl font-headline font-bold text-lg shadow-2xl shadow-primary/30 transition-transform hover:-translate-y-1 text-center"
+              >
+                Get Started Now
+              </Link>
+              <Link
+                href="/contact"
+                className="bg-surface-container-high text-on-surface px-8 py-4 rounded-xl font-headline font-bold text-lg hover:bg-surface-container-highest transition-colors text-center"
+              >
+                Request Demo
+              </Link>
+            </div>
+          </div>
+          <div className="relative">
+            <div className="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl pointer-events-none" />
+            <div className="relative rounded-2xl overflow-hidden shadow-2xl border-8 border-surface-container-lowest">
+              <Image
+                src={zappcareProduk}
+                alt="ZappCare Dashboard"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Problem Statement */}
+      <section className="bg-surface-container-low py-24">
+        <div className="max-w-7xl mx-auto px-6 md:px-12">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 items-center">
+            <div className="md:col-span-1">
+              <h2 className="font-headline text-3xl font-bold text-on-surface mb-6">
+                The Fragmentation Crisis
+              </h2>
+              <p className="text-on-surface-variant">
+                Untethered communication leads to lost leads and invisible data.
+              </p>
+            </div>
+            <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-8">
+              <div className="p-8 bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10">
+                <span className="material-symbols-outlined text-error text-4xl mb-4 block">leak_remove</span>
+                <h3 className="font-headline font-bold text-xl mb-2">Communication Silos</h3>
+                <p className="text-on-surface-variant text-sm">
+                  Teams working on personal WhatsApp accounts leave no trail for enterprise oversight.
+                </p>
+              </div>
+              <div className="p-8 bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10">
+                <span className="material-symbols-outlined text-error text-4xl mb-4 block">cloud_off</span>
+                <h3 className="font-headline font-bold text-xl mb-2">Data Blindness</h3>
+                <p className="text-on-surface-variant text-sm">
+                  Vital customer insights disappear once a chat window is closed, never reaching your CRM.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Solution Bento Grid */}
+      <section className="py-24 bg-surface">
+        <div className="max-w-7xl mx-auto px-6 md:px-12">
+          <div className="text-center mb-16">
+            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">
+              ZappCare: The Unified Core
+            </h2>
+            <p className="text-on-surface-variant max-w-2xl mx-auto">
+              We wrap the WhatsApp Business API in a custom-built infrastructure tailored
+              to your organizational hierarchy.
+            </p>
+          </div>
+          <div className="grid grid-cols-12 gap-6 md:h-[600px]">
+            {/* Large card */}
+            <div className="col-span-12 md:col-span-8 bg-primary-container rounded-2xl p-10 flex flex-col justify-end relative overflow-hidden group">
+              <div className="absolute top-0 right-0 p-8 opacity-20 group-hover:scale-110 transition-transform pointer-events-none">
+                <span className="material-symbols-outlined text-[160px] text-on-primary" style={{ fontVariationSettings: "'FILL' 1" }}>hub</span>
+              </div>
+              <div className="relative z-10">
+                <h3 className="font-headline text-3xl font-bold text-on-primary mb-4">
+                  Custom Enterprise Enclosure
+                </h3>
+                <p className="text-on-primary-container max-w-md">
+                  Your WhatsApp Business isn't just an app; it's an integrated platform
+                  governed by your security protocols and administrative needs.
+                </p>
+              </div>
+            </div>
+            {/* Admin card */}
+            <div className="col-span-12 md:col-span-4 bg-secondary-container rounded-2xl p-10 flex flex-col justify-between">
+              <span className="material-symbols-outlined text-4xl text-on-secondary-container block">shield_with_heart</span>
+              <div>
+                <h3 className="font-headline text-2xl font-bold text-on-secondary-container mb-2">
+                  Admin Governance
+                </h3>
+                <p className="text-on-secondary-container/80 text-sm">
+                  Full visibility into team conversations with role-based access controls.
+                </p>
+              </div>
+            </div>
+            {/* CRM card */}
+            <div className="col-span-12 md:col-span-4 bg-surface-container-high rounded-2xl p-10">
+              <h3 className="font-headline text-xl font-bold text-on-surface mb-4">CRM Synergy</h3>
+              <p className="text-on-surface-variant text-sm mb-6">
+                Real-time sync between your messaging and your customer database.
+              </p>
+              <div className="flex gap-2">
+                {["Salesforce", "Hubspot"].map((crm) => (
+                  <span key={crm} className="px-3 py-1 bg-surface-container-lowest rounded-full text-xs font-bold">
+                    {crm}
+                  </span>
+                ))}
+              </div>
+            </div>
+            {/* Analytics visual card */}
+            <div className="col-span-12 md:col-span-8 bg-surface-container-low rounded-2xl overflow-hidden relative min-h-[200px]">
+              <Image
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNQSCjTSYT_VDktiWU4ECxwGCsgpJoRZUu1FwPtj__fIyeyylyDCfCBfAMMFBNe7hvqCNhvVPzlaHAJqoqjtT6liraXmm7u1pp1mTm8-3mrTtWvnzCaaUwJjI5EkmgHZxfTSgh-KOzvaEX7w8WBpYBlgjsCGAevYSxIC8wZEmbOFVJ5CYLnH49e3bcHZ_XJERsNi_SgwoMzfHFnpw8i5g2ExFk1EU3t6Nlieqaf9rVnX4_A7LScgliaPbUuo62G2JdSgMNcgMz2QY"
+                alt="Visual Intelligence"
+                fill
+                className="object-cover"
+                unoptimized
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-on-surface/80 to-transparent p-10 flex items-end">
+                <h3 className="font-headline text-2xl font-bold text-white">Visual Intelligence</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Key Features */}
+      <section className="py-24 bg-surface-container-lowest">
+        <div className="max-w-7xl mx-auto px-6 md:px-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
+            {features.map((f) => (
+              <div key={f.title} className="flex flex-col gap-4">
+                <div className="w-12 h-12 bg-primary/5 rounded-lg flex items-center justify-center text-primary">
+                  <span className="material-symbols-outlined">{f.icon}</span>
+                </div>
+                <h4 className="font-headline text-xl font-bold">{f.title}</h4>
+                <p className="text-on-surface-variant text-sm leading-relaxed">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Use Cases */}
+      <section className="py-24 bg-surface overflow-hidden">
+        <div className="max-w-7xl mx-auto px-6 md:px-12">
+          <div className="mb-20">
+            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-2">Built for Impact</h2>
+            <p className="text-on-surface-variant">Industries where ZappCare makes the difference.</p>
+          </div>
+          <div className="space-y-32">
+            {/* Healthcare */}
+            <div className="flex flex-col md:flex-row items-center gap-16">
+              <div className="w-full md:w-1/2">
+                <div className="relative">
+                  <div className="absolute inset-0 bg-tertiary-container/10 -rotate-3 rounded-2xl" />
+                  <Image
+                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUyFs_J_yTV5ldfA72IITGB-NHhL26YHi1O8LbayA3sgTRpbel9uU3H2buNr2hVpPy9Pn9zzv25lxfMuls19O5HSXrw8mvlHiqByncfRZo10uxw7Titkn8WeRf-vjOl25EfLkOyezQ4BlCNCL8HVRItcWQ3k8Ze1iBgsdh2YtjvmSycGbQrBF52RebQgrpBIgCo3eQEWjYxh8RV3SiPad8OI873_VtADN4WN3BudQrOzQlEmsHCgj_DJMs9LpTDg2ouWDLYrX7fvI"
+                    alt="Healthcare"
+                    width={600}
+                    height={400}
+                    className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
+                    unoptimized
+                  />
+                </div>
+              </div>
+              <div className="w-full md:w-1/2">
+                <span className="text-tertiary font-bold tracking-widest text-xs uppercase mb-4 block">Healthcare</span>
+                <h3 className="font-headline text-3xl font-bold mb-6">Patient Coordination Redefined</h3>
+                <p className="text-on-surface-variant mb-8">
+                  Schedule appointments, share post-op instructions, and manage follow-ups
+                  through a secure, familiar channel that patients actually use.
+                </p>
+                <ul className="space-y-4">
+                  {["80% Reduction in No-shows", "Secure Document Transfer"].map((item) => (
+                    <li key={item} className="flex items-center gap-3 text-on-surface">
+                      <span className="material-symbols-outlined text-tertiary" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+            {/* Retail */}
+            <div className="flex flex-col md:flex-row-reverse items-center gap-16">
+              <div className="w-full md:w-1/2">
+                <div className="relative">
+                  <div className="absolute inset-0 bg-primary/10 rotate-3 rounded-2xl" />
+                  <Image
+                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNyxBykIrbpZ05p8zLcIvQbPv75wjSLssBDMp_zN4EhMKZ4UuQ7YVpcnGntfM16u8KPrEkmFh-a3Y1aRqP7Q8TTf25r7OOlvCOOt4NM3IXwikobkJVHxddsxuNpsz1B7xBlftljvgGMSCD82eO6VzBZkP5TJALi_gJIduQp-v3M_Xklz1oLrY68BJqsr64NOuhB6Qy2l6aiqUAiFt9cLayzGpcZJCGM68BQUltWeREnPUi9u3ggyQyilXJSn_DkGyn7kJWv0MJsQU"
+                    alt="Retail"
+                    width={600}
+                    height={400}
+                    className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
+                    unoptimized
+                  />
+                </div>
+              </div>
+              <div className="w-full md:w-1/2">
+                <span className="text-primary font-bold tracking-widest text-xs uppercase mb-4 block">Retail</span>
+                <h3 className="font-headline text-3xl font-bold mb-6">Personalized Commerce at Scale</h3>
+                <p className="text-on-surface-variant mb-8">
+                  Send personalized offers, handle order inquiries, and provide VIP
+                  concierge service that turns shoppers into lifelong advocates.
+                </p>
+                <ul className="space-y-4">
+                  {["Instant Order Updates", "Direct Checkout Links"].map((item) => (
+                    <li key={item} className="flex items-center gap-3 text-on-surface">
+                      <span className="material-symbols-outlined text-primary" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-24 bg-surface-container-lowest relative overflow-hidden">
+        <div className="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
+          <div className="bg-surface-container-high rounded-[40px] p-12 md:p-24 text-center">
+            <h2 className="font-headline text-4xl md:text-5xl font-black text-on-surface mb-6">
+              Ready to scale your reach?
+            </h2>
+            <p className="text-on-surface-variant text-lg mb-12 max-w-2xl mx-auto">
+              Join the future of enterprise communication. Let's build a solution tailored
+              to your specific workflow.
+            </p>
+            <div className="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
+              <input
+                className="flex-grow rounded-xl border-none bg-surface-container-lowest px-6 py-4 focus:ring-2 focus:ring-primary outline-none"
+                placeholder="Enter your work email"
+                type="email"
+              />
+              <Link
+                href="/contact"
+                className="bg-primary text-on-primary font-bold px-8 py-4 rounded-xl shadow-lg hover:shadow-primary/40 transition-all whitespace-nowrap text-center"
+              >
+                Request Custom Quote
+              </Link>
+            </div>
+            <p className="text-xs text-on-surface-variant mt-6 opacity-60">
+              No credit card required. Free consulting session included.
+            </p>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Link from "next/link";
+import { useLang } from "@/context/LanguageContext";
+import { t } from "@/lib/translations";
+
+export default function Footer() {
+  const { lang } = useLang();
+  const tr = t[lang].footer;
+
+  const footerLinks = [
+    { href: "/privacy", label: tr.privacy },
+    { href: "/terms", label: tr.terms },
+    { href: "/faq", label: tr.faq },
+    { href: "/contact", label: tr.support },
+  ];
+
+  return (
+    <footer className="bg-slate-50 w-full py-12">
+      <div className="max-w-7xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-6">
+        <div className="flex flex-col items-center md:items-start">
+          <span className="text-xl font-bold text-slate-900 mb-2 font-headline">
+            Integrasi Persada Teknologi
+          </span>
+          <p className="text-sm text-slate-500">
+            © {new Date().getFullYear()} Integrasi Persada Teknologi. {tr.rights}
+          </p>
+        </div>
+        <div className="flex gap-8 text-sm text-slate-500">
+          {footerLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="hover:text-blue-500 transition-all cursor-pointer"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import logo from "@/app/logo_iptek.png";
+import { useLang } from "@/context/LanguageContext";
+import { t } from "@/lib/translations";
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { lang, setLang } = useLang();
+  const tr = t[lang].nav;
+
+  const navLinks = [
+    { href: "/", label: tr.home },
+    { href: "/about", label: tr.about },
+    { href: "/products", label: tr.products },
+    { href: "/contact", label: tr.contact },
+  ];
+
+  return (
+    <nav className="fixed top-0 w-full z-50 bg-white/70 backdrop-blur-lg shadow-[0_16px_32px_rgba(0,0,0,0.04)] h-20">
+      <div className="flex justify-between items-center max-w-7xl mx-auto px-6 h-full">
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-3">
+          <Image src={logo} alt="IPTEK Logo" height={36} className="object-contain" />
+          <span className="text-2xl font-black tracking-tighter text-blue-700 font-headline">
+            IPTEK
+          </span>
+        </Link>
+
+        {/* Desktop Nav */}
+        <div className="hidden md:flex items-center gap-8 text-sm font-semibold tracking-tight">
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={
+                pathname === link.href
+                  ? "text-blue-600 border-b-2 border-blue-600 pb-1"
+                  : "text-slate-600 hover:text-blue-500 transition-colors"
+              }
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+
+        {/* Right side: lang switcher + CTA + hamburger */}
+        <div className="flex items-center gap-3">
+          {/* Language switcher */}
+          <button
+            onClick={() => setLang(lang === "id" ? "en" : "id")}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-outline-variant/40 bg-surface-container-low text-sm font-bold text-on-surface hover:bg-surface-container transition-colors select-none"
+            aria-label="Switch language"
+          >
+            <span>{lang === "id" ? "🇮🇩" : "🇬🇧"}</span>
+            <span>{lang.toUpperCase()}</span>
+          </button>
+
+          <Link
+            href="/contact"
+            className="hidden md:block bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-lg text-sm font-bold shadow-lg hover:opacity-80 transition-all duration-300 active:scale-95"
+          >
+            {tr.cta}
+          </Link>
+
+          {/* Mobile Hamburger */}
+          <button
+            className="md:hidden flex flex-col gap-1.5 p-2"
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-label="Toggle menu"
+          >
+            <span
+              className={`block h-0.5 w-6 bg-slate-700 transition-transform duration-300 ${menuOpen ? "rotate-45 translate-y-2" : ""}`}
+            />
+            <span
+              className={`block h-0.5 w-6 bg-slate-700 transition-opacity duration-300 ${menuOpen ? "opacity-0" : ""}`}
+            />
+            <span
+              className={`block h-0.5 w-6 bg-slate-700 transition-transform duration-300 ${menuOpen ? "-rotate-45 -translate-y-2" : ""}`}
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div className="md:hidden bg-white/95 backdrop-blur-lg border-t border-outline-variant px-6 py-4 flex flex-col gap-4">
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              onClick={() => setMenuOpen(false)}
+              className={
+                pathname === link.href
+                  ? "text-blue-600 font-bold"
+                  : "text-slate-600 hover:text-blue-500 transition-colors"
+              }
+            >
+              {link.label}
+            </Link>
+          ))}
+          <Link
+            href="/contact"
+            onClick={() => setMenuOpen(false)}
+            className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-lg text-sm font-bold text-center mt-2"
+          >
+            {tr.cta}
+          </Link>
+        </div>
+      )}
+    </nav>
+  );
+}

context/LanguageContext.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect } from "react";
+
+export type Lang = "id" | "en";
+
+const LanguageContext = createContext<{
+  lang: Lang;
+  setLang: (l: Lang) => void;
+}>({ lang: "id", setLang: () => {} });
+
+export function LanguageProvider({ children }: { children: React.ReactNode }) {
+  const [lang, setLangState] = useState<Lang>("id");
+
+  useEffect(() => {
+    const stored = localStorage.getItem("iptek-lang") as Lang | null;
+    if (stored === "id" || stored === "en") setLangState(stored);
+  }, []);
+
+  const setLang = (l: Lang) => {
+    setLangState(l);
+    localStorage.setItem("iptek-lang", l);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ lang, setLang }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+export const useLang = () => useContext(LanguageContext);

lib/translations.ts

@@ -0,0 +1,258 @@
+export const t = {
+  id: {
+    nav: {
+      home: "Beranda",
+      about: "Tentang",
+      products: "Produk",
+      contact: "Kontak",
+      cta: "Dapatkan Penawaran",
+    },
+    footer: {
+      privacy: "Kebijakan Privasi",
+      terms: "Syarat Layanan",
+      faq: "FAQ",
+      support: "Dukungan",
+      rights: "Hak cipta dilindungi undang-undang.",
+    },
+    home: {
+      heroTitle: "Solusi Teknologi Terintegrasi untuk Bisnis",
+      heroHighlight: "Modern",
+      heroSub: "Kami menghadirkan ekosistem digital yang menghubungkan kompleksitas sistem menjadi alur kerja yang efisien dan berdampak nyata bagi pertumbuhan bisnis Anda.",
+      heroBtn1: "Konsultasi Sekarang",
+      heroBtn2: "Lihat Solusi Kami",
+      aboutTitle: "Membangun Solusi Teknologi yang Relevan dan Berdampak",
+      aboutP1: "Di IPTEK (Integrasi Persada Teknologi), kami percaya bahwa teknologi bukan sekadar alat, melainkan fondasi transformasi. Kami hadir untuk membantu organisasi menavigasi era digital dengan solusi yang tepat guna.",
+      aboutP2: "Melalui pendekatan arsitektural yang presisi, kami mengintegrasikan berbagai platform untuk menciptakan simfoni operasional yang lancar, aman, dan skalabel untuk masa depan.",
+      aboutStat1: "Solusi Diluncurkan",
+      aboutStat2: "Jaminan Uptime",
+      aboutLink: "Pelajari Lebih Lanjut",
+      whyTitle: "Kenapa Memilih IPTEK?",
+      whySub: "Filosofi kami berakar pada lima pilar utama yang memastikan setiap solusi memberikan nilai maksimal.",
+      pillars: [
+        { icon: "verified_user", title: "Integritas", desc: "Kepercayaan adalah mata uang utama kami dalam setiap kemitraan teknologi." },
+        { icon: "public", title: "Universal", desc: "Solusi kami dirancang untuk beradaptasi dengan berbagai skala industri." },
+        { icon: "bolt", title: "Modern", desc: "Selalu menggunakan teknologi terdepan untuk efisiensi maksimal." },
+        { icon: "hub", title: "Terintegrasi", desc: "Menghubungkan data dan proses dalam satu ekosistem yang kohesif." },
+        { icon: "insights", title: "Hasil", desc: "Berorientasi pada dampak bisnis yang terukur dan berkelanjutan." },
+      ],
+      productsTitle: "Produk Unggulan Kami",
+      productsSub: "Inovasi yang siap pakai untuk mengakselerasi transformasi digital Anda.",
+      productsLink: "Lihat Semua Produk",
+      productsBtn: "Lihat Detail",
+      productDescs: [
+        "Solusi WhatsApp Business yang dibungkus dalam aplikasi kustom untuk mengatasi tantangan komunikasi bisnis.",
+        "Sistem Manajemen Transaksi (TMS) yang ramping untuk menyederhanakan proses onboarding merchant yang kompleks.",
+        "Sistem EMR komprehensif untuk mengatasi inefisiensi manajemen klinik dan rekam medis elektronik.",
+      ],
+      sectorsTitle: "Mendorong Transformasi di Berbagai Sektor",
+      sectors: [
+        { icon: "corporate_fare", title: "Korporasi & Enterprise", desc: "Optimalisasi infrastruktur TI berskala besar dengan keamanan tingkat tinggi." },
+        { icon: "storefront", title: "UKM & Startup Modern", desc: "Solusi fleksibel dan efisien biaya untuk mengakselerasi pertumbuhan bisnis baru." },
+        { icon: "account_balance", title: "Sektor Publik", desc: "Digitalisasi layanan masyarakat untuk transparansi dan kemudahan akses." },
+      ],
+      ctaTitle: "Bangun Solusi Digital yang Tepat untuk Bisnis Anda",
+      ctaSub: "Jangan biarkan kompleksitas teknologi menghambat inovasi Anda. Mulailah langkah integrasi hari ini bersama IPTEK.",
+      ctaBtn1: "Jadwalkan Demo Gratis",
+      ctaBtn2: "Hubungi Tim Ahli",
+      contactTitle: "Informasi Kontak",
+    },
+    about: {
+      badge: "Tentang Kami",
+      heroTitle: "Kami Membangun Masa Depan Digital Indonesia",
+      heroP1: "IPTEK (Integrasi Persada Teknologi) adalah perusahaan teknologi yang berfokus pada pengembangan solusi digital terintegrasi untuk bisnis dari berbagai skala dan industri.",
+      heroP2: "Didirikan dengan visi menjadi mitra transformasi digital terpercaya, kami menggabungkan keahlian teknis mendalam dengan pemahaman bisnis yang tajam untuk menciptakan produk yang berdampak nyata.",
+      stats: ["Produk Diluncurkan", "Klien Aktif", "Jaminan Uptime", "Tahun Pengalaman"],
+      visionTitle: "Visi",
+      visionDesc: "Menjadi mitra transformasi digital terpercaya yang mendorong pertumbuhan bisnis Indonesia melalui solusi teknologi inovatif, skalabel, dan berdampak nyata.",
+      missionTitle: "Misi",
+      missionDesc: "Menghadirkan ekosistem digital terintegrasi yang memudahkan operasional bisnis, meningkatkan efisiensi, dan membuka peluang baru bagi setiap klien kami.",
+      valuesTitle: "Nilai-Nilai Kami",
+      valuesSub: "Lima pilar yang menjadi fondasi setiap keputusan dan karya kami.",
+      values: [
+        { icon: "verified_user", title: "Integritas", desc: "Kami membangun kepercayaan melalui transparansi dan konsistensi dalam setiap deliverable." },
+        { icon: "public", title: "Universal", desc: "Solusi kami dirancang untuk beradaptasi lintas industri, skala, dan platform." },
+        { icon: "bolt", title: "Modern", desc: "Kami selalu mengadopsi teknologi terdepan untuk memberikan efisiensi maksimal." },
+        { icon: "hub", title: "Terintegrasi", desc: "Menghubungkan data, tim, dan proses bisnis dalam satu ekosistem kohesif." },
+        { icon: "insights", title: "Berorientasi Hasil", desc: "Setiap keputusan teknis kami selalu dikaitkan dengan dampak bisnis yang nyata." },
+      ],
+      ctaTitle: "Siap Berkolaborasi dengan Kami?",
+      ctaSub: "Mari wujudkan visi digital bisnis Anda bersama tim ahli IPTEK.",
+      ctaBtn: "Hubungi Kami Sekarang",
+    },
+    products: {
+      heroTitle: "Merancang Masa Depan Digital Melalui Sistem Terintegrasi",
+      heroSub: "Jelajahi ekosistem solusi enterprise kami yang dirancang untuk menyelesaikan tantangan komunikasi, mengotomasi kepatuhan, dan mendigitalisasi rekam medis.",
+      zappDesc: "Solusi WhatsApp Business komprehensif yang dirancang untuk menjembatani kesenjangan komunikasi. Kelola segalanya dari panel pengguna dan admin dengan integrasi CRM yang mulus.",
+      utmsDesc: "Sistem Manajemen Transaksi untuk Onboarding Merchant EDC. Otomasi kepatuhan dan lacak aplikasi merchant secara real-time.",
+      emrDesc: "Rekam Medis Elektronik generasi berikutnya. Manajemen pasien yang aman, penjadwalan cerdas, dan sistem penagihan terintegrasi.",
+      detailBtn: "Lihat Detail",
+      whyTitle: "Mengapa Sistem Terintegrasi?",
+      whyDesc: "IPTEK mengubah alat digital yang terisolasi menjadi ekosistem terpadu. Kami menghilangkan gesekan antara silo data dan interaksi manusia.",
+      stat1: "Keandalan Uptime",
+      stat2: "Onboarding Lebih Cepat",
+      techTitle: "Fondasi Teknis",
+      techSub: "Produk kami dibangun di atas fondasi arsitektural yang kokoh untuk memastikan skalabilitas, keamanan, dan integrasi yang mudah.",
+      badge1: "Cloud Skalabel",
+      badge2: "API Aman",
+      tech: [
+        { icon: "shield_person", title: "Privasi Data", desc: "Protokol enkripsi canggih saat penyimpanan dan transit, memastikan kepatuhan terhadap standar perlindungan data global." },
+        { icon: "sync_alt", title: "API Mulus", desc: "API RESTful yang kuat memungkinkan produk kami berkomunikasi dengan mudah dengan sistem ERP atau CRM Anda." },
+        { icon: "monitoring", title: "Analitik Langsung", desc: "Ubah data transaksi dan pola komunikasi menjadi kecerdasan bisnis yang dapat ditindaklanjuti dengan dasbor real-time." },
+      ],
+    },
+    contact: {
+      badge: "Hubungi Kami",
+      heroTitle: "Mari Mulai Percakapan",
+      heroSub: "Ceritakan kebutuhan bisnis Anda kepada kami. Tim ahli IPTEK siap membantu menemukan solusi terbaik.",
+      infoTitle: "Informasi Kontak",
+      infoSub: "Kami siap melayani Anda pada hari kerja, Senin–Jumat pukul 09.00–18.00 WIB.",
+      formTitle: "Kirim Pesan",
+      nameLabel: "Nama Lengkap",
+      emailLabel: "Email",
+      companyLabel: "Perusahaan",
+      phoneLabel: "Nomor WhatsApp",
+      topicLabel: "Topik",
+      topicPlaceholder: "Pilih topik...",
+      topics: ["Demo Produk", "Konsultasi Teknis", "Kemitraan Bisnis", "Dukungan & Support", "Lainnya"],
+      messageLabel: "Pesan",
+      messagePlaceholder: "Ceritakan kebutuhan bisnis Anda...",
+      captchaLabel: "Verifikasi Keamanan",
+      captchaError: "Jawaban tidak tepat. Silakan coba soal baru.",
+      submitBtn: "Kirim Pesan",
+      sendingBtn: "Mengirim...",
+      successTitle: "Pesan Terkirim!",
+      successDesc: "Terima kasih telah menghubungi kami. Tim IPTEK akan merespons dalam 1×24 jam kerja ke",
+      sendAnother: "Kirim pesan lain",
+      companyPlaceholder: "Nama Perusahaan",
+    },
+  },
+  en: {
+    nav: {
+      home: "Home",
+      about: "About",
+      products: "Products",
+      contact: "Contact",
+      cta: "Get a Quote",
+    },
+    footer: {
+      privacy: "Privacy Policy",
+      terms: "Terms of Service",
+      faq: "FAQ",
+      support: "Support",
+      rights: "All rights reserved.",
+    },
+    home: {
+      heroTitle: "Integrated Technology Solutions for",
+      heroHighlight: "Modern Business",
+      heroSub: "We bring a digital ecosystem that connects system complexity into efficient workflows with a real impact on your business growth.",
+      heroBtn1: "Consult Now",
+      heroBtn2: "See Our Solutions",
+      aboutTitle: "Building Technology Solutions That Are Relevant and Impactful",
+      aboutP1: "At IPTEK (Integrasi Persada Teknologi), we believe technology is not just a tool, but the foundation of transformation. We are here to help organizations navigate the digital era with the right solutions.",
+      aboutP2: "Through a precise architectural approach, we integrate various platforms to create a smooth, secure, and scalable operational symphony for the future.",
+      aboutStat1: "Solutions Launched",
+      aboutStat2: "Uptime Guarantee",
+      aboutLink: "Learn More",
+      whyTitle: "Why Choose IPTEK?",
+      whySub: "Our philosophy is rooted in five main pillars that ensure every solution delivers maximum value.",
+      pillars: [
+        { icon: "verified_user", title: "Integrity", desc: "Trust is our primary currency in every technology partnership." },
+        { icon: "public", title: "Universal", desc: "Our solutions are designed to adapt to various industry scales." },
+        { icon: "bolt", title: "Modern", desc: "Always using cutting-edge technology for maximum efficiency." },
+        { icon: "hub", title: "Integrated", desc: "Connecting data and processes in one cohesive ecosystem." },
+        { icon: "insights", title: "Results", desc: "Oriented toward measurable and sustainable business impact." },
+      ],
+      productsTitle: "Our Featured Products",
+      productsSub: "Ready-to-use innovations to accelerate your digital transformation.",
+      productsLink: "View All Products",
+      productsBtn: "View Details",
+      productDescs: [
+        "A custom WhatsApp Business solution designed to overcome business communication challenges.",
+        "A streamlined Transaction Management System (TMS) to simplify complex merchant onboarding processes.",
+        "A comprehensive EMR system to address inefficiencies in clinic management and electronic medical records.",
+      ],
+      sectorsTitle: "Driving Transformation Across Various Sectors",
+      sectors: [
+        { icon: "corporate_fare", title: "Corporations & Enterprise", desc: "Optimize large-scale IT infrastructure with high-level security." },
+        { icon: "storefront", title: "SMEs & Modern Startups", desc: "Flexible and cost-efficient solutions to accelerate new business growth." },
+        { icon: "account_balance", title: "Public Sector", desc: "Digitize public services for transparency and ease of access." },
+      ],
+      ctaTitle: "Build the Right Digital Solution for Your Business",
+      ctaSub: "Don't let technology complexity hinder your innovation. Start your integration journey today with IPTEK.",
+      ctaBtn1: "Schedule a Free Demo",
+      ctaBtn2: "Contact Expert Team",
+      contactTitle: "Contact Information",
+    },
+    about: {
+      badge: "About Us",
+      heroTitle: "We Build Indonesia's Digital Future",
+      heroP1: "IPTEK (Integrasi Persada Teknologi) is a technology company focused on developing integrated digital solutions for businesses of all scales and industries.",
+      heroP2: "Founded with a vision to become a trusted digital transformation partner, we combine deep technical expertise with sharp business understanding to create products with real impact.",
+      stats: ["Products Launched", "Active Clients", "Uptime Guarantee", "Years of Experience"],
+      visionTitle: "Vision",
+      visionDesc: "To become a trusted digital transformation partner that drives Indonesian business growth through innovative, scalable, and impactful technology solutions.",
+      missionTitle: "Mission",
+      missionDesc: "To deliver integrated digital ecosystems that simplify business operations, improve efficiency, and open new opportunities for every client.",
+      valuesTitle: "Our Values",
+      valuesSub: "Five pillars that form the foundation of every decision and work we do.",
+      values: [
+        { icon: "verified_user", title: "Integrity", desc: "We build trust through transparency and consistency in every deliverable." },
+        { icon: "public", title: "Universal", desc: "Our solutions are designed to adapt across industries, scales, and platforms." },
+        { icon: "bolt", title: "Modern", desc: "We always adopt cutting-edge technology to deliver maximum efficiency." },
+        { icon: "hub", title: "Integrated", desc: "Connecting data, teams, and business processes in one cohesive ecosystem." },
+        { icon: "insights", title: "Results-Oriented", desc: "Every technical decision we make is always tied to real business impact." },
+      ],
+      ctaTitle: "Ready to Collaborate with Us?",
+      ctaSub: "Let's bring your business digital vision to life with the IPTEK expert team.",
+      ctaBtn: "Contact Us Now",
+    },
+    products: {
+      heroTitle: "Architecting Digital Future Through Integrated Systems",
+      heroSub: "Explore our ecosystem of precision-engineered enterprise solutions designed to solve communication challenges, automate compliance, and digitalize medical records.",
+      zappDesc: "A comprehensive WhatsApp Business Solution designed to bridge communication gaps. Manage everything from user and admin panels with seamless CRM integration.",
+      utmsDesc: "Transaction Management System for EDC Merchant Onboarding. Automate compliance and track merchant applications in real-time.",
+      emrDesc: "Next-gen Electronic Medical Records. Secure patient management, intelligent scheduling, and integrated billing systems.",
+      detailBtn: "View Details",
+      whyTitle: "Why Integrated Systems?",
+      whyDesc: "IPTEK transforms isolated digital tools into a unified crystalline ecosystem. We remove the friction between data silos and human interaction.",
+      stat1: "Uptime Reliability",
+      stat2: "Faster Onboarding",
+      techTitle: "Technical Foundations",
+      techSub: "Our products are built on a rock-solid architectural foundation that ensures scalability, security, and effortless integration with your existing stack.",
+      badge1: "Scalable Cloud",
+      badge2: "Secure APIs",
+      tech: [
+        { icon: "shield_person", title: "Data Privacy", desc: "Advanced encryption protocols at rest and in transit, ensuring compliance with global data protection standards." },
+        { icon: "sync_alt", title: "Seamless API", desc: "Robust RESTful APIs allow our products to communicate effortlessly with your existing ERP or CRM systems." },
+        { icon: "monitoring", title: "Live Analytics", desc: "Turn transaction data and communication patterns into actionable business intelligence with real-time dashboards." },
+      ],
+    },
+    contact: {
+      badge: "Contact Us",
+      heroTitle: "Let's Start a Conversation",
+      heroSub: "Tell us about your business needs. The IPTEK expert team is ready to help find the best solution.",
+      infoTitle: "Contact Information",
+      infoSub: "We are available on working days, Monday–Friday 09:00–18:00 WIB.",
+      formTitle: "Send a Message",
+      nameLabel: "Full Name",
+      emailLabel: "Email",
+      companyLabel: "Company",
+      phoneLabel: "WhatsApp Number",
+      topicLabel: "Topic",
+      topicPlaceholder: "Select a topic...",
+      topics: ["Product Demo", "Technical Consultation", "Business Partnership", "Support & Assistance", "Other"],
+      messageLabel: "Message",
+      messagePlaceholder: "Tell us about your business needs...",
+      captchaLabel: "Security Verification",
+      captchaError: "Incorrect answer. Please try a new question.",
+      submitBtn: "Send Message",
+      sendingBtn: "Sending...",
+      successTitle: "Message Sent!",
+      successDesc: "Thank you for reaching out. The IPTEK team will respond within 1×24 business hours to",
+      sendAnother: "Send another message",
+      companyPlaceholder: "Company Name",
+    },
+  },
+} as const;
+
+export type Lang = "id" | "en";

next.config.ts

@@ -1,7 +1,14 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -9,12 +9,14 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "16.2.4",
+        "nodemailer": "^8.0.5",
         "react": "19.2.4",
         "react-dom": "19.2.4"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
+        "@types/nodemailer": "^8.0.0",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
@@ -1641,6 +1643,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-8.0.0.tgz",
+      "integrity": "sha512-fyf8jWULsCo0d0BuoQ75i6IeoHs47qcqxWc7yUdUcV0pOZGjUTTOvwdG1PRXUDqN/8A64yQdQdnA2pZgcdi+cA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -5188,6 +5200,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nodemailer": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.5.tgz",
+      "integrity": "sha512-0PF8Yb1yZuQfQbq+5/pZJrtF6WQcjTd5/S4JOHs9PGFxuTqoB/icwuB44pOdURHJbRKX1PPoJZtY7R4VUoCC8w==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "next": "16.2.4",
+    "nodemailer": "^8.0.5",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@types/nodemailer": "^8.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",