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>
This commit is contained in:
Wira Basalamah
136
app/contact/page.tsx
Normal file
136
app/contact/page.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user