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>
2026-04-21 12:25:03 +07:00
parent c96a117764
commit c955792497
25 changed files with 2671 additions and 85 deletions
--- a/components/Navbar.tsx
+++ b/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>
+  );
+}