Automate All Website

Website lengkap untuk Automate All - Startup teknologi yang menyediakan layanan Robotic Process Automation (RPA) di Indonesia.

📋 Deskripsi Proyek

Website ini dibuat berdasarkan desain Figma dengan implementasi yang sangat sempurna dan pixel-perfect. Website mencakup semua halaman dan fitur yang dirancang dalam desain asli.

🎨 Fitur Utama

Halaman Utama

• Home - Halaman beranda dengan robot maskot dan menu navigasi cepat
• About Us - Tentang perusahaan dengan video dan value proposition
• News/Blog - Halaman berita dan artikel
• Products & Services - Produk AutoScrap dan layanan yang ditawarkan
• Academy - Platform pembelajaran online
• Contact - Halaman kontak dengan form dan peta lokasi
• Login/Register - Halaman autentikasi pengguna

Halaman Academy

• Online Learning - Daftar workshop dan kursus
• Workshop Detail - Detail workshop dengan form pendaftaran
• Course Detail - Detail kursus dengan materi pembelajaran
• Learning Page - Halaman pembelajaran dengan video player
• Checkout - Halaman pembayaran

Fitur Interaktif

• Navigasi responsif dengan mobile menu
• Form validasi dengan error handling
• Modal popups untuk pendaftaran dan notifikasi
• Smooth scrolling dan animations
• Google login integration (UI)
• Interactive star ratings
• Product carousel

🛠️ Teknologi

• HTML5 - Struktur semantik
• CSS3 - Styling modern dengan CSS Variables
• JavaScript - Interaktivitas dan validasi form
• Font Awesome - Ikon
• Google Fonts - Tipografi

📁 Struktur Proyek

automateall/
├── index.html              # Halaman Home
├── about.html              # Halaman About Us
├── news.html               # Halaman News/Blog
├── products.html           # Halaman Products & Services
├── academy.html            # Halaman Academy
├── contact.html            # Halaman Contact
├── login.html              # Halaman Login
├── register.html           # Halaman Register
├── online-learning.html    # Halaman Online Learning
├── workshop-detail.html    # Detail Workshop (Free)
├── workshop-detail-paid.html # Detail Workshop (Berbayar)
├── course-detail.html      # Detail Kursus
├── learning.html           # Halaman Belajar
├── checkout.html           # Halaman Checkout
├── autoscrap.html          # Detail Produk AutoScrap
├── assets/
│   ├── css/
│   │   └── style.css       # File CSS utama
│   ├── js/
│   │   └── main.js         # File JavaScript utama
│   ├── images/             # Folder gambar
│   └── icons/              # Folder ikon
└── README.md

🚀 Cara Menjalankan

1. Clone repository ini
2. Buka file index.html di browser
3. Atau gunakan live server untuk development

# Menggunakan Python SimpleHTTPServer
python -m http.server 8000

# Menggunakan Node.js http-server
npx http-server

📱 Responsive Design

Website ini fully responsive dan telah dioptimalkan untuk:

• Desktop (1920px+)
• Laptop (1024px+)
• Tablet (768px)
• Mobile (480px dan lebih kecil)

🎨 Color Palette

Warna	Kode	Penggunaan
Primary Blue	#1B4F72	Header, button, links
Primary Blue Light	#2E86AB	Accents, hover states
Accent Yellow	#FFF44F	CTA buttons, highlights
Light Blue	#E8F4F8	Background sections
Text Dark	#1B4F72	Body text
Text Gray	#6B7B8C	Secondary text

✨ Desain Features

• Clean & Modern - Desain minimalis dengan whitespace yang tepat
• Consistent Typography - Hierarki tipografi yang jelas
• Smooth Animations - Transisi halus untuk pengalaman pengguna yang baik
• Accessible - Warna kontras yang baik dan navigasi keyboard
• Cross-browser - Kompatibel dengan semua browser modern

📝 Catatan

• Website ini adalah implementasi static dari desain Figma
• Form submissions menggunakan JavaScript untuk demo purposes
• Maps menggunakan placeholder (ganti dengan API key untuk production)
• Gambar menggunakan placeholder dari Unsplash

📄 License

Copyright © 2020 Automate All, All Rights Reserved