wirabasalamah/BizOne-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Bizone Next.js website

Browse Source
This commit is contained in:
Wira Irawan
2026-05-12 14:06:52 +07:00
commit 6206154aa1
53 changed files with 11209 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
stitch_www.bizone.id/fitur_bizone/code.html Normal file
View File

@ -0,0 +1,286 @@
<!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&amp;family=Manrope:wght@600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

BIN
stitch_www.bizone.id/fitur_bizone/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

326
stitch_www.bizone.id/home_bizone/code.html Normal file
View File

@ -0,0 +1,326 @@
<!DOCTYPE html>
<html lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Bizone - Semua Bisnis dalam Satu Tempat</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&amp;family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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;
vertical-align: middle;
}
.glass-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.5);
}
</style>
</head>
<body class="bg-background text-on-surface font-body-lg overflow-x-hidden">
<!-- TopNavBar -->
<header class="bg-surface/90 dark:bg-surface-container/90 backdrop-blur-md docked full-width top-0 sticky border-b border-outline-variant dark:border-outline shadow-sm dark:shadow-none z-50">
<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 dark:text-primary-fixed">Bizone</span>
<nav class="hidden md:flex gap-gutter">
<a class="text-primary dark:text-primary-fixed font-bold border-b-2 border-primary pb-1 font-label-caps text-label-caps" href="#">Home</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-label-caps text-label-caps" href="#">Features</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-label-caps text-label-caps" href="#">Solutions</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-label-caps text-label-caps" href="#">About</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-label-caps text-label-caps" href="#">Contact</a>
</nav>
</div>
<button class="bg-primary text-on-primary px-stack-lg py-stack-sm rounded-lg font-label-caps text-label-caps scale-95 active:scale-90 transition-transform hover:bg-primary-container">
Jadwalkan Demo
</button>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="relative pt-stack-lg pb-24 px-margin-mobile md:px-margin-desktop max-w-[1440px] mx-auto overflow-hidden">
<div class="flex flex-col md:flex-row items-center gap-stack-lg">
<div class="flex-1 text-center md:text-left z-10">
<h1 class="font-display-lg text-display-lg text-primary mb-stack-md leading-tight">
Semua bisnis dalam satu tempat
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-stack-lg max-w-xl mx-auto md:mx-0">
Bizone membantu bisnis mengelola komunikasi pelanggan, operasional tim, automasi alur kerja, kontak, dan proses bisnis dalam satu platform yang terhubung.
</p>
<div class="flex flex-col sm:flex-row gap-stack-md justify-center md:justify-start">
<button class="bg-primary text-on-primary px-8 py-4 rounded-lg font-bold shadow-lg hover:bg-primary-container transition-all">
Jadwalkan Demo
</button>
<button class="border-2 border-secondary text-secondary px-8 py-4 rounded-lg font-bold hover:bg-secondary-container transition-all">
Pelajari Fitur
</button>
</div>
</div>
<div class="flex-1 w-full relative">
<div class="relative rounded-xl overflow-hidden shadow-2xl border border-outline-variant">
<img alt="Dashboard Bizone" class="w-full h-auto object-cover" data-alt="A clean and sophisticated user interface of a business management dashboard displayed on a sleek monitor. The UI features professional blue and teal color accents, minimalist data visualizations, and organized navigation menus. The setting is a bright, modern corporate office with soft natural lighting and a minimalist aesthetic that conveys productivity and technological advancement." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB5IHP8X-W24wR6qGT_XcZCvk0hukZ6Ous1KzTyT1zCUO0BMvEmd2Bpppf3My4pLYbjxzMXuG8RvV71ekUI0g_HYBMyIgjTVoRb5G-zYBtQQu7MUolm5fzyL1cu9kGgfO5mnFVQxRpF8yqq8UsjOzbFkH3odIUe6ttj3VPaGuhkKjfACpMAO4uBKSIjiOTU4pXw0uTgqbFRwS4t8QebmdtBRBl0lLtRbTJsSzpL4eHIBzfQPv0IPwCUWVgZCX3XCHR0pPke1E1TAyAD"/>
</div>
<!-- Decorative Elements -->
<div class="absolute -top-6 -right-6 w-32 h-32 bg-secondary-container rounded-full opacity-30 blur-3xl"></div>
<div class="absolute -bottom-10 -left-10 w-48 h-48 bg-primary-fixed rounded-full opacity-20 blur-3xl"></div>
</div>
</div>
</section>
<!-- Problem Section (Bento Inspired) -->
<section class="bg-surface-container px-margin-mobile md:px-margin-desktop py-24">
<div class="max-w-[1440px] mx-auto">
<div class="text-center mb-16">
<span class="font-label-caps text-label-caps text-secondary bg-secondary-container/20 px-3 py-1 rounded-full">Tantangan Bisnis</span>
<h2 class="font-headline-lg text-headline-lg text-on-surface mt-stack-sm">Apakah operasional Anda terfragmentasi?</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="md:col-span-2 glass-card p-stack-lg rounded-xl flex flex-col md:flex-row items-center gap-gutter">
<div class="flex-1">
<span class="material-symbols-outlined text-primary text-5xl mb-stack-md" data-icon="forum">forum</span>
<h3 class="font-title-md text-title-md mb-stack-sm">Chat yang Berantakan</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Tim Anda kesulitan melacak pesan pelanggan yang tersebar di WhatsApp, Email, dan media sosial. Informasi hilang di tengah kebisingan.</p>
</div>
<div class="flex-1">
<img alt="Fragmented Communication" class="rounded-lg shadow-md grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional team in a modern office looking overwhelmed while checking multiple devices and computer screens. The lighting is slightly moody with cool blue tones, highlighting the stress of fragmented digital communication. The environment is high-tech but cluttered, illustrating the chaos of manual workflows in a corporate setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCeAyjQ4Fso0-sxQ2u5dFSgQJs1QqgpwirS7xd2vCrgDr5j4v5WNk3lfBXPYZVuj_cqtIrwj_b7RLhPrykqje-_r8KTFdAsD7PRbr-8QtM6KMn4hiEP8Qi2BbEz0tWmtufc161PxwTmbWipxtWvVSKqFmMg3NiZQewRl074Cb7dgjWi1wARpoapFLBKdvozYKJl4sVIXAAQfaJ-J0BADkEdD2Kr01BpypyFQkHrmMxSInHYnSbrMiL82jj2gKIgvqNp_wfI-JpiP9Ey"/>
</div>
</div>
<div class="glass-card p-stack-lg rounded-xl">
<span class="material-symbols-outlined text-primary text-5xl mb-stack-md" data-icon="sync_problem">sync_problem</span>
<h3 class="font-title-md text-title-md mb-stack-sm">Workflow Manual</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Terlalu banyak tugas berulang yang menghabiskan waktu berharga tim Anda setiap harinya.</p>
</div>
</div>
</div>
</section>
<!-- Features Grid -->
<section class="py-24 px-margin-mobile md:px-margin-desktop max-w-[1440px] mx-auto">
<div class="text-center mb-16">
<span class="font-label-caps text-label-caps text-primary bg-primary-fixed px-3 py-1 rounded-full">Fitur Utama</span>
<h2 class="font-headline-lg text-headline-lg text-on-surface mt-stack-sm">Solusi Terintegrasi untuk Pertumbuhan</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
<!-- Feature 1 -->
<div class="p-stack-lg border border-outline-variant rounded-xl hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 bg-primary-fixed text-primary rounded-lg flex items-center justify-center mb-stack-md group-hover:bg-primary group-hover:text-on-primary transition-colors">
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
</div>
<h3 class="font-title-md text-title-md mb-stack-sm">Shared Inbox</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Kelola semua percakapan pelanggan dari berbagai platform dalam satu kotak masuk terpadu.</p>
</div>
<!-- Feature 2 -->
<div class="p-stack-lg border border-outline-variant rounded-xl hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 bg-secondary-container text-secondary rounded-lg flex items-center justify-center mb-stack-md group-hover:bg-secondary group-hover:text-on-secondary transition-colors">
<span class="material-symbols-outlined" data-icon="contact_page">contact_page</span>
</div>
<h3 class="font-title-md text-title-md mb-stack-sm">Contact Management</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Database pelanggan yang terorganisir dengan riwayat interaksi lengkap untuk personalisasi layanan.</p>
</div>
<!-- Feature 3 -->
<div class="p-stack-lg border border-outline-variant rounded-xl hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 bg-tertiary-fixed text-tertiary rounded-lg flex items-center justify-center mb-stack-md group-hover:bg-tertiary group-hover:text-on-tertiary transition-colors">
<span class="material-symbols-outlined" data-icon="bolt">bolt</span>
</div>
<h3 class="font-title-md text-title-md mb-stack-sm">Workflow Automation</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Otomatisasi tugas rutin sehingga tim Anda dapat fokus pada hal-hal yang benar-benar penting.</p>
</div>
<!-- Feature 4 -->
<div class="p-stack-lg border border-outline-variant rounded-xl hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 bg-primary-fixed-dim text-on-primary-fixed-variant rounded-lg flex items-center justify-center mb-stack-md group-hover:bg-on-primary-fixed-variant group-hover:text-primary-fixed transition-colors">
<span class="material-symbols-outlined" data-icon="groups">groups</span>
</div>
<h3 class="font-title-md text-title-md mb-stack-sm">Team Collaboration</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Berikan tugas, tambahkan catatan internal, dan berkolaborasi secara real-time antar departemen.</p>
</div>
</div>
</section>
<!-- Benefits Section (Asymmetric) -->
<section class="bg-surface-container-low py-24 overflow-hidden">
<div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-desktop">
<div class="flex flex-col lg:flex-row items-center gap-16">
<div class="lg:w-1/2 relative">
<div class="relative z-10 grid grid-cols-2 gap-4">
<div class="mt-12">
<img alt="Team collaboration" class="rounded-xl shadow-lg transform -rotate-3" data-alt="A diverse group of professional colleagues working together harmoniously around a minimalist white table in a sun-drenched modern workspace. The atmosphere is vibrant and positive, characterized by warm light and a professional SaaS aesthetic. Soft blue and teal accents appear in their digital tools, symbolizing efficient team collaboration and structured growth." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4a-6EKs10KIgzyNmw_eOHNRDt2i23eLGKgDQIOjbXRu0X_zIIX0S8rBIRQOo9qOvgqI4HAwzkgk079UdAVeAuho0xwqg0PcBPW59z2wjPYEh51T_Ht7OOnWaQUf5tezExXi7lAwq3MtgPoPwKYH6aZGEUJr5mbw_9NDIkJErJqFlppDtI8VRXcvhH6Y-UzZb-Xz3LgvOwgNfDfNf-0HAQuqg6jRbB1JtP054JZxLqhn8yXkqGgaqzu61gMbffCUmuXROCsNd9F74i"/>
</div>
<div>
<img alt="Focused work" class="rounded-xl shadow-lg transform rotate-3" data-alt="A high-angle shot of a minimalist, clean desk setup with a laptop and a notebook, featuring soft professional lighting and a cool color palette. The image conveys a sense of organized operations and scalable business processes. The background is a blurred office interior, emphasizing focus and efficiency in a modern corporate environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOMuYHTym6xg3ghEHVj_tu4XY8vux6XQtuPt2LnMUWza3E5sjjHiDyQZ6QNWZDKXvP2yO_Es3dCogJfvMRHb6K0ak8CbIheVsYYEu3NCmyYfIV8HupDNtNWGIb6-VosuyvHuNvWGtYF18J-uYnFFhd8iuT2BXOgH5QDMPOfuYi7viX0_QKaMM5MWA4hUx-FcegPmBs41SagHksMANb25T797quFW3K8RFdN4XoxvkAlSBPMxqvHHK75j_-_GpUS1EhR727FUUTmgzS"/>
</div>
</div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-primary/5 rounded-full blur-3xl -z-10"></div>
</div>
<div class="lg:w-1/2">
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-stack-lg">Mengapa Memilih Bizone?</h2>
<ul class="space-y-stack-lg">
<li class="flex gap-stack-md">
<span class="material-symbols-outlined text-secondary font-bold" data-icon="check_circle">check_circle</span>
<div>
<h4 class="font-title-md text-title-md text-primary">Operasional Lebih Rapi</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Sistematisasi seluruh proses bisnis Anda untuk menghilangkan kebingungan tim.</p>
</div>
</li>
<li class="flex gap-stack-md">
<span class="material-symbols-outlined text-secondary font-bold" data-icon="check_circle">check_circle</span>
<div>
<h4 class="font-title-md text-title-md text-primary">Respon Lebih Cepat</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Kurangi waktu tunggu pelanggan dengan sistem inbox pusat yang responsif.</p>
</div>
</li>
<li class="flex gap-stack-md">
<span class="material-symbols-outlined text-secondary font-bold" data-icon="check_circle">check_circle</span>
<div>
<h4 class="font-title-md text-title-md text-primary">Siap untuk Skalabilitas</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Infrastruktur yang dirancang untuk tumbuh bersama bisnis Anda tanpa hambatan teknis.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-24 px-margin-mobile md:px-margin-desktop">
<div class="max-w-4xl mx-auto bg-primary rounded-3xl p-stack-lg md:p-20 text-center relative overflow-hidden shadow-2xl">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="grid grid-cols-12 gap-2 h-full w-full">
<div class="col-span-1 border-r border-on-primary"></div>
<div class="col-span-1 border-r border-on-primary"></div>
<div class="col-span-1 border-r border-on-primary"></div>
<div class="col-span-1 border-r border-on-primary"></div>
</div>
</div>
<h2 class="font-display-lg text-headline-lg md:text-display-lg text-on-primary mb-stack-lg relative z-10">
Bangun operasional bisnis yang lebih terintegrasi
</h2>
<p class="font-body-lg text-on-primary-container mb-stack-lg max-w-2xl mx-auto relative z-10">
Bergabunglah dengan ratusan bisnis yang telah mengoptimalkan produktivitas mereka dengan Bizone.
</p>
<div class="relative z-10">
<button class="bg-secondary text-on-secondary px-10 py-5 rounded-full font-bold text-lg shadow-xl hover:bg-secondary/90 transition-all active:scale-95">
Daftar Sekarang
</button>
<p class="font-label-caps text-label-caps text-on-primary-container mt-stack-md">Gratis uji coba selama 14 hari. Tanpa kartu kredit.</p>
</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">
<div class="max-w-xs">
<span class="text-title-md font-display-lg font-bold text-primary dark:text-primary-fixed mb-stack-sm block">Bizone</span>
<p class="font-body-sm text-body-sm text-on-surface-variant">Solusi all-in-one untuk manajemen bisnis modern yang membantu Anda tumbuh lebih cepat.</p>
</div>
<div class="flex flex-wrap gap-stack-lg">
<nav class="flex gap-stack-md">
<a class="text-on-surface-variant hover:underline decoration-secondary underline-offset-4 font-label-caps text-label-caps transition-opacity opacity-80 hover:opacity-100" href="#">Sitemap</a>
<a class="text-on-surface-variant hover:underline decoration-secondary underline-offset-4 font-label-caps text-label-caps transition-opacity opacity-80 hover:opacity-100" href="#">Contact</a>
<a class="text-on-surface-variant hover:underline decoration-secondary underline-offset-4 font-label-caps text-label-caps transition-opacity opacity-80 hover:opacity-100" href="#">Privacy</a>
<a class="text-on-surface-variant hover:underline decoration-secondary underline-offset-4 font-label-caps text-label-caps transition-opacity opacity-80 hover:opacity-100" href="#">Terms</a>
</nav>
</div>
</div>
<div class="max-w-[1440px] mx-auto px-margin-desktop py-stack-md border-t border-outline-variant/30 flex justify-between items-center">
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-70">© 2024 Bizone. All rights reserved.</p>
<div class="flex gap-stack-sm">
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary" data-icon="language">language</span>
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary" data-icon="share">share</span>
</div>
</div>
</footer>
</body></html>

