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

309
app/products/utms/page.tsx Normal file
View File

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