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
303
app/products/emrclinic/page.tsx
Normal file
303
app/products/emrclinic/page.tsx
Normal file
@ -0,0 +1,303 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import emrProduk from "@/app/emr_produk.png";
|
||||
|
||||
export const metadata = {
|
||||
title: "EMR Clinic | IPTEK - Precision Medical Integration",
|
||||
description:
|
||||
"EMR Clinic integrates clinical precision with operational excellence, transforming patient care into a seamless digital journey.",
|
||||
};
|
||||
|
||||
const specialties = [
|
||||
{
|
||||
icon: "medical_services",
|
||||
title: "General Practice",
|
||||
desc: "Comprehensive tools for primary care providers including family health history and chronic care tracking.",
|
||||
},
|
||||
{
|
||||
icon: "dentistry",
|
||||
title: "Dental Care",
|
||||
desc: "Charting, imaging integration, and treatment planning specifically for dental practitioners.",
|
||||
},
|
||||
{
|
||||
icon: "psychology",
|
||||
title: "Mental Health",
|
||||
desc: "Highly private intake forms, session notes, and specialized telemedicine tools for therapists.",
|
||||
},
|
||||
{
|
||||
icon: "ophthalmology",
|
||||
title: "Ophthalmology",
|
||||
desc: "Integrated diagnostic imaging and vision-specific patient records for eyecare clinics.",
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
num: "01",
|
||||
color: "bg-primary",
|
||||
title: "Discovery & Migration",
|
||||
desc: "We audit your existing data and orchestrate a secure migration to the IPTEK cloud.",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
color: "bg-primary-container",
|
||||
title: "Workflow Tailoring",
|
||||
desc: "Our architects configure the EMR system to match your clinic's unique operational DNA.",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
color: "bg-secondary",
|
||||
title: "Staff Calibration",
|
||||
desc: "Hands-on training and simulation sessions to ensure 100% team readiness.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function EMRClinicPage() {
|
||||
return (
|
||||
<div className="pt-4 overflow-x-hidden">
|
||||
|
||||
{/* Hero */}
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 py-32 flex flex-col items-start min-h-[90vh] justify-center">
|
||||
<div className="z-10 max-w-4xl">
|
||||
<span className="bg-primary-container text-on-primary-container px-4 py-1.5 rounded-full text-xs font-bold tracking-widest mb-6 inline-block uppercase">
|
||||
Enterprise Medical Solutions
|
||||
</span>
|
||||
<h1 className="font-headline font-extrabold text-7xl md:text-8xl text-on-surface leading-[1.05] tracking-tighter mb-8">
|
||||
The Future of{" "}
|
||||
<span className="text-primary italic">Clinic</span> Management.
|
||||
</h1>
|
||||
<p className="text-xl text-on-surface-variant max-w-2xl leading-relaxed mb-10">
|
||||
Precision engineering for modern healthcare. EMR Clinic integrates clinical
|
||||
precision with operational excellence, transforming patient care into a
|
||||
seamless digital journey.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-primary text-white px-8 py-4 rounded-xl font-bold flex items-center gap-2 group"
|
||||
>
|
||||
Get Started Today
|
||||
<span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-surface-container-high text-on-surface px-8 py-4 rounded-xl font-bold border border-outline-variant/20"
|
||||
>
|
||||
View Product Tour
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Asymmetric background image */}
|
||||
<div className="absolute top-1/2 -right-1/4 -translate-y-1/2 w-3/4 h-full hidden lg:block opacity-40 pointer-events-none">
|
||||
<div className="relative w-full h-full">
|
||||
<div className="absolute inset-0 bg-gradient-to-l from-primary-fixed-dim to-transparent rounded-full blur-[120px]" />
|
||||
<Image
|
||||
src={emrProduk}
|
||||
alt="EMR Clinic"
|
||||
fill
|
||||
className="object-cover rounded-3xl mix-blend-overlay"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Problem & Solution */}
|
||||
<section className="bg-surface-container-low">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 py-32 grid md:grid-cols-2 gap-24 items-center">
|
||||
<div className="space-y-8">
|
||||
<h2 className="font-headline font-bold text-4xl tracking-tight">
|
||||
Breaking the Cycle of Manual Inefficiency.
|
||||
</h2>
|
||||
<p className="text-lg text-on-surface-variant leading-relaxed">
|
||||
Traditional clinic management is plagued by fragmented data, manual entry
|
||||
errors, and disconnected workflows. Inefficient patient processing doesn't
|
||||
just waste time — it impacts the quality of care.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: "warning",
|
||||
title: "Data Fragmentation",
|
||||
desc: "Patient records scattered across paper and legacy digital silos.",
|
||||
},
|
||||
{
|
||||
icon: "timer_off",
|
||||
title: "Resource Leakage",
|
||||
desc: "Overlapping appointments and manual billing creating financial gaps.",
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.title} className="flex items-start gap-4 p-6 bg-surface-container-lowest rounded-2xl shadow-xl shadow-slate-900/5">
|
||||
<div className="p-3 bg-error-container text-error rounded-xl shrink-0">
|
||||
<span className="material-symbols-outlined">{item.icon}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-on-surface">{item.title}</h4>
|
||||
<p className="text-sm text-on-surface-variant">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 bg-primary/10 rounded-[2rem] blur-3xl pointer-events-none" />
|
||||
<div className="relative bg-surface-container-lowest p-12 rounded-[2rem] shadow-2xl">
|
||||
<div className="mb-8">
|
||||
<span className="text-primary font-bold tracking-widest uppercase text-xs">The IPTEK Solution</span>
|
||||
<h3 className="font-headline font-bold text-3xl mt-2">Comprehensive EMR Integration.</h3>
|
||||
</div>
|
||||
<p className="text-on-surface-variant mb-8">
|
||||
We replace chaos with a crystalline architecture of information. One
|
||||
platform to unify every medical touchpoint.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{["Real-time Data Synchronization", "Automated Workflow Orchestration", "Predictive Patient Analytics"].map((item) => (
|
||||
<li key={item} className="flex items-center gap-3 font-semibold text-primary">
|
||||
<span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Bento Grid */}
|
||||
<section>
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 py-32">
|
||||
<div className="flex flex-col items-center text-center mb-20">
|
||||
<h2 className="font-headline font-bold text-5xl tracking-tighter mb-4">Core Capabilities.</h2>
|
||||
<div className="w-24 h-1 bg-primary rounded-full" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:h-[800px]">
|
||||
{/* Patient Records */}
|
||||
<div className="md:col-span-8 bg-surface-container-low p-8 rounded-[2.5rem] flex flex-col justify-between group hover:bg-surface-container transition-all duration-300">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 className="font-headline font-bold text-3xl mb-3">Unified Patient Records</h3>
|
||||
<p className="text-on-surface-variant max-w-md">
|
||||
360-degree view of patient history, diagnostics, and longitudinal health
|
||||
data in a single encrypted dashboard.
|
||||
</p>
|
||||
</div>
|
||||
<span className="material-symbols-outlined text-4xl text-primary p-4 bg-white rounded-full shrink-0">folder_shared</span>
|
||||
</div>
|
||||
<Image
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-QZysw01XkY4jAb1fHK9rbcmq_HfqrKnUN5jX0AVw6m8aAuzNAVCpZ7zTCYUVTyPocXlL5-nYr1CpXCmlNJGNezygXdFHojd4R3Lv-9_omSdtlQT2WlEa7smizFdueztHUSUqPOSYFihjppudE2HxhZvm-khHl3TSswy60zfdxF8OJamxnSGmiS9Ut-9JwS9v2m3i2G0T43RT_QBNvBPIx4SozSWzKHTPRkVhPxFytz5GfUQg52X1pTDaytSO14s97apsaqq7OZ0"
|
||||
alt="Patient Records"
|
||||
width={800}
|
||||
height={192}
|
||||
className="mt-8 h-48 w-full object-cover rounded-2xl grayscale group-hover:grayscale-0 transition-all"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
{/* Smart Scheduling */}
|
||||
<div className="md:col-span-4 bg-primary p-8 rounded-[2.5rem] text-on-primary flex flex-col justify-between">
|
||||
<span className="material-symbols-outlined text-5xl">event_available</span>
|
||||
<div>
|
||||
<h3 className="font-headline font-bold text-2xl mb-2">Smart Scheduling</h3>
|
||||
<p className="opacity-80 text-sm">
|
||||
AI-driven appointment optimization to reduce wait times and maximize clinical efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Billing */}
|
||||
<div className="md:col-span-4 bg-surface-container-lowest p-8 rounded-[2.5rem] border border-outline-variant/10 shadow-lg flex flex-col justify-between">
|
||||
<div className="p-4 bg-secondary-container/30 w-fit rounded-2xl mb-6">
|
||||
<span className="material-symbols-outlined text-primary">receipt_long</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-headline font-bold text-2xl mb-2">Automated Billing</h3>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Seamless invoicing and insurance integration to accelerate revenue cycles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Remote Care */}
|
||||
<div className="md:col-span-5 bg-surface-container-low p-8 rounded-[2.5rem] flex flex-col justify-between relative overflow-hidden">
|
||||
<div>
|
||||
<h3 className="font-headline font-bold text-2xl mb-2">Remote Care Hub</h3>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Integrated telemedicine and prescription management for modern, flexible healthcare delivery.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4 mt-8">
|
||||
{["TELEMEDICINE", "LAB INTEGRATION"].map((tag) => (
|
||||
<span key={tag} className="bg-white/80 px-4 py-2 rounded-full text-xs font-bold">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Security */}
|
||||
<div className="md:col-span-3 bg-secondary p-8 rounded-[2.5rem] text-on-secondary flex flex-col items-center justify-center text-center">
|
||||
<span className="material-symbols-outlined text-6xl mb-4" style={{ fontVariationSettings: "'FILL' 1" }}>security</span>
|
||||
<h3 className="font-headline font-bold text-xl">HIPAA & GDPR</h3>
|
||||
<p className="text-xs opacity-70 mt-2">Military-grade encryption for total data integrity.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Specialty Support */}
|
||||
<section className="py-32">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<h2 className="font-headline font-bold text-4xl mb-12">One System. Every Specialty.</h2>
|
||||
<div className="flex gap-8 overflow-x-auto pb-12 -mr-6 md:-mr-12" style={{ scrollbarWidth: "none" }}>
|
||||
{specialties.map((s) => (
|
||||
<div key={s.title} className="min-w-[320px] bg-white p-10 rounded-[2rem] shadow-xl shadow-slate-900/5 border border-outline-variant/5">
|
||||
<span className="material-symbols-outlined text-4xl text-primary mb-6 block">{s.icon}</span>
|
||||
<h4 className="font-bold text-2xl mb-2">{s.title}</h4>
|
||||
<p className="text-on-surface-variant text-sm">{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Implementation Process */}
|
||||
<section className="bg-on-surface text-surface">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="font-headline font-bold text-3xl leading-tight mb-4">Rapid, Guided Implementation.</h2>
|
||||
<p className="text-surface-variant leading-relaxed mb-8">Our deployment architecture is designed for zero-downtime integration. We don't just provide software; we manage the transition.</p>
|
||||
<Link href="/contact" className="flex items-center gap-2 text-primary font-bold group w-fit">
|
||||
Read the Onboarding Whitepaper
|
||||
<span className="material-symbols-outlined transition-transform group-hover:translate-x-2">arrow_right_alt</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="space-y-8 relative">
|
||||
<div className="absolute left-5 top-3 bottom-3 w-px bg-surface-variant/20" />
|
||||
{steps.map((step) => (
|
||||
<div key={step.num} className="relative pl-14">
|
||||
<div className={`absolute left-0 top-0 w-10 h-10 ${step.color} rounded-full flex items-center justify-center font-bold text-white text-sm z-10`}>{step.num}</div>
|
||||
<h4 className="font-bold text-base mb-1">{step.title}</h4>
|
||||
<p className="text-surface-variant text-sm">{step.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section>
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
|
||||
<div className="bg-primary-container rounded-2xl p-10 md:p-14 text-center text-on-primary-container relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary via-primary-container to-blue-400 opacity-20 pointer-events-none" />
|
||||
<div className="relative z-10">
|
||||
<h2 className="font-headline font-extrabold text-4xl tracking-tighter mb-4">Ready to evolve your clinic?</h2>
|
||||
<p className="max-w-xl mx-auto mb-8 opacity-90">Join 500+ clinics worldwide who have unified their operations with IPTEK EMR Clinic.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Link href="/contact" className="bg-white text-primary px-8 py-3 rounded-xl font-black transition-transform hover:scale-105 text-center">Book a Live Demo</Link>
|
||||
<Link href="/contact" className="bg-primary/20 border border-white/20 text-on-primary-container px-8 py-3 rounded-xl font-black transition-transform hover:scale-105 text-center">Speak to an Architect</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user