Tata Cara Vibe Coding Pakai Claude Code di VSCode Website Landing Page Company Profile

Hey, pernah nggak sih kamu merasa coding itu kayak aktivitas yang berat banget? Nah, sekarang ada konsep baru namanya "Vibe Coding" - dimana kita coding sambil santai, nggak terburu-buru, dan yang penting enjoy prosesnya. Dan guess what? Claude Code adalah tools yang perfect banget untuk pemula yang mau ngerasain vibe coding ini.

Jadi apa sih sebenarnya "Vibe Coding" itu? Simply put, ini adalah approach coding dimana kita fokus pada enjoying the process rather than rushing to finish. Kita coding dengan pace yang comfortable, sambil belajar step by step, dan yang paling penting adalah kita nggak stress dengan deadline atau target yang unrealistic. Claude Code sebagai AI coding assistant sangat cocok untuk style ini karena dia bisa guide kita pelan-pelan dan explain setiap langkah dengan detail.

Kenapa Claude Code perfect untuk pemula? Pertama, dia bisa explain konsep coding dengan bahasa yang mudah dipahami. Kedua, Claude Code bisa generate code yang clean dan readable, jadi kita bisa belajar best practices dari awal. Ketiga, dia patient banget - kamu bisa tanya berkali-kali tanpa takut di judge. Dan yang terakhir, Claude Code bisa adapt dengan skill level kita, mulai dari basic sampai advanced.

Di artikel ini, kita bakal bikin output berupa single file HTML yang complete dengan styling menggunakan TailwindCSS v4 dan functionality pakai Vanilla JavaScript. Kenapa single file? Karena ini approach yang paling simple untuk pemula - everything in one place, easy to understand, dan mudah di-deploy. Website yang kita bikin adalah company profile landing page yang professional tapi modern.

TailwindCSS v4 dipilih karena dia utility-first framework yang memungkinkan kita styling dengan cepat tanpa perlu nulis CSS dari scratch. Plus, syntax-nya intuitive banget, jadi perfect untuk beginners. Sementara Vanilla JavaScript kita pakai untuk interaction dan dynamic behavior - no framework, just pure JavaScript yang fundamental.

Untuk estimasi waktu, kita butuh sekitar 2-3 jam coding santai. Ini bukan race, jadi take your time untuk understand setiap concept dan experiment dengan code. Yang penting adalah learning process-nya, bukan seberapa cepat kita selesai. Dalam waktu ini, kita bakal cover everything from scratch - mulai dari setup, structure HTML, styling dengan TailwindCSS, sampai adding JavaScript functionality.

Remember, tujuan utama vibe coding adalah enjoying the journey. Jadi siapkan coffee atau teh favorite kamu, put on some chill music, dan mari kita mulai adventure coding yang relaxing ini dengan Claude Code sebagai coding buddy kita.

Yang Dibutuhkan

Oke, sebelum kita mulai perjalanan vibe coding ini, ada beberapa hal yang perlu kita siapkan dulu. Tapi tenang aja, pengaturannya super mudah dan nggak ribet sama sekali. Yang penting adalah kita punya fondasi yang solid untuk sesi coding yang nyaman.

Pertama yang paling penting adalah VSCode. Kalau kamu belum punya, download aja dari website resminya. VSCode ini pada dasarnya adalah code editor yang paling populer dan ramah pengguna untuk developers. Antarmukanya bersih, dapat disesuaikan, dan yang paling penting - gratis! Plus, dia punya ekosistem extension yang luas banget, jadi bisa diperluas fungsinya sesuai kebutuhan kita.

Setelah VSCode terinstall, kita butuh Live Server extension. Extension ini super berguna karena dia bisa auto-reload browser setiap kali kita save file. Jadi nggak perlu manual refresh browser berkali-kali. Cara install-nya gampang - tinggal buka Extension panel di VSCode (Ctrl+Shift+X), cari "Live Server", terus install yang developer-nya Ritwick Dey. Percaya deh, extension ini bakal jadi sahabat terbaik kamu selama proses development.

Selanjutnya, kita perlu Claude Code yang sudah terinstall dan ter-setup dengan benar. Claude Code ini adalah AI-powered coding assistant yang bakal jadi coding buddy kita. Dia bisa membantu dengan code generation, menjelaskan konsep, debug issues, dan banyak lagi. Pastikan kamu sudah punya akses ke Claude Code dan bisa mengintegrasikannya dengan VSCode workflow kamu. Kalau belum familiar dengan proses pengaturannya, coba cek dokumentasi resmi dulu. https://docs.anthropic.com/en/docs/claude-code/overview

Yang terakhir, siapkan mental untuk sesi coding yang santai. Ini bukan tentang speed coding atau menyelesaikan tugas secepat mungkin. Ini tentang menikmati prosesnya, belajar hal baru, dan membangun sesuatu yang keren secara bertahap. Jadi ambil minuman favorit kamu, pasang musik latar yang santai, dan pastikan lingkungan coding kamu nyaman.

File Structure Minimal

Nah, ini dia bagian yang paling keren dari pendekatan kita. Kita bakal pakai struktur file yang super minimal dan mudah dipahami. Tidak ada hierarki folder yang rumit, tidak ada banyak file konfigurasi, tidak ada proses build yang kompleks. Semua dalam satu tempat, mudah dikelola dan perfect untuk tujuan pembelajaran.

Struktur project kita cuma kayak gini:

company-profile/
└── index.html (semua ada di satu file!)

Yep, itu aja! Cuma satu file HTML yang berisi semuanya - struktur HTML, styling CSS dengan TailwindCSS, dan fungsionalitas JavaScript. Kenapa kita pilih pendekatan ini? Karena untuk pemula, menyimpan semua dalam satu tempat membuat proses memahami bagaimana berbagai bagian saling berinteraksi jadi jauh lebih mudah.

Dalam index.html ini, kita bakal mengatur konten dengan bagian-bagian yang jelas. Struktur HTML untuk layout, style tag yang berisi custom CSS kalau butuh, dan script tag untuk logika JavaScript. Semua komponen dari website kita - header, hero section, about, services, contact - bakal ada di satu file ini.

Pendekatan single file ini juga punya keuntungan lain. Pertama, deployment-nya super gampang - tinggal upload satu file ke hosting service manapun. Kedua, berbagi project dengan orang lain jadi mudah - cukup kirim satu file. Ketiga, untuk tujuan pembelajaran, kita bisa melihat gambaran besar dan memahami bagaimana semua bagian bekerja bersama-sama.

Buat folder baru namanya "company-profile" di direktori yang kamu suka. Bisa di Desktop, Documents, atau dimana aja yang mudah diakses. Terus buat file baru namanya "index.html" di dalam folder tersebut. Itu titik awal kita! Mudah banget kan?

Oh, dan satu tips - beri nama folder dengan format yang konsisten dan deskriptif. Ini praktik yang baik dan akan sangat membantu ketika kamu punya banyak project nanti. Nama "company-profile" sudah cukup jelas menggambarkan apa isi project-nya, dan mudah diingat juga.

Planning Konten Company Profile

Nah, sebelum kita mulai coding, ada satu tahap yang super penting tapi sering diabaikan sama banyak developer - yaitu planning phase. Percaya deh, waktu yang kamu habiskan untuk planning ini bakal menyelamatkan kamu dari pusing kepala di kemudian hari. Plus, ini juga bagian yang menyenangkan karena kita bisa berkreasi dan brainstorming ide-ide keren.

Brainstorming Company Information

Oke, mari kita mulai dengan brainstorming informasi dasar tentang profil perusahaan yang mau kita bikin. Untuk artikel ini, kita bakal bikin profil perusahaan untuk "BuildWithAngga Digital Agency" - sebuah digital agency yang fokus pada web development, UI/UX design, dan digital marketing services.

Nama Perusahaan

• BuildWithAngga Digital Agency
• Dipilih karena nama "BuildWithAngga" sudah familiar di komunitas tech Indonesia
• Nama yang mudah diingat dan brandable untuk studi kasus kita

Layanan Utama

• Web Development: expertise dalam frontend dan backend development, responsive design, dan modern web technologies
• UI/UX Design: mencakup user research, wireframing, prototyping, dan visual design
• Digital Marketing: termasuk SEO, social media marketing, dan content strategy

Informasi Kontak

• Email: [email protected]
• Telepon: +62 812-3456-7890
• Alamat: Jakarta, Indonesia
• Social media links
• Note: semua data dummy untuk tujuan edukasi

Misi & Visi

• Misi: "Membantu bisnis berkembang melalui solusi digital yang inovatif dan ramah pengguna"
• Visi: "Menjadi partner terpercaya dalam transformasi digital untuk semua ukuran bisnis"
• Sederhana tapi jelas dan mudah dipahami

Layout Wireframe Sederhana

Sekarang mari kita merencanakan struktur layout untuk landing page kita. Kita bakal pakai struktur yang sudah terbukti dan ramah pengguna, yaitu header → hero → about → services → contact → footer. Ini adalah layout standar yang bekerja dengan baik untuk halaman profil perusahaan dan mudah dinavigasi.

Header Section

• Logo perusahaan di posisi kiri
• Navigation menu di kanan dengan links ke berbagai section
• Mobile responsive: navigation berubah jadi hamburger menu
• Sticky positioning: selalu terlihat waktu pengguna scroll

Hero Section

• Kesan pertama yang harus berdampak
• Layout: headline besar di sebelah kiri, supporting text di bawahnya
• Call-to-action button yang prominent
• Hero image atau illustration di sebelah kanan
• Background: gradient atau solid color sesuai brand identity

About Section

• Menjelaskan siapa kita dan apa yang kita lakukan
• Layout dua kolom: teks di kiri, image/statistik di kanan
• Konten: sejarah singkat perusahaan, info tim, value propositions
• Tone: personal tapi tetap professional

Services Section

• Menampilkan tiga layanan utama kita
• Layout: card-based design dengan tiga kolom
• Setiap card berisi: icon, title, description, link detail
• Section penting karena langsung berhubungan dengan penawaran bisnis

Contact Section

• Contact form di sebelah kiri dengan fields: name, email, subject, message
• Contact details di sebelah kanan: alamat, telefon, email, social media
• Optional: map embed untuk lokasi kantor
• Call-to-action yang jelas untuk mendorong konversi

Footer Section

• Copyright information dan tahun
• Quick links ke halaman penting
• Informasi kontak tambahan
• Desain sederhana tapi professional, konsisten dengan tema keseluruhan

Color Scheme & Brand Vibe

Untuk skema warna, kita mau menciptakan kesan yang professional tapi modern dan mudah didekati. Berikut adalah panduan lengkap untuk color scheme dan brand vibe yang akan kita gunakan:

Primary Color - Biru Terpercaya

• Warna utama: #3B82F6 atau #1E40AF
• Alasan: diasosiasikan dengan kepercayaan, profesionalisme, dan teknologi
• Penggunaan: header, buttons utama, links, accents penting

Secondary Color - Orange/Kuning Accent

• Warna sekunder: #F59E0B atau #EF4444
• Fungsi: call-to-action elements, highlights, hover states
• Penggunaan: secara hemat untuk elemen yang perlu menonjol

Neutral Colors - Abu-abu & Putih

• Background terang: #F9FAFB
• Teks gelap: #111827
• Base color: #FFFFFF (putih untuk tampilan bersih)
• Text color: abu-abu gelap untuk keterbacaan professional

Overall Brand Vibe

• Modern, bersih, professional tapi tetap mudah didekati
• Tidak terlalu corporate yang kaku
• Tidak terlalu santai/casual
• Balance antara kredibel dan ramah
• Target: pemilik bisnis yang mencari solusi digital

Typography Strategy

• Font family: bersih dan mudah dibaca
• Headings: font tebal dan distinctive
• Body text: dioptimalkan untuk keterbacaan
• Default: TailwindCSS font stack (option: Google Fonts untuk kustomisasi)

Layout Principles

• Banyak white space untuk breathing room
• Margins dan paddings yang konsisten
• Alignment yang tepat dan rapi
• Hierarki visual yang jelas dan mudah dipahami
• Goal: pengguna mudah scan konten dan menemukan informasi tanpa overwhelmed

Mulai Coding dengan Claude Code

Nah, sekarang kita masuk ke bagian yang paling seru - saatnya mulai coding! Tapi sebelum kita langsung nyemplung ke code, ada beberapa hal yang perlu kita pahami tentang cara bekerja sama dengan Claude Code. Anggap aja sebagai coding buddy yang super pintar, tapi kita harus tahu caranya berkomunikasi yang efektif.

Perintah Dasar Claude Code

Berkomunikasi dengan AI itu beda dengan ngomong sama manusia. Claude Code bakal memberikan hasil yang lebih baik kalau kita kasih instruksi yang jelas dan spesifik. Jangan cuma bilang "bikinin website dong", tapi jelaskan detail-detail penting yang kita mau.

Setup dan Persiapan

• Pastikan Claude Code sudah aktif di VSCode
• Familiarkan diri dengan command palette atau chat interface
• Siapkan konteks project dan requirements yang jelas
• Cek dokumentasi resmi kalau belum familiar dengan proses pengaturan

Cara Berkomunikasi Efektif dengan AI

• Berikan konteks yang lengkap sebelum minta hasilkan code
• Jelaskan tujuan, target pengguna, dan fitur yang dibutuhkan
• Contoh: "Saya mau bikin landing page untuk digital agency yang target-nya adalah pemilik bisnis yang cari solusi web development"
• Berikan umpan balik yang konstruktif dan spesifik
• "Bisa nggak hero section-nya lebih menarik perhatian?" lebih baik dari "kurang bagus"

Tips Kolaborasi dengan Claude Code

• Minta hasilkan code secara bertahap, bukan sekaligus
• Mulai dari HTML structure, terus styling, baru functionality
• Selalu tinjau ulang code yang dihasilkan
• Gunakan sebagai learning opportunity - pahami logika di balik setiap code
• Berikan feedback yang detail jika hasil belum sesuai ekspektasi

