# 📚 PANDUAN LENGKAP HALAMAN HOME + CSS

## 📋 Daftar Isi
1. [Struktur Halaman](#struktur-halaman)
2. [Setiap Bagian Dijelaskan](#setiap-bagian-dijelaskan)
3. [CSS Styling Breakdown](#css-styling-breakdown)
4. [Responsive Design](#responsive-design)
5. [Animasi & Interaksi](#animasi--interaksi)

---

## 🏗️ STRUKTUR HALAMAN

```
HOME PAGE (home.blade.php)
│
├─ 1️⃣ HERO SECTION (Bagian Atas)
│  ├─ Background Slider (Gambar Bergeser)
│  ├─ Text Content (Judul, Deskripsi, Button)
│  └─ Social Media Links
│
├─ 2️⃣ TRACKING SECTION
│  ├─ Tab: Lacak Paket
│  └─ Tab: Cek Tarif (dengan Form Lengkap)
│
├─ 3️⃣ SERVICES SECTION
│  └─ Grid Kartu Layanan
│
├─ 4️⃣ ABOUT SECTION
│  └─ Zig-Zag Layout (Text + Image Bergantian)
│
├─ 5️⃣ WHY US & STEPS (Dark Background)
│  ├─ Why Us Grid (3 Kolom)
│  └─ How It Works (4 Langkah)
│
├─ 6️⃣ NETWORK SECTION
│  └─ Daftar Kota Distribusi
│
├─ 7️⃣ FAQ SECTION
│  └─ Accordion Pertanyaan
│
├─ 8️⃣ PROMO SECTION
│  └─ Grid Kartu Promo
│
├─ 9️⃣ TESTIMONIALS
│  └─ Kartu Testimoni
│
├─ 🔟 CLIENTS LOGOS
│  └─ Marquee Slider (Tiga Baris)
│
└─ 1️⃣1️⃣ CONTACT SECTION
   └─ Info Kontak + Gambar
```

---

## 📝 SETIAP BAGIAN DIJELASKAN

### 1️⃣ HERO SECTION
**File:** `home.blade.php` (Baris 7-79)

#### Struktur HTML:
```html
<section id="home" class="hero-section-modern">
  <!-- Layer 1: Background Slider -->
  <div class="hero-bg-slider">
    <div class="hero-slide-item active" 
         style="background-image: url(...)">
    </div>
    <div class="hero-overlay-mask"></div>
  </div>

  <!-- Layer 2: Text Content (di atas) -->
  <div class="hero-content-front">
    <div class="hero-layout-grid">
      <!-- Kolom Kiri: Text -->
      <div class="hero-text-col">
        <!-- Badge dengan pulse dot -->
        <div class="hero-badge">
          <span class="pulse-dot"></span> Text
        </div>
        
        <!-- Judul Besar -->
        <h1>Kirim Barang <span class="text-highlight">Lebih Mudah & Aman</span></h1>
        
        <!-- Deskripsi -->
        <div class="hero-desc">Text deskripsi...</div>
        
        <!-- Tombol Aksi -->
        <div class="hero-actions">
          <a href="#" class="btn-primary-glow">Hubungi Sales</a>
          <a href="#" class="btn-outline-light">Lihat Layanan</a>
        </div>
        
        <!-- Social Media -->
        <div class="hero-social-links">
          <!-- Link ke Instagram, FB, dll -->
        </div>
      </div>

      <!-- Kolom Kanan: Gambar -->
      <div class="hero-card-col">
        <div class="hero-image-free">
          <img src="..." alt="Delivery">
        </div>
      </div>
    </div>
  </div>
</section>
```

#### Data dari Database:
- `$banners` → Gambar background slider
- `$heroText` → Judul, subtitle, button, gambar promo
- `$globalSocials` → Link social media

#### CSS Key Classes:
| Class | Fungsi |
|-------|--------|
| `.hero-section-modern` | Container utama (90vh tinggi) |
| `.hero-bg-slider` | Layer background gambar |
| `.hero-slide-item` | Setiap slide (opacity transisi) |
| `.hero-overlay-mask` | Gradient mask (gelap dari kiri) |
| `.hero-content-front` | Layer text di atas (z-index 10) |
| `.hero-layout-grid` | Grid 2 kolom (55% text, 45% image) |
| `.hero-badge` | Badge dengan pulsing dot hijau |
| `.text-highlight` | Warna kuning emas untuk highlight |
| `.btn-primary-glow` | Tombol merah dengan glow effect |
| `.pulse-dot` | Animasi titik hijau yang bersinar |

---

### 2️⃣ TRACKING SECTION
**File:** `home.blade.php` (Baris 82-131)

#### Struktur:
```html
<section id="tracking" class="section">
  <div class="floating-box">
    <!-- Header dengan 2 Tab -->
    <div class="box-header">
      <button class="tab-btn active" onclick="openTab('resi')">
        Lacak Paket
      </button>
      <button class="tab-btn" onclick="openTab('tarif')">
        Cek Tarif
      </button>
    </div>

    <!-- Tab 1: Tracking -->
    <div class="box-body" id="tab-resi">
      <form action="{{ route('tracking.standard') }}" method="GET">
        <div class="input-group">
          <input type="text" name="resi" placeholder="Masukkan Nomor Resi">
          <button type="submit" class="btn-action">LACAK SEKARANG</button>
        </div>
      </form>
      <p class="helper-text">*Gunakan koma (,) untuk melacak lebih dari satu resi</p>
    </div>

    <!-- Tab 2: Shipping Rate Check -->
    <div class="box-body hidden" id="tab-tarif">
      <form action="{{ route('shipping.check') }}" method="GET">
        <!-- Grid 2 kolom: origin + destination -->
        <div class="grid-form-row grid-two">
          <select name="origin">...</select>
          <select name="destination">...</select>
        </div>

        <!-- Grid 3 kolom: subdistrict + village + weight -->
        <div class="grid-form-row grid-three">
          <select name="subdistrict">...</select>
          <select name="village">...</select>
          <input type="number" name="weight" value="1">
        </div>

        <button type="submit" class="btn-red-block">CEK HARGA SEKARANG</button>
      </form>
    </div>
  </div>
</section>
```

#### CSS Key Classes:
| Class | Fungsi |
|-------|--------|
| `.section` | Padding 80px top/bottom |
| `#tracking` | Margin negatif untuk overlap hero |
| `.floating-box` | Kartu putih dengan shadow |
| `.box-header` | Tab navigation bar |
| `.tab-btn` | Tombol tab (ganti warna saat active) |
| `.box-body` | Konten tab (hidden jika tidak aktif) |
| `.input-group` | Flex row untuk input + button |
| `.grid-form` | Grid form responsive |
| `.form-col` | Satu kolom form |

---

### 3️⃣ SERVICES SECTION
**File:** `home.blade.php` (Baris 134-157)

#### Struktur:
```html
<section id="services" class="section">
  <div class="section-title text-center">
    <h2>Layanan Unggulan Kami</h2>
    <p>Pilih kategori layanan...</p>
  </div>

  <div class="services-grid">
    @foreach($services as $service)
    <div class="service-card">
      <!-- Gambar -->
      <div class="service-img-wrapper">
        <img src="{{ $service->icon }}" alt="{{ $service->name }}">
      </div>

      <!-- Konten -->
      <div class="service-content">
        <h3>{{ $service->name }}</h3>
        <div class="service-desc">{{ Str::limit(strip_tags($service->description), 150) }}</div>
      </div>

      <!-- Footer -->
      <div class="service-footer">
        <a href="{{ route('services.show', $service) }}" class="btn-selengkapnya">
          Selengkapnya <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </div>
    @endforeach
  </div>
</section>
```

#### CSS Key Classes:
| Class | Fungsi |
|-------|--------|
| `.services-grid` | CSS Grid auto-fit |
| `.service-card` | Kartu dengan hover effect |
| `.service-img-wrapper` | Container gambar 200px |
| `.service-content` | Padding konten |
| `.service-desc` | Text deskripsi limited |
| `.btn-selengkapnya` | Link dengan arrow icon |

---

### 4️⃣ ABOUT SECTION (ZIG-ZAG)
**File:** `home.blade.php` (Baris 160-217)

#### Struktur:
```html
<section id="about" class="section bg-light">
  @foreach($abouts as $key => $about)
  
  <!-- Row Pertama: Text Kiri, Gambar Kanan -->
  <div class="about-row-item">
    
    <!-- Kolom Gambar -->
    <div class="about-col-image">
      <div class="image-frame-modern">
        <img src="{{ asset('storage/' . $about->image) }}" alt="">
      </div>
      <div class="pattern-dots"></div>
    </div>

    <!-- Kolom Text -->
    <div class="about-col-text">
      @if($loop->first)
        <span class="sub-title">TENTANG DINO LOGISTICS</span>
      @endif

      <h2>{{ $about->title }}</h2>
      <div class="content-text-body">{!! $about->content !!}</div>

      <!-- Grid Poin (3 kolom) -->
      <div class="about-points-grid">
        <div class="point-card">
          <div class="point-icon"><i class="fas fa-check"></i></div>
          <span>{{ $about->point_1 }}</span>
        </div>
      </div>

      <!-- Tombol (hanya item pertama) -->
      @if($loop->first)
      <div class="about-btn-wrapper">
        <a href="#contact" class="btn-hero-primary">Hubungi Kami</a>
      </div>
      @endif
    </div>
  </div>

  <!-- Row Kedua: Gambar Kiri, Text Kanan (row-reverse) -->
  @endforeach
</section>
```

#### CSS Key Classes:
| Class | Fungsi |
|-------|--------|
| `.about-row-item` | Flex row dengan gap 60px |
| `.row-reverse` | Flex-direction reverse (image di kiri) |
| `.about-col-image` | Flex 1, relative untuk pattern dots |
| `.image-frame-modern` | Rotate -2deg, border white 6px |
| `.about-col-text` | Flex 1, position relative |
| `.sub-title` | Badge teks uppercase |
| `.about-points-grid` | Grid 3 kolom auto-fit |
| `.point-card` | Flex dengan icon circle |

**Logic ZigZag:**
```
$isReverse = ($key % 2 == 1);  // Index 1, 3, 5... = reverse
```
- Item 0: Text Kiri, Image Kanan
- Item 1: Image Kiri, Text Kanan (row-reverse)
- Item 2: Text Kiri, Image Kanan
- dll...

---

### 5️⃣ WHY US & HOW IT WORKS (Dark Wrapper)
**File:** `home.blade.php` (Baris 220-326)

#### Struktur WHY US:
```html
<div class="wrapper-dark">
  <div class="why-us-grid">
    <div class="why-item">
      <i class="fas fa-shield-halved"></i>
      <h4>Keamanan Maksimal</h4>
      <p>Barang dilindungi...</p>
    </div>
    <!-- 3 item total -->
  </div>
</div>
```

#### Struktur HOW IT WORKS:
```html
<div class="how-it-works-wrapper">
  <div class="steps-grid">
    <div class="step-item">
      <div class="step-icon-box">
        <i class="fas fa-clipboard-list"></i>
        <span class="step-badge">1</span>
      </div>
      <h4>Pesan</h4>
      <p>Input data via App.</p>
    </div>
    <!-- 4 item total: Pesan → Pick-up → Transit → Diterima -->
  </div>
</div>
```

#### CSS Key Classes:
| Class | Fungsi |
|-------|--------|
| `.wrapper-dark` | Background gelap (#111827) |
| `.why-us-grid` | Grid 3 kolom |
| `.why-item` | Text center, padding 30px |
| `.why-item i` | Icon 48px, scale on hover |
| `.steps-grid` | Grid 4 kolom dengan ::before line |
| `.step-icon-box` | Circle 80px dengan icon + badge |
| `.step-badge` | Nomor (1,2,3,4) di top-right |
| `.steps-grid::before` | Garis penghubung (2px) |

---

### 6️⃣ NETWORK SECTION
**File:** `home.blade.php` (Baris 327-333)

```html
<div class="section-header">
  <h2>Jaringan Nasional</h2>
  <p>Titik distribusi kami tersebar...</p>
</div>
<div class="network-wrapper">
  <div class="city-list">
    @foreach($chunkedBranches as $group)
      @foreach($group as $branch)
        <div class="city-item">{{ $branch['name'] }}</div>
      @endforeach
    @endforeach
  </div>
</div>
```

---

### 7️⃣ FAQ SECTION
**File:** `home.blade.php` (Baris 334-345)

```html
<div class="faq-wrapper">
  @foreach($faqs as $index => $faq)
  <div class="faq-item">
    <input type="checkbox" id="faq{{ $index }}" class="faq-toggle">
    <label for="faq{{ $index }}" class="faq-header">
      {{ $faq->question }} 
      <i class="fas fa-chevron-down"></i>
    </label>
    <div class="faq-body">{!! $faq->answer !!}</div>
  </div>
  @endforeach
</div>
```

#### CSS Key Classes:
| Class | Fungsi |
|-------|--------|
| `.faq-wrapper` | Max-width 900px, margin auto |
| `.faq-item` | Background semi-transparent |
| `.faq-toggle` | Hidden checkbox (trigger) |
| `.faq-header` | Flex between, cursor pointer |
| `.faq-body` | Hidden default, show saat checked |
| `.faq-toggle:checked ~ .faq-body` | Display block saat active |

---

### 8️⃣ PROMO SECTION
**File:** `home.blade.php` (Baris 348-368)

```html
<section id="promo" class="section">
  <div class="promo-grid">
    @foreach($promos as $promo)
    <div class="promo-card">
      <!-- Gambar dengan Badge -->
      <div class="promo-img" style="background-image: url(...)">
        <span class="badge">Promo</span>
      </div>

      <!-- Konten -->
      <div class="promo-content">
        <h3>{{ $promo->name }}</h3>
        <p>{{ Str::limit(strip_tags($promo->description), 100) }}</p>
        <a href="{{ route('promos.show', $promo->id) }}" class="link-promo">
          Lihat Detail
        </a>
      </div>
    </div>
    @endforeach
  </div>
</section>
```

---

### 9️⃣ TESTIMONIALS & CLIENTS
**File:** `home.blade.php` (Baris 371-401)

```html
<!-- Testimonials -->
<section class="section bg-light">
  <div class="services-grid">
    @foreach($testimonials as $testi)
    <div class="card" style="padding: 30px;">
      <p>"{{ $testi['quote'] }}"</p>
      <h4>{{ $testi['name'] }}</h4>
      <small>{{ $testi['role'] }}</small>
    </div>
    @endforeach
  </div>
</section>

<!-- Clients (Marquee 3-baris) -->
<section class="clients">
  <div class="container">
    @foreach($clients as $client)
      <img src="{{ asset('storage/' . $client->image) }}" alt="{{ $client->name }}">
    @endforeach
  </div>
</section>
```

---

### 🔟 CONTACT SECTION
**File:** `home.blade.php` (Baris 403-433)

```html
<section id="contact" class="section bg-light">
  <div class="contact-wrapper-section">
    <!-- Info Box (Kiri) -->
    <div class="contact-info-box">
      <h3>Informasi Pusat</h3>
      @if($contact)
        <div class="info-item">
          <i class="fas fa-map-marker-alt"></i>
          <div>
            <h4>Alamat</h4>
            <p>{{ $contact->address }}</p>
          </div>
        </div>
        <!-- Phone, Email -->
      @endif
    </div>

    <!-- Gambar (Kanan) -->
    <div class="contact-image-box">
      <img src="https://images.unsplash.com/..." alt="Support">
    </div>
  </div>
</section>
```

#### CSS Key Classes:
| Class | Fungsi |
|-------|--------|
| `.contact-wrapper-section` | Grid 2 kolom (1fr 1.2fr) |
| `.contact-info-box` | White box, padding 32px |
| `.info-item` | Flex gap 16px, border bottom |
| `.contact-image-box` | Hover scale 1.02 |

---

## 🎨 CSS STYLING BREAKDOWN

### File: `home-cleanup.css`

#### 1️⃣ **Color Variables** (diasumsikan di main CSS)
```css
--clr-primary: #0554c6 (Biru)
--clr-secondary: #FFD54F (Kuning/Emas)
--clr-accent: #FF3D00 (Merah Dino)
--clr-text-main: #1f2937
--clr-text-muted: #6b7280
--clr-bg-light: #f9fafb
--clr-dark-bg: #111827
```

#### 2️⃣ **Hero Section CSS**
```css
.hero-section-modern {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 650px;
  background: #000;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
}

.hero-bg-slider {
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  z-index: 1;
}

.hero-slide-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0; /* Hidden default */
  transform: scale(1.1); /* Zoom effect */
  transition: opacity 1s ease, transform 6s linear;
}

.hero-slide-item.active {
  opacity: 1; /* Visible */
  transform: scale(1); /* Zoom out effect */
}

.hero-overlay-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.85) 0%,    /* Gelap kiri */
    rgba(0, 0, 0, 0.40) 50%,   /* Sedang tengah */
    rgba(0, 0, 0, 0) 100%       /* Transparan kanan */
  );
  z-index: 2;
}

.hero-content-front {
  position: absolute;
  inset: 0;
  z-index: 10; /* Di atas semua */
  display: flex;
  align-items: center;
}

.hero-layout-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* 55% : 45% */
  gap: 40px;
  align-items: center;
  padding-top: 60px;
}
```

#### 3️⃣ **Typography Hero**
```css
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  backdrop-filter: blur(5px); /* Frosted glass effect */
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #00E676; /* Hijau neon */
  border-radius: 50%;
  box-shadow: 0 0 10px #00E676; /* Glow effect */
  animation: pulse 2s infinite;
}

.hero-text-col h1 {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.text-highlight {
  color: #FFD54F; /* Kuning emas */
  display: inline-block;
}

.hero-desc {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 35px;
  max-width: 90%;
}
```

#### 4️⃣ **Buttons**
```css
.btn-primary-glow {
  background: #FF3D00; /* Merah Dino */
  color: white;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(255, 61, 0, 0.4); /* Glow */
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-primary-glow:hover {
  transform: translateY(-3px); /* Floating up */
  box-shadow: 0 5px 25px rgba(255, 61, 0, 0.6); /* Brighter glow */
  color: white;
}

.btn-outline-light {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-outline-light:hover {
  background: white;
  color: #0554c6; /* Berubah ke biru */
  border-color: white;
}
```

#### 5️⃣ **Animations**
```css
@keyframes pulse {
  0% { 
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); 
  }
  70% { 
    box-shadow: 0 0 0 10px rgba(0, 230, 118, 0); 
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); 
  }
}

@keyframes marquee-ltr {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

@keyframes marquee-rtl {
  0% { transform: translateX(-25%); }
  100% { transform: translateX(0); }
}
```

---

## 📱 RESPONSIVE DESIGN

### Breakpoints:
```
Desktop:  > 1200px
Tablet:   992px - 1200px
Mobile:   < 768px
```

### Hero Section Responsive:

**Desktop (1200px+):**
- Height: 90vh
- Grid: 2 kolom (55% text, 45% image)
- H1: 54px
- Padding top: 60px

**Tablet (992px):**
- Height: 85vh
- Grid: 2 kolom (masih sama)
- H1: 42px
- Padding top: 50px

**Mobile (<576px):**
```css
.hero-section-modern {
  height: 85vh;
  min-height: 500px;
  border-radius: 0 0 20px 20px;
}

.hero-layout-grid {
  grid-template-columns: 1fr; /* Single column */
  gap: 20px;
  padding-top: 40px;
}

.hero-text-col h1 {
  font-size: 32px; /* Lebih kecil */
  line-height: 1.2;
}

.hero-actions {
  flex-direction: column; /* Buttons stack */
  gap: 12px;
}

.hero-image-free {
  height: 300px; /* Lebih kecil */
  max-width: 100%;
}
```

### Services Grid Responsive:
```css
/* Desktop */
.services-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Tablet */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
```

### About Section Responsive:
```css
/* Desktop */
.about-row-item {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 100px;
}

/* Tablet */
@media (max-width: 992px) {
  .about-row-item,
  .about-row-item.row-reverse {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 60px;
  }

  .about-col-image,
  .about-col-text {
    flex: 1 100%;
  }

  .image-frame-modern {
    transform: rotate(0deg);
  }
}
```

---

## ✨ ANIMASI & INTERAKSI

### 1️⃣ **Slider Auto-Play** (JavaScript)
```javascript
// File: home.blade.php (di @push("scripts"))
document.addEventListener("DOMContentLoaded", function() {
  let slides = document.querySelectorAll('.hero-slide-item');
  let dots = document.querySelectorAll('.slide-dots .dot');
  let currentSlide = 0;
  let slideInterval;

  function showSlide(n) {
    slides[currentSlide].classList.remove('active');
    if(dots[currentSlide]) dots[currentSlide].classList.remove('active');
    
    currentSlide = (n + slides.length) % slides.length;
    
    slides[currentSlide].classList.add('active');
    if(dots[currentSlide]) dots[currentSlide].classList.add('active');
  }

  function nextSlide() { showSlide(currentSlide + 1); }
  function prevSlide() { showSlide(currentSlide - 1); }

  // Tombol navigasi
  document.querySelector('.next-slide').addEventListener('click', () => {
    nextSlide();
    resetTimer();
  });

  // Auto-play setiap 5 detik
  function startTimer() { 
    slideInterval = setInterval(nextSlide, 5000); 
  }
  function resetTimer() { 
    clearInterval(slideInterval); 
    startTimer(); 
  }

  startTimer();
});
```

**Efek Visual:**
- Slide opacity: 0 → 1 (transition 1s)
- Slide transform: scale(1.1) → scale(1) (transition 6s)
- Zoom-out effect saat slide aktif

### 2️⃣ **Tab Switching**
```css
.tab-btn {
  padding: 16px 20px;
  border-bottom: 3px solid transparent;
  color: var(--clr-text-muted);
  transition: all 0.3s ease;
}

.tab-btn.active {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
}

.box-body {
  /* Visible when tab is active */
}

.box-body.hidden {
  display: none; /* Hidden saat inactive */
}
```

### 3️⃣ **Card Hover Effects**

**Service Card:**
```css
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px); /* Naik 8px */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); /* Shadow lebih besar */
  border-color: var(--clr-primary); /* Border biru */
}

.service-card:hover .service-img-wrapper img {
  transform: scale(1.05); /* Zoom image 5% */
}
```

**About Card (Point):**
```css
.point-card {
  transition: transform 0.3s ease;
}

.point-card:hover {
  transform: translateY(-5px); /* Naik 5px */
  border-color: var(--clr-primary);
}
```

### 4️⃣ **FAQ Accordion**
```css
.faq-toggle {
  display: none; /* Hide checkbox */
}

.faq-body {
  display: none; /* Hidden default */
}

.faq-toggle:checked ~ .faq-body {
  display: block; /* Show saat checked */
}

.faq-toggle:checked ~ .faq-header i {
  transform: rotate(180deg); /* Arrow rotate */
  color: var(--clr-secondary); /* Berubah warna */
}
```

### 5️⃣ **Marquee Animation (Clients)**
```css
.marquee-track-inner {
  animation: marquee-ltr 40s linear infinite;
}

.marquee-track.track-2 .marquee-track-inner {
  animation: marquee-rtl 36s linear infinite; /* Arah berlawanan */
}

@keyframes marquee-ltr {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}
```

**Cara Kerja:**
- Logo list di-duplicate 4x (seamless)
- Translate -25% = pindah ke 1 set
- Infinite loop memberikan efek seamless

---

## 🔍 CHEAT SHEET SINGKAT

| Elemen | Kelas | Fungsi |
|--------|-------|--------|
| Hero Container | `.hero-section-modern` | 90vh height, dark background |
| Hero Text | `.hero-text-col h1` | 54px bold white text |
| Hero Button | `.btn-primary-glow` | Red dengan glow effect |
| Badge | `.hero-badge` | Frosted glass dengan pulse dot |
| Tracking Box | `.floating-box` | White card dengan shadow |
| Service Card | `.service-card` | Hover: translateY(-8px) |
| About Row | `.about-row-item` | Flex row gap 60px |
| About Reverse | `.row-reverse` | Flex-direction reverse |
| Why Grid | `.why-us-grid` | Grid 3 kolom dark bg |
| Steps | `.steps-grid` | Grid 4 kolom dengan line |
| FAQ | `.faq-toggle:checked ~ .faq-body` | Show/hide accordion |
| Promo | `.promo-card` | Hover: translateY(-8px) |
| Contact | `.contact-wrapper-section` | Grid 1fr 1.2fr |
| Clients | `.marquee-track-inner` | Animation infinite |

---

## 📊 DATA FLOW (Database → View)

```
Controller/Method
    ↓
$data = [
  'banners' → Banner::all() → Loop di .hero-slide-item
  'heroText' → HeroBannerText::first() → H1, subtitle, button
  'globalSocials' → SocialMedia::all() → Social links
  'origins' → City::all() → Select origin
  'services' → Service::all() → Service cards
  'abouts' → About::all() → About sections
  'chunkedBranches' → Branch::all()->chunk(4) → Network list
  'faqs' → Faq::all() → FAQ items
  'promos' → Promo::all() → Promo cards
  'testimonials' → Hard-coded array → Testimonial cards
  'clients' → Client::all() → Marquee logos
  'contact' → Contact::first() → Contact info
]
    ↓
View (home.blade.php)
    ↓
Render HTML dengan CSS dari home-cleanup.css
```

---

## 📝 NOTES PENTING

1. **Gradient Overlay**: Gradient lebih tipis di sisi kanan untuk menampilkan gambar promo di kolom kanan
2. **Z-Index Stack**: 
   - 1: Background slider
   - 2: Overlay mask
   - 10: Content front
3. **Responsive Strategy**: Mobile-first ada di media queries
4. **Colors**:
   - Biru: #0554c6 (Primary CTA)
   - Merah: #FF3D00 (Accent/Danger)
   - Kuning: #FFD54F (Highlight/Secondary)
   - Hitam: #111827 (Dark background)
5. **Animations**: Smooth transitions (0.3s ease) untuk semua interactive elements
6. **Performance**: Lazy loading untuk images, backdrop-filter dengan caution

---

**Dibuat untuk:** Study & Reference  
**Update:** February 2026  
**Struktur:** Lengkap dengan contoh code