Cara Edit dan Deploy Template Restaurant Landing Page HTML Tailwind CSS ke Vercel

Pengenalan Template Resto dari Shaynakit

Template Resto - Restaurant Landing Page adalah salah satu template HTML berkualitas dari Shaynakit yang dirancang khusus untuk bisnis restoran, kafe, atau usaha kuliner. Template ini menampilkan desain modern dan elegan yang cocok untuk mempromosikan menu, ambiance, dan layanan restoran Anda secara online.

Template ini dibangun menggunakan HTML murni yang dikombinasikan dengan framework CSS Tailwind, menjadikannya mudah untuk di-customize sesuai kebutuhan brand Anda. Dengan struktur kode yang clean dan terorganisir, template ini sangat cocok untuk developer pemula hingga menengah yang ingin membuat website restaurant dengan cepat.

Catatan Penting: Template ini dioptimalkan untuk tampilan desktop dan tidak responsive untuk perangkat mobile. Jika Anda membutuhkan versi mobile-friendly, akan diperlukan customisasi tambahan pada kode CSS.

Keunggulan Menggunakan HTML + Tailwind CSS

Mengapa memilih template berbasis HTML dan Tailwind CSS? Berikut beberapa keunggulannya:

1. Performa Super Cepat

• Website statis HTML memiliki loading time yang sangat cepat
• Tidak memerlukan database atau server-side processing
• Ideal untuk landing page dengan traffic tinggi

2. Mudah Di-customize

• Tailwind CSS menggunakan utility classes yang intuitif
• Tidak perlu menulis CSS custom dari awal
• Perubahan styling bisa dilakukan langsung di HTML

3. Maintainability Tinggi

• Kode terstruktur dan mudah dibaca
• Tidak ada dependencies yang kompleks
• Update dan maintenance lebih sederhana

4. SEO Friendly

• HTML semantic yang baik untuk search engine
• Fast loading time meningkatkan ranking SEO
• Mudah mengoptimasi meta tags dan struktur konten

5. Deployment Mudah

• Bisa di-host di berbagai platform gratis (Vercel, Netlify, GitHub Pages)
• Tidak memerlukan server khusus
• Setup yang cepat dan simple

6. Cost Effective

• Biaya hosting minimal atau bahkan gratis
• Tidak perlu membayar backend infrastructure
• Cocok untuk UMKM dengan budget terbatas

Apa yang Akan Dipelajari dalam Tutorial Ini

Dalam tutorial lengkap ini, Anda akan mempelajari step-by-step untuk mengcustomize dan deploy template restaurant Anda:

Edit dan Customisasi Template

• Memahami struktur folder dan file template
• Mengganti logo, branding, dan warna tema
• Mengedit konten navbar
• Mengupdate ads section, why us section, popular section, near you section, dan expert cheft section

Kustomisasi Styling dengan Tailwind

• Mengubah color scheme sesuai brand identity

Setup Version Control dengan Git

• Inisialisasi Git repository lokal
• Membuat repository di GitHub
• Push project ke GitHub untuk version control

Deploy ke Vercel

• Koneksi GitHub account dengan Vercel
• Konfigurasi deployment settings
• Deploy website dan mendapatkan URL live
• Auto-deployment saat update code

Target Pembaca: Tutorial ini cocok untuk Anda yang memiliki pengetahuan dasar HTML/CSS dan ingin membuat website restaurant secara cepat dengan hasil profesional.

Prasyarat:

• Pemahaman dasar HTML dan CSS
• Text editor (VS Code, Sublime Text, dll)
• Akun GitHub (gratis)
• Akun Vercel (gratis)
• Git terinstall di komputer

Estimasi Waktu: 30-60 menit untuk menyelesaikan seluruh tutorial, tergantung tingkat customisasi yang diinginkan.

Mari kita mulai dengan persiapan dan download template!

Download Template dari Shaynakit

Langkah pertama adalah mendapatkan template Resto dari Shaynakit:

1. Kunjungi Halaman Template

• Buka link: https://shaynakit.com/details/resto-restaurant-landing-page-html-tailwind-css-template
• Review preview template untuk melihat desain dan fitur yang tersedia
• Pastikan sudah login dan klik Download Now

2. Download Template

• Klik tombol Download atau Buy Now pada halaman template
• Setelah proses pembelian/download selesai, Anda akan mendapatkan file ZIP
• Simpan file ZIP di lokasi yang mudah diakses (misalnya folder Downloads)

3. Ekstrak File

• Extract file ZIP yang sudah didownload
• Anda akan mendapatkan folder bernama resto-main atau sejenisnya

Tools yang Dibutuhkan

Sebelum memulai, pastikan Anda sudah memiliki tools berikut terinstall dan siap digunakan:

Visual Studio Code (VS Code)

• Text editor untuk mengedit kode
• Sudah terinstall di komputer Anda
• Ekstensi Recommended:
  • Live Server (untuk preview lokal)
  • Tailwind CSS IntelliSense (autocomplete class Tailwind)

Git

• Version control system untuk manage code
• Sudah terinstall di komputer Anda
• Pastikan Git sudah dikonfigurasi dengan username dan email: git config --global user.name "Nama Anda"; git config --global user.email "[email protected]"

Akun GitHub

• Platform untuk hosting repository Git
• Anda sudah memiliki akun aktif
• Login di https://github.com

Akun Vercel

• Platform untuk deployment website
• Anda sudah memiliki akun aktif
• Login di https://vercel.com
• Pastikan akun Vercel sudah terkoneksi dengan GitHub

Browser Modern

• Chrome, Firefox, atau Edge untuk testing
• Developer Tools untuk debugging

Ekstrak dan Review Struktur Folder Template

Setelah ekstrak template, mari kita pahami struktur folder dan file yang ada:

resto-main/
│
├── .github/
│   └── workflows/
│       └── gh-page.yml          (BISA DIHAPUS - kita pakai Vercel)
│
├── .vscode/
│   └── settings.json            (VS Code settings)
│
├── src/
│   ├── assets/
│   │   └── images/
│   │       ├── icons/           (Icon untuk UI)
│   │       └── thumbnails/      (Gambar menu & gallery)
│   │
│   └── js/                      (JavaScript files)
│
├── .gitignore                   (File ignore untuk Git)
├── package-lock.json            (NPM dependencies lock)
├── package.json                 (NPM configuration)
├── index.html                   (File HTML utama)
├── input.css                    (Tailwind source CSS)
└── output.css                   (Compiled Tailwind CSS)

Penjelasan File dan Folder Penting

.github/workflows/gh-page.yml

• File konfigurasi untuk GitHub Pages deployment
• BISA DIHAPUS karena kita akan deploy ke Vercel, bukan GitHub Pages
• Untuk menghapus, delete seluruh folder .github

.vscode/settings.json

• Konfigurasi VS Code khusus untuk project ini
• Biasanya berisi setting untuk Tailwind IntelliSense
• Biarkan file ini tetap ada

src/assets/images/

• icons/: Berisi icon-icon kecil untuk UI (social media, features, dll)
• thumbnails/: Berisi foto-foto menu, gallery, dan hero image
• Folder ini yang akan sering Anda edit untuk mengganti gambar

src/js/

• Berisi file JavaScript untuk interaktivitas
• Misalnya: menu navigation, smooth scroll, dll
• Anda mungkin perlu edit jika ingin menambah fitur

index.html

• FILE UTAMA website Anda
• Berisi semua struktur HTML dan konten
• File ini yang paling banyak diedit

input.css

• Source file Tailwind CSS
• Berisi konfigurasi Tailwind dan custom CSS
• Edit file ini jika ingin menambah custom styling

output.css

• File CSS yang sudah di-compile dari input.css
• File ini yang di-load oleh HTML
• Tidak perlu diedit manual, akan ter-generate otomatis

package.json

• Konfigurasi NPM project
• Berisi dependencies dan scripts untuk build
• Biasanya tidak perlu diedit

.gitignore

• Daftar file/folder yang tidak akan di-push ke Git
• Biasanya berisi node_modules/, .DS_Store, dll
• Biarkan file ini tetap ada

Langkah Persiapan Akhir

1. Hapus File yang Tidak Diperlukan

# Masuk ke folder project
cd resto-main

# Hapus folder .github (opsional)
rm -rf .github

2. Buka Project di VS Code

Atau buka VS Code, File, Open Folder, Pilih folder resto-main

3. Install Dependencies (jika diperlukan)

# Jika Anda ingin rebuild Tailwind CSS
npm install

4. Preview Template Awal

• Klik kanan pada file index.html
• Pilih Open with Live Server (jika sudah install ekstensi)
• Atau langsung buka index.html di browser
• Review tampilan template sebelum diedit

Checklist Persiapan

Pastikan semua hal berikut sudah siap sebelum lanjut ke tahap editing:

• Template sudah didownload dan diekstrak
• Folder .github sudah dihapus (opsional)
• VS Code sudah dibuka dengan folder project
• Template sudah bisa dibuka di browser
• Git sudah terkonfigurasi
• Akun GitHub dan Vercel sudah siap
• Memahami struktur folder dan file utama

Setelah semua persiapan selesai, kita siap untuk mulai mengedit template di bagian selanjutnya!

Mengganti Logo dan Branding

Edit Logo di Header

Logo template terletak di bagian tengah header. Berikut cara menggantinya:

1. Siapkan Logo Anda

• Format yang direkomendasikan: SVG (untuk kualitas terbaik) atau PNG dengan background transparan
• Ukuran yang disarankan: Height 38px, width proporsional
• Simpan file logo di folder src/assets/images/icons/
• Beri nama misalnya: logo-saya.svg atau logo-saya.png

2. Buka file index.html

Cari baris kode logo di bagian header (sekitar baris 65-71):

<!-- Logo -->
<a href="./">
  <img
    src="./assets/images/icons/logo.svg"
    alt=""
    class="h-[38px] w-auto"
  />
</a>

3. Ganti Path Logo

Ubah nilai src menjadi path logo Anda:

<!-- Logo -->
<a href="./">
  <img
    src="./src/assets/images/icons/logo-saya.svg"
    alt="Nama Restaurant Anda"
    class="h-[38px] w-auto"
  />
</a>

Tips:

• Jangan lupa isi atribut alt dengan nama restaurant untuk SEO
• Jika logo Anda terlalu besar/kecil, sesuaikan class h-[38px] menjadi misalnya h-[40px] atau h-[50px]
• Untuk mengubah width secara manual, tambahkan class w-[150px] dan hapus w-auto