Template Prompt yang Recommended

Untuk dapat hasil yang optimal dari Claude Code, ada beberapa template prompt yang bisa kita gunakan. Template ini sudah diuji dan terbukti efektif untuk berbagai jenis project.

Template untuk HTML Structure

"Hasilkan HTML boilerplate untuk [jenis website] dengan TailwindCSS v4 CDN.
Sertakan semantic HTML elements, meta tags untuk SEO, dan struktur dasar untuk
[sebutkan sections yang dibutuhkan]. Target audience adalah [describe target user]."

Template untuk CSS Styling

"Buat styling TailwindCSS untuk [komponen spesifik] dengan skema warna [sebutkan warna].
Style harus responsive, accessible, dan mengikuti modern design trends.
Tambahkan hover effects dan transisi yang halus."

Template untuk JavaScript Functionality

"Hasilkan JavaScript vanilla untuk [fitur spesifik] tanpa menggunakan external library.
Code harus bersih, mudah dibaca, dan menyertakan error handling.
Tambahkan komentar untuk menjelaskan logiknya."

Template untuk Debugging

"Tinjau code berikut dan identifikasi potensi masalah: [paste code].
Fokus pada performance, accessibility, dan browser compatibility.
Berikan saran untuk perbaikan."

Template untuk Optimization

"Optimalisasi code berikut untuk [tujuan spesifik]: [paste code].
Jelaskan kenapa perubahan yang disarankan bisa meningkatkan [tujuan tersebut]."

Tips Penggunaan Template

• Template ini hanya titik awal - sesuaikan dengan kebutuhan spesifik
• Berikan konteks yang cukup dan jelas tentang apa yang ingin dicapai
• Jangan ragu untuk iterasi dan refine prompt jika hasil belum optimal
• Eksperimen dengan variasi kata-kata untuk mendapat hasil terbaik

Generate HTML Boilerplate

Oke, sekarang mari kita praktik langsung. Kita mulai dengan hasilkan HTML boilerplate yang akan jadi fondasi dari landing page kita. Ini adalah tahap paling mendasar, jadi kita harus pastikan strukturnya kokoh dari awal.

Prompt untuk HTML Structure dengan TailwindCSS v4 CDN

"Hasilkan HTML boilerplate untuk company profile landing page BuildWithAngga Digital Agency.
Sertakan TailwindCSS v4 CDN, semantic HTML elements untuk accessibility, dan meta tags
dasar untuk SEO. Struktur yang dibutuhkan: header dengan navigation, hero section,
about section, services section, contact section, dan footer." Simpan kode pada file index.html

Elemen HTML Boilerplate yang Wajib Ada

• Doctype declaration yang proper: <!DOCTYPE html>
• Element html dengan lang attribute: <html lang="id">
• Meta charset UTF-8 dan viewport untuk responsive design
• Title tag yang deskriptif dan SEO-friendly
• TailwindCSS v4 CDN link di head section
• Favicon reference (optional tapi recommended)

Semantic HTML Elements

• <header> untuk area navigation
• <main> untuk konten utama halaman
• <section> untuk setiap bagian konten (services, about, etc.)
• <article> untuk konten yang berdiri sendiri
• <aside> untuk sidebar atau konten sampingan
• <footer> untuk bagian bawah halaman
• Proper heading hierarchy: satu h1, h2 untuk bagian utama, h3 untuk sub-bagian

Meta Tags Basic untuk SEO

• Meta description yang menarik dan informatif
• Meta keywords yang relevan dengan bisnis
• Open Graph tags: og:title, og:description, og:image untuk social sharing
• Meta robots untuk petunjuk search engine crawling
• Canonical URL untuk menghindari duplicate content

Best Practices HTML Structure

• ID dan class naming yang konsisten dan bermakna
• Accessibility attributes: alt text, aria-label, form labels
• Struktur yang logis dan hirarkis
• Validasi HTML menggunakan validator online
• Clean code tanpa syntax errors atau elemen yang hilang
• Perhatikan indentation dan formatting untuk readability

Building Sections Step-by-Step

Nah, sekarang kita masuk ke bagian yang paling seru - mulai membangun setiap bagian dari website kita satu per satu. Pendekatan bertahap ini sangat efektif karena kita bisa fokus pada detail setiap komponen dan memastikan semua berfungsi dengan baik sebelum lanjut ke bagian berikutnya. Hapus dulu semua kode yang berada di dalam tag <body> bisa hapus manual atau gunakan prompt.

Header & Navigation

Mari kita mulai dengan bagian yang paling krusial - header dan navigation. Ini adalah bagian pertama yang dilihat pengguna ketika mengunjungi website kita, jadi harus membuat kesan pertama yang baik. Plus, navigation yang baik akan menentukan seberapa mudah pengguna menavigasi seluruh website.

Sticky Navigation dengan Mobile Hamburger Menu

Untuk membangun navigation yang modern dan ramah pengguna, kita akan menggunakan sticky navigation yang tetap terlihat saat pengguna scroll. Ini sangat berguna karena pengguna bisa selalu akses menu tanpa harus scroll kembali ke atas.

Prompt Claude Code untuk Navigation

"Buatkan header navigation yang sticky untuk BuildWithAngga Digital Agency.
Sertakan desain responsif dengan hamburger menu untuk mobile.
Gunakan TailwindCSS untuk styling dan JavaScript vanilla untuk toggle functionality."

Struktur HTML Navigation

• Semantic tag <nav> dan <header> sebagai container utama
• Logo di sebelah kiri dengan proper branding
• Menu navigation di sebelah kanan untuk desktop view
• Hamburger button untuk mobile view (tersembunyi di desktop)
• Navigation items: Home, About, Services, Contact, dan CTA button "Get Quote"

Styling TailwindCSS untuk Sticky Navigation

• sticky top-0 untuk posisi yang tetap saat scroll
• z-50 untuk memastikan navigation selalu di atas elemen lain
• bg-white dengan shadow-md untuk efek elevation yang halus
• Responsive classes untuk hide/show elements sesuai screen size

Mobile Hamburger Menu Implementation

• Hamburger button visible hanya pada perangkat mobile
• Menu items disembunyikan dan muncul saat button diklik
• Smooth transition menggunakan transition-all duration-300
• Click outside functionality untuk auto-close menu

JavaScript Functionality

• Event listener untuk hamburger button toggle
• Toggle class hidden pada mobile menu container
• Event listener untuk click outside menu area
• Smooth scroll behavior untuk navigation links ke sections

Navigation Items & Links

• Setiap item mengarah ke section yang sesuai menggunakan anchor links
• Active state styling untuk menunjukkan current section
• Hover effects yang konsisten dengan brand theme
• Proper spacing dan typography hierarchy

Accessibility Considerations

• Proper aria-label untuk hamburger button
• Focus states yang jelas untuk keyboard navigation
• Screen reader friendly navigation structure
• Semantic markup untuk better SEO

Logo/Brand Name dengan Styling TailwindCSS

Logo atau nama brand adalah identitas utama dari website kita. Untuk BuildWithAngga Digital Agency, kita akan buat logo text yang modern dan mudah diingat menggunakan typography yang tepat.

Prompt Claude Code untuk Logo Design

"Buatkan logo text untuk BuildWithAngga Digital Agency dengan styling TailwindCSS.
Logo harus responsive, modern, dan professional. Sertakan nama utama 'BuildWithAngga'
yang prominent dan tagline 'Digital Agency' yang lebih subtle. Gunakan color scheme
primary dengan hover effects yang smooth.
Logo harus clickable dan mengarah ke top of page."

Alternative Prompt untuk Logo dengan Icon

"Desain logo kombinasi text dan icon untuk BuildWithAngga Digital Agency.
Gunakan TailwindCSS dengan icon sederhana (bisa code bracket atau tech symbol)
di sebelah nama brand. Pastikan responsive untuk mobile, tablet, dan desktop.
Include hover animation yang subtle tapi engaging."

<!-- Header Navigation -->
<header class="bg-white fixed w-full top-0 z-50 transition-all duration-300" id="header">
   <nav class="container mx-auto px-6 sm:px-8 lg:px-12">
      <div class="flex items-center justify-between h-20 lg:h-24">
         <!-- Logo / Brand -->
         <div class="flex items-center">
            <div class="flex-shrink-0">
               <a href="#" id="logo-link" class="group cursor-pointer transition-all duration-300 hover:scale-105">
                  <div class="flex items-center space-x-3 sm:space-x-4">
                     <!-- Tech Icon -->
                     <div class="flex-shrink-0 relative">
                        <!-- Animated background circle -->
                        <div class="absolute inset-0 bg-blue-100 rounded-full transform scale-0 group-hover:scale-110 transition-transform duration-500 ease-out"></div>
                        <!-- Laptop code icon -->
                        <div class="relative w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 flex items-center justify-center">
                           <svg class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 text-blue-600 transform transition-all duration-500 group-hover:text-blue-700 group-hover:scale-110" fill="currentColor" viewBox="0 0 20 20">
                              <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd"></path>
                           </svg>
                        </div>
                     </div>
                     <!-- Logo Text Container -->
                     <div class="flex flex-col">
                        <!-- Main Logo Text -->
                        <h1 class="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold tracking-tight transition-all duration-300">
                           <span class="text-blue-600 group-hover:text-blue-700 transition-colors duration-300">Build</span><span class="text-gray-900 group-hover:text-blue-600 transition-colors duration-300">WithAngga</span>
                        </h1>
                        <!-- Tagline -->
                        <p class="text-xs sm:text-sm text-gray-500 font-medium tracking-wide mt-0.5 transition-all duration-300 group-hover:text-blue-500 group-hover:tracking-wider">
                           Digital Agency
                        </p>
                     </div>
                  </div>
               </a>
            </div>
         </div>
         <!-- Desktop Navigation Menu -->
         <div class="hidden md:flex items-center">
            <!-- Navigation Links -->
            <div class="flex items-center space-x-6 lg:space-x-7">
               <a href="#home" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-base font-medium transition-all duration-200 relative rounded-md">
                  <span class="relative z-10">Home</span>
                  <div class="absolute inset-0 bg-blue-50 rounded-md scale-0 hover:scale-100 transition-transform duration-200 ease-out"></div>
               </a>
               <a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-base font-medium transition-all duration-200 relative rounded-md">
                  <span class="relative z-10">About</span>
                  <div class="absolute inset-0 bg-blue-50 rounded-md scale-0 hover:scale-100 transition-transform duration-200 ease-out"></div>
               </a>
               <a href="#services" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-base font-medium transition-all duration-200 relative rounded-md">
                  <span class="relative z-10">Services</span>
                  <div class="absolute inset-0 bg-blue-50 rounded-md scale-0 hover:scale-100 transition-transform duration-200 ease-out"></div>
               </a>
               <a href="#portfolio" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-base font-medium transition-all duration-200 relative rounded-md">
                  <span class="relative z-10">Portfolio</span>
                  <div class="absolute inset-0 bg-blue-50 rounded-md scale-0 hover:scale-100 transition-transform duration-200 ease-out"></div>
               </a>
               <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-base font-medium transition-all duration-200 relative rounded-md">
                  <span class="relative z-10">Contact</span>
                  <div class="absolute inset-0 bg-blue-50 rounded-md scale-0 hover:scale-100 transition-transform duration-200 ease-out"></div>
               </a>
            </div>
            <!-- Separator -->
            <div class="h-6 w-px bg-gray-300 mx-6 lg:mx-8"></div>
            <!-- CTA Button -->
            <a href="#contact" class="bg-blue-600 text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 hover:shadow-lg transition-all duration-200 font-medium">
            Get Started
            </a>
         </div>
         <!-- Mobile Menu Button -->
         <div class="md:hidden">
            <button type="button" id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none focus:text-blue-600 transition-colors duration-200" aria-label="Toggle mobile menu">
               <!-- Hamburger Icon -->
               <svg id="hamburger-icon" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
               </svg>
               <!-- Close Icon (hidden by default) -->
               <svg id="close-icon" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
               </svg>
            </button>
         </div>
      </div>
      <!-- Mobile Navigation Menu -->
      <div id="mobile-menu" class="md:hidden hidden">
         <div class="px-2 pt-2 pb-3 space-y-1 bg-white border-t border-gray-200">
            <a href="#home" class="block text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 text-base font-medium transition-colors duration-200 rounded-md">
            Home
            </a>
            <a href="#about" class="block text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 text-base font-medium transition-colors duration-200 rounded-md">
            About
            </a>
            <a href="#services" class="block text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 text-base font-medium transition-colors duration-200 rounded-md">
            Services
            </a>
            <a href="#portfolio" class="block text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 text-base font-medium transition-colors duration-200 rounded-md">
            Portfolio
            </a>
            <a href="#contact" class="block text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 text-base font-medium transition-colors duration-200 rounded-md">
            Contact
            </a>
            <div class="pt-2">
               <a href="#contact" class="block w-full text-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
               Get Started
               </a>
            </div>
         </div>
      </div>
   </nav>
</header>

Brand Name Styling Strategy

• Nama utama "BuildWithAngga" dengan ukuran prominent
• Tagline "Digital Agency" dengan ukuran lebih kecil
• Typography hierarchy yang jelas dan readable
• Color scheme sesuai dengan brand identity yang sudah ditentukan

TailwindCSS Classes untuk Logo

• text-2xl font-bold untuk ukuran yang menonjol tapi tidak berlebihan
• text-blue-600 atau sesuai primary color brand
• hover:text-blue-700 untuk interactive hover effect
• Responsive sizing: sm:text-xl lg:text-2xl untuk berbagai screen size

Logo Layout & Positioning

• Container menggunakan flex items-center untuk vertical alignment
• Spacing antar elemen dengan gap-2 atau space-x-2
• Proper margin dan padding untuk visual balance
• Logo sebagai clickable link yang mengarah ke top of page

Typography Hierarchy Implementation

