wirabasalamah/iptek-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: build IPTEK company website with full bilingual support

Browse Source 
- 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
2026-04-21 12:25:03 +07:00
parent c96a117764
commit c955792497
25 changed files with 2671 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
app/about/page.tsx Normal file
View File

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