BIN
stitch_www.bizone.id/home_bizone/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

291
stitch_www.bizone.id/kontak_bizone/code.html Normal file
View File

@ -0,0 +1,291 @@
<!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&amp;family=Manrope:wght@600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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;
}
.glass-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.8);
}
</style>
</head>
<body class="bg-background text-on-background font-body-lg selection:bg-primary-fixed selection:text-on-primary-fixed">
<!-- TopAppBar -->
<nav class="bg-surface/90 backdrop-blur-md border-b border-outline-variant dock-full-width top-0 sticky z-50 shadow-sm">
<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>
<div class="hidden md:flex gap-gutter items-center">
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg" href="#">Home</a>
<a class="text-on-surface-variant hover:text-primary transition-colors 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-primary font-bold border-b-2 border-primary pb-1 font-body-lg" href="#">Contact</a>
</div>
</div>
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-label-caps scale-95 active:scale-90 transition-all hover:bg-primary-container shadow-md">
Jadwalkan Demo
</button>
</div>
</nav>
<main class="min-h-screen overflow-x-hidden">
<!-- Hero Section & Contact Intro -->
<section class="relative py-stack-lg md:py-24 bg-gradient-to-b from-surface to-surface-container-low overflow-hidden">
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="absolute -top-24 -right-24 w-96 h-96 bg-secondary-fixed rounded-full blur-3xl"></div>
<div class="absolute top-1/2 -left-24 w-64 h-64 bg-primary-fixed rounded-full blur-3xl"></div>
</div>
<div class="max-w-[1440px] mx-auto px-margin-desktop grid grid-cols-1 md:grid-cols-12 gap-gutter items-center relative z-10">
<div class="md:col-span-7 space-y-stack-md">
<h1 class="font-display-lg text-display-lg text-primary tracking-tight">Hubungi Bizone</h1>
<p class="font-body-lg text-on-surface-variant max-w-xl text-lg leading-relaxed">
Ingin melihat bagaimana Bizone dapat membantu operasional bisnis Anda? Hubungi kami untuk konsultasi atau demo gratis dengan tim ahli kami.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-stack-md pt-stack-lg">
<div class="flex items-center gap-stack-md p-stack-md rounded-xl bg-surface-container-lowest border border-outline-variant hover:shadow-lg hover:border-primary transition-all group">
<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center text-primary">
<span class="material-symbols-outlined">language</span>
</div>
<div>
<p class="text-label-caps text-on-surface-variant">Website</p>
<p class="font-title-md text-primary">bizone.id</p>
</div>
</div>
<div class="flex items-center gap-stack-md p-stack-md rounded-xl bg-surface-container-lowest border border-outline-variant hover:shadow-lg hover:border-primary transition-all group">
<div class="w-12 h-12 rounded-lg bg-secondary-fixed flex items-center justify-center text-secondary">
<span class="material-symbols-outlined">mail</span>
</div>
<div>
<p class="text-label-caps text-on-surface-variant">Email</p>
<p class="font-title-md text-primary">info@bizone.id</p>
</div>
</div>
<div class="flex items-center gap-stack-md p-stack-md rounded-xl bg-surface-container-lowest border border-outline-variant hover:shadow-lg hover:border-primary transition-all group sm:col-span-2">
<div class="w-12 h-12 rounded-lg bg-on-primary-container flex items-center justify-center text-on-primary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">chat</span>
</div>
<div>
<p class="text-label-caps text-on-surface-variant">WhatsApp Business</p>
<p class="font-title-md text-primary">+6281535221121</p>
</div>
</div>
</div>
</div>
<!-- Contact Form Card -->
<div class="md:col-span-5">
<div class="glass-card p-stack-lg rounded-2xl shadow-xl">
<h3 class="font-headline-lg text-headline-lg text-primary mb-stack-md">Mulai Konsultasi</h3>
<form action="#" class="space-y-stack-md">
<div class="space-y-unit">
<label class="font-label-caps text-on-surface-variant block ml-1">Name</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all outline-none text-on-surface font-body-sm" placeholder="Nama Lengkap" type="text"/>
</div>
<div class="space-y-unit">
<label class="font-label-caps text-on-surface-variant block ml-1">Business Name</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all outline-none text-on-surface font-body-sm" placeholder="Nama Perusahaan/Bisnis" type="text"/>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-stack-md">
<div class="space-y-unit">
<label class="font-label-caps text-on-surface-variant block ml-1">Email</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all outline-none text-on-surface font-body-sm" placeholder="alamat@email.com" type="email"/>
</div>
<div class="space-y-unit">
<label class="font-label-caps text-on-surface-variant block ml-1">WhatsApp Number</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all outline-none text-on-surface font-body-sm" placeholder="+62..." type="tel"/>
</div>
</div>
<div class="space-y-unit">
<label class="font-label-caps text-on-surface-variant block ml-1">Needs</label>
<textarea class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all outline-none text-on-surface font-body-sm" placeholder="Ceritakan kebutuhan operasional bisnis Anda..." rows="3"></textarea>
</div>
<button class="w-full bg-primary text-on-primary py-4 rounded-lg font-label-caps hover:bg-primary-container transition-all active:scale-95 shadow-lg flex items-center justify-center gap-stack-sm" type="submit">
Submit <span class="material-symbols-outlined text-[18px]">send</span>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Image Bento Section -->
<section class="py-24 bg-surface">
<div class="max-w-[1440px] mx-auto px-margin-desktop">
<div class="grid grid-cols-1 md:grid-cols-4 grid-rows-2 gap-gutter h-[600px]">
<div class="md:col-span-2 md:row-span-2 rounded-2xl overflow-hidden relative group">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A professional business team collaborating in a bright modern office with floor-to-ceiling windows. The environment uses a clean professional blue and white color palette, with soft natural sunlight creating an atmosphere of growth and structural clarity. The composition is dynamic, showing professional interaction in a high-density, corporate SaaS aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYiMCXNmHfexoml4H0RnjA6ntdPTVhQppZ28hLUZq3GzZ81HStgosBKl6fa4YQhCw2huMeOVp_72ebumuPw46M719z-dRWqWHN8Jwrkr25YTYqrG0K20PkiSot9918y715WLZ1xEpF7ko5cD9e7frJB5WXiih9BWigB2zg33h7sSfOCgj-8GK1d_LRehsEFBK3FdynHnT6QGhE8PPOF9D3jGjVKxBqJrh2RcWMRY6Enpm-XrtMs2LRQhSH-vsOJeZA5fKNYzfxXQiW"/>
<div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent flex flex-col justify-end p-stack-lg">
<span class="text-on-primary font-label-caps mb-unit">Modern Workspace</span>
<h4 class="text-on-primary font-headline-lg">Solusi Terpadu untuk Tim</h4>
</div>
</div>
<div class="md:col-span-1 rounded-2xl overflow-hidden relative group">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A detailed dashboard displaying clean data visualizations on a high-resolution screen within a corporate setting. The charts use primary deep blue and teal accents against a pristine light-mode background. The mood is systematic and precise, emphasizing professional data management and business intelligence for modern enterprise teams." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAHaFE00bSDik6GhEP9QlABsiZPM92ywxSTbatjch1_nyXSYVZOsCRWhJpX0rUW9bKRO2uaD05tuBsAsU40cJUJUkVHJxhMq1vC7rLf7x_dex4PG0-pqkS733pangKpajdVuUNDAXuLJjZuKqi3aOGwN413LqFkkeMaCIr8eJd0JKC_P362oOIy18mbdGj-2MQar11EqDudF90sNmIijZqmLMQHQy8fHuW-rORWLgOPxc0OZgGInz84Rnpu7wYouh08yBR_Ds6B8KJi"/>
</div>
<div class="md:col-span-1 rounded-2xl overflow-hidden relative group">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A close-up shot of professional hands interacting with a sleek tablet interface, reflecting a modern SaaS environment. The scene is illuminated by soft, diffused lighting with a corporate blue color theme. The visual style is minimal and high-tech, highlighting accessibility and forward-thinking technological solutions for businesses." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDQywrUF6N81hEG9uFzf98fKU40L56_RCPbx3DV3H11x_qLwnqnnNqh6ioWJ5sa_EkmHsxfksa9LKjgnHoEpCoSfPvRhkkcrfYCF3d9pgTr8nOfC3nl84zQA1_vpRYipEpnrbhJE15thyIcAJUORY6w5dJAvCsMm99a5NMA1lczwzoPnbZGyXA8S5IggDkZN7egeFngM0aogPem9EXcYldFdHHp7eQURHKlSm3nfVE7bgMdUN3SF-lfRwmXBladBjNb6OHdKXCDiven"/>
</div>
<div class="md:col-span-2 rounded-2xl overflow-hidden relative group">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A wide perspective of a contemporary corporate lobby with clean lines and architectural elegance. The space is filled with soft teal and blue light reflections on polished surfaces, creating a sense of reliability and enterprise stability. The aesthetic is futuristic yet approachable, embodying the core identity of a forward-moving tech company." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnb9ElF-mUiG6NpqCHmNGfIOQRv3pGYW5gEvyyKkPyqWecO62CbiFO8OHfmohDdAO4xamavwZJYe7svUkzGvZ70jdo3X02VQ_GyB-Q0sbrnJJC4cj47my9uFsZJzVUkJN3dMn04-mZytAN3kX7NTAgZRf3DgNtwvS-RANOD-dUwEERdYY0N5mad9-nLPbpouVxeGBEkVd6Evrdz-BeSYgODlxhYoEqefd6cadzZw4i4cvmi-2rUMWWkAljM35aauMEXsMmxeRbjy_i"/>
<div class="absolute inset-0 bg-gradient-to-r from-secondary/60 to-transparent flex flex-col justify-center p-stack-lg">
<h4 class="text-on-primary font-title-md max-w-xs">Membangun Masa Depan Operasional Bisnis Bersama Bizone</h4>
</div>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<section class="py-stack-lg">
<div class="max-w-[1440px] mx-auto px-margin-desktop">
<div class="w-full h-[400px] rounded-3xl overflow-hidden shadow-sm border border-outline-variant relative">
<img class="w-full h-full object-cover" data-alt="A stylized, high-contrast professional map of Jakarta, Indonesia, using a monochromatic blue and gray color scheme that fits a corporate light-mode dashboard. The map highlights key business districts with subtle glowing markers in teal. The aesthetic is clean, flat, and modern, prioritizing legibility and structural geographic order." data-location="Jakarta" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBuMl7d_I4jogP7_oDIjTd7VibOtXKqlnLh347NcuCwjNfVnbpHKMmVJO3kyDujj24F9QgiGY8jI7Wp1lJcm3-Ma4W2LBX86gTFDXXQqdGbGVqQUI6tOJFWNHJYfvPq8XiIKPdx-hMYjjnPBCYUGrtRUAcMt-_pobqFPsod1JWjvEzu6Hs8vYYHxe6oZs4y6CPmvZad5hfKb4od8PEeJWJ4K9KYFYZPQ4GSHciy_1FpOa5NiDPKdbX1pv6lUSUi7wU0AGC2QLd3kUvB"/>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<div class="w-12 h-12 bg-primary text-on-primary rounded-full flex items-center justify-center shadow-2xl animate-bounce">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">location_on</span>
</div>
<div class="mt-stack-sm bg-white p-stack-sm rounded-lg shadow-lg border border-outline-variant">
<p class="font-label-caps text-primary">Bizone Headquarters</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-surface-container-lowest border-t border-outline-variant">
<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="space-y-stack-md">
<span class="text-title-md font-display-lg font-bold text-primary">Bizone</span>
<p class="font-body-sm text-on-surface-variant max-w-xs">Solusi manajemen bisnis modern untuk efisiensi maksimal dan pertumbuhan yang terukur.</p>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-gutter w-full md:w-auto">
<div class="flex flex-col gap-unit">
<span class="font-label-caps text-on-surface-variant mb-unit">Links</span>
<a class="font-body-sm text-on-surface-variant hover:underline hover:text-secondary decoration-secondary underline-offset-4 transition-colors" href="#">Sitemap</a>
<a class="font-body-sm text-on-surface-variant hover:underline hover:text-secondary decoration-secondary underline-offset-4 transition-colors" href="#">Contact</a>
</div>
<div class="flex flex-col gap-unit">
<span class="font-label-caps text-on-surface-variant mb-unit">Legal</span>
<a class="font-body-sm text-on-surface-variant hover:underline hover:text-secondary decoration-secondary underline-offset-4 transition-colors" href="#">Privacy</a>
<a class="font-body-sm text-on-surface-variant hover:underline hover:text-secondary decoration-secondary underline-offset-4 transition-colors" href="#">Terms</a>
</div>
<div class="sm:col-span-2">
<span class="font-label-caps text-on-surface-variant mb-unit">Ikuti Kami</span>
<div class="flex gap-stack-sm">
<a class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center hover:bg-primary-fixed-dim transition-colors" href="#">
<span class="material-symbols-outlined text-primary">public</span>
</a>
<a class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center hover:bg-primary-fixed-dim transition-colors" href="#">
<span class="material-symbols-outlined text-primary">share</span>
</a>
</div>
</div>
</div>
</div>
<div class="max-w-[1440px] mx-auto px-margin-desktop py-stack-md border-t border-outline-variant flex justify-between items-center">
<p class="font-body-sm text-on-surface-variant">© 2024 Bizone. All rights reserved.</p>
<div class="flex items-center gap-stack-sm">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
<span class="text-label-caps text-on-surface-variant">System Status: Active</span>
</div>
</div>
</footer>
</body></html>

