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
110
app/about/page.tsx
Normal file
110
app/about/page.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
67
app/actions/sendContact.ts
Normal file
67
app/actions/sendContact.ts
Normal file
@ -0,0 +1,67 @@
|
||||
"use server";
|
||||
|
||||
import nodemailer from "nodemailer";
|
||||
|
||||
export type ContactPayload = {
|
||||
name: string;
|
||||
email: string;
|
||||
company: string;
|
||||
phone: string;
|
||||
topic: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type SendResult = { ok: true } | { ok: false; error: string };
|
||||
|
||||
export async function sendContactEmail(data: ContactPayload): Promise<SendResult> {
|
||||
const { SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS } = process.env;
|
||||
|
||||
if (!SMTP_HOST || !SMTP_USER || !SMTP_PASS) {
|
||||
return { ok: false, error: "Konfigurasi email server belum diatur." };
|
||||
}
|
||||
|
||||
const transporter = nodemailer.createTransport({
|
||||
host: SMTP_HOST,
|
||||
port: Number(SMTP_PORT ?? 587),
|
||||
secure: Number(SMTP_PORT) === 465,
|
||||
auth: { user: SMTP_USER, pass: SMTP_PASS },
|
||||
});
|
||||
|
||||
const html = `
|
||||
<div style="font-family: Inter, sans-serif; max-width: 600px; margin: 0 auto; color: #191c1e;">
|
||||
<div style="background: linear-gradient(135deg, #004cca, #0062ff); padding: 32px; border-radius: 12px 12px 0 0;">
|
||||
<h1 style="color: white; margin: 0; font-size: 24px;">Pesan Baru dari Website IPTEK</h1>
|
||||
</div>
|
||||
<div style="background: #f7f9fb; padding: 32px; border-radius: 0 0 12px 12px; border: 1px solid #e0e3e5;">
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<tr><td style="padding: 8px 0; color: #737687; width: 140px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Nama</td><td style="padding: 8px 0; font-weight: 500;">${data.name}</td></tr>
|
||||
<tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Email</td><td style="padding: 8px 0;"><a href="mailto:${data.email}" style="color: #004cca;">${data.email}</a></td></tr>
|
||||
<tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Perusahaan</td><td style="padding: 8px 0;">${data.company || "-"}</td></tr>
|
||||
<tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">WhatsApp</td><td style="padding: 8px 0;">${data.phone || "-"}</td></tr>
|
||||
<tr><td style="padding: 8px 0; color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Topik</td><td style="padding: 8px 0;"><span style="background: #dbe1ff; color: #004cca; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600;">${data.topic}</span></td></tr>
|
||||
</table>
|
||||
<div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid #e0e3e5;">
|
||||
<p style="color: #737687; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px;">Pesan</p>
|
||||
<p style="margin: 0; line-height: 1.7; white-space: pre-wrap;">${data.message}</p>
|
||||
</div>
|
||||
<div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #e0e3e5; font-size: 12px; color: #737687;">
|
||||
Dikirim pada ${new Date().toLocaleString("id-ID", { timeZone: "Asia/Jakarta", dateStyle: "long", timeStyle: "short" })} WIB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
await transporter.sendMail({
|
||||
from: `"IPTEK Website" <${SMTP_USER}>`,
|
||||
to: "support@iptek.co",
|
||||
replyTo: data.email,
|
||||
subject: `[${data.topic}] Pesan dari ${data.name} – IPTEK Website`,
|
||||
html,
|
||||
});
|
||||
return { ok: true };
|
||||
} catch (err) {
|
||||
console.error("Email send error:", err);
|
||||
return { ok: false, error: "Gagal mengirim pesan. Silakan coba lagi atau hubungi kami langsung." };
|
||||
}
|
||||
}
|
||||
277
app/contact/ContactForm.tsx
Normal file
277
app/contact/ContactForm.tsx
Normal file
@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { sendContactEmail, type ContactPayload } from "@/app/actions/sendContact";
|
||||
import { useLang } from "@/context/LanguageContext";
|
||||
import { t } from "@/lib/translations";
|
||||
|
||||
function generateCaptcha() {
|
||||
const a = Math.floor(Math.random() * 9) + 1;
|
||||
const b = Math.floor(Math.random() * 9) + 1;
|
||||
return { a, b, answer: a + b };
|
||||
}
|
||||
|
||||
const inputClass =
|
||||
"w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all text-on-surface placeholder:text-on-surface-variant/50";
|
||||
|
||||
export default function ContactForm() {
|
||||
const { lang } = useLang();
|
||||
const tr = t[lang].contact;
|
||||
|
||||
const [formData, setFormData] = useState<Omit<ContactPayload, never>>({
|
||||
name: "",
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
topic: "",
|
||||
message: "",
|
||||
});
|
||||
const [captcha, setCaptcha] = useState({ a: 0, b: 0, answer: 0 });
|
||||
const [captchaInput, setCaptchaInput] = useState("");
|
||||
const [captchaError, setCaptchaError] = useState(false);
|
||||
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
|
||||
const refreshCaptcha = useCallback(() => {
|
||||
setCaptcha(generateCaptcha());
|
||||
setCaptchaInput("");
|
||||
setCaptchaError(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
refreshCaptcha();
|
||||
}, [refreshCaptcha]);
|
||||
|
||||
function handleChange(
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||
) {
|
||||
setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
if (parseInt(captchaInput, 10) !== captcha.answer) {
|
||||
setCaptchaError(true);
|
||||
refreshCaptcha();
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("loading");
|
||||
const result = await sendContactEmail(formData);
|
||||
|
||||
if (result.ok) {
|
||||
setStatus("success");
|
||||
} else {
|
||||
setStatus("error");
|
||||
setErrorMsg(result.error);
|
||||
refreshCaptcha();
|
||||
}
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
setFormData({ name: "", email: "", company: "", phone: "", topic: "", message: "" });
|
||||
setStatus("idle");
|
||||
setErrorMsg("");
|
||||
refreshCaptcha();
|
||||
}
|
||||
|
||||
if (status === "success") {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center py-16">
|
||||
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6">
|
||||
<span
|
||||
className="material-symbols-outlined text-green-600 text-4xl"
|
||||
style={{ fontVariationSettings: "'FILL' 1" }}
|
||||
>
|
||||
check_circle
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-headline text-2xl font-bold text-on-surface mb-3">{tr.successTitle}</h3>
|
||||
<p className="text-on-surface-variant max-w-sm">
|
||||
{tr.successDesc}{" "}
|
||||
<strong>{formData.email}</strong>.
|
||||
</p>
|
||||
<button onClick={handleReset} className="mt-8 text-primary font-bold hover:underline">
|
||||
{tr.sendAnother}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className="font-headline text-2xl font-bold text-on-surface mb-8">{tr.formTitle}</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6" noValidate>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-on-surface mb-2">
|
||||
{tr.nameLabel} <span className="text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="John Doe"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-on-surface mb-2">
|
||||
{tr.emailLabel} <span className="text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="john@company.com"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-on-surface mb-2">{tr.companyLabel}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
placeholder={tr.companyPlaceholder}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-on-surface mb-2">
|
||||
{tr.phoneLabel}
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="+62 812-xxxx-xxxx"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-on-surface mb-2">
|
||||
{tr.topicLabel} <span className="text-error">*</span>
|
||||
</label>
|
||||
<select
|
||||
name="topic"
|
||||
required
|
||||
value={formData.topic}
|
||||
onChange={handleChange}
|
||||
className={inputClass}
|
||||
>
|
||||
<option value="">{tr.topicPlaceholder}</option>
|
||||
{tr.topics.map((topic) => (
|
||||
<option key={topic} value={topic}>
|
||||
{topic}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-on-surface mb-2">
|
||||
{tr.messageLabel} <span className="text-error">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
name="message"
|
||||
required
|
||||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder={tr.messagePlaceholder}
|
||||
className={`${inputClass} resize-none`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CAPTCHA */}
|
||||
<div className="bg-surface-container-low border border-outline-variant rounded-xl p-5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span
|
||||
className="material-symbols-outlined text-primary"
|
||||
style={{ fontVariationSettings: "'FILL' 1" }}
|
||||
>
|
||||
security
|
||||
</span>
|
||||
<p className="text-sm font-semibold text-on-surface">{tr.captchaLabel}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-primary/10 text-primary font-black text-2xl font-headline px-4 py-2 rounded-lg select-none tracking-widest">
|
||||
{captcha.a} + {captcha.b}
|
||||
</div>
|
||||
<span className="text-on-surface-variant font-bold text-xl">=</span>
|
||||
<input
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
value={captchaInput}
|
||||
onChange={(e) => {
|
||||
setCaptchaInput(e.target.value);
|
||||
setCaptchaError(false);
|
||||
}}
|
||||
placeholder="?"
|
||||
required
|
||||
className={`w-20 px-3 py-2 rounded-lg border text-center font-bold text-lg focus:outline-none focus:ring-2 transition-all ${
|
||||
captchaError
|
||||
? "border-error bg-error-container/30 text-error focus:ring-error/20"
|
||||
: "border-outline-variant bg-surface focus:border-primary focus:ring-primary/20 text-on-surface"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={refreshCaptcha}
|
||||
className="ml-auto text-on-surface-variant hover:text-primary transition-colors"
|
||||
title={lang === "id" ? "Ganti soal" : "New question"}
|
||||
>
|
||||
<span className="material-symbols-outlined">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
{captchaError && (
|
||||
<p className="text-error text-sm mt-2 flex items-center gap-1">
|
||||
<span className="material-symbols-outlined text-base" style={{ fontVariationSettings: "'FILL' 1" }}>error</span>
|
||||
{tr.captchaError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{status === "error" && (
|
||||
<div className="bg-error-container text-on-error-container px-4 py-3 rounded-lg text-sm flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-base shrink-0" style={{ fontVariationSettings: "'FILL' 1" }}>error</span>
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === "loading"}
|
||||
className="w-full bg-gradient-to-br from-primary to-primary-container text-on-primary py-4 rounded-lg font-bold text-base shadow-lg hover:opacity-90 transition-all active:scale-[0.99] disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{status === "loading" ? (
|
||||
<>
|
||||
<span className="material-symbols-outlined animate-spin text-base">progress_activity</span>
|
||||
{tr.sendingBtn}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="material-symbols-outlined text-base">send</span>
|
||||
{tr.submitBtn}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
BIN
app/emr_produk.png
Normal file
BIN
app/emr_produk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
app/favicon.ico
BIN
app/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 15 KiB |
103
app/globals.css
103
app/globals.css
@ -1,26 +1,97 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--primary: #004cca;
|
||||
--primary-container: #0062ff;
|
||||
--on-primary: #ffffff;
|
||||
--on-primary-fixed: #00174b;
|
||||
--primary-fixed: #dbe1ff;
|
||||
--primary-fixed-dim: #b4c5ff;
|
||||
--inverse-primary: #b4c5ff;
|
||||
|
||||
--secondary: #495f84;
|
||||
--on-secondary: #ffffff;
|
||||
--secondary-container: #bcd2fe;
|
||||
--on-secondary-container: #445a7f;
|
||||
|
||||
--tertiary: #005f75;
|
||||
--on-tertiary: #ffffff;
|
||||
--tertiary-container: #007995;
|
||||
--on-tertiary-container: #e3f6ff;
|
||||
|
||||
--surface: #f7f9fb;
|
||||
--surface-dim: #d8dadc;
|
||||
--surface-bright: #f7f9fb;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-container-low: #f2f4f6;
|
||||
--surface-container: #eceef0;
|
||||
--surface-container-high: #e6e8ea;
|
||||
--surface-container-highest: #e0e3e5;
|
||||
--on-surface: #191c1e;
|
||||
--on-surface-variant: #424656;
|
||||
|
||||
--outline: #737687;
|
||||
--outline-variant: #c2c6d9;
|
||||
|
||||
--inverse-surface: #2d3133;
|
||||
--inverse-on-surface: #eff1f3;
|
||||
|
||||
--error: #ba1a1a;
|
||||
--on-error: #ffffff;
|
||||
--error-container: #ffdad6;
|
||||
|
||||
--background: #f7f9fb;
|
||||
--on-background: #191c1e;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-container: var(--primary-container);
|
||||
--color-on-primary: var(--on-primary);
|
||||
--color-on-primary-fixed: var(--on-primary-fixed);
|
||||
--color-primary-fixed: var(--primary-fixed);
|
||||
--color-primary-fixed-dim: var(--primary-fixed-dim);
|
||||
--color-inverse-primary: var(--inverse-primary);
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
--color-on-secondary: var(--on-secondary);
|
||||
--color-secondary-container: var(--secondary-container);
|
||||
--color-on-secondary-container: var(--on-secondary-container);
|
||||
|
||||
--color-tertiary: var(--tertiary);
|
||||
--color-on-tertiary: var(--on-tertiary);
|
||||
--color-tertiary-container: var(--tertiary-container);
|
||||
--color-on-tertiary-container: var(--on-tertiary-container);
|
||||
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-dim: var(--surface-dim);
|
||||
--color-surface-bright: var(--surface-bright);
|
||||
--color-surface-container-lowest: var(--surface-container-lowest);
|
||||
--color-surface-container-low: var(--surface-container-low);
|
||||
--color-surface-container: var(--surface-container);
|
||||
--color-surface-container-high: var(--surface-container-high);
|
||||
--color-surface-container-highest: var(--surface-container-highest);
|
||||
--color-on-surface: var(--on-surface);
|
||||
--color-on-surface-variant: var(--on-surface-variant);
|
||||
|
||||
--color-outline: var(--outline);
|
||||
--color-outline-variant: var(--outline-variant);
|
||||
|
||||
--color-inverse-surface: var(--inverse-surface);
|
||||
--color-inverse-on-surface: var(--inverse-on-surface);
|
||||
|
||||
--color-error: var(--error);
|
||||
--color-on-error: var(--on-error);
|
||||
--color-error-container: var(--error-container);
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-on-background: var(--on-background);
|
||||
|
||||
--font-headline: "Manrope", sans-serif;
|
||||
--font-body: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -1,20 +1,26 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Manrope, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import { LanguageProvider } from "@/context/LanguageContext";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const manrope = Manrope({
|
||||
variable: "--font-headline",
|
||||
subsets: ["latin"],
|
||||
weight: ["700", "800"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const inter = Inter({
|
||||
variable: "--font-body",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "IPTEK | Integrasi Persada Teknologi",
|
||||
description:
|
||||
"Solusi teknologi terintegrasi untuk bisnis modern. Kami menghadirkan ekosistem digital yang efisien dan berdampak nyata.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -23,11 +29,20 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<html lang="id" className={`${manrope.variable} ${inter.variable}`}>
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
||||
/>
|
||||
</head>
|
||||
<body className="min-h-full flex flex-col bg-surface text-on-surface font-body">
|
||||
<LanguageProvider>
|
||||
<Navbar />
|
||||
<main className="flex-1 pt-20">{children}</main>
|
||||
<Footer />
|
||||
</LanguageProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
BIN
app/logo_iptek.png
Executable file
BIN
app/logo_iptek.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
310
app/page.tsx
310
app/page.tsx
@ -1,65 +1,263 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import zappcareProduk from "./zappcare_produk.png";
|
||||
import utmsProduk from "./utms_produk.png";
|
||||
import emrProduk from "./emr_produk.png";
|
||||
import { useLang } from "@/context/LanguageContext";
|
||||
import { t } from "@/lib/translations";
|
||||
|
||||
const products = [
|
||||
{
|
||||
slug: "zappcare",
|
||||
name: "ZappCare",
|
||||
tag: "Communication",
|
||||
features: ["User & Admin Panel", "Automated Messaging", "CRM Integration & Analytics"],
|
||||
image: zappcareProduk,
|
||||
},
|
||||
{
|
||||
slug: "utms",
|
||||
name: "Unified TMS for EDC Onboarding",
|
||||
tag: "Fintech Solution",
|
||||
features: ["Simplified Application", "Document & Compliance", "Real-time Tracking"],
|
||||
image: utmsProduk,
|
||||
},
|
||||
{
|
||||
slug: "emrclinic",
|
||||
name: "EMR Clinic",
|
||||
tag: "Healthcare IT",
|
||||
features: ["Patient Records & Scheduling", "Billing & Prescription", "Lab Integration"],
|
||||
image: emrProduk,
|
||||
},
|
||||
];
|
||||
|
||||
const contacts = [
|
||||
{ icon: "language", title: "Website", value: "www.iptek.co" },
|
||||
{ icon: "chat", title: "WhatsApp", value: "+62 817 221 121" },
|
||||
{ icon: "mail", title: "Email", value: "support@iptek.co" },
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const { lang } = useLang();
|
||||
const tr = t[lang].home;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
<>
|
||||
{/* Hero */}
|
||||
<section className="relative min-h-[92vh] flex items-center overflow-hidden bg-surface-dim">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent z-10" />
|
||||
<Image
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2yLmz-MHti4ExPVSy2BlsZGnZ7jP9yqgDsdpIyR3BdmW5NyVcqXIUgrkc9EuVFgF-P3bL7b4NLLbpmSgMr8vyWZxtsUDi9rWqDNeRwiVz3TCqbCPZcMM_6eu5WvUs4V45ZEiOWP5CwGvoIcHsmA0dyFErj2ffxiAX3AUQCpHUbuqAu1cMqCm7UpxogS7vVF8efyZm-2bDIiMPBcPIfRoxm002b9V1yEJaS7JX9PgSG9v1vnSLt9ilkovFIaEv1Pu5rmNOhCJy5W4"
|
||||
alt="Digital connectivity"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-20 max-w-7xl mx-auto px-6 w-full py-20 lg:py-0">
|
||||
<div className="max-w-2xl">
|
||||
<h1 className="font-headline text-5xl md:text-7xl font-extrabold text-on-surface leading-[1.1] tracking-tight mb-6">
|
||||
{tr.heroTitle}{" "}
|
||||
<span className="text-primary">{tr.heroHighlight}</span>
|
||||
</h1>
|
||||
<p className="text-on-surface-variant mb-10 leading-relaxed text-lg max-w-xl">
|
||||
{tr.heroSub}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row 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-base shadow-xl hover:opacity-90 transition-all text-center">
|
||||
{tr.heroBtn1}
|
||||
</Link>
|
||||
<Link href="/products" className="bg-surface-container-highest text-on-surface px-8 py-4 rounded-lg font-bold text-base hover:bg-surface-container-high transition-all text-center">
|
||||
{tr.heroBtn2}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Preview */}
|
||||
<section className="py-24 bg-surface">
|
||||
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="order-2 lg:order-1">
|
||||
<div className="aspect-square 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="Collaboration"
|
||||
fill
|
||||
className="object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="absolute inset-0 bg-primary/10 mix-blend-overlay" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-1 lg:order-2">
|
||||
<h2 className="font-headline text-4xl font-extrabold text-on-surface leading-tight mb-8">
|
||||
{tr.aboutTitle}
|
||||
</h2>
|
||||
<div className="space-y-6 text-on-surface-variant leading-relaxed text-lg">
|
||||
<p>{tr.aboutP1}</p>
|
||||
<p>{tr.aboutP2}</p>
|
||||
</div>
|
||||
<div className="mt-10 flex gap-12">
|
||||
<div>
|
||||
<div className="text-3xl font-black text-primary mb-1">10+</div>
|
||||
<div className="text-sm font-medium text-slate-500 uppercase tracking-widest">{tr.aboutStat1}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-black text-primary mb-1">99%</div>
|
||||
<div className="text-sm font-medium text-slate-500 uppercase tracking-widest">{tr.aboutStat2}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10">
|
||||
<Link href="/about" className="text-primary font-bold inline-flex items-center gap-2 group">
|
||||
{tr.aboutLink}
|
||||
<span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<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.whyTitle}</h2>
|
||||
<p className="text-on-surface-variant max-w-2xl mx-auto">{tr.whySub}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
{tr.pillars.map((p) => (
|
||||
<div key={p.title} className="bg-surface-container-lowest p-8 rounded-xl transition-all hover:shadow-[0_20px_50px_rgba(0,0,0,0.05)] hover:-translate-y-1">
|
||||
<div className="w-12 h-12 bg-primary/10 text-primary flex items-center justify-center rounded-lg mb-6">
|
||||
<span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>{p.icon}</span>
|
||||
</div>
|
||||
<h3 className="font-headline text-xl font-bold text-on-surface mb-3">{p.title}</h3>
|
||||
<p className="text-sm text-on-surface-variant leading-relaxed">{p.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Products Preview */}
|
||||
<section className="py-24 bg-surface">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">{tr.productsTitle}</h2>
|
||||
<p className="text-on-surface-variant text-lg">{tr.productsSub}</p>
|
||||
</div>
|
||||
<Link href="/products" className="text-primary font-bold inline-flex items-center gap-2 group">
|
||||
{tr.productsLink}
|
||||
<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-3 gap-8">
|
||||
{products.map((product, i) => (
|
||||
<div key={product.slug} className="group bg-surface-container-lowest rounded-2xl overflow-hidden border border-outline-variant/30 flex flex-col hover:shadow-xl transition-shadow">
|
||||
<div className="aspect-video relative overflow-hidden">
|
||||
<Image src={product.image} alt={product.name} fill className="object-cover transition-transform duration-500 group-hover:scale-110" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
|
||||
<div className="absolute bottom-4 left-4">
|
||||
<span className="bg-primary text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full">{product.tag}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 flex flex-col flex-grow">
|
||||
<h3 className="font-headline text-2xl font-bold mb-3 leading-tight">{product.name}</h3>
|
||||
<p className="text-on-surface-variant text-sm mb-6 leading-relaxed">{tr.productDescs[i]}</p>
|
||||
<ul className="space-y-3 mb-8 flex-grow">
|
||||
{product.features.map((f) => (
|
||||
<li key={f} className="flex items-center gap-2 text-xs font-medium text-slate-600">
|
||||
<span className="material-symbols-outlined text-primary text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
|
||||
{f}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={`/products/${product.slug}`} className="w-full py-3 px-6 rounded-lg border-2 border-primary text-primary font-bold text-sm hover:bg-primary hover:text-white transition-all text-center block">
|
||||
{tr.productsBtn}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Target Market */}
|
||||
<section className="py-24 bg-inverse-surface text-white">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||||
<div>
|
||||
<h2 className="font-headline text-4xl font-extrabold mb-8 leading-tight">{tr.sectorsTitle}</h2>
|
||||
<div className="space-y-8">
|
||||
{tr.sectors.map((item) => (
|
||||
<div key={item.title} className="flex gap-6">
|
||||
<div className="text-blue-300 shrink-0">
|
||||
<span className="material-symbols-outlined text-4xl">{item.icon}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-bold mb-2">{item.title}</h4>
|
||||
<p className="text-slate-400">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="bg-primary/20 absolute -inset-4 rounded-3xl blur-3xl" />
|
||||
<Image
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6A82v9LQWaGRaB0fuN817AH7QCAxoqIx7KcYxBUX35MwNH_bmW7YWFtjVKVqEr227abIBryBVKyDXhSVzLNQjgTLUiwD4FDp0EyAYoftxNPCjpKPvGY71g-iT5iabf_3NkX_q75nZQcOtAs9IIiM8wzgTJrWxq3SsbAx6h1fzTh2XYd6ldOL2vqA0L_vAvxsr1jHdSfLJKvBYvWqZgupCPvkyg8qXeqzQdqFIsvJ3eYxkpSOHsUYd5LimiAHk17d4XJ9TPzYP83c"
|
||||
alt="Industry Sectors"
|
||||
width={600}
|
||||
height={340}
|
||||
className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-24 bg-surface overflow-hidden">
|
||||
<div className="max-w-5xl mx-auto px-6 text-center relative">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-3xl -z-10" />
|
||||
<h2 className="font-headline text-5xl font-extrabold text-on-surface mb-8 leading-tight">
|
||||
{tr.ctaTitle}
|
||||
</h2>
|
||||
<p className="text-on-surface-variant text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
{tr.ctaSub}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-6">
|
||||
<Link href="/contact" className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-10 py-5 rounded-lg font-bold text-lg shadow-2xl hover:scale-105 transition-transform text-center">
|
||||
{tr.ctaBtn1}
|
||||
</Link>
|
||||
<Link href="/contact" className="border-2 border-primary text-primary px-10 py-5 rounded-lg font-bold text-lg hover:bg-primary/5 transition-all text-center">
|
||||
{tr.ctaBtn2}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</section>
|
||||
|
||||
{/* Contact Info */}
|
||||
<section className="py-24 bg-surface-container-low">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
{contacts.map((item) => (
|
||||
<div key={item.title} className="flex flex-col items-center text-center p-8 bg-surface-container-lowest rounded-2xl shadow-sm">
|
||||
<div className="w-16 h-16 bg-primary text-on-primary rounded-full flex items-center justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-3xl">{item.icon}</span>
|
||||
</div>
|
||||
<h4 className="font-headline text-xl font-bold mb-2">{item.title}</h4>
|
||||
<p className="text-on-surface-variant">{item.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
16
app/privacy/BackButton.tsx
Normal file
16
app/privacy/BackButton.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function BackButton() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="inline-flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all duration-300"
|
||||
>
|
||||
<span className="material-symbols-outlined">arrow_back</span>
|
||||
<span>Back</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
132
app/privacy/page.tsx
Normal file
132
app/privacy/page.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
import BackButton from "./BackButton";
|
||||
|
||||
export const metadata = {
|
||||
title: "Privacy Policy | IPTEK (Integrasi Persada Teknologi)",
|
||||
description:
|
||||
"Kebijakan privasi IPTEK — bagaimana kami mengelola dan melindungi data Anda.",
|
||||
};
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<div className="pb-24 px-6 relative overflow-hidden">
|
||||
{/* Decorative blurs */}
|
||||
<div className="absolute top-0 right-0 -z-10 w-full h-full opacity-30 pointer-events-none">
|
||||
<div className="absolute top-[-10%] right-[-5%] w-[600px] h-[600px] bg-primary-fixed blur-[120px] rounded-full" />
|
||||
<div className="absolute bottom-[20%] left-[-10%] w-[400px] h-[400px] bg-secondary-fixed-dim blur-[100px] rounded-full" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-3xl mx-auto pt-16">
|
||||
{/* Header */}
|
||||
<div className="mb-16">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="px-3 py-1 bg-primary-fixed text-on-primary-fixed-variant text-xs font-bold uppercase tracking-widest rounded-full">
|
||||
Legal Documentation
|
||||
</span>
|
||||
<span className="text-outline text-xs font-medium">Updated Oct 2024</span>
|
||||
</div>
|
||||
<h1 className="font-headline text-5xl md:text-6xl font-extrabold tracking-tighter text-on-surface mb-6 leading-tight">
|
||||
Privacy{" "}
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-container">
|
||||
Policy
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg text-on-surface-variant font-medium leading-relaxed max-w-2xl">
|
||||
Integrasi Persada Teknologi (IPTEK) is committed to protecting your
|
||||
architectural digital data. This policy outlines how we handle information
|
||||
in our pursuit of crystalline connectivity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="bg-surface-container-lowest rounded-xl p-8 md:p-12 shadow-xl shadow-slate-900/5 space-y-12">
|
||||
<section>
|
||||
<h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
|
||||
1. Data Collection & Architecture
|
||||
</h2>
|
||||
<div className="space-y-4 text-on-surface-variant leading-relaxed">
|
||||
<p>
|
||||
We collect information that allows us to integrate complex systems into
|
||||
seamless operational workflows. This includes technical metadata,
|
||||
professional contact information, and system interaction logs necessary
|
||||
for architectural digital solutions.
|
||||
</p>
|
||||
<p>
|
||||
Our systems are designed with "Security by Design" principles, ensuring
|
||||
that data ingestion is minimal, purposeful, and transparent.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
|
||||
2. Integration Protocols
|
||||
</h2>
|
||||
<div className="space-y-4 text-on-surface-variant leading-relaxed">
|
||||
<p>Information collected is utilized strictly to:</p>
|
||||
<ul className="space-y-3 pl-4">
|
||||
{[
|
||||
"Refine and optimize digital infrastructure performance.",
|
||||
"Deliver personalized enterprise technology insights.",
|
||||
"Ensure compliance with global security architecture standards.",
|
||||
].map((item) => (
|
||||
<li key={item} className="flex items-start gap-3">
|
||||
<span
|
||||
className="material-symbols-outlined text-primary text-lg shrink-0"
|
||||
style={{ fontVariationSettings: "'FILL' 1" }}
|
||||
>
|
||||
check_circle
|
||||
</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
|
||||
3. Data Integrity & Security
|
||||
</h2>
|
||||
<div className="space-y-4 text-on-surface-variant leading-relaxed">
|
||||
<p>
|
||||
IPTEK employs high-end crystalline connectivity security measures. We do
|
||||
not use traditional clumsy firewalls but layered, intelligent defense
|
||||
systems that utilize deep navy encryption protocols.
|
||||
</p>
|
||||
<p>
|
||||
Data is stored in secure environments with strict multi-factor
|
||||
authentication and zero-trust access hierarchies.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
|
||||
4. Third-Party Connectivity
|
||||
</h2>
|
||||
<div className="space-y-4 text-on-surface-variant leading-relaxed">
|
||||
<p>
|
||||
We do not sell your data. Integration with third-party systems occurs
|
||||
only under explicit Service Level Agreements (SLAs) and strictly for the
|
||||
purpose of extending the capabilities of your digital architecture.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="pt-8 border-t border-outline-variant/30">
|
||||
<p className="text-sm text-outline italic">
|
||||
By using our services, you consent to the architectural data management
|
||||
practices described in this policy. For detailed inquiries regarding your
|
||||
data rights, please contact our Security Architecture department.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back link */}
|
||||
<div className="mt-12 flex justify-center">
|
||||
<BackButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
150
app/products/page.tsx
Normal file
150
app/products/page.tsx
Normal file
@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import zappcareProduk from "@/app/zappcare_produk.png";
|
||||
import { useLang } from "@/context/LanguageContext";
|
||||
import { t } from "@/lib/translations";
|
||||
|
||||
export default function ProductsPage() {
|
||||
const { lang } = useLang();
|
||||
const tr = t[lang].products;
|
||||
|
||||
return (
|
||||
<div className="pb-24 px-6 md:px-12 max-w-7xl mx-auto pt-12">
|
||||
{/* Hero */}
|
||||
<header className="mb-20 max-w-3xl">
|
||||
<h1 className="font-headline text-5xl md:text-6xl font-extrabold tracking-tight text-on-surface mb-6 leading-tight">
|
||||
{tr.heroTitle}
|
||||
</h1>
|
||||
<p className="text-lg text-on-surface-variant leading-relaxed">{tr.heroSub}</p>
|
||||
</header>
|
||||
|
||||
{/* Bento Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
|
||||
{/* ZappCare — large card */}
|
||||
<div id="zappcare" className="lg:col-span-8 group relative overflow-hidden rounded-xl bg-surface-container-lowest transition-all hover:shadow-2xl hover:shadow-primary/10">
|
||||
<div className="flex flex-col md:flex-row h-full">
|
||||
<div className="p-10 md:w-1/2 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">chat_bubble</span>
|
||||
<span className="font-bold tracking-widest text-xs uppercase text-outline">Communication</span>
|
||||
</div>
|
||||
<h2 className="font-headline text-4xl font-bold mb-4">ZappCare</h2>
|
||||
<p className="text-on-surface-variant mb-6 leading-relaxed">{tr.zappDesc}</p>
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{["CRM Sync", "Multi-Agent", "Admin Panel"].map((tag) => (
|
||||
<span key={tag} className="px-3 py-1 bg-surface-variant text-on-surface-variant text-xs rounded-full font-medium">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/products/zappcare" className="flex items-center gap-2 text-primary font-bold group/btn w-fit">
|
||||
{tr.detailBtn}
|
||||
<span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="md:w-1/2 min-h-[300px] relative">
|
||||
<Image
|
||||
src={zappcareProduk}
|
||||
alt="ZappCare"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Unified TMS */}
|
||||
<div id="utms" className="lg:col-span-4 group relative overflow-hidden rounded-xl bg-surface-container-lowest p-8 flex flex-col transition-all hover:shadow-2xl hover:shadow-primary/10">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">point_of_sale</span>
|
||||
<span className="font-bold tracking-widest text-xs uppercase text-outline">Fintech</span>
|
||||
</div>
|
||||
<h2 className="font-headline text-3xl font-bold mb-4">Unified TMS</h2>
|
||||
<p className="text-on-surface-variant mb-6 text-sm leading-relaxed">{tr.utmsDesc}</p>
|
||||
<ul className="space-y-3 mb-8 flex-grow">
|
||||
{["Simplified Onboarding", "Real-time Tracking"].map((item) => (
|
||||
<li key={item} className="flex items-center gap-2 text-sm text-on-surface-variant">
|
||||
<span className="material-symbols-outlined text-primary text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/products/utms" className="flex items-center gap-2 text-primary font-bold group/btn w-fit mt-auto">
|
||||
{tr.detailBtn}
|
||||
<span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* EMR Clinic */}
|
||||
<div id="emrclinic" className="lg:col-span-4 group relative overflow-hidden rounded-xl bg-surface-container-lowest p-8 flex flex-col transition-all hover:shadow-2xl hover:shadow-primary/10">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">medical_services</span>
|
||||
<span className="font-bold tracking-widest text-xs uppercase text-outline">Health Tech</span>
|
||||
</div>
|
||||
<h2 className="font-headline text-3xl font-bold mb-4">EMR Clinic</h2>
|
||||
<p className="text-on-surface-variant mb-6 text-sm leading-relaxed">{tr.emrDesc}</p>
|
||||
<div className="grid grid-cols-2 gap-2 mb-8 flex-grow">
|
||||
{["HIPAA Ready", "GDPR Compliant"].map((badge) => (
|
||||
<div key={badge} className="p-3 bg-surface-container-low rounded-lg text-xs font-semibold text-center">
|
||||
{badge}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/products/emrclinic" className="flex items-center gap-2 text-primary font-bold group/btn w-fit mt-auto">
|
||||
{tr.detailBtn}
|
||||
<span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Why Integrated Systems */}
|
||||
<div className="lg:col-span-8 bg-primary rounded-xl p-10 text-white relative overflow-hidden">
|
||||
<div className="relative z-10 max-w-lg">
|
||||
<h2 className="font-headline text-4xl font-bold mb-6">{tr.whyTitle}</h2>
|
||||
<p className="text-primary-fixed-dim mb-8 leading-relaxed">{tr.whyDesc}</p>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<div className="text-3xl font-black mb-1">99.9%</div>
|
||||
<div className="text-xs uppercase font-bold tracking-widest opacity-70">{tr.stat1}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-black mb-1">10x</div>
|
||||
<div className="text-xs uppercase font-bold tracking-widest opacity-70">{tr.stat2}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute right-0 bottom-0 opacity-10 translate-x-1/4 translate-y-1/4 pointer-events-none">
|
||||
<span className="material-symbols-outlined text-[300px]" style={{ fontVariationSettings: "'FILL' 1" }}>hub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Foundations */}
|
||||
<section className="mt-32">
|
||||
<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-3xl font-bold mb-4">{tr.techTitle}</h2>
|
||||
<p className="text-on-surface-variant">{tr.techSub}</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="px-6 py-3 bg-surface-container-high rounded-full font-semibold text-sm">{tr.badge1}</div>
|
||||
<div className="px-6 py-3 bg-surface-container-high rounded-full font-semibold text-sm">{tr.badge2}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-1">
|
||||
{tr.tech.map((item) => (
|
||||
<div key={item.title} className="bg-surface-container-low p-12 transition-colors hover:bg-surface-container">
|
||||
<span className="material-symbols-outlined text-primary mb-6 text-4xl block">{item.icon}</span>
|
||||
<h3 className="font-headline text-xl font-bold mb-4">{item.title}</h3>
|
||||
<p className="text-sm text-on-surface-variant leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
321
app/products/zappcare/page.tsx
Normal file
321
app/products/zappcare/page.tsx
Normal file
@ -0,0 +1,321 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import zappcareProduk from "@/app/zappcare_produk.png";
|
||||
|
||||
export const metadata = {
|
||||
title: "ZappCare | IPTEK Unified Communication",
|
||||
description:
|
||||
"Transform customer interactions with a custom-engineered WhatsApp Business layer designed for enterprise scale and operational clarity.",
|
||||
};
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: "dashboard_customize",
|
||||
title: "User/Admin Panels",
|
||||
desc: "Distinct interfaces for frontline staff and managers to ensure focused productivity and oversight.",
|
||||
},
|
||||
{
|
||||
icon: "smart_toy",
|
||||
title: "Automated Messaging",
|
||||
desc: "Smart triggers and scheduled responses to handle routine queries without human intervention.",
|
||||
},
|
||||
{
|
||||
icon: "groups",
|
||||
title: "Multi-user Support",
|
||||
desc: "One number, infinite agents. Assign chats to specific teams or individual specialists instantly.",
|
||||
},
|
||||
{
|
||||
icon: "query_stats",
|
||||
title: "Analytics Dashboard",
|
||||
desc: "Real-time heatmaps of engagement, response times, and conversion attribution.",
|
||||
},
|
||||
{
|
||||
icon: "api",
|
||||
title: "Deep Integration",
|
||||
desc: "Seamlessly connect with your existing tech stack via our robust enterprise API.",
|
||||
},
|
||||
{
|
||||
icon: "security",
|
||||
title: "End-to-End Governance",
|
||||
desc: "Enterprise-grade security ensuring all communications comply with your industry standards.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ZappCarePage() {
|
||||
return (
|
||||
<div className="pt-4">
|
||||
|
||||
{/* Hero */}
|
||||
<section className="relative overflow-hidden bg-surface py-24 md:py-32">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
||||
<div className="z-10">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 bg-secondary-container text-on-secondary-fixed rounded-full text-xs font-bold tracking-widest uppercase mb-6">
|
||||
<span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>verified</span>
|
||||
Advanced WhatsApp Solutions
|
||||
</div>
|
||||
<h1 className="font-headline text-5xl md:text-7xl font-extrabold text-on-surface leading-tight tracking-tighter mb-8">
|
||||
Elevate Your Business{" "}
|
||||
<span className="text-primary">Conversation</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-on-surface-variant leading-relaxed mb-10 max-w-lg">
|
||||
Transform customer interactions with a custom-engineered WhatsApp Business
|
||||
layer designed for enterprise scale and operational clarity.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-4 rounded-xl font-headline font-bold text-lg shadow-2xl shadow-primary/30 transition-transform hover:-translate-y-1 text-center"
|
||||
>
|
||||
Get Started Now
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-surface-container-high text-on-surface px-8 py-4 rounded-xl font-headline font-bold text-lg hover:bg-surface-container-highest 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 rounded-2xl overflow-hidden shadow-2xl border-8 border-surface-container-lowest">
|
||||
<Image
|
||||
src={zappcareProduk}
|
||||
alt="ZappCare Dashboard"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Problem Statement */}
|
||||
<section className="bg-surface-container-low py-24">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 items-center">
|
||||
<div className="md:col-span-1">
|
||||
<h2 className="font-headline text-3xl font-bold text-on-surface mb-6">
|
||||
The Fragmentation Crisis
|
||||
</h2>
|
||||
<p className="text-on-surface-variant">
|
||||
Untethered communication leads to lost leads and invisible data.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<div className="p-8 bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10">
|
||||
<span className="material-symbols-outlined text-error text-4xl mb-4 block">leak_remove</span>
|
||||
<h3 className="font-headline font-bold text-xl mb-2">Communication Silos</h3>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Teams working on personal WhatsApp accounts leave no trail for enterprise oversight.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-8 bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10">
|
||||
<span className="material-symbols-outlined text-error text-4xl mb-4 block">cloud_off</span>
|
||||
<h3 className="font-headline font-bold text-xl mb-2">Data Blindness</h3>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Vital customer insights disappear once a chat window is closed, never reaching your CRM.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Solution Bento Grid */}
|
||||
<section className="py-24 bg-surface">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">
|
||||
ZappCare: The Unified Core
|
||||
</h2>
|
||||
<p className="text-on-surface-variant max-w-2xl mx-auto">
|
||||
We wrap the WhatsApp Business API in a custom-built infrastructure tailored
|
||||
to your organizational hierarchy.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-6 md:h-[600px]">
|
||||
{/* Large card */}
|
||||
<div className="col-span-12 md:col-span-8 bg-primary-container rounded-2xl p-10 flex flex-col justify-end relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 p-8 opacity-20 group-hover:scale-110 transition-transform pointer-events-none">
|
||||
<span className="material-symbols-outlined text-[160px] text-on-primary" style={{ fontVariationSettings: "'FILL' 1" }}>hub</span>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<h3 className="font-headline text-3xl font-bold text-on-primary mb-4">
|
||||
Custom Enterprise Enclosure
|
||||
</h3>
|
||||
<p className="text-on-primary-container max-w-md">
|
||||
Your WhatsApp Business isn't just an app; it's an integrated platform
|
||||
governed by your security protocols and administrative needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Admin card */}
|
||||
<div className="col-span-12 md:col-span-4 bg-secondary-container rounded-2xl p-10 flex flex-col justify-between">
|
||||
<span className="material-symbols-outlined text-4xl text-on-secondary-container block">shield_with_heart</span>
|
||||
<div>
|
||||
<h3 className="font-headline text-2xl font-bold text-on-secondary-container mb-2">
|
||||
Admin Governance
|
||||
</h3>
|
||||
<p className="text-on-secondary-container/80 text-sm">
|
||||
Full visibility into team conversations with role-based access controls.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* CRM card */}
|
||||
<div className="col-span-12 md:col-span-4 bg-surface-container-high rounded-2xl p-10">
|
||||
<h3 className="font-headline text-xl font-bold text-on-surface mb-4">CRM Synergy</h3>
|
||||
<p className="text-on-surface-variant text-sm mb-6">
|
||||
Real-time sync between your messaging and your customer database.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{["Salesforce", "Hubspot"].map((crm) => (
|
||||
<span key={crm} className="px-3 py-1 bg-surface-container-lowest rounded-full text-xs font-bold">
|
||||
{crm}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Analytics visual card */}
|
||||
<div className="col-span-12 md:col-span-8 bg-surface-container-low rounded-2xl overflow-hidden relative min-h-[200px]">
|
||||
<Image
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNQSCjTSYT_VDktiWU4ECxwGCsgpJoRZUu1FwPtj__fIyeyylyDCfCBfAMMFBNe7hvqCNhvVPzlaHAJqoqjtT6liraXmm7u1pp1mTm8-3mrTtWvnzCaaUwJjI5EkmgHZxfTSgh-KOzvaEX7w8WBpYBlgjsCGAevYSxIC8wZEmbOFVJ5CYLnH49e3bcHZ_XJERsNi_SgwoMzfHFnpw8i5g2ExFk1EU3t6Nlieqaf9rVnX4_A7LScgliaPbUuo62G2JdSgMNcgMz2QY"
|
||||
alt="Visual Intelligence"
|
||||
fill
|
||||
className="object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-on-surface/80 to-transparent p-10 flex items-end">
|
||||
<h3 className="font-headline text-2xl font-bold text-white">Visual Intelligence</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Features */}
|
||||
<section className="py-24 bg-surface-container-lowest">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
|
||||
{features.map((f) => (
|
||||
<div key={f.title} className="flex flex-col gap-4">
|
||||
<div className="w-12 h-12 bg-primary/5 rounded-lg flex items-center justify-center text-primary">
|
||||
<span className="material-symbols-outlined">{f.icon}</span>
|
||||
</div>
|
||||
<h4 className="font-headline text-xl font-bold">{f.title}</h4>
|
||||
<p className="text-on-surface-variant text-sm leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Cases */}
|
||||
<section className="py-24 bg-surface overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div className="mb-20">
|
||||
<h2 className="font-headline text-4xl font-extrabold text-on-surface mb-2">Built for Impact</h2>
|
||||
<p className="text-on-surface-variant">Industries where ZappCare makes the difference.</p>
|
||||
</div>
|
||||
<div className="space-y-32">
|
||||
{/* Healthcare */}
|
||||
<div className="flex flex-col md:flex-row items-center gap-16">
|
||||
<div className="w-full md:w-1/2">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-tertiary-container/10 -rotate-3 rounded-2xl" />
|
||||
<Image
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUyFs_J_yTV5ldfA72IITGB-NHhL26YHi1O8LbayA3sgTRpbel9uU3H2buNr2hVpPy9Pn9zzv25lxfMuls19O5HSXrw8mvlHiqByncfRZo10uxw7Titkn8WeRf-vjOl25EfLkOyezQ4BlCNCL8HVRItcWQ3k8Ze1iBgsdh2YtjvmSycGbQrBF52RebQgrpBIgCo3eQEWjYxh8RV3SiPad8OI873_VtADN4WN3BudQrOzQlEmsHCgj_DJMs9LpTDg2ouWDLYrX7fvI"
|
||||
alt="Healthcare"
|
||||
width={600}
|
||||
height={400}
|
||||
className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<span className="text-tertiary font-bold tracking-widest text-xs uppercase mb-4 block">Healthcare</span>
|
||||
<h3 className="font-headline text-3xl font-bold mb-6">Patient Coordination Redefined</h3>
|
||||
<p className="text-on-surface-variant mb-8">
|
||||
Schedule appointments, share post-op instructions, and manage follow-ups
|
||||
through a secure, familiar channel that patients actually use.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{["80% Reduction in No-shows", "Secure Document Transfer"].map((item) => (
|
||||
<li key={item} className="flex items-center gap-3 text-on-surface">
|
||||
<span className="material-symbols-outlined text-tertiary" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* Retail */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center gap-16">
|
||||
<div className="w-full md:w-1/2">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-primary/10 rotate-3 rounded-2xl" />
|
||||
<Image
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNyxBykIrbpZ05p8zLcIvQbPv75wjSLssBDMp_zN4EhMKZ4UuQ7YVpcnGntfM16u8KPrEkmFh-a3Y1aRqP7Q8TTf25r7OOlvCOOt4NM3IXwikobkJVHxddsxuNpsz1B7xBlftljvgGMSCD82eO6VzBZkP5TJALi_gJIduQp-v3M_Xklz1oLrY68BJqsr64NOuhB6Qy2l6aiqUAiFt9cLayzGpcZJCGM68BQUltWeREnPUi9u3ggyQyilXJSn_DkGyn7kJWv0MJsQU"
|
||||
alt="Retail"
|
||||
width={600}
|
||||
height={400}
|
||||
className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<span className="text-primary font-bold tracking-widest text-xs uppercase mb-4 block">Retail</span>
|
||||
<h3 className="font-headline text-3xl font-bold mb-6">Personalized Commerce at Scale</h3>
|
||||
<p className="text-on-surface-variant mb-8">
|
||||
Send personalized offers, handle order inquiries, and provide VIP
|
||||
concierge service that turns shoppers into lifelong advocates.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{["Instant Order Updates", "Direct Checkout Links"].map((item) => (
|
||||
<li key={item} className="flex items-center gap-3 text-on-surface">
|
||||
<span className="material-symbols-outlined text-primary" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-24 bg-surface-container-lowest relative overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
|
||||
<div className="bg-surface-container-high rounded-[40px] p-12 md:p-24 text-center">
|
||||
<h2 className="font-headline text-4xl md:text-5xl font-black text-on-surface mb-6">
|
||||
Ready to scale your reach?
|
||||
</h2>
|
||||
<p className="text-on-surface-variant text-lg mb-12 max-w-2xl mx-auto">
|
||||
Join the future of enterprise communication. Let's build a solution tailored
|
||||
to your specific workflow.
|
||||
</p>
|
||||
<div className="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
|
||||
<input
|
||||
className="flex-grow rounded-xl border-none bg-surface-container-lowest px-6 py-4 focus:ring-2 focus:ring-primary outline-none"
|
||||
placeholder="Enter your work email"
|
||||
type="email"
|
||||
/>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-primary text-on-primary font-bold px-8 py-4 rounded-xl shadow-lg hover:shadow-primary/40 transition-all whitespace-nowrap text-center"
|
||||
>
|
||||
Request Custom Quote
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-xs text-on-surface-variant mt-6 opacity-60">
|
||||
No credit card required. Free consulting session included.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
BIN
app/utms_produk.png
Normal file
BIN
app/utms_produk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
app/zappcare_produk.png
Normal file
BIN
app/zappcare_produk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Reference in New Issue
Block a user