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