285 lines
18 KiB
HTML
285 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" 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;800&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"/>
|
|
<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": {
|
|
"surface-dim": "#d9d9e2",
|
|
"surface-container-high": "#e7e7f0",
|
|
"surface-bright": "#faf8ff",
|
|
"secondary-fixed-dim": "#5dd9d8",
|
|
"on-error-container": "#93000a",
|
|
"inverse-surface": "#2e3037",
|
|
"inverse-primary": "#b1c5ff",
|
|
"tertiary-fixed": "#d3e4fe",
|
|
"tertiary": "#27374c",
|
|
"on-secondary": "#ffffff",
|
|
"surface-tint": "#2559bd",
|
|
"on-tertiary-fixed-variant": "#38485d",
|
|
"on-surface-variant": "#434653",
|
|
"primary-fixed-dim": "#b1c5ff",
|
|
"surface": "#faf8ff",
|
|
"primary-fixed": "#dae2ff",
|
|
"secondary": "#006a6a",
|
|
"outline": "#737784",
|
|
"on-surface": "#191b22",
|
|
"primary-container": "#0047ab",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary-fixed": "#001946",
|
|
"surface-container-low": "#f3f3fc",
|
|
"secondary-container": "#7af2f2",
|
|
"on-secondary-fixed-variant": "#004f4f",
|
|
"on-secondary-fixed": "#002020",
|
|
"on-tertiary-container": "#afbfd9",
|
|
"on-error": "#ffffff",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-container": "#006e6e",
|
|
"inverse-on-surface": "#f0f0f9",
|
|
"outline-variant": "#c3c6d5",
|
|
"on-tertiary-fixed": "#0b1c30",
|
|
"on-primary-fixed-variant": "#00419e",
|
|
"surface-variant": "#e2e2eb",
|
|
"on-primary-container": "#a5bdff",
|
|
"on-background": "#191b22",
|
|
"surface-container": "#ededf6",
|
|
"on-primary": "#ffffff",
|
|
"secondary-fixed": "#7df5f5",
|
|
"primary": "#00327d",
|
|
"error": "#ba1a1a",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-highest": "#e2e2eb",
|
|
"background": "#faf8ff",
|
|
"tertiary-container": "#3e4e63",
|
|
"tertiary-fixed-dim": "#b7c8e1"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"stack-lg": "32px",
|
|
"gutter": "24px",
|
|
"margin-mobile": "16px",
|
|
"stack-md": "16px",
|
|
"container-max": "1440px",
|
|
"stack-sm": "8px",
|
|
"margin-desktop": "40px",
|
|
"unit": "4px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-lg-mobile": ["Manrope"],
|
|
"title-md": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"headline-lg": ["Manrope"],
|
|
"body-lg": ["Inter"],
|
|
"display-lg": ["Manrope"]
|
|
},
|
|
"fontSize": {
|
|
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"title-md": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background antialiased">
|
|
<!-- TopNavBar -->
|
|
<header class="docked full-width top-0 sticky z-50 bg-surface/90 dark:bg-surface-container/90 backdrop-blur-md border-b border-outline-variant dark:border-outline shadow-sm dark:shadow-none">
|
|
<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-gutter">
|
|
<span class="text-title-md font-display-lg font-bold text-primary dark:text-primary-fixed">Bizone</span>
|
|
<nav class="hidden md:flex gap-6">
|
|
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">Home</a>
|
|
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">Features</a>
|
|
<a class="font-body-lg text-body-lg text-primary dark:text-primary-fixed font-bold border-b-2 border-primary pb-1" href="#">Solutions</a>
|
|
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">About</a>
|
|
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">Contact</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="hidden md:block bg-primary text-on-primary px-6 py-2.5 rounded-lg font-label-caps text-label-caps scale-95 active:scale-90 transition-transform hover:bg-primary-container">Jadwalkan Demo</button>
|
|
<button class="md:hidden p-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative overflow-hidden pt-20 pb-32 md:pt-32 md:pb-48">
|
|
<div class="absolute inset-0 -z-10 bg-[radial-gradient(45%_45%_at_50%_50%,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent"></div>
|
|
<div class="max-w-[1440px] mx-auto px-margin-desktop text-center">
|
|
<span class="inline-block font-label-caps text-label-caps text-secondary bg-secondary-container/20 px-4 py-1.5 rounded-full mb-6">SOLUSI TERINTEGRASI</span>
|
|
<h1 class="font-display-lg text-display-lg text-on-surface max-w-4xl mx-auto mb-gutter leading-tight">
|
|
Solusi untuk kebutuhan bisnis nyata
|
|
</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-10">
|
|
Bizone menyatukan komunikasi, operasional, dan kolaborasi tim dalam satu platform yang dirancang untuk mempercepat pertumbuhan bisnis Anda di era digital.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
<button class="bg-primary text-on-primary px-8 py-4 rounded-xl font-title-md text-title-md hover:shadow-lg transition-all">Mulai Gratis</button>
|
|
<button class="bg-surface-container-lowest border border-outline-variant text-on-surface px-8 py-4 rounded-xl font-title-md text-title-md hover:bg-surface-container-low transition-all">Pelajari Lebih Lanjut</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Use Cases Bento Grid -->
|
|
<section class="py-24 bg-surface-container-low">
|
|
<div class="max-w-[1440px] mx-auto px-margin-desktop">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
|
|
<!-- Customer Service -->
|
|
<div class="md:col-span-7 bg-surface-container-lowest p-10 rounded-[2rem] border border-outline-variant shadow-sm flex flex-col justify-between group hover:shadow-md transition-shadow">
|
|
<div>
|
|
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">support_agent</span>
|
|
</div>
|
|
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-4">Customer Service</h3>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8 max-w-md">
|
|
Kelola setiap pertanyaan dan keluhan pelanggan dengan sistem tiket yang cerdas. Pastikan tidak ada pesan yang terlewat dan tingkatkan kepuasan pelanggan secara signifikan.
|
|
</p>
|
|
</div>
|
|
<div class="relative rounded-2xl overflow-hidden aspect-[21/9]">
|
|
<img class="w-full h-full object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500" data-alt="A professional customer support representative wearing a sleek headset, smiling warmly in a bright modern office with soft blue ambient lighting. The background features blurred digital dashboards showing customer satisfaction metrics, conveying a sense of reliability, empathy, and efficient professional service in a corporate SaaS environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnI1By6Ac42GnWUl5lv_stkaf8WgT3o9cXSbkAWad5YmYci1IFuJPefmAeefWfHNY4sGYLp0vki3u2wptSG5cDQRZ8Mpadu7ekEWiIt5ykDJffN3ZYAIoyWx9bYI6TDt679IhDQsPqRDlvCUcDsW8vGE0-gIlASiJoCScTSXaSNIs8SJQQSzwNlvyLQUNL2Jgph7ps6ZXtz0MEpeaUo9iStbC_NrShr3L6F764jDcGsj2M-xS0UcnV97x9peH3zVt2zEo55lykhyFS"/>
|
|
</div>
|
|
</div>
|
|
<!-- Sales & Lead Follow Up -->
|
|
<div class="md:col-span-5 bg-tertiary text-on-tertiary p-10 rounded-[2rem] shadow-sm flex flex-col group hover:shadow-lg transition-shadow">
|
|
<div class="w-12 h-12 rounded-xl bg-tertiary-container flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-tertiary-fixed" style="font-variation-settings: 'FILL' 1;">rocket_launch</span>
|
|
</div>
|
|
<h3 class="font-headline-lg text-headline-lg mb-4">Sales & Lead Follow Up</h3>
|
|
<p class="font-body-lg text-body-lg text-on-tertiary-container mb-8">
|
|
Tanggapi calon pelanggan dalam hitungan detik. Gunakan automasi cerdas untuk memprioritaskan lead berkualitas tinggi dan tingkatkan rasio konversi tim penjualan Anda.
|
|
</p>
|
|
<div class="mt-auto pt-8 border-t border-tertiary-container/50">
|
|
<ul class="space-y-4">
|
|
<li class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
|
|
<span class="font-body-sm text-body-sm">Respon otomatis instan</span>
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
|
|
<span class="font-body-sm text-body-sm">Pelacakan pipeline real-time</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Multi-Team Coordination -->
|
|
<div class="md:col-span-5 bg-secondary-container/20 p-10 rounded-[2rem] border border-secondary/10 flex flex-col group hover:bg-secondary-container/30 transition-all">
|
|
<div class="w-12 h-12 rounded-xl bg-secondary text-on-secondary flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined">groups</span>
|
|
</div>
|
|
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-4">Multi-Team Coordination</h3>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-6">
|
|
Satukan kerja tim lintas departemen. Berbagi informasi secara transparan dan koordinasikan tugas tanpa hambatan komunikasi.
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl text-center">
|
|
<span class="block font-headline-lg text-headline-lg text-secondary">40%</span>
|
|
<span class="font-label-caps text-label-caps text-on-surface-variant">Efisiensi</span>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl text-center">
|
|
<span class="block font-headline-lg text-headline-lg text-secondary">2x</span>
|
|
<span class="font-label-caps text-label-caps text-on-surface-variant">Kecepatan</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Order & Service Operations -->
|
|
<div class="md:col-span-7 bg-surface-container-lowest p-10 rounded-[2rem] border border-outline-variant shadow-sm flex flex-col md:flex-row gap-8 group">
|
|
<div class="flex-1">
|
|
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">inventory_2</span>
|
|
</div>
|
|
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-4">Order & Service Operations</h3>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">
|
|
Hubungkan setiap pesan pelanggan langsung dengan proses operasional. Dari pesanan masuk hingga pengiriman, pantau semuanya dalam satu alur kerja yang terintegrasi.
|
|
</p>
|
|
</div>
|
|
<div class="flex-1 bg-surface-container-low rounded-2xl p-6 flex flex-col gap-4 border border-outline-variant/30">
|
|
<div class="bg-white p-3 rounded-lg shadow-sm border-l-4 border-primary flex justify-between items-center">
|
|
<span class="font-body-sm text-body-sm font-semibold">Pesanan #1024</span>
|
|
<span class="text-[10px] bg-secondary-container text-on-secondary-container px-2 py-0.5 rounded">Diproses</span>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm border-l-4 border-outline flex justify-between items-center opacity-60">
|
|
<span class="font-body-sm text-body-sm font-semibold">Pesanan #1023</span>
|
|
<span class="text-[10px] bg-surface-dim text-on-surface-variant px-2 py-0.5 rounded">Selesai</span>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm border-l-4 border-primary flex justify-between items-center">
|
|
<span class="font-body-sm text-body-sm font-semibold">Pesanan #1025</span>
|
|
<span class="text-[10px] bg-primary-container text-on-primary-container px-2 py-0.5 rounded">Baru</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- CTA Section -->
|
|
<section class="py-24 max-w-[1440px] mx-auto px-margin-desktop">
|
|
<div class="bg-primary-container rounded-[3rem] p-12 md:p-24 text-center text-on-primary-container relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-32 -mt-32"></div>
|
|
<div class="absolute bottom-0 left-0 w-64 h-64 bg-white/5 rounded-full -ml-32 -mb-32"></div>
|
|
<h2 class="font-display-lg text-display-lg mb-6 text-white">Siap mengoptimalkan operasional Anda?</h2>
|
|
<p class="font-body-lg text-body-lg mb-12 max-w-2xl mx-auto opacity-90 text-primary-fixed">
|
|
Bergabunglah dengan ratusan bisnis yang telah bertransformasi bersama Bizone. Dapatkan kendali penuh atas komunikasi dan operasional Anda hari ini.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-gutter">
|
|
<button class="bg-white text-primary px-10 py-5 rounded-2xl font-title-md text-title-md hover:shadow-xl transition-all scale-100 hover:scale-105 active:scale-95">Daftar Sekarang</button>
|
|
<button class="border-2 border-primary-fixed text-primary-fixed px-10 py-5 rounded-2xl font-title-md text-title-md hover:bg-white/10 transition-all">Konsultasi Gratis</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="bg-surface-container-lowest dark:bg-surface-dim border-t border-outline-variant dark:border-outline">
|
|
<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 w-full">
|
|
<div class="flex flex-col gap-4">
|
|
<span class="text-title-md font-display-lg font-bold text-primary dark:text-primary-fixed">Bizone</span>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs">
|
|
Platform manajemen bisnis terpadu untuk pertumbuhan yang berkelanjutan.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-12 gap-y-8">
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-label-caps text-on-surface font-bold uppercase">Produk</span>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Fitur Utama</a>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Integrasi</a>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Harga</a>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-label-caps text-on-surface font-bold uppercase">Perusahaan</span>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Sitemap</a>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Contact</a>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Privacy</a>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Terms</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-[1440px] mx-auto px-margin-desktop py-6 border-t border-outline-variant/30">
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-60">© 2024 Bizone. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
</body></html> |