281 lines
17 KiB
HTML
281 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Manrope:wght@600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-fixed-variant": "#004f4f",
|
|
"on-primary-container": "#a5bdff",
|
|
"on-secondary": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"on-error": "#ffffff",
|
|
"background": "#faf8ff",
|
|
"inverse-on-surface": "#f0f0f9",
|
|
"surface-container-low": "#f3f3fc",
|
|
"primary": "#00327d",
|
|
"on-surface-variant": "#434653",
|
|
"on-tertiary-fixed-variant": "#38485d",
|
|
"tertiary": "#27374c",
|
|
"tertiary-container": "#3e4e63",
|
|
"on-background": "#191b22",
|
|
"secondary-fixed": "#7df5f5",
|
|
"surface-container-high": "#e7e7f0",
|
|
"surface-variant": "#e2e2eb",
|
|
"inverse-primary": "#b1c5ff",
|
|
"on-primary-fixed": "#001946",
|
|
"error": "#ba1a1a",
|
|
"surface-dim": "#d9d9e2",
|
|
"primary-fixed": "#dae2ff",
|
|
"surface-container-highest": "#e2e2eb",
|
|
"on-primary": "#ffffff",
|
|
"secondary-container": "#7af2f2",
|
|
"tertiary-fixed": "#d3e4fe",
|
|
"outline": "#737784",
|
|
"inverse-surface": "#2e3037",
|
|
"tertiary-fixed-dim": "#b7c8e1",
|
|
"surface": "#faf8ff",
|
|
"primary-container": "#0047ab",
|
|
"outline-variant": "#c3c6d5",
|
|
"surface-container": "#ededf6",
|
|
"on-tertiary-fixed": "#0b1c30",
|
|
"on-secondary-container": "#006e6e",
|
|
"primary-fixed-dim": "#b1c5ff",
|
|
"on-surface": "#191b22",
|
|
"secondary-fixed-dim": "#5dd9d8",
|
|
"error-container": "#ffdad6",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-bright": "#faf8ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary": "#006a6a",
|
|
"surface-tint": "#2559bd",
|
|
"on-secondary-fixed": "#002020",
|
|
"on-tertiary-container": "#afbfd9",
|
|
"on-primary-fixed-variant": "#00419e"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin-mobile": "16px",
|
|
"stack-md": "16px",
|
|
"gutter": "24px",
|
|
"margin-desktop": "40px",
|
|
"unit": "4px",
|
|
"container-max": "1440px",
|
|
"stack-sm": "8px",
|
|
"stack-lg": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"label-caps": ["Inter"],
|
|
"headline-lg-mobile": ["Manrope"],
|
|
"title-md": ["Inter"],
|
|
"headline-lg": ["Manrope"],
|
|
"display-lg": ["Manrope"],
|
|
"body-lg": ["Inter"],
|
|
"body-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"title-md": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</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> |