• Main brand name dengan weight yang lebih tebal
• Tagline dengan text-sm opacity-75 untuk subtle appearance
• Consistent font family dengan rest of website
• Option untuk integrate Google Fonts jika diperlukan

Interactive Elements

• Subtle hover effects: hover:scale-105 untuk gentle scale
• Color transition pada hover state
• Smooth transitions menggunakan transition-all duration-200
• Tidak berlebihan - tetap maintain professional look

Responsive Behavior

• Full logo text untuk desktop dan tablet
• Abbreviated version "BWA" untuk mobile jika space terbatas
• Consistent positioning across all device sizes
• Maintain readability pada semua screen resolutions

Brand Consistency

• Color contrast yang memenuhi accessibility standards
• Consistent dengan overall design theme
• Professional appearance yang build trust
• Memorable dan easy to recognize

Logo Link Functionality

• Standard practice: logo click mengarah ke home/top of page
• Implementation dengan href="#" atau href="#top"
• Smooth scroll behavior untuk better user experience
• Consistent dengan web navigation conventions

Optional Visual Enhancements

• Subtle shadow atau glow effect jika sesuai brand
• Icon atau graphic element di samping text (keep it simple)
• Animation effects yang tidak mengganggu readability
• Balance antara creativity dan professionalism

Hero Section

Setelah header selesai, sekarang kita masuk ke bagian yang paling penting dari landing page - hero section. Ini adalah area pertama yang dilihat pengguna setelah navigation, jadi harus bikin dampak yang kuat dan langsung komunikasikan value proposition kita dengan jelas.

Hero section yang baik harus bisa jawab tiga pertanyaan dalam hitungan detik: siapa kita, apa yang kita tawarkan, dan kenapa pengguna harus peduli. Untuk BuildWithAngga Digital Agency, kita mau tunjukkan bahwa kita adalah partner yang tepat untuk transformasi digital mereka.

Eye-catching Headline dan Subtitle

Headline adalah elemen paling penting dalam hero section. Ini adalah kesempatan pertama dan mungkin satu-satunya untuk merebut perhatian pengguna. Headline yang bagus harus jelas, fokus pada manfaat, dan mudah diingat.

Prompt Claude Code untuk Hero Headlines

"Buatkan hero section untuk BuildWithAngga Digital Agency dengan headline yang powerful
dan subtitle yang mendukung. Headline harus communicate value proposition dengan jelas:
'Transformasi Digital yang Menguntungkan untuk Bisnis Anda'. Subtitle explain lebih detail
tentang services dan benefits. Gunakan TailwindCSS untuk typography yang modern dan readable."

Struktur Headline yang Efektif

• Main headline dengan ukuran besar dan tebal: text-4xl md:text-6xl font-bold
• Fokus pada manfaat yang konkret untuk target audience
• Gunakan kata-kata yang kuat: "Transformasi", "Menguntungkan", "Solusi"
• Tetap singkat - maksimal 8-10 kata untuk dampak yang lebih baik

Subtitle Supporting Content

• Subtitle yang menjelaskan main headline: text-lg md:text-xl text-gray-600
• Jelaskan bagaimana kita memberikan value proposition
• Sebutkan layanan spesifik: web development, UI/UX design, digital marketing
• Sertakan indikator kredibilitas seperti "Dipercaya 500+ Klien"

Typography Hierarchy Implementation

• H1 tag untuk main headline (tujuan SEO)
• Proper spacing dengan mb-4 atau mb-6 antar elemen
• Kontras warna yang baik untuk keterbacaan
• Typography responsive yang menyesuaikan dengan ukuran layar

Emotional Appeal dalam Copy

• Gunakan kata-kata yang resonan dengan pemilik bisnis
• Alamat pain points: "Bosan dengan solusi digital yang rumit?"
• Janjikan hasil yang jelas: "Tingkatkan revenue hingga 300%"
• Ciptakan urgensi tanpa being pushy

Headline Testing Variations

• A: "Solusi Digital yang Terbukti Meningkatkan Revenue"
• B: "Partner Terpercaya untuk Pertumbuhan Bisnis Online Anda"
• C: "Dari Ide Menjadi Bisnis Digital yang Profitable"
• Pilih yang paling selaras dengan brand voice BuildWithAngga

Call-to-action Button

CTA button adalah elemen yang mengubah visitors jadi leads. Positioning, wording, dan design-nya harus strategis untuk mendorong action tanpa terlalu agresif.

Prompt Claude Code untuk CTA Button

"Desain call-to-action button yang prominent untuk hero section BuildWithAngga.
Button text: 'Konsultasi Gratis Sekarang' dengan styling yang eye-catching tapi professional.
Gunakan primary color #3B82F6 dengan hover effects yang smooth. Include secondary CTA
'Lihat Portfolio' dengan style yang subtle. Make sure responsive untuk semua devices."

Primary CTA Strategy

• Button text yang berorientasi pada aksi: "Konsultasi Gratis Sekarang"
• Hilangkan hambatan dengan kata "Gratis" dan "Sekarang"
• Styling: bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg
• Ukuran yang menonjol tapi tidak berlebihan
• Posisi yang mudah ditemukan dan diklik

Secondary CTA Option

• Pilihan aksi alternatif untuk users yang belum siap berkomitmen
• Text: "Lihat Portfolio" atau "Pelajari Lebih Lanjut"
• Styling: border border-blue-600 text-blue-600 hover:bg-blue-50
• Kurang menonjol tapi tetap dapat diakses

Button Micro-interactions

• Hover effects dengan transition-all duration-200
• Scale effect: hover:scale-105 untuk umpan balik yang halus
• Perubahan shadow: hover:shadow-lg untuk kedalaman
• Loading states jika button memicu forms

CTA Positioning Strategy

• Langsung di bawah subtitle untuk alur baca yang natural
• Spasi yang cukup dengan mt-8 atau mt-10
• Center aligned untuk simetri atau left aligned untuk pola baca
• Optimasi mobile dengan pendekatan full-width atau centered

Conversion Optimization Tips

• Gunakan warna kontras yang menonjol dari background
• Test berbagai teks CTA untuk menemukan yang paling efektif
• Sertakan trust signals di dekatnya: "No spam, guaranteed"
• Pertimbangkan indikator urgensi: "Slot terbatas tersedia"

Background Gradient atau Image

Background hero section menentukan suasana dan memperkuat brand identity. Pilihan antara gradient atau image tergantung pada strategi design keseluruhan dan pesan yang mau disampaikan.

Prompt Claude Code untuk Hero Background

"Buat hero section dengan background gradient yang modern untuk BuildWithAngga Digital Agency.
Gunakan gradient dari biru #3B82F6 ke ungu #8B5CF6 dengan opacity yang tidak overwhelm text.
Alternative: integrate hero image dengan overlay yang maintain text readability.
Pastikan responsive dan performance-optimized."

<section class="relative min-h-screen flex items-center justify-center pt-20 lg:pt-24 overflow-hidden bg-white">
   <!-- Simple transparent gradient background -->
   <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5"></div>
   <!-- Subtle overlay gradient -->
   <div class="absolute inset-0 bg-gradient-to-t from-blue-500/3 via-transparent to-purple-500/3"></div>
   <!-- Floating dots micro interactions -->
   <div class="absolute inset-0 pointer-events-none z-10">
      <div class="absolute top-32 left-1/4 w-2 h-2 bg-blue-500 rounded-full animate-ping opacity-60" style="animation-delay: 1s; animation-duration: 3s;"></div>
      <div class="absolute top-48 right-1/3 w-2 h-2 bg-purple-500 rounded-full animate-ping opacity-50" style="animation-delay: 2s; animation-duration: 4s;"></div>
      <div class="absolute bottom-40 left-1/3 w-1.5 h-1.5 bg-blue-600 rounded-full animate-ping opacity-40" style="animation-delay: 3s; animation-duration: 5s;"></div>
      <div class="absolute bottom-32 right-1/4 w-1.5 h-1.5 bg-purple-600 rounded-full animate-ping opacity-50" style="animation-delay: 0.5s; animation-duration: 3.5s;"></div>
      <div class="absolute top-1/2 left-1/6 w-1 h-1 bg-blue-400 rounded-full animate-pulse opacity-30" style="animation-delay: 1.5s; animation-duration: 2s;"></div>
      <div class="absolute bottom-1/2 right-1/6 w-1 h-1 bg-purple-400 rounded-full animate-pulse opacity-35" style="animation-delay: 2.5s; animation-duration: 2.5s;"></div>
   </div>
   <!-- Hero Content -->
   <div class="container mx-auto px-6 sm:px-8 lg:px-12 text-center">
      <div class="max-w-4xl mx-auto">
         <!-- Main Headline with staggered animation -->
         <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-gray-900 leading-[1.1] mb-8 tracking-normal">
            <span class="block animate-fade-in-up opacity-0" style="animation-delay: 0.2s; animation-fill-mode: forwards;">Wujudkan Bisnis</span>
            <span class="block text-transparent bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-600 bg-clip-text animate-fade-in-up opacity-0 hover:scale-105 transition-transform duration-300" style="animation-delay: 0.4s; animation-fill-mode: forwards;">Masa Depan</span>
            <span class="block animate-fade-in-up opacity-0" style="animation-delay: 0.6s; animation-fill-mode: forwards;">Bersama Kami</span>
         </h1>
         <!-- Supporting Subtitle with fade in -->
         <p class="text-xl text-gray-600 leading-relaxed mb-12 max-w-3xl mx-auto animate-fade-in-up opacity-0" style="animation-delay: 0.8s; animation-fill-mode: forwards;">
            Tingkatkan penjualan dan efisiensi operasional dengan solusi digital yang terbukti menghasilkan ROI positif.
         </p>
         <!-- Call to Action Buttons with staggered entrance -->
         <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
            <a href="#contact" class="bg-blue-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-blue-700 hover:shadow-xl transform hover:-translate-y-1 hover:scale-105 transition-all duration-300 animate-fade-in-up opacity-0 group" style="animation-delay: 1s; animation-fill-mode: forwards;">
            <span class="group-hover:tracking-wide transition-all duration-200">Konsultasi Gratis Sekarang</span>
            </a>
            <a href="#portfolio" class="border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-xl text-lg font-semibold hover:border-blue-600 hover:text-blue-600 hover:shadow-lg transform hover:-translate-y-1 hover:scale-105 transition-all duration-300 animate-fade-in-up opacity-0" style="animation-delay: 1.2s; animation-fill-mode: forwards;">
            Lihat Portfolio Kami
            </a>
         </div>
      </div>
   </div>
</section>

Gradient Background Implementation

• Gradient modern: bg-gradient-to-br from-blue-600 to-purple-600
• Alternatif: bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-600
• Kontrol opacity untuk keterbacaan teks
• Konsisten dengan skema warna brand yang sudah ditetapkan

Image Background Alternative

• Hero image berkualitas tinggi yang merepresentasikan transformasi digital
• Overlay dengan bg-black bg-opacity-40 untuk kontras teks
• Responsive images dengan srcset yang tepat untuk berbagai perangkat
• Optimasi ukuran image untuk waktu loading yang cepat

Background Design Considerations

• Pastikan teks tetap terbaca pada semua ukuran layar
• Hindari pola yang sibuk dan mengalihkan perhatian dari pesan utama
• Pertimbangkan animasi halus seperti floating elements
• Dampak performance - gradients umumnya lebih cepat dari images besar

Layout Composition

• Layout dua kolom: konten teks kiri, elemen visual kanan
• Pendekatan satu kolom terpusat untuk kesederhanaan
• Design asimetris dengan keseimbangan teks dan visual
• Penggunaan white space untuk ruang bernapas

Visual Elements Enhancement

• Floating icons atau ilustrasi yang merepresentasikan layanan
• Bentuk geometris untuk estetik tech modern
• Animasi halus dengan CSS transforms
• Konsisten dengan bahasa design website keseluruhan

Technical Implementation

• CSS custom properties untuk pergantian tema warna yang mudah
• Responsive breakpoints yang menangani konten dengan baik
• Optimasi performance dengan lazy loading jika ada images
• Testing kompatibilitas cross-browser

Hero Section Complete Structure

• Container dengan padding dan margins yang tepat
• Flexbox atau Grid layout untuk perilaku responsive
• Manajemen z-index untuk elemen berlapis
• Struktur HTML semantik untuk manfaat SEO

About Us Section

Setelah hero section yang kuat, sekarang kita lanjut ke bagian yang membangun kepercayaan dan kredibilitas - about us section. Ini adalah tempat dimana kita bercerita tentang siapa BuildWithAngga Digital Agency, apa yang membuat kita berbeda, dan kenapa klien harus memilih kita sebagai partner digital mereka.

About section yang efektif harus bisa menyeimbangkan antara professional dan personal. Kita mau tunjukkan keahlian dan pengalaman, tapi juga mau klien merasa bahwa kita adalah tim yang bisa dipercaya dan mudah diajak kerja sama.

Company Description dengan Grid Layout

Untuk about section BuildWithAngga, kita akan menggunakan pendekatan yang lebih visual dan terstruktur dengan grid layout. Ini akan membantu mengorganisir informasi dengan cara yang mudah dicerna oleh pengguna.

Prompt Claude Code untuk About Section

"Buatkan about section untuk BuildWithAngga Digital Agency dengan grid layout responsive.
Sertakan company description, mission statement, team highlights, dan achievement statistics.
Gunakan TailwindCSS grid system dengan layout 2 kolom untuk desktop dan 1 kolom untuk mobile.
Include visual elements seperti team photo placeholders dan stat numbers yang prominent."

Grid Layout Structure

• Container utama dengan grid grid-cols-1 lg:grid-cols-2 gap-8
• Kolom kiri: company story dan mission statement
• Kolom kanan: team highlights dan statistics
• Perilaku responsive yang mulus di semua ukuran perangkat

Company Story Content Strategy