BIN
stitch_www.bizone.id/kontak_bizone/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 680 KiB

299
stitch_www.bizone.id/privacy_policy_bizone/code.html Normal file
View File

@ -0,0 +1,299 @@
<!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&amp;family=Manrope:wght@600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary-container": "#006e6e",
"surface-container-lowest": "#ffffff",
"surface-container": "#ededf6",
"outline-variant": "#c3c6d5",
"surface-container-high": "#e7e7f0",
"tertiary": "#27374c",
"secondary-container": "#7af2f2",
"on-surface-variant": "#434653",
"on-surface": "#191b22",
"on-error": "#ffffff",
"on-tertiary-container": "#afbfd9",
"primary": "#00327d",
"secondary-fixed-dim": "#5dd9d8",
"secondary-fixed": "#7df5f5",
"outline": "#737784",
"tertiary-fixed-dim": "#b7c8e1",
"secondary": "#006a6a",
"on-secondary-fixed-variant": "#004f4f",
"surface-container-low": "#f3f3fc",
"on-tertiary-fixed-variant": "#38485d",
"on-tertiary-fixed": "#0b1c30",
"on-background": "#191b22",
"on-secondary": "#ffffff",
"tertiary-container": "#3e4e63",
"surface-variant": "#e2e2eb",
"on-error-container": "#93000a",
"inverse-surface": "#2e3037",
"on-secondary-fixed": "#002020",
"on-primary-fixed-variant": "#00419e",
"tertiary-fixed": "#d3e4fe",
"primary-fixed": "#dae2ff",
"surface": "#faf8ff",
"on-primary-fixed": "#001946",
"primary-container": "#0047ab",
"on-primary": "#ffffff",
"on-tertiary": "#ffffff",
"surface-bright": "#faf8ff",
"primary-fixed-dim": "#b1c5ff",
"surface-container-highest": "#e2e2eb",
"inverse-primary": "#b1c5ff",
"surface-dim": "#d9d9e2",
"inverse-on-surface": "#f0f0f9",
"surface-tint": "#2559bd",
"on-primary-container": "#a5bdff",
"background": "#faf8ff",
"error": "#ba1a1a",
"error-container": "#ffdad6"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-sm": "8px",
"stack-lg": "32px",
"margin-mobile": "16px",
"unit": "4px",
"margin-desktop": "40px",
"gutter": "24px",
"stack-md": "16px",
"container-max": "1440px"
},
"fontFamily": {
"title-md": ["Inter"],
"headline-lg-mobile": ["Manrope"],
"display-lg": ["Manrope"],
"body-lg": ["Inter"],
"headline-lg": ["Manrope"],
"body-sm": ["Inter"],
"label-caps": ["Inter"]
},
"fontSize": {
"title-md": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
vertical-align: middle;
}
body {
background-color: #faf8ff;
color: #191b22;
}
.legal-content p {
margin-bottom: 1rem;
}
.legal-content h2 {
margin-top: 2rem;
margin-bottom: 1rem;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.5rem;
color: #00327d;
}
</style>
</head>
<body class="bg-background text-on-background">
<!-- TopNavBar -->
<header class="bg-surface/90 backdrop-blur-md border-b border-outline-variant shadow-sm docked full-width top-0 sticky z-50">
<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">Bizone</span>
<nav class="hidden md:flex items-center gap-8">
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Home</a>
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Features</a>
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Solutions</a>
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">About</a>
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Contact</a>
</nav>
</div>
<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-title-md text-title-md scale-95 active:scale-90 transition-transform">
Jadwalkan Demo
</button>
</div>
</header>
<main class="min-h-screen">
<!-- Hero Header -->
<section class="bg-surface-container-low pt-24 pb-16">
<div class="max-w-[1440px] mx-auto px-margin-desktop">
<div class="max-w-3xl">
<span class="font-label-caps text-label-caps text-secondary mb-4 block">KEBIJAKAN PRIVASI</span>
<h1 class="font-display-lg text-display-lg text-primary mb-6">Privasi Anda Adalah Prioritas Kami</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant">
Terakhir diperbarui: 24 Mei 2024. Dokumen ini menjelaskan bagaimana Bizone mengumpulkan, menggunakan, dan melindungi informasi pribadi Anda saat menggunakan layanan kami.
</p>
</div>
</div>
</section>
<!-- Content Section -->
<section class="py-stack-lg">
<div class="max-w-[1440px] mx-auto px-margin-desktop flex flex-col md:flex-row gap-gutter">
<!-- Sticky Sidebar Table of Contents -->
<aside class="hidden md:block w-64 shrink-0">
<div class="sticky top-28 p-6 bg-surface-container-lowest border border-outline-variant rounded-xl shadow-sm">
<h3 class="font-title-md text-title-md text-primary mb-4">Navigasi</h3>
<ul class="space-y-3">
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#pengantar">1. Pengantar</a></li>
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#data-dikumpulkan">2. Data yang Dikumpulkan</a></li>
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#penggunaan-data">3. Penggunaan Data</a></li>
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#keamanan">4. Keamanan Informasi</a></li>
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#hak-pengguna">5. Hak-Hak Pengguna</a></li>
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#kontak">6. Hubungi Kami</a></li>
</ul>
</div>
</aside>
<!-- Document Body -->
<article class="flex-1 max-w-4xl bg-surface-container-lowest p-8 md:p-12 border border-outline-variant rounded-xl shadow-sm">
<div class="legal-content font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
<!-- Simulated content from DOCUMENT_4 -->
<div id="pengantar">
<h2>1. Pengantar</h2>
<p>Selamat datang di Bizone. Kami sangat menghargai kepercayaan Anda dan berkomitmen untuk melindungi data pribadi yang Anda bagikan kepada kami. Kebijakan Privasi ini dirancang untuk membantu Anda memahami bagaimana kami mengelola informasi Anda demi kenyamanan dan keamanan penggunaan platform kami.</p>
<p>Dengan menggunakan layanan Bizone, Anda setuju dengan pengumpulan dan penggunaan informasi sesuai dengan kebijakan ini. Kami menyarankan Anda untuk membaca seluruh dokumen ini secara berkala karena kami mungkin memperbaruinya sesuai dengan perkembangan teknologi dan regulasi hukum yang berlaku.</p>
</div>
<div id="data-dikumpulkan">
<h2>2. Data yang Dikumpulkan</h2>
<p>Kami mengumpulkan beberapa jenis informasi untuk berbagai tujuan guna menyediakan dan meningkatkan Layanan kami kepada Anda:</p>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>Data Identitas:</strong> Nama lengkap, alamat email, nomor telepon, dan informasi profesional terkait bisnis Anda.</li>
<li><strong>Data Transaksi:</strong> Rincian tentang pembayaran ke dan dari Anda serta rincian lain dari produk dan layanan yang Anda beli dari kami.</li>
<li><strong>Data Teknis:</strong> Alamat protokol internet (IP), data login Anda, jenis dan versi browser, pengaturan zona waktu dan lokasi.</li>
<li><strong>Data Penggunaan:</strong> Informasi tentang bagaimana Anda menggunakan situs web, produk, dan layanan kami.</li>
</ul>
</div>
<div id="penggunaan-data">
<h2>3. Penggunaan Data</h2>
<p>Bizone menggunakan data yang dikumpulkan untuk berbagai tujuan, antara lain:</p>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>Menyediakan dan memelihara layanan operasional bisnis Anda.</li>
<li>Memberitahu Anda tentang perubahan pada layanan kami.</li>
<li>Memungkinkan Anda untuk berpartisipasi dalam fitur interaktif layanan kami.</li>
<li>Memberikan dukungan dan layanan pelanggan yang responsif.</li>
<li>Mengumpulkan analisis atau informasi berharga sehingga kami dapat meningkatkan layanan kami.</li>
<li>Memantau penggunaan layanan untuk mendeteksi, mencegah, dan menangani masalah teknis.</li>
</ul>
</div>
<div id="keamanan">
<h2>4. Keamanan Informasi</h2>
<p>Keamanan data Anda adalah prioritas utama kami. Kami menerapkan standar keamanan industri untuk melindungi informasi Anda dari akses yang tidak sah, pengungkapan, perubahan, atau penghancuran. Ini termasuk penggunaan enkripsi SSL (Secure Socket Layer) dan protokol keamanan berlapis pada server kami.</p>
<p>Namun, harap diingat bahwa tidak ada metode transmisi melalui Internet, atau metode penyimpanan elektronik yang 100% aman. Meskipun kami berusaha menggunakan cara yang dapat diterima secara komersial untuk melindungi Data Pribadi Anda, kami tidak dapat menjamin keamanan mutlaknya.</p>
</div>
<div id="hak-pengguna">
<h2>5. Hak-Hak Pengguna</h2>
<p>Sebagai pengguna, Anda memiliki hak-hak tertentu terkait dengan data pribadi Anda:</p>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>Hak Akses:</strong> Anda berhak meminta salinan data pribadi yang kami simpan tentang Anda.</li>
<li><strong>Hak Perbaikan:</strong> Anda berhak meminta agar kami memperbaiki informasi yang menurut Anda tidak akurat.</li>
<li><strong>Hak Penghapusan:</strong> Dalam keadaan tertentu, Anda berhak meminta penghapusan data pribadi Anda dari sistem kami.</li>
<li><strong>Hak Penarikan Persetujuan:</strong> Anda dapat menarik persetujuan pemasaran kapan saja melalui pengaturan akun Anda.</li>
</ul>
</div>
<div id="kontak">
<h2>6. Hubungi Kami</h2>
<p>Jika Anda memiliki pertanyaan tentang Kebijakan Privasi ini, silakan hubungi tim kepatuhan data kami melalui:</p>
<div class="bg-surface-container-low p-6 rounded-lg mt-4 border border-outline-variant">
<p class="mb-1 font-bold text-primary">Email Support:</p>
<p class="mb-4">privacy@bizone.com</p>
<p class="mb-1 font-bold text-primary">Alamat Kantor:</p>
<p>Gedung Bizone Lt. 12, Sudirman Central Business District, Jakarta Selatan, Indonesia 12190.</p>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- Newsletter / CTA Section -->
<section class="max-w-[1440px] mx-auto px-margin-desktop py-stack-lg">
<div class="bg-primary-container rounded-xl p-12 flex flex-col md:flex-row items-center justify-between gap-gutter overflow-hidden relative">
<div class="z-10 relative">
<h2 class="font-headline-lg text-headline-lg text-on-primary-container mb-4">Butuh Bantuan Mengenai Keamanan Data?</h2>
<p class="font-body-lg text-body-lg text-on-primary-container/80 max-w-lg">Tim legal dan teknis kami siap menjawab pertanyaan Anda mengenai implementasi standar privasi global pada bisnis Anda.</p>
</div>
<div class="flex gap-4 z-10 relative">
<button class="bg-on-primary-container text-primary-container px-8 py-3 rounded-lg font-title-md text-title-md hover:bg-white transition-all">Hubungi Support</button>
<button class="border border-on-primary-container text-on-primary-container px-8 py-3 rounded-lg font-title-md text-title-md hover:bg-on-primary-container/10 transition-all">FAQ Privasi</button>
</div>
<!-- Abstract Design Element -->
<div class="absolute right-0 top-0 w-64 h-64 bg-secondary-container/20 rounded-full blur-3xl -mr-20 -mt-20"></div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-surface-container-lowest border-t border-outline-variant full-width">
<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-4 max-w-xs">
<span class="text-title-md font-display-lg font-bold text-primary">Bizone</span>
<p class="font-body-sm text-body-sm text-on-surface-variant">Solusi manajemen bisnis modern untuk pertumbuhan yang terukur dan aman.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-16">
<div class="flex flex-col gap-3">
<h4 class="font-label-caps text-label-caps text-primary">Product</h4>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Overview</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Features</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Pricing</a>
</div>
<div class="flex flex-col gap-3">
<h4 class="font-label-caps text-label-caps text-primary">Company</h4>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">About</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Careers</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Blog</a>
</div>
<div class="flex flex-col gap-3">
<h4 class="font-label-caps text-label-caps text-primary">Resources</h4>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Documentation</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">API Reference</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Community</a>
</div>
<div class="flex flex-col gap-3">
<h4 class="font-label-caps text-label-caps text-primary">Legal</h4>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Sitemap</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Contact</a>
<a class="font-body-sm text-body-sm text-primary font-semibold underline decoration-secondary underline-offset-4" href="#">Privacy</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 transition-all" href="#">Terms</a>
</div>
</div>
</div>
<div class="max-w-[1440px] mx-auto px-margin-desktop py-6 border-t border-outline-variant flex flex-col md:flex-row justify-between items-center gap-4">
<span class="font-body-sm text-body-sm text-on-surface-variant opacity-80">© 2024 Bizone. All rights reserved.</span>
<div class="flex gap-6">
<a class="text-on-surface-variant hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">public</span>
</a>
<a class="text-on-surface-variant hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">share</span>
</a>
<a class="text-on-surface-variant hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">language</span>
</a>
</div>
</div>
</footer>
</body></html>

