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
309
app/products/utms/page.tsx
Normal file
309
app/products/utms/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user