• Opening paragraph yang menarik tentang founding story BuildWithAngga
• Jelaskan bagaimana passion for technology bertemu dengan kebutuhan bisnis
• Tonjolkan unique value proposition: "Solusi digital yang profitable dan sustainable"
• Sertakan sentuhan personal tanpa kehilangan kredibilitas professional

Mission Statement Implementation

• Format quote dengan styling yang distinctive
• Typography yang lebih besar untuk penekanan: text-xl italic
• Background highlight atau border untuk pemisahan visual
• Posisi yang strategis dalam alur layout

Team Highlights Section

• Pengenalan singkat tentang key team members atau founder
• Placeholder untuk team photo dengan alt text yang tepat
• Sebutkan area keahlian: development, design, marketing
• Sertakan tahun pengalaman dan pencapaian yang notable

Achievement Statistics Display

• Angka-angka kunci yang mengesankan: "500+ Projects Completed"
• "150+ Happy Clients", "98% Client Satisfaction"
• Grid layout untuk statistik: grid grid-cols-2 gap-4
• Hierarki typography dengan angka yang menonjol

Visual Design Elements

• Spasi yang konsisten dengan py-16 untuk section padding
• Variasi background untuk visual interest tanpa gangguan
• Skema warna yang selaras dengan identitas brand keseluruhan
• Kontras typography untuk keterbacaan dan hierarki

Content Tone and Voice

• Professional tapi mudah didekati dan relatable
• Fokus pada manfaat klien bukan hanya pencapaian perusahaan
• Sertakan elemen social proof dengan cara yang natural
• Hindari jargon yang bisa membingungkan pembaca non-technical

Simple Animations dengan Vanilla JavaScript

Untuk membuat about section lebih menarik, kita akan tambahkan animasi yang halus tapi efektif. Animasi ini akan dipicu ketika pengguna scroll ke section tersebut, memberikan pengalaman yang lebih interaktif.

Prompt Claude Code untuk Animations

"Implement scroll-triggered animations untuk about section menggunakan vanilla JavaScript.
Include fade-in effects untuk text content, counter animation untuk statistics numbers,
dan slide-in animations untuk grid elements. Gunakan Intersection Observer API untuk
performance optimization. Pastikan animations accessible dan tidak mengganggu user experience."

<section id="about" class="py-20 lg:py-28 bg-gradient-to-b from-white via-gray-50/50 to-gray-50">
   <div class="container mx-auto px-6 sm:px-8 lg:px-12">
      <!-- Section Header -->
      <div class="text-center mb-16 scroll-animate" data-animation="fade-up" data-delay="100">
         <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
            Tentang <span class="text-blue-600">BuildWithAngga</span>
         </h2>
         <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Partner digital terpercaya yang membantu bisnis bertransformasi dan berkembang dengan solusi teknologi inovatif.
         </p>
      </div>
      <!-- Main Content Grid -->
      <div class="grid lg:grid-cols-2 gap-16 lg:gap-20 items-center mb-20">
         <!-- Company Description -->
         <div class="space-y-8 scroll-animate" data-animation="slide-left" data-delay="200">
            <div>
               <h3 class="text-2xl font-bold text-gray-900 mb-4">Misi Kami</h3>
               <p class="text-lg text-gray-600 leading-relaxed mb-6">
                  Memberdayakan bisnis Indonesia dengan teknologi digital yang mudah diakses, efektif, dan menguntungkan. Kami percaya setiap bisnis memiliki potensi untuk berkembang pesat dengan dukungan solusi digital yang tepat.
               </p>
               <p class="text-lg text-gray-600 leading-relaxed">
                  Dengan pengalaman lebih dari 5 tahun, kami telah membantu ratusan klien mencapai tujuan bisnis mereka melalui website profesional, aplikasi mobile, dan strategi pemasaran digital yang terukur.
               </p>
            </div>
            <!-- Values -->
            <div class="space-y-4">
               <h4 class="text-xl font-semibold text-gray-900">Nilai-Nilai Kami</h4>
               <div class="grid sm:grid-cols-2 gap-4">
                  <div class="flex items-start space-x-3 scroll-animate" data-animation="fade-up" data-delay="300">
                     <div class="w-2 h-2 bg-blue-600 rounded-full mt-3 flex-shrink-0"></div>
                     <div>
                        <h5 class="font-semibold text-gray-900">Inovasi</h5>
                        <p class="text-gray-600 text-sm">Selalu menggunakan teknologi terdepan</p>
                     </div>
                  </div>
                  <div class="flex items-start space-x-3 scroll-animate" data-animation="fade-up" data-delay="400">
                     <div class="w-2 h-2 bg-purple-600 rounded-full mt-3 flex-shrink-0"></div>
                     <div>
                        <h5 class="font-semibold text-gray-900">Kualitas</h5>
                        <p class="text-gray-600 text-sm">Standar tinggi dalam setiap project</p>
                     </div>
                  </div>
                  <div class="flex items-start space-x-3 scroll-animate" data-animation="fade-up" data-delay="500">
                     <div class="w-2 h-2 bg-blue-600 rounded-full mt-3 flex-shrink-0"></div>
                     <div>
                        <h5 class="font-semibold text-gray-900">Partnership</h5>
                        <p class="text-gray-600 text-sm">Membangun hubungan jangka panjang</p>
                     </div>
                  </div>
                  <div class="flex items-start space-x-3 scroll-animate" data-animation="fade-up" data-delay="600">
                     <div class="w-2 h-2 bg-purple-600 rounded-full mt-3 flex-shrink-0"></div>
                     <div>
                        <h5 class="font-semibold text-gray-900">Hasil</h5>
                        <p class="text-gray-600 text-sm">Fokus pada ROI yang terukur</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- Team Highlights -->
         <div class="space-y-8 scroll-animate" data-animation="slide-right" data-delay="250">
            <div>
               <h3 class="text-2xl font-bold text-gray-900 mb-6">Tim Profesional</h3>
               <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
                  <!-- Team Member Placeholders -->
                  <div class="text-center scroll-animate" data-animation="scale-up" data-delay="350">
                     <div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white font-bold text-lg">AG</span>
                     </div>
                     <h5 class="font-semibold text-gray-900 text-sm">Angga</h5>
                     <p class="text-gray-600 text-xs">CEO & Founder</p>
                  </div>
                  <div class="text-center scroll-animate" data-animation="scale-up" data-delay="400">
                     <div class="w-20 h-20 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white font-bold text-lg">MD</span>
                     </div>
                     <h5 class="font-semibold text-gray-900 text-sm">Maya</h5>
                     <p class="text-gray-600 text-xs">Lead Designer</p>
                  </div>
                  <div class="text-center scroll-animate" data-animation="scale-up" data-delay="450">
                     <div class="w-20 h-20 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white font-bold text-lg">RH</span>
                     </div>
                     <h5 class="font-semibold text-gray-900 text-sm">Rafi</h5>
                     <p class="text-gray-600 text-xs">Tech Lead</p>
                  </div>
                  <div class="text-center scroll-animate" data-animation="scale-up" data-delay="500">
                     <div class="w-20 h-20 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white font-bold text-lg">SN</span>
                     </div>
                     <h5 class="font-semibold text-gray-900 text-sm">Sari</h5>
                     <p class="text-gray-600 text-xs">Marketing</p>
                  </div>
                  <div class="text-center scroll-animate" data-animation="scale-up" data-delay="550">
                     <div class="w-20 h-20 bg-gradient-to-br from-red-400 to-red-600 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white font-bold text-lg">DK</span>
                     </div>
                     <h5 class="font-semibold text-gray-900 text-sm">Dika</h5>
                     <p class="text-gray-600 text-xs">Developer</p>
                  </div>
                  <div class="text-center scroll-animate" data-animation="scale-up" data-delay="600">
                     <div class="w-20 h-20 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full mx-auto mb-3 flex items-center justify-center">
                        <span class="text-white font-bold text-lg">LS</span>
                     </div>
                     <h5 class="font-semibold text-gray-900 text-sm">Lisa</h5>
                     <p class="text-gray-600 text-xs">UI/UX Designer</p>
                  </div>
               </div>
               <p class="text-gray-600 leading-relaxed">
                  Tim kami terdiri dari profesional berpengalaman di bidang teknologi, desain, dan pemasaran digital. Dengan keahlian yang beragam, kami siap menghadapi tantangan project apapun.
               </p>
            </div>
         </div>
      </div>
      <!-- Achievement Statistics -->
      <div class="bg-white rounded-2xl shadow-sm p-8 lg:p-12 scroll-animate" data-animation="fade-up" data-delay="300">
         <h3 class="text-2xl font-bold text-gray-900 text-center mb-12">Pencapaian Kami</h3>
         <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="text-center scroll-animate" data-animation="counter" data-delay="400">
               <div class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2" data-target="150" data-suffix="+">0</div>
               <div class="text-gray-900 font-semibold mb-1">Proyek Selesai</div>
               <div class="text-gray-600 text-sm">Website & Aplikasi</div>
            </div>
            <div class="text-center scroll-animate" data-animation="counter" data-delay="500">
               <div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2" data-target="98" data-suffix="%">0</div>
               <div class="text-gray-900 font-semibold mb-1">Tingkat Kepuasan</div>
               <div class="text-gray-600 text-sm">Klien yang Puas</div>
            </div>
            <div class="text-center scroll-animate" data-animation="counter" data-delay="600">
               <div class="text-4xl lg:text-5xl font-bold text-indigo-600 mb-2" data-target="5" data-suffix="+">0</div>
               <div class="text-gray-900 font-semibold mb-1">Tahun</div>
               <div class="text-gray-600 text-sm">Pengalaman</div>
            </div>
            <div class="text-center scroll-animate" data-animation="counter" data-delay="700">
               <div class="text-4xl lg:text-5xl font-bold text-green-600 mb-2" data-target="24" data-suffix="/7">0</div>
               <div class="text-gray-900 font-semibold mb-1">Support</div>
               <div class="text-gray-600 text-sm">Dukungan Teknis</div>
            </div>
         </div>
      </div>
   </div>
</section>

Fade-in Animation Implementation

• Intersection Observer untuk mendeteksi ketika element masuk viewport
• CSS classes: .fade-in-up dengan transform dan opacity properties
• JavaScript untuk menambah/menghapus classes pada scroll events
• Staggered timing untuk multiple elements: delay 100ms, 200ms, 300ms

Counter Animation untuk Statistics

• Efek number counting dari 0 ke target number
• Function yang menaikkan angka secara bertahap dengan setTimeout
• Format dengan proper thousands separators untuk keterbacaan
• Pemicu animasi hanya sekali ketika element pertama kali terlihat

Slide-in Animations untuk Grid Elements

• Left slide untuk konten di kolom kiri
• Right slide untuk konten di kolom kanan
• CSS transforms: translateX(-50px) to translateX(0)
• Transisi yang halus dengan transition: all 0.6s ease-out

Intersection Observer Setup

const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
    }
  });
}, observerOptions);

CSS Animation Classes

• .fade-in-up: opacity dan transform dari bottom ke posisi normal
• .slide-in-left: transform dari kiri ke center
• .slide-in-right: transform dari kanan ke center
• Durasi dan easing yang konsisten: transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1)

Performance Considerations

• Gunakan transform dan opacity untuk animasi yang halus
• Hindari animating properties yang menyebabkan layout reflow
• Debounce scroll events jika diperlukan untuk performance yang lebih baik
• Test pada perangkat dengan processing power yang lebih rendah

Accessibility Features

• Hormati prefers-reduced-motion media query untuk users yang sensitif
• Pastikan animasi tidak mengganggu screen readers
• Sediakan fallback untuk browsers yang tidak mendukung Intersection Observer
• Jaga animasi tetap halus dan tidak overwhelming

Animation Timing Strategy

• Animasi entrance ketika section pertama kali terlihat
• Animasi exit opsional - fokus pada pengalaman entrance
• Stagger timings untuk menciptakan alur yang natural
• Total durasi animasi tidak lebih dari 1 detik untuk UX yang baik

Code Organization

• File JavaScript terpisah untuk animasi: animations.js
• Fungsi modular yang dapat digunakan kembali untuk section berbeda
• Event listeners yang properly attached dan cleaned up
• Error handling untuk graceful degradation

Testing Animation Implementation

• Test pada berbagai kecepatan scroll untuk memastikan konsistensi
• Verifikasi pemicu animasi pada ukuran viewport yang berbeda
• Periksa dampak performance dengan browser dev tools
• Pastikan animasi bekerja pada touch devices dengan proper touch events

About Section Complete Structure

• HTML semantik dengan hierarki heading yang tepat
• Grid layout yang responsive dan accessible
• Konten yang menarik dan dapat dipercaya
• Animasi yang meningkatkan tapi tidak essential untuk functionality
• Performance-optimized dan cross-browser compatible

Services Section

Nah, sekarang kita masuk ke bagian yang paling penting untuk bisnis - services section. Ini adalah jantung dari website company profile kita, dimana kita tampilkan apa yang bisa BuildWithAngga Digital Agency tawarkan kepada klien. Section ini harus dibuat dengan sangat menarik karena ini yang akan menentukan apakah pengunjung tertarik untuk menggunakan jasa kita atau tidak.

Services section yang efektif harus bisa mengkomunikasikan value proposition dengan jelas, mudah dipahami, dan membuat pengunjung pengen tahu lebih lanjut. Kita akan fokus pada tiga layanan utama: Web Development, UI/UX Design, dan Digital Marketing.

Service Cards dengan Hover Effects

Untuk menampilkan services BuildWithAngga, kita akan menggunakan desain berbasis card yang modern dan interaktif. Setiap service akan punya card sendiri dengan informasi yang lengkap tapi tidak berlebihan.

Prompt Claude Code untuk Services Cards

"Buatkan services section untuk BuildWithAngga Digital Agency dengan 3 service cards:
Web Development, UI/UX Design, dan Digital Marketing. Gunakan grid layout responsive
dengan TailwindCSS. Setiap card harus punya title, description, key features list,
dan pricing hint. Include hover effects yang smooth dan professional. Layout 3 kolom
untuk desktop, 1 kolom untuk mobile."