Mengubah Navigation Menu

Navigation menu terletak di bagian kiri header. Berikut cara mengedit menu items:

1. Edit Menu Items

Buka file index.html dan cari bagian navbar (sekitar baris 14-59):

<nav>
  <ul class="flex gap-[30px]">
    <!-- Home -->
    <li class="group flex flex-col justify-between h-[28px]">
      <a href="#" class="text-[16px] leading-[24px] font-medium">Home</a>
      <span class="transition-all duration-300 h-0.5 w-full rounded-full bg-secondary opacity-0 group-hover:opacity-100"></span>
    </li>

    <!-- Category Dropdown -->
    <li class="dropdown relative flex flex-col cursor-pointer">
      <!-- dropdown code -->
    </li>

    <!-- Services -->
    <li class="group flex flex-col justify-between h-[28px]">
      <a href="#" class="text-[16px] leading-[24px] font-medium">Services</a>
      <span class="transition-all duration-300 h-0.5 w-full rounded-full bg-secondary opacity-0 group-hover:opacity-100"></span>
    </li>

    <!-- About Us -->
    <li class="group flex flex-col justify-between h-[28px]">
      <a href="#" class="text-[16px] leading-[24px] font-medium">About us</a>
      <span class="transition-all duration-300 h-0.5 w-full rounded-full bg-secondary opacity-0 group-hover:opacity-100"></span>
    </li>
  </ul>
</nav>

2. Mengubah Text Menu

Ubah text pada tag <a> untuk menyesuaikan dengan kebutuhan:

<!-- Home -->
<li class="group flex flex-col justify-between h-[28px]">
  <a href="#home" class="text-[16px] leading-[24px] font-medium">Beranda</a>
  <span class="transition-all duration-300 h-0.5 w-full rounded-full bg-secondary opacity-0 group-hover:opacity-100"></span>
</li>

<!-- Reservasi -->
<li class="group flex flex-col justify-between h-[28px]">
  <a href="#reservation" class="text-[16px] leading-[24px] font-medium">Reservasi</a>
  <span class="transition-all duration-300 h-0.5 w-full rounded-full bg-secondary opacity-0 group-hover:opacity-100"></span>
</li>

<!-- About Us -->
<li class="group flex flex-col justify-between h-[28px]">
  <a href="#about" class="text-[16px] leading-[24px] font-medium">Tentang Kami</a>
  <span class="transition-all duration-300 h-0.5 w-full rounded-full bg-secondary opacity-0 group-hover:opacity-100"></span>
</li>

3. Edit Dropdown Category

Untuk menu dropdown Category (sekitar baris 24-48), edit items sesuai kategori menu Anda:

<!-- Category Dropdown -->
<li class="dropdown relative flex flex-col cursor-pointer">
  <div class="flex items-center h-6 w-full">
    <button type="button" class="dropdown-button text-[16px] leading-[24px] font-medium cursor-pointer w-full text-left">
      Kategori Menu
    </button>
    <div class="flex items-center justify-center h-6 w-6 shrink-0">
      <img src="./assets/images/icons/arrow_bottom.svg" alt="" class="dropdown-arrow transition-transform duration-300" />
    </div>
  </div>
  <ul class="dropdown-menu z-50 opacity-0 flex transition-all duration-300 absolute top-full left-0 mt-2 min-w-[150px] flex-col gap-1.5 bg-white rounded-xl py-2.5 shadow-lg">
    <li class="group">
      <a href="#makanan-utama" class="block py-1.5 px-5 text-[16px] leading-[24px] font-medium transition-all duration-300 hover:bg-secondary/5">
        Makanan Utama
      </a>
    </li>
    <li class="group">
      <a href="#minuman" class="block py-1.5 px-5 text-[16px] leading-[24px] font-medium transition-all duration-300 hover:bg-secondary/5">
        Minuman
      </a>
    </li>
    <li class="group">
      <a href="#dessert" class="block py-1.5 px-5 text-[16px] leading-[24px] font-medium transition-all duration-300 hover:bg-secondary/5">
        Dessert
      </a>
    </li>
    <li class="group">
      <a href="#paket" class="block py-1.5 px-5 text-[16px] leading-[24px] font-medium transition-all duration-300 hover:bg-secondary/5">
        Paket Hemat
      </a>
    </li>
  </ul>
</li>

4. Menambah Menu Item Baru

Untuk menambah menu item baru, copy struktur menu yang sudah ada dan paste setelah menu terakhir:

<!-- Promo (Menu Baru) -->
<li class="group flex flex-col justify-between h-[28px]">
  <a href="#promo" class="text-[16px] leading-[24px] font-medium">Promo</a>
  <span class="transition-all duration-300 h-0.5 w-full rounded-full bg-secondary opacity-0 group-hover:opacity-100"></span>
</li>

5. Menghapus Menu Item

Untuk menghapus menu yang tidak diperlukan, hapus seluruh tag <li>...</li> dari menu tersebut.

Tips Navigation Menu:

