291 lines
20 KiB
HTML
291 lines
20 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;
|
|
}
|
|
.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> |