From 6273d1a31d0603de195324b7c11870da00e394d3 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 20 Jun 2026 12:04:58 +0700
Subject: [PATCH] feat: integrate homepage settings management in Admin and
 HomeController, enhancing homepage configuration capabilities

---
 .../Admin/System/SettingController.php        |  13 +
 app/Http/Controllers/HomeController.php       |   7 +-
 .../System/Setting/HomepageSettingRequest.php |  42 ++
 app/Models/HomepageConfiguration.php          |  35 ++
 .../System/Setting/HomepageSettingService.php |  55 ++
 app/Settings/HomepageSettings.php             |  89 +++
 ...0_create_homepage_configurations_table.php |  21 +
 ..._06_20_110000_create_homepage_settings.php |  89 +++
 ...000_rename_deal_to_gallery_in_homepage.php |  32 +
 .../admin/setting/HomepageSection.vue         | 116 ++++
 resources/js/layouts/SettingLayout.vue        |   3 +-
 resources/js/pages/Home.vue                   | 571 +++++++-----------
 .../js/pages/admin/system/setting/Index.vue   |   4 +
 resources/js/types/setting.ts                 |  14 +-
 routes/web.php                                |   4 +
 15 files changed, 745 insertions(+), 350 deletions(-)
 create mode 100644 app/Http/Requests/Admin/System/Setting/HomepageSettingRequest.php
 create mode 100644 app/Models/HomepageConfiguration.php
 create mode 100644 app/Services/System/Setting/HomepageSettingService.php
 create mode 100644 app/Settings/HomepageSettings.php
 create mode 100644 database/migrations/2026_06_20_130000_create_homepage_configurations_table.php
 create mode 100644 database/settings/2026_06_20_110000_create_homepage_settings.php
 create mode 100644 database/settings/2026_06_20_120000_rename_deal_to_gallery_in_homepage.php
 create mode 100644 resources/js/components/admin/setting/HomepageSection.vue

diff --git a/app/Http/Controllers/Admin/System/SettingController.php b/app/Http/Controllers/Admin/System/SettingController.php
index efd7af8..213f851 100644
--- a/app/Http/Controllers/Admin/System/SettingController.php
+++ b/app/Http/Controllers/Admin/System/SettingController.php
@@ -4,10 +4,12 @@
 
 use App\Http\Controllers\Concerns\FlashesEntityMessage;
 use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\System\Setting\HomepageSettingRequest;
 use App\Http\Requests\Admin\System\Setting\HrSettingRequest;
 use App\Http\Requests\Admin\System\Setting\MarketplaceRequest;
 use App\Http\Requests\Admin\System\Setting\SocialMediaRequest;
 use App\Http\Requests\Admin\System\Setting\SystemRequest;
+use App\Services\System\Setting\HomepageSettingService;
 use App\Services\System\Setting\HrSettingService;
 use App\Services\System\Setting\MarketplaceService;
 use App\Services\System\Setting\SocialMediaService;
@@ -25,6 +27,7 @@ public function __construct(
         private readonly SocialMediaService $socialMediaService,
         private readonly MarketplaceService $marketplaceService,
         private readonly HrSettingService $hrSettingService,
+        private readonly HomepageSettingService $homepageSettingService,
     ) {}
 
     public function index(): Response
@@ -34,6 +37,7 @@ public function index(): Response
             'socialMedia' => $this->socialMediaService->socialMediaData(),
             'marketplace' => $this->marketplaceService->marketplaceData(),
             'hr' => $this->hrSettingService->hrData(),
+            'homepage' => $this->homepageSettingService->homepageData(),
         ]);
     }
 
@@ -72,4 +76,13 @@ public function updateHr(HrSettingRequest $request): RedirectResponse
 
         return redirect()->route('admin.system.setting.index');
     }
+
+    public function updateHomepage(HomepageSettingRequest $request): RedirectResponse
+    {
+        $this->homepageSettingService->updateHomepage($request->validated());
+
+        $this->flashSuccess('Pengaturan homepage berhasil disimpan.');
+
+        return redirect()->route('admin.system.setting.index');
+    }
 }
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 5b723f9..e05479b 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -7,6 +7,7 @@
 use App\Models\Product;
 use App\Models\SystemConfiguration;
 use App\Services\Manage\CuttingResultPriceResolver;
+use App\Services\System\Setting\HomepageSettingService;
 use App\Settings\SocialMediaSettings;
 use App\Settings\SystemSettings;
 use App\Support\Media\MediaPresenter;
@@ -17,6 +18,7 @@ class HomeController extends Controller
 {
     public function __construct(
         private readonly CuttingResultPriceResolver $cuttingResultPriceResolver,
+        private readonly HomepageSettingService $homepageSettingService,
     ) {}
 
     public function index(): Response
@@ -60,10 +62,12 @@ public function index(): Response
         $settings = app(SystemSettings::class);
         $socialSettings = app(SocialMediaSettings::class);
 
+        $appName = $settings->app_name ?? 'DST Collection';
+
         return Inertia::render('Home', [
             'categories' => $categories,
             'products' => $products,
-            'appName' => $settings->app_name ?? 'DST Collection',
+            'appName' => $appName,
             'aboutApp' => $settings->about_app ?? '',
             'contactEmail' => $settings->email ?? '',
             'contactPhone' => $settings->phone ?? '',
@@ -72,6 +76,7 @@ public function index(): Response
             'instagramUrl' => $socialSettings->instagram_url ?? null,
             'facebookUrl' => $socialSettings->facebook_url ?? null,
             'tiktokUrl' => $socialSettings->tiktok_url ?? null,
+            'homepage' => $this->homepageSettingService->homepageData(),
         ]);
     }
 }
