Initial Bizone Next.js website
This commit is contained in:
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
34
README.md
Normal file
34
README.md
Normal file
@ -0,0 +1,34 @@
|
||||
# Bizone Web
|
||||
|
||||
Website marketing `www.bizone.id` berbasis Next.js App Router.
|
||||
|
||||
## Menjalankan project
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Lalu buka `http://localhost:3000`.
|
||||
|
||||
## Halaman
|
||||
|
||||
- `/`
|
||||
- `/features`
|
||||
- `/solutions`
|
||||
- `/about`
|
||||
- `/contact`
|
||||
- `/privacy-policy`
|
||||
- `/terms-and-conditions`
|
||||
|
||||
## Catatan
|
||||
|
||||
- Logo memakai `public/bizone.png`.
|
||||
- Konten legal masih perlu finalisasi alamat perusahaan sebelum publish.
|
||||
- Bagian form kontak saat ini masih presentational dan belum terhubung ke backend.
|
||||
|
||||
## Verifikasi
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
npm run build
|
||||
```
|
||||
103
bizone-privacy-policy.md
Normal file
103
bizone-privacy-policy.md
Normal file
@ -0,0 +1,103 @@
|
||||
# Privacy Policy - Bizone
|
||||
|
||||
**Last Updated:** [isi tanggal final]
|
||||
|
||||
Selamat datang di Bizone. Privasi Anda penting bagi kami. Kebijakan Privasi ini menjelaskan bagaimana Bizone mengumpulkan, menggunakan, menyimpan, dan melindungi informasi saat Anda mengakses website, platform, atau layanan kami melalui bizone.id dan layanan terkait.
|
||||
|
||||
Dengan menggunakan layanan Bizone, Anda memahami dan menyetujui praktik yang dijelaskan dalam Kebijakan Privasi ini.
|
||||
|
||||
## 1. Informasi yang Kami Kumpulkan
|
||||
Kami dapat mengumpulkan informasi berikut:
|
||||
|
||||
### a. Informasi yang Anda berikan langsung
|
||||
- Nama
|
||||
- Nama perusahaan atau bisnis
|
||||
- Alamat email
|
||||
- Nomor telepon atau WhatsApp
|
||||
- Informasi akun
|
||||
- Informasi yang Anda kirim melalui form, komunikasi, atau saat meminta demo
|
||||
|
||||
### b. Informasi penggunaan layanan
|
||||
- Alamat IP
|
||||
- Jenis perangkat
|
||||
- Browser dan sistem operasi
|
||||
- Halaman yang diakses
|
||||
- Waktu akses
|
||||
- Aktivitas penggunaan layanan
|
||||
|
||||
### c. Informasi dari integrasi atau pihak ketiga
|
||||
Jika Anda menghubungkan layanan pihak ketiga ke Bizone, kami dapat menerima data yang diperlukan untuk menyediakan layanan, sesuai izin yang Anda berikan dan kebijakan pihak ketiga tersebut.
|
||||
|
||||
## 2. Cara Kami Menggunakan Informasi
|
||||
Kami menggunakan informasi Anda untuk:
|
||||
- menyediakan, mengoperasikan, dan mengembangkan layanan Bizone
|
||||
- memproses permintaan demo, pertanyaan, atau komunikasi bisnis
|
||||
- mengelola akun dan akses pengguna
|
||||
- meningkatkan keamanan, performa, dan pengalaman pengguna
|
||||
- melakukan analisis penggunaan layanan
|
||||
- memenuhi kewajiban hukum dan kepatuhan yang berlaku
|
||||
- mengirim informasi layanan, pembaruan, atau pemberitahuan penting
|
||||
|
||||
## 3. Dasar Pemrosesan Data
|
||||
Kami memproses data sejauh diperlukan untuk:
|
||||
- menjalankan layanan yang Anda minta
|
||||
- memenuhi kewajiban hukum
|
||||
- melindungi kepentingan sah Bizone, termasuk keamanan, peningkatan layanan, dan pencegahan penyalahgunaan
|
||||
- memperoleh persetujuan Anda jika diwajibkan oleh hukum yang berlaku
|
||||
|
||||
## 4. Penyimpanan dan Keamanan Data
|
||||
Kami mengambil langkah teknis dan organisasional yang wajar untuk melindungi data dari akses tidak sah, perubahan, pengungkapan, atau penghancuran yang tidak sah. Namun, tidak ada metode transmisi atau penyimpanan data yang sepenuhnya bebas risiko.
|
||||
|
||||
Kami menyimpan data selama diperlukan untuk menyediakan layanan, memenuhi tujuan bisnis yang sah, menyelesaikan sengketa, menegakkan perjanjian, dan memenuhi kewajiban hukum.
|
||||
|
||||
## 5. Pembagian Informasi
|
||||
Kami tidak menjual data pribadi Anda. Kami dapat membagikan informasi dalam kondisi berikut:
|
||||
- kepada penyedia layanan atau mitra yang membantu operasional Bizone
|
||||
- untuk memenuhi kewajiban hukum, proses hukum, atau permintaan otoritas yang sah
|
||||
- untuk melindungi hak, keamanan, dan kepentingan Bizone, pengguna, atau pihak lain
|
||||
- dalam konteks restrukturisasi bisnis, merger, akuisisi, atau transaksi serupa
|
||||
|
||||
Setiap pembagian data dilakukan sejauh diperlukan dan sesuai kewajiban kerahasiaan yang wajar.
|
||||
|
||||
## 6. Cookies dan Teknologi Serupa
|
||||
Bizone dapat menggunakan cookies atau teknologi serupa untuk:
|
||||
- menjaga sesi pengguna
|
||||
- memahami penggunaan website
|
||||
- meningkatkan performa dan pengalaman pengguna
|
||||
- membantu analitik dan keamanan
|
||||
|
||||
Anda dapat mengatur browser untuk menolak sebagian atau seluruh cookies, namun beberapa fungsi layanan mungkin tidak berjalan optimal.
|
||||
|
||||
## 7. Hak Pengguna
|
||||
Sesuai hukum yang berlaku, Anda dapat memiliki hak untuk:
|
||||
- meminta akses ke data pribadi Anda
|
||||
- meminta koreksi data yang tidak akurat
|
||||
- meminta penghapusan data tertentu
|
||||
- membatasi atau menolak pemrosesan tertentu
|
||||
- menarik persetujuan, jika pemrosesan didasarkan pada persetujuan
|
||||
|
||||
Untuk menggunakan hak tersebut, silakan hubungi kami melalui kontak yang tersedia di bawah.
|
||||
|
||||
## 8. Layanan dan Tautan Pihak Ketiga
|
||||
Website atau layanan Bizone dapat berisi tautan ke website atau layanan pihak ketiga. Kami tidak bertanggung jawab atas praktik privasi pihak ketiga tersebut. Kami menyarankan Anda membaca kebijakan privasi mereka secara terpisah.
|
||||
|
||||
## 9. Privasi Anak
|
||||
Layanan Bizone tidak ditujukan untuk anak di bawah usia yang dilarang oleh hukum yang berlaku untuk memberikan persetujuan sendiri. Kami tidak secara sengaja mengumpulkan data pribadi anak tanpa dasar hukum yang sesuai.
|
||||
|
||||
## 10. Transfer Data
|
||||
Jika diperlukan untuk operasional layanan, data dapat diproses atau disimpan di infrastruktur, penyedia layanan, atau wilayah hukum yang berbeda, dengan langkah perlindungan yang wajar sesuai kebutuhan operasional dan hukum yang berlaku.
|
||||
|
||||
## 11. Perubahan Kebijakan Privasi
|
||||
Kami dapat memperbarui Kebijakan Privasi ini dari waktu ke waktu. Versi terbaru akan dipublikasikan di halaman ini dengan tanggal pembaruan terbaru. Penggunaan berkelanjutan atas layanan setelah perubahan berlaku dianggap sebagai penerimaan atas kebijakan yang diperbarui.
|
||||
|
||||
## 12. Kontak
|
||||
Jika Anda memiliki pertanyaan mengenai Kebijakan Privasi ini atau penggunaan data oleh Bizone, silakan hubungi:
|
||||
|
||||
- **Website:** https://bizone.id
|
||||
- **Email:** info@bizone.id
|
||||
- **WhatsApp:** +6281535221121
|
||||
- **Alamat:** Jl. Srengseng Sawah No.51 C, Kel. Srengseng Sawah, Jagakarsa, Jakarta Selatan, DKI Jakarta 12640
|
||||
|
||||
---
|
||||
|
||||
**Catatan implementasi:** untuk verifikasi WhatsApp Business, halaman ini sebaiknya dipublish sebagai URL publik yang mudah diakses, misalnya `https://bizone.id/privacy-policy`.
|
||||
87
bizone-terms-and-conditions.md
Normal file
87
bizone-terms-and-conditions.md
Normal file
@ -0,0 +1,87 @@
|
||||
# Terms & Conditions - Bizone
|
||||
|
||||
**Last Updated:** [isi tanggal final]
|
||||
|
||||
Selamat datang di Bizone. Syarat dan Ketentuan ini mengatur akses dan penggunaan website, platform, produk, dan layanan Bizone melalui bizone.id dan layanan terkait.
|
||||
|
||||
Dengan mengakses atau menggunakan layanan Bizone, Anda setuju untuk terikat pada Syarat dan Ketentuan ini. Jika Anda tidak setuju, mohon untuk tidak menggunakan layanan kami.
|
||||
|
||||
## 1. Definisi
|
||||
Dalam dokumen ini:
|
||||
- **Bizone** berarti penyedia layanan, pemilik atau pengelola website dan platform Bizone.
|
||||
- **Layanan** berarti website, aplikasi, platform, fitur, konten, dan layanan terkait yang disediakan oleh Bizone.
|
||||
- **Pengguna** berarti individu, perusahaan, organisasi, atau pihak yang mengakses atau menggunakan layanan Bizone.
|
||||
|
||||
## 2. Ruang Lingkup Layanan
|
||||
Bizone menyediakan platform untuk membantu operasional bisnis, termasuk namun tidak terbatas pada pengelolaan komunikasi, kontak, workflow, kolaborasi tim, dan proses bisnis terkait.
|
||||
|
||||
Fitur yang tersedia dapat berubah, ditambah, dibatasi, atau dihentikan sewaktu-waktu sesuai pengembangan produk, kebutuhan operasional, atau pertimbangan bisnis.
|
||||
|
||||
## 3. Kewajiban Pengguna
|
||||
Dengan menggunakan layanan Bizone, Anda setuju untuk:
|
||||
- memberikan informasi yang benar, akurat, dan terkini
|
||||
- menjaga kerahasiaan akun dan kredensial akses Anda
|
||||
- menggunakan layanan sesuai hukum dan peraturan yang berlaku
|
||||
- tidak menggunakan layanan untuk penipuan, spam, penyalahgunaan, pelanggaran hak pihak lain, atau aktivitas melawan hukum
|
||||
- bertanggung jawab atas aktivitas yang dilakukan melalui akun Anda
|
||||
|
||||
## 4. Penggunaan yang Dilarang
|
||||
Pengguna dilarang menggunakan layanan Bizone untuk:
|
||||
- mengirim konten yang melanggar hukum, menyesatkan, mengancam, atau merugikan
|
||||
- melakukan akses tidak sah ke sistem, akun, data, atau jaringan
|
||||
- mengganggu, merusak, atau membebani infrastruktur layanan
|
||||
- menggunakan layanan untuk distribusi spam atau komunikasi yang tidak sah
|
||||
- melanggar ketentuan platform pihak ketiga yang terhubung dengan layanan Bizone
|
||||
|
||||
## 5. Akun dan Akses
|
||||
Untuk menggunakan fitur tertentu, Pengguna mungkin perlu membuat akun. Bizone berhak menangguhkan atau menghentikan akses akun jika terdapat dugaan pelanggaran terhadap Syarat dan Ketentuan ini, kewajiban hukum, atau risiko keamanan dan penyalahgunaan.
|
||||
|
||||
## 6. Integrasi Pihak Ketiga
|
||||
Layanan Bizone dapat terhubung dengan layanan atau platform pihak ketiga, termasuk namun tidak terbatas pada layanan komunikasi, pembayaran, atau sistem operasional lain. Penggunaan integrasi tersebut juga dapat tunduk pada syarat dan kebijakan pihak ketiga terkait.
|
||||
|
||||
Bizone tidak bertanggung jawab atas perubahan, gangguan, pembatasan, atau kebijakan dari layanan pihak ketiga tersebut.
|
||||
|
||||
## 7. Hak Kekayaan Intelektual
|
||||
Seluruh konten, merek, desain, teks, sistem, logo, dan materi lain yang terkait dengan Bizone, kecuali dinyatakan lain, adalah milik Bizone atau pemberi lisensinya, dan dilindungi oleh hukum yang berlaku.
|
||||
|
||||
Pengguna tidak diperbolehkan menyalin, memodifikasi, mendistribusikan, menjual, atau mengeksploitasi bagian mana pun dari layanan tanpa izin tertulis dari pihak yang berwenang.
|
||||
|
||||
## 8. Data dan Konten Pengguna
|
||||
Sepanjang diizinkan oleh hukum, Pengguna tetap memiliki hak atas data atau konten yang mereka sediakan. Namun, Pengguna memberikan hak yang diperlukan kepada Bizone untuk memproses, menyimpan, menampilkan, mengirim, dan menggunakan data tersebut sejauh diperlukan untuk menjalankan layanan.
|
||||
|
||||
Pengguna bertanggung jawab memastikan bahwa data dan konten yang digunakan melalui layanan Bizone tidak melanggar hukum, hak pihak ketiga, atau ketentuan platform terkait.
|
||||
|
||||
## 9. Ketersediaan Layanan
|
||||
Bizone berupaya menjaga layanan tetap tersedia dan andal, tetapi tidak menjamin bahwa layanan akan selalu bebas gangguan, bebas kesalahan, atau selalu tersedia setiap saat.
|
||||
|
||||
Pemeliharaan, pengembangan, gangguan teknis, atau faktor eksternal dapat memengaruhi akses dan performa layanan.
|
||||
|
||||
## 10. Penafian Jaminan
|
||||
Sejauh diizinkan hukum, layanan Bizone disediakan "sebagaimana adanya" dan "sebagaimana tersedia". Bizone tidak memberikan jaminan tersurat maupun tersirat terkait kesesuaian untuk tujuan tertentu, ketersediaan tanpa gangguan, atau hasil bisnis tertentu.
|
||||
|
||||
## 11. Pembatasan Tanggung Jawab
|
||||
Sejauh diizinkan oleh hukum yang berlaku, Bizone tidak bertanggung jawab atas kerugian tidak langsung, insidental, khusus, konsekuensial, kehilangan keuntungan, kehilangan data, atau kerugian bisnis lain yang timbul dari penggunaan atau ketidakmampuan menggunakan layanan.
|
||||
|
||||
## 12. Ganti Rugi
|
||||
Pengguna setuju untuk membela, mengganti rugi, dan membebaskan Bizone dari klaim, kerugian, kewajiban, biaya, dan tuntutan yang timbul akibat pelanggaran terhadap Syarat dan Ketentuan ini atau penyalahgunaan layanan oleh Pengguna.
|
||||
|
||||
## 13. Penghentian
|
||||
Bizone dapat menangguhkan atau menghentikan akses Pengguna terhadap sebagian atau seluruh layanan jika diperlukan karena pelanggaran, risiko keamanan, permintaan hukum, atau alasan operasional lain yang wajar.
|
||||
|
||||
## 14. Perubahan Layanan dan Ketentuan
|
||||
Bizone berhak mengubah, memperbarui, atau menyesuaikan layanan maupun Syarat dan Ketentuan ini kapan saja. Versi terbaru akan dipublikasikan melalui website Bizone. Penggunaan berkelanjutan setelah perubahan berlaku dianggap sebagai persetujuan atas versi terbaru.
|
||||
|
||||
## 15. Hukum yang Berlaku
|
||||
Syarat dan Ketentuan ini diatur dan ditafsirkan sesuai hukum yang berlaku di wilayah hukum tempat Bizone beroperasi, kecuali ditentukan lain oleh hukum yang wajib berlaku.
|
||||
|
||||
## 16. Kontak
|
||||
Untuk pertanyaan mengenai Syarat dan Ketentuan ini, silakan hubungi:
|
||||
|
||||
- **Website:** https://bizone.id
|
||||
- **Email:** info@bizone.id
|
||||
- **WhatsApp:** +6281535221121
|
||||
- **Alamat:** Jl. Srengseng Sawah No.51 C, Kel. Srengseng Sawah, Jagakarsa, Jakarta Selatan, DKI Jakarta 12640
|
||||
|
||||
---
|
||||
|
||||
**Catatan implementasi:** untuk kebutuhan verifikasi bisnis dan kepatuhan platform, halaman ini sebaiknya dipublish sebagai URL publik seperti `https://bizone.id/terms-and-conditions`.
|
||||
293
bizone-website-content.md
Normal file
293
bizone-website-content.md
Normal file
@ -0,0 +1,293 @@
|
||||
# Bizone Website Content
|
||||
|
||||
## Brand Information
|
||||
|
||||
- **Brand Name:** Bizone
|
||||
- **Domain:** bizone.id
|
||||
- **Tagline:** Semua bisnis dalam satu tempat
|
||||
- **Category:** Business Operating Platform / SaaS
|
||||
- **Primary Use Case:** WhatsApp-based business operations, customer communication, workflow automation, contact management, transaction orchestration
|
||||
- **Target Market:** UMKM, growing businesses, multi-brand operators, service businesses, sales teams, customer support teams
|
||||
- **Language Style:** Profesional, modern, jelas, terpercaya
|
||||
|
||||
> Catatan: Konten ini disusun agar cocok untuk website marketing sekaligus membantu kebutuhan verifikasi WhatsApp Business. Hindari klaim berlebihan dan pastikan info kontak/perusahaan final dilengkapi sebelum publish.
|
||||
|
||||
---
|
||||
|
||||
## Sitemap Rekomendasi
|
||||
|
||||
1. Home
|
||||
2. Features
|
||||
3. Solutions / Use Cases
|
||||
4. About
|
||||
5. Contact
|
||||
6. Privacy Policy
|
||||
7. Terms & Conditions
|
||||
|
||||
---
|
||||
|
||||
## HOME PAGE
|
||||
|
||||
### Hero Section
|
||||
|
||||
**Eyebrow**
|
||||
Bizone • Business Operating Platform
|
||||
|
||||
**Headline**
|
||||
Semua bisnis dalam satu tempat
|
||||
|
||||
**Subheadline**
|
||||
Bizone membantu bisnis mengelola komunikasi pelanggan, operasional tim, automasi alur kerja, kontak, dan proses bisnis dalam satu platform yang terhubung.
|
||||
|
||||
**Primary CTA**
|
||||
Jadwalkan Demo
|
||||
|
||||
**Secondary CTA**
|
||||
Pelajari Fitur
|
||||
|
||||
**Supporting Text**
|
||||
Dirancang untuk bisnis yang ingin bekerja lebih rapi, lebih cepat, dan lebih terukur tanpa harus berpindah-pindah banyak tools.
|
||||
|
||||
---
|
||||
|
||||
### Trust / Positioning Section
|
||||
|
||||
**Section Title**
|
||||
Satu platform untuk operasional bisnis modern
|
||||
|
||||
**Body**
|
||||
Banyak bisnis menggunakan terlalu banyak aplikasi terpisah untuk chat, kontak, follow up, assignment tim, dan workflow. Bizone menyatukan kebutuhan itu dalam satu sistem agar operasional menjadi lebih efisien, lebih mudah dipantau, dan lebih siap berkembang.
|
||||
|
||||
---
|
||||
|
||||
### Problem Section
|
||||
|
||||
**Section Title**
|
||||
Masalah yang sering dihadapi bisnis
|
||||
|
||||
- Chat pelanggan tersebar di banyak perangkat atau akun
|
||||
- Tindak lanjut leads dan customer tidak konsisten
|
||||
- Tim sulit memantau siapa mengerjakan apa
|
||||
- Data kontak, percakapan, dan proses bisnis tidak terhubung
|
||||
- Workflow masih manual dan memakan waktu
|
||||
|
||||
**Closing Sentence**
|
||||
Bizone hadir untuk membantu bisnis bekerja lebih terintegrasi dan terstruktur.
|
||||
|
||||
---
|
||||
|
||||
### Features Section
|
||||
|
||||
**Section Title**
|
||||
Fitur utama Bizone
|
||||
|
||||
#### 1. Shared Inbox
|
||||
Kelola komunikasi pelanggan dalam satu dashboard bersama. Tim dapat memantau percakapan, melakukan tindak lanjut, dan menjaga respon tetap konsisten.
|
||||
|
||||
#### 2. Contact Management
|
||||
Simpan dan kelola data kontak bisnis dalam satu tempat, lengkap dengan informasi yang dibutuhkan untuk operasional dan layanan pelanggan.
|
||||
|
||||
#### 3. Workflow Automation
|
||||
Bangun alur kerja yang membantu bisnis merespon, mengarahkan, dan memproses aktivitas secara lebih efisien.
|
||||
|
||||
#### 4. Team Collaboration
|
||||
Buat pekerjaan lebih jelas dengan pembagian tugas, koordinasi, dan visibilitas aktivitas tim dalam satu sistem.
|
||||
|
||||
#### 5. Business Process Integration
|
||||
Hubungkan komunikasi dengan proses bisnis seperti lead handling, order flow, approval, atau layanan pelanggan agar operasional lebih menyatu.
|
||||
|
||||
#### 6. Reporting & Visibility
|
||||
Pantau aktivitas dan performa operasional melalui ringkasan data yang membantu pengambilan keputusan lebih cepat.
|
||||
|
||||
---
|
||||
|
||||
### Benefits Section
|
||||
|
||||
**Section Title**
|
||||
Kenapa pilih Bizone
|
||||
|
||||
#### Operasional Lebih Rapi
|
||||
Semua aktivitas penting lebih terpusat dan mudah dikelola.
|
||||
|
||||
#### Respon Lebih Cepat
|
||||
Tim dapat bekerja dari dashboard yang sama tanpa kebingungan alur komunikasi.
|
||||
|
||||
#### Lebih Mudah Dikembangkan
|
||||
Bizone dirancang untuk mendukung pertumbuhan bisnis dan proses yang makin kompleks.
|
||||
|
||||
#### Lebih Mudah Dipantau
|
||||
Pemilik bisnis dan tim operasional bisa melihat aktivitas secara lebih jelas.
|
||||
|
||||
---
|
||||
|
||||
### Use Cases Section
|
||||
|
||||
**Section Title**
|
||||
Cocok untuk berbagai kebutuhan bisnis
|
||||
|
||||
- Customer service dan support
|
||||
- Sales follow up dan lead management
|
||||
- Order handling dan operasional harian
|
||||
- Multi-brand atau multi-unit business management
|
||||
- Workflow approval dan koordinasi internal
|
||||
- Layanan berbasis WhatsApp dan komunikasi digital
|
||||
|
||||
---
|
||||
|
||||
### About Preview Section
|
||||
|
||||
**Section Title**
|
||||
Tentang Bizone
|
||||
|
||||
**Body Paragraph 1**
|
||||
Bizone adalah platform operasional bisnis yang membantu perusahaan mengelola komunikasi, koordinasi tim, data kontak, dan workflow dalam satu tempat.
|
||||
|
||||
**Body Paragraph 2**
|
||||
Kami percaya bisnis modern membutuhkan sistem yang tidak hanya mudah digunakan, tetapi juga mampu menghubungkan komunikasi dengan proses operasional nyata.
|
||||
|
||||
---
|
||||
|
||||
### Closing CTA Section
|
||||
|
||||
**Headline**
|
||||
Bangun operasional bisnis yang lebih terintegrasi
|
||||
|
||||
**Subheadline**
|
||||
Gunakan Bizone untuk membantu tim Anda bekerja lebih cepat, lebih terorganisir, dan lebih siap tumbuh.
|
||||
|
||||
**Primary CTA**
|
||||
Hubungi Kami
|
||||
|
||||
**Secondary CTA**
|
||||
Minta Demo
|
||||
|
||||
---
|
||||
|
||||
## FEATURES PAGE
|
||||
|
||||
### Page Title
|
||||
Fitur Bizone
|
||||
|
||||
### Intro
|
||||
Bizone dirancang untuk membantu bisnis mengelola komunikasi dan operasional dari satu platform yang saling terhubung.
|
||||
|
||||
### Feature Blocks
|
||||
|
||||
#### Shared Inbox
|
||||
Satu tempat untuk memantau dan mengelola komunikasi bisnis agar respon lebih cepat dan koordinasi tim lebih baik.
|
||||
|
||||
#### Contact & Customer Records
|
||||
Kelola informasi kontak dan data pendukung pelanggan untuk mempermudah layanan, follow up, dan aktivitas operasional.
|
||||
|
||||
#### Workflow & Automation
|
||||
Buat proses yang lebih efisien dengan alur kerja yang membantu bisnis menangani aktivitas berulang dan proses terstruktur.
|
||||
|
||||
#### Collaboration & Assignment
|
||||
Bantu tim bekerja lebih jelas dengan pembagian tanggung jawab dan visibilitas aktivitas yang lebih baik.
|
||||
|
||||
#### Process Visibility
|
||||
Lihat aktivitas operasional secara lebih terukur melalui dashboard dan ringkasan data penting.
|
||||
|
||||
#### Integrations Readiness
|
||||
Bizone dirancang untuk mendukung integrasi dengan sistem, layanan, atau kebutuhan operasional bisnis lainnya.
|
||||
|
||||
---
|
||||
|
||||
## SOLUTIONS / USE CASES PAGE
|
||||
|
||||
### Page Title
|
||||
Solusi untuk kebutuhan bisnis nyata
|
||||
|
||||
### Intro
|
||||
Bizone dapat digunakan untuk berbagai kebutuhan operasional, terutama yang bergantung pada komunikasi cepat, tindak lanjut terstruktur, dan koordinasi tim.
|
||||
|
||||
### Use Case 1 - Customer Service
|
||||
Kelola pertanyaan, komplain, dan kebutuhan pelanggan dengan proses yang lebih tertata dan mudah dipantau.
|
||||
|
||||
### Use Case 2 - Sales & Lead Follow Up
|
||||
Bantu tim sales menangani leads dengan respon yang lebih cepat, assignment yang jelas, dan tindak lanjut yang tidak terlewat.
|
||||
|
||||
### Use Case 3 - Order & Service Operations
|
||||
Hubungkan komunikasi pelanggan dengan proses operasional seperti pemesanan, permintaan layanan, atau tindak lanjut internal.
|
||||
|
||||
### Use Case 4 - Multi-Team Coordination
|
||||
Gunakan Bizone untuk menyatukan kerja lintas tim dalam satu alur yang lebih rapi.
|
||||
|
||||
---
|
||||
|
||||
## ABOUT PAGE
|
||||
|
||||
### Page Title
|
||||
Tentang Bizone
|
||||
|
||||
### Headline
|
||||
Platform yang membantu bisnis bekerja dalam satu zona terintegrasi
|
||||
|
||||
### Body Paragraph 1
|
||||
Bizone dibangun untuk membantu bisnis mengurangi kompleksitas operasional yang sering muncul ketika komunikasi, data, dan workflow berjalan di sistem yang terpisah.
|
||||
|
||||
### Body Paragraph 2
|
||||
Dengan pendekatan yang terintegrasi, Bizone membantu tim bekerja dari satu platform untuk mengelola interaksi, koordinasi, dan proses bisnis secara lebih efisien.
|
||||
|
||||
### Vision
|
||||
Menjadi platform yang membantu bisnis menjalankan lebih banyak proses dari satu tempat yang terhubung.
|
||||
|
||||
### Mission
|
||||
- Menyederhanakan operasional bisnis
|
||||
- Menghubungkan komunikasi dengan proses bisnis
|
||||
- Membantu tim bekerja lebih efisien dan terukur
|
||||
- Mendukung pertumbuhan bisnis melalui sistem yang lebih rapi dan scalable
|
||||
|
||||
---
|
||||
|
||||
## CONTACT PAGE
|
||||
|
||||
### Page Title
|
||||
Hubungi Bizone
|
||||
|
||||
### Intro
|
||||
Ingin melihat bagaimana Bizone dapat membantu operasional bisnis Anda? Hubungi kami untuk konsultasi atau demo.
|
||||
|
||||
### Contact Items
|
||||
- **Website:** https://bizone.id
|
||||
- **Email:** info@bizone.id
|
||||
- **WhatsApp:** +6281535221121
|
||||
- **Alamat:** Jl. Srengseng Sawah No.51 C, Kel. Srengseng Sawah, Jagakarsa, Jakarta Selatan, DKI Jakarta 12640
|
||||
|
||||
### Contact Form Copy
|
||||
- Nama
|
||||
- Nama Bisnis
|
||||
- Email
|
||||
- Nomor WhatsApp
|
||||
- Kebutuhan Anda
|
||||
- Tombol: Kirim Permintaan
|
||||
|
||||
### Closing Note
|
||||
Tim Bizone akan membantu Anda memahami solusi yang paling sesuai untuk kebutuhan bisnis Anda.
|
||||
|
||||
---
|
||||
|
||||
## FOOTER
|
||||
|
||||
**Footer Description**
|
||||
Bizone adalah platform operasional bisnis yang membantu perusahaan mengelola komunikasi, kontak, workflow, dan proses bisnis dalam satu tempat.
|
||||
|
||||
**Footer Links**
|
||||
- Home
|
||||
- Features
|
||||
- Solutions
|
||||
- About
|
||||
- Contact
|
||||
- Privacy Policy
|
||||
- Terms & Conditions
|
||||
|
||||
**Footer Contact**
|
||||
- bizone.id
|
||||
- info@bizone.id
|
||||
- +6281535221121
|
||||
|
||||
**Footer Tagline**
|
||||
Bizone, semua bisnis dalam satu tempat.
|
||||
|
||||
**Copyright**
|
||||
© 2026 PT Integrasi Persada Teknologi. All rights reserved.
|
||||
BIN
bizone.png
Normal file
BIN
bizone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
18
eslint.config.mjs
Normal file
18
eslint.config.mjs
Normal file
@ -0,0 +1,18 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
7
next.config.ts
Normal file
7
next.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
6714
package-lock.json
generated
Normal file
6714
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
package.json
Normal file
28
package.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "bizone-web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "16.2.6",
|
||||
"nodemailer": "^8.0.7",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/nodemailer": "^8.0.0",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.2.6",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
7
postcss.config.mjs
Normal file
7
postcss.config.mjs
Normal file
@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
BIN
public/bizone.png
Normal file
BIN
public/bizone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
public/file.svg
Normal file
1
public/file.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
1
public/globe.svg
Normal file
1
public/globe.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
public/vercel.svg
Normal file
1
public/vercel.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
public/window.svg
Normal file
1
public/window.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
49
src/app/about/page.tsx
Normal file
49
src/app/about/page.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { SectionIntro } from "@/components/section-intro";
|
||||
import { missions } from "@/lib/site";
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<SectionIntro
|
||||
eyebrow="Tentang Bizone"
|
||||
title="Platform yang membantu bisnis bekerja dalam satu zona terintegrasi"
|
||||
description="Bizone dibangun untuk membantu bisnis mengurangi kompleksitas operasional ketika komunikasi, data, dan workflow berjalan di sistem yang terpisah."
|
||||
/>
|
||||
|
||||
<section className="mt-14 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
<article className="card min-h-[420px] bg-[radial-gradient(circle_at_top_left,rgba(23,162,164,0.18),transparent_36%),linear-gradient(180deg,#ffffff,#eef6ff)]">
|
||||
<p className="text-sm leading-8 text-[var(--muted)]">
|
||||
Dengan pendekatan yang terintegrasi, Bizone membantu tim bekerja dari satu platform untuk
|
||||
mengelola interaksi, koordinasi, dan proses bisnis secara lebih efisien.
|
||||
</p>
|
||||
|
||||
<div className="mt-12 grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-[1.5rem] border border-[var(--line)] bg-white/80 p-6">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Vision</p>
|
||||
<p className="mt-3 font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
|
||||
Menjadi platform yang membantu bisnis menjalankan lebih banyak proses dari satu tempat yang terhubung.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-[1.5rem] border border-[var(--line)] bg-white/80 p-6">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Positioning</p>
|
||||
<p className="mt-3 text-sm leading-7 text-[var(--muted)]">
|
||||
Bizone berada di persimpangan antara komunikasi pelanggan, orkestrasi operasional, dan kolaborasi tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="card">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Mission</p>
|
||||
<div className="mt-6 space-y-4">
|
||||
{missions.map((mission) => (
|
||||
<div key={mission} className="rounded-[1.5rem] border border-[var(--line)] bg-[var(--panel-soft)] px-5 py-4">
|
||||
<p className="text-sm leading-7 text-[var(--ink)]">{mission}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
10
src/app/api/contact/captcha/route.ts
Normal file
10
src/app/api/contact/captcha/route.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { generateCaptcha } from "@/lib/contact";
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json(generateCaptcha(), {
|
||||
headers: {
|
||||
"Cache-Control": "no-store",
|
||||
},
|
||||
});
|
||||
}
|
||||
115
src/app/api/contact/route.ts
Normal file
115
src/app/api/contact/route.ts
Normal file
@ -0,0 +1,115 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { checkRateLimit, getClientIpHeader, verifyCaptcha } from "@/lib/contact";
|
||||
import { createMailerTransport, getMailerConfig } from "@/lib/mailer";
|
||||
|
||||
type ContactPayload = {
|
||||
name?: string;
|
||||
businessName?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
message?: string;
|
||||
captchaAnswer?: string;
|
||||
captchaToken?: string;
|
||||
website?: string;
|
||||
};
|
||||
|
||||
function clean(value: unknown) {
|
||||
return typeof value === "string" ? value.trim() : "";
|
||||
}
|
||||
|
||||
function escapeHtml(value: string) {
|
||||
return value
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function isValidEmail(email: string) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
let payload: ContactPayload;
|
||||
|
||||
try {
|
||||
payload = (await request.json()) as ContactPayload;
|
||||
} catch {
|
||||
return NextResponse.json({ message: "Permintaan tidak valid." }, { status: 400 });
|
||||
}
|
||||
|
||||
const name = clean(payload.name);
|
||||
const businessName = clean(payload.businessName);
|
||||
const email = clean(payload.email);
|
||||
const phone = clean(payload.phone);
|
||||
const message = clean(payload.message);
|
||||
const captchaAnswer = clean(payload.captchaAnswer);
|
||||
const captchaToken = clean(payload.captchaToken);
|
||||
const website = clean(payload.website);
|
||||
|
||||
if (website) {
|
||||
return NextResponse.json({ message: "Permintaan diterima." });
|
||||
}
|
||||
|
||||
const clientIp = getClientIpHeader(request.headers.get("x-forwarded-for"));
|
||||
const rateLimit = checkRateLimit(clientIp);
|
||||
if (!rateLimit.ok) {
|
||||
return NextResponse.json(
|
||||
{ message: "Terlalu banyak percobaan. Coba lagi beberapa saat." },
|
||||
{ status: 429 },
|
||||
);
|
||||
}
|
||||
|
||||
if (!name || !businessName || !email || !phone || !message) {
|
||||
return NextResponse.json({ message: "Semua field wajib diisi." }, { status: 400 });
|
||||
}
|
||||
|
||||
if (!isValidEmail(email)) {
|
||||
return NextResponse.json({ message: "Format email tidak valid." }, { status: 400 });
|
||||
}
|
||||
|
||||
if (!captchaToken || !captchaAnswer) {
|
||||
return NextResponse.json({ message: "Captcha wajib diisi." }, { status: 400 });
|
||||
}
|
||||
|
||||
const captcha = verifyCaptcha(captchaToken, captchaAnswer);
|
||||
if (!captcha.ok) {
|
||||
return NextResponse.json({ message: captcha.reason }, { status: 400 });
|
||||
}
|
||||
|
||||
const transport = createMailerTransport();
|
||||
const mailerConfig = getMailerConfig();
|
||||
const escapedMessage = escapeHtml(message).replace(/\n/g, "<br />");
|
||||
|
||||
await transport.sendMail({
|
||||
from: mailerConfig.from,
|
||||
to: mailerConfig.to,
|
||||
replyTo: email,
|
||||
subject: `Lead baru Bizone dari ${name}`,
|
||||
text: [
|
||||
"Permintaan demo baru dari website Bizone",
|
||||
"",
|
||||
`Nama: ${name}`,
|
||||
`Nama Bisnis: ${businessName}`,
|
||||
`Email: ${email}`,
|
||||
`WhatsApp: ${phone}`,
|
||||
"",
|
||||
"Kebutuhan:",
|
||||
message,
|
||||
].join("\n"),
|
||||
html: `
|
||||
<div style="font-family:Arial,Helvetica,sans-serif;line-height:1.7;color:#10203b">
|
||||
<h2>Permintaan demo baru dari website Bizone</h2>
|
||||
<p><strong>Nama:</strong> ${escapeHtml(name)}</p>
|
||||
<p><strong>Nama Bisnis:</strong> ${escapeHtml(businessName)}</p>
|
||||
<p><strong>Email:</strong> ${escapeHtml(email)}</p>
|
||||
<p><strong>WhatsApp:</strong> ${escapeHtml(phone)}</p>
|
||||
<p><strong>Kebutuhan:</strong></p>
|
||||
<p>${escapedMessage}</p>
|
||||
</div>
|
||||
`,
|
||||
});
|
||||
|
||||
return NextResponse.json({ message: "Permintaan berhasil dikirim." });
|
||||
}
|
||||
89
src/app/contact/page.tsx
Normal file
89
src/app/contact/page.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
import { ContactForm } from "@/components/contact-form";
|
||||
import { SectionIntro } from "@/components/section-intro";
|
||||
import { site } from "@/lib/site";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<SectionIntro
|
||||
eyebrow="Hubungi Bizone"
|
||||
title="Mulai percakapan untuk konsultasi atau demo"
|
||||
description="Ingin melihat bagaimana Bizone dapat membantu operasional bisnis Anda? Hubungi kami dan tim kami akan membantu memetakan solusi yang paling sesuai."
|
||||
/>
|
||||
|
||||
<section className="mt-14 grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<article className="card bg-[linear-gradient(180deg,#0f3f99,#0c2f72)] text-white">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-white/70">Kontak langsung</p>
|
||||
<div className="mt-8 space-y-5 text-sm leading-7 text-white/82">
|
||||
<p>
|
||||
Website
|
||||
<br />
|
||||
<a href={site.domain} target="_blank" rel="noreferrer" className="font-semibold text-white">
|
||||
bizone.id
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Email
|
||||
<br />
|
||||
<a href={`mailto:${site.email}`} className="font-semibold text-white">
|
||||
{site.email}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
WhatsApp
|
||||
<br />
|
||||
<a href={site.whatsappHref} target="_blank" rel="noreferrer" className="font-semibold text-white">
|
||||
{site.whatsapp}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Alamat
|
||||
<br />
|
||||
<span className="font-semibold text-white">{site.address}</span>
|
||||
</p>
|
||||
<p>
|
||||
Peta
|
||||
<br />
|
||||
<a href={site.mapLink} target="_blank" rel="noreferrer" className="font-semibold text-white">
|
||||
Buka di Google Maps
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="card">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Permintaan demo</p>
|
||||
<ContactForm />
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="mt-6 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
|
||||
<article className="card">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Alamat kantor</p>
|
||||
<h2 className="mt-4 font-heading text-3xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
|
||||
Kunjungi kantor kami di Jagakarsa, Jakarta Selatan.
|
||||
</h2>
|
||||
<p className="mt-5 text-sm leading-8 text-[var(--muted)]">{site.address}</p>
|
||||
<a
|
||||
href={site.mapLink}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="button button-secondary mt-8"
|
||||
>
|
||||
Buka di Google Maps
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article className="card overflow-hidden p-0">
|
||||
<iframe
|
||||
title="Peta kantor Bizone"
|
||||
src={site.mapUrl}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="min-h-[360px] w-full border-0"
|
||||
/>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
26
src/app/features/page.tsx
Normal file
26
src/app/features/page.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { SectionIntro } from "@/components/section-intro";
|
||||
import { features } from "@/lib/site";
|
||||
|
||||
export default function FeaturesPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<SectionIntro
|
||||
eyebrow="Fitur Bizone"
|
||||
title="Satu platform untuk komunikasi, koordinasi, dan workflow bisnis"
|
||||
description="Bizone dirancang untuk membantu bisnis mengelola komunikasi dan operasional dari satu platform yang saling terhubung."
|
||||
/>
|
||||
|
||||
<section className="mt-14 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
{features.map((feature, index) => (
|
||||
<article key={feature.title} className="card">
|
||||
<p className="text-sm font-bold text-[var(--accent)]">0{index + 1}</p>
|
||||
<h2 className="mt-4 font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
|
||||
{feature.title}
|
||||
</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[var(--muted)]">{feature.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
233
src/app/globals.css
Normal file
233
src/app/globals.css
Normal file
@ -0,0 +1,233 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #f4f8fc;
|
||||
--foreground: #10203b;
|
||||
--ink: #10203b;
|
||||
--muted: #5f6f86;
|
||||
--accent: #0f7e81;
|
||||
--accent-strong: #0f3f99;
|
||||
--panel: #edf4fb;
|
||||
--panel-soft: #f8fbff;
|
||||
--line: rgba(16, 32, 59, 0.09);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-body);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-body), sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-frame {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(15, 126, 129, 0.09), transparent 26%),
|
||||
linear-gradient(180deg, #f8fbff 0%, #f4f8fc 52%, #eff5fb 100%);
|
||||
}
|
||||
|
||||
.hero-shell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-orb {
|
||||
position: absolute;
|
||||
border-radius: 9999px;
|
||||
filter: blur(40px);
|
||||
opacity: 0.68;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-orb-one {
|
||||
top: 6rem;
|
||||
right: 8%;
|
||||
height: 14rem;
|
||||
width: 14rem;
|
||||
background: rgba(15, 126, 129, 0.14);
|
||||
}
|
||||
|
||||
.hero-orb-two {
|
||||
bottom: 2rem;
|
||||
left: 4%;
|
||||
height: 18rem;
|
||||
width: 18rem;
|
||||
background: rgba(15, 63, 153, 0.12);
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
border-radius: 2rem;
|
||||
padding: 1.5rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 255, 0.96)),
|
||||
linear-gradient(135deg, rgba(15, 63, 153, 0.06), rgba(15, 126, 129, 0.08));
|
||||
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.metric-card,
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 2rem;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.section-band {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(236, 244, 251, 0.85)),
|
||||
var(--panel);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 3.25rem;
|
||||
border-radius: 9999px;
|
||||
padding: 0.8rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
background-color 180ms ease,
|
||||
border-color 180ms ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: linear-gradient(135deg, #0f3f99, #1666b7);
|
||||
color: white;
|
||||
box-shadow: 0 20px 40px rgba(15, 63, 153, 0.25);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
border: 1px solid rgba(15, 63, 153, 0.12);
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.8rem;
|
||||
border-radius: 9999px;
|
||||
padding: 0.55rem 1rem;
|
||||
color: var(--muted);
|
||||
transition:
|
||||
color 180ms ease,
|
||||
background-color 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.nav-link-active {
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.nav-link-active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0.95rem;
|
||||
right: 0.95rem;
|
||||
bottom: 0.35rem;
|
||||
height: 3px;
|
||||
border-radius: 9999px;
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
min-height: 3.5rem;
|
||||
border: 1px solid rgba(15, 63, 153, 0.12);
|
||||
border-radius: 1.25rem;
|
||||
background: var(--panel-soft);
|
||||
padding: 0.95rem 1rem;
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
background-color 180ms ease;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #8b98aa;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: rgba(15, 126, 129, 0.55);
|
||||
box-shadow: 0 0 0 4px rgba(15, 126, 129, 0.12);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.legal-content h2 {
|
||||
font-family: var(--font-heading), sans-serif;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.legal-content p,
|
||||
.legal-content li {
|
||||
color: var(--muted);
|
||||
line-height: 1.9;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.legal-content ul {
|
||||
margin-top: 1rem;
|
||||
list-style: disc;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.font-heading {
|
||||
font-family: var(--font-heading), sans-serif;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-panel,
|
||||
.metric-card,
|
||||
.card {
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
}
|
||||
57
src/app/layout.tsx
Normal file
57
src/app/layout.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Manrope, Plus_Jakarta_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { SiteFooter } from "@/components/site-footer";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { site } from "@/lib/site";
|
||||
|
||||
const plusJakartaSans = Plus_Jakarta_Sans({
|
||||
variable: "--font-body",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const manrope = Manrope({
|
||||
variable: "--font-heading",
|
||||
subsets: ["latin"],
|
||||
weight: ["500", "700", "800"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(site.domain),
|
||||
title: site.title,
|
||||
description: site.description,
|
||||
icons: {
|
||||
icon: "/favicon.ico",
|
||||
shortcut: "/favicon.ico",
|
||||
apple: "/favicon.ico",
|
||||
},
|
||||
alternates: {
|
||||
canonical: site.domain,
|
||||
},
|
||||
openGraph: {
|
||||
title: site.title,
|
||||
description: site.description,
|
||||
url: site.domain,
|
||||
siteName: site.name,
|
||||
locale: "id_ID",
|
||||
type: "website",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="id" className={`${plusJakartaSans.variable} ${manrope.variable} h-full antialiased`}>
|
||||
<body className="min-h-full">
|
||||
<div className="site-frame">
|
||||
<SiteHeader />
|
||||
<div className="flex-1">{children}</div>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
182
src/app/page.tsx
Normal file
182
src/app/page.tsx
Normal file
@ -0,0 +1,182 @@
|
||||
import Link from "next/link";
|
||||
import { SectionIntro } from "@/components/section-intro";
|
||||
import { benefits, features, problems, solutions } from "@/lib/site";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<section className="hero-shell overflow-hidden">
|
||||
<div className="hero-orb hero-orb-one" />
|
||||
<div className="hero-orb hero-orb-two" />
|
||||
<div className="mx-auto grid w-full max-w-7xl gap-10 px-5 py-16 md:px-8 md:py-24 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
|
||||
<div className="relative z-10">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.26em] text-[var(--accent)]">
|
||||
Bizone • Business Operating Platform
|
||||
</p>
|
||||
<h1 className="mt-6 max-w-4xl font-heading text-5xl font-black tracking-[-0.06em] text-[var(--ink)] md:text-7xl">
|
||||
Semua bisnis dalam satu tempat.
|
||||
</h1>
|
||||
<p className="mt-6 max-w-2xl text-lg leading-8 text-[var(--muted)] md:text-xl">
|
||||
Bizone membantu bisnis mengelola komunikasi pelanggan, operasional tim, automasi alur
|
||||
kerja, kontak, dan proses bisnis dalam satu platform yang terhubung.
|
||||
</p>
|
||||
|
||||
<div className="mt-10 flex flex-wrap gap-4">
|
||||
<Link href="/contact" className="button button-primary">
|
||||
Jadwalkan Demo
|
||||
</Link>
|
||||
<Link href="/features" className="button button-secondary">
|
||||
Pelajari Fitur
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<p className="mt-8 max-w-xl text-sm leading-7 text-[var(--muted)]">
|
||||
Dirancang untuk bisnis yang ingin bekerja lebih rapi, lebih cepat, dan lebih terukur
|
||||
tanpa harus berpindah-pindah banyak tools.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="hero-panel">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="metric-card md:col-span-2">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--muted)]">
|
||||
Satu platform untuk operasional bisnis modern
|
||||
</p>
|
||||
<p className="mt-4 text-sm leading-7 text-[var(--ink)]">
|
||||
Banyak bisnis masih memakai terlalu banyak aplikasi terpisah untuk chat, kontak,
|
||||
follow up, assignment tim, dan workflow. Bizone menyatukan kebutuhan itu ke
|
||||
dalam satu sistem yang siap tumbuh.
|
||||
</p>
|
||||
</div>
|
||||
<div className="metric-card">
|
||||
<p className="text-4xl font-black tracking-[-0.05em] text-[var(--ink)]">1</p>
|
||||
<p className="mt-2 text-sm leading-7 text-[var(--muted)]">
|
||||
dashboard terpusat untuk komunikasi, workflow, dan visibilitas operasional.
|
||||
</p>
|
||||
</div>
|
||||
<div className="metric-card bg-[linear-gradient(180deg,#103d94,#0a2f74)] text-white">
|
||||
<p className="text-4xl font-black tracking-[-0.05em]">24/7</p>
|
||||
<p className="mt-2 text-sm leading-7 text-white/82">
|
||||
ritme operasional yang lebih siap dipantau oleh pemilik bisnis dan tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<SectionIntro
|
||||
eyebrow="Masalah yang sering muncul"
|
||||
title="Operasional bisnis sering terasa berat karena sistemnya terpecah."
|
||||
description="Bizone hadir untuk membantu bisnis bekerja lebih terintegrasi dan terstruktur."
|
||||
/>
|
||||
|
||||
<div className="mt-12 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
{problems.map((problem) => (
|
||||
<article key={problem} className="card">
|
||||
<p className="text-sm leading-7 text-[var(--ink)]">{problem}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-band">
|
||||
<div className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<SectionIntro
|
||||
eyebrow="Fitur utama"
|
||||
title="Kapabilitas inti untuk tim yang ingin bekerja lebih rapi dan lebih cepat."
|
||||
description="Bizone menghubungkan komunikasi, data kontak, assignment, automation, dan proses bisnis dalam satu permukaan kerja."
|
||||
align="center"
|
||||
/>
|
||||
|
||||
<div className="mt-12 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<article key={feature.title} className="card">
|
||||
<h2 className="font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
|
||||
{feature.title}
|
||||
</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[var(--muted)]">{feature.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<div className="grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
|
||||
<article className="card bg-[linear-gradient(180deg,#0d3a90,#08295e)] text-white">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.24em] text-white/70">Kenapa Bizone</p>
|
||||
<h2 className="mt-4 font-heading text-4xl font-extrabold tracking-[-0.05em]">
|
||||
Sistem yang menyatukan komunikasi dengan pekerjaan nyata.
|
||||
</h2>
|
||||
<p className="mt-6 text-sm leading-8 text-white/82">
|
||||
Bizone tidak berhenti di inbox. Platform ini dirancang untuk membantu bisnis bergerak
|
||||
dari pesan masuk menjadi tindak lanjut, assignment, workflow, dan visibilitas hasil.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
{benefits.map((benefit) => (
|
||||
<article key={benefit.title} className="card">
|
||||
<h3 className="font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[var(--muted)]">{benefit.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-band">
|
||||
<div className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<SectionIntro
|
||||
eyebrow="Use cases"
|
||||
title="Dipakai untuk ritme operasional yang berbeda, dari sales sampai customer service."
|
||||
description="Bizone cocok untuk tim yang bergantung pada komunikasi cepat, follow up terstruktur, dan koordinasi yang jelas."
|
||||
/>
|
||||
|
||||
<div className="mt-12 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
||||
{solutions.map((solution) => (
|
||||
<article key={solution.title} className="card">
|
||||
<h3 className="font-heading text-xl font-bold tracking-[-0.03em] text-[var(--ink)]">
|
||||
{solution.title}
|
||||
</h3>
|
||||
<p className="mt-4 text-sm leading-7 text-[var(--muted)]">{solution.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<div className="card grid gap-8 overflow-hidden bg-[linear-gradient(135deg,#f5fbff,#e7f8f6)] lg:grid-cols-[1fr_auto] lg:items-end">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.24em] text-[var(--accent)]">
|
||||
Tentang Bizone
|
||||
</p>
|
||||
<h2 className="mt-4 font-heading text-4xl font-extrabold tracking-[-0.05em] text-[var(--ink)]">
|
||||
Platform operasional bisnis yang menghubungkan komunikasi, koordinasi tim, dan workflow.
|
||||
</h2>
|
||||
<p className="mt-6 max-w-3xl text-sm leading-8 text-[var(--muted)]">
|
||||
Kami percaya bisnis modern membutuhkan sistem yang tidak hanya mudah digunakan, tetapi
|
||||
juga mampu menghubungkan komunikasi dengan proses operasional nyata.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link href="/about" className="button button-secondary">
|
||||
Pelajari Tentang Bizone
|
||||
</Link>
|
||||
<Link href="/contact" className="button button-primary">
|
||||
Minta Demo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
93
src/app/privacy-policy/page.tsx
Normal file
93
src/app/privacy-policy/page.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { LegalPage } from "@/components/legal-page";
|
||||
import { site } from "@/lib/site";
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
return (
|
||||
<LegalPage
|
||||
title="Privacy Policy"
|
||||
updatedAt="May 12, 2026"
|
||||
intro="Kebijakan Privasi ini menjelaskan bagaimana Bizone mengumpulkan, menggunakan, menyimpan, dan melindungi informasi saat Anda mengakses website, platform, atau layanan kami melalui bizone.id dan layanan terkait."
|
||||
>
|
||||
<section>
|
||||
<h2>1. Informasi yang Kami Kumpulkan</h2>
|
||||
<p>Kami dapat mengumpulkan informasi yang Anda berikan langsung, data penggunaan layanan, dan data dari integrasi pihak ketiga yang Anda izinkan.</p>
|
||||
<ul>
|
||||
<li>Nama, nama perusahaan, email, nomor telepon atau WhatsApp, dan informasi akun.</li>
|
||||
<li>Alamat IP, perangkat, browser, halaman yang diakses, waktu akses, dan aktivitas penggunaan.</li>
|
||||
<li>Data yang diperlukan dari layanan pihak ketiga untuk menyediakan fitur Bizone.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>2. Cara Kami Menggunakan Informasi</h2>
|
||||
<ul>
|
||||
<li>Menyediakan, mengoperasikan, dan mengembangkan layanan Bizone.</li>
|
||||
<li>Memproses permintaan demo, pertanyaan, dan komunikasi bisnis.</li>
|
||||
<li>Mengelola akun, keamanan, analisis layanan, dan pemberitahuan penting.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>3. Dasar Pemrosesan Data</h2>
|
||||
<p>
|
||||
Kami memproses data untuk menjalankan layanan yang Anda minta, memenuhi kewajiban hukum,
|
||||
melindungi kepentingan sah Bizone, dan memperoleh persetujuan Anda bila diwajibkan hukum.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>4. Penyimpanan dan Keamanan Data</h2>
|
||||
<p>
|
||||
Kami mengambil langkah teknis dan organisasional yang wajar untuk melindungi data dari
|
||||
akses tidak sah, perubahan, pengungkapan, atau penghancuran yang tidak sah.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>5. Pembagian Informasi</h2>
|
||||
<ul>
|
||||
<li>Kepada penyedia layanan atau mitra yang membantu operasional Bizone.</li>
|
||||
<li>Untuk memenuhi kewajiban hukum atau permintaan otoritas yang sah.</li>
|
||||
<li>Untuk melindungi hak, keamanan, dan kepentingan Bizone, pengguna, atau pihak lain.</li>
|
||||
<li>Dalam konteks restrukturisasi bisnis, merger, akuisisi, atau transaksi serupa.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>6. Cookies dan Teknologi Serupa</h2>
|
||||
<p>
|
||||
Bizone dapat menggunakan cookies atau teknologi serupa untuk menjaga sesi pengguna,
|
||||
memahami penggunaan website, meningkatkan performa, dan membantu analitik serta keamanan.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>7. Hak Pengguna</h2>
|
||||
<ul>
|
||||
<li>Meminta akses ke data pribadi Anda.</li>
|
||||
<li>Meminta koreksi data yang tidak akurat.</li>
|
||||
<li>Meminta penghapusan data tertentu.</li>
|
||||
<li>Membatasi atau menolak pemrosesan tertentu sesuai hukum yang berlaku.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>8. Tautan dan Layanan Pihak Ketiga</h2>
|
||||
<p>
|
||||
Website atau layanan Bizone dapat berisi tautan ke website atau layanan pihak ketiga.
|
||||
Kami menyarankan Anda membaca kebijakan privasi pihak ketiga tersebut secara terpisah.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>9. Kontak</h2>
|
||||
<ul>
|
||||
<li>Website: {site.domain}</li>
|
||||
<li>Email: {site.email}</li>
|
||||
<li>WhatsApp: {site.whatsapp}</li>
|
||||
<li>Alamat: {site.address}</li>
|
||||
</ul>
|
||||
</section>
|
||||
</LegalPage>
|
||||
);
|
||||
}
|
||||
41
src/app/solutions/page.tsx
Normal file
41
src/app/solutions/page.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { SectionIntro } from "@/components/section-intro";
|
||||
import { audiences, solutions } from "@/lib/site";
|
||||
|
||||
export default function SolutionsPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
|
||||
<SectionIntro
|
||||
eyebrow="Solusi"
|
||||
title="Dipakai untuk kebutuhan bisnis yang nyata"
|
||||
description="Bizone cocok untuk operasional yang bergantung pada komunikasi cepat, tindak lanjut terstruktur, dan koordinasi lintas tim."
|
||||
/>
|
||||
|
||||
<section className="mt-14 grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{solutions.map((solution) => (
|
||||
<article key={solution.title} className="card">
|
||||
<h2 className="font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
|
||||
{solution.title}
|
||||
</h2>
|
||||
<p className="mt-4 text-sm leading-7 text-[var(--muted)]">{solution.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<aside className="card bg-[linear-gradient(180deg,#103d94,#0a2f74)] text-white">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.24em] text-white/70">Target use cases</p>
|
||||
<h2 className="mt-4 font-heading text-3xl font-extrabold tracking-[-0.04em]">
|
||||
Cocok untuk tim yang butuh ritme operasional yang lebih rapi.
|
||||
</h2>
|
||||
<div className="mt-8 space-y-4 text-sm leading-7 text-white/82">
|
||||
{audiences.map((audience) => (
|
||||
<p key={audience} className="rounded-2xl border border-white/12 bg-white/6 px-4 py-3">
|
||||
{audience}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
91
src/app/terms-and-conditions/page.tsx
Normal file
91
src/app/terms-and-conditions/page.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import { LegalPage } from "@/components/legal-page";
|
||||
import { site } from "@/lib/site";
|
||||
|
||||
export default function TermsAndConditionsPage() {
|
||||
return (
|
||||
<LegalPage
|
||||
title="Terms & Conditions"
|
||||
updatedAt="May 12, 2026"
|
||||
intro="Syarat dan Ketentuan ini mengatur akses dan penggunaan website, platform, produk, dan layanan Bizone melalui bizone.id dan layanan terkait."
|
||||
>
|
||||
<section>
|
||||
<h2>1. Ruang Lingkup Layanan</h2>
|
||||
<p>
|
||||
Bizone menyediakan platform untuk membantu operasional bisnis, termasuk pengelolaan
|
||||
komunikasi, kontak, workflow, kolaborasi tim, dan proses bisnis terkait.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>2. Kewajiban Pengguna</h2>
|
||||
<ul>
|
||||
<li>Memberikan informasi yang benar, akurat, dan terkini.</li>
|
||||
<li>Menjaga kerahasiaan akun dan kredensial akses Anda.</li>
|
||||
<li>Menggunakan layanan sesuai hukum dan peraturan yang berlaku.</li>
|
||||
<li>Tidak menggunakan layanan untuk penipuan, spam, atau aktivitas melawan hukum.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>3. Penggunaan yang Dilarang</h2>
|
||||
<ul>
|
||||
<li>Mengirim konten yang melanggar hukum, menyesatkan, mengancam, atau merugikan.</li>
|
||||
<li>Melakukan akses tidak sah ke sistem, akun, data, atau jaringan.</li>
|
||||
<li>Mengganggu atau membebani infrastruktur layanan.</li>
|
||||
<li>Melanggar ketentuan platform pihak ketiga yang terhubung dengan layanan Bizone.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>4. Integrasi Pihak Ketiga</h2>
|
||||
<p>
|
||||
Layanan Bizone dapat terhubung dengan layanan atau platform pihak ketiga. Penggunaan
|
||||
integrasi tersebut juga dapat tunduk pada syarat dan kebijakan pihak ketiga terkait.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>5. Hak Kekayaan Intelektual</h2>
|
||||
<p>
|
||||
Seluruh konten, merek, desain, teks, sistem, logo, dan materi lain yang terkait dengan
|
||||
Bizone, kecuali dinyatakan lain, adalah milik Bizone atau pemberi lisensinya.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>6. Ketersediaan Layanan</h2>
|
||||
<p>
|
||||
Bizone berupaya menjaga layanan tetap tersedia dan andal, tetapi tidak menjamin bahwa
|
||||
layanan akan selalu bebas gangguan, bebas kesalahan, atau tersedia setiap saat.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>7. Penafian dan Pembatasan Tanggung Jawab</h2>
|
||||
<p>
|
||||
Sejauh diizinkan hukum, layanan Bizone disediakan sebagaimana adanya dan Bizone tidak
|
||||
bertanggung jawab atas kerugian tidak langsung, insidental, khusus, konsekuensial, atau
|
||||
kehilangan keuntungan yang timbul dari penggunaan layanan.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>8. Perubahan Layanan dan Ketentuan</h2>
|
||||
<p>
|
||||
Bizone berhak mengubah, memperbarui, atau menyesuaikan layanan maupun Syarat dan
|
||||
Ketentuan ini kapan saja. Versi terbaru akan dipublikasikan melalui website Bizone.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>9. Kontak</h2>
|
||||
<ul>
|
||||
<li>Website: {site.domain}</li>
|
||||
<li>Email: {site.email}</li>
|
||||
<li>WhatsApp: {site.whatsapp}</li>
|
||||
<li>Alamat: {site.address}</li>
|
||||
</ul>
|
||||
</section>
|
||||
</LegalPage>
|
||||
);
|
||||
}
|
||||
224
src/components/contact-form.tsx
Normal file
224
src/components/contact-form.tsx
Normal file
@ -0,0 +1,224 @@
|
||||
"use client";
|
||||
|
||||
import { startTransition, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { site } from "@/lib/site";
|
||||
|
||||
type CaptchaData = {
|
||||
prompt: string;
|
||||
token: string;
|
||||
};
|
||||
|
||||
const initialForm = {
|
||||
name: "",
|
||||
businessName: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
message: "",
|
||||
captchaAnswer: "",
|
||||
website: "",
|
||||
};
|
||||
|
||||
export function ContactForm() {
|
||||
const [form, setForm] = useState(initialForm);
|
||||
const [captcha, setCaptcha] = useState<CaptchaData | null>(null);
|
||||
const [status, setStatus] = useState<string>("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
async function loadCaptcha() {
|
||||
setStatus("");
|
||||
const response = await fetch("/api/contact/captcha", { cache: "no-store" });
|
||||
const data = (await response.json()) as CaptchaData;
|
||||
setCaptcha(data);
|
||||
setForm((current) => ({ ...current, captchaAnswer: "" }));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
startTransition(() => {
|
||||
void loadCaptcha();
|
||||
});
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setStatus("");
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/contact", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...form,
|
||||
captchaToken: captcha?.token || "",
|
||||
}),
|
||||
});
|
||||
|
||||
const data = (await response.json()) as { message?: string };
|
||||
|
||||
if (!response.ok) {
|
||||
setStatus(data.message || "Terjadi kesalahan saat mengirim permintaan.");
|
||||
await loadCaptcha();
|
||||
return;
|
||||
}
|
||||
|
||||
setForm(initialForm);
|
||||
setStatus(data.message || "Permintaan berhasil dikirim.");
|
||||
await loadCaptcha();
|
||||
} catch {
|
||||
setStatus("Gagal menghubungi server. Coba lagi.");
|
||||
await loadCaptcha();
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="mt-8" onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="name" className="text-xs font-bold uppercase tracking-[0.18em] text-[var(--muted)]">
|
||||
Nama
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
autoComplete="name"
|
||||
placeholder="Nama lengkap"
|
||||
className="form-input mt-2"
|
||||
value={form.name}
|
||||
onChange={(event) => setForm({ ...form, name: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="businessName" className="text-xs font-bold uppercase tracking-[0.18em] text-[var(--muted)]">
|
||||
Nama Bisnis
|
||||
</label>
|
||||
<input
|
||||
id="businessName"
|
||||
name="businessName"
|
||||
type="text"
|
||||
autoComplete="organization"
|
||||
placeholder="Nama usaha atau perusahaan"
|
||||
className="form-input mt-2"
|
||||
value={form.businessName}
|
||||
onChange={(event) => setForm({ ...form, businessName: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="text-xs font-bold uppercase tracking-[0.18em] text-[var(--muted)]">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
placeholder="nama@perusahaan.com"
|
||||
className="form-input mt-2"
|
||||
value={form.email}
|
||||
onChange={(event) => setForm({ ...form, email: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="text-xs font-bold uppercase tracking-[0.18em] text-[var(--muted)]">
|
||||
Nomor WhatsApp
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
autoComplete="tel"
|
||||
placeholder="08xxxxxxxxxx"
|
||||
className="form-input mt-2"
|
||||
value={form.phone}
|
||||
onChange={(event) => setForm({ ...form, phone: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label htmlFor="message" className="text-xs font-bold uppercase tracking-[0.18em] text-[var(--muted)]">
|
||||
Kebutuhan Anda
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows={6}
|
||||
placeholder="Ceritakan kebutuhan operasional, tim, atau workflow yang ingin Anda rapikan."
|
||||
className="form-input form-textarea mt-2"
|
||||
value={form.message}
|
||||
onChange={(event) => setForm({ ...form, message: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden" aria-hidden="true">
|
||||
<label htmlFor="website">Website</label>
|
||||
<input
|
||||
id="website"
|
||||
name="website"
|
||||
type="text"
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
value={form.website}
|
||||
onChange={(event) => setForm({ ...form, website: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<label htmlFor="captchaAnswer" className="text-xs font-bold uppercase tracking-[0.18em] text-[var(--muted)]">
|
||||
Captcha
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm font-semibold text-[var(--accent-strong)]"
|
||||
onClick={() => {
|
||||
startTransition(() => {
|
||||
void loadCaptcha();
|
||||
});
|
||||
}}
|
||||
>
|
||||
Muat ulang captcha
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 grid gap-3 md:grid-cols-[0.45fr_0.55fr]">
|
||||
<div className="flex min-h-14 items-center rounded-[1.25rem] border border-dashed border-[rgba(15,63,153,0.18)] bg-[var(--panel-soft)] px-4 font-heading text-lg font-bold tracking-[0.04em] text-[var(--ink)]">
|
||||
{captcha?.prompt || "Memuat captcha..."}
|
||||
</div>
|
||||
<input
|
||||
id="captchaAnswer"
|
||||
name="captchaAnswer"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
placeholder="Masukkan jawaban"
|
||||
className="form-input"
|
||||
value={form.captchaAnswer}
|
||||
onChange={(event) => setForm({ ...form, captchaAnswer: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-4">
|
||||
<button type="submit" className="button button-primary" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Mengirim..." : "Kirim Permintaan"}
|
||||
</button>
|
||||
<Link href={site.whatsappHref} className="button button-secondary" target="_blank" rel="noreferrer">
|
||||
Chat via WhatsApp
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm leading-7 text-[var(--muted)]">
|
||||
Form ini mengirim email langsung ke {site.email} melalui server Bizone dan dilindungi captcha.
|
||||
</p>
|
||||
|
||||
{status ? <p className="mt-4 text-sm font-medium text-[var(--ink)]">{status}</p> : null}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
26
src/components/legal-page.tsx
Normal file
26
src/components/legal-page.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type LegalPageProps = {
|
||||
title: string;
|
||||
updatedAt: string;
|
||||
intro: string;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function LegalPage({ title, updatedAt, intro, children }: LegalPageProps) {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-4xl px-5 py-16 md:px-8 md:py-24">
|
||||
<div className="rounded-[2rem] border border-[var(--line)] bg-white p-8 shadow-[0_28px_80px_rgba(15,23,42,0.08)] md:p-12">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.24em] text-[var(--accent)]">
|
||||
Legal
|
||||
</p>
|
||||
<h1 className="mt-4 font-heading text-4xl font-extrabold tracking-[-0.04em] text-[var(--ink)] md:text-5xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-4 text-sm font-semibold text-[var(--muted)]">Last updated: {updatedAt}</p>
|
||||
<p className="mt-6 text-base leading-8 text-[var(--muted)]">{intro}</p>
|
||||
<div className="legal-content mt-10 space-y-8">{children}</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
27
src/components/section-intro.tsx
Normal file
27
src/components/section-intro.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
type SectionIntroProps = {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
align?: "left" | "center";
|
||||
};
|
||||
|
||||
export function SectionIntro({
|
||||
eyebrow,
|
||||
title,
|
||||
description,
|
||||
align = "left",
|
||||
}: SectionIntroProps) {
|
||||
return (
|
||||
<div className={align === "center" ? "mx-auto max-w-3xl text-center" : "max-w-3xl"}>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.24em] text-[var(--accent)]">
|
||||
{eyebrow}
|
||||
</p>
|
||||
<h2 className="mt-4 font-heading text-3xl font-extrabold tracking-[-0.04em] text-[var(--ink)] md:text-5xl">
|
||||
{title}
|
||||
</h2>
|
||||
{description ? (
|
||||
<p className="mt-5 text-base leading-8 text-[var(--muted)] md:text-lg">{description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/components/site-footer.tsx
Normal file
57
src/components/site-footer.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import Link from "next/link";
|
||||
import { footerLinks, site } from "@/lib/site";
|
||||
|
||||
export function SiteFooter() {
|
||||
return (
|
||||
<footer className="border-t border-[var(--line)] bg-[var(--panel)]">
|
||||
<div className="mx-auto grid max-w-7xl gap-12 px-5 py-16 md:grid-cols-[1.4fr_1fr_1fr] md:px-8">
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<p className="font-heading text-2xl font-extrabold tracking-[-0.03em] text-[var(--ink)]">
|
||||
{site.name}
|
||||
</p>
|
||||
<p className="mt-3 max-w-xl text-sm leading-7 text-[var(--muted)]">
|
||||
{site.description}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--ink)]">
|
||||
{site.name}, semua bisnis dalam satu tempat.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-bold uppercase tracking-[0.2em] text-[var(--muted)]">
|
||||
Navigasi
|
||||
</p>
|
||||
<div className="mt-4 flex flex-col gap-3 text-sm text-[var(--ink)]">
|
||||
{footerLinks.map((item) => (
|
||||
<Link key={item.href} href={item.href} className="transition hover:text-[var(--accent)]">
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-bold uppercase tracking-[0.2em] text-[var(--muted)]">
|
||||
Kontak
|
||||
</p>
|
||||
<div className="mt-4 flex flex-col gap-3 text-sm text-[var(--ink)]">
|
||||
<a href={site.domain} target="_blank" rel="noreferrer">
|
||||
bizone.id
|
||||
</a>
|
||||
<a href={`mailto:${site.email}`}>{site.email}</a>
|
||||
<a href={site.whatsappHref} target="_blank" rel="noreferrer">
|
||||
{site.whatsapp}
|
||||
</a>
|
||||
<span>{site.address}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[var(--line)] px-5 py-5 text-center text-xs text-[var(--muted)] md:px-8">
|
||||
© 2026 {site.company}. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
48
src/components/site-header.tsx
Normal file
48
src/components/site-header.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { navigation, site } from "@/lib/site";
|
||||
|
||||
export function SiteHeader() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-white/60 bg-[rgba(248,251,255,0.82)] backdrop-blur-xl">
|
||||
<div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-6 px-5 py-4 md:px-8">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<Image
|
||||
src="/bizone.png"
|
||||
alt={`${site.name} logo`}
|
||||
width={140}
|
||||
height={75}
|
||||
priority
|
||||
className="h-auto w-[120px] md:w-[140px]"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-6 text-sm font-semibold text-[var(--muted)] lg:flex">
|
||||
{navigation.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={`nav-link ${isActive ? "nav-link-active" : ""}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<Link href="/contact" className="button button-primary hidden sm:inline-flex">
|
||||
Jadwalkan Demo
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
119
src/lib/contact.ts
Normal file
119
src/lib/contact.ts
Normal file
@ -0,0 +1,119 @@
|
||||
import crypto from "node:crypto";
|
||||
|
||||
const CAPTCHA_TTL_MS = 10 * 60 * 1000;
|
||||
const RATE_LIMIT_WINDOW_MS = 15 * 60 * 1000;
|
||||
const RATE_LIMIT_MAX_ATTEMPTS = 5;
|
||||
|
||||
type CaptchaPayload = {
|
||||
answer: string;
|
||||
expiresAt: number;
|
||||
nonce: string;
|
||||
};
|
||||
|
||||
type RateLimitEntry = {
|
||||
count: number;
|
||||
resetAt: number;
|
||||
};
|
||||
|
||||
const rateLimitStore = new Map<string, RateLimitEntry>();
|
||||
|
||||
function getCaptchaSecret() {
|
||||
return process.env.CAPTCHA_SECRET || "local-dev-captcha-secret";
|
||||
}
|
||||
|
||||
function signCaptchaPayload(payload: CaptchaPayload) {
|
||||
return crypto
|
||||
.createHmac("sha256", getCaptchaSecret())
|
||||
.update(`${payload.answer}:${payload.expiresAt}:${payload.nonce}`)
|
||||
.digest("hex");
|
||||
}
|
||||
|
||||
function encodeCaptcha(payload: CaptchaPayload) {
|
||||
const signature = signCaptchaPayload(payload);
|
||||
return Buffer.from(JSON.stringify({ ...payload, signature }), "utf8").toString("base64url");
|
||||
}
|
||||
|
||||
function decodeCaptcha(token: string) {
|
||||
try {
|
||||
const json = Buffer.from(token, "base64url").toString("utf8");
|
||||
const parsed = JSON.parse(json) as CaptchaPayload & { signature: string };
|
||||
return parsed;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function generateCaptcha() {
|
||||
const left = crypto.randomInt(2, 10);
|
||||
const right = crypto.randomInt(1, 10);
|
||||
const operator = crypto.randomInt(0, 2) === 0 ? "+" : "-";
|
||||
const safeLeft = operator === "-" && left < right ? right + crypto.randomInt(1, 4) : left;
|
||||
const answer = operator === "+" ? safeLeft + right : safeLeft - right;
|
||||
|
||||
const payload: CaptchaPayload = {
|
||||
answer: String(answer),
|
||||
expiresAt: Date.now() + CAPTCHA_TTL_MS,
|
||||
nonce: crypto.randomBytes(8).toString("hex"),
|
||||
};
|
||||
|
||||
return {
|
||||
prompt: `${safeLeft} ${operator} ${right} = ?`,
|
||||
token: encodeCaptcha(payload),
|
||||
};
|
||||
}
|
||||
|
||||
export function verifyCaptcha(token: string, answer: string) {
|
||||
const parsed = decodeCaptcha(token);
|
||||
if (!parsed) {
|
||||
return { ok: false, reason: "Captcha tidak valid." };
|
||||
}
|
||||
|
||||
const expectedSignature = signCaptchaPayload({
|
||||
answer: parsed.answer,
|
||||
expiresAt: parsed.expiresAt,
|
||||
nonce: parsed.nonce,
|
||||
});
|
||||
|
||||
if (parsed.signature !== expectedSignature) {
|
||||
return { ok: false, reason: "Captcha tidak valid." };
|
||||
}
|
||||
|
||||
if (Date.now() > parsed.expiresAt) {
|
||||
return { ok: false, reason: "Captcha sudah kedaluwarsa. Coba muat ulang captcha." };
|
||||
}
|
||||
|
||||
if (parsed.answer.trim() !== answer.trim()) {
|
||||
return { ok: false, reason: "Jawaban captcha salah." };
|
||||
}
|
||||
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
export function checkRateLimit(identifier: string) {
|
||||
const now = Date.now();
|
||||
const existing = rateLimitStore.get(identifier);
|
||||
|
||||
if (!existing || existing.resetAt <= now) {
|
||||
rateLimitStore.set(identifier, {
|
||||
count: 1,
|
||||
resetAt: now + RATE_LIMIT_WINDOW_MS,
|
||||
});
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
if (existing.count >= RATE_LIMIT_MAX_ATTEMPTS) {
|
||||
return { ok: false, retryAfterMs: existing.resetAt - now };
|
||||
}
|
||||
|
||||
existing.count += 1;
|
||||
rateLimitStore.set(identifier, existing);
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
export function getClientIpHeader(forwardedFor: string | null) {
|
||||
if (!forwardedFor) {
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
return forwardedFor.split(",")[0]?.trim() || "unknown";
|
||||
}
|
||||
28
src/lib/mailer.ts
Normal file
28
src/lib/mailer.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import nodemailer from "nodemailer";
|
||||
|
||||
function getRequiredEnv(name: string) {
|
||||
const value = process.env[name];
|
||||
if (!value) {
|
||||
throw new Error(`Missing required environment variable: ${name}`);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
export function createMailerTransport() {
|
||||
return nodemailer.createTransport({
|
||||
host: getRequiredEnv("SMTP_HOST"),
|
||||
port: Number(process.env.SMTP_PORT || 465),
|
||||
secure: true,
|
||||
auth: {
|
||||
user: getRequiredEnv("SMTP_USER"),
|
||||
pass: getRequiredEnv("SMTP_PASS"),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function getMailerConfig() {
|
||||
return {
|
||||
from: process.env.CONTACT_FROM_EMAIL || getRequiredEnv("SMTP_USER"),
|
||||
to: process.env.CONTACT_TO_EMAIL || "info@bizone.id",
|
||||
};
|
||||
}
|
||||
131
src/lib/site.ts
Normal file
131
src/lib/site.ts
Normal file
@ -0,0 +1,131 @@
|
||||
export const site = {
|
||||
name: "Bizone",
|
||||
domain: "https://www.bizone.id",
|
||||
title: "Bizone | Semua bisnis dalam satu tempat",
|
||||
shortTitle: "Semua bisnis dalam satu tempat",
|
||||
description:
|
||||
"Bizone adalah platform operasional bisnis yang membantu perusahaan mengelola komunikasi, kontak, workflow, dan proses bisnis dalam satu tempat.",
|
||||
tagline: "Business Operating Platform",
|
||||
company: "PT Integrasi Persada Teknologi",
|
||||
email: "info@bizone.id",
|
||||
whatsapp: "+6281535221121",
|
||||
whatsappHref: "https://wa.me/6281535221121",
|
||||
address:
|
||||
"Jl. Srengseng Sawah No.51 C, Kel. Srengseng Sawah, Jagakarsa, Jakarta Selatan, DKI Jakarta 12640",
|
||||
mapUrl:
|
||||
"https://www.google.com/maps?q=Jl.%20Srengseng%20Sawah%20No.51%20C%2C%20Kel.%20Srengseng%20Sawah%2C%20Jagakarsa%2C%20Jakarta%20Selatan%2C%20DKI%20Jakarta%2012640&z=16&output=embed",
|
||||
mapLink:
|
||||
"https://maps.google.com/?q=Jl.%20Srengseng%20Sawah%20No.51%20C%2C%20Kel.%20Srengseng%20Sawah%2C%20Jagakarsa%2C%20Jakarta%20Selatan%2C%20DKI%20Jakarta%2012640",
|
||||
} as const;
|
||||
|
||||
export const navigation = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/features", label: "Features" },
|
||||
{ href: "/solutions", label: "Solutions" },
|
||||
{ href: "/about", label: "About" },
|
||||
{ href: "/contact", label: "Contact" },
|
||||
] as const;
|
||||
|
||||
export const problems = [
|
||||
"Chat pelanggan tersebar di banyak perangkat atau akun",
|
||||
"Tindak lanjut leads dan customer tidak konsisten",
|
||||
"Tim sulit memantau siapa mengerjakan apa",
|
||||
"Data kontak, percakapan, dan proses bisnis tidak terhubung",
|
||||
"Workflow masih manual dan memakan waktu",
|
||||
] as const;
|
||||
|
||||
export const features = [
|
||||
{
|
||||
title: "Shared Inbox",
|
||||
description:
|
||||
"Kelola komunikasi pelanggan dalam satu dashboard bersama agar respon tetap cepat dan konsisten.",
|
||||
},
|
||||
{
|
||||
title: "Contact Management",
|
||||
description:
|
||||
"Simpan dan kelola data kontak bisnis lengkap dengan konteks yang dibutuhkan tim operasional.",
|
||||
},
|
||||
{
|
||||
title: "Workflow Automation",
|
||||
description:
|
||||
"Bangun alur kerja untuk merespon, mengarahkan, dan memproses aktivitas secara lebih efisien.",
|
||||
},
|
||||
{
|
||||
title: "Team Collaboration",
|
||||
description:
|
||||
"Perjelas pembagian tugas, koordinasi, dan visibilitas aktivitas tim dalam satu sistem.",
|
||||
},
|
||||
{
|
||||
title: "Business Process Integration",
|
||||
description:
|
||||
"Hubungkan komunikasi dengan proses bisnis seperti lead handling, order flow, approval, dan layanan pelanggan.",
|
||||
},
|
||||
{
|
||||
title: "Reporting & Visibility",
|
||||
description:
|
||||
"Pantau aktivitas dan performa operasional melalui ringkasan data yang membantu pengambilan keputusan.",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const benefits = [
|
||||
{
|
||||
title: "Operasional lebih rapi",
|
||||
description: "Semua aktivitas penting lebih terpusat dan mudah dikelola.",
|
||||
},
|
||||
{
|
||||
title: "Respon lebih cepat",
|
||||
description: "Tim bekerja dari dashboard yang sama tanpa kebingungan alur komunikasi.",
|
||||
},
|
||||
{
|
||||
title: "Lebih mudah dikembangkan",
|
||||
description: "Bizone dirancang untuk mendukung pertumbuhan bisnis dan proses yang makin kompleks.",
|
||||
},
|
||||
{
|
||||
title: "Lebih mudah dipantau",
|
||||
description: "Pemilik bisnis dan tim operasional dapat melihat aktivitas secara lebih jelas.",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const solutions = [
|
||||
{
|
||||
title: "Customer service",
|
||||
description:
|
||||
"Kelola pertanyaan, komplain, dan kebutuhan pelanggan dengan proses yang tertata dan mudah dipantau.",
|
||||
},
|
||||
{
|
||||
title: "Sales follow up",
|
||||
description:
|
||||
"Bantu tim sales menangani leads dengan respon cepat, assignment jelas, dan tindak lanjut yang tidak terlewat.",
|
||||
},
|
||||
{
|
||||
title: "Order & service operations",
|
||||
description:
|
||||
"Hubungkan komunikasi pelanggan dengan proses pemesanan, permintaan layanan, dan tindak lanjut internal.",
|
||||
},
|
||||
{
|
||||
title: "Multi-team coordination",
|
||||
description:
|
||||
"Satukan kerja lintas tim ke dalam satu alur operasional yang lebih rapi dan mudah diukur.",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const audiences = [
|
||||
"UMKM yang ingin naik kelas operasional",
|
||||
"Tim sales dan customer support",
|
||||
"Bisnis multi-brand atau multi-unit",
|
||||
"Perusahaan layanan dengan alur kerja padat",
|
||||
"Operasional berbasis WhatsApp dan komunikasi digital",
|
||||
] as const;
|
||||
|
||||
export const missions = [
|
||||
"Menyederhanakan operasional bisnis",
|
||||
"Menghubungkan komunikasi dengan proses bisnis",
|
||||
"Membantu tim bekerja lebih efisien dan terukur",
|
||||
"Mendukung pertumbuhan bisnis melalui sistem yang lebih rapi dan scalable",
|
||||
] as const;
|
||||
|
||||
export const footerLinks = [
|
||||
...navigation,
|
||||
{ href: "/privacy-policy", label: "Privacy Policy" },
|
||||
{ href: "/terms-and-conditions", label: "Terms & Conditions" },
|
||||
] as const;
|
||||
286
stitch_www.bizone.id/fitur_bizone/code.html
Normal file
286
stitch_www.bizone.id/fitur_bizone/code.html
Normal file
@ -0,0 +1,286 @@
|
||||
<!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;
|
||||
}
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-lg selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-surface/90 backdrop-blur-md sticky top-0 z-50 border-b border-outline-variant shadow-sm w-full">
|
||||
<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>
|
||||
<nav class="hidden md:flex gap-gutter">
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-lg" href="#">Home</a>
|
||||
<a class="text-primary font-bold border-b-2 border-primary pb-1 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-on-surface-variant hover:text-primary transition-colors font-body-lg" href="#">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-label-caps scale-95 active:scale-90 transition-transform hover:bg-primary-container">
|
||||
Jadwalkan Demo
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-[1440px] mx-auto px-margin-desktop py-stack-lg">
|
||||
<!-- Hero Section -->
|
||||
<section class="py-20 text-center max-w-4xl mx-auto">
|
||||
<span class="font-label-caps text-secondary bg-secondary-container/30 px-4 py-1.5 rounded-full mb-stack-md inline-block">Ekosistem Bisnis Terpadu</span>
|
||||
<h1 class="font-display-lg text-display-lg text-primary mb-stack-md">Efisiensi Tanpa Batas dalam Satu Platform</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
||||
Bizone dirancang untuk membantu bisnis mengelola komunikasi dan operasional dari satu platform yang saling terhubung.
|
||||
</p>
|
||||
</section>
|
||||
<!-- Features Bento Grid -->
|
||||
<div class="bento-grid">
|
||||
<!-- Shared Inbox (Big Card) -->
|
||||
<div class="col-span-12 md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="p-stack-lg flex flex-col h-full">
|
||||
<div class="flex items-start justify-between mb-stack-lg">
|
||||
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="inbox">inbox</span>
|
||||
</div>
|
||||
<span class="text-on-surface-variant font-label-caps">Monitoring & Response</span>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="font-headline-lg text-headline-lg text-primary mb-stack-sm">Shared Inbox</h3>
|
||||
<p class="font-body-lg text-on-surface-variant max-w-md">Kelola semua pesan pelanggan dari WhatsApp, Email, dan Media Sosial dalam satu kotak masuk bersama untuk respon tim yang lebih cepat.</p>
|
||||
</div>
|
||||
<div class="mt-stack-lg relative rounded-lg overflow-hidden border border-outline-variant/30 h-64">
|
||||
<img alt="Shared Inbox Interface" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A clean, high-fidelity UI mockup of a collaborative dashboard displaying message threads from multiple channels like WhatsApp and Email. The interface uses a professional primary blue and white theme with soft ambient shadows and crisp typography. The atmosphere is organized and productive, reflecting a modern SaaS environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEkvQ9actkPYYiCpOb1Pj90keiXg4yY-rPYykdPCMoBsCRp5eCYiW8COWBz2Iq243W26qYgLfLCuaSQhXscEFArZW47dGgQ38JMGvYvaW8LVbxppfNW71hjUJAl8WHE3DzKJ8IgZRTSd4dpmMgCpDfmy7hlyqyXHFor0D5Wd-xcjY2jHgq_rkmmPV1HC2mtZmfeblZ_PbQHt4NUNdUrL26yuYuJAJTil2zzGOfqPjj_NbQ4EP3BIvcqU7kpZ2fDvveIOgIGuNb9T8A"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact & Customer Records -->
|
||||
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-lg shadow-sm flex flex-col">
|
||||
<div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mb-stack-lg">
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="contact_page" data-weight="fill" style="font-variation-settings: 'FILL' 1;">contact_page</span>
|
||||
</div>
|
||||
<h3 class="font-title-md text-title-md text-primary mb-stack-sm">Contact & Customer Records</h3>
|
||||
<p class="font-body-sm text-on-surface-variant mb-stack-lg">Pusat data pelanggan yang terorganisir untuk memahami profil dan riwayat transaksi setiap klien secara mendalam.</p>
|
||||
<div class="mt-auto bg-surface-container-low rounded-lg p-stack-sm">
|
||||
<div class="flex items-center gap-3 p-2 bg-surface-container-lowest border border-outline-variant/50 rounded-lg shadow-sm mb-2">
|
||||
<div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center text-on-primary-fixed font-bold text-xs">JD</div>
|
||||
<div class="flex-grow">
|
||||
<div class="h-2 w-20 bg-primary/20 rounded mb-1"></div>
|
||||
<div class="h-1.5 w-12 bg-on-surface-variant/20 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2 bg-surface-container-lowest border border-outline-variant/50 rounded-lg shadow-sm opacity-60">
|
||||
<div class="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed font-bold text-xs">AS</div>
|
||||
<div class="flex-grow">
|
||||
<div class="h-2 w-24 bg-primary/20 rounded mb-1"></div>
|
||||
<div class="h-1.5 w-16 bg-on-surface-variant/20 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Workflow & Automation -->
|
||||
<div class="col-span-12 md:col-span-4 bg-primary-container text-on-primary-container border border-primary rounded-xl p-stack-lg shadow-sm relative overflow-hidden">
|
||||
<div class="absolute -right-8 -top-8 w-32 h-32 bg-on-primary-container/10 rounded-full blur-3xl"></div>
|
||||
<div class="w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center mb-stack-lg backdrop-blur-sm">
|
||||
<span class="material-symbols-outlined text-white" data-icon="bolt">bolt</span>
|
||||
</div>
|
||||
<h3 class="font-title-md text-title-md text-white mb-stack-sm">Workflow & Automation</h3>
|
||||
<p class="font-body-sm text-on-primary-container/80 mb-stack-lg">Otomatiskan tugas rutin mulai dari routing pesan hingga follow-up berkala untuk meningkatkan efisiensi operasional.</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 text-xs font-label-caps bg-white/10 px-3 py-2 rounded-full w-fit">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle">check_circle</span> Auto-Assign Agent
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs font-label-caps bg-white/10 px-3 py-2 rounded-full w-fit">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle">check_circle</span> Trigger-based Emails
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Collaboration & Assignment -->
|
||||
<div class="col-span-12 md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm flex flex-col md:flex-row group">
|
||||
<div class="p-stack-lg flex-1">
|
||||
<div class="w-12 h-12 rounded-lg bg-tertiary/10 flex items-center justify-center mb-stack-lg">
|
||||
<span class="material-symbols-outlined text-tertiary" data-icon="group">group</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-primary mb-stack-sm">Collaboration & Assignment</h3>
|
||||
<p class="font-body-lg text-on-surface-variant">Tingkatkan visibilitas tim dengan fitur penugasan tiket yang jelas. Kolaborasi internal melalui catatan privat tanpa berpindah aplikasi.</p>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-high/30 p-stack-lg flex items-center justify-center">
|
||||
<div class="relative w-full max-w-[280px]">
|
||||
<img alt="Team Collaboration" class="rounded-xl shadow-lg border border-white group-hover:rotate-2 transition-transform duration-500" data-alt="A professional business team working collaboratively in a brightly lit, modern office environment. The image emphasizes teamwork and clear communication, with a diverse group of professionals interacting over digital devices. The lighting is natural and soft, aligning with a premium corporate SaaS aesthetic featuring blues and clean whites." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1zxo1cuLKe1ustOMUP5blnNIKjhuAHYxjElzWzZBMBK942u50xvAk-FE2v7E6618T5kKt1iMr8S0RA-PxV3bQhI__T1gwGji4Dgsnyh2khmeOnWaAbWsDz-o4w5el9N-uYzfxTd8qwSYn3dFW9c8lHClUgshpEBwHsUztQ-qYAKNZMMLv2687felPX8BoHZDosm1kKJrtCBfsJGU6njKeTXuIpQ-3iGzYwnIHTwESSx-Pq8psfnd5Xbz3FQvWiWP2crnKyzKdwQQq"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Process Visibility (Wide/Bottom) -->
|
||||
<div class="col-span-12 bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-lg shadow-sm flex flex-col md:flex-row items-center gap-gutter group">
|
||||
<div class="flex-1">
|
||||
<div class="w-12 h-12 rounded-lg bg-secondary-container/40 flex items-center justify-center mb-stack-lg">
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="bar_chart">bar_chart</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-primary mb-stack-sm">Process Visibility</h3>
|
||||
<p class="font-body-lg text-on-surface-variant mb-stack-lg">Dapatkan laporan mendalam tentang performa tim dan kepuasan pelanggan secara real-time untuk pengambilan keputusan berbasis data.</p>
|
||||
<button class="flex items-center gap-2 text-primary font-bold hover:underline">
|
||||
Lihat Contoh Laporan <span class="material-symbols-outlined">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 w-full h-full min-h-[240px] bg-white rounded-lg border border-outline-variant/30 overflow-hidden relative">
|
||||
<div class="absolute inset-0 p-6 flex flex-col gap-4">
|
||||
<div class="flex justify-between items-end gap-2 h-32">
|
||||
<div class="w-full bg-primary-fixed-dim rounded-t-sm group-hover:h-24 h-16 transition-all duration-1000"></div>
|
||||
<div class="w-full bg-primary-container rounded-t-sm group-hover:h-28 h-20 transition-all duration-1000 delay-75"></div>
|
||||
<div class="w-full bg-primary-fixed-dim rounded-t-sm group-hover:h-20 h-14 transition-all duration-1000 delay-150"></div>
|
||||
<div class="w-full bg-secondary-fixed-dim rounded-t-sm group-hover:h-32 h-24 transition-all duration-1000 delay-225"></div>
|
||||
<div class="w-full bg-primary-container rounded-t-sm group-hover:h-24 h-18 transition-all duration-1000 delay-300"></div>
|
||||
</div>
|
||||
<div class="h-px bg-outline-variant w-full"></div>
|
||||
<div class="flex justify-around text-label-caps text-on-surface-variant opacity-50">
|
||||
<span>Sen</span><span>Sel</span><span>Rab</span><span>Kam</span><span>Jum</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CTA Section -->
|
||||
<section class="mt-20 bg-surface-container-high rounded-3xl p-stack-lg text-center border border-outline-variant">
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-stack-md">Siap mengoptimalkan operasional Anda?</h2>
|
||||
<p class="font-body-lg text-on-surface-variant mb-stack-lg max-w-2xl mx-auto">Bergabunglah dengan ratusan bisnis yang telah bertransformasi bersama Bizone. Mulai efisiensi Anda hari ini.</p>
|
||||
<div class="flex flex-col md:flex-row justify-center gap-4">
|
||||
<button class="bg-primary text-on-primary px-8 py-3 rounded-lg font-bold shadow-sm hover:bg-primary-container transition-all">Daftar Sekarang</button>
|
||||
<button class="border border-primary text-primary px-8 py-3 rounded-lg font-bold hover:bg-primary/5 transition-all">Konsultasi Gratis</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-surface-container-lowest border-t border-outline-variant mt-20">
|
||||
<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-sm max-w-sm">
|
||||
<span class="text-title-md font-display-lg font-bold text-primary">Bizone</span>
|
||||
<p class="font-body-sm text-on-surface-variant">Solusi manajemen bisnis all-in-one untuk pertumbuhan eksponensial di era digital.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-stack-lg md:gap-24">
|
||||
<div class="flex flex-col gap-stack-sm">
|
||||
<span class="font-label-caps text-primary mb-2">Perusahaan</span>
|
||||
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Tentang Kami</a>
|
||||
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Karir</a>
|
||||
<a class="font-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">
|
||||
<span class="font-label-caps text-primary mb-2">Legal</span>
|
||||
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Privacy</a>
|
||||
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Terms</a>
|
||||
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Sitemap</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-stack-sm">
|
||||
<span class="font-label-caps text-primary mb-2">Bantuan</span>
|
||||
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Contact</a>
|
||||
<a class="font-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4" href="#">Pusat Bantuan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[1440px] mx-auto px-margin-desktop py-stack-md border-t border-outline-variant/30 text-center md:text-left">
|
||||
<p class="font-body-sm text-on-surface-variant opacity-80">© 2024 Bizone. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
stitch_www.bizone.id/fitur_bizone/screen.png
Normal file
BIN
stitch_www.bizone.id/fitur_bizone/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
326
stitch_www.bizone.id/home_bizone/code.html
Normal file
326
stitch_www.bizone.id/home_bizone/code.html
Normal file
@ -0,0 +1,326 @@
|
||||
<!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>
|
||||
BIN
stitch_www.bizone.id/home_bizone/screen.png
Normal file
BIN
stitch_www.bizone.id/home_bizone/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
291
stitch_www.bizone.id/kontak_bizone/code.html
Normal file
291
stitch_www.bizone.id/kontak_bizone/code.html
Normal file
@ -0,0 +1,291 @@
|
||||
<!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>
|
||||
BIN
stitch_www.bizone.id/kontak_bizone/screen.png
Normal file
BIN
stitch_www.bizone.id/kontak_bizone/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
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>
|
||||
BIN
stitch_www.bizone.id/privacy_policy_bizone/screen.png
Normal file
BIN
stitch_www.bizone.id/privacy_policy_bizone/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
161
stitch_www.bizone.id/professional_efficiency/DESIGN.md
Normal file
161
stitch_www.bizone.id/professional_efficiency/DESIGN.md
Normal file
@ -0,0 +1,161 @@
|
||||
---
|
||||
name: Professional Efficiency
|
||||
colors:
|
||||
surface: '#faf8ff'
|
||||
surface-dim: '#d9d9e2'
|
||||
surface-bright: '#faf8ff'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#f3f3fc'
|
||||
surface-container: '#ededf6'
|
||||
surface-container-high: '#e7e7f0'
|
||||
surface-container-highest: '#e2e2eb'
|
||||
on-surface: '#191b22'
|
||||
on-surface-variant: '#434653'
|
||||
inverse-surface: '#2e3037'
|
||||
inverse-on-surface: '#f0f0f9'
|
||||
outline: '#737784'
|
||||
outline-variant: '#c3c6d5'
|
||||
surface-tint: '#2559bd'
|
||||
primary: '#00327d'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#0047ab'
|
||||
on-primary-container: '#a5bdff'
|
||||
inverse-primary: '#b1c5ff'
|
||||
secondary: '#006a6a'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#7af2f2'
|
||||
on-secondary-container: '#006e6e'
|
||||
tertiary: '#27374c'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#3e4e63'
|
||||
on-tertiary-container: '#afbfd9'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#dae2ff'
|
||||
primary-fixed-dim: '#b1c5ff'
|
||||
on-primary-fixed: '#001946'
|
||||
on-primary-fixed-variant: '#00419e'
|
||||
secondary-fixed: '#7df5f5'
|
||||
secondary-fixed-dim: '#5dd9d8'
|
||||
on-secondary-fixed: '#002020'
|
||||
on-secondary-fixed-variant: '#004f4f'
|
||||
tertiary-fixed: '#d3e4fe'
|
||||
tertiary-fixed-dim: '#b7c8e1'
|
||||
on-tertiary-fixed: '#0b1c30'
|
||||
on-tertiary-fixed-variant: '#38485d'
|
||||
background: '#faf8ff'
|
||||
on-background: '#191b22'
|
||||
surface-variant: '#e2e2eb'
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Manrope
|
||||
fontSize: 48px
|
||||
fontWeight: '700'
|
||||
lineHeight: 56px
|
||||
letterSpacing: -0.02em
|
||||
headline-lg:
|
||||
fontFamily: Manrope
|
||||
fontSize: 32px
|
||||
fontWeight: '600'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.01em
|
||||
headline-lg-mobile:
|
||||
fontFamily: Manrope
|
||||
fontSize: 24px
|
||||
fontWeight: '600'
|
||||
lineHeight: 32px
|
||||
title-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: '600'
|
||||
lineHeight: 28px
|
||||
body-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
label-caps:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '600'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.05em
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
unit: 4px
|
||||
container-max: 1440px
|
||||
gutter: 24px
|
||||
margin-desktop: 40px
|
||||
margin-mobile: 16px
|
||||
stack-sm: 8px
|
||||
stack-md: 16px
|
||||
stack-lg: 32px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system is built on the pillars of reliability, structural clarity, and forward momentum. It targets business owners and service teams who require a high-density information environment that remains legible and stress-free.
|
||||
|
||||
The aesthetic follows a **Corporate / Modern** movement—fusing the systematic precision of enterprise software with the approachability of modern consumer SaaS. The visual language prioritizes functional elegance, using generous whitespace to reduce cognitive load while employing strategic color accents to guide the user's journey toward growth-oriented actions.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is anchored by **Deep Professional Blue**, a color synonymous with stability and institutional trust. This is used for primary navigation, key branding elements, and primary success actions.
|
||||
|
||||
**Clean Teal** serves as the functional secondary color, reserved specifically for "active" states, incremental growth indicators, and secondary call-to-actions to distinguish them from structural navigation.
|
||||
|
||||
The **Neutral Palette** leans heavily on "Dark Slate" for typography to ensure high legibility without the harshness of pure black. Backgrounds remain predominantly white to maximize the "spacious" feel, with soft gray borders providing subtle containment for modular data.
|
||||
|
||||
## Typography
|
||||
|
||||
This design system utilizes a dual-font strategy. **Manrope** is used for headlines and display text to provide a refined, modern character that feels "designed" yet professional. **Inter** is the workhorse for all body copy, data tables, and UI labels due to its exceptional legibility at small sizes and its neutral, systematic aesthetic.
|
||||
|
||||
Hierarchy is established through weight and color rather than excessive size shifts. Display titles use tighter letter spacing for a "tucked-in" professional look, while labels and small captions use slightly increased tracking to maintain clarity in high-density dashboards.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The system employs a **12-column fixed-grid** layout for desktop, transitioning to a **4-column fluid-grid** for mobile devices. The core spacing rhythm is based on a 4px baseline, ensuring all elements align to a consistent mathematical scale.
|
||||
|
||||
- **Desktop:** 1440px max-width container, centered. Use 24px gutters to allow data-heavy components enough "breathing room" to prevent visual clutter.
|
||||
- **Tablets:** Adaptive fluid width with 24px side margins.
|
||||
- **Mobile:** 16px side margins with vertical stacking for all multi-column components.
|
||||
|
||||
Vertical rhythm should follow the "Stack" units (8/16/32px) to maintain a sense of structured growth and order throughout the platform.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
To maintain the "Modern SaaS" aesthetic, depth is communicated through **Ambient Shadows** and **Tonal Layers**.
|
||||
|
||||
1. **Surface Layers:** The primary background is white. Secondary containers (sidebars, utility panels) use a subtle "Surface" tint (#F8FAFC) to create a natural hierarchy without needing heavy lines.
|
||||
2. **Shadow Profile:** Shadows must be extremely soft and diffused. Use a large blur radius (20px-30px) with low opacity (4-8%) blue-tinted grays. Shadows are reserved for floating elements like modals, dropdowns, and active cards.
|
||||
3. **Borders:** Structural elements like input fields and table rows use low-contrast outlines (#E2E8F0). This creates a "flat-plus" look that feels organized but not heavy.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is defined by **Rounded (Level 2)** corners. This 8px-12px range is chosen to soften the "industrial" feel of business software, making it feel more like a modern tool and less like a legacy database.
|
||||
|
||||
- **Standard (8px):** Used for buttons, input fields, and small UI components.
|
||||
- **Large (16px):** Used for cards, dashboard widgets, and modal containers.
|
||||
- **Extra Large (24px):** Used for promotional banners or specialized "Growth" containers.
|
||||
|
||||
## Components
|
||||
|
||||
- **Buttons:** Primary buttons use the Deep Professional Blue with white text. Secondary "Action" buttons use a Clean Teal outline or subtle fill. All buttons feature an 8px corner radius and a subtle hover lift effect.
|
||||
- **Input Fields:** Use a 1px border (#E2E8F0) with a 2px Teal focus ring. Labels sit above the field in `label-caps` style for maximum clarity.
|
||||
- **Cards:** White background with a 1px border or a very soft ambient shadow. 16px padding is the minimum for internal content.
|
||||
- **Chips/Badges:** Small, pill-shaped elements with low-opacity background fills of the primary or secondary colors. Used for status indicators (e.g., "Active", "In Progress").
|
||||
- **Lists & Tables:** High-density but legible. Use subtle zebra-striping or thin horizontal dividers. Typography in tables should default to `body-sm`.
|
||||
- **Data Visualizations:** Charts should utilize the Primary Blue and Clean Teal as the dominant data series colors, supported by Slate grays for axes and grid lines.
|
||||
285
stitch_www.bizone.id/solutions_bizone/code.html
Normal file
285
stitch_www.bizone.id/solutions_bizone/code.html
Normal file
@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" 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;800&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": {
|
||||
"surface-dim": "#d9d9e2",
|
||||
"surface-container-high": "#e7e7f0",
|
||||
"surface-bright": "#faf8ff",
|
||||
"secondary-fixed-dim": "#5dd9d8",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-surface": "#2e3037",
|
||||
"inverse-primary": "#b1c5ff",
|
||||
"tertiary-fixed": "#d3e4fe",
|
||||
"tertiary": "#27374c",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#2559bd",
|
||||
"on-tertiary-fixed-variant": "#38485d",
|
||||
"on-surface-variant": "#434653",
|
||||
"primary-fixed-dim": "#b1c5ff",
|
||||
"surface": "#faf8ff",
|
||||
"primary-fixed": "#dae2ff",
|
||||
"secondary": "#006a6a",
|
||||
"outline": "#737784",
|
||||
"on-surface": "#191b22",
|
||||
"primary-container": "#0047ab",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary-fixed": "#001946",
|
||||
"surface-container-low": "#f3f3fc",
|
||||
"secondary-container": "#7af2f2",
|
||||
"on-secondary-fixed-variant": "#004f4f",
|
||||
"on-secondary-fixed": "#002020",
|
||||
"on-tertiary-container": "#afbfd9",
|
||||
"on-error": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-container": "#006e6e",
|
||||
"inverse-on-surface": "#f0f0f9",
|
||||
"outline-variant": "#c3c6d5",
|
||||
"on-tertiary-fixed": "#0b1c30",
|
||||
"on-primary-fixed-variant": "#00419e",
|
||||
"surface-variant": "#e2e2eb",
|
||||
"on-primary-container": "#a5bdff",
|
||||
"on-background": "#191b22",
|
||||
"surface-container": "#ededf6",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#7df5f5",
|
||||
"primary": "#00327d",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e2e2eb",
|
||||
"background": "#faf8ff",
|
||||
"tertiary-container": "#3e4e63",
|
||||
"tertiary-fixed-dim": "#b7c8e1"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"gutter": "24px",
|
||||
"margin-mobile": "16px",
|
||||
"stack-md": "16px",
|
||||
"container-max": "1440px",
|
||||
"stack-sm": "8px",
|
||||
"margin-desktop": "40px",
|
||||
"unit": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"title-md": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Inter"],
|
||||
"display-lg": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"title-md": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<header class="docked full-width top-0 sticky z-50 bg-surface/90 dark:bg-surface-container/90 backdrop-blur-md border-b border-outline-variant dark:border-outline shadow-sm dark:shadow-none">
|
||||
<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 dark:text-primary-fixed">Bizone</span>
|
||||
<nav class="hidden md:flex gap-6">
|
||||
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">Home</a>
|
||||
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">Features</a>
|
||||
<a class="font-body-lg text-body-lg text-primary dark:text-primary-fixed font-bold border-b-2 border-primary pb-1" href="#">Solutions</a>
|
||||
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">About</a>
|
||||
<a class="font-body-lg text-body-lg text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors" href="#">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="hidden md:block bg-primary text-on-primary px-6 py-2.5 rounded-lg font-label-caps text-label-caps scale-95 active:scale-90 transition-transform hover:bg-primary-container">Jadwalkan Demo</button>
|
||||
<button class="md:hidden p-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden pt-20 pb-32 md:pt-32 md:pb-48">
|
||||
<div class="absolute inset-0 -z-10 bg-[radial-gradient(45%_45%_at_50%_50%,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent"></div>
|
||||
<div class="max-w-[1440px] mx-auto px-margin-desktop text-center">
|
||||
<span class="inline-block font-label-caps text-label-caps text-secondary bg-secondary-container/20 px-4 py-1.5 rounded-full mb-6">SOLUSI TERINTEGRASI</span>
|
||||
<h1 class="font-display-lg text-display-lg text-on-surface max-w-4xl mx-auto mb-gutter leading-tight">
|
||||
Solusi untuk kebutuhan bisnis nyata
|
||||
</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-10">
|
||||
Bizone menyatukan komunikasi, operasional, dan kolaborasi tim dalam satu platform yang dirancang untuk mempercepat pertumbuhan bisnis Anda di era digital.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<button class="bg-primary text-on-primary px-8 py-4 rounded-xl font-title-md text-title-md hover:shadow-lg transition-all">Mulai Gratis</button>
|
||||
<button class="bg-surface-container-lowest border border-outline-variant text-on-surface px-8 py-4 rounded-xl font-title-md text-title-md hover:bg-surface-container-low transition-all">Pelajari Lebih Lanjut</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Use Cases Bento Grid -->
|
||||
<section class="py-24 bg-surface-container-low">
|
||||
<div class="max-w-[1440px] mx-auto px-margin-desktop">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
|
||||
<!-- Customer Service -->
|
||||
<div class="md:col-span-7 bg-surface-container-lowest p-10 rounded-[2rem] border border-outline-variant shadow-sm flex flex-col justify-between group hover:shadow-md transition-shadow">
|
||||
<div>
|
||||
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">support_agent</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-4">Customer Service</h3>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8 max-w-md">
|
||||
Kelola setiap pertanyaan dan keluhan pelanggan dengan sistem tiket yang cerdas. Pastikan tidak ada pesan yang terlewat dan tingkatkan kepuasan pelanggan secara signifikan.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative rounded-2xl overflow-hidden aspect-[21/9]">
|
||||
<img class="w-full h-full object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500" data-alt="A professional customer support representative wearing a sleek headset, smiling warmly in a bright modern office with soft blue ambient lighting. The background features blurred digital dashboards showing customer satisfaction metrics, conveying a sense of reliability, empathy, and efficient professional service in a corporate SaaS environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnI1By6Ac42GnWUl5lv_stkaf8WgT3o9cXSbkAWad5YmYci1IFuJPefmAeefWfHNY4sGYLp0vki3u2wptSG5cDQRZ8Mpadu7ekEWiIt5ykDJffN3ZYAIoyWx9bYI6TDt679IhDQsPqRDlvCUcDsW8vGE0-gIlASiJoCScTSXaSNIs8SJQQSzwNlvyLQUNL2Jgph7ps6ZXtz0MEpeaUo9iStbC_NrShr3L6F764jDcGsj2M-xS0UcnV97x9peH3zVt2zEo55lykhyFS"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sales & Lead Follow Up -->
|
||||
<div class="md:col-span-5 bg-tertiary text-on-tertiary p-10 rounded-[2rem] shadow-sm flex flex-col group hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-xl bg-tertiary-container flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined text-tertiary-fixed" style="font-variation-settings: 'FILL' 1;">rocket_launch</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg mb-4">Sales & Lead Follow Up</h3>
|
||||
<p class="font-body-lg text-body-lg text-on-tertiary-container mb-8">
|
||||
Tanggapi calon pelanggan dalam hitungan detik. Gunakan automasi cerdas untuk memprioritaskan lead berkualitas tinggi dan tingkatkan rasio konversi tim penjualan Anda.
|
||||
</p>
|
||||
<div class="mt-auto pt-8 border-t border-tertiary-container/50">
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm">Respon otomatis instan</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm">Pelacakan pipeline real-time</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Multi-Team Coordination -->
|
||||
<div class="md:col-span-5 bg-secondary-container/20 p-10 rounded-[2rem] border border-secondary/10 flex flex-col group hover:bg-secondary-container/30 transition-all">
|
||||
<div class="w-12 h-12 rounded-xl bg-secondary text-on-secondary flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined">groups</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-4">Multi-Team Coordination</h3>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant mb-6">
|
||||
Satukan kerja tim lintas departemen. Berbagi informasi secara transparan dan koordinasikan tugas tanpa hambatan komunikasi.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4 mt-4">
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl text-center">
|
||||
<span class="block font-headline-lg text-headline-lg text-secondary">40%</span>
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Efisiensi</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl text-center">
|
||||
<span class="block font-headline-lg text-headline-lg text-secondary">2x</span>
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Kecepatan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order & Service Operations -->
|
||||
<div class="md:col-span-7 bg-surface-container-lowest p-10 rounded-[2rem] border border-outline-variant shadow-sm flex flex-col md:flex-row gap-8 group">
|
||||
<div class="flex-1">
|
||||
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">inventory_2</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-4">Order & Service Operations</h3>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant">
|
||||
Hubungkan setiap pesan pelanggan langsung dengan proses operasional. Dari pesanan masuk hingga pengiriman, pantau semuanya dalam satu alur kerja yang terintegrasi.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-low rounded-2xl p-6 flex flex-col gap-4 border border-outline-variant/30">
|
||||
<div class="bg-white p-3 rounded-lg shadow-sm border-l-4 border-primary flex justify-between items-center">
|
||||
<span class="font-body-sm text-body-sm font-semibold">Pesanan #1024</span>
|
||||
<span class="text-[10px] bg-secondary-container text-on-secondary-container px-2 py-0.5 rounded">Diproses</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg shadow-sm border-l-4 border-outline flex justify-between items-center opacity-60">
|
||||
<span class="font-body-sm text-body-sm font-semibold">Pesanan #1023</span>
|
||||
<span class="text-[10px] bg-surface-dim text-on-surface-variant px-2 py-0.5 rounded">Selesai</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg shadow-sm border-l-4 border-primary flex justify-between items-center">
|
||||
<span class="font-body-sm text-body-sm font-semibold">Pesanan #1025</span>
|
||||
<span class="text-[10px] bg-primary-container text-on-primary-container px-2 py-0.5 rounded">Baru</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA Section -->
|
||||
<section class="py-24 max-w-[1440px] mx-auto px-margin-desktop">
|
||||
<div class="bg-primary-container rounded-[3rem] p-12 md:p-24 text-center text-on-primary-container relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-32 -mt-32"></div>
|
||||
<div class="absolute bottom-0 left-0 w-64 h-64 bg-white/5 rounded-full -ml-32 -mb-32"></div>
|
||||
<h2 class="font-display-lg text-display-lg mb-6 text-white">Siap mengoptimalkan operasional Anda?</h2>
|
||||
<p class="font-body-lg text-body-lg mb-12 max-w-2xl mx-auto opacity-90 text-primary-fixed">
|
||||
Bergabunglah dengan ratusan bisnis yang telah bertransformasi bersama Bizone. Dapatkan kendali penuh atas komunikasi dan operasional Anda hari ini.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-gutter">
|
||||
<button class="bg-white text-primary px-10 py-5 rounded-2xl font-title-md text-title-md hover:shadow-xl transition-all scale-100 hover:scale-105 active:scale-95">Daftar Sekarang</button>
|
||||
<button class="border-2 border-primary-fixed text-primary-fixed px-10 py-5 rounded-2xl font-title-md text-title-md hover:bg-white/10 transition-all">Konsultasi Gratis</button>
|
||||
</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 w-full">
|
||||
<div class="flex flex-col gap-4">
|
||||
<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 max-w-xs">
|
||||
Platform manajemen bisnis terpadu untuk pertumbuhan yang berkelanjutan.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-12 gap-y-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<span class="font-label-caps text-label-caps text-on-surface font-bold uppercase">Produk</span>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Fitur Utama</a>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Integrasi</a>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Harga</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<span class="font-label-caps text-label-caps text-on-surface font-bold uppercase">Perusahaan</span>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Sitemap</a>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Contact</a>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Privacy</a>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:underline decoration-secondary underline-offset-4 opacity-80 hover:opacity-100" href="#">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[1440px] mx-auto px-margin-desktop py-6 border-t border-outline-variant/30">
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-60">© 2024 Bizone. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
stitch_www.bizone.id/solutions_bizone/screen.png
Normal file
BIN
stitch_www.bizone.id/solutions_bizone/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
281
stitch_www.bizone.id/tentang_bizone/code.html
Normal file
281
stitch_www.bizone.id/tentang_bizone/code.html
Normal file
@ -0,0 +1,281 @@
|
||||
<!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>
|
||||
BIN
stitch_www.bizone.id/tentang_bizone/screen.png
Normal file
BIN
stitch_www.bizone.id/tentang_bizone/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 409 KiB |
263
stitch_www.bizone.id/terms_conditions_bizone/code.html
Normal file
263
stitch_www.bizone.id/terms_conditions_bizone/code.html
Normal 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&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;
|
||||
}
|
||||
</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 & Conditions</span>
|
||||
</nav>
|
||||
<h1 class="font-display-lg text-display-lg text-primary mb-stack-sm">Syarat & 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 & 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 & 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
BIN
stitch_www.bizone.id/terms_conditions_bizone/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
34
tsconfig.json
Normal file
34
tsconfig.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user