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

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