286 lines
18 KiB
HTML
286 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Manrope:wght@600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-fixed-variant": "#004f4f",
|
|
"on-primary-container": "#a5bdff",
|
|
"on-secondary": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"on-error": "#ffffff",
|
|
"background": "#faf8ff",
|
|
"inverse-on-surface": "#f0f0f9",
|
|
"surface-container-low": "#f3f3fc",
|
|
"primary": "#00327d",
|
|
"on-surface-variant": "#434653",
|
|
"on-tertiary-fixed-variant": "#38485d",
|
|
"tertiary": "#27374c",
|
|
"tertiary-container": "#3e4e63",
|
|
"on-background": "#191b22",
|
|
"secondary-fixed": "#7df5f5",
|
|
"surface-container-high": "#e7e7f0",
|
|
"surface-variant": "#e2e2eb",
|
|
"inverse-primary": "#b1c5ff",
|
|
"on-primary-fixed": "#001946",
|
|
"error": "#ba1a1a",
|
|
"surface-dim": "#d9d9e2",
|
|
"primary-fixed": "#dae2ff",
|
|
"surface-container-highest": "#e2e2eb",
|
|
"on-primary": "#ffffff",
|
|
"secondary-container": "#7af2f2",
|
|
"tertiary-fixed": "#d3e4fe",
|
|
"outline": "#737784",
|
|
"inverse-surface": "#2e3037",
|
|
"tertiary-fixed-dim": "#b7c8e1",
|
|
"surface": "#faf8ff",
|
|
"primary-container": "#0047ab",
|
|
"outline-variant": "#c3c6d5",
|
|
"surface-container": "#ededf6",
|
|
"on-tertiary-fixed": "#0b1c30",
|
|
"on-secondary-container": "#006e6e",
|
|
"primary-fixed-dim": "#b1c5ff",
|
|
"on-surface": "#191b22",
|
|
"secondary-fixed-dim": "#5dd9d8",
|
|
"error-container": "#ffdad6",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-bright": "#faf8ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary": "#006a6a",
|
|
"surface-tint": "#2559bd",
|
|
"on-secondary-fixed": "#002020",
|
|
"on-tertiary-container": "#afbfd9",
|
|
"on-primary-fixed-variant": "#00419e"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin-mobile": "16px",
|
|
"stack-md": "16px",
|
|
"gutter": "24px",
|
|
"margin-desktop": "40px",
|
|
"unit": "4px",
|
|
"container-max": "1440px",
|
|
"stack-sm": "8px",
|
|
"stack-lg": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"label-caps": ["Inter"],
|
|
"headline-lg-mobile": ["Manrope"],
|
|
"title-md": ["Inter"],
|
|
"headline-lg": ["Manrope"],
|
|
"display-lg": ["Manrope"],
|
|
"body-lg": ["Inter"],
|
|
"body-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"title-md": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.bento-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 24px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-lg selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-surface/90 backdrop-blur-md sticky top-0 z-50 border-b border-outline-variant shadow-sm w-full">
|
|
<div class="max-w-[1440px] mx-auto px-margin-desktop flex justify-between items-center h-20 w-full">
|
|
<div class="flex items-center gap-stack-lg">
|
|
<span class="text-title-md font-display-lg font-bold text-primary">Bizone</span>
|
|
<nav class="hidden md:flex gap-gutter">
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg" href="#">Home</a>
|
|
<a class="text-primary font-bold border-b-2 border-primary pb-1 font-body-lg" href="#">Features</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg" href="#">Solutions</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg" href="#">About</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg" href="#">Contact</a>
|
|
</nav>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-label-caps scale-95 active:scale-90 transition-transform hover:bg-primary-container">
|
|
Jadwalkan Demo
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-[1440px] mx-auto px-margin-desktop py-stack-lg">
|
|
<!-- Hero Section -->
|
|
<section class="py-20 text-center max-w-4xl mx-auto">
|
|
<span class="font-label-caps text-secondary bg-secondary-container/30 px-4 py-1.5 rounded-full mb-stack-md inline-block">Ekosistem Bisnis Terpadu</span>
|
|
<h1 class="font-display-lg text-display-lg text-primary mb-stack-md">Efisiensi Tanpa Batas dalam Satu Platform</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
|
Bizone dirancang untuk membantu bisnis mengelola komunikasi dan operasional dari satu platform yang saling terhubung.
|
|
</p>
|
|
</section>
|
|
<!-- Features Bento Grid -->
|
|
<div class="bento-grid">
|
|
<!-- Shared Inbox (Big Card) -->
|
|
<div class="col-span-12 md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
|
<div class="p-stack-lg flex flex-col h-full">
|
|
<div class="flex items-start justify-between mb-stack-lg">
|
|
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary" data-icon="inbox">inbox</span>
|
|
</div>
|
|
<span class="text-on-surface-variant font-label-caps">Monitoring & Response</span>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h3 class="font-headline-lg text-headline-lg text-primary mb-stack-sm">Shared Inbox</h3>
|
|
<p class="font-body-lg text-on-surface-variant max-w-md">Kelola semua pesan pelanggan dari WhatsApp, Email, dan Media Sosial dalam satu kotak masuk bersama untuk respon tim yang lebih cepat.</p>
|
|
</div>
|
|
<div class="mt-stack-lg relative rounded-lg overflow-hidden border border-outline-variant/30 h-64">
|
|
<img alt="Shared Inbox Interface" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A clean, high-fidelity UI mockup of a collaborative dashboard displaying message threads from multiple channels like WhatsApp and Email. The interface uses a professional primary blue and white theme with soft ambient shadows and crisp typography. The atmosphere is organized and productive, reflecting a modern SaaS environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEkvQ9actkPYYiCpOb1Pj90keiXg4yY-rPYykdPCMoBsCRp5eCYiW8COWBz2Iq243W26qYgLfLCuaSQhXscEFArZW47dGgQ38JMGvYvaW8LVbxppfNW71hjUJAl8WHE3DzKJ8IgZRTSd4dpmMgCpDfmy7hlyqyXHFor0D5Wd-xcjY2jHgq_rkmmPV1HC2mtZmfeblZ_PbQHt4NUNdUrL26yuYuJAJTil2zzGOfqPjj_NbQ4EP3BIvcqU7kpZ2fDvveIOgIGuNb9T8A"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Contact & Customer Records -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-lg shadow-sm flex flex-col">
|
|
<div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mb-stack-lg">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="contact_page" data-weight="fill" style="font-variation-settings: 'FILL' 1;">contact_page</span>
|
|
</div>
|
|
<h3 class="font-title-md text-title-md text-primary mb-stack-sm">Contact & Customer Records</h3>
|
|
<p class="font-body-sm text-on-surface-variant mb-stack-lg">Pusat data pelanggan yang terorganisir untuk memahami profil dan riwayat transaksi setiap klien secara mendalam.</p>
|
|
<div class="mt-auto bg-surface-container-low rounded-lg p-stack-sm">
|
|
<div class="flex items-center gap-3 p-2 bg-surface-container-lowest border border-outline-variant/50 rounded-lg shadow-sm mb-2">
|
|
<div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center text-on-primary-fixed font-bold text-xs">JD</div>
|
|
<div class="flex-grow">
|
|
<div class="h-2 w-20 bg-primary/20 rounded mb-1"></div>
|
|
<div class="h-1.5 w-12 bg-on-surface-variant/20 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2 bg-surface-container-lowest border border-outline-variant/50 rounded-lg shadow-sm opacity-60">
|
|
<div class="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed font-bold text-xs">AS</div>
|
|
<div class="flex-grow">
|
|
<div class="h-2 w-24 bg-primary/20 rounded mb-1"></div>
|
|
<div class="h-1.5 w-16 bg-on-surface-variant/20 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Workflow & Automation -->
|
|
<div class="col-span-12 md:col-span-4 bg-primary-container text-on-primary-container border border-primary rounded-xl p-stack-lg shadow-sm relative overflow-hidden">
|
|
<div class="absolute -right-8 -top-8 w-32 h-32 bg-on-primary-container/10 rounded-full blur-3xl"></div>
|
|
<div class="w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center mb-stack-lg backdrop-blur-sm">
|
|
<span class="material-symbols-outlined text-white" data-icon="bolt">bolt</span>
|
|
</div>
|
|
<h3 class="font-title-md text-title-md text-white mb-stack-sm">Workflow & Automation</h3>
|
|
<p class="font-body-sm text-on-primary-container/80 mb-stack-lg">Otomatiskan tugas rutin mulai dari routing pesan hingga follow-up berkala untuk meningkatkan efisiensi operasional.</p>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center gap-2 text-xs font-label-caps bg-white/10 px-3 py-2 rounded-full w-fit">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle">check_circle</span> Auto-Assign Agent
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs font-label-caps bg-white/10 px-3 py-2 rounded-full w-fit">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle">check_circle</span> Trigger-based Emails
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Collaboration & Assignment -->
|
|
<div class="col-span-12 md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm flex flex-col md:flex-row group">
|
|
<div class="p-stack-lg flex-1">
|
|
<div class="w-12 h-12 rounded-lg bg-tertiary/10 flex items-center justify-center mb-stack-lg">
|
|
<span class="material-symbols-outlined text-tertiary" data-icon="group">group</span>
|
|
</div>
|
|
<h3 class="font-headline-lg text-headline-lg text-primary mb-stack-sm">Collaboration & Assignment</h3>
|
|
<p class="font-body-lg text-on-surface-variant">Tingkatkan visibilitas tim dengan fitur penugasan tiket yang jelas. Kolaborasi internal melalui catatan privat tanpa berpindah aplikasi.</p>
|
|
</div>
|
|
<div class="flex-1 bg-surface-container-high/30 p-stack-lg flex items-center justify-center">
|
|
<div class="relative w-full max-w-[280px]">
|
|
<img alt="Team Collaboration" class="rounded-xl shadow-lg border border-white group-hover:rotate-2 transition-transform duration-500" data-alt="A professional business team working collaboratively in a brightly lit, modern office environment. The image emphasizes teamwork and clear communication, with a diverse group of professionals interacting over digital devices. The lighting is natural and soft, aligning with a premium corporate SaaS aesthetic featuring blues and clean whites." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1zxo1cuLKe1ustOMUP5blnNIKjhuAHYxjElzWzZBMBK942u50xvAk-FE2v7E6618T5kKt1iMr8S0RA-PxV3bQhI__T1gwGji4Dgsnyh2khmeOnWaAbWsDz-o4w5el9N-uYzfxTd8qwSYn3dFW9c8lHClUgshpEBwHsUztQ-qYAKNZMMLv2687felPX8BoHZDosm1kKJrtCBfsJGU6njKeTXuIpQ-3iGzYwnIHTwESSx-Pq8psfnd5Xbz3FQvWiWP2crnKyzKdwQQq"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Process Visibility (Wide/Bottom) -->
|
|
<div class="col-span-12 bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-lg shadow-sm flex flex-col md:flex-row items-center gap-gutter group">
|
|
<div class="flex-1">
|
|
<div class="w-12 h-12 rounded-lg bg-secondary-container/40 flex items-center justify-center mb-stack-lg">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="bar_chart">bar_chart</span>
|
|
</div>
|
|
<h3 class="font-headline-lg text-headline-lg text-primary mb-stack-sm">Process Visibility</h3>
|
|
<p class="font-body-lg text-on-surface-variant mb-stack-lg">Dapatkan laporan mendalam tentang performa tim dan kepuasan pelanggan secara real-time untuk pengambilan keputusan berbasis data.</p>
|
|
<button class="flex items-center gap-2 text-primary font-bold hover:underline">
|
|
Lihat Contoh Laporan <span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 w-full h-full min-h-[240px] bg-white rounded-lg border border-outline-variant/30 overflow-hidden relative">
|
|
<div class="absolute inset-0 p-6 flex flex-col gap-4">
|
|
<div class="flex justify-between items-end gap-2 h-32">
|
|
<div class="w-full bg-primary-fixed-dim rounded-t-sm group-hover:h-24 h-16 transition-all duration-1000"></div>
|
|
<div class="w-full bg-primary-container rounded-t-sm group-hover:h-28 h-20 transition-all duration-1000 delay-75"></div>
|
|
<div class="w-full bg-primary-fixed-dim rounded-t-sm group-hover:h-20 h-14 transition-all duration-1000 delay-150"></div>
|
|
<div class="w-full bg-secondary-fixed-dim rounded-t-sm group-hover:h-32 h-24 transition-all duration-1000 delay-225"></div>
|
|
<div class="w-full bg-primary-container rounded-t-sm group-hover:h-24 h-18 transition-all duration-1000 delay-300"></div>
|
|
</div>
|
|
<div class="h-px bg-outline-variant w-full"></div>
|
|
<div class="flex justify-around text-label-caps text-on-surface-variant opacity-50">
|
|
<span>Sen</span><span>Sel</span><span>Rab</span><span>Kam</span><span>Jum</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- CTA Section -->
|
|
<section class="mt-20 bg-surface-container-high rounded-3xl p-stack-lg text-center border border-outline-variant">
|
|
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md">Siap mengoptimalkan operasional Anda?</h2>
|
|
<p class="font-body-lg text-on-surface-variant mb-stack-lg max-w-2xl mx-auto">Bergabunglah dengan ratusan bisnis yang telah bertransformasi bersama Bizone. Mulai efisiensi Anda hari ini.</p>
|
|
<div class="flex flex-col md:flex-row justify-center gap-4">
|
|
<button class="bg-primary text-on-primary px-8 py-3 rounded-lg font-bold shadow-sm hover:bg-primary-container transition-all">Daftar Sekarang</button>
|
|
<button class="border border-primary text-primary px-8 py-3 rounded-lg font-bold hover:bg-primary/5 transition-all">Konsultasi Gratis</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="bg-surface-container-lowest border-t border-outline-variant mt-20">
|
|
<div class="max-w-[1440px] mx-auto px-margin-desktop py-stack-lg flex flex-col md:flex-row justify-between items-start gap-gutter">
|
|
<div class="flex flex-col gap-stack-sm max-w-sm">
|
|
<span class="text-title-md font-display-lg font-bold text-primary">Bizone</span>
|
|
<p class="font-body-sm text-on-surface-variant">Solusi manajemen bisnis all-in-one untuk pertumbuhan eksponensial di era digital.</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-stack-lg md:gap-24">
|
|
<div class="flex flex-col gap-stack-sm">
|
|
<span class="font-label-caps text-primary mb-2">Perusahaan</span>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Tentang Kami</a>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Karir</a>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Blog</a>
|
|
</div>
|
|
<div class="flex flex-col gap-stack-sm">
|
|
<span class="font-label-caps text-primary mb-2">Legal</span>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Privacy</a>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Terms</a>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Sitemap</a>
|
|
</div>
|
|
<div class="flex flex-col gap-stack-sm">
|
|
<span class="font-label-caps text-primary mb-2">Bantuan</span>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Contact</a>
|
|
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Pusat Bantuan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-[1440px] mx-auto px-margin-desktop py-stack-md border-t border-outline-variant/30 text-center md:text-left">
|
|
<p class="font-body-sm text-on-surface-variant opacity-80">© 2024 Bizone. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
</body></html> |