Card Structure dan Layout

• Grid container: grid grid-cols-1 md:grid-cols-3 gap-8
• Setiap card dengan background putih dan shadow: bg-white rounded-lg shadow-lg
• Padding yang konsisten: p-6 untuk spasi yang nyaman
• Border radius untuk tampilan modern: rounded-lg

Web Development Card Content

• Title: "Web Development" dengan typography yang tebal
• Description: "Website custom yang performant dan SEO-friendly"
• Fitur utama: "Responsive Design", "Fast Loading", "SEO Optimized", "Secure & Scalable"
• Petunjuk harga: "Mulai dari 15 juta"
• CTA button: "Pelajari Lebih Lanjut"

UI/UX Design Card Content

• Title: "UI/UX Design" dengan styling yang konsisten
• Description: "Design yang ramah pengguna dan berorientasi konversi"
• Fitur utama: "User Research", "Wireframing", "Prototyping", "Usability Testing"
• Petunjuk harga: "Mulai dari 8 juta"
• CTA button dengan styling yang sama

Digital Marketing Card Content

• Title: "Digital Marketing"
• Description: "Strategi marketing yang terukur dan profitable"
• Fitur utama: "SEO Strategy", "Social Media", "Content Marketing", "Analytics"
• Petunjuk harga: "Mulai dari 5 juta/bulan"
• Konsistensi dalam format dan styling

Hover Effects Implementation

• Elevasi card pada hover: hover:shadow-2xl
• Efek scale yang halus: hover:scale-105
• Transisi yang mulus: transition-all duration-300
• Perubahan warna background: hover:bg-gray-50

Typography Hierarchy dalam Cards

• Title card: text-xl font-bold text-gray-900
• Description: text-gray-600 mb-4
• Daftar fitur: text-sm text-gray-500
• Harga: text-lg font-semibold text-blue-600

Responsive Behavior

• Desktop: 3 kolom bersebelahan
• Tablet: 2 kolom atau tetap 3 dengan penyesuaian spasi
• Mobile: 1 kolom lebar penuh
• Spasi yang konsisten di semua breakpoints

Card Interactive Elements

• CTA buttons dengan styling yang konsisten
• Hover states untuk buttons: hover:bg-blue-700
• Focus states untuk accessibility
• Active states untuk umpan balik pengguna yang lebih baik

Visual Enhancement

• Tinggi card yang konsisten dengan flexbox
• Spasi yang tepat antar elemen
• Skema warna yang selaras dengan brand
• Typography yang terbaca dan hierarkis

Icon Integration (Heroicons via CDN)

Untuk membuat services cards lebih visual dan menarik, kita akan mengintegrasikan icons dari Heroicons. Icons ini akan membantu users dengan cepat mengidentifikasi setiap service dan membuat design lebih professional.

Prompt Claude Code untuk Icon Integration

"Integrate Heroicons ke services section BuildWithAngga. Gunakan CDN link untuk
Heroicons dan pilihkan icon yang sesuai untuk setiap service: Code icon untuk
Web Development, Pencil icon untuk UI/UX Design, dan Megaphone icon untuk
Digital Marketing. Position icons di atas title setiap card dengan styling
yang consistent."

<section id="services" class="py-20 lg:py-28 bg-white">
   <div class="container mx-auto px-6 sm:px-8 lg:px-12">
      <!-- Section Header -->
      <div class="text-center mb-16 scroll-animate" data-animation="fade-up" data-delay="100">
         <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
            Layanan <span class="text-blue-600">Profesional</span>
         </h2>
         <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Solusi digital lengkap yang dirancang khusus untuk mengembangkan bisnis Anda dengan teknologi terdepan dan strategi yang terbukti efektif.
         </p>
      </div>
      <!-- Services Grid -->
      <div class="grid lg:grid-cols-3 gap-8 lg:gap-10">
         <!-- Web Development Card -->
         <div class="group bg-white rounded-2xl border border-gray-100 p-8 hover:border-blue-200 hover:shadow-xl transition-all duration-500 scroll-animate" data-animation="fade-up" data-delay="200">
            <!-- Icon -->
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
               <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
               </svg>
            </div>
            <!-- Content -->
            <div class="space-y-6">
               <div>
                  <h3 class="text-2xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-300">
                     Web Development
                  </h3>
                  <p class="text-gray-600 leading-relaxed">
                     Membangun website dan aplikasi web yang responsif, cepat, dan SEO-friendly menggunakan teknologi modern seperti React, Next.js, dan Node.js.
                  </p>
               </div>
               <!-- Key Features -->
               <div>
                  <h4 class="font-semibold text-gray-900 mb-4">Yang Anda Dapatkan:</h4>
                  <ul class="space-y-3">
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Responsive Design untuk Semua Device</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">SEO Optimization & Fast Loading</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">CMS Integration & Easy Updates</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Security & Performance Monitoring</span>
                     </li>
                  </ul>
               </div>
               <!-- Pricing Hint -->
               <div class="pt-6 border-t border-gray-100">
                  <div class="flex items-center justify-between">
                     <div>
                        <span class="text-sm text-gray-500">Mulai dari</span>
                        <div class="text-2xl font-bold text-gray-900">Rp 15jt</div>
                     </div>
                     <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium group-hover:scale-105 transform">
                     Konsultasi
                     </button>
                  </div>
               </div>
            </div>
         </div>
         <!-- UI/UX Design Card -->
         <div class="group bg-white rounded-2xl border border-gray-100 p-8 hover:border-purple-200 hover:shadow-xl transition-all duration-500 scroll-animate" data-animation="fade-up" data-delay="300">
            <!-- Icon -->
            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
               <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"></path>
               </svg>
            </div>
            <!-- Content -->
            <div class="space-y-6">
               <div>
                  <h3 class="text-2xl font-bold text-gray-900 mb-3 group-hover:text-purple-600 transition-colors duration-300">
                     UI/UX Design
                  </h3>
                  <p class="text-gray-600 leading-relaxed">
                     Menciptakan pengalaman pengguna yang intuitive dan interface yang menarik dengan pendekatan user-centered design dan riset mendalam.
                  </p>
               </div>
               <!-- Key Features -->
               <div>
                  <h4 class="font-semibold text-gray-900 mb-4">Yang Anda Dapatkan:</h4>
                  <ul class="space-y-3">
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">User Research & Persona Development</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Interactive Prototype & Wireframe</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Design System & Style Guide</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Usability Testing & Optimization</span>
                     </li>
                  </ul>
               </div>
               <!-- Pricing Hint -->
               <div class="pt-6 border-t border-gray-100">
                  <div class="flex items-center justify-between">
                     <div>
                        <span class="text-sm text-gray-500">Mulai dari</span>
                        <div class="text-2xl font-bold text-gray-900">Rp 8jt</div>
                     </div>
                     <button class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors duration-200 font-medium group-hover:scale-105 transform">
                     Konsultasi
                     </button>
                  </div>
               </div>
            </div>
         </div>
         <!-- Digital Marketing Card -->
         <div class="group bg-white rounded-2xl border border-gray-100 p-8 hover:border-green-200 hover:shadow-xl transition-all duration-500 scroll-animate" data-animation="fade-up" data-delay="400">
            <!-- Icon -->
            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
               <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46"></path>
               </svg>
            </div>
            <!-- Content -->
            <div class="space-y-6">
               <div>
                  <h3 class="text-2xl font-bold text-gray-900 mb-3 group-hover:text-green-600 transition-colors duration-300">
                     Digital Marketing
                  </h3>
                  <p class="text-gray-600 leading-relaxed">
                     Strategi pemasaran digital komprehensif untuk meningkatkan brand awareness, traffic, dan konversi dengan pendekatan data-driven.
                  </p>
               </div>
               <!-- Key Features -->
               <div>
                  <h4 class="font-semibold text-gray-900 mb-4">Yang Anda Dapatkan:</h4>
                  <ul class="space-y-3">
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">SEO & Content Marketing Strategy</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Social Media Management & Ads</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Google Ads & PPC Campaign</span>
                     </li>
                     <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Analytics & Performance Report</span>
                     </li>
                  </ul>
               </div>
               <!-- Pricing Hint -->
               <div class="pt-6 border-t border-gray-100">
                  <div class="flex items-center justify-between">
                     <div>
                        <span class="text-sm text-gray-500">Mulai dari</span>
                        <div class="text-2xl font-bold text-gray-900">Rp 5jt</div>
                     </div>
                     <button class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors duration-200 font-medium group-hover:scale-105 transform">
                     Konsultasi
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Call to Action -->
      <div class="text-center mt-16 scroll-animate" data-animation="fade-up" data-delay="500">
         <h3 class="text-2xl font-bold text-gray-900 mb-4">Butuh Solusi Custom?</h3>
         <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
            Kami juga melayani project custom sesuai kebutuhan spesifik bisnis Anda. Konsultasikan kebutuhan Anda dengan tim expert kami.
         </p>
         <a href="#contact" class="inline-flex items-center bg-gray-900 text-white px-8 py-4 rounded-xl font-semibold hover:bg-gray-800 transition-colors duration-200">
            Diskusi Project Custom
            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
         </a>
      </div>
   </div>
</section>

Heroicons CDN Setup

• Sertakan Heroicons CDN di head section
• CDN link: <script src="<https://unpkg.com/[email protected]/24/outline/index.js>"></script>
• Alternatif: SVG icons langsung untuk performance yang lebih baik
• Pastikan loading yang tepat dan fallback jika CDN gagal

Icon Selection Strategy

• Web Development: <svg> dengan simbol code/bracket
• UI/UX Design: <svg> dengan pencil atau design tools
• Digital Marketing: <svg> dengan megaphone atau simbol chart
• Icons yang representatif dan mudah dikenali

Icon Styling dan Positioning

• Ukuran yang konsisten: w-12 h-12 atau w-16 h-16
• Warna yang selaras: text-blue-600 untuk konsistensi
• Posisi: center aligned di atas card title
• Margin bottom: mb-4 untuk spasi yang tepat

Icon Implementation dalam Cards

• SVG icons dengan viewBox dan paths yang tepat
• Markup semantik untuk accessibility
• Pewarisan warna dari parent elements
• Ukuran responsive jika diperlukan

Icon Hover Effects

• Perubahan warna pada card hover: group-hover:text-blue-700
• Rotasi halus: group-hover:rotate-6
• Efek scale: group-hover:scale-110
• Konsisten dengan animasi card keseluruhan

Alternative Icon Sources

• Feather Icons sebagai alternatif
• Custom SVG icons yang bermerek
• Icon fonts seperti Font Awesome
• Perbandingan performance antar pilihan

Accessibility Considerations

• Alt text atau aria-labels yang tepat untuk icons
• Pastikan icons tidak menyampaikan informasi penting sendirian
• Kontras warna yang memenuhi pedoman WCAG
• Implementasi yang ramah screen reader

Performance Optimization

• Lazy loading untuk icons jika banyak
• Optimasi SVG untuk ukuran file
• Alternatif icons berbasis CSS
• Minimalkan HTTP requests dengan icon sprites

Icon Animation Details

• Animasi entrance untuk icons
• Hover states yang halus
• Loading states jika icons dimuat secara asynchronous
• Fallback untuk koneksi lambat

Services Section Complete Implementation

• Section wrapper dengan markup semantik yang tepat
• Heading yang deskriptif dan ramah SEO
• Grid layout yang responsive dan accessible
• Desain card yang modern dan professional
• Icons yang meningkatkan daya tarik visual
• Hover effects yang menarik tapi tidak mengganggu
• Performance optimized dan kompatibel cross-browser

Content Strategy untuk Services

• Fokus pada manfaat bukan fitur
• Sertakan social proof atau petunjuk case studies
• Harga yang jelas untuk transparansi
• CTAs yang kuat dan mendorong tindakan
• Alamat pain points klien yang umum
• Tampilkan unique value propositions

Call-to-Action Strategy

• CTA utama untuk halaman service detail
• CTA sekunder untuk konsultasi
• Informasi kontak yang mudah diakses
• Multiple conversion paths untuk berbagai intensi pengguna

Contact Section

Nah, sekarang kita sampai di bagian terakhir yang super penting - contact section. Ini adalah klimaks dari perjalanan pelanggan di website kita, dimana pengunjung yang sudah tertarik dengan BuildWithAngga Digital Agency bisa menghubungi kita. Section ini harus dibuat semudah mungkin dan seramah mungkin untuk mendorong konversi.

Contact section yang efektif harus memberikan berbagai cara untuk calon klien menghubungi kita. Tidak semua orang suka mengisi form, ada yang lebih suka telepon, email langsung, atau bahkan social media. Jadi kita perlu sediakan semua opsi tersebut dengan layout yang rapi dan menarik.

Contact Form dengan Validation JavaScript

Form kontak adalah elemen utama dalam contact section. Kita akan buat form yang tidak hanya terlihat profesional, tapi juga punya validasi yang tepat untuk memastikan data yang masuk berkualitas dan lengkap.

Prompt Claude Code untuk Contact Form

"Buatkan contact form untuk BuildWithAngga Digital Agency dengan fields: name, email,
phone, subject, dan message. Include client-side validation menggunakan vanilla JavaScript.
Form harus responsive dengan TailwindCSS styling yang professional. Tambahkan success
message dan error handling yang user-friendly. Include submit button dengan loading state."