diff --git a/app/Http/Requests/Admin/System/Setting/HomepageSettingRequest.php b/app/Http/Requests/Admin/System/Setting/HomepageSettingRequest.php
new file mode 100644
index 0000000..ca363fb
--- /dev/null
+++ b/app/Http/Requests/Admin/System/Setting/HomepageSettingRequest.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Requests\Admin\System\Setting;
+
+use App\Enums\Permission;
+use Illuminate\Foundation\Http\FormRequest;
+
+class HomepageSettingRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return $this->user()?->can(Permission::SETTINGS_UPDATE->value) ?? false;
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function rules(): array
+    {
+        return [
+            'hero_image' => ['nullable', 'image', 'max:5120'],
+            'about_image' => ['nullable', 'image', 'max:5120'],
+            'gallery_images' => ['nullable', 'array', 'max:10'],
+            'gallery_images.*' => ['image', 'max:5120'],
+            'gallery_images_remove' => ['nullable', 'array'],
+            'gallery_images_remove.*' => ['integer'],
+        ];
+    }
+
+    /**
+     * @return array<string, string>
+     */
+    public function attributes(): array
+    {
+        return [
+            'hero_image' => 'Foto Hero',
+            'about_image' => 'Foto Tentang Kami',
+            'gallery_images' => 'Foto Lookbook',
+            'gallery_images.*' => 'Foto Lookbook',
+        ];
+    }
+}
diff --git a/app/Models/HomepageConfiguration.php b/app/Models/HomepageConfiguration.php
new file mode 100644
index 0000000..aa1ce3d
--- /dev/null
+++ b/app/Models/HomepageConfiguration.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Models;
+
+use App\Models\Concerns\HasModuleMedia;
+use App\Models\Concerns\InteractsWithActivityLog;
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Spatie\MediaLibrary\HasMedia;
+
+#[Guarded(['id'])]
+class HomepageConfiguration extends Model implements HasMedia
+{
+    use HasFactory;
+    use HasModuleMedia;
+    use InteractsWithActivityLog;
+
+    public static function mediaModuleName(): string
+    {
+        return 'homepage';
+    }
+
+    public static function instance(): self
+    {
+        return static::query()->firstOrCreate(['id' => 1]);
+    }
+
+    public function registerMediaCollections(): void
+    {
+        $this->addMediaCollection('hero_image')->singleFile();
+        $this->addMediaCollection('about_image')->singleFile();
+        $this->addMediaCollection('gallery')->singleFile();
+    }
+}
diff --git a/app/Services/System/Setting/HomepageSettingService.php b/app/Services/System/Setting/HomepageSettingService.php
new file mode 100644
index 0000000..be5e3c9
--- /dev/null
+++ b/app/Services/System/Setting/HomepageSettingService.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Services\System\Setting;
+
+use App\Models\HomepageConfiguration;
+use App\Services\Media\MediaService;
+use App\Support\Media\MediaPresenter;
+use Illuminate\Http\UploadedFile;
+
+class HomepageSettingService
+{
+    public function __construct(
+        private readonly MediaService $mediaService,
+    ) {}
+
+    public function homepageData(): array
+    {
+        $configuration = HomepageConfiguration::instance();
+        $configuration->load('media');
+
+        $heroImage = MediaPresenter::first($configuration, 'hero_image');
+        $aboutImage = MediaPresenter::first($configuration, 'about_image');
+        $galleryImages = MediaPresenter::collection($configuration, 'gallery');
+
+        return [
+            'hero_image_url' => $heroImage['url'] ?? null,
+            'about_image_url' => $aboutImage['url'] ?? null,
+            'gallery_images' => $galleryImages,
+        ];
+    }
+
+    public function updateHomepage(array $validated): void
+    {
+        $configuration = HomepageConfiguration::instance();
+
+        if (isset($validated['hero_image']) && $validated['hero_image'] instanceof UploadedFile) {
+            $this->mediaService->replaceSingleFile($configuration, $validated['hero_image'], 'hero_image', 'hero-image');
+        }
+
+        if (isset($validated['about_image']) && $validated['about_image'] instanceof UploadedFile) {
+            $this->mediaService->replaceSingleFile($configuration, $validated['about_image'], 'about_image', 'about-image');
+        }
+
+        if (isset($validated['gallery_images'])) {
+            $this->mediaService->syncCollection(
+                $configuration,
+                'gallery',
+                $validated['gallery_images'] ?? [],
+                $validated['gallery_images_remove'] ?? [],
+                10,
+                'gallery',
+            );
+        }
+    }
+}
diff --git a/app/Settings/HomepageSettings.php b/app/Settings/HomepageSettings.php
new file mode 100644
index 0000000..bbc52bc
--- /dev/null
+++ b/app/Settings/HomepageSettings.php
@@ -0,0 +1,89 @@
+<?php
+
+namespace App\Settings;
+
+use Spatie\LaravelSettings\Settings;
+
+class HomepageSettings extends Settings
+{
+    // Hero Section
+    public string $hero_badge;
+
+    public string $hero_title_line1;
+
+    public string $hero_title_line2;
+
+    public string $hero_title_highlight;
+
+    public string $hero_description;
+
+    public string $hero_cta_primary_text;
+
+    public string $hero_cta_secondary_text;
+
+    public ?string $hero_image_url;
+
+    public string $hero_bg_text_left;
+
+    public string $hero_bg_text_right;
+
+    // Scroll Indicator
+    public string $scroll_hashtag;
+
+    public string $scroll_tagline;
+
+    // Catalog Section
+    public string $catalog_badge;
+
+    public string $catalog_title;
+
+    public string $catalog_description;
+
+    public string $catalog_search_placeholder;
+
+    // Gallery Section
+    public string $gallery_badge;
+
+    public string $gallery_title;
+
+    public string $gallery_description;
+
+    public array $gallery_images;
+
+    // Order Guide Section
+    public string $order_guide_badge;
+
+    public string $order_guide_title;
+
+    public string $order_guide_description;
+
+    public array $order_steps;
+
+    // About Section
+    public string $about_badge;
+
+    public string $about_title;
+
+    public ?string $about_image_url;
+
+    public array $about_features;
+
+    // Contact Section
+    public string $contact_badge;
+
+    public string $contact_title;
+
+    public string $contact_description;
+
+    public string $contact_form_title;
+
+    // Footer
+    public string $footer_description;
+
+    public string $footer_copyright;
+
+    public static function group(): string
+    {
+        return 'homepage';
+    }
+}
diff --git a/database/migrations/2026_06_20_130000_create_homepage_configurations_table.php b/database/migrations/2026_06_20_130000_create_homepage_configurations_table.php
new file mode 100644
index 0000000..4256aba
--- /dev/null
+++ b/database/migrations/2026_06_20_130000_create_homepage_configurations_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('homepage_configurations', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('homepage_configurations');
+    }
+};
diff --git a/database/settings/2026_06_20_110000_create_homepage_settings.php b/database/settings/2026_06_20_110000_create_homepage_settings.php
new file mode 100644
index 0000000..13cc1a1
--- /dev/null
+++ b/database/settings/2026_06_20_110000_create_homepage_settings.php
@@ -0,0 +1,89 @@
+<?php
+
+use Spatie\LaravelSettings\Migrations\SettingsBlueprint;
+use Spatie\LaravelSettings\Migrations\SettingsMigration;
+
+return new class extends SettingsMigration
+{
+    public function up(): void
+    {
+        $this->migrator->inGroup('homepage', function (SettingsBlueprint $blueprint): void {
+            // Hero Section
+            $blueprint->add('hero_badge', 'Koleksi Segar 2026');
+            $blueprint->add('hero_title_line1', 'Ekspresikan');
+            $blueprint->add('hero_title_line2', 'Gaya');
+            $blueprint->add('hero_title_highlight', 'Segar Anda');
+            $blueprint->add('hero_description', 'Selamat datang di {app_name}. Temukan keanggunan motif batik modern dan setelan pakaian santai berkualitas premium. Dirancang khusus dengan bahan adem yang menyejukkan aktivitas harian Anda.');
+            $blueprint->add('hero_cta_primary_text', 'Beli Sekarang');
+            $blueprint->add('hero_cta_secondary_text', 'Tentang Kami');
+            $blueprint->add('hero_image_url', 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&auto=format&fit=crop&q=80');
+            $blueprint->add('hero_bg_text_left', 'DST');
+            $blueprint->add('hero_bg_text_right', 'Collection');
+
+            // Scroll Indicator
+            $blueprint->add('scroll_hashtag', '#DSTCollection');
+            $blueprint->add('scroll_tagline', 'Bahan Adem & Lembut');
+
+            // Catalog Section
+            $blueprint->add('catalog_badge', 'Katalog Eksklusif');
+            $blueprint->add('catalog_title', 'Koleksi Busana Pilihan');
+            $blueprint->add('catalog_description', 'Gunakan kategori dan filter di bawah untuk menyesuaikan pencarian busana idaman Anda dengan mudah.');
+            $blueprint->add('catalog_search_placeholder', 'Cari nama pakaian...');
+
+            // Deal Section
+            $blueprint->add('deal_badge', 'Promo Terbatas');
+            $blueprint->add('deal_title', 'Penawaran Bulan Ini');
+            $blueprint->add('deal_description', 'Jangan lewatkan promosi batik dan daster eksklusif kami! Dapatkan potongan harga spesial up to 25% untuk varian daster pilihan dan setelan pakaian modern. Dapatkan kenyamanan ekstra dengan bahan menyejukkan sebelum masa promo habis!');
+            $blueprint->add('deal_cta_text', 'Jelajahi Produk Diskon');
+            $blueprint->add('deal_images', [
+                'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80',
+            ]);
+
+            // Order Guide Section
+            $blueprint->add('order_guide_badge', 'Langkah Pemesanan');
+            $blueprint->add('order_guide_title', 'Cara Melakukan Pemesanan');
+            $blueprint->add('order_guide_description', 'Sistem pemesanan kami sangat mudah dan terhubung langsung via WhatsApp untuk pelayanan cepat dan personal.');
+            $blueprint->add('order_steps', [
+                [
+                    'title' => 'Pilih Produk',
+                    'description' => 'Jelajahi pakaian batik dan daster favorit Anda, lalu ketuk "Lihat Detail" untuk memeriksa ukuran.',
+                ],
+                [
+                    'title' => 'Pilih Varian & Harga',
+                    'description' => 'Tentukan varian ukuran yang diinginkan dan pilih jenis harga (Eceran, Grosir, Agen, dll.).',
+                ],
+                [
+                    'title' => 'Masukkan Keranjang',
+                    'description' => 'Masukkan ke Keranjang Belanja untuk menampung seluruh daftar pakaian yang ingin Anda beli.',
+                ],
+                [
+                    'title' => 'Kirim ke WhatsApp',
+                    'description' => 'Klik tombol kirim pesanan, admin kami akan merespons rincian transfer bank dan pengiriman kurir.',
+                ],
+            ]);
+
+            // About Section
+            $blueprint->add('about_badge', 'Tentang Kami');
+            $blueprint->add('about_title', 'DST Collection');
+            $blueprint->add('about_image_url', 'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80');
+            $blueprint->add('about_features', [
+                'Kain Rayon Super Tebal & Menyerap Keringat',
+                'Motif Eksklusif & Tidak Pasaran',
+                'Dukungan Penuh Layanan Admin Via WhatsApp',
+            ]);
+
+            // Contact Section
+            $blueprint->add('contact_badge', 'Kontak Kami');
+            $blueprint->add('contact_title', 'Ada Pertanyaan? Hubungi Kami');
+            $blueprint->add('contact_description', 'Kami sangat senang mendengarkan pertanyaan Anda terkait spesifikasi produk, ketersediaan grosir, atau kemitraan. Hubungi tim admin kami melalui media di bawah.');
+            $blueprint->add('contact_form_title', 'Kirim Pesan Cepat');
+
+            // Footer
+            $blueprint->add('footer_description', 'Galeri resmi {app_name}. Pilihan busana lokal premium berpotongan modern dengan kenyamanan menyejukkan.');
+            $blueprint->add('footer_copyright', '&copy; 2026 {app_name} DST Collection. Hak Cipta Dilindungi.');
+        });
+    }
+};
diff --git a/database/settings/2026_06_20_120000_rename_deal_to_gallery_in_homepage.php b/database/settings/2026_06_20_120000_rename_deal_to_gallery_in_homepage.php
new file mode 100644
index 0000000..29eeac2
--- /dev/null
+++ b/database/settings/2026_06_20_120000_rename_deal_to_gallery_in_homepage.php
@@ -0,0 +1,32 @@
+<?php
+
+use Spatie\LaravelSettings\Migrations\SettingsBlueprint;
+use Spatie\LaravelSettings\Migrations\SettingsMigration;
+
+return new class extends SettingsMigration
+{
+    public function up(): void
+    {
+        $this->migrator->inGroup('homepage', function (SettingsBlueprint $blueprint): void {
+            // Delete old deal fields
+            $blueprint->delete('deal_badge');
+            $blueprint->delete('deal_title');
+            $blueprint->delete('deal_description');
+            $blueprint->delete('deal_cta_text');
+            $blueprint->delete('deal_images');
+
+            // Add new gallery fields
+            $blueprint->add('gallery_badge', 'Galeri Kami');
+            $blueprint->add('gallery_title', 'Koleksi Lookbook');
+            $blueprint->add('gallery_description', 'Intip koleksi lookbook kami untuk inspirasi gaya sehari-hari. Padu padan batik modern dan daster yang nyaman untuk berbagai suasana.');
+            $blueprint->add('gallery_images', [
+                'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=800&auto=format&fit=crop&q=80',
+                'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&auto=format&fit=crop&q=80',
+            ]);
+        });
+    }
+};
diff --git a/resources/js/components/admin/setting/HomepageSection.vue b/resources/js/components/admin/setting/HomepageSection.vue
new file mode 100644
index 0000000..3323207
--- /dev/null
+++ b/resources/js/components/admin/setting/HomepageSection.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import { Save } from '@lucide/vue';
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+import ImageUploadField from '@/components/form/image-upload-field/ImageUploadField.vue';
+import MultipleImageUploadField from '@/components/form/image-upload-field/MultipleImageUploadField.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { createMediaUploadState } from '@/types/media';
+import type { HomepageSettingsData } from '@/types/setting';
+import type { MediaUploadState } from '@/types/media';
+
+const props = defineProps<{
+    data: HomepageSettingsData;
+}>();
+
+const heroImage = ref<File | null>(null);
+const aboutImage = ref<File | null>(null);
+const galleryState = ref<MediaUploadState>(
+    createMediaUploadState(props.data.gallery_images),
+);
+const isSubmitting = ref(false);
+
+function submit() {
+    isSubmitting.value = true;
+
+    const formData = new FormData();
+
+    if (heroImage.value) {
+        formData.append('hero_image', heroImage.value);
+    }
+
+    if (aboutImage.value) {
+        formData.append('about_image', aboutImage.value);
+    }
+
+    galleryState.value.newFiles.forEach((file) => {
+        formData.append('gallery_images[]', file);
+    });
+
+    galleryState.value.removeIds.forEach((id) => {
+        formData.append('gallery_images_remove[]', String(id));
+    });
+
+    router.put('/admin/system/setting/homepage', formData, {
+        preserveScroll: true,
+        onSuccess: () => {
+            toast.success('Pengaturan homepage berhasil disimpan.');
+            heroImage.value = null;
+            aboutImage.value = null;
+        },
+        onError: () => {
+            toast.error('Gagal menyimpan pengaturan homepage.');
+        },
+        onFinish: () => {
+            isSubmitting.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <form @submit.prevent="submit">
+        <div class="grid gap-4">
+
+            <!-- Hero Image -->
+            <Card>
+                <CardContent>
+                    <ImageUploadField
+                        id="hero_image"
+                        label="Foto Hero"
+                        description="Foto utama yang ditampilkan di bagian hero homepage."
+                        :current-url="props.data.hero_image_url"
+                        v-model="heroImage"
+                        preview-class="aspect-[3/4] max-w-xs"
+                    />
+                </CardContent>
+            </Card>
+
+            <!-- Gallery / Lookbook -->
+            <Card>
+                <CardContent>
+                    <MultipleImageUploadField
+                        id="gallery_images"
+                        label="Koleksi Lookbook"
+                        description="Foto-foto yang ditampilkan di galeri lookbook."
+                        :max-files="10"
+                        v-model="galleryState"
+                    />
+                </CardContent>
+            </Card>
+
+            <!-- About Image -->
+            <Card>
+                <CardContent>
+                    <ImageUploadField
+                        id="about_image"
+                        label="Foto Tentang Kami"
+                        description="Foto yang ditampilkan di bagian tentang kami."
+                        :current-url="props.data.about_image_url"
+                        v-model="aboutImage"
+                        preview-class="aspect-video max-w-md"
+                    />
+                </CardContent>
+            </Card>
+
+            <div class="flex justify-end">
+                <Button type="submit" :disabled="isSubmitting">
+                    <Save class="size-4" />
+                    {{ isSubmitting ? 'Menyimpan...' : 'Simpan' }}
+                </Button>
+            </div>
+        </div>
+    </form>
+</template>
diff --git a/resources/js/layouts/SettingLayout.vue b/resources/js/layouts/SettingLayout.vue
index bcdad3e..d00f51b 100644
--- a/resources/js/layouts/SettingLayout.vue
+++ b/resources/js/layouts/SettingLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Settings2, Share2, ShoppingBag, Users } from '@lucide/vue';
+import { Home, Settings2, Share2, ShoppingBag, Users } from '@lucide/vue';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import { cn } from '@/lib/utils';
 import type { SettingSection } from '@/types/setting';
@@ -12,6 +12,7 @@ const navItems: Array<{
     icon: typeof Settings2;
 }> = [
         { key: 'system', label: 'Sistem', icon: Settings2 },
+        { key: 'homepage', label: 'Homepage', icon: Home },
         { key: 'social', label: 'Media Sosial', icon: Share2 },
         { key: 'marketplace', label: 'Marketplace', icon: ShoppingBag },
         { key: 'hr', label: 'HR / Pegawai', icon: Users },
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index e04c8d0..3da05a6 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -3,8 +3,6 @@ import { Head } from '@inertiajs/vue3';
 import {
     Search,
     ShoppingBag,
-    Sun,
-    Moon,
     X,
     Plus,
     Minus,
@@ -19,7 +17,7 @@ import {
     Mail,
     Filter
 } from '@lucide/vue';
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed } from 'vue';
 import RupiahInput from '@/components/form/rupiah-input/RupiahInput.vue';
 import Select from '@/components/ui/select/Select.vue';
 import SelectContent from '@/components/ui/select/SelectContent.vue';
@@ -67,6 +65,18 @@ interface Product {
     variants: Variant[];
 }
 
+interface MediaItem {
+    id: number;
+    url: string;
+    thumb_url: string;
+}
+
+interface HomepageData {
+    hero_image_url: string | null;
+    about_image_url: string | null;
+    gallery_images: MediaItem[];
+}
+
 const props = defineProps<{
     categories: Category[];
     products: Product[];
@@ -79,20 +89,9 @@ const props = defineProps<{
     instagramUrl: string | null;
     facebookUrl: string | null;
     tiktokUrl: string | null;
+    homepage: HomepageData;
 }>();
 
-// Dark Mode State
-const isDark = ref(false);
-const toggleDarkMode = () => {
-    isDark.value = !isDark.value;
-
-    if (isDark.value) {
-        document.documentElement.classList.add('dark');
-    } else {
-        document.documentElement.classList.remove('dark');
-    }
-};
-
 // Search & Catalog Filter State
 const searchInput = ref('');
 const selectedCategory = ref<string | null>(null);
@@ -101,6 +100,22 @@ const maxPrice = ref<number | null>(null);
 const sortBy = ref<string>('default'); // 'default', 'price_asc', 'price_desc', 'name_asc'
 const showFilters = ref(false);
 
+// Hardcoded order steps
+const orderSteps = [
+    { title: 'Pilih Produk', description: 'Jelajahi katalog kami dan pilih produk yang Anda sukai.' },
+    { title: 'Hubungi Kami', description: 'Hubungi kami melalui WhatsApp untuk konfirmasi pesanan.' },
+    { title: 'Pembayaran', description: 'Lakukan pembayaran melalui transfer bank atau metode lainnya.' },
+    { title: 'Pesanan Dikirim', description: 'Pesanan Anda akan segera dikirim ke alamat tujuan.' },
+];
+
+// Hardcoded about features
+const aboutFeatures = [
+    'Kain Premium & Adem',
+    'Jahitan Rapi & Berkualitas',
+    'Motif Eksklusif & Unik',
+    'Pengiriman ke Seluruh Indonesia',
+];
+
 const toggleCategory = (slug: string) => {
     selectedCategory.value = selectedCategory.value === slug ? null : slug;
 };
@@ -230,42 +245,6 @@ const featuredProducts = computed(() => {
     return props.products.slice(0, 3);
 });
 
-// Countdown Timer
-const days = ref(0);
-const hours = ref(0);
-const minutes = ref(0);
-const seconds = ref(0);
-
-const startCountdown = () => {
-    const now = new Date();
-    const target = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
-
-    const update = () => {
-        const current = new Date().getTime();
-        const diff = target.getTime() - current;
-
-        if (diff <= 0) {
-            days.value = 0;
-            hours.value = 0;
-            minutes.value = 0;
-            seconds.value = 0;
-
-            return;
-        }
-
-        days.value = Math.floor(diff / (1000 * 60 * 60 * 24));
-        hours.value = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        minutes.value = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-        seconds.value = Math.floor((diff % (1000 * 60)) / 1000);
-    };
-
-    update();
-    const interval = setInterval(update, 1000);
-
-    return interval;
-};
-
-let countdownInterval: any;
 
 // Cart System
 interface CartItem {
@@ -383,16 +362,7 @@ const resetPriceFilters = () => {
     sortBy.value = 'default';
 };
 
-onMounted(() => {
-    isDark.value = document.documentElement.classList.contains('dark');
-    countdownInterval = startCountdown();
-});
 
-onUnmounted(() => {
-    if (countdownInterval) {
-clearInterval(countdownInterval);
-}
-});
 </script>
 
 <template>
@@ -401,10 +371,10 @@ clearInterval(countdownInterval);
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
     </Head>
 
-    <div class="min-h-screen bg-gradient-to-tr from-cyan-50/20 via-[#FDFDFC] to-sky-50/30 text-slate-800 transition-colors duration-300 dark:from-slate-950 dark:via-[#0E1726] dark:to-cyan-950/20 dark:text-slate-100 font-sans scroll-smooth">
+    <div class="min-h-screen bg-gradient-to-tr from-amber-50/20 via-[#FDFDFC] to-yellow-50/30 text-slate-800 transition-colors duration-300 font-sans scroll-smooth">
 
         <!-- Sticky Header & Navbar -->
-        <header class="sticky top-0 z-40 bg-white/70 backdrop-blur-lg dark:bg-[#0E1726]/70 border-b border-cyan-100/50 dark:border-cyan-950/30 transition-all">
+        <header class="sticky top-0 z-40 bg-white/70 backdrop-blur-lg border-b border-amber-100/50 transition-all">
             <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
 
                 <!-- Logo Frame from settings -->
@@ -416,43 +386,33 @@ clearInterval(countdownInterval);
                             :alt="appName"
                             class="h-10 w-auto object-contain p-1 rounded-lg shadow-sm"
                         />
-                        <span v-else class="font-serif text-2xl font-bold tracking-[0.1em] text-cyan-600 dark:text-cyan-400">
+                        <span v-else class="font-serif text-2xl font-bold tracking-[0.1em] text-amber-600">
                             {{ appName }}
                         </span>
                     </a>
                 </div>
 
                 <!-- Navigation Links (Indonesian) -->
-                <nav class="hidden lg:flex items-center space-x-8 text-xs font-semibold uppercase tracking-widest text-slate-600 dark:text-slate-300">
-                    <a href="#hero" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Beranda</a>
-                    <a href="#catalog" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Produk</a>
-                    <a href="#about" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Tentang Kami</a>
-                    <a href="#order-guide" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Cara Pesan</a>
-                    <a href="#contact" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Hubungi Kami</a>
+                <nav class="hidden lg:flex items-center space-x-8 text-xs font-semibold uppercase tracking-widest text-slate-600">
+                    <a href="#hero" class="hover:text-amber-600 transition-colors">Beranda</a>
+                    <a href="#catalog" class="hover:text-amber-600 transition-colors">Produk</a>
+                    <a href="#about" class="hover:text-amber-600 transition-colors">Tentang Kami</a>
+                    <a href="#order-guide" class="hover:text-amber-600 transition-colors">Cara Pesan</a>
+                    <a href="#contact" class="hover:text-amber-600 transition-colors">Hubungi Kami</a>
                 </nav>
 
-                <!-- Action Utilities (Search, Dark Mode, Cart) -->
+                <!-- Action Utilities (Cart) -->
                 <div class="flex items-center space-x-4">
-                    <!-- Theme Toggle -->
-                    <button
-                        @click="toggleDarkMode"
-                        class="p-2 rounded-full hover:bg-cyan-50 dark:hover:bg-cyan-950/20 text-slate-600 dark:text-slate-300 transition-colors cursor-pointer"
-                        aria-label="Ubah Tema"
-                    >
-                        <Sun v-if="isDark" class="w-4.5 h-4.5 text-amber-400" />
-                        <Moon v-else class="w-4.5 h-4.5 text-cyan-600" />
-                    </button>
-
                     <!-- Cart button -->
                     <button
                         @click="isCartOpen = true"
-                        class="relative p-2 rounded-full hover:bg-cyan-50 dark:hover:bg-cyan-950/20 text-slate-600 dark:text-slate-300 transition-colors cursor-pointer"
+                        class="relative p-2 rounded-full hover:bg-amber-50 text-slate-600 transition-colors cursor-pointer"
                         aria-label="Keranjang Belanja"
                     >
-                        <ShoppingBag class="w-4.5 h-4.5 text-cyan-600 dark:text-cyan-400" />
+                        <ShoppingBag class="w-4.5 h-4.5 text-amber-600" />
                         <span
                             v-if="cartCount > 0"
-                            class="absolute -top-0.5 -right-0.5 bg-cyan-600 text-white dark:bg-cyan-400 dark:text-slate-950 text-[9px] font-bold w-4.5 h-4.5 flex items-center justify-center rounded-full shadow-sm animate-bounce"
+                            class="absolute -top-0.5 -right-0.5 bg-amber-600 text-white text-[9px] font-bold w-4.5 h-4.5 flex items-center justify-center rounded-full shadow-sm animate-bounce"
                         >
                             {{ cartCount }}
                         </span>
@@ -465,8 +425,8 @@ clearInterval(countdownInterval);
         <section id="hero" class="relative min-h-[calc(100vh-80px)] flex flex-col justify-between overflow-hidden">
             <!-- Split Background Grid with Fresh Cyan Gradients -->
             <div class="absolute inset-0 grid grid-cols-1 lg:grid-cols-2 pointer-events-none z-0">
-                <div class="bg-white/40 dark:bg-slate-900/30"></div>
-                <div class="bg-gradient-to-tr from-cyan-100/30 via-sky-100/20 to-teal-50/30 dark:from-cyan-950/10 dark:via-sky-950/20 dark:to-teal-950/10 border-l border-cyan-100/20 dark:border-cyan-950/20"></div>
+                <div class="bg-white/40/30"></div>
+                <div class="bg-gradient-to-tr from-amber-100/30 via-yellow-100/20 to-orange-50/30 border-l border-amber-100/20"></div>
             </div>
 
             <!-- Main Layout Content -->
@@ -474,30 +434,30 @@ clearInterval(countdownInterval);
 
                 <!-- Left Column: Serif Text and CTA -->
                 <div class="lg:col-span-5 flex flex-col justify-center space-y-6 lg:pr-6">
-                    <div class="inline-flex items-center space-x-2 bg-cyan-500/10 dark:bg-cyan-400/10 text-[10px] text-cyan-700 dark:text-cyan-300 uppercase tracking-widest px-3 py-1 rounded-full w-fit font-bold shadow-sm">
+                    <div class="inline-flex items-center space-x-2 bg-amber-500/10/10 text-[10px] text-amber-700 uppercase tracking-widest px-3 py-1 rounded-full w-fit font-bold shadow-sm">
                         <span>Koleksi Segar 2026</span>
                     </div>
 
-                    <h1 class="text-5xl md:text-6xl font-serif leading-[1.1] tracking-tight font-light select-none text-slate-800 dark:text-slate-100">
+                    <h1 class="text-5xl md:text-6xl font-serif leading-[1.1] tracking-tight font-light select-none text-slate-800">
                         Ekspresikan <br />
-                        Gaya <span class="font-normal italic text-cyan-600 dark:text-cyan-400 bg-cyan-100/40 dark:bg-cyan-900/20 px-2 rounded-lg">Segar Anda</span>.
+                        Gaya <span class="font-normal italic text-amber-600 bg-amber-100/40/20 px-2 rounded-lg">Segar Anda</span>.
                     </h1>
 
-                    <p class="text-sm text-slate-500 dark:text-slate-300 max-w-md leading-relaxed font-light">
-                        Selamat datang di {{ appName }}. Temukan keanggunan motif batik modern dan setelan pakaian santai berkualitas premium. Dirancang khusus dengan bahan adem yang menyejukkan aktivitas harian Anda.
+                    <p class="text-sm text-slate-500 max-w-md leading-relaxed font-light">
+                        Temukan koleksi busana terbaru kami yang dirancang untuk kenyamanan dan gaya sehari-hari Anda.
                     </p>
 
                     <div class="flex items-center space-x-4 pt-4">
                         <a
                             href="#catalog"
-                            class="inline-flex items-center justify-center bg-cyan-600 text-white px-8 py-3.5 text-xs font-semibold uppercase tracking-widest rounded-xl shadow-lg shadow-cyan-200/50 hover:bg-cyan-500 hover:shadow-cyan-300/50 hover:-translate-y-0.5 transition-all duration-300 group dark:bg-cyan-500 dark:text-slate-950 dark:shadow-none dark:hover:bg-cyan-400 cursor-pointer"
+                            class="inline-flex items-center justify-center bg-amber-600 text-white px-8 py-3.5 text-xs font-semibold uppercase tracking-widest rounded-xl shadow-lg shadow-amber-200/50 hover:bg-amber-500 hover:-translate-y-0.5 transition-all duration-300 group cursor-pointer"
                         >
                             Beli Sekarang
                             <ArrowRight class="w-3.5 h-3.5 ml-2 transform group-hover:translate-x-1 transition-transform" />
                         </a>
                         <a
                             href="#about"
-                            class="inline-flex items-center justify-center border border-cyan-200 text-xs font-semibold uppercase tracking-widest px-8 py-3.5 rounded-xl hover:bg-cyan-500/5 hover:border-cyan-400 transition-all dark:border-cyan-800 dark:hover:bg-cyan-950/20 cursor-pointer"
+                            class="inline-flex items-center justify-center border border-amber-200 text-xs font-semibold uppercase tracking-widest px-8 py-3.5 rounded-xl hover:bg-amber-500/5 hover:border-amber-400 transition-all cursor-pointer"
                         >
                             Tentang Kami
                         </a>
@@ -509,34 +469,34 @@ clearInterval(countdownInterval);
 
                     <!-- Massive Overlapping Serif Heading (Behind Model) -->
                     <div class="absolute inset-0 flex justify-center items-center pointer-events-none select-none z-0">
-                        <div class="text-[14vw] lg:text-[160px] font-serif font-bold leading-none tracking-tight flex opacity-10 dark:opacity-[0.03]">
-                            <span class="text-slate-900 dark:text-white">DST</span>
-                            <span class="text-cyan-600 dark:text-cyan-400">CLO</span>
+                        <div class="text-[14vw] lg:text-[160px] font-serif font-bold leading-none tracking-tight flex opacity-10[0.03]">
+                            <span class="text-slate-900">DST</span>
+                            <span class="text-amber-600">Collection</span>
                         </div>
                     </div>
 
                     <!-- Glowing Radial Background and Animated Morphing Blobs -->
                     <div class="absolute inset-0 -z-10 flex justify-center items-center pointer-events-none select-none">
-                        <div class="absolute w-[350px] h-[350px] rounded-full bg-gradient-to-tr from-cyan-400/25 via-sky-400/20 to-teal-300/25 dark:from-cyan-900/15 dark:via-sky-900/20 dark:to-teal-900/15 blur-3xl animate-blob"></div>
-                        <div class="absolute w-[400px] h-[400px] rounded-full bg-gradient-to-br from-indigo-300/20 via-cyan-200/20 to-emerald-300/20 dark:from-indigo-950/15 dark:via-cyan-950/15 dark:to-emerald-950/15 blur-3xl animate-blob animation-delay-2000"></div>
+                        <div class="absolute w-[350px] h-[350px] rounded-full bg-gradient-to-tr from-amber-400/25 via-yellow-400/20 to-orange-300/25/15/20/15 blur-3xl animate-blob"></div>
+                        <div class="absolute w-[400px] h-[400px] rounded-full bg-gradient-to-br from-rose-300/20 via-amber-200/20 to-orange-300/20/15/15/15 blur-3xl animate-blob animation-delay-2000"></div>
                     </div>
 
                     <!-- Main Model Central Image (With Floating Animation) -->
-                    <div class="relative w-[310px] h-[440px] lg:w-[390px] lg:h-[540px] rounded-[2rem] overflow-hidden shadow-2xl shadow-cyan-100/50 dark:shadow-none z-10 transition-transform duration-500 hover:scale-[1.02] border-4 border-white dark:border-cyan-950/80 animate-float-model">
+                    <div class="relative w-[310px] h-[440px] lg:w-[390px] lg:h-[540px] rounded-[2rem] overflow-hidden shadow-2xl shadow-amber-100/50 z-10 transition-transform duration-500 hover:scale-[1.02] border-4 border-white/80 animate-float-model">
                         <img
-                            src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&auto=format&fit=crop&q=80"
+                            :src="homepage.hero_image_url || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&auto=format&fit=crop&q=80'"
                             alt="DSTCLO Model Unggulan"
                             class="w-full h-full object-cover"
                         />
                         <!-- Subtle Gradient Overlay -->
-                        <div class="absolute inset-0 bg-gradient-to-t from-cyan-950/30 via-transparent to-transparent"></div>
+                        <div class="absolute inset-0 bg-gradient-to-t from-amber-950/30 via-transparent to-transparent"></div>
                     </div>
 
                     <!-- FLOATING HERO TAG 1: Product Showcase -->
                     <div
                         v-if="featuredProducts[0]"
                         @click="openQuickView(featuredProducts[0])"
-                        class="absolute top-10 left-4 md:-left-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md dark:bg-slate-900/90 p-3 rounded-2xl shadow-lg border border-cyan-100/40 dark:border-cyan-950/85 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-1"
+                        class="absolute top-10 left-4 md:-left-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-1"
                     >
                         <img
                             :src="getProductImage(featuredProducts[0])"
@@ -544,11 +504,11 @@ clearInterval(countdownInterval);
                             class="w-10 h-10 object-cover rounded-lg"
                         />
                         <div class="text-left">
-                            <h4 class="text-[9px] font-bold text-cyan-600 dark:text-cyan-400 uppercase tracking-widest">Terpopuler</h4>
+                            <h4 class="text-[9px] font-bold text-amber-600 uppercase tracking-widest">Terpopuler</h4>
                             <p class="text-[11px] font-semibold truncate max-w-[100px]">{{ featuredProducts[0].name }}</p>
-                            <span class="text-[11px] font-bold text-cyan-600 dark:text-cyan-400">{{ getProductPriceRange(featuredProducts[0]) }}</span>
+                            <span class="text-[11px] font-bold text-amber-600">{{ getProductPriceRange(featuredProducts[0]) }}</span>
                         </div>
-                        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-cyan-50 dark:bg-cyan-950/50 text-cyan-600 dark:text-cyan-400">
+                        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-amber-50/50 text-amber-600">
                             <Plus class="w-3.5 h-3.5" />
                         </div>
                     </div>
@@ -557,7 +517,7 @@ clearInterval(countdownInterval);
                     <div
                         v-if="featuredProducts[1]"
                         @click="openQuickView(featuredProducts[1])"
-                        class="absolute top-28 right-4 md:-right-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md dark:bg-slate-900/90 p-3 rounded-2xl shadow-lg border border-cyan-100/40 dark:border-cyan-950/85 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-2"
+                        class="absolute top-28 right-4 md:-right-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-2"
                     >
                         <img
                             :src="getProductImage(featuredProducts[1], 1)"
@@ -578,41 +538,41 @@ clearInterval(countdownInterval);
             </div>
 
             <!-- Scroll Indicator -->
-            <div class="max-w-7xl mx-auto px-6 w-full flex items-center justify-between pb-8 z-10 text-xs font-semibold text-slate-500 dark:text-slate-400">
+            <div class="max-w-7xl mx-auto px-6 w-full flex items-center justify-between pb-8 z-10 text-xs font-semibold text-slate-500">
                 <div class="flex items-center space-x-3">
-                    <span class="text-cyan-600 dark:text-cyan-400">#DSTCollection</span>
-                    <span class="w-1 h-1 rounded-full bg-cyan-300"></span>
+                    <span class="text-amber-600">#DSTCollection</span>
+                    <span class="w-1 h-1 rounded-full bg-amber-300"></span>
                     <span>Bahan Adem & Lembut</span>
                 </div>
-                <a href="#catalog" class="flex items-center space-x-2 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">
+                <a href="#catalog" class="flex items-center space-x-2 hover:text-amber-600 transition-colors">
                     <span>Lihat katalog lengkap</span>
-                    <ChevronRight class="w-3.5 h-3.5 transform rotate-90 text-cyan-600" />
+                    <ChevronRight class="w-3.5 h-3.5 transform rotate-90 text-amber-600" />
                 </a>
             </div>
         </section>
 
         <!-- Catalog Section with Price Filters & Categories -->
-        <section id="catalog" class="max-w-7xl mx-auto px-6 py-20 border-t border-cyan-100/30 dark:border-cyan-950/20">
+        <section id="catalog" class="max-w-7xl mx-auto px-6 py-20 border-t border-amber-100/30">
 
             <div class="space-y-6 mb-12">
                 <div class="text-center space-y-2">
-                    <h2 class="text-xs uppercase tracking-[0.3em] font-bold text-cyan-600 dark:text-cyan-400">Katalog Eksklusif</h2>
-                    <h3 class="text-3xl font-serif text-slate-800 dark:text-white">Koleksi Busana Pilihan</h3>
-                    <p class="text-sm text-slate-500 dark:text-slate-300 max-w-lg mx-auto font-light">
-                        Gunakan kategori dan filter di bawah untuk menyesuaikan pencarian busana idaman Anda dengan mudah.
+                    <h2 class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Katalog Eksklusif</h2>
+                    <h3 class="text-3xl font-serif text-slate-800">Koleksi Busana Pilihan</h3>
+                    <p class="text-sm text-slate-500 max-w-lg mx-auto font-light">
+                        Temukan busana favorit Anda dari koleksi terbaru kami.
                     </p>
                 </div>
 
                 <!-- Interactive Filters & Search Controls bar -->
-                <div class="bg-white/80 dark:bg-[#111A2E]/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-cyan-100/30 dark:border-cyan-950/30 flex flex-col md:flex-row items-center gap-4 justify-between">
+                <div class="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-amber-100/30 flex flex-col md:flex-row items-center gap-4 justify-between">
 
                     <!-- Search Input -->
                     <div class="relative w-full md:w-80">
                         <input
                             v-model="searchInput"
                             type="text"
-                            placeholder="Cari nama pakaian..."
-                            class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-cyan-950 text-xs px-4 py-3 pr-10 rounded-xl outline-none focus:border-cyan-500 dark:focus:border-cyan-400 text-slate-700 dark:text-white transition-all"
+                            placeholder="Cari produk..."
+                            class="w-full bg-slate-50 border border-slate-200 text-xs px-4 py-3 pr-10 rounded-xl outline-none focus:border-amber-500 text-slate-700 transition-all"
                         />
                         <Search class="absolute right-3 top-3.5 w-4 h-4 text-slate-400" />
                     </div>
@@ -624,8 +584,8 @@ clearInterval(countdownInterval);
                             :class="[
                                 'px-4 py-2 text-[11px] font-semibold uppercase tracking-wider rounded-xl border transition-all cursor-pointer',
                                 !selectedCategory
-                                    ? 'bg-cyan-600 text-white border-transparent shadow-md shadow-cyan-200/50 dark:bg-cyan-500 dark:text-slate-950 dark:shadow-none'
-                                    : 'bg-transparent text-slate-600 border-slate-200 hover:border-cyan-500 dark:text-slate-300 dark:border-cyan-900/60 dark:hover:border-cyan-400'
+                                    ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/50'
+                                    : 'bg-transparent text-slate-600 border-slate-200 hover'
                             ]"
                         >
                             Semua
@@ -637,8 +597,8 @@ clearInterval(countdownInterval);
                             :class="[
                                 'px-4 py-2 text-[11px] font-semibold uppercase tracking-wider rounded-xl border transition-all cursor-pointer',
                                 selectedCategory === category.slug
-                                    ? 'bg-cyan-600 text-white border-transparent shadow-md shadow-cyan-200/50 dark:bg-cyan-500 dark:text-slate-950 dark:shadow-none'
-                                    : 'bg-transparent text-slate-600 border-slate-200 hover:border-cyan-500 dark:text-slate-300 dark:border-cyan-900/60 dark:hover:border-cyan-400'
+                                    ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/50'
+                                    : 'bg-transparent text-slate-600 border-slate-200 hover'
                             ]"
                         >
                             {{ category.name }}
@@ -648,42 +608,42 @@ clearInterval(countdownInterval);
                     <!-- Filter panel toggler -->
                     <button
                         @click="showFilters = !showFilters"
-                        class="flex items-center space-x-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-cyan-900 text-xs font-semibold text-slate-600 dark:text-slate-300 hover:border-cyan-500 dark:hover:border-cyan-400 cursor-pointer transition-colors"
+                        class="flex items-center space-x-2 px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-semibold text-slate-600 hover:border-amber-400 cursor-pointer transition-colors"
                     >
                         <Filter class="w-3.5 h-3.5" />
                         <span>Filter & Urutkan</span>
-                        <span v-if="minPrice || maxPrice || sortBy !== 'default'" class="w-2 h-2 rounded-full bg-cyan-600 dark:bg-cyan-400"></span>
+                        <span v-if="minPrice || maxPrice || sortBy !== 'default'" class="w-2 h-2 rounded-full bg-amber-600"></span>
                     </button>
                 </div>
 
                 <!-- Expandable Filter Panel -->
                 <div
                     v-if="showFilters"
-                    class="bg-white/50 dark:bg-slate-900/40 p-6 rounded-2xl border border-cyan-100/20 dark:border-cyan-950/20 grid grid-cols-1 md:grid-cols-3 gap-6 animate-fade-in-up"
+                    class="bg-white/50/40 p-6 rounded-2xl border border-amber-100/20 grid grid-cols-1 md:grid-cols-3 gap-6 animate-fade-in-up"
                 >
                     <!-- Price Range -->
                     <div class="space-y-2">
-                        <label class="text-[11px] uppercase tracking-wider font-bold text-slate-500 dark:text-slate-400">Rentang Harga</label>
+                        <label class="text-[11px] uppercase tracking-wider font-bold text-slate-500">Rentang Harga</label>
                         <div class="flex items-center space-x-2">
                             <RupiahInput
                                 v-model="minPrice"
                                 placeholder="Min"
-                                class="w-full bg-white dark:bg-slate-950 text-slate-700 dark:text-white"
+                                class="w-full bg-white text-slate-700"
                             />
                             <span class="text-xs text-slate-400">s/d</span>
                             <RupiahInput
                                 v-model="maxPrice"
                                 placeholder="Max"
-                                class="w-full bg-white dark:bg-slate-950 text-slate-700 dark:text-white"
+                                class="w-full bg-white text-slate-700"
                             />
                         </div>
                     </div>
 
                     <!-- Sort Options -->
                     <div class="space-y-2">
-                        <label class="text-[11px] uppercase tracking-wider font-bold text-slate-500 dark:text-slate-400">Urutkan Berdasarkan</label>
+                        <label class="text-[11px] uppercase tracking-wider font-bold text-slate-500">Urutkan Berdasarkan</label>
                         <Select v-model="sortBy">
-                            <SelectTrigger class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-cyan-950 px-3 py-2 text-xs rounded-lg outline-none focus:border-cyan-500 text-slate-700 dark:text-white h-10">
+                            <SelectTrigger class="w-full bg-white border border-slate-200 px-3 py-2 text-xs rounded-lg outline-none focus:border-amber-500 text-slate-700 h-10">
                                 <SelectValue placeholder="Pilih urutan" />
                             </SelectTrigger>
                             <SelectContent>
@@ -699,7 +659,7 @@ clearInterval(countdownInterval);
                     <div class="flex items-end">
                         <button
                             @click="resetPriceFilters"
-                            class="w-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-750 text-slate-700 dark:text-slate-300 py-2.5 rounded-lg text-xs font-semibold uppercase tracking-wider transition-colors cursor-pointer"
+                            class="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-lg text-xs font-semibold uppercase tracking-wider transition-colors cursor-pointer"
                         >
                             Atur Ulang Filter
                         </button>
@@ -715,14 +675,14 @@ clearInterval(countdownInterval);
                     class="group relative flex flex-col space-y-4"
                 >
                     <!-- Product Image Container -->
-                    <div class="relative aspect-[3/4] w-full overflow-hidden rounded-2xl bg-cyan-50/50 dark:bg-neutral-900 shadow-md transition-shadow hover:shadow-cyan-100/30">
+                    <div class="relative aspect-[3/4] w-full overflow-hidden rounded-2xl bg-amber-50/50 shadow-md transition-shadow hover">
                         <img
                             :src="getProductImage(product, idx)"
                             :alt="product.name"
                             class="h-full w-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
                         />
                         <!-- Subtle Gradient Overlay -->
-                        <div class="absolute inset-0 bg-gradient-to-t from-cyan-950/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                        <div class="absolute inset-0 bg-gradient-to-t from-amber-950/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
 
                         <!-- Absolute Status Badges -->
                         <div class="absolute top-4 left-4 flex flex-col space-y-2">
@@ -740,7 +700,7 @@ clearInterval(countdownInterval);
                             </span>
                             <span
                                 v-else
-                                class="bg-cyan-600 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md dark:bg-cyan-500 dark:text-slate-950"
+                                class="bg-amber-600 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md"
                             >
                                 Terbaru
                             </span>
@@ -750,7 +710,7 @@ clearInterval(countdownInterval);
                         <div class="absolute bottom-4 inset-x-4 flex justify-center opacity-0 transform translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
                             <button
                                 @click="openQuickView(product)"
-                                class="w-full flex items-center justify-center bg-white/95 backdrop-blur-sm text-slate-800 hover:bg-cyan-600 hover:text-white px-4 py-3 rounded-xl shadow-md text-xs font-bold uppercase tracking-widest transition-all duration-200 cursor-pointer"
+                                class="w-full flex items-center justify-center bg-white/95 backdrop-blur-sm text-slate-800 hover:bg-amber-600 hover:text-white px-4 py-3 rounded-xl shadow-md text-xs font-bold uppercase tracking-widest transition-all duration-200 cursor-pointer"
                             >
                                 <Eye class="w-4 h-4 mr-2" />
                                 Lihat Detail
@@ -761,22 +721,22 @@ clearInterval(countdownInterval);
                     <!-- Product Details Info -->
                     <div class="flex flex-col space-y-1">
                         <!-- Category Tags -->
-                        <span class="text-[10px] font-bold uppercase tracking-widest text-cyan-600 dark:text-cyan-400">
+                        <span class="text-[10px] font-bold uppercase tracking-widest text-amber-600">
                             {{ product.categories.map(c => c.name).join(', ') }}
                         </span>
 
                         <!-- Title -->
-                        <h4 class="text-base font-semibold text-slate-700 dark:text-neutral-200 line-clamp-1 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
+                        <h4 class="text-base font-semibold text-slate-700 line-clamp-1 group-hover transition-colors">
                             {{ product.name }}
                         </h4>
 
                         <!-- Price -->
-                        <p class="text-sm font-bold text-cyan-600 dark:text-cyan-400">
+                        <p class="text-sm font-bold text-amber-600">
                             {{ getProductPriceRange(product) }}
                         </p>
 
                         <!-- Stock Indicator -->
-                        <span class="text-[11px] text-slate-400 dark:text-neutral-500 font-light mt-0.5">
+                        <span class="text-[11px] text-slate-400 font-light mt-0.5">
                             Ukuran tersedia: {{ product.variants.map(v => v.name).join(', ') }}
                         </span>
                     </div>
@@ -785,184 +745,105 @@ clearInterval(countdownInterval);
 
             <!-- Empty Product State -->
             <div v-else class="text-center py-20 space-y-3">
-                <Info class="w-12 h-12 text-cyan-300 dark:text-neutral-700 mx-auto" />
-                <h3 class="text-lg font-medium text-slate-700 dark:text-neutral-300">Produk Tidak Ditemukan</h3>
-                <p class="text-sm text-slate-400 dark:text-neutral-500">
+                <Info class="w-12 h-12 text-amber-300 mx-auto" />
+                <h3 class="text-lg font-medium text-slate-700">Produk Tidak Ditemukan</h3>
+                <p class="text-sm text-slate-400">
                     Mohon maaf, kami tidak menemukan pakaian yang cocok dengan kata kunci pencarian Anda.
                 </p>
                 <button
                     @click="searchInput = ''; selectedCategory = null; resetPriceFilters()"
-                    class="mt-2 text-xs font-bold uppercase tracking-widest text-cyan-600 dark:text-cyan-400 underline underline-offset-4 cursor-pointer"
+                    class="mt-2 text-xs font-bold uppercase tracking-widest text-amber-600 underline underline-offset-4 cursor-pointer"
                 >
                     Reset Pencarian
                 </button>
             </div>
         </section>
 
-        <!-- Deal of the Month Section (Fresh Aqua Palette) -->
-        <section id="deal" class="w-full bg-gradient-to-br from-cyan-50/40 via-sky-50/20 to-teal-50/30 dark:from-[#0E1726]/40 dark:to-cyan-950/20 py-24 border-t border-b border-cyan-100/30 dark:border-cyan-950/20">
-            <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
-                <!-- Deal Highlight Left -->
-                <div class="lg:col-span-5 space-y-6">
-                    <span class="text-xs uppercase tracking-[0.3em] font-bold text-cyan-600 dark:text-cyan-400">Promo Terbatas</span>
-                    <h3 class="text-4xl font-serif leading-tight">Penawaran Bulan Ini</h3>
-                    <p class="text-sm text-slate-500 dark:text-slate-300 leading-relaxed font-light">
-                        Jangan lewatkan promosi batik dan daster eksklusif kami! Dapatkan potongan harga spesial up to <strong class="text-cyan-600 dark:text-cyan-400 font-semibold">25%</strong> untuk varian daster pilihan dan setelan pakaian modern. Dapatkan kenyamanan ekstra dengan bahan menyejukkan sebelum masa promo habis!
+        <!-- Gallery / Lookbook Section -->
+        <section id="gallery" class="w-full bg-gradient-to-br from-amber-50/40 via-yellow-50/20 to-orange-50/30 py-24 border-t border-b border-amber-100/30">
+            <div class="max-w-7xl mx-auto px-6 space-y-12">
+                <!-- Header -->
+                <div class="text-center space-y-3 max-w-lg mx-auto">
+                    <span class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Galeri Kami</span>
+                    <h3 class="text-4xl font-serif leading-tight">Koleksi Lookbook</h3>
+                    <p class="text-sm text-slate-500 leading-relaxed font-light">
+                        Lihat koleksi busana kami dalam balutan gaya yang elegan.
                     </p>
-
-                    <!-- Countdown Cards -->
-                    <div class="grid grid-cols-4 gap-4 py-4 max-w-sm">
-                        <div class="bg-white dark:bg-slate-900 border border-cyan-100/30 dark:border-cyan-950/30 p-4 rounded-xl text-center shadow-sm">
-                            <span class="block text-2xl font-bold font-serif text-cyan-600 dark:text-cyan-400">{{ String(days).padStart(2, '0') }}</span>
-                            <span class="text-[9px] uppercase tracking-wider text-slate-400 font-bold">Hari</span>
-                        </div>
-                        <div class="bg-white dark:bg-slate-900 border border-cyan-100/30 dark:border-cyan-950/30 p-4 rounded-xl text-center shadow-sm">
-                            <span class="block text-2xl font-bold font-serif text-cyan-600 dark:text-cyan-400">{{ String(hours).padStart(2, '0') }}</span>
-                            <span class="text-[9px] uppercase tracking-wider text-slate-400 font-bold">Jam</span>
-                        </div>
-                        <div class="bg-white dark:bg-slate-900 border border-cyan-100/30 dark:border-cyan-950/30 p-4 rounded-xl text-center shadow-sm">
-                            <span class="block text-2xl font-bold font-serif text-cyan-600 dark:text-cyan-400">{{ String(minutes).padStart(2, '0') }}</span>
-                            <span class="text-[9px] uppercase tracking-wider text-slate-400 font-bold">Menit</span>
-                        </div>
-                        <div class="bg-white dark:bg-slate-900 border border-cyan-100/30 dark:border-cyan-950/30 p-4 rounded-xl text-center shadow-sm">
-                            <span class="block text-2xl font-bold font-serif text-cyan-600 dark:text-cyan-400">{{ String(seconds).padStart(2, '0') }}</span>
-                            <span class="text-[9px] uppercase tracking-wider text-slate-400 font-bold">Detik</span>
-                        </div>
-                    </div>
-
-                    <a
-                        href="#catalog"
-                        class="inline-flex items-center justify-center bg-cyan-600 text-white px-8 py-3.5 text-xs font-semibold uppercase tracking-widest rounded-xl shadow-lg shadow-cyan-200/50 hover:bg-cyan-500 transition-all dark:bg-cyan-500 dark:text-slate-950 cursor-pointer"
-                    >
-                        Jelajahi Produk Diskon
-                    </a>
                 </div>
 
-                <!-- Featured Image Right -->
-                <div class="lg:col-span-7 grid grid-cols-2 gap-4">
-                    <div class="space-y-4">
-                        <div class="aspect-[4/5] rounded-3xl overflow-hidden shadow-md border-2 border-white dark:border-cyan-950">
-                            <img
-                                src="https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80"
-                                alt="Daster Batik parang"
-                                class="w-full h-full object-cover"
-                            />
-                        </div>
-                        <div class="aspect-square rounded-3xl overflow-hidden shadow-md border-2 border-white dark:border-cyan-950">
-                            <img
-                                src="https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?w=800&auto=format&fit=crop&q=80"
-                                alt="Daster busui styling"
-                                class="w-full h-full object-cover"
-                            />
-                        </div>
-                    </div>
-                    <div class="pt-8 space-y-4">
-                        <div class="aspect-square rounded-3xl overflow-hidden shadow-md border-2 border-white dark:border-cyan-950">
-                            <img
-                                src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80"
-                                alt="Blouse Batik Modern"
-                                class="w-full h-full object-cover"
-                            />
-                        </div>
-                        <div class="aspect-[4/5] rounded-3xl overflow-hidden shadow-md border-2 border-white dark:border-cyan-950">
-                            <img
-                                src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80"
-                                alt="Setelan Celana Batik"
-                                class="w-full h-full object-cover"
-                            />
-                        </div>
+                <!-- Gallery Grid -->
+                <div v-if="homepage.gallery_images.length > 0" class="grid grid-cols-2 md:grid-cols-3 gap-4">
+                    <div
+                        v-for="(image, index) in homepage.gallery_images"
+                        :key="image.id"
+                        class="group relative aspect-[3/4] rounded-2xl overflow-hidden shadow-md border-2 border-white cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
+                    >
+                        <img
+                            :src="image.url"
+                            :alt="`Lookbook ${Number(index) + 1}`"
+                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                        />
+                        <div class="absolute inset-0 bg-gradient-to-t from-amber-950/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                     </div>
                 </div>
+                <div v-else class="text-center py-12">
+                    <p class="text-sm text-slate-400">Belum ada foto lookbook yang ditambahkan.</p>
+                </div>
             </div>
         </section>
 
         <!-- Cara Pesan Section -->
-        <section id="order-guide" class="max-w-7xl mx-auto px-6 py-20 border-b border-cyan-100/30 dark:border-cyan-950/20">
+        <section id="order-guide" class="max-w-7xl mx-auto px-6 py-20 border-b border-amber-100/30">
             <div class="text-center space-y-3 mb-16">
-                <h3 class="text-xs uppercase tracking-[0.3em] font-bold text-cyan-600 dark:text-cyan-400">Langkah Pemesanan</h3>
-                <h4 class="text-3xl font-serif">Cara Melakukan Pemesanan</h4>
-                <p class="text-sm text-slate-500 dark:text-slate-300 max-w-md mx-auto font-light">
-                    Sistem pemesanan kami sangat mudah dan terhubung langsung via WhatsApp untuk pelayanan cepat dan personal.
+                <h3 class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Panduan</h3>
+                <h4 class="text-3xl font-serif">Cara Pemesanan</h4>
+                <p class="text-sm text-slate-500 max-w-md mx-auto font-light">
+                    Ikuti langkah-langkah mudah berikut untuk melakukan pemesanan.
                 </p>
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <!-- Step 1 -->
-                <div class="bg-white dark:bg-slate-900/50 p-6 rounded-2xl border border-cyan-100/30 dark:border-cyan-950/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform">
-                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-cyan-100/50 dark:bg-cyan-950/50 rounded-full flex items-center justify-center text-cyan-600 dark:text-cyan-400 font-bold text-xl font-serif">1</div>
-                    <div class="w-12 h-12 rounded-xl bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400 flex items-center justify-center mx-auto mb-4">
-                        <ShoppingBag class="w-5 h-5" />
+                <div
+                    v-for="(step, index) in orderSteps"
+                    :key="index"
+                    class="bg-white/50 p-6 rounded-2xl border border-amber-100/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform"
+                >
+                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-amber-100/50/50 rounded-full flex items-center justify-center text-amber-600 font-bold text-xl font-serif">{{ index + 1 }}</div>
+                    <div class="w-12 h-12 rounded-xl bg-amber-100/30 text-amber-600 flex items-center justify-center mx-auto mb-4">
+                        <ShoppingBag v-if="index === 0" class="w-5 h-5" />
+                        <Star v-else-if="index === 1" class="w-5 h-5" />
+                        <Plus v-else-if="index === 2" class="w-5 h-5" />
+                        <Phone v-else class="w-5 h-5" />
                     </div>
-                    <h5 class="font-bold text-base mb-2">Pilih Produk</h5>
+                    <h5 class="font-bold text-base mb-2">{{ step.title }}</h5>
                     <p class="text-xs text-slate-400 leading-relaxed font-light">
-                        Jelajahi pakaian batik dan daster favorit Anda, lalu ketuk "Lihat Detail" untuk memeriksa ukuran.
-                    </p>
-                </div>
-                <!-- Step 2 -->
-                <div class="bg-white dark:bg-slate-900/50 p-6 rounded-2xl border border-cyan-100/30 dark:border-cyan-950/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform">
-                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-cyan-100/50 dark:bg-cyan-950/50 rounded-full flex items-center justify-center text-cyan-600 dark:text-cyan-400 font-bold text-xl font-serif">2</div>
-                    <div class="w-12 h-12 rounded-xl bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400 flex items-center justify-center mx-auto mb-4">
-                        <Star class="w-5 h-5" />
-                    </div>
-                    <h5 class="font-bold text-base mb-2">Pilih Varian & Harga</h5>
-                    <p class="text-xs text-slate-400 leading-relaxed font-light">
-                        Tentukan varian ukuran yang diinginkan dan pilih jenis harga (Eceran, Grosir, Agen, dll.).
-                    </p>
-                </div>
-                <!-- Step 3 -->
-                <div class="bg-white dark:bg-slate-900/50 p-6 rounded-2xl border border-cyan-100/30 dark:border-cyan-950/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform">
-                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-cyan-100/50 dark:bg-cyan-950/50 rounded-full flex items-center justify-center text-cyan-600 dark:text-cyan-400 font-bold text-xl font-serif">3</div>
-                    <div class="w-12 h-12 rounded-xl bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400 flex items-center justify-center mx-auto mb-4">
-                        <Plus class="w-5 h-5" />
-                    </div>
-                    <h5 class="font-bold text-base mb-2">Masukkan Keranjang</h5>
-                    <p class="text-xs text-slate-400 leading-relaxed font-light">
-                        Masukkan ke Keranjang Belanja untuk menampung seluruh daftar pakaian yang ingin Anda beli.
-                    </p>
-                </div>
-                <!-- Step 4 -->
-                <div class="bg-white dark:bg-slate-900/50 p-6 rounded-2xl border border-cyan-100/30 dark:border-cyan-950/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform">
-                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-cyan-100/50 dark:bg-cyan-950/50 rounded-full flex items-center justify-center text-cyan-600 dark:text-cyan-400 font-bold text-xl font-serif">4</div>
-                    <div class="w-12 h-12 rounded-xl bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400 flex items-center justify-center mx-auto mb-4">
-                        <Phone class="w-5 h-5" />
-                    </div>
-                    <h5 class="font-bold text-base mb-2">Kirim ke WhatsApp</h5>
-                    <p class="text-xs text-slate-400 leading-relaxed font-light">
-                        Klik tombol kirim pesanan, admin kami akan merespons rincian transfer bank dan pengiriman kurir.
+                        {{ step.description }}
                     </p>
                 </div>
             </div>
         </section>
 
         <!-- About Us Section -->
-        <section id="about" class="max-w-7xl mx-auto px-6 py-20 border-b border-cyan-100/30 dark:border-cyan-950/20">
+        <section id="about" class="max-w-7xl mx-auto px-6 py-20 border-b border-amber-100/30">
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                 <!-- Column Left -->
-                <div class="lg:col-span-6 relative aspect-square max-w-md mx-auto lg:max-w-none rounded-3xl overflow-hidden shadow-lg border-2 border-white dark:border-cyan-950">
+                <div class="lg:col-span-6 relative aspect-square max-w-md mx-auto lg:max-w-none rounded-3xl overflow-hidden shadow-lg border-2 border-white">
                     <img
-                        src="https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80"
-                        alt="Proses Pembuatan Batik"
+                        :src="homepage.about_image_url || 'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80'"
+                        alt="Tentang Kami"
                         class="w-full h-full object-cover"
                     />
                 </div>
                 <!-- Column Right -->
                 <div class="lg:col-span-6 space-y-6">
-                    <span class="text-xs uppercase tracking-[0.3em] font-bold text-cyan-600 dark:text-cyan-400">Tentang Kami</span>
-                    <h3 class="text-3xl font-serif">DST Collection (DSTCLO)</h3>
-                    <p class="text-sm text-slate-500 dark:text-slate-300 leading-relaxed font-light whitespace-pre-line">
+                    <span class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Tentang Kami</span>
+                    <h3 class="text-3xl font-serif">Kami Menghadirkan Busana Berkualitas</h3>
+                    <p class="text-sm text-slate-500 leading-relaxed font-light whitespace-pre-line">
                         {{ aboutApp || 'Kami adalah rumah produksi busana dan batik lokal berkualitas tinggi. Berfokus pada keindahan motif, ketepatan detail jahitan, dan pemilihan kain adem yang mengedepankan aspek fungsionalitas dan estetika.' }}
                     </p>
-                    <div class="flex items-center space-x-3 text-xs text-slate-500 font-semibold">
+                    <div v-for="(feature, index) in aboutFeatures" :key="index" class="flex items-center space-x-3 text-xs text-slate-500 font-semibold">
                         <Check class="w-4 h-4 text-emerald-500" />
-                        <span>Kain Rayon Super Tebal & Menyerap Keringat</span>
-                    </div>
-                    <div class="flex items-center space-x-3 text-xs text-slate-500 font-semibold">
-                        <Check class="w-4 h-4 text-emerald-500" />
-                        <span>Motif Eksklusif & Tidak Pasaran</span>
-                    </div>
-                    <div class="flex items-center space-x-3 text-xs text-slate-500 font-semibold">
-                        <Check class="w-4 h-4 text-emerald-500" />
-                        <span>Dukungan Penuh Layanan Admin Via WhatsApp</span>
+                        <span>{{ feature }}</span>
                     </div>
                 </div>
             </div>
@@ -970,30 +851,30 @@ clearInterval(countdownInterval);
 
         <!-- Contact Section -->
         <section id="contact" class="max-w-7xl mx-auto px-6 py-20">
-            <div class="bg-white/60 dark:bg-slate-900/60 backdrop-blur-md border border-cyan-100/30 dark:border-cyan-950/30 p-8 rounded-3xl grid grid-cols-1 lg:grid-cols-2 gap-12 items-center shadow-sm">
+            <div class="bg-white/60 backdrop-blur-md border border-amber-100/30 p-8 rounded-3xl grid grid-cols-1 lg:grid-cols-2 gap-12 items-center shadow-sm">
                 <!-- Left -->
                 <div class="space-y-6">
-                    <span class="text-xs uppercase tracking-[0.3em] font-bold text-cyan-600 dark:text-cyan-400">Kontak Kami</span>
-                    <h3 class="text-3xl font-serif">Ada Pertanyaan? Hubungi Kami</h3>
-                    <p class="text-sm text-slate-500 dark:text-slate-300 leading-relaxed font-light">
-                        Kami sangat senang mendengarkan pertanyaan Anda terkait spesifikasi produk, ketersediaan grosir, atau kemitraan. Hubungi tim admin kami melalui media di bawah.
+                    <span class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Hubungi Kami</span>
+                    <h3 class="text-3xl font-serif">Mari Berdiskusi</h3>
+                    <p class="text-sm text-slate-500 leading-relaxed font-light">
+                        Jangan ragu untuk menghubungi kami jika Anda memiliki pertanyaan atau ingin melakukan pemesanan.
                     </p>
 
                     <div class="space-y-4">
                         <div v-if="contactPhone" class="flex items-center space-x-3 text-sm">
-                            <div class="w-8 h-8 rounded-lg bg-cyan-100 dark:bg-cyan-950/40 text-cyan-600 dark:text-cyan-400 flex items-center justify-center">
+                            <div class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                 <Phone class="w-4 h-4" />
                             </div>
                             <span>{{ contactPhone }}</span>
                         </div>
                         <div v-if="contactEmail" class="flex items-center space-x-3 text-sm">
-                            <div class="w-8 h-8 rounded-lg bg-cyan-100 dark:bg-cyan-950/40 text-cyan-600 dark:text-cyan-400 flex items-center justify-center">
+                            <div class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                 <Mail class="w-4 h-4" />
                             </div>
                             <span>{{ contactEmail }}</span>
                         </div>
                         <div v-if="contactAddress" class="flex items-center space-x-3 text-sm">
-                            <div class="w-8 h-8 rounded-lg bg-cyan-100 dark:bg-cyan-950/40 text-cyan-600 dark:text-cyan-400 flex items-center justify-center">
+                            <div class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                 <MapPin class="w-4 h-4" />
                             </div>
                             <span>{{ contactAddress }}</span>
@@ -1002,11 +883,11 @@ clearInterval(countdownInterval);
                 </div>
 
                 <!-- Right Form/Quick Message Mock -->
-                <div class="bg-slate-50 dark:bg-slate-950 p-6 rounded-2xl border border-slate-200 dark:border-cyan-950 space-y-4">
+                <div class="bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-4">
                     <h4 class="font-bold text-base">Kirim Pesan Cepat</h4>
                     <div class="space-y-3">
-                        <input type="text" placeholder="Nama Anda" class="w-full text-xs px-4 py-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-cyan-950 rounded-lg outline-none focus:border-cyan-500 text-slate-700 dark:text-white" />
-                        <textarea placeholder="Tulis pesan Anda di sini..." rows="4" class="w-full text-xs px-4 py-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-cyan-950 rounded-lg outline-none focus:border-cyan-500 text-slate-700 dark:text-white scrollbar-thin"></textarea>
+                        <input type="text" placeholder="Nama Anda" class="w-full text-xs px-4 py-3 bg-white border border-slate-200 rounded-lg outline-none focus:border-amber-500 text-slate-700" />
+                        <textarea placeholder="Tulis pesan Anda di sini..." rows="4" class="w-full text-xs px-4 py-3 bg-white border border-slate-200 rounded-lg outline-none focus:border-amber-500 text-slate-700 scrollbar-thin"></textarea>
 
                         <!-- WhatsApp Direct Send Button -->
                         <a
@@ -1023,7 +904,7 @@ clearInterval(countdownInterval);
         </section>
 
         <!-- Brand Footer -->
-        <footer class="bg-white text-slate-600 dark:bg-[#070D19] dark:text-slate-400 py-16 border-t border-cyan-100/30 dark:border-cyan-950/20">
+        <footer class="bg-white text-slate-600 py-16 border-t border-amber-100/30">
             <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
                 <!-- Brand Profile -->
                 <div class="space-y-4">
@@ -1032,57 +913,53 @@ clearInterval(countdownInterval);
                             v-if="logoUrl"
                             :src="logoUrl"
                             :alt="appName"
-                            class="h-8 w-auto object-contain bg-white p-0.5 rounded shadow-sm"
+                            class="h-8 w-auto object-contain p-0.5 rounded shadow-sm"
                         />
-                        <span v-else class="font-serif text-xl font-bold tracking-widest text-black dark:text-white text-cyan-600 dark:text-cyan-400">
+                        <span v-else class="font-serif text-xl font-bold tracking-widest text-black text-amber-600">
                             {{ appName }}
                         </span>
                     </div>
                     <p class="text-xs text-slate-400 leading-relaxed font-light">
-                        Galeri resmi {{ appName }}. Pilihan busana lokal premium berpotongan modern dengan kenyamanan menyejukkan.
+                        Rumah produksi busana dan batik lokal berkualitas tinggi. Menghadirkan desain eksklusif untuk gaya sehari-hari Anda.
                     </p>
                 </div>
 
                 <!-- Shop Links -->
                 <div class="space-y-3">
-                    <h4 class="text-xs uppercase font-bold text-slate-800 dark:text-white tracking-widest">Koleksi Kami</h4>
+                    <h4 class="text-xs uppercase font-bold text-slate-800 tracking-widest">Koleksi Kami</h4>
                     <ul class="space-y-2 text-xs">
-                        <li><a href="#catalog" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Batik Daster</a></li>
-                        <li><a href="#catalog" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Setelan Celana</a></li>
-                        <li><a href="#catalog" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Daster Menyusui (Busui)</a></li>
-                        <li><a href="#catalog" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Atasan & Bawahan</a></li>
+                        <li><a href="#catalog" class="hover transition-colors">Batik Daster</a></li>
+                        <li><a href="#catalog" class="hover transition-colors">Setelan Celana</a></li>
+                        <li><a href="#catalog" class="hover transition-colors">Daster Menyusui (Busui)</a></li>
+                        <li><a href="#catalog" class="hover transition-colors">Atasan & Bawahan</a></li>
                     </ul>
                 </div>
 
                 <!-- Info links -->
                 <div class="space-y-3">
-                    <h4 class="text-xs uppercase font-bold text-slate-800 dark:text-white tracking-widest">Tautan</h4>
+                    <h4 class="text-xs uppercase font-bold text-slate-800 tracking-widest">Tautan</h4>
                     <ul class="space-y-2 text-xs">
-                        <li><a href="#about" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Tentang Kami</a></li>
-                        <li><a href="#order-guide" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Cara Pemesanan</a></li>
-                        <li><a href="#contact" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">Hubungi Kami</a></li>
-                        <li><a href="/admin/dashboard" class="hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors font-semibold">Login Dashboard Admin</a></li>
+                        <li><a href="#about" class="hover transition-colors">Tentang Kami</a></li>
+                        <li><a href="#order-guide" class="hover transition-colors">Cara Pemesanan</a></li>
+                        <li><a href="#contact" class="hover transition-colors">Hubungi Kami</a></li>
+                        <li><a href="/admin/dashboard" class="hover transition-colors font-semibold">Login Dashboard Admin</a></li>
                     </ul>
                 </div>
 
                 <!-- Socials -->
                 <div class="space-y-3">
-                    <h4 class="text-xs uppercase font-bold text-slate-800 dark:text-white tracking-widest">Sosial Media</h4>
+                    <h4 class="text-xs uppercase font-bold text-slate-800 tracking-widest">Sosial Media</h4>
                     <p class="text-xs text-slate-400 font-light">Ikuti sosial media kami untuk mendapatkan update produk terbaru.</p>
                     <div class="flex space-x-3 text-xs">
-                        <a v-if="instagramUrl" :href="instagramUrl" target="_blank" class="text-slate-400 hover:text-cyan-600 dark:hover:text-cyan-400">Instagram</a>
-                        <a v-if="facebookUrl" :href="facebookUrl" target="_blank" class="text-slate-400 hover:text-cyan-600 dark:hover:text-cyan-400">Facebook</a>
-                        <a v-if="tiktokUrl" :href="tiktokUrl" target="_blank" class="text-slate-400 hover:text-cyan-600 dark:hover:text-cyan-400">TikTok</a>
+                        <a v-if="instagramUrl" :href="instagramUrl" target="_blank" class="text-slate-400 hover">Instagram</a>
+                        <a v-if="facebookUrl" :href="facebookUrl" target="_blank" class="text-slate-400 hover">Facebook</a>
+                        <a v-if="tiktokUrl" :href="tiktokUrl" target="_blank" class="text-slate-400 hover">TikTok</a>
                     </div>
                 </div>
             </div>
 
-            <div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-cyan-100/30 dark:border-cyan-950/20 flex flex-col sm:flex-row justify-between items-center text-[10px] text-slate-400 font-light space-y-4 sm:space-y-0">
-                <p>&copy; 2026 {{ appName }} (DSTCLO). Hak Cipta Dilindungi.</p>
-                <div class="flex space-x-6">
-                    <a href="#" class="hover:underline">Kebijakan Privasi</a>
-                    <a href="#" class="hover:underline">Syarat Ketentuan</a>
-                </div>
+            <div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-amber-100/30 flex flex-col sm:flex-row justify-between items-center text-[10px] text-slate-400 font-light space-y-4 sm:space-y-0">
+                <p>&copy; {{ new Date().getFullYear() }} {{ appName }}. Hak Cipta Dilindungi.</p>
             </div>
         </footer>
 
@@ -1093,11 +970,11 @@ clearInterval(countdownInterval);
             @click.self="closeQuickView"
         >
             <div
-                class="w-full max-w-3xl bg-[#FDFDFC] dark:bg-[#0E1726] rounded-3xl p-6 md:p-8 shadow-2xl flex flex-col md:flex-row gap-8 max-h-[90vh] overflow-y-auto border border-cyan-100/30 dark:border-cyan-950/30 scrollbar-thin"
+                class="w-full max-w-3xl bg-[#FDFDFC] rounded-3xl p-6 md:p-8 shadow-2xl flex flex-col md:flex-row gap-8 max-h-[90vh] overflow-y-auto border border-amber-100/30 scrollbar-thin"
             >
                 <!-- Image Side -->
                 <div class="w-full md:w-1/2 flex flex-col space-y-3">
-                    <div class="aspect-[3/4] rounded-2xl overflow-hidden bg-slate-50 dark:bg-neutral-900 border border-slate-200/50 dark:border-cyan-950/50 shadow-sm relative">
+                    <div class="aspect-[3/4] rounded-2xl overflow-hidden bg-slate-50 border border-slate-200/50/50 shadow-sm relative">
                         <img
                             :src="getProductImage(activeProduct)"
                             :alt="activeProduct.name"
@@ -1111,14 +988,14 @@ clearInterval(countdownInterval);
                     <div class="space-y-4">
                         <div class="flex justify-between items-start">
                             <div>
-                                <span class="text-[10px] font-bold uppercase tracking-widest text-cyan-600 dark:text-cyan-400">
+                                <span class="text-[10px] font-bold uppercase tracking-widest text-amber-600">
                                     {{ activeProduct.categories.map(c => c.name).join(', ') }}
                                 </span>
-                                <h3 class="text-2xl font-serif mt-0.5 text-slate-800 dark:text-white">{{ activeProduct.name }}</h3>
+                                <h3 class="text-2xl font-serif mt-0.5 text-slate-800">{{ activeProduct.name }}</h3>
                             </div>
                             <button
                                 @click="closeQuickView"
-                                class="p-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-cyan-950/30 transition-colors cursor-pointer"
+                                class="p-1.5 rounded-full hover:bg-slate-100 transition-colors cursor-pointer"
                             >
                                 <X class="w-5 h-5 text-slate-500" />
                             </button>
@@ -1127,7 +1004,7 @@ clearInterval(countdownInterval);
                         <!-- Description (Scrollbar thin applied) -->
                         <div class="space-y-1.5">
                             <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Deskripsi</h4>
-                            <p class="text-xs text-slate-500 dark:text-neutral-300 font-light leading-relaxed max-h-32 overflow-y-auto scrollbar-thin pr-1">
+                            <p class="text-xs text-slate-500 font-light leading-relaxed max-h-32 overflow-y-auto scrollbar-thin pr-1">
                                 {{ activeProduct.description || 'Pakaian batik modern dan nyaman hasil karya perajin terbaik kami. Menggunakan serat kain pilihan yang awet dan menyejukkan kulit.' }}
                             </p>
                         </div>
@@ -1143,8 +1020,8 @@ clearInterval(countdownInterval);
                                     :class="[
                                         'px-3 py-1.5 rounded-xl text-xs font-semibold uppercase tracking-wider border cursor-pointer transition-all',
                                         activeVariant?.id === variant.id
-                                            ? 'bg-cyan-600 text-white border-transparent dark:bg-cyan-500 dark:text-slate-950 shadow-md shadow-cyan-200/30'
-                                            : 'bg-transparent text-slate-600 border-slate-200 dark:text-slate-300 dark:border-cyan-900/60'
+                                            ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/30'
+                                            : 'bg-transparent text-slate-600 border-slate-200/60'
                                     ]"
                                 >
                                     {{ variant.name }}
@@ -1164,14 +1041,14 @@ clearInterval(countdownInterval);
                                     :class="[
                                         'px-3 py-2 text-left rounded-xl border transition-all cursor-pointer',
                                         activePriceType === price.type
-                                            ? 'border-cyan-500 bg-cyan-500/5 dark:border-cyan-400 dark:bg-cyan-400/5'
-                                            : 'border-slate-200 dark:border-cyan-900/60 hover:border-cyan-500 dark:hover:border-cyan-400'
+                                            ? 'border-amber-500 bg-amber-500/5/5'
+                                            : 'border-slate-200/60 hover'
                                     ]"
                                 >
-                                    <span class="block text-[8px] uppercase tracking-wider font-bold text-slate-400 dark:text-slate-500">
+                                    <span class="block text-[8px] uppercase tracking-wider font-bold text-slate-400">
                                         {{ price.type_label }}
                                     </span>
-                                    <span class="block text-xs font-bold mt-0.5 text-cyan-600 dark:text-cyan-400">
+                                    <span class="block text-xs font-bold mt-0.5 text-amber-600">
                                         {{ formatPrice(price.price) }}
                                     </span>
                                 </button>
@@ -1180,17 +1057,17 @@ clearInterval(countdownInterval);
                     </div>
 
                     <!-- Cart Call to Action -->
-                    <div class="pt-4 border-t border-slate-100 dark:border-cyan-950/50 space-y-4">
+                    <div class="pt-4 border-t border-slate-100/50 space-y-4">
                         <div class="flex justify-between items-center text-xs">
                             <div>
                                 <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Harga Terpilih</span>
-                                <div class="text-xl font-bold text-cyan-600 dark:text-cyan-400 mt-0.5">
+                                <div class="text-xl font-bold text-amber-600 mt-0.5">
                                     {{ selectedPrice ? formatPrice(selectedPrice.price) : 'Pilih ukuran' }}
                                 </div>
                             </div>
                             <div class="text-right">
                                 <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Sisa Stok</span>
-                                <div class="font-semibold text-slate-700 dark:text-slate-300 mt-0.5">
+                                <div class="font-semibold text-slate-700 mt-0.5">
                                     {{ activeVariant ? `${activeVariant.stock} pcs` : 'Pilih ukuran' }}
                                 </div>
                             </div>
@@ -1203,8 +1080,8 @@ clearInterval(countdownInterval);
                             :class="[
                                 'w-full py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md',
                                 activeVariant.stock > 0
-                                    ? 'bg-cyan-600 text-white hover:bg-cyan-500 shadow-cyan-200/50 dark:bg-cyan-500 dark:text-slate-950 dark:shadow-none'
-                                    : 'bg-slate-100 text-slate-400 cursor-not-allowed dark:bg-slate-800 dark:text-slate-600 shadow-none'
+                                    ? 'bg-amber-600 text-white hover:bg-amber-500 shadow-amber-200/50'
+                                    : 'bg-slate-100 text-slate-400 cursor-not-allowed shadow-none'
                             ]"
                         >
                             {{ activeVariant.stock > 0 ? 'Masukkan ke Keranjang' : 'Stok Habis' }}
@@ -1221,25 +1098,25 @@ clearInterval(countdownInterval);
             @click.self="isCartOpen = false"
         >
             <div
-                class="w-full max-w-md h-full bg-[#FDFDFC] dark:bg-[#0E1726] p-6 shadow-2xl flex flex-col justify-between overflow-y-auto transform translate-x-0 transition-transform duration-300 border-l border-cyan-100/30 dark:border-cyan-950/30"
+                class="w-full max-w-md h-full bg-[#FDFDFC] p-6 shadow-2xl flex flex-col justify-between overflow-y-auto transform translate-x-0 transition-transform duration-300 border-l border-amber-100/30"
             >
                 <div class="space-y-6">
                     <!-- Header -->
                     <div class="flex justify-between items-center">
                         <div class="flex items-center space-x-2">
-                            <ShoppingBag class="w-5 h-5 text-cyan-600 dark:text-cyan-400" />
-                            <h3 class="text-lg font-serif text-slate-800 dark:text-white">Keranjang Belanja ({{ cartCount }})</h3>
+                            <ShoppingBag class="w-5 h-5 text-amber-600" />
+                            <h3 class="text-lg font-serif text-slate-800">Keranjang Belanja ({{ cartCount }})</h3>
                         </div>
                         <button
                             @click="isCartOpen = false"
-                            class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-cyan-950/30 transition-colors cursor-pointer"
+                            class="p-2 rounded-full hover:bg-slate-100 transition-colors cursor-pointer"
                         >
                             <X class="w-5 h-5 text-slate-500" />
                         </button>
                     </div>
 
                     <!-- Cart List -->
-                    <div v-if="cart.length > 0" class="space-y-4 divide-y divide-slate-100 dark:divide-cyan-950/45 max-h-[calc(100vh-280px)] overflow-y-auto pr-1 scrollbar-thin">
+                    <div v-if="cart.length > 0" class="space-y-4 divide-y divide-slate-100/45 max-h-[calc(100vh-280px)] overflow-y-auto pr-1 scrollbar-thin">
                         <div
                             v-for="item in cart"
                             :key="`${item.variant.id}-${item.price.type}`"
@@ -1248,13 +1125,13 @@ clearInterval(countdownInterval);
                             <img
                                 :src="getProductImage(item.product)"
                                 :alt="item.product.name"
-                                class="w-16 h-20 object-cover rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200/50 dark:border-cyan-950/50"
+                                class="w-16 h-20 object-cover rounded-xl bg-slate-50 border border-slate-200/50/50"
                             />
 
                             <div class="flex-1 flex flex-col justify-between">
                                 <div class="space-y-1">
                                     <div class="flex justify-between items-start">
-                                        <h4 class="text-xs font-semibold text-slate-700 dark:text-neutral-200 line-clamp-1">
+                                        <h4 class="text-xs font-semibold text-slate-700 line-clamp-1">
                                             {{ item.product.name }}
                                         </h4>
                                         <button
@@ -1264,29 +1141,29 @@ clearInterval(countdownInterval);
                                             <X class="w-3.5 h-3.5" />
                                         </button>
                                     </div>
-                                    <p class="text-[10px] text-slate-400 dark:text-neutral-500">
-                                        Ukuran: <strong class="text-slate-700 dark:text-neutral-300 font-semibold">{{ item.variant.name }}</strong> • Tipe: <strong class="text-slate-700 dark:text-neutral-300 font-semibold">{{ item.price.type_label }}</strong>
+                                    <p class="text-[10px] text-slate-400">
+                                        Ukuran: <strong class="text-slate-700 font-semibold">{{ item.variant.name }}</strong> • Tipe: <strong class="text-slate-700 font-semibold">{{ item.price.type_label }}</strong>
                                     </p>
                                 </div>
 
                                 <div class="flex justify-between items-center mt-2">
                                     <!-- Quantity Stepper -->
-                                    <div class="flex items-center space-x-2 border border-slate-200 dark:border-cyan-900 rounded-lg px-2 py-0.5">
+                                    <div class="flex items-center space-x-2 border border-slate-200 rounded-lg px-2 py-0.5">
                                         <button
                                             @click="updateCartQuantity(item.variant.id, item.price.type, -1)"
-                                            class="p-1 text-slate-500 hover:text-black dark:hover:text-white cursor-pointer"
+                                            class="p-1 text-slate-500 hover:text-black:text-white cursor-pointer"
                                         >
                                             <Minus class="w-3 h-3" />
                                         </button>
-                                        <span class="text-xs font-semibold px-1 text-slate-800 dark:text-slate-100">{{ item.quantity }}</span>
+                                        <span class="text-xs font-semibold px-1 text-slate-800">{{ item.quantity }}</span>
                                         <button
                                             @click="updateCartQuantity(item.variant.id, item.price.type, 1)"
-                                            class="p-1 text-slate-500 hover:text-black dark:hover:text-white cursor-pointer"
+                                            class="p-1 text-slate-500 hover:text-black:text-white cursor-pointer"
                                         >
                                             <Plus class="w-3 h-3" />
                                         </button>
                                     </div>
-                                    <span class="text-xs font-bold text-cyan-600 dark:text-cyan-400">
+                                    <span class="text-xs font-bold text-amber-600">
                                         {{ formatPrice(item.price.price * item.quantity) }}
                                     </span>
                                 </div>
@@ -1296,14 +1173,14 @@ clearInterval(countdownInterval);
 
                     <!-- Empty Cart -->
                     <div v-else class="text-center py-20 space-y-4">
-                        <ShoppingBag class="w-12 h-12 text-cyan-200 dark:text-neutral-800 mx-auto" />
-                        <h4 class="text-sm font-semibold text-slate-700 dark:text-slate-300">Keranjang Anda masih kosong</h4>
-                        <p class="text-xs text-slate-400 dark:text-neutral-500 max-w-xs mx-auto font-light leading-relaxed">
+                        <ShoppingBag class="w-12 h-12 text-amber-200 mx-auto" />
+                        <h4 class="text-sm font-semibold text-slate-700">Keranjang Anda masih kosong</h4>
+                        <p class="text-xs text-slate-400 max-w-xs mx-auto font-light leading-relaxed">
                             Jelajahi produk batik dan pakaian pilihan kami untuk menambahkan item ke dalam keranjang.
                         </p>
                         <button
                             @click="isCartOpen = false"
-                            class="bg-cyan-600 text-white dark:bg-cyan-500 dark:text-slate-950 px-6 py-2.5 text-xs font-semibold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all cursor-pointer shadow-md shadow-cyan-200/50"
+                            class="bg-amber-600 text-white px-6 py-2.5 text-xs font-semibold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all cursor-pointer shadow-md shadow-amber-200/50"
                         >
                             Lanjutkan Belanja
                         </button>
@@ -1311,7 +1188,7 @@ clearInterval(countdownInterval);
                 </div>
 
                 <!-- Footer Summary Card -->
-                <div v-if="cart.length > 0" class="border-t border-cyan-100/30 dark:border-cyan-950/30 pt-6 space-y-4">
+                <div v-if="cart.length > 0" class="border-t border-amber-100/30 pt-6 space-y-4">
                     <div class="space-y-1.5">
                         <div class="flex justify-between text-xs text-slate-500">
                             <span>Subtotal</span>
@@ -1321,9 +1198,9 @@ clearInterval(countdownInterval);
                             <span>Biaya Kirim</span>
                             <span class="text-emerald-500 font-medium">GRATIS</span>
                         </div>
-                        <div class="flex justify-between text-sm font-bold text-slate-800 dark:text-white pt-1.5 border-t border-slate-100 dark:border-cyan-950/30">
+                        <div class="flex justify-between text-sm font-bold text-slate-800 pt-1.5 border-t border-slate-100/30">
                             <span>Estimasi Total</span>
-                            <span class="text-cyan-600 dark:text-cyan-400">{{ formatPrice(cartTotal) }}</span>
+                            <span class="text-amber-600">{{ formatPrice(cartTotal) }}</span>
                         </div>
                     </div>
 
diff --git a/resources/js/pages/admin/system/setting/Index.vue b/resources/js/pages/admin/system/setting/Index.vue
index 78f6316..c7d51cb 100644
--- a/resources/js/pages/admin/system/setting/Index.vue
+++ b/resources/js/pages/admin/system/setting/Index.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
 import { ref } from 'vue';
+import HomepageSection from '@/components/admin/setting/HomepageSection.vue';
 import HrSection from '@/components/admin/setting/HrSection.vue';
 import MarketplaceSection from '@/components/admin/setting/MarketplaceSection.vue';
 import SocialMediaSection from '@/components/admin/setting/SocialMediaSection.vue';
 import SystemSection from '@/components/admin/setting/SystemSection.vue';
 import SettingLayout from '@/layouts/SettingLayout.vue';
 import type {
+    HomepageSettingsData,
     HrSettingsData,
     MarketplaceSettingsData,
     SettingSection,
@@ -19,6 +21,7 @@ defineProps<{
     socialMedia: SocialMediaSettingsData;
     marketplace: MarketplaceSettingsData;
     hr: HrSettingsData;
+    homepage: HomepageSettingsData;
 }>();
 
 const activeSection = ref<SettingSection>('system');
@@ -30,6 +33,7 @@ const activeSection = ref<SettingSection>('system');
 
     <SettingLayout v-model:section="activeSection">
         <SystemSection v-if="activeSection === 'system'" :data="system" />
+        <HomepageSection v-else-if="activeSection === 'homepage'" :data="homepage" />
         <SocialMediaSection v-else-if="activeSection === 'social'" :data="socialMedia" />
         <MarketplaceSection v-else-if="activeSection === 'marketplace'" :data="marketplace" />
         <HrSection v-else-if="activeSection === 'hr'" :data="hr" />
diff --git a/resources/js/types/setting.ts b/resources/js/types/setting.ts
index 5e9b2ba..c9c6a6f 100644
--- a/resources/js/types/setting.ts
+++ b/resources/js/types/setting.ts
@@ -1,4 +1,4 @@
-export type SettingSection = 'system' | 'social' | 'marketplace' | 'hr';
+export type SettingSection = 'system' | 'social' | 'marketplace' | 'hr' | 'homepage';
 
 export type MarketplacePlatform = 'tiktok_shop' | 'shopee';
 
@@ -53,3 +53,15 @@ export type HrSettingsData = {
     late_penalty_amount: number;
     absent_penalty_amount: number;
 };
+
+export type MediaItem = {
+    id: number;
+    url: string;
+    thumb_url: string;
+};
+
+export type HomepageSettingsData = {
+    hero_image_url: string | null;
+    about_image_url: string | null;
+    gallery_images: MediaItem[];
+};
diff --git a/routes/web.php b/routes/web.php
index 06c2d16..3a799ff 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -333,6 +333,10 @@
                     Route::put('hr', [SettingController::class, 'updateHr'])
                         ->middleware('permission:'.Permission::SETTINGS_UPDATE->value)
                         ->name('hr.update');
+
+                    Route::put('homepage', [SettingController::class, 'updateHomepage'])
+                        ->middleware('permission:'.Permission::SETTINGS_UPDATE->value)
+                        ->name('homepage.update');
                 });
         });