BIN
stitch_www.bizone.id/privacy_policy_bizone/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

161
stitch_www.bizone.id/professional_efficiency/DESIGN.md Normal file
View File

@ -0,0 +1,161 @@
---
name: Professional Efficiency
colors:
surface: '#faf8ff'
surface-dim: '#d9d9e2'
surface-bright: '#faf8ff'
surface-container-lowest: '#ffffff'
surface-container-low: '#f3f3fc'
surface-container: '#ededf6'
surface-container-high: '#e7e7f0'
surface-container-highest: '#e2e2eb'
on-surface: '#191b22'
on-surface-variant: '#434653'
inverse-surface: '#2e3037'
inverse-on-surface: '#f0f0f9'
outline: '#737784'
outline-variant: '#c3c6d5'
surface-tint: '#2559bd'
primary: '#00327d'
on-primary: '#ffffff'
primary-container: '#0047ab'
on-primary-container: '#a5bdff'
inverse-primary: '#b1c5ff'
secondary: '#006a6a'
on-secondary: '#ffffff'
secondary-container: '#7af2f2'
on-secondary-container: '#006e6e'
tertiary: '#27374c'
on-tertiary: '#ffffff'
tertiary-container: '#3e4e63'
on-tertiary-container: '#afbfd9'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#dae2ff'
primary-fixed-dim: '#b1c5ff'
on-primary-fixed: '#001946'
on-primary-fixed-variant: '#00419e'
secondary-fixed: '#7df5f5'
secondary-fixed-dim: '#5dd9d8'
on-secondary-fixed: '#002020'
on-secondary-fixed-variant: '#004f4f'
tertiary-fixed: '#d3e4fe'
tertiary-fixed-dim: '#b7c8e1'
on-tertiary-fixed: '#0b1c30'
on-tertiary-fixed-variant: '#38485d'
background: '#faf8ff'
on-background: '#191b22'
surface-variant: '#e2e2eb'
typography:
display-lg:
fontFamily: Manrope
fontSize: 48px
fontWeight: '700'
lineHeight: 56px
letterSpacing: -0.02em
headline-lg:
fontFamily: Manrope
fontSize: 32px
fontWeight: '600'
lineHeight: 40px
letterSpacing: -0.01em
headline-lg-mobile:
fontFamily: Manrope
fontSize: 24px
fontWeight: '600'
lineHeight: 32px
title-md:
fontFamily: Inter
fontSize: 18px
fontWeight: '600'
lineHeight: 28px
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: '400'
lineHeight: 24px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: 20px
label-caps:
fontFamily: Inter
fontSize: 12px
fontWeight: '600'
lineHeight: 16px
letterSpacing: 0.05em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
unit: 4px
container-max: 1440px
gutter: 24px
margin-desktop: 40px
margin-mobile: 16px
stack-sm: 8px
stack-md: 16px
stack-lg: 32px
---
## Brand & Style
This design system is built on the pillars of reliability, structural clarity, and forward momentum. It targets business owners and service teams who require a high-density information environment that remains legible and stress-free.
The aesthetic follows a **Corporate / Modern** movement—fusing the systematic precision of enterprise software with the approachability of modern consumer SaaS. The visual language prioritizes functional elegance, using generous whitespace to reduce cognitive load while employing strategic color accents to guide the user's journey toward growth-oriented actions.
## Colors
The palette is anchored by **Deep Professional Blue**, a color synonymous with stability and institutional trust. This is used for primary navigation, key branding elements, and primary success actions.
**Clean Teal** serves as the functional secondary color, reserved specifically for "active" states, incremental growth indicators, and secondary call-to-actions to distinguish them from structural navigation.
The **Neutral Palette** leans heavily on "Dark Slate" for typography to ensure high legibility without the harshness of pure black. Backgrounds remain predominantly white to maximize the "spacious" feel, with soft gray borders providing subtle containment for modular data.
## Typography
This design system utilizes a dual-font strategy. **Manrope** is used for headlines and display text to provide a refined, modern character that feels "designed" yet professional. **Inter** is the workhorse for all body copy, data tables, and UI labels due to its exceptional legibility at small sizes and its neutral, systematic aesthetic.
Hierarchy is established through weight and color rather than excessive size shifts. Display titles use tighter letter spacing for a "tucked-in" professional look, while labels and small captions use slightly increased tracking to maintain clarity in high-density dashboards.
## Layout & Spacing
The system employs a **12-column fixed-grid** layout for desktop, transitioning to a **4-column fluid-grid** for mobile devices. The core spacing rhythm is based on a 4px baseline, ensuring all elements align to a consistent mathematical scale.
- **Desktop:** 1440px max-width container, centered. Use 24px gutters to allow data-heavy components enough "breathing room" to prevent visual clutter.
- **Tablets:** Adaptive fluid width with 24px side margins.
- **Mobile:** 16px side margins with vertical stacking for all multi-column components.
Vertical rhythm should follow the "Stack" units (8/16/32px) to maintain a sense of structured growth and order throughout the platform.
## Elevation & Depth
To maintain the "Modern SaaS" aesthetic, depth is communicated through **Ambient Shadows** and **Tonal Layers**.
1. **Surface Layers:** The primary background is white. Secondary containers (sidebars, utility panels) use a subtle "Surface" tint (#F8FAFC) to create a natural hierarchy without needing heavy lines.
2. **Shadow Profile:** Shadows must be extremely soft and diffused. Use a large blur radius (20px-30px) with low opacity (4-8%) blue-tinted grays. Shadows are reserved for floating elements like modals, dropdowns, and active cards.
3. **Borders:** Structural elements like input fields and table rows use low-contrast outlines (#E2E8F0). This creates a "flat-plus" look that feels organized but not heavy.
## Shapes
The shape language is defined by **Rounded (Level 2)** corners. This 8px-12px range is chosen to soften the "industrial" feel of business software, making it feel more like a modern tool and less like a legacy database.
- **Standard (8px):** Used for buttons, input fields, and small UI components.
- **Large (16px):** Used for cards, dashboard widgets, and modal containers.
- **Extra Large (24px):** Used for promotional banners or specialized "Growth" containers.
## Components
- **Buttons:** Primary buttons use the Deep Professional Blue with white text. Secondary "Action" buttons use a Clean Teal outline or subtle fill. All buttons feature an 8px corner radius and a subtle hover lift effect.
- **Input Fields:** Use a 1px border (#E2E8F0) with a 2px Teal focus ring. Labels sit above the field in `label-caps` style for maximum clarity.
- **Cards:** White background with a 1px border or a very soft ambient shadow. 16px padding is the minimum for internal content.
- **Chips/Badges:** Small, pill-shaped elements with low-opacity background fills of the primary or secondary colors. Used for status indicators (e.g., "Active", "In Progress").
- **Lists & Tables:** High-density but legible. Use subtle zebra-striping or thin horizontal dividers. Typography in tables should default to `body-sm`.
- **Data Visualizations:** Charts should utilize the Primary Blue and Clean Teal as the dominant data series colors, supported by Slate grays for axes and grid lines.

285
stitch_www.bizone.id/solutions_bizone/code.html Normal file
View File

@ -0,0 +1,285 @@
<!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&amp;family=Manrope:wght@600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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 &amp; 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 &amp; 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>

BIN
stitch_www.bizone.id/solutions_bizone/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

281
stitch_www.bizone.id/tentang_bizone/code.html Normal file
View File

@ -0,0 +1,281 @@
<!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&amp;family=Manrope:wght@600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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;
}
</style>
</head>
<body class="bg-background text-on-background font-body-lg">
<!-- TopNavBar -->
<nav class="docked full-width top-0 sticky z-50 bg-surface/90 backdrop-blur-md border-b border-outline-variant shadow-sm h-20 w-full">
<div class="max-w-[1440px] mx-auto px-margin-desktop flex justify-between items-center h-full">
<div class="flex items-center gap-stack-md">
<span class="text-title-md font-display-lg font-bold text-primary">Bizone</span>
</div>
<div class="hidden md:flex items-center gap-gutter">
<a class="font-body-lg text-body-lg text-on-surface-variant hover:text-primary transition-colors" href="#">Home</a>
<a class="font-body-lg text-body-lg text-on-surface-variant hover:text-primary transition-colors" href="#">Features</a>
<a class="font-body-lg text-body-lg text-on-surface-variant hover:text-primary transition-colors" href="#">Solutions</a>
<a class="font-body-lg text-body-lg text-primary font-bold border-b-2 border-primary pb-1" href="#">About</a>
<a class="font-body-lg text-body-lg text-on-surface-variant hover:text-primary transition-colors" href="#">Contact</a>
</div>
<button class="bg-primary text-on-primary px-gutter py-stack-sm rounded-lg font-label-caps text-label-caps hover:bg-primary-container transition-all scale-95 active:scale-90">
Jadwalkan Demo
</button>
</div>
</nav>
<main class="max-w-[1440px] mx-auto px-margin-desktop">
<!-- Hero Section -->
<section class="py-20 md:py-32 grid grid-cols-1 lg:grid-cols-2 gap-gutter items-center">
<div class="flex flex-col gap-stack-lg">
<span class="font-label-caps text-label-caps text-secondary uppercase tracking-widest">Tentang Kami</span>
<h1 class="font-display-lg text-display-lg text-primary leading-tight">
Platform yang membantu bisnis bekerja dalam satu zona terintegrasi
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
Bizone hadir untuk mengeliminasi silo departemen dan fragmentasi data. Kami mengurangi kompleksitas operasional dengan menyatukan komunikasi, manajemen proyek, dan analisis data dalam satu ekosistem yang kohesif, memungkinkan tim Anda fokus pada pertumbuhan nyata.
</p>
<div class="flex gap-stack-md pt-stack-md">
<div class="flex items-center gap-stack-sm text-on-surface">
<span class="material-symbols-outlined text-secondary">verified</span>
<span class="font-label-caps text-label-caps">Enterprise Ready</span>
</div>
<div class="flex items-center gap-stack-sm text-on-surface">
<span class="material-symbols-outlined text-secondary">security</span>
<span class="font-label-caps text-label-caps">Secure Data</span>
</div>
</div>
</div>
<div class="relative h-[400px] md:h-[500px] rounded-xl overflow-hidden shadow-2xl">
<img alt="Modern Office" class="w-full h-full object-cover" data-alt="A high-end modern corporate office interior featuring sleek glass partitions and minimalist ergonomic furniture. The lighting is soft, natural daylight streaming through large floor-to-ceiling windows, creating a professional and airy atmosphere. The color palette is dominated by professional blues and clean whites, reflecting a sophisticated tech-forward business environment. The scene feels organized, productive, and technologically advanced." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBXIow1K7b_rRDecBIavowmypTISyfIQDO1DbP6tURTeP75w6-Te2ZWn8zHFvoqne_4jcWZ1etrA71xZR1qt1DL21hCr-098szPeEMWul1aYj6rfwb3wMF_qwcT0ovDAiaCEPXDKbHCltitN-GKhfvdQl1eOGzy2TjU3TwcWoJiPoWMvFS9WhuXPSM5Z1Otj-zknS_uwEjk2naFGW5_jlgYSmHb28rHzzSAr2HOcbU4Vw7RJb8I6KvXXcV8Ku8w91H_H_ImMTdun7V8"/>
<div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent"></div>
</div>
</section>
<!-- Vision & Mission Bento Grid -->
<section class="py-20">
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<!-- Vision Card -->
<div class="md:col-span-2 bg-primary text-on-primary p-12 rounded-xl flex flex-col justify-between relative overflow-hidden group">
<div class="z-10">
<span class="font-label-caps text-label-caps text-on-primary-container mb-stack-md block">Visi Kami</span>
<h2 class="font-headline-lg text-headline-lg mb-stack-lg">
Menjadi platform yang membantu bisnis menjalankan lebih banyak proses dari satu tempat yang terhubung.
</h2>
</div>
<div class="z-10 flex items-center gap-stack-sm opacity-80 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">rocket_launch</span>
<span class="font-body-sm text-body-sm">Membangun masa depan kerja yang terintegrasi</span>
</div>
<!-- Decorative Background Element -->
<div class="absolute -bottom-10 -right-10 w-64 h-64 bg-primary-container/30 rounded-full blur-3xl"></div>
</div>
<!-- Mission Points -->
<div class="bg-surface-container-low p-8 rounded-xl border border-outline-variant flex flex-col gap-stack-lg">
<h3 class="font-title-md text-title-md text-primary">Misi Kami</h3>
<ul class="flex flex-col gap-stack-md">
<li class="flex gap-stack-sm items-start">
<span class="material-symbols-outlined text-secondary shrink-0">check_circle</span>
<p class="font-body-sm text-body-sm text-on-surface-variant">Menyediakan alat kolaborasi tanpa hambatan bagi tim modern.</p>
</li>
<li class="flex gap-stack-sm items-start">
<span class="material-symbols-outlined text-secondary shrink-0">check_circle</span>
<p class="font-body-sm text-body-sm text-on-surface-variant">Menyederhanakan alur kerja kompleks melalui otomatisasi cerdas.</p>
</li>
<li class="flex gap-stack-sm items-start">
<span class="material-symbols-outlined text-secondary shrink-0">check_circle</span>
<p class="font-body-sm text-body-sm text-on-surface-variant">Menghubungkan data strategis dengan eksekusi harian secara real-time.</p>
</li>
</ul>
</div>
</div>
</section>
<!-- Values Section -->
<section class="py-20 text-center">
<div class="max-w-2xl mx-auto mb-16">
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md">Nilai Inti Kami</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">Fondasi yang mendasari setiap inovasi yang kami bangun untuk kesuksesan bisnis Anda.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-gutter">
<div class="p-stack-lg bg-surface-container-lowest rounded-lg border border-outline-variant hover:shadow-lg transition-all duration-200">
<div class="w-12 h-12 bg-secondary-container text-on-secondary-container rounded-full flex items-center justify-center mx-auto mb-stack-md">
<span class="material-symbols-outlined">hub</span>
</div>
<h4 class="font-title-md text-title-md text-primary mb-2">Integrasi</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Segalanya terhubung untuk efisiensi maksimal.</p>
</div>
<div class="p-stack-lg bg-surface-container-lowest rounded-lg border border-outline-variant hover:shadow-lg transition-all duration-200">
<div class="w-12 h-12 bg-secondary-container text-on-secondary-container rounded-full flex items-center justify-center mx-auto mb-stack-md">
<span class="material-symbols-outlined">speed</span>
</div>
<h4 class="font-title-md text-title-md text-primary mb-2">Kecepatan</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Akses informasi instan tanpa hambatan teknis.</p>
</div>
<div class="p-stack-lg bg-surface-container-lowest rounded-lg border border-outline-variant hover:shadow-lg transition-all duration-200">
<div class="w-12 h-12 bg-secondary-container text-on-secondary-container rounded-full flex items-center justify-center mx-auto mb-stack-md">
<span class="material-symbols-outlined">shield</span>
</div>
<h4 class="font-title-md text-title-md text-primary mb-2">Kepercayaan</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Keamanan data adalah prioritas tertinggi kami.</p>
</div>
<div class="p-stack-lg bg-surface-container-lowest rounded-lg border border-outline-variant hover:shadow-lg transition-all duration-200">
<div class="w-12 h-12 bg-secondary-container text-on-secondary-container rounded-full flex items-center justify-center mx-auto mb-stack-md">
<span class="material-symbols-outlined">insights</span>
</div>
<h4 class="font-title-md text-title-md text-primary mb-2">Pertumbuhan</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Fokus pada hasil yang mendorong ekspansi bisnis.</p>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-20 bg-surface-container-high rounded-3xl px-12 mb-20 overflow-hidden relative">
<div class="grid grid-cols-2 md:grid-cols-4 gap-gutter text-center relative z-10">
<div>
<div class="font-display-lg text-primary text-4xl mb-1">500+</div>
<div class="font-label-caps text-label-caps text-on-surface-variant">Perusahaan Aktif</div>
</div>
<div>
<div class="font-display-lg text-primary text-4xl mb-1">99.9%</div>
<div class="font-label-caps text-label-caps text-on-surface-variant">Uptime Server</div>
</div>
<div>
<div class="font-display-lg text-primary text-4xl mb-1">24/7</div>
<div class="font-label-caps text-label-caps text-on-surface-variant">Dukungan Teknis</div>
</div>
<div>
<div class="font-display-lg text-primary text-4xl mb-1">10M+</div>
<div class="font-label-caps text-label-caps text-on-surface-variant">Transaksi Terproses</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-surface-container-lowest border-t border-outline-variant w-full">
<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-md">
<span class="text-title-md font-display-lg font-bold text-primary">Bizone</span>
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs">
Satu zona terintegrasi untuk pertumbuhan bisnis yang berkelanjutan dan operasional yang efisien.
</p>
</div>
<div class="flex flex-col md:flex-row gap-gutter">
<div class="flex flex-col gap-stack-sm">
<span class="font-label-caps text-label-caps text-primary mb-2">Perusahaan</span>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-secondary hover:underline decoration-secondary underline-offset-4 transition-colors" href="#">Sitemap</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-secondary hover:underline decoration-secondary underline-offset-4 transition-colors" href="#">Contact</a>
</div>
<div class="flex flex-col gap-stack-sm">
<span class="font-label-caps text-label-caps text-primary mb-2">Legal</span>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-secondary hover:underline decoration-secondary underline-offset-4 transition-colors" href="#">Privacy</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-secondary hover:underline decoration-secondary underline-offset-4 transition-colors" href="#">Terms</a>
</div>
</div>
<div class="flex flex-col items-start md:items-end gap-stack-md">
<div class="flex gap-stack-md">
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors">public</span>
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors">mail</span>
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors">phone_in_talk</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-80">© 2024 Bizone. All rights reserved.</p>
</div>
</div>
</footer>
</body></html>

BIN
stitch_www.bizone.id/tentang_bizone/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 409 KiB

263
stitch_www.bizone.id/terms_conditions_bizone/code.html Normal file
View File

@ -0,0 +1,263 @@
<!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&amp;family=Manrope:wght@600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary-container": "#006e6e",
"surface-container-lowest": "#ffffff",
"surface-container": "#ededf6",
"outline-variant": "#c3c6d5",
"surface-container-high": "#e7e7f0",
"tertiary": "#27374c",
"secondary-container": "#7af2f2",
"on-surface-variant": "#434653",
"on-surface": "#191b22",
"on-error": "#ffffff",
"on-tertiary-container": "#afbfd9",
"primary": "#00327d",
"secondary-fixed-dim": "#5dd9d8",
"secondary-fixed": "#7df5f5",
"outline": "#737784",
"tertiary-fixed-dim": "#b7c8e1",
"secondary": "#006a6a",
"on-secondary-fixed-variant": "#004f4f",
"surface-container-low": "#f3f3fc",
"on-tertiary-fixed-variant": "#38485d",
"on-tertiary-fixed": "#0b1c30",
"on-background": "#191b22",
"on-secondary": "#ffffff",
"tertiary-container": "#3e4e63",
"surface-variant": "#e2e2eb",
"on-error-container": "#93000a",
"inverse-surface": "#2e3037",
"on-secondary-fixed": "#002020",
"on-primary-fixed-variant": "#00419e",
"tertiary-fixed": "#d3e4fe",
"primary-fixed": "#dae2ff",
"surface": "#faf8ff",
"on-primary-fixed": "#001946",
"primary-container": "#0047ab",
"on-primary": "#ffffff",
"on-tertiary": "#ffffff",
"surface-bright": "#faf8ff",
"primary-fixed-dim": "#b1c5ff",
"surface-container-highest": "#e2e2eb",
"inverse-primary": "#b1c5ff",
"surface-dim": "#d9d9e2",
"inverse-on-surface": "#f0f0f9",
"surface-tint": "#2559bd",
"on-primary-container": "#a5bdff",
"background": "#faf8ff",
"error": "#ba1a1a",
"error-container": "#ffdad6"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-sm": "8px",
"stack-lg": "32px",
"margin-mobile": "16px",
"unit": "4px",
"margin-desktop": "40px",
"gutter": "24px",
"stack-md": "16px",
"container-max": "1440px"
},
"fontFamily": {
"title-md": ["Inter"],
"headline-lg-mobile": ["Manrope"],
"display-lg": ["Manrope"],
"body-lg": ["Inter"],
"headline-lg": ["Manrope"],
"body-sm": ["Inter"],
"label-caps": ["Inter"]
},
"fontSize": {
"title-md": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background font-body-lg overflow-x-hidden">
<!-- TopNavBar -->
<nav class="bg-surface/90 dark:bg-surface-container/90 backdrop-blur-md docked full-width top-0 sticky border-b border-outline-variant dark:border-outline shadow-sm dark:shadow-none z-50">
<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 dark:text-primary-fixed">Bizone</span>
<div class="hidden md:flex items-center gap-gutter">
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Home</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Features</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Solutions</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">About</a>
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-lg text-body-lg" href="#">Contact</a>
</div>
</div>
<div class="flex items-center gap-stack-md">
<button class="bg-primary text-on-primary px-stack-lg py-stack-sm rounded-lg font-label-caps text-label-caps scale-95 active:scale-90 transition-transform hover:bg-primary-container transition-all">Jadwalkan Demo</button>
</div>
</div>
</nav>
<main class="max-w-[1440px] mx-auto px-margin-desktop py-stack-lg min-h-screen">
<!-- Hero Header -->
<header class="mb-stack-lg max-w-4xl">
<nav class="flex items-center gap-stack-sm text-on-surface-variant mb-stack-md">
<span class="font-label-caps text-label-caps">Home</span>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="font-label-caps text-label-caps text-primary">Terms &amp; Conditions</span>
</nav>
<h1 class="font-display-lg text-display-lg text-primary mb-stack-sm">Syarat &amp; Ketentuan</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant">Terakhir diperbarui: 24 Mei 2024. Mohon baca dengan teliti sebelum menggunakan layanan Bizone.</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<!-- Sidebar Navigation (Desktop) -->
<aside class="hidden md:block md:col-span-3">
<div class="sticky top-28 p-stack-md bg-surface-container-low rounded-xl border border-outline-variant">
<h3 class="font-title-md text-title-md text-on-surface mb-stack-md">Daftar Isi</h3>
<ul class="space-y-stack-sm">
<li><a class="block font-body-sm text-body-sm text-primary font-semibold py-1" href="#pendahuluan">1. Pendahuluan</a></li>
<li><a class="block font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors py-1" href="#layanan">2. Penggunaan Layanan</a></li>
<li><a class="block font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors py-1" href="#akun">3. Keamanan Akun</a></li>
<li><a class="block font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors py-1" href="#pembayaran">4. Biaya &amp; Pembayaran</a></li>
<li><a class="block font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors py-1" href="#kekayaan-intelektual">5. Kekayaan Intelektual</a></li>
<li><a class="block font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors py-1" href="#pembatasan">6. Pembatasan Tanggung Jawab</a></li>
</ul>
</div>
</aside>
<!-- Main Document Content -->
<section class="md:col-span-9 bg-surface-container-lowest p-stack-lg rounded-xl border border-outline-variant shadow-sm">
<article class="prose prose-slate max-w-none prose-headings:text-primary prose-headings:font-headline-lg prose-p:text-on-surface-variant prose-p:font-body-lg">
<div class="mb-stack-lg scroll-mt-28" id="pendahuluan">
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md border-b border-outline-variant pb-2">1. Pendahuluan</h2>
<div class="space-y-stack-md text-on-surface-variant">
<p>{{DATA:DOCUMENT:DOCUMENT_6}}</p>
<p>Selamat datang di Bizone. Dengan mengakses atau menggunakan platform kami, Anda setuju untuk terikat oleh Syarat dan Ketentuan ini secara keseluruhan. Platform ini dioperasikan oleh Bizone Corp dan dirancang untuk membantu efisiensi operasional bisnis Anda.</p>
</div>
</div>
<div class="mb-stack-lg scroll-mt-28" id="layanan">
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md border-b border-outline-variant pb-2">2. Penggunaan Layanan</h2>
<div class="space-y-stack-md text-on-surface-variant">
<p>Anda diberikan lisensi non-eksklusif, tidak dapat dipindahtangankan, dan dapat ditarik kembali untuk mengakses layanan kami sesuai dengan ketentuan yang berlaku. Penggunaan yang melanggar hukum, merusak sistem, atau mengganggu pengguna lain sangat dilarang.</p>
<div class="bg-secondary-container/20 p-stack-md border-l-4 border-secondary rounded-r-lg">
<p class="text-on-secondary-container font-semibold italic">Penting: Bizone berhak untuk menangguhkan akses jika ditemukan aktivitas yang mencurigakan atau melanggar kebijakan privasi kami.</p>
</div>
</div>
</div>
<div class="mb-stack-lg scroll-mt-28" id="akun">
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md border-b border-outline-variant pb-2">3. Keamanan Akun</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-gutter my-stack-md">
<div class="p-stack-md bg-surface-container-low rounded-lg">
<span class="material-symbols-outlined text-primary mb-stack-sm" data-icon="lock">lock</span>
<h4 class="font-title-md text-title-md text-on-surface mb-stack-sm">Tanggung Jawab Kata Sandi</h4>
<p class="font-body-sm text-body-sm">Anda bertanggung jawab penuh atas kerahasiaan informasi akun dan semua aktivitas yang terjadi di bawah akun Anda.</p>
</div>
<div class="p-stack-md bg-surface-container-low rounded-lg">
<span class="material-symbols-outlined text-primary mb-stack-sm" data-icon="verified_user">verified_user</span>
<h4 class="font-title-md text-title-md text-on-surface mb-stack-sm">Verifikasi Identitas</h4>
<p class="font-body-sm text-body-sm">Kami mungkin memerlukan verifikasi identitas tambahan untuk memastikan keamanan transaksi bisnis yang sensitif.</p>
</div>
</div>
</div>
<div class="mb-stack-lg scroll-mt-28" id="pembayaran">
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md border-b border-outline-variant pb-2">4. Biaya &amp; Pembayaran</h2>
<p class="mb-stack-md">Bizone menawarkan model berlangganan. Biaya akan ditagihkan sesuai dengan paket yang dipilih. Keterlambatan pembayaran dapat mengakibatkan pembatasan fitur atau penangguhan akun sementara.</p>
<table class="w-full border-collapse border border-outline-variant rounded-lg overflow-hidden">
<thead class="bg-surface-container-high">
<tr>
<th class="p-stack-sm text-left font-label-caps text-label-caps border-b border-outline-variant">Paket</th>
<th class="p-stack-sm text-left font-label-caps text-label-caps border-b border-outline-variant">Ketentuan Pembayaran</th>
</tr>
</thead>
<tbody class="text-body-sm">
<tr class="border-b border-outline-variant">
<td class="p-stack-sm">Bulanan</td>
<td class="p-stack-sm">Dibayar di muka setiap awal periode 30 hari.</td>
</tr>
<tr class="bg-surface-container-low">
<td class="p-stack-sm">Tahunan</td>
<td class="p-stack-sm">Satu kali pembayaran untuk 12 bulan dengan diskon khusus.</td>
</tr>
</tbody>
</table>
</div>
<div class="mb-stack-lg scroll-mt-28" id="kekayaan-intelektual">
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md border-b border-outline-variant pb-2">5. Kekayaan Intelektual</h2>
<p>Semua konten, desain, logo, dan kode program yang ada pada Bizone adalah milik eksklusif Bizone Corp atau pemegang lisensinya dan dilindungi oleh undang-undang hak kekayaan intelektual internasional.</p>
</div>
<div class="mb-stack-lg scroll-mt-28" id="pembatasan">
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md border-b border-outline-variant pb-2">6. Pembatasan Tanggung Jawab</h2>
<p>Sejauh diizinkan oleh hukum, Bizone tidak akan bertanggung jawab atas kerugian tidak langsung, insidental, atau konsekuensial yang timbul dari penggunaan atau ketidakmampuan menggunakan layanan kami.</p>
</div>
</article>
<div class="mt-stack-lg pt-stack-lg border-t border-outline-variant flex flex-col sm:flex-row items-center justify-between gap-stack-md">
<p class="font-body-sm text-body-sm text-on-surface-variant">Apakah Anda memiliki pertanyaan tentang ketentuan ini?</p>
<button class="flex items-center gap-2 border-2 border-secondary text-secondary px-stack-lg py-stack-sm rounded-lg font-label-caps text-label-caps hover:bg-secondary hover:text-on-secondary transition-all">
<span class="material-symbols-outlined text-[18px]" data-icon="mail">mail</span>
Hubungi Tim Legal
</button>
</div>
</section>
</div>
</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">
<div class="space-y-stack-md max-w-xs">
<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">Solusi manajemen bisnis terpadu untuk pertumbuhan eksponensial perusahaan Anda.</p>
</div>
<div class="flex flex-wrap gap-stack-lg md:gap-stack-lg">
<div class="flex flex-col gap-stack-sm min-w-[120px]">
<h5 class="font-label-caps text-label-caps text-on-surface font-bold">Produk</h5>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Fitur Utama</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Harga</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Integrasi</a>
</div>
<div class="flex flex-col gap-stack-sm min-w-[120px]">
<h5 class="font-label-caps text-label-caps text-on-surface font-bold">Perusahaan</h5>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Tentang Kami</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Karir</a>
<a class="font-body-sm text-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 min-w-[120px]">
<h5 class="font-label-caps text-label-caps text-on-surface font-bold">Legal</h5>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Privasi</a>
<a class="font-body-sm text-body-sm text-primary font-semibold" href="#">Terms</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Sitemap</a>
</div>
</div>
</div>
<div class="max-w-[1440px] mx-auto px-margin-desktop py-stack-md border-t border-outline-variant/30 flex flex-col md:flex-row justify-between items-center gap-stack-sm">
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-80">© 2024 Bizone. All rights reserved.</p>
<div class="flex gap-stack-md">
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors" data-icon="public">public</span>
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors" data-icon="share">share</span>
</div>
</div>
</footer>
</body></html>

BIN
stitch_www.bizone.id/terms_conditions_bizone/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 354 KiB