<section id="contact" class="py-20 lg:py-28 bg-gradient-to-b from-gray-50 to-white">
   <div class="container mx-auto px-6 sm:px-8 lg:px-12">
      <!-- Section Header -->
      <div class="text-center mb-16 scroll-animate" data-animation="fade-up" data-delay="100">
         <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
            Mari <span class="text-blue-600">Berkolaborasi</span>
         </h2>
         <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Siap untuk mengembangkan bisnis Anda? Konsultasikan kebutuhan digital Anda dengan tim expert kami. Kami siap membantu mewujudkan visi bisnis Anda.
         </p>
      </div>
      <!-- Contact Content Grid -->
      <div class="grid lg:grid-cols-2 gap-16 lg:gap-20 items-start">
         <!-- Contact Information -->
         <div class="space-y-8 scroll-animate" data-animation="slide-left" data-delay="200">
            <!-- Contact Intro -->
            <div>
               <h3 class="text-2xl font-bold text-gray-900 mb-4">Hubungi Kami</h3>
               <p class="text-lg text-gray-600 leading-relaxed mb-8">
                  Tim kami siap membantu Anda 24/7. Konsultasi gratis untuk semua project dan kami akan memberikan solusi terbaik untuk kebutuhan bisnis Anda.
               </p>
            </div>
            <!-- Contact Methods -->
            <div class="space-y-6">
               <!-- Email -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="300">
                  <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">Email</h4>
                     <p class="text-gray-600">[email protected]</p>
                     <p class="text-sm text-gray-500">Respon dalam 2-4 jam kerja</p>
                  </div>
               </div>
               <!-- Phone -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="400">
                  <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">Telepon</h4>
                     <p class="text-gray-600">+62 812-3456-7890</p>
                     <p class="text-sm text-gray-500">Senin - Jumat, 09:00 - 18:00 WIB</p>
                  </div>
               </div>
               <!-- WhatsApp -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="500">
                  <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.886 3.75"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">WhatsApp</h4>
                     <p class="text-gray-600">+62 812-3456-7890</p>
                     <p class="text-sm text-gray-500">Fast response untuk konsultasi</p>
                  </div>
               </div>
               <!-- Office -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="600">
                  <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">Alamat Kantor</h4>
                     <p class="text-gray-600">Jl. Sudirman No. 123<br>Jakarta Pusat, 10220</p>
                     <p class="text-sm text-gray-500">Kunjungi office kami untuk meeting</p>
                  </div>
               </div>
            </div>
            <!-- Social Media -->
            <div class="pt-8 border-t border-gray-200 scroll-animate" data-animation="fade-up" data-delay="700">
               <h4 class="font-semibold text-gray-900 mb-4">Follow Kami</h4>
               <div class="flex space-x-4">
                  <a href="#" class="w-10 h-10 bg-blue-600 text-white rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors duration-200">
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
                     </svg>
                  </a>
                  <a href="#" class="w-10 h-10 bg-blue-700 text-white rounded-lg flex items-center justify-center hover:bg-blue-800 transition-colors duration-200">
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
                     </svg>
                  </a>
                  <a href="#" class="w-10 h-10 bg-pink-500 text-white rounded-lg flex items-center justify-center hover:bg-pink-600 transition-colors duration-200">
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.042-3.441.219-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.888-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.357-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24c6.624 0 11.99-5.367 11.99-11.987C24.007 5.367 18.641.001 12.017.001z"></path>
                     </svg>
                  </a>
                  <a href="#" class="w-10 h-10 bg-red-600 text-white rounded-lg flex items-center justify-center hover:bg-red-700 transition-colors duration-200">
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path>
                     </svg>
                  </a>
               </div>
            </div>
         </div>
         <!-- Contact Form -->
         <div class="scroll-animate" data-animation="slide-right" data-delay="250">
            <div class="bg-white rounded-2xl shadow-lg p-8 lg:p-10">
               <h3 class="text-2xl font-bold text-gray-900 mb-2">Kirim Pesan</h3>
               <p class="text-gray-600 mb-8">Isi form di bawah dan kami akan merespon dalam 24 jam</p>
               <!-- Success Message (Hidden by default) -->
               <div id="success-message" class="hidden bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
                  <div class="flex items-center">
                     <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
                     <p class="text-green-700 font-medium">Pesan Anda berhasil dikirim! Kami akan segera menghubungi Anda.</p>
                  </div>
               </div>
               <!-- Error Message (Hidden by default) -->
               <div id="error-message" class="hidden bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                  <div class="flex items-center">
                     <svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                     </svg>
                     <p class="text-red-700 font-medium" id="error-text">Terjadi kesalahan. Silakan coba lagi.</p>
                  </div>
               </div>
               <!-- Contact Form -->
               <form id="contact-form" class="space-y-6">
                  <!-- Name Field -->
                  <div>
                     <label for="name" class="block text-sm font-semibold text-gray-900 mb-2">
                     Nama Lengkap <span class="text-red-500">*</span>
                     </label>
                     <input type="text" id="name" name="name" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                        placeholder="Masukkan nama lengkap Anda">
                     <div class="error-message hidden text-red-500 text-sm mt-1" id="name-error"></div>
                  </div>
                  <!-- Email and Phone Row -->
                  <div class="grid sm:grid-cols-2 gap-6">
                     <!-- Email Field -->
                     <div>
                        <label for="email" class="block text-sm font-semibold text-gray-900 mb-2">
                        Email <span class="text-red-500">*</span>
                        </label>
                        <input type="email" id="email" name="email" required
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                           placeholder="[email protected]">
                        <div class="error-message hidden text-red-500 text-sm mt-1" id="email-error"></div>
                     </div>
                     <!-- Phone Field -->
                     <div>
                        <label for="phone" class="block text-sm font-semibold text-gray-900 mb-2">
                        Nomor Telepon <span class="text-red-500">*</span>
                        </label>
                        <input type="tel" id="phone" name="phone" required
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                           placeholder="+62 812-3456-7890">
                        <div class="error-message hidden text-red-500 text-sm mt-1" id="phone-error"></div>
                     </div>
                  </div>
                  <!-- Subject Field -->
                  <div>
                     <label for="subject" class="block text-sm font-semibold text-gray-900 mb-2">
                     Subjek <span class="text-red-500">*</span>
                     </label>
                     <select id="subject" name="subject" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
                        <option value="">Pilih layanan yang Anda butuhkan</option>
                        <option value="web-development">Web Development</option>
                        <option value="ui-ux-design">UI/UX Design</option>
                        <option value="digital-marketing">Digital Marketing</option>
                        <option value="mobile-app">Mobile App Development</option>
                        <option value="consultation">Konsultasi Umum</option>
                        <option value="partnership">Partnership</option>
                        <option value="other">Lainnya</option>
                     </select>
                     <div class="error-message hidden text-red-500 text-sm mt-1" id="subject-error"></div>
                  </div>
                  <!-- Message Field -->
                  <div>
                     <label for="message" class="block text-sm font-semibold text-gray-900 mb-2">
                     Pesan <span class="text-red-500">*</span>
                     </label>
                     <textarea id="message" name="message" rows="5" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 resize-none"
                        placeholder="Ceritakan tentang project atau kebutuhan bisnis Anda secara detail..."></textarea>
                     <div class="error-message hidden text-red-500 text-sm mt-1" id="message-error"></div>
                     <p class="text-sm text-gray-500 mt-2">Minimal 20 karakter</p>
                  </div>
                  <!-- Submit Button -->
                  <div class="pt-4">
                     <button type="submit" id="submit-btn"
                        class="w-full bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 disabled:bg-gray-400 disabled:cursor-not-allowed transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                        <span id="submit-text">Kirim Pesan</span>
                        <span id="loading-text" class="hidden">
                           <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24">
                              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                           </svg>
                           Mengirim...
                        </span>
                     </button>
                  </div>
                  <!-- Privacy Notice -->
                  <div class="pt-4 border-t border-gray-100">
                     <p class="text-sm text-gray-500 leading-relaxed">
                        Dengan mengirim pesan ini, Anda setuju bahwa kami akan menghubungi Anda untuk memberikan informasi terkait layanan kami. Data Anda akan kami jaga kerahasiaannya sesuai dengan kebijakan privasi kami.
                     </p>
                  </div>
               </form>
            </div>
         </div>
      </div>
      <!-- Additional Contact CTA -->
      <div class="text-center mt-20 scroll-animate" data-animation="fade-up" data-delay="600">
         <div class="bg-blue-600 rounded-2xl p-8 lg:p-12 text-white">
            <h3 class="text-2xl lg:text-3xl font-bold mb-4">
               Butuh Respons Lebih Cepat?
            </h3>
            <p class="text-blue-100 mb-8 max-w-2xl mx-auto">
               Untuk konsultasi langsung dan respons cepat, hubungi kami melalui WhatsApp atau telepon. Tim kami siap membantu Anda kapan saja.
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
               <a href="<https://wa.me/6281234567890>" target="_blank" 
                  class="inline-flex items-center bg-green-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-600 transition-colors duration-200">
                  <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.886 3.75"></path>
                  </svg>
                  Chat WhatsApp
               </a>
               <a href="tel:+6281234567890" 
                  class="inline-flex items-center bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-colors duration-200">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                  </svg>
                  Telepon Sekarang
               </a>
            </div>
         </div>
      </div>
   </div>
</section>

Form Structure dan Layout

• Container form dengan grid layout 2 kolom untuk desktop
• Kolom kiri: form fields dengan proper spacing
• Kolom kanan: contact information dan company details
• Mobile layout: single column dengan form di atas, info di bawah

Form Fields Implementation

• Name field: <input type="text" required> dengan placeholder "Nama Lengkap"
• Email field: <input type="email" required> dengan validasi format email
• Phone field: <input type="tel"> dengan format Indonesia (+62)
• Subject field: <select> dengan pilihan yang sudah ditentukan atau input kustom
• Message field: <textarea rows="5"> dengan penghitung karakter

TailwindCSS Form Styling

• Input styling: border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500
• Label styling: block text-sm font-medium text-gray-700 mb-2
• Error state styling: border-red-500 focus:ring-red-500
• Success state styling: border-green-500 focus:ring-green-500

JavaScript Validation Logic

• Validasi real-time pada blur event setiap field
• Validasi format email dengan regex pattern
• Validasi nomor telepon untuk format Indonesia
• Validasi required fields dengan umpan balik visual
• Batas karakter untuk message field dengan counter langsung

Validation Functions

function validateEmail(email) {
  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
  return emailRegex.test(email);
}

function validatePhone(phone) {
  const phoneRegex = /^(\\+62|62|0)[0-9]{9,13}$/;
  return phoneRegex.test(phone);
}

function showError(field, message) {
  // Tampilkan pesan error dan ubah styling
}

Form Submission Handling

• Cegah default form submission untuk penanganan kustom
• Tampilkan loading state pada submit button
• Kumpulkan dan validasi semua data form
• Pesan sukses dengan auto-clear form
• Penanganan error untuk masalah jaringan atau validation failures

Loading State Implementation

• Perubahan teks button: "Kirim Pesan" → "Mengirim..."
• Spinner icon atau animasi loading
• Nonaktifkan button untuk mencegah double submission
• Form fields dinonaktifkan selama proses submission

Success dan Error Messages

• Success: "Terima kasih! Pesan Anda sudah dikirim. Kami akan merespon dalam 24 jam."
• Pesan error yang spesifik untuk setiap validation failure
• Network error: "Terjadi kesalahan. Silakan coba lagi atau hubungi kami langsung."
• Posisi pesan yang tidak mengganggu pengalaman pengguna

Form Accessibility Features

• Label yang tepat untuk semua form fields
• ARIA attributes untuk pesan error
• Navigasi keyboard yang lancar
• Pengumuman error yang ramah screen reader
• Manajemen fokus untuk kegunaan yang lebih baik

Anti-Spam Measures

• Simple honeypot field yang tersembunyi dari users
• Rate limiting untuk mencegah form spam
• Validasi dasar untuk mendeteksi bot submissions
• Opsional: integrasi reCAPTCHA untuk keamanan ekstra

Social Media Links

Selain contact form, kita juga perlu sediakan social media links untuk BuildWithAngga. Banyak calon klien yang lebih suka melihat portfolio atau menghubungi via social media sebelum mengisi form formal.

Prompt Claude Code untuk Social Media Links

"Tambahkan social media links section untuk BuildWithAngga Digital Agency. Include
Instagram, LinkedIn, Twitter, dan WhatsApp dengan icons dari Heroicons. Styling
harus consistent dengan overall design theme. Add hover effects dan proper spacing.
Position di contact section atau sebagai sticky floating buttons."

