326 lines
21 KiB
HTML
326 lines
21 KiB
HTML
<!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&family=Inter:wght@400;600;700&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"/>
|
|
<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;
|
|
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> |