📢 Website baru AlanoTech telah diluncurkan! Kunjungi halaman kami untuk info terbaru.📢 Promo spesial Hari Kemerdekaan - Diskon 25% semua paket website! Sampai 31 Agustus.📢 Webinar gratis "Cara Bikin Website dengan AI" - Daftar sekarang, tempat terbatas!
ticker / marquee - teks berjalan untuk pengumuman, promo, berita terkini
Catatan:Ticker / Announcement Bar adalah strip teks berjalan
di bagian atas website. Fungsinya menyampaikan pengumuman, promo, atau info penting secara dinamis.
Biasanya dipasang di atas atau di bawah navbar.
NAVBAR - Navigasi Utama
logodropdown menumega menusearch bar / inputbutton CTAtheme togglehamburger menu (mobile)
Catatan: Di atas ini adalah Navbar - bilah navigasi paling atas website.
Di dalamnya ada Logo, Dropdown Menu (menu yang muncul saat diklik/hover),
Mega Menu (dropdown besar dengan kolom), Search Bar (kolom pencarian),
Button CTA (tombol ajakan), dan Theme Toggle (saklar tema gelap/terang).
Saat di HP, navbar berubah jadi Hamburger Menu (3 garis).
Catatan:Hero Section adalah area besar pertama yang dilihat pengunjung.
Fungsinya menyampaikan value proposition secara cepat. Terdiri dari Headline (judul besar),
Subheadline (penjelasan singkat), CTA Button (tombol ajakan),
dan Hero Image/Banner (gambar latar).
INTRO / ABOUT - Section Pengenalan
intro sectionabout usstats / angkaprofile image
ABOUT US
Siapa AlanoTech?
AlanoTech adalah mitra digitalmu untuk membangun website, aplikasi, dan strategi pemasaran online.
Kami percaya setiap orang berhak punya website keren tanpa harus jago coding.
Dengan pendekatan vibecoding - bikin website pakai AI - siapa pun bisa melakukannya.
50+
Project Selesai
stat / angka
30+
Klien Puas
stat / angka
2 thn
Pengalaman
stat / angka
profile image
Catatan:Intro / About Section memperkenalkan diri/brand.
Bisa berisi teks, Stats (data angka), dan Profile Image (foto orang/tim).
Hal 1 dari 10 — biasa dipakai di daftar artikel, produk, tabel data
Catatan:Card adalah komponen untuk menampung konten dalam kotak.
Biasanya berisi Card Image (gambar), Card Title (judul),
Card Body (isi), dan Card Actions (tombol aksi).
Pakai Grid Layout untuk menyusun beberapa card rapi dalam baris/kolom.
Pagination dipakai untuk navigasi halaman.
Catatan:Pricing Section menampilkan paket harga.
Setiap Tier (tingkatan) punya nama, Harga, Feature List (daftar fitur),
dan CTA Button. Paket terbaik bisa dikasih Badge Populer biar menonjol.
GARANSI & ANCHOR PRICE - Jaminan & Harga Acuan
garansi / guaranteeanchor pricehighlight boxtrust signal
GARANSI 100% UANG KEMBALI
garansi / guarantee
Kami Pastikan Kamu Puas - atau Uang Kembali!
Jika dalam 30 hari pertama website kamu tidak sesuai dengan yang dijanjikan,
kami akan kembalikan 100% uangmu. No risikonya!
💪
Anchor Price
Rp 2.999k
anchor price (harga coret)
🎉
Harga Spesial
Rp 1.499k
harga diskon
highlight box / trust signal
Catatan:Garansi (guarantee) meningkatkan kepercayaan.
Anchor Price adalah harga asli yang dicoret agar harga diskon terlihat lebih murah.
Ini termasuk Trust Signal - elemen yang bikin pengunjung percaya.
FAQ - Pertanyaan yang Sering Diajukan
faq / accordioncollapsequestion & answer
Pertanyaan Umum
Apakah saya perlu bisa coding?
question
Tidak! Dengan pendekatan vibecoding, kamu tinggal bilang apa yang kamu mau ke AI, dan kita bikin website-nya bareng. Kamu cukup tahu istilah-istilah UI seperti yang ada di halaman ini.
answer
Berapa lama proses pembuatan website?
question
Tergantung kompleksitas. Website sederhana bisa selesai dalam 1-3 hari. Website yang lebih kompleks bisa 1-2 minggu.
Apa itu daisyUI?
question
daisyUI adalah framework komponen CSS berbasis Tailwind CSS. Semua komponen di halaman ini (navbar, card, button, dll) pakai daisyUI. Sangat cocok untuk vibecoding karena tinggal pakai class siap pakai.
Apakah ada garansi?
question
Tentu! Kami berikan garansi 30 hari uang kembali jika hasilnya tidak sesuai. Kepuasanmu prioritas kami.
Catatan:FAQ bisa pakai komponen Accordion atau Collapse.
Setiap item terdiri dari Question (pertanyaan) dan Answer (jawaban) yang bisa diklik untuk dibuka/tutup.
Divider adalah garis pemisah konten, bisa horizontal, vertikal, atau dengan teks/icon di tengah.
Catatan:Contact Section biasanya terdiri dari
Contact Form (form isi pesan), Contact Info (telepon, email, alamat), dan
Google Maps Embed (peta interaktif).
Catatan: Saat bikin website, kamu perlu paham jenis ukuran gambar:
Banner/Hero (lebar penuh), Landscape (horizontal), Portrait (vertikal),
Square (persegi), Thumbnail (preview kecil), dan Icon (sangat kecil).
Pilih ukuran yang tepat biar gambar tidak pecah atau loading lambat.
TABS - Tab Navigasi Konten
tabstab listtab contentbordered / lifted / boxed
borderedtab dengan border bawah - klik untuk ganti konten
Ini adalah konten Deskripsi produk. Berisi penjelasan fitur dan keunggulan.
Ini adalah konten Spesifikasi teknis: dimensi, berat, material, dan lainnya.
Ini adalah konten Ulasan dari pelanggan yang sudah menggunakan produk ini.
liftedtab seperti folder, terangkat - content di bawah tab
Kami membuat Website company profile, toko online, dan portal berita.
Kami mengembangkan Mobile App Android dan iOS menggunakan Flutter & React Native.
Kami menyediakan jasa Desain UI/UX, branding, dan motion graphic.
Kami membantu Marketing digital: SEO, iklan sosial media, dan email marketing.
boxedtab dengan kotak aktif - semua tab rata kiri
Menampilkan semua item tanpa filter.
Menampilkan item terbaru yang baru ditambahkan.
Menampilkan item paling populer berdasarkan jumlah pembaca.
Menampilkan item yang sudah kamu simpan untuk dibaca nanti.
tabs - navigasi antar konten tanpa pindah halaman, variasi: bordered, lifted, boxed
Catatan:Tabs memungkinkan pengguna beralih antar konten dalam satu area.
Variasi: Bordered (garis bawah), Lifted (terangkat), Boxed (kotak).
Biasanya dipakai di halaman produk, profil, dashboard, atau pengaturan.
Ini adalah area konten utama. Sidebar akan menutupi area ini saat dibuka.
Menu sidebar
🏠 Beranda
👤 Tentang Kami
🛠 Layanan
📝 Blog
📞 Kontak
overlay - klik area gelap untuk tutup sidebar
Sidebar bisa berisi menu, profil, filter, atau navigasi tambahan.
drawer / off-canvas sidebar - panel geser dari samping, biasanya kiri
Catatan:Sidebar / Drawer adalah panel navigasi yang muncul dari samping
(biasanya kiri) saat tombol diklik. Fungsinya menghemat ruang di layar kecil, menampung menu/filter tambahan.
Istilah lain: Off-canvas Menu, Hamburger Menu.
YOUTUBE EMBED - Video Embedded / iFrame
youtube embediframevideo playeryoutube shorts
VIDEOYouTube Video Regularembed youtube <iframe>
aspect-video (16:9) - resolusi standar video YouTube
SHORTSYouTube Shorts (Vertikal)short vertical video 9:16
aspect-[9/16] - format vertikal untuk Shorts / Reels / TikTok
Catatan:YouTube Embed menggunakan tag <iframe>.
Format 16:9 untuk video biasa, 9:16 / vertikal untuk Shorts.
Biasanya ditambahkan di halaman portofolio, tutorial, blog, atau landing page.
FOOTER - Kaki Halaman + Sosial Media
social media barwhatsapp buttonfooter columnsfooter linkscopyrightback to top
Ikuti Kami social media bar
Dapatkan info terbaru dan tips seputar website & digital marketing
Catatan:Footer adalah bagian paling bawah website.
Biasanya terdiri dari Social Media Bar (tautan medsos & WhatsApp),
beberapa Footer Columns (kolom) berisi Footer Links (tautan),
info kontak, dan Copyright (hak cipta).
Back to Top tombol untuk scroll ke atas.
SPACING, COLOR & HOVER - Padding, Margin, Spacer, Warna, Interaktif
paddingmarginspacer / gapcolor stateshover effect
PADDINGRuang di dalam elemenpadding: jarak antara konten dengan border elemen
p-1 (4px)
p-2 (8px)
p-3 (12px)
p-4 (16px)
p-6 (24px)
Area biru = padding. Semakin besar angka, semakin luas ruang dalam.
MARGINRuang di luar elemenmargin: jarak antar elemen / antara elemen dengan tepi halaman
m-0.5
m-1
m-2
m-3
m-4
Jarak oranye = margin. Lihat jarak antar kotak di atas.
mt-4
margin-top
mx-auto
margin kiri-kanan auto (tengah)
gap-4
gap antar flex/grid
SPACERElemen Pemisah / Spasispacer / spasi vertikal / horizontal - sering pakai div kosong dengan tinggi/lebar
state: normal / :hover / :active / :disabled / :focus
Catatan:Padding = ruang di dalam elemen (bg warna). Margin = ruang di luar elemen (jarak antar elemen).
Spacer = elemen kosong pemberi jarak. Color states = setiap elemen punya warna default, hover, active, focus, disabled.
Hover = efek saat mouse di atas elemen. Semua ini diatur lewat utility class Tailwind seperti p-4, m-2, gap-4, hover:bg-*.
COLUMN & ROWKolom dan Baris dalam Layoutgrid template columns / flexbox row - struktur tata letak
ROW (baris) - pakai flex / flex-row
Kolom 1
Kolom 2
Kolom 3
← Dari kiri ke kanan → ini disebut row / baris. Pakai flex atau flex-row.
COLUMN (kolom) - pakai flex-col
Baris 1
Baris 2
Baris 3
← Dari atas ke bawah ↓ ini disebut column / kolom. Pakai flex-col.
GRID - pakai grid grid-cols-3
1/3
2/3
3/3
4/3
5/3
6/3
grid grid-cols-3 = 3 kolom otomatis. Isi mengalir ke kanan, lalu turun ke baris baru.
Catatan:Heading (H1-H4) menunjukkan hierarki konten. Text Alignment mengatur perataan.
Blockquote untuk kutipan. Code Block untuk menampilkan kode/prompt AI - ideal untuk vibecoding.
Hyperlink adalah tautan ke halaman lain. Column & Row adalah dasar layout web: baris (horizontal) dan kolom (vertikal).
OPTIN FORM - Email Capture / Lead Magnet / Autoresponder
optin formlead magnetemail captureautorespondercall to actionprivacy notice
CONTOH 1Optin Form Sampingan (Sidebar/Widget)biasanya di sidebar blog, tawarkan lead magnet
FREE
Download Ebook Gratis!
"Panduan Lengkap Membuat Website dengan AI" - 40 halaman, cocok untuk pemula.
CONTOH 2Optin Full-width (Landing Page / Popup)biasanya di tengah halaman atau modal popup
AKSES EKSKLUSIF
Dapatkan Update & Tips Terbaru
Daftar newsletter kami dan dapatkan template website gratis setiap minggu.
No spam. Berhenti kapan saja. 1x email per minggu.
autoresponder / email marketing
Apa itu Optin Form & Autoresponder?
Optin Form adalah formulir pendaftaran email. Pengunjung mengisi nama & email, lalu mendapat lead magnet (ebook, template, checklist, diskon) sebagai imbalan.
Autoresponder adalah sistem kirim email otomatis. Setelah seseorang mendaftar, dia otomatis menerima email sambutan, lead magnet, dan rangkaian email follow-up yang sudah dijadwalkan.
Catatan:Optin Form adalah komponen krusial untuk mengumpulkan email (email marketing).
Biasanya menawarkan Lead Magnet (insentif gratis) agar orang mau mendaftar.
Terintegrasi dengan Autoresponder yang mengirim email otomatis.
Elemen penting: judul menarik, input nama+email, CTA jelas, privacy notice, insentif.
💡Ingat: setiap istilah yang kamu lihat bisa kamu pakai di prompt AI-mu!
toast notification
Ingin secara personal di bimbing mendesain websitemu sendiri menggunakan AI?
card image
BANNER - lebar penuh, biasanya 1920x600 px
150x150
icon 40x40
icon 32x32
icon 24x24
square
landscape lebar
image grid / masonry layout - campuran portrait, landscape, square