<!-- Contact Section -->
<section id="contact" class="py-20 lg:py-28 bg-gradient-to-b from-gray-50 to-white">
   <div class="container mx-auto px-6 sm:px-8 lg:px-12">
      <!-- Section Header -->
      <div class="text-center mb-16 scroll-animate" data-animation="fade-up" data-delay="100">
         <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
            Mari <span class="text-blue-600">Berkolaborasi</span>
         </h2>
         <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Siap untuk mengembangkan bisnis Anda? Konsultasikan kebutuhan digital Anda dengan tim expert kami. Kami siap membantu mewujudkan visi bisnis Anda.
         </p>
      </div>
      <!-- Contact Content Grid -->
      <div class="grid lg:grid-cols-2 gap-16 lg:gap-20 items-start">
         <!-- Contact Information -->
         <div class="space-y-8 scroll-animate" data-animation="slide-left" data-delay="200">
            <!-- Contact Intro -->
            <div>
               <h3 class="text-2xl font-bold text-gray-900 mb-4">Hubungi Kami</h3>
               <p class="text-lg text-gray-600 leading-relaxed mb-8">
                  Tim kami siap membantu Anda 24/7. Konsultasi gratis untuk semua project dan kami akan memberikan solusi terbaik untuk kebutuhan bisnis Anda.
               </p>
            </div>
            <!-- Contact Methods -->
            <div class="space-y-6">
               <!-- Email -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="300">
                  <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">Email</h4>
                     <p class="text-gray-600">[email protected]</p>
                     <p class="text-sm text-gray-500">Respon dalam 2-4 jam kerja</p>
                  </div>
               </div>
               <!-- Phone -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="400">
                  <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">Telepon</h4>
                     <p class="text-gray-600">+62 812-3456-7890</p>
                     <p class="text-sm text-gray-500">Senin - Jumat, 09:00 - 18:00 WIB</p>
                  </div>
               </div>
               <!-- WhatsApp -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="500">
                  <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.886 3.75"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">WhatsApp</h4>
                     <p class="text-gray-600">+62 812-3456-7890</p>
                     <p class="text-sm text-gray-500">Fast response untuk konsultasi</p>
                  </div>
               </div>
               <!-- Office -->
               <div class="flex items-start space-x-4 scroll-animate" data-animation="fade-up" data-delay="600">
                  <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
                     <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                     </svg>
                  </div>
                  <div>
                     <h4 class="font-semibold text-gray-900 mb-1">Alamat Kantor</h4>
                     <p class="text-gray-600">Jl. Sudirman No. 123<br>Jakarta Pusat, 10220</p>
                     <p class="text-sm text-gray-500">Kunjungi office kami untuk meeting</p>
                  </div>
               </div>
            </div>
            <!-- Social Media -->
            <div class="pt-8 border-t border-gray-200 scroll-animate" data-animation="fade-up" data-delay="700">
               <h4 class="font-semibold text-gray-900 mb-6">Follow Kami</h4>
               <div class="grid grid-cols-2 gap-4">
                  <!-- Instagram -->
                  <a href="<https://instagram.com/buildwithangga>" target="_blank" 
                     class="group flex items-center space-x-3 p-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-xl hover:from-pink-600 hover:to-purple-700 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                     <div class="w-8 h-8 flex items-center justify-center">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                           <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                           <path d="m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                           <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                        </svg>
                     </div>
                     <div class="flex-1">
                        <div class="font-semibold text-sm">Instagram</div>
                        <div class="text-xs opacity-90">@buildwithangga</div>
                     </div>
                     <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                     </svg>
                  </a>
                  <!-- LinkedIn -->
                  <a href="<https://linkedin.com/company/buildwithangga>" target="_blank" 
                     class="group flex items-center space-x-3 p-4 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                     <div class="w-8 h-8 flex items-center justify-center">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                           <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
                        </svg>
                     </div>
                     <div class="flex-1">
                        <div class="font-semibold text-sm">LinkedIn</div>
                        <div class="text-xs opacity-90">BuildWithAngga</div>
                     </div>
                     <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                     </svg>
                  </a>
                  <!-- Twitter -->
                  <a href="<https://twitter.com/buildwithangga>" target="_blank" 
                     class="group flex items-center space-x-3 p-4 bg-black text-white rounded-xl hover:bg-gray-800 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                     <div class="w-8 h-8 flex items-center justify-center">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                           <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
                        </svg>
                     </div>
                     <div class="flex-1">
                        <div class="font-semibold text-sm">Twitter</div>
                        <div class="text-xs opacity-90">@buildwithangga</div>
                     </div>
                     <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                     </svg>
                  </a>
                  <!-- WhatsApp -->
                  <a href="<https://wa.me/6281234567890>" target="_blank" 
                     class="group flex items-center space-x-3 p-4 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                     <div class="w-8 h-8 flex items-center justify-center">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                           <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.886 3.75"></path>
                        </svg>
                     </div>
                     <div class="flex-1">
                        <div class="font-semibold text-sm">WhatsApp</div>
                        <div class="text-xs opacity-90">Chat Langsung</div>
                     </div>
                     <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                     </svg>
                  </a>
               </div>
            </div>
         </div>
         <!-- Contact Form -->
         <div class="scroll-animate" data-animation="slide-right" data-delay="250">
            <div class="bg-white rounded-2xl shadow-lg p-8 lg:p-10">
               <h3 class="text-2xl font-bold text-gray-900 mb-2">Kirim Pesan</h3>
               <p class="text-gray-600 mb-8">Isi form di bawah dan kami akan merespon dalam 24 jam</p>
               <!-- Success Message (Hidden by default) -->
               <div id="success-message" class="hidden bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
                  <div class="flex items-center">
                     <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                     </svg>
                     <p class="text-green-700 font-medium">Pesan Anda berhasil dikirim! Kami akan segera menghubungi Anda.</p>
                  </div>
               </div>
               <!-- Error Message (Hidden by default) -->
               <div id="error-message" class="hidden bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                  <div class="flex items-center">
                     <svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                     </svg>
                     <p class="text-red-700 font-medium" id="error-text">Terjadi kesalahan. Silakan coba lagi.</p>
                  </div>
               </div>
               <!-- Contact Form -->
               <form id="contact-form" class="space-y-6">
                  <!-- Name Field -->
                  <div>
                     <label for="name" class="block text-sm font-semibold text-gray-900 mb-2">
                     Nama Lengkap <span class="text-red-500">*</span>
                     </label>
                     <input type="text" id="name" name="name" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                        placeholder="Masukkan nama lengkap Anda">
                     <div class="error-message hidden text-red-500 text-sm mt-1" id="name-error"></div>
                  </div>
                  <!-- Email and Phone Row -->
                  <div class="grid sm:grid-cols-2 gap-6">
                     <!-- Email Field -->
                     <div>
                        <label for="email" class="block text-sm font-semibold text-gray-900 mb-2">
                        Email <span class="text-red-500">*</span>
                        </label>
                        <input type="email" id="email" name="email" required
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                           placeholder="[email protected]">
                        <div class="error-message hidden text-red-500 text-sm mt-1" id="email-error"></div>
                     </div>
                     <!-- Phone Field -->
                     <div>
                        <label for="phone" class="block text-sm font-semibold text-gray-900 mb-2">
                        Nomor Telepon <span class="text-red-500">*</span>
                        </label>
                        <input type="tel" id="phone" name="phone" required
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                           placeholder="+62 812-3456-7890">
                        <div class="error-message hidden text-red-500 text-sm mt-1" id="phone-error"></div>
                     </div>
                  </div>
                  <!-- Subject Field -->
                  <div>
                     <label for="subject" class="block text-sm font-semibold text-gray-900 mb-2">
                     Subjek <span class="text-red-500">*</span>
                     </label>
                     <select id="subject" name="subject" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
                        <option value="">Pilih layanan yang Anda butuhkan</option>
                        <option value="web-development">Web Development</option>
                        <option value="ui-ux-design">UI/UX Design</option>
                        <option value="digital-marketing">Digital Marketing</option>
                        <option value="mobile-app">Mobile App Development</option>
                        <option value="consultation">Konsultasi Umum</option>
                        <option value="partnership">Partnership</option>
                        <option value="other">Lainnya</option>
                     </select>
                     <div class="error-message hidden text-red-500 text-sm mt-1" id="subject-error"></div>
                  </div>
                  <!-- Message Field -->
                  <div>
                     <label for="message" class="block text-sm font-semibold text-gray-900 mb-2">
                     Pesan <span class="text-red-500">*</span>
                     </label>
                     <textarea id="message" name="message" rows="5" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 resize-none"
                        placeholder="Ceritakan tentang project atau kebutuhan bisnis Anda secara detail..."></textarea>
                     <div class="error-message hidden text-red-500 text-sm mt-1" id="message-error"></div>
                     <p class="text-sm text-gray-500 mt-2">Minimal 20 karakter</p>
                  </div>
                  <!-- Submit Button -->
                  <div class="pt-4">
                     <button type="submit" id="submit-btn"
                        class="w-full bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 disabled:bg-gray-400 disabled:cursor-not-allowed transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                        <span id="submit-text">Kirim Pesan</span>
                        <span id="loading-text" class="hidden">
                           <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24">
                              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                           </svg>
                           Mengirim...
                        </span>
                     </button>
                  </div>
                  <!-- Privacy Notice -->
                  <div class="pt-4 border-t border-gray-100">
                     <p class="text-sm text-gray-500 leading-relaxed">
                        Dengan mengirim pesan ini, Anda setuju bahwa kami akan menghubungi Anda untuk memberikan informasi terkait layanan kami. Data Anda akan kami jaga kerahasiaannya sesuai dengan kebijakan privasi kami.
                     </p>
                  </div>
               </form>
            </div>
         </div>
      </div>
      <!-- Additional Contact CTA -->
      <div class="text-center mt-20 scroll-animate" data-animation="fade-up" data-delay="600">
         <div class="bg-blue-600 rounded-2xl p-8 lg:p-12 text-white">
            <h3 class="text-2xl lg:text-3xl font-bold mb-4">
               Butuh Respons Lebih Cepat?
            </h3>
            <p class="text-blue-100 mb-8 max-w-2xl mx-auto">
               Untuk konsultasi langsung dan respons cepat, hubungi kami melalui WhatsApp atau telepon. Tim kami siap membantu Anda kapan saja.
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
               <a href="<https://wa.me/6281234567890>" target="_blank" 
                  class="inline-flex items-center bg-green-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-600 transition-colors duration-200">
                  <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.886 3.75"></path>
                  </svg>
                  Chat WhatsApp
               </a>
               <a href="tel:+6281234567890" 
                  class="inline-flex items-center bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-colors duration-200">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                  </svg>
                  Telepon Sekarang
               </a>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- Floating Social Media Buttons -->
<div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-40 hidden lg:block">
   <div class="flex flex-col space-y-3">
      <!-- Instagram Float -->
      <a href="<https://instagram.com/buildwithangga>" target="_blank" 
         class="group w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-full flex items-center justify-center hover:from-pink-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-110 hover:-translate-x-1 shadow-lg hover:shadow-xl"
         data-tooltip="Follow Instagram">
         <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
            <path d="m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
         </svg>
      </a>
      <!-- LinkedIn Float -->
      <a href="<https://linkedin.com/company/buildwithangga>" target="_blank" 
         class="group w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-all duration-300 transform hover:scale-110 hover:-translate-x-1 shadow-lg hover:shadow-xl"
         data-tooltip="Connect LinkedIn">
         <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
         </svg>
      </a>
      <!-- Twitter Float -->
      <a href="<https://twitter.com/buildwithangga>" target="_blank" 
         class="group w-12 h-12 bg-black text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-all duration-300 transform hover:scale-110 hover:-translate-x-1 shadow-lg hover:shadow-xl"
         data-tooltip="Follow Twitter">
         <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
         </svg>
      </a>
      <!-- WhatsApp Float -->
      <a href="<https://wa.me/6281234567890>" target="_blank" 
         class="group w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center hover:bg-green-600 transition-all duration-300 transform hover:scale-110 hover:-translate-x-1 shadow-lg hover:shadow-xl animate-pulse"
         data-tooltip="Chat WhatsApp">
         <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.886 3.75"></path>
         </svg>
      </a>
   </div>
</div>

Social Media Platforms Strategy

• Instagram: @buildwithangga untuk portfolio visual dan behind-the-scenes
• LinkedIn: halaman perusahaan untuk professional networking dan articles
• Twitter: @buildwithangga untuk industry insights dan quick updates
• WhatsApp: direct messaging untuk konsultasi dan pertanyaan cepat

Social Media Icons Implementation

• Menggunakan Heroicons atau custom SVG icons
• Ukuran icon: w-6 h-6 untuk inline links atau w-8 h-8 untuk standalone
• Skema warna yang konsisten dengan identitas brand
• Hover effects yang halus tapi menarik

Link Styling dan Layout

• Layout horizontal untuk desktop: bersebelahan dengan spasi yang tepat
• Vertical stack untuk mobile: target sentuh yang lebih baik
• Container dengan background dan padding untuk pengelompokan visual
• Spasi yang tepat dengan margin dan gap utilities

Hover Effects untuk Social Links

• Perubahan warna ke brand colors masing-masing platform
• Scale effect: hover:scale-110 untuk umpan balik
• Perubahan warna background untuk penekanan
• Transisi yang halus: transition-all duration-200

Platform-Specific Styling

• Instagram: hover color hover:text-pink-500
• LinkedIn: hover color hover:text-blue-600
• Twitter: hover color hover:text-sky-500
• WhatsApp: hover color hover:text-green-500

Social Media Links Positioning

• Dalam contact section sebagai bagian dari info kontak
• Footer section untuk akses global
• Opsional: floating social media bar yang sticky
• Header navigation sebagai menu sekunder

WhatsApp Integration

• Link WhatsApp langsung dengan pesan yang sudah diisi
• Format: https://wa.me/6281234567890?text=Halo%20BuildWithAngga...
• Pesan kustom untuk konteks bisnis
• Dioptimalkan untuk mobile untuk pengalaman pengguna yang lebih baik

Link Accessibility

• Teks deskriptif atau aria-labels untuk screen readers
• Focus states yang tepat untuk navigasi keyboard
• Indikator link eksternal jika sesuai
• Hierarki visual dan pengelompokan yang jelas

Social Proof Integration

• Jumlah follower jika mengesankan dan diperbarui secara teratur
• Recent posts atau integrasi testimonials
• Embed social media feed untuk Instagram
• Link ke konten spesifik atau portfolios

Contact Section Complete Layout

• Section header dengan title dan subtitle yang jelas
• Layout dua kolom: form kiri, info kontak kanan
• Informasi kontak: alamat, telepon, email, jam operasional
• Social media links dengan pengelompokan yang tepat
• Call-to-action yang mendorong berbagai metode kontak

Contact Information Display

• Alamat kantor dengan integrasi Google Maps
• Nomor telepon dengan fungsi click-to-call
• Alamat email dengan link mailto
• Jam kerja dengan informasi timezone
• Ekspektasi waktu respon untuk berbagai channel

Mobile Optimization

• Layout single column untuk keterbacaan yang lebih baik
• Target sentuh yang lebih besar untuk elemen form dan links
• Navigasi yang disederhanakan untuk UX mobile yang lebih baik
• Loading cepat dengan gambar dan aset yang dioptimalkan

Performance Considerations

• Validasi form yang tidak memblokir UI
• Lazy loading untuk integrasi maps
• Icons dan gambar yang dioptimalkan
• JavaScript minimal untuk page load yang lebih cepat

Analytics Integration

• Pelacakan form submission untuk analisis konversi
• Pelacakan klik social media
• Heatmaps interaksi pengguna untuk insight optimasi
• Setup A/B testing untuk peningkatan konversi form

