Initial Bizone Next.js website
This commit is contained in:
299
stitch_www.bizone.id/privacy_policy_bizone/code.html
Normal file
299
stitch_www.bizone.id/privacy_policy_bizone/code.html
Normal 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&family=Manrope:wght@600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-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>
|
||||
Reference in New Issue
Block a user