• Maksimal 5-6 menu items agar tidak terlalu penuh
• Gunakan nama menu yang jelas dan singkat (1-2 kata)
• Link bisa mengarah ke section dalam halaman (gunakan #id-section) atau halaman lain
• Untuk dropdown, maksimal 5-6 items agar mudah dipilih
• Test responsive dengan zoom in/out browser untuk memastikan menu tidak terpotong

Mengubah Nama Restaurant

Template ini menggunakan nama-nama restaurant di beberapa tempat. Berikut lokasi-lokasi yang perlu diubah:

1. Title Halaman

Ubah di bagian <head> (baris 5):

<title>Nama Restaurant Anda - Best Restaurant in Jakarta</title>

2. Ads Section (Slider)

Cari bagian ads section dan ubah nama restaurant pada setiap slide. Contoh pada slide pertama (sekitar baris 130):

<h2 class="text-[22px] font-semibold leading-[33px]">
  Padang Restaurant
</h2>

Ubah menjadi:

<h2 class="text-[22px] font-semibold leading-[33px]">
  Nama Restaurant Anda
</h2>

Lakukan hal yang sama untuk slide kedua dan section lainnya.

3. Popular Restaurant Section

Ubah nama-nama restaurant di bagian Popular Restaurant (sekitar baris 322-405):

<h3 class="text-lg leading-[27px] font-semibold">
  Bind Balorant
</h3>

Ganti dengan nama cabang atau brand restaurant Anda.

4. Near You Restaurant Section

Update nama restaurant di bagian Near You (sekitar baris 480-570):

<h3 class="text-lg leading-[27px] font-semibold">
  Batavia Restaurant
</h3>

5. Expert Chef Section

Ubah nama restaurant di info card chef (sekitar baris 629):

<p class="resto-name text-lg leading-[27px] font-semibold">
  Pearl Dolphin
</p>

Customisasi Warna Brand

Template ini menggunakan color scheme yang didefinisikan di file input.css. File output.css adalah hasil compile dari input.css, jadi Anda hanya perlu mengedit input.css saja.

Langkah-langkah Mengubah Warna Brand:

1. Buka file input.css

Anda akan melihat struktur seperti ini:

@import url("<https://fonts.googleapis.com/css2?family=Poppins:>...");
@import "tailwindcss";

:root {
  --background: #fafafa;
  --foreground: #232631;
  --primary: #fdc886;
  --secondary: #5a4fcf;
  --muted: #656565;
  --star: #ffb800;
  --placeholder: #858585;
}

@theme inline {
  --font-poppins: "Poppins", sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-muted: var(--muted);
  --color-star: var(--star);
  --color-placeholder: var(--placeholder);
  --drop-shadow-custom: 8px 8px 25px rgba(102, 102, 102, 0.04);
  --drop-shadow-custom2: -8px 8px 25px rgba(102, 102, 102, 0.04);
  --shadow-primary: 0 4px 10px 0 rgba(253, 200, 134, 0.8);
  --shadow-secondary: 0 4px 10px 0 rgba(90, 79, 207, 0.1);
}

2. Ubah Nilai Warna di :root

Edit nilai hex color di bagian :root. Contoh untuk brand warna hijau segar dengan secondary yang harmonis:

:root {
  --background: #fafafa;        /* Background halaman (tetap) */
  --foreground: #232631;        /* Warna teks utama (tetap) */
  --primary: #93C572;           /* Warna brand utama - UBAH INI */
  --secondary: #2C5F2D;         /* Warna aksen dark green - UBAH INI */
  --muted: #656565;             /* Warna teks secondary (opsional) */
  --star: #ffb800;              /* Warna bintang rating (opsional) */
  --placeholder: #858585;       /* Warna placeholder (tetap) */
}

Kombinasi warna ini menciptakan nuansa natural dan segar yang cocok untuk restaurant dengan konsep healthy food atau organic cuisine.

3. Update Shadow Color (Opsional)

Jika Anda mengubah warna primary, sebaiknya update juga warna shadow agar sesuai. Edit bagian --shadow-primary dan --shadow-secondary di @theme inline:

--shadow-primary: 0 4px 10px 0 rgba(147, 197, 114, 0.6);
--shadow-secondary: 0 4px 10px 0 rgba(44, 95, 45, 0.15);

Cara convert hex ke rgba:

• Primary hex: #93C572 → RGB: (147, 197, 114) → RGBA: rgba(147, 197, 114, 0.6)
• Secondary hex: #2C5F2D → RGB: (44, 95, 45) → RGBA: rgba(44, 95, 45, 0.15)

4. Rebuild CSS

Setelah edit input.css, jalankan command untuk compile ke output.css:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Command ini akan:

• Compile input.css menjadi output.css
• Mode -watch akan otomatis rebuild setiap kali ada perubahan di input.css
• Biarkan command ini tetap running selama development

5. Refresh Browser

Setelah rebuild selesai, refresh browser untuk melihat perubahan warna.

Penjelasan Warna dalam Template:

1. -primary (#fdc886) - Warna brand utama
   • Digunakan untuk: tombol CTA, background card hover, accent elements
   • Contoh penggunaan: bg-primary, text-primary, hover:shadow-primary
2. -secondary (#5a4fcf) - Warna aksen/sekunder
   • Digunakan untuk: badge, label section, tombol sekunder
   • Contoh penggunaan: bg-secondary, text-secondary
3. -foreground (#232631) - Warna teks utama
   • Untuk semua text content di halaman
4. -muted (#656565) - Warna teks muted/secondary
   • Untuk text yang kurang penting seperti lokasi, deskripsi, dll
5. -star (#ffb800) - Warna rating bintang
   • Khusus untuk rating stars
6. -background (#fafafa) - Background halaman
   • Background utama website

Tips Memilih Warna Brand:

1. Warna Primer: Pilih warna yang mencerminkan brand Anda
   • Restaurant mewah: Gold (#D4AF37), Dark Blue (#1a365d)
   • Restaurant casual: Orange (#FF6B35), Green (#52B788)
   • Restaurant modern: Black (#1a1a1a), Red (#E63946)
2. Warna Sekunder: Pilih warna komplementer atau analogous dari warna primer
3. Testing: Selalu test warna di browser untuk memastikan kontras yang baik dan readability
4. Tools: Gunakan tools seperti coolors.co atau Adobe Color untuk membuat palette yang harmonis
   • Untuk convert hex ke rgba: hextoargb.com atau tool online lainnya

Preview Perubahan:

Setelah mengubah warna dan rebuild CSS, buka index.html di browser atau Live Server untuk melihat hasilnya. Perhatikan bagian-bagian ini:

• Tombol-tombol (Make Reservation, View Details, Log In)
• Hover effects pada card dan link
• Label section (yang biasanya uppercase dengan text-secondary)
• Badge dan accent colors
• Shadow effects saat hover tombol

Jika warna kurang kontras atau sulit dibaca, sesuaikan kembali nilai di input.css dan rebuild ulang.

Mengedit Konten Ads Section (Hero Slider)

Ads Section adalah bagian slider di atas halaman yang menampilkan promosi restaurant. Template ini memiliki 2 slide yang bisa Anda edit.

Mengubah Gambar Slider

1. Siapkan Gambar Baru

Cari gambar berkualitas tinggi di Unsplash:

• Buka https://unsplash.com
• Search kata kunci: "restaurant interior", "food platter", "dining", atau "restaurant table"
• Pilih gambar dengan orientasi landscape
• Ukuran yang disarankan: minimal 1920x1080px untuk hasil optimal
• Download gambar dalam ukuran Large atau Full

2. Compress Gambar

Sebelum digunakan, compress gambar agar loading website lebih cepat:

• Buka https://compressjpeg.com
• Upload gambar yang sudah didownload
• Compress dengan quality 80-85% (balance antara ukuran dan kualitas)
• Download hasil compression
• Rename file menjadi nama yang deskriptif, contoh: hero-restaurant-1.jpg, hero-dining-2.jpg

3. Upload Gambar ke Folder

Simpan gambar hasil compress ke folder:

src/assets/images/thumbnails/

Ganti atau tambahkan file gambar di folder tersebut.

4. Edit Path Gambar di HTML

Buka file index.html dan cari bagian Ads Section (sekitar baris 86-190). Edit path gambar pada setiap slide:

Slide 1 (sekitar baris 90-95):

<!-- Item 1 -->
<div class="group swiper-slide relative !w-[1128px] !h-[564px]">
  <div class="w-full h-full rounded-3xl overflow-clip">
    <img
      src="./src/assets/images/thumbnails/hero-restaurant-1.jpg"
      alt="Interior restaurant dengan suasana elegant"
      class="object-cover w-full"
    />
  </div>

Slide 2 (sekitar baris 148-153):

<!-- Item 2 -->
<div class="group swiper-slide relative !w-[1128px] !h-[564px]">
  <div class="w-full h-full rounded-3xl overflow-clip">
    <img
      src="./src/assets/images/thumbnails/hero-dining-2.jpg"
      alt="Meja makan dengan setting elegant"
      class="object-cover w-full"
    />
  </div>

Tips Memilih Gambar:

• Pilih gambar dengan pencahayaan yang baik
• Hindari gambar yang terlalu ramai atau busy
• Pastikan ada space kosong di sisi kiri untuk info card yang muncul saat hover
• Gunakan gambar yang menampilkan suasana restaurant Anda

Mengubah Detail Restaurant di Slider

Setiap slide memiliki info card yang muncul saat hover. Edit detail berikut:

Slide 1 - Edit Info Card (sekitar baris 96-132):

<div class="absolute ... flex flex-col gap-1 ...">
  <!-- Rating -->
  <div class="flex items-center h-[27px] w-[210px]">
    <div class="flex gap-[6.5px] -mt-[3px] pr-[3px]">
      <!-- 5 bintang untuk rating 5.0, kurangi jika rating lebih rendah -->
      <img src="./assets/images/icons/star.svg" alt="" class="w-[18px] shrink-0" />
      <!-- ... repeat untuk jumlah bintang -->
    </div>
    <div class="flex gap-1 items-center">
      <p class="text-lg leading-[27px] font-semibold text-star">
        5.0  <!-- Ubah rating di sini -->
      </p>
      <p class="text-[16px] text-muted">(5.2K+)</p>  <!-- Ubah jumlah review -->
    </div>
  </div>

  <!-- Nama Restaurant -->
  <h2 class="text-[22px] font-semibold leading-[33px]">
    Padang Restaurant  <!-- UBAH NAMA RESTAURANT -->
  </h2>

  <!-- Range Harga -->
  <p class="text-lg font-semibold leading-[27px] text-muted">
    IDR 49.999 - IDR 560.000  <!-- UBAH RANGE HARGA -->
  </p>

  <!-- Lokasi -->
  <div class="flex gap-1.5 items-center">
    <div class="h-6 w-6 flex items-center justify-center">
      <img src="./assets/images/icons/Location.svg" alt="" class="h-6 w-6" />
    </div>
    <p class="text-[16px] leading-6 text-muted">
      Padang, Indonesia  <!-- UBAH LOKASI -->
    </p>
  </div>

  <!-- Call to Action -->
  <div class="mt-[30px] flex flex-col gap-3">
    <a
      href="#"  <!-- Ubah link ke halaman reservasi Anda -->
      class="flex items-center justify-center text-[16px] font-semibold leading-6 bg-primary rounded-[12px] w-[226px] h-14 hover:shadow-primary transition-all duration-300"
    >
      <span>Make Reservation</span>  <!-- Bisa ubah text tombol -->
      <img src="./assets/images/icons/arrow_right.svg" alt="" class="" />
    </a>
    <div class="flex gap-1.5 items-center">
      <img src="./assets/images/icons/info_square.svg" alt="" class="h-6 w-6" />
      <p class="text-[16px] leading-6 text-muted">
        No extra cost  <!-- Info tambahan -->
      </p>
    </div>
  </div>
</div>

Slide 2 - Edit Info Card (sama seperti slide 1, sekitar baris 154-190)

Ulangi proses yang sama untuk slide kedua dengan informasi restaurant yang berbeda atau varian menu lainnya.

Tips Mengedit Rating

Untuk menampilkan rating yang berbeda:

• Rating 5.0: Tampilkan 5 bintang penuh
• Rating 4.5: Tampilkan 4 bintang penuh + 1 bintang setengah (perlu icon star-half.svg)
• Rating 4.0: Tampilkan 4 bintang penuh, hapus 1 tag <img> bintang

Contoh untuk rating 4.0:

<div class="flex gap-[6.5px] -mt-[3px] pr-[3px]">
  <img src="./assets/images/icons/star.svg" alt="" class="w-[18px] shrink-0" />
  <img src="./assets/images/icons/star.svg" alt="" class="w-[18px] shrink-0" />
  <img src="./assets/images/icons/star.svg" alt="" class="w-[18px] shrink-0" />
  <img src="./assets/images/icons/star.svg" alt="" class="w-[18px] shrink-0" />
  <!-- Hanya 4 bintang untuk rating 4.0 -->
</div>

Menambah Slide Baru (Opsional)

Jika ingin menambah slide ketiga:

1. Copy seluruh struktur <div class="group swiper-slide ...">...</div> dari slide 1 atau 2
2. Paste setelah slide terakhir (sebelum closing </div> dari swiper-wrapper)
3. Ganti gambar dan detail sesuai kebutuhan
4. Swiper akan otomatis mendeteksi slide baru

Preview Hasil:

Setelah selesai edit, buka index.html di browser dan test:

• Apakah gambar tampil dengan baik
• Hover pada slider untuk melihat info card
• Geser slider untuk melihat semua slide
• Klik tombol "Make Reservation" untuk memastikan link berfungsi

Mengedit Why Us Section

Section "Why Us" menampilkan 4 benefit utama yang ditawarkan restaurant Anda. Bagian ini terletak setelah Ads Section dan berisi card-card dengan icon, judul, deskripsi, dan tombol.

Mengubah Icon

Setiap card memiliki icon yang merepresentasikan benefit. Berikut cara menggantinya:

1. Siapkan Icon Baru

Anda bisa mendapatkan icon dari:

• Heroicons: https://heroicons.com (gratis, format SVG)
• Lucide Icons: https://lucide.dev (gratis, format SVG)
• Flaticon: https://flaticon.com (gratis dan premium)
• Atau gunakan icon custom Anda sendiri

Format yang disarankan:

• SVG (untuk kualitas terbaik dan scalable)
• PNG dengan background transparan
• Ukuran: 58x58px (sesuai template)

2. Simpan Icon ke Folder

Upload icon baru ke folder:

src/assets/images/icons/

Beri nama yang deskriptif, contoh: delivery-fast.svg, quality-food.svg, service-24h.svg

3. Edit Path Icon di HTML

Buka file index.html dan cari bagian Why Us Section (sekitar baris 195-310). Edit icon pada setiap card:

Card 1 - Extra Discounts (sekitar baris 206-210):

<div class="ml-[117px] mr-[118px] flex items-center justify-center h-20 w-20 rounded-full bg-primary/15">
  <img
    src="./src/assets/images/icons/discount.svg"
    alt="Icon discount"
    class="h-[58px] w-[58px]"
  />
</div>

Ganti src dengan path icon baru Anda:

<img
  src="./src/assets/images/icons/promo-special.svg"
  alt="Icon special promotion"
  class="h-[58px] w-[58px]"
/>

Ulangi untuk Card 2, 3, dan 4 (icon eat, cost, sparkle).

Tips:

• Pastikan semua icon memiliki style visual yang konsisten
• Gunakan warna icon yang sesuai dengan brand
• Isi atribut alt dengan deskripsi yang jelas untuk accessibility

Mengganti Copywriting

Copywriting adalah text yang menjelaskan benefit kepada pengunjung. Edit untuk menyesuaikan dengan unique value proposition restaurant Anda.

1. Edit Heading Section

Cari bagian heading (sekitar baris 197-202):

<div class="flex w-fit mx-auto flex-col gap-1.5 text-center mb-[41px]">
  <span class="text-[16px] leading-6 font-semibold text-secondary uppercase">
    Special Benefit For You
  </span>
  <h2 class="text-[28px] leading-[42px] font-semibold">
    Why Should Choose Us?
  </h2>
</div>

Ubah menjadi sesuai brand Anda:

<div class="flex w-fit mx-auto flex-col gap-1.5 text-center mb-[41px]">
  <span class="text-[16px] leading-6 font-semibold text-secondary uppercase">
    Keunggulan Kami
  </span>
  <h2 class="text-[28px] leading-[42px] font-semibold">
    Mengapa Pilih Restaurant Kami?
  </h2>
</div>

2. Edit Judul dan Deskripsi Card

Card 1 - Extra Discounts (sekitar baris 211-218):

<h3 class="text-lg leading-[27px] font-semibold text-center">
  Extra Discounts
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  Get your special discount by using our reservation
</p>

Ubah judul dan deskripsi sesuai benefit yang Anda tawarkan:

<h3 class="text-lg leading-[27px] font-semibold text-center">
  Promo Spesial Member
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  Dapatkan diskon hingga 20% untuk member setia kami
</p>

Card 2 - Come and Eat (sekitar baris 233-240):

<h3 class="text-lg leading-[27px] font-semibold text-center">
  Come and Eat
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  Get your own table quickly & without waiting in line
</p>

Contoh edit:

<h3 class="text-lg leading-[27px] font-semibold text-center">
  Reservasi Mudah
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  Booking online dalam 2 menit, meja Anda sudah siap saat tiba
</p>

Card 3 - No Extra Fee (sekitar baris 255-262):

<h3 class="text-lg leading-[27px] font-semibold text-center">
  No Extra Fee
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  Get tax free if you want to order food and make a reservation
</p>

Contoh edit:

<h3 class="text-lg leading-[27px] font-semibold text-center">
  Harga Transparan
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  Tidak ada biaya tersembunyi, harga di menu adalah harga final
</p>

Card 4 - Guaranteed Cleanliness (sekitar baris 277-284):

<h3 class="text-lg leading-[27px] font-semibold text-center">
  Guaranteed Cleanliness
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  We ensure the cleanliness of the place as well as the food
</p>

Contoh edit:

<h3 class="text-lg leading-[27px] font-semibold text-center">
  Standar Kebersihan Tinggi
</h3>
<p class="w-[267px] -mt-3 mx-6 text-[16px] leading-6 text-muted text-center">
  Sertifikasi HACCP dan inspeksi rutin untuk keamanan pangan
</p>

Tips Copywriting:

• Gunakan bahasa yang jelas dan mudah dipahami
• Fokus pada benefit, bukan fitur (apa yang customer dapatkan)
• Gunakan angka spesifik jika memungkinkan (contoh: "diskon 20%" lebih kuat dari "diskon besar")
• Pastikan copywriting mencerminkan keunikan restaurant Anda
• Maksimal 2 baris untuk judul, 2-3 baris untuk deskripsi

Edit Call-to-Action Button

Setiap card memiliki tombol "View Details" di bagian bawah. Anda bisa mengubah text dan link-nya.

1. Ubah Text Tombol

Cari tombol di setiap card (ada 4 tombol, sekitar baris 219-227 untuk card 1):

<a
  href="#"
  class="w-full mt-auto h-[72px] flex items-center justify-center text-[16px] leading-6 font-semibold rounded-t-xl rounded-b-3xl transition-all duration-300 hover:bg-primary"
>
  <span>View Details</span>
  <img
    src="./assets/images/icons/arrow_right.svg"
    alt=""
    class="h-6 w-6"
  />
</a>

Ubah text View Details sesuai kebutuhan:

<span>Pelajari Lebih Lanjut</span>

Atau bisa juga:

• Selengkapnya
• Lihat Info
• Cek Promo
• Daftar Sekarang

2. Ubah Link Tujuan

Ganti href="#" dengan URL halaman tujuan:

<a
  href="/promo-member"
  class="w-full mt-auto h-[72px] flex items-center justify-center text-[16px] leading-6 font-semibold rounded-t-xl rounded-b-3xl transition-all duration-300 hover:bg-primary"
>

Atau untuk link ke section lain di halaman yang sama:

<a
  href="#contact"
  class="..."
>

Untuk link external (website lain):

<a
  href="<https://instagram.com/namarestaurant>"
  target="_blank"
  rel="noopener noreferrer"
  class="..."
>

3. Konsistensi Text Tombol

Anda bisa:

• Gunakan text yang sama untuk semua card (contoh: semua "Pelajari Lebih Lanjut")
• Atau buat text spesifik per benefit:
  • Card 1: "Lihat Promo"
  • Card 2: "Book Sekarang"
  • Card 3: "Cek Harga"
  • Card 4: "Lihat Sertifikat"

Tips CTA Button:

• Gunakan action word yang jelas (Lihat, Pesan, Daftar, Cek)
• Pastikan link mengarah ke halaman yang relevan
• Jika belum ada halaman tujuan, gunakan href="#" atau link ke contact/WhatsApp
• Test semua tombol untuk memastikan berfungsi

Alternatif: Menghapus Tombol

Jika Anda tidak ingin menggunakan tombol di setiap card, Anda bisa menghapus seluruh tag <a> dan mengubah tinggi minimum card:

Dari:

<div class="flex flex-col gap-[54px] h-fit pt-6 min-h-[347px] w-[315px] bg-white rounded-3xl">

Menjadi:

<div class="flex flex-col gap-[54px] h-fit pt-6 pb-6 w-[315px] bg-white rounded-3xl">

Dan hapus tag <a> beserta seluruh isinya.

Preview Hasil:

Setelah selesai edit, buka index.html di browser dan perhatikan:

• Apakah icon tampil dengan baik dan konsisten
• Copywriting mudah dibaca dan menarik
• Tombol CTA terlihat jelas dan berfungsi saat diklik
• Hover effect pada tombol bekerja dengan baik (background berubah ke warna primary)

Mengedit Popular Restaurant Section

Section "Popular Restaurant" menampilkan 3 restaurant terbaik dengan efek hover yang menarik. Card akan mengembang saat di-hover dan menampilkan detail restaurant. Bagian ini terletak setelah Why Us Section.

Mengganti Gambar

Setiap card restaurant memiliki gambar yang menarik perhatian pengunjung.

1. Siapkan Gambar Restaurant

Cari gambar berkualitas tinggi di Unsplash:

• Buka https://unsplash.com
• Search kata kunci: "restaurant interior", "fine dining", "modern restaurant", "cozy cafe", "restaurant ambiance"
• Pilih gambar dengan orientasi portrait atau square
• Ukuran yang disarankan: minimal 800x1000px
• Download gambar dalam ukuran Large

2. Compress Gambar

Sebelum digunakan, compress gambar agar website lebih cepat:

• Buka https://compressjpeg.com
• Upload gambar yang sudah didownload
• Compress dengan quality 80-85%
• Download hasil compression
• Rename file menjadi nama yang deskriptif:
  • popular-resto-1.jpg
  • popular-resto-2.jpg
  • popular-resto-3.jpg

3. Upload ke Folder

Simpan gambar hasil compress ke:

src/assets/images/thumbnails/

4. Edit Path Gambar di HTML

Buka file index.html dan cari bagian Popular Restaurant Section (sekitar baris 315-415).

Card 1 (sekitar baris 329-333):

<div class="card group transition-all duration-300 relative h-[475px] w-[400px] rounded-3xl overflow-clip shrink-0 hover:w-[400px]" data-card="1">
  <img
    src="./src/assets/images/thumbnails/popular-resto-1.jpg"
    alt="Interior restaurant modern dengan pencahayaan hangat"
    class="object-cover w-full h-full"
  />

Card 2 (sekitar baris 360-364):

<div class="card group transition-all duration-300 relative h-[475px] w-[214px] rounded-3xl overflow-clip shrink-0 hover:w-[400px]" data-card="2">
  <img
    src="./src/assets/images/thumbnails/popular-resto-2.jpg"
    alt="Suasana restaurant dengan dekorasi elegan"
    class="object-cover h-full w-full"
  />

Card 3 (sekitar baris 391-395):

<div class="card group transition-all duration-300 relative h-[475px] w-[214px] rounded-3xl overflow-clip shrink-0 hover:w-[400px]" data-card="3">
  <img
    src="./src/assets/images/thumbnails/popular-resto-3.jpg"
    alt="Restaurant dengan view outdoor yang indah"
    class="object-cover h-full w-full"
  />

Tips Memilih Gambar:

• Pilih gambar dengan pencahayaan yang baik dan jelas
• Hindari gambar yang terlalu gelap atau overexposed
• Pastikan fokus gambar adalah interior atau ambiance restaurant
• Gunakan gambar dengan komposisi vertikal atau square
• Konsistensi style foto (semua foto indoor atau mix indoor-outdoor)

Mengganti Copywriting

Copywriting di section ini terdiri dari heading section dan detail di setiap card.

1. Edit Heading Section

Cari bagian heading (sekitar baris 317-328):

<div class="w-[367px]">
  <div class="flex flex-col gap-1.5">
    <span class="text-[16px] leading-6 font-semibold text-secondary uppercase">
      Top 3 Featured Restaurant
    </span>
    <h2 class="w-full text-[28px] leading-[42px] font-semibold">
      Most Popular Restaurants
    </h2>
  </div>
  <p class="mt-5 w-[360px] pr-5 text-[16px] leading-6 text-muted">
    The best restaurant in our opinion is how much customers like it
    in terms of place, price, comfort and of course the taste of the
    food itself.
  </p>

Ubah menjadi bahasa Indonesia atau sesuaikan dengan brand:

<div class="w-[367px]">
  <div class="flex flex-col gap-1.5">
    <span class="text-[16px] leading-6 font-semibold text-secondary uppercase">
      Pilihan Terbaik
    </span>
    <h2 class="w-full text-[28px] leading-[42px] font-semibold">
      Restaurant Paling Populer
    </h2>
  </div>
  <p class="mt-5 w-[360px] pr-5 text-[16px] leading-6 text-muted">
    Restaurant pilihan terbaik berdasarkan rating pelanggan, kualitas
    makanan, suasana nyaman, dan pelayanan yang memuaskan.
  </p>

2. Edit Tombol View All

Ubah text tombol di bagian bawah heading (sekitar baris 329-337):

<a
  href="#"
  class="mt-14 flex items-center justify-center text-[16px] leading-6 font-semibold h-[56px] w-[238px] bg-primary rounded-xl transition-all duration-300 hover:shadow-primary"
>
  <span>View All Restaurant</span>
  <img src="./assets/images/icons/arrow_right.svg" alt="" class="h-6 w-6" />
</a>

Ubah menjadi:

<a
  href="#all-restaurant"
  class="mt-14 flex items-center justify-center text-[16px] leading-6 font-semibold h-[56px] w-[238px] bg-primary rounded-xl transition-all duration-300 hover:shadow-primary"
>
  <span>Lihat Semua</span>
  <img src="./assets/images/icons/arrow_right.svg" alt="" class="h-6 w-6" />
</a>

3. Edit Detail Card Restaurant

Setiap card memiliki info card yang muncul saat hover. Edit detail berikut:

Card 1 (sekitar baris 334-357):

<div class="card-info transition-all duration-300 delay-1000 ease-in-out flex gap-2 p-6 items-center absolute left-6 bottom-6 right-6 bg-white rounded-3xl">
  <div class="flex flex-col gap-1 w-[260px]">
    <!-- Rating -->
    <div class="flex items-center">
      <img src="./assets/images/icons/star.svg" alt="" class="h-auto w-[18px] -mt-[3px] mr-[3px]" />
      <p class="text-[16px] leading-6 font-semibold text-star mr-1">
        5.0
      </p>
      <p class="text-[16px] leading-6 text-muted">(7.6K+)</p>
    </div>

    <!-- Nama Restaurant -->
    <h3 class="text-lg leading-[27px] font-semibold">
      Bind Balorant
    </h3>

    <!-- Lokasi -->
    <div class="flex gap-1.5">
      <img src="./assets/images/icons/Location.svg" alt="" class="h-6 w-6" />
      <p class="text-[16px] leading-6 text-muted">
        Jakarta, Indonesia
      </p>
    </div>
  </div>

  <!-- Tombol Detail -->
  <a
    href="#"
    class="flex items-center justify-center h-9 w-9 rounded-xl bg-primary shrink-0 transition-all duration-300 hover:shadow-primary"
  >
    <img src="./assets/images/icons/sign_right.svg" alt="" class="" />
  </a>
</div>

Ubah detail restaurant sesuai dengan data Anda:

<div class="card-info transition-all duration-300 delay-1000 ease-in-out flex gap-2 p-6 items-center absolute left-6 bottom-6 right-6 bg-white rounded-3xl">
  <div class="flex flex-col gap-1 w-[260px]">
    <!-- Rating -->
    <div class="flex items-center">
      <img src="./assets/images/icons/star.svg" alt="" class="h-auto w-[18px] -mt-[3px] mr-[3px]" />
      <p class="text-[16px] leading-6 font-semibold text-star mr-1">
        4.9
      </p>
      <p class="text-[16px] leading-6 text-muted">(2.3K+)</p>
    </div>

    <!-- Nama Restaurant -->
    <h3 class="text-lg leading-[27px] font-semibold">
      Warung Sunda Ibu Haji
    </h3>

    <!-- Lokasi -->
    <div class="flex gap-1.5">
      <img src="./assets/images/icons/Location.svg" alt="" class="h-6 w-6" />
      <p class="text-[16px] leading-6 text-muted">
        Bandung, Indonesia
      </p>
    </div>
  </div>

  <!-- Tombol Detail -->
  <a
    href="/restaurant/warung-sunda-ibu-haji"
    class="flex items-center justify-center h-9 w-9 rounded-xl bg-primary shrink-0 transition-all duration-300 hover:shadow-primary"
  >
    <img src="./assets/images/icons/sign_right.svg" alt="" class="" />
  </a>
</div>

Card 2 (sekitar baris 365-388):

Perhatikan bahwa Card 2 dan 3 memiliki class hidden pada card-info. Ini karena card dalam keadaan collapsed. Class akan berubah otomatis oleh JavaScript saat hover.

<div class="card-info transition-all duration-300 delay-1000 ease-in-out gap-2 p-6 items-center absolute left-6 bottom-6 right-6 bg-white rounded-3xl hidden">

Edit detail sama seperti Card 1:

<div class="flex items-center">
  <img src="./assets/images/icons/star.svg" alt="" class="h-auto w-[18px] -mt-[3px] mr-[3px]" />
  <p class="text-[16px] leading-6 font-semibold text-star mr-1">
    4.8
  </p>
  <p class="text-[16px] leading-6 text-muted">(1.8K+)</p>
</div>
<h3 class="text-lg leading-[27px] font-semibold">
  Rumah Makan Padang Sederhana
</h3>
<div class="flex gap-1.5">
  <img src="./assets/images/icons/Location.svg" alt="" class="h-6 w-6" />
  <p class="text-[16px] leading-6 text-muted">
    Jakarta Selatan, Indonesia
  </p>
</div>

Card 3 (sekitar baris 396-419):

Edit detail restaurant ketiga:

<div class="flex items-center">
  <img src="./assets/images/icons/star.svg" alt="" class="h-auto w-[18px] -mt-[3px] mr-[3px]" />
  <p class="text-[16px] leading-6 font-semibold text-star mr-1">
    4.7
  </p>
  <p class="text-[16px] leading-6 text-muted">(3.1K+)</p>
</div>
<h3 class="text-lg leading-[27px] font-semibold">
  Kedai Kopi Filosofi
</h3>
<div class="flex gap-1.5">
  <img src="./assets/images/icons/Location.svg" alt="" class="h-6 w-6" />
  <p class="text-[16px] leading-6 text-muted">
    Yogyakarta, Indonesia
  </p>
</div>

Tips Copywriting untuk Section Ini:

Heading Section:

• Gunakan label yang menarik perhatian (Top 3, Pilihan Terbaik, Best Seller)
• Judul harus singkat dan jelas (2-4 kata)
• Deskripsi menjelaskan kriteria pemilihan restaurant

Detail Card:

• Rating realistis: 4.5 - 5.0
• Jumlah review kredibel: 1K+ untuk new, 5K+ untuk established
• Nama restaurant harus unik dan mudah diingat
• Lokasi spesifik (kota atau area dalam kota)

Link Tombol:

• Card 1 (expanded): bisa link langsung ke detail restaurant
• Card 2 & 3: sama seperti Card 1, akan berfungsi saat di-hover
• Atau link ke halaman daftar semua restaurant

Preview Hasil:

Setelah selesai edit, test di browser:

• Hover pada setiap card untuk melihat efek expand
• Card yang di-hover akan membesar dan menampilkan detail
• Info card muncul dengan smooth animation
• Tombol detail bisa diklik dan mengarah ke halaman yang benar
• Gambar tampil dengan baik tanpa distorsi

Mengedit Near You Restaurant Section

Section "Near You Restaurant" menampilkan 3 restaurant dengan filter dropdown lokasi. Bagian ini terletak setelah Popular Restaurant Section dan menampilkan restaurant berdasarkan kota.

Mengganti Foto

Setiap card restaurant memiliki gambar dan info card di bagian bawah.

1. Siapkan Gambar Restaurant

Cari gambar berkualitas tinggi di Unsplash:

• Buka https://unsplash.com
• Search kata kunci: "restaurant food", "restaurant dish", "restaurant exterior", "cafe front", "restaurant building"
• Pilih gambar dengan orientasi portrait atau square
• Ukuran yang disarankan: minimal 800x900px
• Download gambar dalam ukuran Large

2. Compress Gambar

Optimize gambar untuk web:

• Buka https://compressjpeg.com
• Upload gambar yang sudah didownload
• Compress dengan quality 80-85%
• Download hasil compression
• Rename file dengan nama deskriptif:
  • near-resto-1.jpg
  • near-resto-2.jpg
  • near-resto-3.jpg

3. Upload ke Folder

Simpan gambar hasil compress ke:

src/assets/images/thumbnails/

4. Edit Path Gambar di HTML

Buka file index.html dan cari bagian Near You Restaurant Section (sekitar baris 425-550).

Card 1 (sekitar baris 447-451):

<div class="relative h-[415px] w-[427px] rounded-3xl overflow-clip shrink-0">
  <img
    src="./src/assets/images/thumbnails/near-resto-1.jpg"
    alt="Exterior restaurant dengan desain modern"
    class="object-cover w-full h-full"
  />

Card 2 (sekitar baris 477-481):

<div class="relative h-[415px] w-[427px] rounded-3xl overflow-clip shrink-0">
  <img
    src="./src/assets/images/thumbnails/near-resto-2.jpg"
    alt="Restaurant dengan view outdoor yang indah"
    class="object-cover w-full h-full"
  />

Card 3 (sekitar baris 507-511):

<div class="relative h-[415px] w-[427px] rounded-3xl overflow-clip shrink-0">
  <img
    src="./src/assets/images/thumbnails/near-resto-3.jpg"
    alt="Interior restaurant cozy dan nyaman"
    class="object-cover w-full h-full"
  />

Tips Memilih Gambar:

• Gunakan gambar yang menampilkan karakteristik unik restaurant
• Bisa mix antara exterior, interior, atau signature dish
• Pastikan gambar memiliki kualitas yang baik dan tidak blur
• Konsistensi aspek ratio untuk semua card
• Hindari gambar dengan watermark

Mengganti Copywriting

Copywriting di section ini terdiri dari heading, dropdown filter lokasi, detail card, dan tombol view all.

1. Edit Heading Section

Cari bagian heading (sekitar baris 427-445):

<div class="flex w-full items-center justify-between">
  <div class="flex flex-col gap-1.5">
    <span class="text-[16px] leading-6 font-semibold text-secondary uppercase">
      Restaurant Based by City
    </span>
    <h2 class="w-full text-nowrap text-[28px] leading-[42px] font-semibold">
      Restaurant Near You
    </h2>
  </div>

Ubah menjadi:

<div class="flex w-full items-center justify-between">
  <div class="flex flex-col gap-1.5">
    <span class="text-[16px] leading-6 font-semibold text-secondary uppercase">
      Berdasarkan Lokasi
    </span>
    <h2 class="w-full text-nowrap text-[28px] leading-[42px] font-semibold">
      Restaurant di Sekitar Anda
    </h2>
  </div>

2. Edit Dropdown Filter Lokasi

Dropdown button default (sekitar baris 446-456):

<div class="relative dropdown flex flex-col">
  <button type="button" class="dropdown-button flex cursor-pointer gap-1.5 px-6 py-5 items-center h-[64px] w-[252px] rounded-xl bg-[#f2f2f2]">
    <img src="./assets/images/icons/Location.svg" alt="" class="" />
    <div class="flex">
      <p class="text-[16px] leading-6 font-medium text-muted">
        Jakarta, Indonesia
      </p>
      <div class="flex items-center justify-center h-6 w-6">
        <img src="./assets/images/icons/arrow_bottom.svg" alt="" class="dropdown-arrow transition-all duration-300" />
      </div>
    </div>
  </button>

Ubah lokasi default sesuai target area Anda:

<p class="text-[16px] leading-6 font-medium text-muted">
  Bandung, Indonesia
</p>

3. Edit Dropdown Menu Items

Dropdown items (sekitar baris 457-495):

<ul class="dropdown-menu z-50 opacity-0 transition-all duration-300 absolute top-full left-0 mt-2 min-w-[150px] flex-col gap-1.5 bg-white rounded-xl py-2.5 shadow-lg">
  <li class="group">
    <button type="button" class="flex cursor-pointer gap-1.5 px-6 py-5 items-center h-[64px] w-[252px] transition-all duration-300 hover:bg-[#f2f2f2]">
      <img src="./assets/images/icons/Location.svg" alt="" class="" />
      <div class="flex">
        <p class="text-[16px] leading-6 font-medium text-muted">
          Bandung, Indonesia
        </p>
      </div>
    </button>
  </li>
  <li class="group">
    <button type="button" class="flex cursor-pointer gap-1.5 px-6 py-5 items-center h-[64px] w-[252px] transition-all duration-300 hover:bg-[#f2f2f2]">
      <img src="./assets/images/icons/Location.svg" alt="" class="" />
      <div class="flex">
        <p class="text-[16px] leading-6 font-medium text-muted">
          Bali, Indonesia
        </p>
      </div>
    </button>
  </li>
  <li class="group">
    <button type="button" class="flex cursor-pointer gap-1.5 px-6 py-5 items-center h-[64px] w-[252px] transition-all duration-300 hover:bg-[#f2f2f2]">
      <img src="./assets/images/icons/Location.svg" alt="" class="" />
      <div class="flex">
        <p class="text-[16px] leading-6 font-medium text-muted">
          Jember, Indonesia
        </p>
      </div>
    </button>
  </li>
</ul>

Ubah lokasi sesuai dengan area operasional Anda:

<li class="group">
  <button type="button" class="flex cursor-pointer gap-1.5 px-6 py-5 items-center h-[64px] w-[252px] transition-all duration-300 hover:bg-[#f2f2f2]">
    <img src="./assets/images/icons/Location.svg" alt="" class="" />
    <div class="flex">
      <p class="text-[16px] leading-6 font-medium text-muted">
        Surabaya, Indonesia
      </p>
    </div>
  </button>
</li>
<li class="group">
  <button type="button" class="flex cursor-pointer gap-1.5 px-6 py-5 items-center h-[64px] w-[252px] transition-all duration-300 hover:bg-[#f2f2f2]">
    <img src="./assets/images/icons/Location.svg" alt="" class="" />
    <div class="flex">
      <p class="text-[16px] leading-6 font-medium text-muted">
        Yogyakarta, Indonesia
      </p>
    </div>
  </button>
</li>
<li class="group">
  <button type="button" class="flex cursor-pointer gap-1.5 px-6 py-5 items-center h-[64px] w-[252px] transition-all duration-300 hover:bg-[#f2f2f2]">
    <img src="./assets/images/icons/Location.svg" alt="" class="" />
    <div class="flex">
      <p class="text-[16px] leading-6 font-medium text-muted">
        Semarang, Indonesia
      </p>
    </div>
  </button>
</li>

Tips Dropdown Filter:

• Maksimal 5-6 lokasi agar tidak terlalu panjang
• Urutkan berdasarkan popularitas atau alfabetis
• Gunakan nama kota yang jelas dan familiar
• Pastikan lokasi yang ada di dropdown sesuai dengan data restaurant di card

4. Edit Detail Card Restaurant

Card 1 (sekitar baris 452-475):

<div class="flex gap-[35px] p-6 items-center absolute left-6 bottom-[33px] right-6 bg-white rounded-3xl">
  <div class="flex flex-col gap-1 w-[260px]">
    <!-- Rating -->
    <div class="flex items-center">
      <img src="./assets/images/icons/star.svg" alt="" class="w-[18px] -mt-[3.5px] mr-[3px]" />
      <p class="text-[16px] leading-6 font-semibold text-star mr-1">
        5.0
      </p>
      <p class="text-[16px] leading-6 text-muted">(6.6K+)</p>
    </div>

    <!-- Nama Restaurant -->
    <h3 class="text-lg leading-[27px] font-semibold">
      Batavia Restaurant
    </h3>

    <!-- Range Harga -->
    <p class="text-lg font-semibold leading-6 text-muted">
      IDR 29.000 - IDR 259.999
    </p>
  </div>

  <!-- Tombol Detail -->
  <a
    href="#"
    class="flex items-center justify-center h-9 w-9 rounded-xl bg-primary shrink-0 transition-all duration-300 hover:shadow-primary"
  >
    <img src="./assets/images/icons/sign_right.svg" alt="" class="" />
  </a>
</div>

Ubah detail restaurant sesuai data Anda:

<div class="flex gap-[35px] p-6 items-center absolute left-6 bottom-[33px] right-6 bg-white rounded-3xl">
  <div class="flex flex-col gap-1 w-[260px]">
    <div class="flex items-center">
      <img src="./assets/images/icons/star.svg" alt="" class="w-[18px] -mt-[3.5px] mr-[3px]" />
      <p class="text-[16px] leading-6 font-semibold text-star mr-1">
        4.8
      </p>
      <p class="text-[16px] leading-6 text-muted">(3.2K+)</p>
    </div>
    <h3 class="text-lg leading-[27px] font-semibold">
      Dapur Nusantara
    </h3>
    <p class="text-lg font-semibold leading-6 text-muted">
      IDR 35.000 - IDR 150.000
    </p>
  </div>
  <a
    href="/restaurant/dapur-nusantara"
    class="flex items-center justify-center h-9 w-9 rounded-xl bg-primary shrink-0 transition-all duration-300 hover:shadow-primary"
  >
    <img src="./assets/images/icons/sign_right.svg" alt="" class="" />
  </a>
</div>

Card 2 dan Card 3 - Edit dengan cara yang sama (sekitar baris 482-505 dan 512-535).

5. Edit Tombol View All

Tombol di bagian bawah section (sekitar baris 537-546):

<a
  href="#"
  class="mt-[22px] mx-auto flex items-center justify-center h-14 w-[238px] bg-primary rounded-xl text-[16px] leading-6 font-semibold transition-all duration-300 hover:shadow-primary"
>
  <span>View All Restaurant</span>
  <img src="./assets/images/icons/arrow_right.svg" alt="" class="h-6 w-6" />
</a>

Ubah text dan link:

<a
  href="/restaurant/all"
  class="mt-[22px] mx-auto flex items-center justify-center h-14 w-[238px] bg-primary rounded-xl text-[16px] leading-6 font-semibold transition-all duration-300 hover:shadow-primary"
>
  <span>Lihat Semua Restaurant</span>
  <img src="./assets/images/icons/arrow_right.svg" alt="" class="h-6 w-6" />
</a>

Tips Copywriting untuk Section Ini:

Heading:

• Gunakan label yang menunjukkan filter lokasi
• Judul harus jelas mengindikasikan restaurant berdasarkan area

Detail Card:

• Rating realistis: 4.5 - 5.0
• Review count kredibel sesuai ukuran restaurant
• Nama restaurant yang memorable dan mencerminkan jenis kuliner
• Range harga yang jelas dan realistis (harga terendah - tertinggi)
• Format harga konsisten (IDR atau Rp)

Range Harga Tips:

• Budget restaurant: IDR 15.000 - IDR 50.000
• Mid-range restaurant: IDR 50.000 - IDR 150.000
• Fine dining: IDR 150.000 - IDR 500.000+

Preview Hasil:

Setelah selesai edit, test di browser:

• Klik dropdown filter lokasi untuk melihat list kota
• Pastikan semua gambar tampil dengan baik
• Info card terlihat jelas dengan background putih
• Range harga mudah dibaca
• Tombol detail berfungsi dengan benar
• Tombol "View All" mengarah ke halaman yang tepat

Mengedit Expert Chef Section

Section "Expert Chef" menampilkan 4 chef expert dengan sistem tab interaktif. Ketika tab di-klik, foto chef dan detail restaurant akan berubah secara dinamis. Section ini menggunakan JavaScript untuk mengatur interaksi tab.

Mengganti Foto

Section ini memiliki 2 jenis foto yang perlu diganti: foto chef dan foto restaurant tempat chef bekerja.

1. Siapkan Foto Chef

Cari foto chef berkualitas tinggi di Unsplash:

• Buka https://unsplash.com
• Search kata kunci: "chef portrait", "professional chef", "chef cooking", "chef uniform"
• Pilih gambar dengan orientasi portrait/vertikal
• Ukuran yang disarankan: minimal 800x1200px
• Download gambar dalam ukuran Large

2. Siapkan Foto Restaurant

Cari foto restaurant untuk ditampilkan di small card:

• Search: "restaurant interior", "restaurant table", "fine dining"
• Orientasi: landscape atau square
• Ukuran: minimal 400x500px
• Download dalam ukuran Medium

3. Compress Semua Gambar

Optimize gambar untuk web:

• Buka https://compressjpeg.com
• Upload semua foto (chef dan restaurant)
• Compress dengan quality 80-85%
• Download hasil compression
• Rename file:
  • Foto chef: chef-1.jpg, chef-2.jpg, chef-3.jpg, chef-4.jpg
  • Foto restaurant: resto-chef-1.jpg, resto-chef-2.jpg, resto-chef-3.jpg, resto-chef-4.jpg

4. Upload ke Folder

Simpan semua gambar ke:

src/assets/images/thumbnails/

5. Edit Path Gambar di JavaScript

Berbeda dengan section lainnya, foto chef diatur melalui file JavaScript src/js/tab.js. Buka file tersebut:

const tabContents = [
  {
    chefName: "Phoenix Satcheup",
    category: "Pizza",
    location: "Jakarta, Indonesia",
    experience: "12 Years",
    restaurant: "Pearl Dolphin",
    restaurantImage: "./assets/images/thumbnails/resto-4.png",
    chefImage: "./assets/images/thumbnails/chef-1.png",
  },
  {
    chefName: "Chamber Botfrag",
    category: "Vegan",
    location: "Bandung, Indonesia",
    experience: "8 Years",
    restaurant: "Green Garden",
    restaurantImage: "./assets/images/thumbnails/resto-3.png",
    chefImage: "./assets/images/thumbnails/chef-2.webp",
  },
  {
    chefName: "Asep Vandal",
    category: "Roast Chicken",
    location: "Sunda, Indonesia",
    experience: "10 Years",
    restaurant: "Sundanese Delight",
    restaurantImage: "./assets/images/thumbnails/resto-2.png",
    chefImage: "./assets/images/thumbnails/chef-3.webp",
  },
  {
    chefName: "I Made Invoker",
    category: "Beef Steak",
    location: "Bali, Indonesia",
    experience: "15 Years",
    restaurant: "Bali Bistro",
    restaurantImage: "./assets/images/thumbnails/resto-1.png",
    chefImage: "./assets/images/thumbnails/chef-4.webp",
  },
];

Ubah path gambar sesuai dengan file yang Anda upload:

const tabContents = [
  {
    chefName: "Phoenix Satcheup",
    category: "Pizza",
    location: "Jakarta, Indonesia",
    experience: "12 Years",
    restaurant: "Pearl Dolphin",
    restaurantImage: "./src/assets/images/thumbnails/resto-chef-1.jpg",
    chefImage: "./src/assets/images/thumbnails/chef-1.jpg",
  },
  // ... ulangi untuk chef 2, 3, dan 4
];

Tips Memilih Foto Chef:

• Pilih foto dengan background profesional atau blur
• Chef dalam uniform/attire profesional
• Ekspresi ramah dan approachable
• Pencahayaan yang baik
• Fokus pada wajah dan upper body
• Konsistensi style foto untuk semua chef

Mengganti Copywriting

Copywriting di section ini diatur di dua tempat: heading di HTML dan data chef di JavaScript.

1. Edit Heading Section

Buka file index.html dan cari bagian Expert Chef (sekitar baris 553-648):

<div class="flex flex-col gap-8 w-[596px]">
  <div class="flex flex-col gap-1">
    <span class="text-[18px] leading-6 font-semibold text-secondary uppercase">
      Top 4 Expert Chefs
    </span>
    <h2 class="w-full text-nowrap text-[32px] leading-[48px] font-semibold">
      Expert Chefs In Fuddy
    </h2>
  </div>

Ubah menjadi:

<div class="flex flex-col gap-8 w-[596px]">
  <div class="flex flex-col gap-1">
    <span class="text-[18px] leading-6 font-semibold text-secondary uppercase">
      Chef Profesional Kami
    </span>
    <h2 class="w-full text-nowrap text-[32px] leading-[48px] font-semibold">
      Chef Berpengalaman
    </h2>
  </div>

2. Edit Data Chef di JavaScript

Kembali ke file src/js/tab.js dan edit semua data chef:

const tabContents = [
  {
    chefName: "Budi Santoso",
    category: "Indonesian Cuisine",
    location: "Jakarta, Indonesia",
    experience: "15 Tahun",
    restaurant: "Nusantara Kitchen",
    restaurantImage: "./src/assets/images/thumbnails/resto-chef-1.jpg",
    chefImage: "./src/assets/images/thumbnails/chef-1.jpg",
  },
  {
    chefName: "Sarah Wijaya",
    category: "Pastry & Dessert",
    location: "Bandung, Indonesia",
    experience: "10 Tahun",
    restaurant: "Sweet Dreams Bakery",
    restaurantImage: "./src/assets/images/thumbnails/resto-chef-2.jpg",
    chefImage: "./src/assets/images/thumbnails/chef-2.jpg",
  },
  {
    chefName: "Ahmad Hidayat",
    category: "Seafood Specialist",
    location: "Surabaya, Indonesia",
    experience: "12 Tahun",
    restaurant: "Ocean Pearl Restaurant",
    restaurantImage: "./src/assets/images/thumbnails/resto-chef-3.jpg",
    chefImage: "./src/assets/images/thumbnails/chef-3.jpg",
  },
  {
    chefName: "Made Wirawan",
    category: "Grill & BBQ",
    location: "Bali, Indonesia",
    experience: "18 Tahun",
    restaurant: "Bali Grill House",
    restaurantImage: "./src/assets/images/thumbnails/resto-chef-4.jpg",
    chefImage: "./src/assets/images/thumbnails/chef-4.jpg",
  },
];

Penjelasan Field:

• chefName: Nama lengkap chef
• category: Spesialisasi kuliner chef (1-3 kata)
• location: Kota domisili chef
• experience: Lama pengalaman (format: "X Tahun" atau "X Years")
• restaurant: Nama restaurant tempat chef bekerja
• restaurantImage: Path foto restaurant
• chefImage: Path foto chef

3. Edit Tab Menu di HTML

Data di JavaScript akan menggantikan content secara dinamis, tapi Anda tetap perlu edit tab menu di HTML untuk default state. Cari bagian tab menu (sekitar baris 568-648):

<!-- Tab item 1 -->
<div class="tab-item cursor-pointer p-6 flex flex-col gap-1.5 h-[141px] w-[596px] rounded-3xl group transition-all duration-300 hover:bg-white">
  <span class="text-[16px] leading-6 font-medium text-muted uppercase">
    Pizza
  </span>
  <div class="w-full flex items-center justify-between">
    <h2 class="text-[22px] leading-[33px] font-semibold line-clamp-1 mr-0.5">
      Phoenix Satcheup
    </h2>
    <a href="#" class="flex text-[16px] opacity-100 leading-6 font-medium text-primary shrink-0">
      <span>Profile Details</span>
      <div class="flex items-center justify-center h-6 w-6 mask-[url('./assets/images/icons/arrow_right.svg')] mask-no-repeat mask-contain bg-primary shrink-0">
        <img src="./assets/images/icons/arrow_right.svg" alt="" class="opacity-0" />
      </div>
    </a>
  </div>
  <div class="flex items-center gap-1.5">
    <div class="location-icon transition-all duration-300 mask-[url('./assets/images/icons/Location.svg')] mask-no-repeat mask-contain">
      <img src="./assets/images/icons/Location.svg" alt="" class="h-6 w-6 opacity-0" />
    </div>
    <p class="text-[16px] leading-6 text-muted">
      Jakarta, Indonesia
    </p>
  </div>
</div>

Ubah sesuai data chef pertama Anda:

<div class="tab-item cursor-pointer p-6 flex flex-col gap-1.5 h-[141px] w-[596px] rounded-3xl group transition-all duration-300 hover:bg-white">
  <span class="text-[16px] leading-6 font-medium text-muted uppercase">
    Indonesian Cuisine
  </span>
  <div class="w-full flex items-center justify-between">
    <h2 class="text-[22px] leading-[33px] font-semibold line-clamp-1 mr-0.5">
      Budi Santoso
    </h2>
    <a href="/chef/budi-santoso" class="flex text-[16px] opacity-100 leading-6 font-medium text-primary shrink-0">
      <span>Lihat Profil</span>
      <div class="flex items-center justify-center h-6 w-6 mask-[url('./assets/images/icons/arrow_right.svg')] mask-no-repeat mask-contain bg-primary shrink-0">
        <img src="./assets/images/icons/arrow_right.svg" alt="" class="opacity-0" />
      </div>
    </a>
  </div>
  <div class="flex items-center gap-1.5">
    <div class="location-icon transition-all duration-300 mask-[url('./assets/images/icons/Location.svg')] mask-no-repeat mask-contain">
      <img src="./assets/images/icons/Location.svg" alt="" class="h-6 w-6 opacity-0" />
    </div>
    <p class="text-[16px] leading-6 text-muted">
      Jakarta, Indonesia
    </p>
  </div>
</div>

Ulangi untuk tab item 2, 3, dan 4 sesuai data chef masing-masing.

4. Edit Tombol View All

Tombol di bagian bawah section (sekitar baris 649-660):

<a
  href="#"
  class="mt-[30px] w-fit flex items-center justify-center text-[16px] leading-6 font-semibold px-7 py-4 bg-primary rounded-xl transition-all duration-300 hover:shadow-primary"
>
  <span>View All Chef</span>
  <div class="flex items-center justify-center h-6 w-6 shrink-0">
    <img src="./assets/images/icons/arrow_right.svg" alt="" class="" />
  </div>
</a>

Ubah text dan link:

<a
  href="/chef/all"
  class="mt-[30px] w-fit flex items-center justify-center text-[16px] leading-6 font-semibold px-7 py-4 bg-primary rounded-xl transition-all duration-300 hover:shadow-primary"
>
  <span>Lihat Semua Chef</span>
  <div class="flex items-center justify-center h-6 w-6 shrink-0">
    <img src="./assets/images/icons/arrow_right.svg" alt="" class="" />
  </div>
</a>

Tips Copywriting untuk Section Ini:

Data Chef:

• Gunakan nama yang terdengar profesional
• Category/spesialisasi harus jelas dan spesifik (contoh: "Italian Cuisine", "Sushi Master", "BBQ Specialist")
• Experience realistis: 5-20 tahun untuk expert chef
• Nama restaurant yang match dengan spesialisasi chef

Heading:

• Label singkat dan jelas (2-4 kata)
• Judul menekankan expertise atau pengalaman

Profile Details Link:

• Bisa link ke halaman bio chef
• Atau link ke portfolio/achievement chef
• Jika belum ada halaman, gunakan href="#" atau link ke contact

Preview Hasil:

Setelah selesai edit, test di browser:

• Klik setiap tab untuk melihat perubahan foto chef dan detail
• Pastikan foto chef berubah dengan smooth
• Info restaurant (foto kecil dan nama) juga berubah sesuai tab
• Experience years update sesuai data
• Hover pada tab menampilkan background putih
• Link "Profile Details" hanya terlihat pada tab yang aktif
• Semua animasi berjalan smooth tanpa delay
• Tombol "View All Chef" berfungsi dengan benar

Troubleshooting:

Jika foto tidak muncul atau tidak berubah:

• Periksa path gambar di tab.js apakah sudah benar
• Pastikan file gambar sudah di-upload ke folder yang tepat
• Cek console browser (F12) untuk melihat error
• Pastikan format file gambar didukung (jpg, png, webp)

Upload ke GitHub

Setelah selesai mengedit template, langkah selanjutnya adalah mengupload project ke GitHub. GitHub akan digunakan sebagai repository dan akan terkoneksi dengan Vercel untuk deployment otomatis.

Buat Repository GitHub

1. Login ke GitHub

Buka browser dan akses https://github.com, kemudian login dengan akun Anda.

2. Buat Repository Baru

• Klik tombol "+" di pojok kanan atas
• Pilih "New repository"
• Atau langsung akses: https://github.com/new

3. Konfigurasi Repository

Isi form pembuatan repository dengan detail berikut:

Repository name:

resto-landing-page

Atau gunakan nama yang deskriptif sesuai project Anda, contoh:

• nama-restaurant-website
• restaurant-landing
• my-restaurant-site

Description (optional):

Restaurant landing page built with HTML and Tailwind CSS

Visibility:

• Pilih "Public" jika ingin repository bisa dilihat siapa saja
• Pilih "Private" jika ingin repository hanya bisa diakses oleh Anda (tetap bisa di-deploy ke Vercel)

Initialize repository:

• JANGAN centang "Add a README file"
• JANGAN centang "Add .gitignore"
• JANGAN pilih license

Alasan: Kita sudah punya project lokal dengan file-file ini, jadi tidak perlu inisialisasi dari GitHub.

4. Klik "Create repository"

Setelah klik, Anda akan melihat halaman dengan instruksi setup. Biarkan halaman ini terbuka, kita akan gunakan command-nya nanti.

Initial Git

Sekarang kita akan menginisialisasi Git di project lokal dan push ke GitHub.

1. Buka Terminal/Command Prompt

Buka terminal atau command prompt, kemudian masuk ke folder project:

cd path/to/resto-main

Contoh:

# Windows
cd D:\\Projects\\resto-main

# Mac/Linux
cd ~/Documents/Projects/resto-main

2. Inisialisasi Git Repository

Jalankan command berikut untuk membuat repository Git lokal:

git init

Output yang akan muncul:

Initialized empty Git repository in /path/to/resto-main/.git/

3. Tambahkan Remote Repository

Connect repository lokal dengan GitHub repository yang baru dibuat. Copy URL dari halaman GitHub yang tadi dibuka.

git remote add origin <https://github.com/username/resto-landing-page.git>

Ganti username dengan username GitHub Anda dan resto-landing-page dengan nama repository Anda.

4. Periksa File yang Akan Di-commit

Cek status file dalam project:

git status

Anda akan melihat daftar semua file yang belum di-track (berwarna merah).

5. Tambahkan Semua File ke Staging

git add .

Command ini akan menambahkan semua file ke staging area. Cek lagi dengan:

git status

Sekarang file akan berwarna hijau, artinya siap di-commit.

6. Commit Perubahan

Buat commit pertama dengan message yang jelas:

git commit -m "Initial commit: Add restaurant landing page template"

7. Rename Branch ke Main (jika perlu)

GitHub sekarang menggunakan main sebagai branch default. Pastikan branch Anda bernama main:

git branch -M main

8. Push ke GitHub

Push semua file ke GitHub repository:

git push -u origin main

Jika diminta username dan password:

• Username: masukkan username GitHub Anda
• Password: gunakan Personal Access Token (bukan password akun)

Untuk membuat Personal Access Token:

1. GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Generate new token
3. Beri nama token, pilih expiration, centang "repo"
4. Generate dan copy token (simpan di tempat aman)

9. Verifikasi Upload

Setelah push berhasil, refresh halaman GitHub repository Anda. Semua file project seharusnya sudah muncul.

Struktur Repository yang Benar

Pastikan struktur file di GitHub terlihat seperti ini:

resto-landing-page/
├── .vscode/
├── src/
│   ├── assets/
│   ├── js/
│   ├── input.css
│   └── output.css
├── .gitignore
├── index.html
├── package.json
└── package-lock.json

File index.html HARUS berada di root folder (tidak di dalam subfolder) agar Vercel bisa mendeteksi sebagai static site.

Tips dan Best Practices

File .gitignore

Pastikan file .gitignore sudah ada dan berisi:

node_modules/
.DS_Store
*.log
.env

Ini mencegah file yang tidak perlu (seperti node_modules) ikut ter-upload ke GitHub.

Commit Message

Gunakan commit message yang jelas dan deskriptif:

• "Initial commit: Add restaurant landing page"
• "Update: Change primary color to green"
• "Fix: Correct image path in popular section"
• "Feature: Add new chef profile"

Branching Strategy (Optional)

Untuk project sederhana, satu branch main sudah cukup. Tapi jika ingin lebih terorganisir:

• main: production-ready code
• development: untuk development dan testing
• feature/nama-feature: untuk fitur baru

Troubleshooting

Error: "remote origin already exists"

Jika Anda sudah pernah add remote, hapus dulu kemudian add lagi:

git remote remove origin
git remote add origin <https://github.com/username/resto-landing-page.git>

Error: "failed to push some refs"

Biasanya karena ada conflict atau remote repository tidak kosong. Solusi:

git pull origin main --allow-unrelated-histories
git push -u origin main

Authentication Failed

Jika authentication gagal, pastikan:

1. Username benar
2. Menggunakan Personal Access Token (bukan password)
3. Token memiliki scope "repo"

Atau gunakan SSH key untuk authentikasi yang lebih mudah.

File Tidak Muncul di GitHub

Periksa:

1. Apakah file sudah di-add dengan git add .
2. Apakah sudah di-commit dengan git commit
3. Apakah sudah di-push dengan git push
4. Periksa .gitignore jangan sampai file penting ter-ignore

Update Project di Masa Depan

Setelah initial push, untuk update project:

# 1. Edit file Anda
# 2. Add changes
git add .

# 3. Commit dengan message yang jelas
git commit -m "Update: Change hero section copywriting"

# 4. Push ke GitHub
git push origin main

Setelah push, Vercel akan otomatis detect changes dan re-deploy website Anda (kita akan setup ini di bagian selanjutnya).

Deploy ke Vercel

Setelah project berhasil di-upload ke GitHub, langkah terakhir adalah deploy ke Vercel. Vercel akan otomatis build dan host website Anda dengan URL yang bisa langsung diakses.

Import GitHub Repository

1. Login ke Vercel

Buka browser dan akses https://vercel.com, kemudian login dengan akun Anda.

Jika belum punya akun, buat akun baru dengan salah satu opsi:

• Continue with GitHub (recommended)
• Continue with GitLab
• Continue with Bitbucket
• Continue with Email

Disarankan menggunakan "Continue with GitHub" agar proses integrasi lebih mudah.

2. Akses Dashboard

Setelah login, Anda akan masuk ke Vercel Dashboard. Klik tombol "Add New..." atau "New Project" untuk membuat deployment baru.

3. Import Git Repository

Di halaman "Import Git Repository":

• Anda akan melihat list repository dari GitHub Anda
• Jika ini pertama kali, Vercel akan minta permission untuk akses GitHub
• Klik "Install" atau "Authorize Vercel" untuk memberikan akses

4. Cari dan Pilih Repository

Cari repository yang sudah dibuat sebelumnya:

• Ketik nama repository di search box: resto-landing-page
• Atau scroll untuk mencari repository Anda
• Klik tombol "Import" di sebelah repository yang ingin di-deploy

5. Konfigurasi Project Settings

Setelah import, Anda akan masuk ke halaman "Configure Project":

Project Name:

resto-landing-page

Atau ubah sesuai keinginan. Nama ini akan menjadi bagian dari URL:

<https://resto-landing-page.vercel.app>

Framework Preset:

Other

Pilih "Other" karena ini adalah static HTML site, bukan framework seperti Next.js atau React.

Root Directory:

Ganti (root directory) karena index.html ada di src folder.

Build and Output Settings:

Vercel akan otomatis detect bahwa ini adalah static site. Anda tidak perlu mengubah setting apapun di bagian ini:

• Build Command: (leave empty)
• Output Directory: (leave empty)
• Install Command: (leave empty)

Static HTML tidak memerlukan build process, jadi biarkan kosong.

Environment Variables:

Untuk project sederhana ini, Anda tidak perlu menambahkan environment variables. Lewati bagian ini.

Deploy

1. Klik "Deploy"

Setelah konfigurasi selesai, klik tombol biru "Deploy" di bagian bawah halaman.

2. Proses Deployment

Vercel akan mulai proses deployment:

• Building: Vercel menyiapkan environment
• Deploying: Upload dan configure files
• Ready: Website sudah live

Proses ini biasanya memakan waktu 30-60 detik.

Anda bisa melihat log real-time di halaman deployment untuk monitor progress.

3. Deployment Berhasil

Setelah selesai, Anda akan melihat halaman konfirmasi dengan animasi confetti dan pesan:

Di halaman ini Anda akan mendapatkan:

Production URL:

<https://resto-landing-page-three.vercel.app/>

Atau dengan format:

<https://resto-landing-page-username.vercel.app>

4. Preview Website

Klik tombol "Visit" atau klik URL untuk membuka website Anda yang sudah live.

Test semua fitur:

• Navigation menu berfungsi
• Slider ads bergerak dengan baik
• Hover effects pada card bekerja
• Dropdown filter lokasi berfungsi
• Tab chef interaktif bekerja
• Semua gambar tampil dengan benar
• Tombol CTA mengarah ke link yang benar

Penutup

Anda telah berhasil mengedit dan deploy website restaurant dari template hingga live di Vercel. Berikut yang sudah Anda kuasai:

• Edit logo, warna brand, dan navigation menu
• Customisasi semua section dengan konten dan gambar sendiri
• Compile Tailwind CSS dengan command line
• Version control dengan Git dan GitHub
• Deploy otomatis ke Vercel dengan URL production

Website Anda sekarang live, loading cepat, dan akan auto-deploy setiap kali push ke GitHub.

Rekomendasi Template

Untuk project lainnya, kunjungi https://shaynakit.com untuk berbagai template HTML dan Tailwind CSS berkualitas tinggi dengan:

• Clean code dan struktur yang rapi
• Desain modern dan profesional
• Siap pakai dan mudah di-customize
• Harga terjangkau

Tingkatkan Skill Anda

Untuk belajar web development lebih dalam, kunjungi https://buildwithangga.com dengan:

• Course project-based dari basic hingga advanced
• Materi video berkualitas HD
• Lifetime access dan sertifikat
• Community support dari mentor berpengalaman

Next Steps

Setelah tutorial ini, Anda bisa:

1. Tambahkan meta tags untuk SEO
2. Setup Google Analytics
3. Implementasikan form reservation yang functional
4. Integrasikan payment gateway untuk online ordering
5. Optimize performance dengan lazy loading images

Selamat berkarya dan sukses untuk website restaurant Anda!