# 🎨 SUPER PROMPT: Website Café Kedai Kopi Premium
## 📋 DESKRIPSI PROYEK
Buatkan website/web app untuk **Kedai Kopi Premium** dengan spesifikasi berikut:
---
## 🎯 FITUR UTAMA
### 1. **LANDING PAGE (Hero Section)**
- Background: Gambar high-quality cangkir kopi dengan uap mengepul (steam effect)
- Overlay gradient: Dark brown transparent untuk readability
- Headline besar: "Nikmati Secangkir Kebahagiaan"
- Subheadline: "Kopi pilihan terbaik, harga terjangkau mulai Rp 20.000"
- CTA Button: "Lihat Menu" & "Pesan Sekarang" (warna gold/cokelat)
- Animasi smooth parallax scrolling
### 2. **MENU KOPI (Product Catalog)**
**KOPI HITAM** - Rp 18.000
- Gambar: Kopi hitam dalam cangkir keramik putih, background kayu
- Deskripsi: "Kopi arabica murni tanpa gula, cita rasa kuat dan aromatik. Dipanggang medium roast untuk kesempurnaan rasa."
**KOPI SUSU** - Rp 22.000
- Gambar: Latte art cantik dalam cangkir, foam sempurna
- Deskripsi: "Perpaduan espresso premium dengan susu segar, tekstur creamy yang memanjakan lidah Anda."
**KOPI TUBRUK** - Rp 15.000
- Gambar: Kopi tubruk tradisional dalam gelas, ampas di dasar
- Deskripsi: "Kopi tradisional Indonesia, diseduh cara klasik dengan rasa autentik yang kental dan penuh karakter."
**CAPPUCCINO** - Rp 25.000
- Gambar: Cappuccino dengan foam tebal, taburan cokelat
- Deskripsi: "Kombinasi sempurna espresso, steamed milk, dan foam. Ditaburi bubuk cokelat premium."
**AMERICANO** - Rp 20.000
- Gambar: Kopi hitam dalam gelas transparan, es batu
- Deskripsi: "Espresso shot ganda dicampur air panas, rasa bold namun tetap smooth di tenggorokan."
**ES KOPI SUSU** - Rp 23.000
- Gambar: Iced coffee dengan layer susu, sedotan
- Deskripsi: "Kesegaran kopi dingin dengan sentuhan susu manis, sempurna untuk cuaca tropis."
**VIETNAMESE DRIP** - Rp 24.000
- Gambar: Kopi Vietnam dengan alat drip khas
- Deskripsi: "Kopi robusta Vietnam diseduh dengan drip filter, hasil akhir kental dan manis dengan susu kental."
**KOPI GULA AREN** - Rp 21.000
- Gambar: Kopi dengan gula aren cair, warna karamel
- Deskripsi: "Kopi hitam pilihan dicampur gula aren asli, manis alami dengan aroma khas yang menggoda."
---
## 🎨 DESIGN SYSTEM
### **Color Palette:**
- Primary: `#3E2723` (Dark Brown)
- Secondary: `#8D6E63` (Medium Brown)
- Accent: `#D7A86E` (Gold/Cream)
- Background: `#FFF8E1` (Cream White)
- Text: `#212121` (Almost Black)
### **Typography:**
- Heading: **Playfair Display** (Serif, Elegant)
- Body: **Inter** / **Poppins** (Sans-serif, Modern)
- Price: **Montserrat Bold**
### **Layout:**
- Responsive design (Mobile-first)
- Grid system untuk product cards
- Sticky navigation bar
- Smooth scrolling
- Hover effects pada cards
---
## 📱 SECTION STRUKTUR
1. **Navigation Bar**
- Logo kedai kopi
- Menu: Home | Menu Kopi | Tentang | Kontak
- Icon: Shopping cart, Search
2. **Hero Section**
- Fullscreen image kopi berasap
3. **About Section**
- "Cerita Kami"
- Gambar barista membuat kopi
4. **Menu Section** (Grid 3-4 kolom)
- Product cards dengan hover effect
- Gambar + Nama + Harga + Deskripsi
- Button "Pesan"
5. **Testimonial Section**
- Review pelanggan dengan foto
- Rating bintang
6. **Contact/Location**
- Alamat kedai
- Google Maps embed
- Social media icons
7. **Footer**
- Jam operasional
- Copyright
- Payment methods
---
## 🖼️ SPESIFIKASI GAMBAR
- **Resolusi:** Minimal 1920x1080px
- **Style:** Warm tone, natural lighting, rustic/modern aesthetic
- **Format:** WebP untuk performa, fallback JPG
- **Optimasi:** Lazy loading, compressed
- **Photography style:** Top-down shots, close-ups dengan bokeh effect
---
## ⚡ TEKNOLOGI (Opsional)
- **Frontend:** HTML5, CSS3, JavaScript (React/Vue)
- **Styling:** Tailwind CSS / Bootstrap
- **Animasi:** AOS (Animate On Scroll) / Framer Motion
- **Icons:** Font Awesome / Feather Icons
- **Fonts:** Google Fonts
---
## 🎯 CALL TO ACTION
Setiap product card memiliki:
- Button "Tambah ke Keranjang"
- Button "Detail Produk"
- Icon favorite/wishlist
---
**Tone & Style:** Modern, Cozy, Premium namun Approachable
**Target User:** Pecinta kopi usia 18-40 tahun, urban lifestyle
---
🚀 **READY TO BUILD!**
---
*Gunakan prompt ini dengan AI builder, developer, atau tools seperti v0.dev, Bolt.new, atau serahkan ke web developer untuk hasil maksimal!*
{
"instruction_to_ai": "Anda adalah UI/UX designer dan front-end developer. Gunakan seluruh spesifikasi terstruktur di bawah ini untuk membuat desain dan atau kode website single-page responsif untuk Kedai Kopi Premium. Jika ada nilai example boleh diganti sesuai kebutuhan bisnis, namun struktur dan tone keseluruhan sebaiknya dipertahankan.",
"usage_note": "JSON ini dapat digunakan sebagai prompt terstruktur untuk AI website builder, desainer, atau developer front-end.",
"project": {
"name": "Website Kedai Kopi Premium",
"type": "single-page marketing & ordering website",
"primary_language": "id-ID",
"goal": "Membuat website responsif untuk Kedai Kopi Premium yang menampilkan brand, katalog menu kopi, testimoni pelanggan, informasi kontak dan lokasi, serta fitur keranjang pesanan sederhana.",
"target_audience": {
"age_range": "18-40",
"location": "Perkotaan (urban)",
"interests": [
"kopi specialty",
"nongkrong di kafe",
"work from cafe",
"gaya hidup modern"
],
"segments": [
"mahasiswa",
"pekerja kantoran",
"freelancer",
"coffee enthusiast"
]
},
"tone_and_style": [
"modern",
"cozy",
"premium",
"hangat",
"ramah",
"approachable"
]
},
"design_system": {
"color_palette": {
"primary": "#3E2723",
"secondary": "#8D6E63",
"accent": "#D7A86E",
"background": "#FFF8E1",
"text": "#212121",
"notes": "Pastikan kontras teks terhadap latar belakang memenuhi standar aksesibilitas, terutama teks di atas warna primary dan secondary."
},
"typography": {
"heading_font": "Playfair Display, serif",
"body_font": "Inter, Poppins, system-ui, sans-serif",
"price_font": "Montserrat, system-ui, sans-serif",
"price_font_weight": "700"
},
"components_style": {
"buttons": {
"primary": {
"background": "#D7A86E",
"text_color": "#3E2723",
"border_radius": "999px",
"padding": "12px 28px",
"font_weight": "600",
"hover": {
"background": "#C6934F",
"shadow": "0 8px 20px rgba(0,0,0,0.2)"
}
},
"secondary": {
"background": "transparent",
"border": "1px solid #D7A86E",
"text_color": "#D7A86E",
"border_radius": "999px",
"hover": {
"background": "rgba(215,168,110,0.08)"
}
}
},
"cards": {
"border_radius": "16px",
"shadow": "0 8px 20px rgba(0,0,0,0.08)",
"padding": "20px",
"hover": {
"transform": "translateY(-4px)",
"shadow": "0 12px 24px rgba(0,0,0,0.12)"
}
}
},
"layout_principles": {
"mobile_first": true,
"max_width": "1200px",
"section_padding_desktop": "64px 16px",
"section_padding_mobile": "40px 16px",
"grid_system": "CSS Grid atau Flexbox",
"sticky_navbar": true,
"smooth_scrolling": true,
"animations": {
"use_aos_or_equivalent": true,
"hero_parallax": true,
"default_transition_duration": "200-300ms"
}
}
},
"content": {
"brand": {
"brand_name": "Kedai Kopi Premium",
"main_headline": "Nikmati Secangkir Kebahagiaan",
"subheadline": "Kopi pilihan terbaik, harga terjangkau mulai Rp 15.000.",
"short_description": "Kedai kopi dengan suasana hangat dan modern yang menyajikan racikan kopi berkualitas dengan harga bersahabat.",
"keywords": [
"kopi arabika",
"coffee shop",
"third wave coffee",
"kopi susu gula aren"
]
},
"hero": {
"headline": "Nikmati Secangkir Kebahagiaan",
"subheadline": "Kopi pilihan terbaik, harga terjangkau mulai Rp 15.000.",
"primary_cta_label": "Lihat Menu",
"primary_cta_action": "scroll_to_menu_section",
"secondary_cta_label": "Pesan Sekarang",
"secondary_cta_action": "scroll_to_menu_section_or_open_cart",
"background_image_key": "hero_steaming_coffee"
},
"about": {
"section_title": "Cerita Kami",
"paragraphs": [
"Di Kedai Kopi Premium, kami percaya bahwa setiap cangkir kopi menyimpan cerita. Kami hanya memilih biji kopi berkualitas dari petani lokal dan internasional, kemudian disangrai dengan cermat untuk menjaga rasa dan aroma terbaiknya.",
"Dengan suasana yang hangat dan nyaman, kedai kami menjadi tempat ideal untuk bekerja, berbincang, atau sekadar menikmati waktu sendiri ditemani secangkir kopi favorit Anda."
],
"image_key": "about_barista_making_coffee"
},
"menu": {
"section_title": "Menu Kopi",
"section_subtitle": "Pilih racikan favorit Anda dari berbagai pilihan kopi panas dan dingin.",
"display_layout": "grid",
"grid_columns_desktop": 3,
"grid_columns_tablet": 2,
"grid_columns_mobile": 1,
"card_cta": {
"primary_label": "Tambah ke Keranjang",
"secondary_label": "Detail Produk",
"show_wishlist_icon": true
},
"items": [
{
"id": "kopi-hitam",
"name": "Kopi Hitam",
"category": "Kopi Panas",
"price_idr": 18000,
"display_price": "Rp 18.000",
"description_short": "Kopi arabica murni tanpa gula dengan cita rasa kuat dan aromatik.",
"description_long": "Disangrai medium roast untuk keseimbangan rasa pahit dan asam yang lembut, cocok untuk penikmat rasa kopi asli.",
"image_key": "menu_kopi_hitam",
"suggested_tags": [
"arabica",
"tanpa gula",
"medium roast",
"strong flavor"
]
},
{
"id": "kopi-susu",
"name": "Kopi Susu",
"category": "Kopi Panas",
"price_idr": 22000,
"display_price": "Rp 22.000",
"description_short": "Perpaduan espresso premium dengan susu segar bertekstur creamy.",
"description_long": "Dibuat dari satu shot espresso dan susu segar yang dipanaskan, menghasilkan rasa lembut dan seimbang yang disukai banyak orang.",
"image_key": "menu_kopi_susu",
"suggested_tags": [
"espresso",
"susu segar",
"creamy",
"comfort drink"
]
},
{
"id": "kopi-tubruk",
"name": "Kopi Tubruk",
"category": "Kopi Panas",
"price_idr": 15000,
"display_price": "Rp 15.000",
"description_short": "Kopi tradisional Indonesia dengan rasa autentik yang kental.",
"description_long": "Diseduh langsung dengan air panas tanpa penyaringan, menyisakan ampas di dasar gelas untuk pengalaman minum kopi khas nusantara.",
"image_key": "menu_kopi_tubruk",
"suggested_tags": [
"tradisional",
"Indonesia",
"ampas",
"strong body"
]
},
{
"id": "cappuccino",
"name": "Cappuccino",
"category": "Kopi Panas",
"price_idr": 25000,
"display_price": "Rp 25.000",
"description_short": "Kombinasi espresso, steamed milk, dan foam tebal dengan taburan cokelat.",
"description_long": "Perbandingan seimbang antara espresso, susu, dan foam lembut di atasnya, ditambah taburan bubuk cokelat premium.",
"image_key": "menu_cappuccino",
"suggested_tags": [
"espresso",
"foam tebal",
"cokelat",
"classic"
]
},
{
"id": "americano",
"name": "Americano",
"category": "Kopi Panas",
"price_idr": 20000,
"display_price": "Rp 20.000",
"description_short": "Espresso shot ganda yang dicampur air panas, rasa bold namun tetap smooth.",
"description_long": "Dibuat dari dua shot espresso yang ditambahkan air panas, menghasilkan rasa kopi yang kuat tetapi lebih ringan di tubuh dibandingkan espresso murni.",
"image_key": "menu_americano",
"suggested_tags": [
"espresso double",
"tanpa susu",
"smooth",
"hot"
]
},
{
"id": "es-kopi-susu",
"name": "Es Kopi Susu",
"category": "Kopi Dingin",
"price_idr": 23000,
"display_price": "Rp 23.000",
"description_short": "Kopi dingin menyegarkan dengan perpaduan susu manis dan espresso.",
"description_long": "Disajikan dengan es batu dan lapisan kopi serta susu yang terlihat jelas, memberikan rasa manis, creamy, dan segar sekaligus.",
"image_key": "menu_es_kopi_susu",
"suggested_tags": [
"iced",
"susu",
"manis",
"segar"
]
},
{
"id": "vietnamese-drip",
"name": "Vietnamese Drip",
"category": "Kopi Panas",
"price_idr": 24000,
"display_price": "Rp 24.000",
"description_short": "Kopi robusta Vietnam diseduh menggunakan drip filter khas.",
"description_long": "Kopi diseduh perlahan di atas susu kental manis menggunakan alat drip Vietnam, menghasilkan rasa kental, manis, dan aromatik.",
"image_key": "menu_vietnamese_drip",
"suggested_tags": [
"Vietnam",
"drip",
"susu kental manis",
"strong"
]
},
{
"id": "kopi-gula-aren",
"name": "Kopi Gula Aren",
"category": "Kopi Panas/Dingin",
"price_idr": 21000,
"display_price": "Rp 21.000",
"description_short": "Kopi hitam pilihan dengan campuran gula aren asli beraroma khas.",
"description_long": "Manis alami dari gula aren cair berpadu dengan kopi hitam menghasilkan rasa karamel lembut dengan aroma yang menggoda.",
"image_key": "menu_kopi_gula_aren",
"suggested_tags": [
"gula aren",
"aroma karamel",
"manis alami"
]
}
]
},
"testimonials": {
"section_title": "Apa Kata Mereka",
"section_subtitle": "Beberapa ulasan dari pelanggan yang sudah menikmati kopi kami.",
"display_style": "carousel_or_grid",
"items_example": [
{
"name": "Rina, 27",
"role_or_context": "Pekerja kantoran",
"rating": 5,
"review_text": "Tempat favorit saya untuk work from cafe. Kopinya enak, harga masih masuk akal, dan suasananya nyaman sekali.",
"avatar_image_key": "testimonial_rina"
},
{
"name": "Budi, 32",
"role_or_context": "Pecinta kopi",
"rating": 5,
"review_text": "Kopi tubruknya mantap. Rasa kopi nusantaranya benar-benar terasa, dan baristanya ramah menjelaskan jenis biji kopi yang dipakai.",
"avatar_image_key": "testimonial_budi"
},
{
"name": "Sarah, 24",
"role_or_context": "Mahasiswi",
"rating": 4,
"review_text": "Es kopi susunya pas banget manisnya. Tempatnya instagramable dan sering ada promo menarik.",
"avatar_image_key": "testimonial_sarah"
}
]
},
"contact": {
"section_title": "Kontak & Lokasi",
"address_label": "Alamat Kedai",
"address_example": "Jl. Contoh Kopi No. 12, Jakarta (ganti dengan alamat kedai Anda)",
"phone_label": "Telepon",
"phone_example": "+62-812-3456-7890",
"email_label": "Email",
"email_example": "halo@kedaikopipremium.id",
"map_embed": {
"provider": "Google Maps",
"embed_placeholder": "Sematkan iframe Google Maps lokasi kedai di sini."
},
"contact_form": {
"enable": true,
"description": "Formulir sederhana bagi pelanggan untuk menghubungi atau melakukan pemesanan.",
"fields": [
{
"id": "name",
"label": "Nama",
"type": "text",
"required": true
},
{
"id": "email",
"label": "Email",
"type": "email",
"required": true
},
{
"id": "phone",
"label": "No. Telepon",
"type": "tel",
"required": false
},
{
"id": "message",
"label": "Pesan",
"type": "textarea",
"required": true
}
],
"submit_button_label": "Kirim Pesan",
"success_message_example": "Terima kasih. Pesan Anda sudah kami terima.",
"error_message_example": "Terjadi kesalahan. Silakan coba lagi."
},
"social_media": {
"description": "Tampilkan ikon media sosial di bagian ini dan di footer.",
"platforms_example": [
{
"name": "Instagram",
"icon": "instagram",
"url_placeholder": "https://instagram.com/kedaikopipremium"
},
{
"name": "TikTok",
"icon": "tiktok",
"url_placeholder": "https://tiktok.com/@kedaikopipremium"
},
{
"name": "WhatsApp",
"icon": "whatsapp",
"url_placeholder": "https://wa.me/6281234567890"
}
]
}
},
"footer": {
"opening_hours_label": "Jam Operasional",
"opening_hours_example": "Senin–Minggu, 08.00–22.00 (sesuaikan dengan jam operasional kedai Anda)",
"payment_methods_label": "Metode Pembayaran",
"payment_methods_example": [
"Tunai",
"Kartu Debit/Kredit",
"QRIS",
"E-Wallet"
],
"copyright_text_example": "© 2024 Kedai Kopi Premium. Semua hak dilindungi.",
"secondary_navigation_example": [
"Home",
"Menu Kopi",
"Tentang",
"Kontak",
"Kebijakan Privasi"
]
}
},
"layout_and_structure": {
"is_single_page": true,
"sections_order": [
"navbar",
"hero",
"about",
"menu",
"testimonials",
"contact",
"footer"
],
"navbar": {
"position": "sticky_top",
"logo": {
"type": "text_or_image",
"text_example": "Kedai Kopi Premium",
"image_key": "logo_kedai_kopi"
},
"menu_items": [
{
"id": "nav-home",
"label": "Home",
"target_section_id": "hero"
},
{
"id": "nav-menu",
"label": "Menu Kopi",
"target_section_id": "menu"
},
{
"id": "nav-about",
"label": "Tentang",
"target_section_id": "about"
},
{
"id": "nav-contact",
"label": "Kontak",
"target_section_id": "contact"
}
],
"right_icons": [
{
"id": "search",
"icon_set": "Font Awesome or Feather",
"icon_name": "search",
"action": "open_search_input_or_overlay"
},
{
"id": "cart",
"icon_set": "Font Awesome or Feather",
"icon_name": "shopping-cart",
"action": "open_cart_drawer"
}
],
"mobile_behavior": {
"use_hamburger_menu": true,
"collapse_breakpoint": "<= 768px"
}
},
"hero_section": {
"id": "hero",
"full_height": true,
"background_image_key": "hero_steaming_coffee",
"overlay": {
"type": "linear_gradient",
"colors": [
"rgba(33,22,19,0.85)",
"rgba(33,22,19,0.4)"
],
"direction": "to top"
},
"alignment": "center_left_on_desktop_center_on_mobile",
"include_parallax_effect": true,
"scroll_indicator": true
},
"about_section": {
"id": "about",
"layout": "two_columns_on_desktop_one_column_on_mobile",
"image_position_desktop": "right",
"image_key": "about_barista_making_coffee"
},
"menu_section": {
"id": "menu",
"layout": "cards_grid",
"include_filter_by_category": false,
"card_elements": [
"image",
"name",
"price",
"short_description",
"cta_buttons",
"wishlist_icon"
],
"hover_effect": "scale_and_shadow",
"cta_primary_label": "Tambah ke Keranjang",
"cta_secondary_label": "Detail Produk"
},
"testimonials_section": {
"id": "testimonials",
"layout": "3_cards_on_desktop_1_2_on_mobile",
"enable_slider_option": true,
"show_star_rating": true
},
"contact_section": {
"id": "contact",
"layout": "two_columns_on_desktop_one_column_on_mobile",
"left_column": [
"address",
"map_embed"
],
"right_column": [
"contact_form",
"social_media_icons"
]
},
"footer_section": {
"id": "footer",
"layout": "multi_column_on_desktop_stack_on_mobile",
"columns_example": [
"Brand dan deskripsi singkat",
"Jam operasional dan kontak",
"Media sosial dan pembayaran"
]
},
"cart_ui": {
"type": "side_drawer_or_modal",
"trigger": "navbar_cart_icon",
"content_elements": [
"list_of_items",
"item_name",
"quantity_selector",
"per_item_price",
"subtotal",
"notes",
"grand_total",
"checkout_button",
"close_button"
],
"empty_state_message_example": "Keranjang Anda masih kosong. Yuk, pilih kopi favorit Anda.",
"checkout_button_label": "Lanjut ke Checkout (Mock)",
"note": "Checkout dapat berupa halaman mock atau belum terhubung ke payment gateway."
}
},
"imagery": {
"general_style": {
"resolution_minimum": "1920x1080",
"tone": "warm",
"lighting": "natural",
"aesthetic_keywords": [
"rustic",
"modern",
"cozy",
"bokeh",
"top-down",
"close-up"
],
"format_primary": "WebP",
"format_fallback": "JPG",
"optimization": {
"lazy_loading": true,
"compression": "gunakan kompresi sedang-tinggi tanpa mengorbankan kualitas visual",
"responsive_sources": true
}
},
"images": {
"hero_steaming_coffee": {
"description": "Close-up cangkir kopi keramik dengan kopi hitam panas, uap kopi mengepul jelas, diletakkan di atas meja kayu dengan latar belakang bokeh hangat.",
"orientation": "landscape",
"usage": "hero_background"
},
"about_barista_making_coffee": {
"description": "Seorang barista profesional sedang menuang espresso atau membuat latte art di coffee bar modern dengan nuansa kayu hangat.",
"orientation": "landscape",
"usage": "about_section"
},
"menu_kopi_hitam": {
"description": "Kopi hitam panas dalam cangkir keramik putih di atas meja atau papan kayu dengan gaya rustic, dilihat dari atas atau sudut 45 derajat.",
"orientation": "top-down_or_45deg",
"usage": "menu_card"
},
"menu_kopi_susu": {
"description": "Cangkir kopi susu dengan latte art yang rapi, foam halus, diletakkan di piring kecil dengan sendok, latar belakang kafe yang lembut blur.",
"orientation": "45deg",
"usage": "menu_card"
},
"menu_kopi_tubruk": {
"description": "Gelas kaca berisi kopi tubruk dengan ampas terlihat di dasar gelas, diletakkan di meja kayu sederhana dengan suasana tradisional.",
"orientation": "45deg",
"usage": "menu_card"
},
"menu_cappuccino": {
"description": "Cappuccino dengan foam tebal dan taburan bubuk cokelat di atasnya, disajikan di cangkir keramik dengan piring kecil berwarna netral.",
"orientation": "top-down_or_45deg",
"usage": "menu_card"
},
"menu_americano": {
"description": "Americano panas dalam gelas transparan tanpa es batu, warna kopi pekat, diletakkan di alas kayu dengan latar belakang minimalis.",
"orientation": "45deg",
"usage": "menu_card"
},
"menu_es_kopi_susu": {
"description": "Gelas tinggi transparan berisi es kopi susu dengan lapisan kopi dan susu yang terlihat jelas, penuh es batu, dilengkapi sedotan.",
"orientation": "vertical",
"usage": "menu_card"
},
"menu_vietnamese_drip": {
"description": "Set vietnamese drip klasik dengan filter metal di atas gelas bening berisi susu kental manis, tetesan kopi terlihat menetes.",
"orientation": "vertical_or_45deg",
"usage": "menu_card"
},
"menu_kopi_gula_aren": {
"description": "Kopi dengan gula aren cair berwarna karamel di gelas transparan, terlihat gradasi warna kopi dan gula aren, dapat disajikan panas atau dengan es.",
"orientation": "vertical",
"usage": "menu_card"
},
"logo_kedai_kopi": {
"description": "Logo sederhana bertema kopi dengan ikon cangkir atau biji kopi dan tipografi elegan bertuliskan Kedai Kopi Premium.",
"orientation": "square",
"usage": "navbar_footer"
},
"testimonial_rina": {
"description": "Foto close-up pelanggan perempuan muda tersenyum di dalam kafe dengan latar belakang sedikit blur.",
"orientation": "square_or_circle_crop",
"usage": "testimonial_avatar"
},
"testimonial_budi": {
"description": "Foto close-up pelanggan pria dewasa muda dengan suasana santai sambil memegang cangkir kopi.",
"orientation": "square_or_circle_crop",
"usage": "testimonial_avatar"
},
"testimonial_sarah": {
"description": "Foto close-up pelanggan perempuan muda dengan gaya kasual di dalam kafe modern.",
"orientation": "square_or_circle_crop",
"usage": "testimonial_avatar"
}
}
},
"functionality": {
"shopping_cart": {
"allow_add_to_cart_from_menu": true,
"allow_update_quantity_in_cart": true,
"allow_remove_item": true,
"currency": "IDR",
"show_item_subtotal": true,
"show_cart_total": true,
"persistence_note": "Untuk prototipe, keranjang dapat disimpan di state front-end atau localStorage tanpa backend."
},
"product_detail": {
"behavior": "open_modal_or_separate_section",
"modal_content_example": [
"nama produk",
"foto lebih besar",
"deskripsi lengkap",
"harga",
"opsi ukuran jika ada",
"tombol tambah ke keranjang"
]
},
"search": {
"enable_search_bar": true,
"scope": [
"nama produk",
"deskripsi singkat"
],
"placeholder_text": "Cari menu kopi..."
},
"cta": {
"global_primary_cta": "Pesan Sekarang",
"secondary_cta_examples": [
"Lihat Menu",
"Hubungi Kami"
],
"placement": [
"hero_section",
"menu_cards",
"cart_drawer",
"contact_section"
]
}
},
"technology_preferences": {
"frontend": {
"preferred": [
"HTML5",
"CSS3",
"JavaScript"
],
"framework_options": [
"React",
"Vue",
"Next.js (opsional)"
]
},
"styling": {
"options": [
"Tailwind CSS",
"Bootstrap",
"CSS Modules",
"SCSS"
],
"note": "Pilih salah satu framework atau gunakan CSS custom sesuai kebutuhan."
},
"animations": {
"libraries_options": [
"AOS (Animate On Scroll)",
"Framer Motion",
"GSAP"
],
"usage_examples": [
"fade-in pada section saat di-scroll",
"parallax ringan di hero",
"hover animasi pada card dan tombol"
]
},
"icons": {
"libraries_options": [
"Font Awesome",
"Feather Icons",
"Heroicons"
],
"usage": [
"ikon cart",
"ikon search",
"ikon media sosial",
"ikon rating bintang"
]
},
"fonts": {
"provider": "Google Fonts",
"fonts": [
"Playfair Display",
"Inter",
"Poppins",
"Montserrat"
]
}
},
"non_functional_requirements": {
"performance": {
"target_lighthouse_score_desktop": 90,
"target_lighthouse_score_mobile": 80,
"practices": [
"Minify file CSS dan JavaScript.",
"Gunakan gambar terkompresi dengan format WebP dan fallback JPG.",
"Aktifkan lazy loading untuk gambar di bawah the fold.",
"Manfaatkan caching browser bila memungkinkan."
]
},
"accessibility": {
"requirements": [
"Semua gambar memiliki atribut alt yang deskriptif.",
"Kontras warna teks terhadap latar belakang memenuhi standar WCAG AA.",
"Navigasi dapat diakses dengan keyboard dengan state fokus yang jelas.",
"Gunakan struktur heading berurutan h1, h2, h3 untuk konten utama.",
"Tambahkan aria-label pada ikon penting seperti cart dan search."
]
},
"seo": {
"meta_title_example": "Kedai Kopi Premium – Nikmati Secangkir Kebahagiaan",
"meta_description_example": "Kedai Kopi Premium menyajikan kopi pilihan terbaik dengan harga terjangkau. Nikmati kopi hitam, cappuccino, es kopi susu, dan banyak lagi di suasana kafe yang hangat dan modern.",
"og_image_note": "Gunakan versi ter-crop dari gambar hero sebagai Open Graph image untuk dibagikan di media sosial."
}
}
}