Footer

Nah, sampai juga kita di bagian paling akhir dari website kita - footer section. Meskipun letaknya di bawah dan sering dianggap kurang penting, footer sebenarnya punya peran yang cukup vital dalam pengalaman pengguna. Footer yang baik bisa memberikan informasi tambahan, kredibilitas, dan navigasi alternatif untuk pengunjung.

Untuk BuildWithAngga Digital Agency, kita akan buat footer yang sederhana tapi professional. Nggak perlu terlalu kompleks, yang penting ada elemen-elemen penting yang bikin website kita terlihat lengkap dan dapat dipercaya.

Simple Footer dengan Copyright

Footer yang kita buat akan fokus pada kesederhanaan dan fungsionalitas. Kita mau pengunjung bisa dengan mudah menemukan informasi penting tanpa merasa kewalahan dengan terlalu banyak links atau konten.

Prompt Claude Code untuk Footer

"Buatkan footer sederhana untuk BuildWithAngga Digital Agency. Include copyright notice
dengan tahun dinamis, quick navigation links, contact information ringkas, dan social
media icons. Gunakan TailwindCSS dengan background dark theme dan typography yang
readable. Layout responsive dengan 3 kolom untuk desktop dan single column untuk mobile."

<!-- Footer -->
<footer class="bg-gray-900 text-white">
   <div class="container mx-auto px-6 sm:px-8 lg:px-12 py-12 lg:py-16">
      <!-- Main Footer Content -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
         <!-- Company Information -->
         <div class="space-y-6">
            <!-- Logo -->
            <div class="flex items-center space-x-3">
               <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                  <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd"></path>
                  </svg>
               </div>
               <div>
                  <h3 class="text-xl font-bold">
                     <span class="text-blue-400">Build</span><span class="text-white">WithAngga</span>
                  </h3>
                  <p class="text-gray-400 text-sm">Digital Agency</p>
               </div>
            </div>
            <!-- Description -->
            <p class="text-gray-300 leading-relaxed">
               Solusi digital terpercaya untuk mengembangkan bisnis Anda dengan teknologi terdepan dan strategi pemasaran yang efektif.
            </p>
            <!-- Social Media -->
            <div>
               <h4 class="text-white font-semibold mb-3">Follow Kami</h4>
               <div class="flex space-x-3">
                  <a href="<https://instagram.com/buildwithangga>" target="_blank" 
                     class="w-10 h-10 bg-gray-800 hover:bg-gradient-to-r hover:from-pink-500 hover:to-purple-600 text-gray-300 hover:text-white rounded-lg flex items-center justify-center transition-all duration-300 transform hover:scale-110">
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                        <path d="m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                     </svg>
                  </a>
                  <a href="<https://linkedin.com/company/buildwithangga>" target="_blank" 
                     class="w-10 h-10 bg-gray-800 hover:bg-blue-600 text-gray-300 hover:text-white rounded-lg flex items-center justify-center transition-all duration-300 transform hover:scale-110">
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
                     </svg>
                  </a>
                  <a href="<https://twitter.com/buildwithangga>" target="_blank" 
                     class="w-10 h-10 bg-gray-800 hover:bg-black text-gray-300 hover:text-white rounded-lg flex items-center justify-center transition-all duration-300 transform hover:scale-110">
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
                     </svg>
                  </a>
                  <a href="<https://wa.me/6281234567890>" target="_blank" 
                     class="w-10 h-10 bg-gray-800 hover:bg-green-500 text-gray-300 hover:text-white rounded-lg flex items-center justify-center transition-all duration-300 transform hover:scale-110">
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.886 3.75"></path>
                     </svg>
                  </a>
               </div>
            </div>
         </div>
         <!-- Quick Navigation -->
         <div class="space-y-6">
            <h4 class="text-white font-semibold text-lg">Navigasi Cepat</h4>
            <div class="grid grid-cols-2 gap-4">
               <div class="space-y-3">
                  <a href="#home" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  Home
                  </a>
                  <a href="#about" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  About
                  </a>
                  <a href="#services" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  Services
                  </a>
                  <a href="#contact" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  Contact
                  </a>
               </div>
               <div class="space-y-3">
                  <a href="#" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  Portfolio
                  </a>
                  <a href="#" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  Blog
                  </a>
                  <a href="#" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  Career
                  </a>
                  <a href="#" class="block text-gray-300 hover:text-blue-400 transition-colors duration-200">
                  Privacy Policy
                  </a>
               </div>
            </div>
         </div>
         <!-- Contact Information -->
         <div class="space-y-6">
            <h4 class="text-white font-semibold text-lg">Hubungi Kami</h4>
            <div class="space-y-4">
               <!-- Email -->
               <div class="flex items-start space-x-3">
                  <svg class="w-5 h-5 text-blue-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                  </svg>
                  <div>
                     <p class="text-gray-300">[email protected]</p>
                     <p class="text-gray-400 text-sm">Respon dalam 2-4 jam</p>
                  </div>
               </div>
               <!-- Phone -->
               <div class="flex items-start space-x-3">
                  <svg class="w-5 h-5 text-blue-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                  </svg>
                  <div>
                     <p class="text-gray-300">+62 812-3456-7890</p>
                     <p class="text-gray-400 text-sm">Senin - Jumat, 09:00 - 18:00</p>
                  </div>
               </div>
               <!-- Address -->
               <div class="flex items-start space-x-3">
                  <svg class="w-5 h-5 text-blue-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  </svg>
                  <div>
                     <p class="text-gray-300">Jl. Sudirman No. 123</p>
                     <p class="text-gray-300">Jakarta Pusat, 10220</p>
                     <p class="text-gray-400 text-sm">Indonesia</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Footer Bottom -->
      <div class="border-t border-gray-800 mt-12 pt-8">
         <div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
            <!-- Copyright -->
            <div class="text-center md:text-left">
               <p class="text-gray-400">
                  &copy; <span id="current-year">2024</span> BuildWithAngga Digital Agency. All rights reserved.
               </p>
            </div>
            <!-- Additional Links -->
            <div class="flex items-center space-x-6 text-sm">
               <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">
               Terms of Service
               </a>
               <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">
               Privacy Policy
               </a>
               <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">
               Sitemap
               </a>
            </div>
         </div>
      </div>
   </div>
</footer>

Footer Structure dan Layout

• Container dengan background gelap: bg-gray-900 text-white
• Layout grid untuk desktop: grid grid-cols-1 md:grid-cols-3 gap-8
• Section pertama: company info dan tagline
• Section kedua: quick navigation links
• Section ketiga: contact info dan social media

Company Information Section

• Logo BuildWithAngga dalam versi putih atau kontras tinggi
• Tagline singkat: "Your Trusted Digital Transformation Partner"
• Deskripsi singkat tentang misi perusahaan
• Posisi di kolom kiri untuk hierarki visual yang baik

Quick Navigation Links

• Links ke halaman utama: Home, About, Services, Contact
• Links ke halaman tambahan: Portfolio, Blog, Career (jika ada)
• Styling links: text-gray-300 hover:text-white transition-colors duration-200
• Daftar vertikal untuk keterbacaan yang lebih baik

Contact Information Compact

• Alamat kantor dalam format singkat: "Jakarta, Indonesia"
• Email: [email protected]
• Phone: +62 812-3456-7890
• Jam operasional: "Mon-Fri 9AM-6PM WIB"

Copyright Notice Implementation

• Teks copyright dengan tahun dinamis menggunakan JavaScript
• Format: "© 2024 BuildWithAngga Digital Agency. All rights reserved."
• Posisi di bottom center atau sebagai row terpisah
• Typography yang halus: text-sm text-gray-400

Dynamic Year JavaScript

// Perbarui tahun copyright secara otomatis
document.addEventListener('DOMContentLoaded', function() {
    const currentYear = new Date().getFullYear();
    const copyrightElement = document.getElementById('copyright-year');
    if (copyrightElement) {
        copyrightElement.textContent = currentYear;
    }
});

Social Media Integration

• Icons untuk Instagram, LinkedIn, Twitter, WhatsApp
• Ukuran konsisten: w-5 h-5 untuk tampilan yang halus
• Hover effects dengan warna platform
• Layout horizontal dengan spasi yang tepat

Footer Typography Hierarchy

• Section headers: text-lg font-semibold mb-4
• Navigation links: text-sm text-gray-300
• Contact info: text-sm text-gray-300
• Copyright: text-xs text-gray-500

Responsive Behavior

• Desktop: layout tiga kolom dengan spasi yang tepat
• Tablet: layout dua kolom atau tetap tiga dengan penyesuaian
• Mobile: single column dengan alignment terpusat
• Padding dan margins yang konsisten di semua breakpoints

Footer Styling Details

• Background color: bg-gray-900 untuk professional dark theme
• Text color: text-white untuk main content, text-gray-300 untuk secondary
• Border top: border-t border-gray-800 untuk subtle separation
• Padding: py-12 px-4 untuk adequate spacing

Legal Links Section

• Links ke Privacy Policy dan Terms of Service
• Positioning di copyright row atau sebagai separate section
• Format small text dengan proper spacing
• Essential untuk business credibility

SEO Considerations

• Proper HTML structure dengan semantic markup
• Internal links untuk better site navigation
• Contact information untuk local SEO
• Structured data markup untuk business information

Performance Optimization

• Minimal JavaScript untuk copyright year update
• Optimized social media icons (SVG format)
• Lazy loading untuk non-critical elements
• Compressed images dan assets

Accessibility Features

• Kontras warna yang tepat untuk keterbacaan teks
• Focus states untuk navigation links
• Struktur yang ramah screen reader
• Dukungan navigasi keyboard

Footer Content Strategy

• Jaga konten tetap terkini dan diperbarui secara teratur
• Sertakan trust signals seperti sertifikasi atau penghargaan
• Berikan berbagai cara untuk pengguna menghubungi
• Seimbangkan antara informatif dan ringkas

Mobile-First Approach

• Ukuran link yang ramah sentuh untuk pengguna mobile
• Typography yang terbaca pada layar kecil
• Layout yang disederhanakan untuk pengalaman mobile yang lebih baik
• Loading cepat pada koneksi mobile

Footer Integration dengan Website

• Styling yang konsisten dengan tema design keseluruhan
• Spasi yang tepat dari bagian konten di atas
• Transisi visual yang halus dari konten utama
• Tidak ada perubahan warna atau style yang mencolok

Copyright Best Practices

• Sertakan tahun saat ini untuk kredibilitas
• Bahasa legal yang tepat untuk perlindungan bisnis
• Pernyataan kepemilikan yang jelas
• Tone professional yang konsisten dengan brand

Social Media Strategy dalam Footer

• Sertakan hanya akun social yang aktif dan terawat
• Branding yang konsisten di semua platform
• Konten professional yang relevan untuk audience B2B
• Pembaruan rutin untuk menjaga engagement

Footer Analytics

• Lacak klik pada navigation links
• Monitor engagement social media dari footer
• Analisis perilaku pengguna pada bagian footer
• Optimasi berdasarkan data interaksi pengguna

Footer Complete Implementation

• Struktur HTML yang bersih dengan semantik yang tepat
• Desain responsive yang bekerja pada semua perangkat
• Loading cepat dengan aset yang dioptimalkan
• Tampilan professional yang meningkatkan kredibilitas
• Maintenance mudah untuk pembaruan di masa depan

Penutup

Nah, selesai juga perjalanan vibe coding kita! Dari setup awal sampai footer yang lengkap, kita udah berhasil bikin landing page company profile untuk BuildWithAngga Digital Agency yang keren dan fungsional. Yang paling penting dari keseluruhan proses ini adalah kita belajar cara berkolaborasi efektif dengan Claude Code sebagai coding buddy yang dapat diandalkan.

Vibe coding memang bukan tentang kecepatan atau target yang tidak realistis, tapi tentang menikmati prosesnya dan membangun sesuatu yang bermakna secara bertahap. Dengan Claude Code, coding jadi lebih menyenangkan dan tidak stressful, terutama untuk pemula yang masih belajar dasarnya.

Source Code Repository

Kode lengkap dari project ini bisa kamu akses di GitHub repository:

Repository Link: https://github.com/work-bwa/vibe-code-company-profile

Repository ini berisi:

• File HTML lengkap dengan semua sections
• Styling TailwindCSS yang sudah dioptimalkan
• JavaScript untuk animasi dan validasi form
• Dokumentasi lengkap untuk setup dan kustomisasi
• Contoh prompts yang bisa kamu gunakan dengan Claude Code

Clone repository-nya dan eksperimen sendiri! Jangan lupa kasih star jika bermanfaat.

Lanjut Belajar di BuildWithAngga

Kalau kamu tertarik untuk memperdalam pemahaman tentang web development, UI/UX design, atau digital marketing, BuildWithAngga punya banyak course yang bisa membantu kamu naik level:

Recommended Learning Path:

• Frontend Web Developer: Belajar HTML, CSS, JavaScript, dan framework modern
• UI/UX Designer: Kuasai design thinking, Figma, dan metodologi user research
• Digital Marketing Specialist: SEO, strategi social media, dan optimasi konversi

Kenapa BuildWithAngga?

• Proyek hands-on dengan aplikasi dunia nyata
• Dukungan mentor yang responsif dan berpengalaman
• Komunitas yang supportif untuk networking dan kolaborasi
• Sertifikat yang diakui di industri

Cara Memulai:

1. Kunjungi buildwithangga.com
2. Jelajahi katalog course yang sesuai dengan minat kamu
3. Bergabung dengan komunitas Discord untuk networking
4. Mulai perjalanan belajar kamu dengan pendekatan berbasis project

Ingat, coding adalah skill yang berkembang seiring waktu. Terus berlatih, tetap penasaran, dan jangan takut untuk bereksperimen. Claude Code akan selalu ada sebagai teman yang membantu dalam petualangan coding kamu.

Selamat coding, dan semoga project kamu sukses!