From 502f0070481967b2b023b3ade36667ec8941ee8f Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 14 Jun 2026 01:57:03 +0700
Subject: [PATCH] feat: replace welcome page with new home page and add
 HomeController

---
 app/Http/Controllers/HomeController.php |   58 +
 resources/css/app.css                   |    2 +
 resources/js/components/LoginForm.vue   |    9 +-
 resources/js/pages/Home.vue             | 1425 +++++++++++++++++++++++
 resources/js/pages/Welcome.vue          |  413 -------
 routes/web.php                          |    3 +-
 vite.config.ts                          |    2 +-
 7 files changed, 1493 insertions(+), 419 deletions(-)
 create mode 100644 app/Http/Controllers/HomeController.php
 create mode 100644 resources/js/pages/Home.vue
 delete mode 100644 resources/js/pages/Welcome.vue

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
new file mode 100644
index 0000000..97bbe62
--- /dev/null
+++ b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Category;
+use App\Models\Product;
+use App\Models\SystemConfiguration;
+use App\Settings\SocialMediaSettings;
+use App\Settings\SystemSettings;
+use App\Support\Media\MediaPresenter;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class HomeController extends Controller
+{
+    public function index(): Response
+    {
+        $categories = Category::whereHas('products')->get(['id', 'name', 'slug']);
+
+        $products = Product::where('is_active', true)
+            ->with([
+                'categories',
+                'variants' => fn ($query) => $query
+                    ->with(['prices' => fn ($query) => $query->orderBy('type'), 'media'])
+                    ->orderBy('created_at'),
+            ])
+            ->get();
+
+        $products = $products->map(function ($product) {
+            $product->variants->each(function ($variant) {
+                $variant->setAttribute('images', MediaPresenter::collection($variant, 'images'));
+            });
+
+            return $product;
+        });
+
+        $configuration = SystemConfiguration::instance();
+        $logo = MediaPresenter::first($configuration, 'logo');
+        $logoUrl = $logo['url'] ?? null;
+
+        $settings = app(SystemSettings::class);
+        $socialSettings = app(SocialMediaSettings::class);
+
+        return Inertia::render('Home', [
+            'categories' => $categories,
+            'products' => $products,
+            'appName' => $settings->app_name ?? 'DST Collection',
+            'aboutApp' => $settings->about_app ?? '',
+            'contactEmail' => $settings->email ?? '',
+            'contactPhone' => $settings->phone ?? '',
+            'contactAddress' => $settings->address ?? '',
+            'logoUrl' => $logoUrl,
+            'instagramUrl' => $socialSettings->instagram_url ?? null,
+            'facebookUrl' => $socialSettings->facebook_url ?? null,
+            'tiktokUrl' => $socialSettings->tiktok_url ?? null,
+        ]);
+    }
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index f438e1f..7b8d210 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -54,6 +54,8 @@ @theme inline {
     --radius-4xl: calc(var(--radius) * 2.6);
     --font-heading:
         var(--font-sans);
+    --font-serif:
+        'Cormorant Garamond', Georgia, Cambria, 'Times New Roman', Times, serif;
 }
 
 :root {
diff --git a/resources/js/components/LoginForm.vue b/resources/js/components/LoginForm.vue
index 0587cbb..823314a 100644
--- a/resources/js/components/LoginForm.vue
+++ b/resources/js/components/LoginForm.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { Eye, EyeOff } from '@lucide/vue';
+import { ref  } from 'vue';
+import type {HTMLAttributes} from 'vue';
+import { toast } from 'vue-sonner';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -10,10 +15,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { formErrors } from '@/lib/form';
 import { cn } from '@/lib/utils';
-import { useForm } from '@inertiajs/vue3';
-import { Eye, EyeOff } from '@lucide/vue';
-import { ref, type HTMLAttributes } from 'vue';
-import { toast } from 'vue-sonner';
 import FieldSeparator from './ui/field/FieldSeparator.vue';
 
 const props = defineProps<{
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
new file mode 100644
index 0000000..45caa7a
--- /dev/null
+++ b/resources/js/pages/Home.vue
@@ -0,0 +1,1425 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import { 
+    Search, 
+    ShoppingBag, 
+    Sun, 
+    Moon, 
+    X, 
+    Plus, 
+    Minus, 
+    ArrowRight, 
+    Star, 
+    Check, 
+    Info, 
+    ChevronRight,
+    Eye,
+    Phone,
+    MapPin,
+    Mail,
+    Filter
+} from '@lucide/vue';
+import { ref, computed, onMounted, onUnmounted } 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';
+import SelectItem from '@/components/ui/select/SelectItem.vue';
+import SelectTrigger from '@/components/ui/select/SelectTrigger.vue';
+import SelectValue from '@/components/ui/select/SelectValue.vue';
+
+interface Price {
+    id: number;
+    variant_id: number;
+    type: string;
+    price: number;
+    price_formatted: string;
+    type_label: string;
+}
+
+interface MediaItem {
+    id: number;
+    url: string;
+    thumb_url: string;
+}
+
+interface Variant {
+    id: number;
+    product_id: number;
+    name: string;
+    stock: number;
+    prices: Price[];
+    images: MediaItem[];
+}
+
+interface Category {
+    id: number;
+    name: string;
+    slug: string;
+}
+
+interface Product {
+    id: number;
+    name: string;
+    slug: string;
+    description: string | null;
+    is_active: boolean;
+    categories: Category[];
+    variants: Variant[];
+}
+
+const props = defineProps<{
+    categories: Category[];
+    products: Product[];
+    appName: string;
+    aboutApp: string;
+    contactEmail: string;
+    contactPhone: string;
+    contactAddress: string;
+    logoUrl: string | null;
+    instagramUrl: string | null;
+    facebookUrl: string | null;
+    tiktokUrl: string | null;
+}>();
+
+// 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);
+const minPrice = ref<number | null>(null);
+const maxPrice = ref<number | null>(null);
+const sortBy = ref<string>('default'); // 'default', 'price_asc', 'price_desc', 'name_asc'
+const showFilters = ref(false);
+
+const toggleCategory = (slug: string) => {
+    selectedCategory.value = selectedCategory.value === slug ? null : slug;
+};
+
+// Helper to get ecer price of a product for filtering/sorting
+const getPrimaryEcerPrice = (product: Product): number => {
+    const ecerPrices = product.variants.flatMap(v => 
+        v.prices.filter(p => p.type === 'ecer').map(p => p.price)
+    );
+
+    if (ecerPrices.length > 0) {
+        return Math.min(...ecerPrices);
+    }
+
+    const allPrices = product.variants.flatMap(v => v.prices.map(p => p.price));
+
+    return allPrices.length > 0 ? Math.min(...allPrices) : 0;
+};
+
+// Filtered and Sorted Products
+const filteredProducts = computed(() => {
+    const result = props.products.filter(product => {
+        // Search filter
+        const matchesSearch = product.name.toLowerCase().includes(searchInput.value.toLowerCase()) ||
+            (product.description && product.description.toLowerCase().includes(searchInput.value.toLowerCase()));
+        
+        // Category filter
+        const matchesCategory = !selectedCategory.value || 
+            product.categories.some(cat => cat.slug === selectedCategory.value);
+        
+        // Price filter
+        const price = getPrimaryEcerPrice(product);
+        const matchesMinPrice = minPrice.value === null || price >= minPrice.value;
+        const matchesMaxPrice = maxPrice.value === null || price <= maxPrice.value;
+            
+        return matchesSearch && matchesCategory && matchesMinPrice && matchesMaxPrice;
+    });
+
+    // Sorting
+    if (sortBy.value === 'price_asc') {
+        result.sort((a, b) => getPrimaryEcerPrice(a) - getPrimaryEcerPrice(b));
+    } else if (sortBy.value === 'price_desc') {
+        result.sort((a, b) => getPrimaryEcerPrice(b) - getPrimaryEcerPrice(a));
+    } else if (sortBy.value === 'name_asc') {
+        result.sort((a, b) => a.name.localeCompare(b.name));
+    }
+
+    return result;
+});
+
+// Image Resolver
+const getProductImage = (product: Product, indexOffset = 0) => {
+    for (const variant of product.variants) {
+        if (variant.images && variant.images.length > 0) {
+            return variant.images[0].url;
+        }
+    }
+    
+    // Fallbacks based on category slug
+    const firstCat = product.categories?.[0]?.slug || '';
+    const fallbacks: Record<string, string[]> = {
+        'daster': [
+            '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'
+        ],
+        'setelan-celana': [
+            'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1618244972963-dbee1a7edc95?w=800&auto=format&fit=crop&q=80'
+        ],
+        'atasan': [
+            'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1532244769068-b223ede82d7b?w=800&auto=format&fit=crop&q=80'
+        ],
+        'bawahan': [
+            'https://images.unsplash.com/photo-1583496661160-fb4886b36ca7?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1551163943-3f6a855d1153?w=800&auto=format&fit=crop&q=80'
+        ],
+        'busui': [
+            'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=800&auto=format&fit=crop&q=80'
+        ]
+    };
+    
+    const categoryUrls = fallbacks[firstCat] || [
+        'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&auto=format&fit=crop&q=80',
+        'https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=800&auto=format&fit=crop&q=80'
+    ];
+    
+    return categoryUrls[indexOffset % categoryUrls.length];
+};
+
+// Price Formatting (Indonesian Rupiah)
+const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price);
+};
+
+// Price Range Resolver
+const getProductPriceRange = (product: Product) => {
+    const prices = product.variants.flatMap(v => 
+        v.prices.filter(p => p.type === 'ecer').map(p => p.price)
+    );
+    
+    if (prices.length === 0) {
+        const fallbackPrices = product.variants.flatMap(v => v.prices.map(p => p.price));
+
+        if (fallbackPrices.length === 0) {
+return 'Rp 0';
+}
+
+        const min = Math.min(...fallbackPrices);
+        const max = Math.max(...fallbackPrices);
+
+        return min === max ? formatPrice(min) : `${formatPrice(min)} - ${formatPrice(max)}`;
+    }
+    
+    const min = Math.min(...prices);
+    const max = Math.max(...prices);
+
+    return min === max ? formatPrice(min) : `${formatPrice(min)} - ${formatPrice(max)}`;
+};
+
+const getTotalStock = (product: Product) => {
+    return product.variants.reduce((acc, variant) => acc + variant.stock, 0);
+};
+
+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 {
+    product: Product;
+    variant: Variant;
+    price: Price;
+    quantity: number;
+}
+
+const cart = ref<CartItem[]>([]);
+const isCartOpen = ref(false);
+
+const addToCart = (product: Product, variant: Variant, price: Price) => {
+    const existingIndex = cart.value.findIndex(item => item.variant.id === variant.id && item.price.type === price.type);
+
+    if (existingIndex > -1) {
+        if (cart.value[existingIndex].quantity < variant.stock) {
+            cart.value[existingIndex].quantity += 1;
+        }
+    } else {
+        cart.value.push({
+            product,
+            variant,
+            price,
+            quantity: 1
+        });
+    }
+
+    isCartOpen.value = true;
+};
+
+const removeFromCart = (variantId: number, priceType: string) => {
+    cart.value = cart.value.filter(item => !(item.variant.id === variantId && item.price.type === priceType));
+};
+
+const updateCartQuantity = (variantId: number, priceType: string, change: number) => {
+    const item = cart.value.find(item => item.variant.id === variantId && item.price.type === priceType);
+
+    if (item) {
+        const newQty = item.quantity + change;
+
+        if (newQty > 0 && newQty <= item.variant.stock) {
+            item.quantity = newQty;
+        }
+    }
+};
+
+const cartTotal = computed(() => {
+    return cart.value.reduce((total, item) => total + (item.price.price * item.quantity), 0);
+});
+
+const cartCount = computed(() => {
+    return cart.value.reduce((count, item) => count + item.quantity, 0);
+});
+
+// Centered Modal State
+const activeProduct = ref<Product | null>(null);
+const activeVariant = ref<Variant | null>(null);
+const activePriceType = ref<string>('ecer');
+
+const openQuickView = (product: Product) => {
+    activeProduct.value = product;
+    activeVariant.value = product.variants[0] || null;
+    activePriceType.value = 'ecer';
+};
+
+const closeQuickView = () => {
+    activeProduct.value = null;
+    activeVariant.value = null;
+};
+
+const selectedPrice = computed(() => {
+    if (!activeVariant.value) {
+return null;
+}
+
+    return activeVariant.value.prices.find(p => p.type === activePriceType.value) || activeVariant.value.prices[0] || null;
+});
+
+// Checkout Mock / WhatsApp redirect
+const isCheckingOut = ref(false);
+
+const handleWhatsAppCheckout = () => {
+    if (cart.value.length === 0) {
+return;
+}
+
+    isCheckingOut.value = true;
+    
+    // Construct WhatsApp message
+    let message = `Halo ${props.appName}, saya ingin memesan produk berikut:\n\n`;
+    cart.value.forEach((item, index) => {
+        message += `${index + 1}. *${item.product.name}*\n`;
+        message += `   - Varian/Ukuran: ${item.variant.name}\n`;
+        message += `   - Jenis Harga: ${item.price.type_label}\n`;
+        message += `   - Jumlah: ${item.quantity} pcs\n`;
+        message += `   - Subtotal: ${formatPrice(item.price.price * item.quantity)}\n\n`;
+    });
+    message += `*Total Pembayaran: ${formatPrice(cartTotal.value)}*\n\n`;
+    message += `Mohon info untuk detail rekening transfer dan pengirimannya. Terima kasih!`;
+    
+    const formattedPhone = props.contactPhone.replace(/[^0-9]/g, '');
+    const finalPhone = formattedPhone.startsWith('0') ? '62' + formattedPhone.slice(1) : formattedPhone;
+    const waUrl = `https://wa.me/${finalPhone || '6281234567890'}?text=${encodeURIComponent(message)}`;
+    
+    setTimeout(() => {
+        isCheckingOut.value = false;
+        window.open(waUrl, '_blank');
+    }, 800);
+};
+
+const resetPriceFilters = () => {
+    minPrice.value = null;
+    maxPrice.value = null;
+    sortBy.value = 'default';
+};
+
+onMounted(() => {
+    isDark.value = document.documentElement.classList.contains('dark');
+    countdownInterval = startCountdown();
+});
+
+onUnmounted(() => {
+    if (countdownInterval) {
+clearInterval(countdownInterval);
+}
+});
+</script>
+
+<template>
+    <Head :title="`${appName} | Galeri Pakaian Modern & Sejuk`">
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <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">
+        
+        <!-- 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">
+            <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
+                
+                <!-- Logo Frame from settings -->
+                <div class="flex items-center space-x-3">
+                    <a href="#" class="flex items-center space-x-2">
+                        <img 
+                            v-if="logoUrl" 
+                            :src="logoUrl" 
+                            :alt="appName" 
+                            class="h-10 w-auto object-contain bg-white/80 p-1 rounded-lg shadow-sm"
+                        />
+                        <span class="font-serif text-2xl font-bold tracking-[0.1em] text-cyan-600 dark:text-cyan-400">
+                            {{ 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>
+
+                <!-- Action Utilities (Search, Dark Mode, 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"
+                        aria-label="Keranjang Belanja"
+                    >
+                        <ShoppingBag class="w-4.5 h-4.5 text-cyan-600 dark:text-cyan-400" />
+                        <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"
+                        >
+                            {{ cartCount }}
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Hero Section: Split Screen Visual Masterpiece (Fresh Aqua Palette) -->
+        <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>
+
+            <!-- Main Layout Content -->
+            <div class="max-w-7xl mx-auto px-6 w-full lg:grow grid grid-cols-1 lg:grid-cols-12 gap-8 items-center py-12 z-10">
+                
+                <!-- 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">
+                        <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">
+                        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>.
+                    </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>
+
+                    <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"
+                        >
+                            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"
+                        >
+                            Tentang Kami
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Center Column: Visual Model Showcase & Overlapping Titles (Cyan Aura) -->
+                <div class="lg:col-span-7 relative flex justify-center items-center h-[500px] lg:h-[650px] w-full">
+                    
+                    <!-- 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>
+                    </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>
+
+                    <!-- 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">
+                        <img 
+                            src="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>
+
+                    <!-- 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"
+                    >
+                        <img 
+                            :src="getProductImage(featuredProducts[0])" 
+                            alt="Preview Produk" 
+                            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>
+                            <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>
+                        </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">
+                            <Plus class="w-3.5 h-3.5" />
+                        </div>
+                    </div>
+
+                    <!-- FLOATING HERO TAG 2: Rating -->
+                    <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"
+                    >
+                        <img 
+                            :src="getProductImage(featuredProducts[1], 1)" 
+                            alt="Preview Produk" 
+                            class="w-10 h-10 object-cover rounded-lg"
+                        />
+                        <div class="text-left">
+                            <div class="flex items-center text-amber-400 space-x-0.5 mb-0.5">
+                                <Star class="w-2.5 h-2.5 fill-current" v-for="i in 5" :key="i" />
+                            </div>
+                            <p class="text-[11px] font-semibold truncate max-w-[100px]">{{ featuredProducts[1].name }}</p>
+                            <span class="text-[10px] font-semibold text-emerald-500">Stok Tersedia</span>
+                        </div>
+                    </div>
+
+                </div>
+
+            </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="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>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">
+                    <span>Lihat katalog lengkap</span>
+                    <ChevronRight class="w-3.5 h-3.5 transform rotate-90 text-cyan-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">
+            
+            <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.
+                    </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">
+                    
+                    <!-- 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"
+                        />
+                        <Search class="absolute right-3 top-3.5 w-4 h-4 text-slate-400" />
+                    </div>
+
+                    <!-- Category Chips -->
+                    <div class="flex flex-wrap gap-2 w-full md:w-auto justify-center">
+                        <button 
+                            @click="selectedCategory = null"
+                            :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'
+                            ]"
+                        >
+                            Semua
+                        </button>
+                        <button 
+                            v-for="category in categories" 
+                            :key="category.id"
+                            @click="toggleCategory(category.slug)"
+                            :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'
+                            ]"
+                        >
+                            {{ category.name }}
+                        </button>
+                    </div>
+
+                    <!-- 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"
+                    >
+                        <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>
+                    </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"
+                >
+                    <!-- 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>
+                        <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"
+                            />
+                            <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"
+                            />
+                        </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>
+                        <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">
+                                <SelectValue placeholder="Pilih urutan" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="default">Default (Urutan Utama)</SelectItem>
+                                <SelectItem value="price_asc">Harga Terendah</SelectItem>
+                                <SelectItem value="price_desc">Harga Tertinggi</SelectItem>
+                                <SelectItem value="name_asc">Nama Produk (A-Z)</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <!-- Reset Trigger -->
+                    <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"
+                        >
+                            Atur Ulang Filter
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Product Grid -->
+            <div v-if="filteredProducts.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
+                <div 
+                    v-for="(product, idx) in filteredProducts" 
+                    :key="product.id"
+                    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">
+                        <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>
+
+                        <!-- Absolute Status Badges -->
+                        <div class="absolute top-4 left-4 flex flex-col space-y-2">
+                            <span 
+                                v-if="getTotalStock(product) === 0" 
+                                class="bg-red-500 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md"
+                            >
+                                Habis
+                            </span>
+                            <span 
+                                v-else-if="getTotalStock(product) < 15" 
+                                class="bg-amber-500 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md animate-pulse"
+                            >
+                                Menipis
+                            </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"
+                            >
+                                Terbaru
+                            </span>
+                        </div>
+
+                        <!-- Hover Action Quick View Button -->
+                        <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"
+                            >
+                                <Eye class="w-4 h-4 mr-2" />
+                                Lihat Detail
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- 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">
+                            {{ 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">
+                            {{ product.name }}
+                        </h4>
+
+                        <!-- Price -->
+                        <p class="text-sm font-bold text-cyan-600 dark:text-cyan-400">
+                            {{ getProductPriceRange(product) }}
+                        </p>
+
+                        <!-- Stock Indicator -->
+                        <span class="text-[11px] text-slate-400 dark:text-neutral-500 font-light mt-0.5">
+                            Ukuran tersedia: {{ product.variants.map(v => v.name).join(', ') }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 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">
+                    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"
+                >
+                    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!
+                    </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>
+                    </div>
+                </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">
+            <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.
+                </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>
+                    <h5 class="font-bold text-base mb-2">Pilih Produk</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.
+                    </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">
+            <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">
+                    <img 
+                        src="https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80" 
+                        alt="Proses Pembuatan Batik" 
+                        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">
+                        {{ 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">
+                        <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>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 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">
+                <!-- 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.
+                    </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">
+                                <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">
+                                <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">
+                                <MapPin class="w-4 h-4" />
+                            </div>
+                            <span>{{ contactAddress }}</span>
+                        </div>
+                    </div>
+                </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">
+                    <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>
+                        
+                        <!-- WhatsApp Direct Send Button -->
+                        <a 
+                            :href="`https://wa.me/${contactPhone.replace(/[^0-9]/g, '') || '6281234567890'}`" 
+                            target="_blank"
+                            class="w-full inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors"
+                        >
+                            <Phone class="w-4 h-4 mr-2" />
+                            Kirim Melalui WhatsApp
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </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">
+            <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">
+                    <div class="flex items-center space-x-2">
+                        <img 
+                            v-if="logoUrl" 
+                            :src="logoUrl" 
+                            :alt="appName" 
+                            class="h-8 w-auto object-contain bg-white p-0.5 rounded shadow-sm"
+                        />
+                        <span class="font-serif text-xl font-bold tracking-widest text-black dark:text-white text-cyan-600 dark:text-cyan-400">
+                            {{ 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.
+                    </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>
+                    <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>
+                    </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>
+                    <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>
+                    </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>
+                    <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>
+                    </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>
+        </footer>
+
+        <!-- CENTERED DETAIL MODAL (MODA DETAIL) -->
+        <div 
+            v-if="activeProduct" 
+            class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+            @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"
+            >
+                <!-- 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">
+                        <img 
+                            :src="getProductImage(activeProduct)" 
+                            :alt="activeProduct.name" 
+                            class="w-full h-full object-cover"
+                        />
+                    </div>
+                </div>
+
+                <!-- Info Side -->
+                <div class="w-full md:w-1/2 flex flex-col justify-between space-y-6 text-left">
+                    <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">
+                                    {{ 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>
+                            </div>
+                            <button 
+                                @click="closeQuickView" 
+                                class="p-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-cyan-950/30 transition-colors cursor-pointer"
+                            >
+                                <X class="w-5 h-5 text-slate-500" />
+                            </button>
+                        </div>
+
+                        <!-- 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">
+                                {{ activeProduct.description || 'Pakaian batik modern dan nyaman hasil karya perajin terbaik kami. Menggunakan serat kain pilihan yang awet dan menyejukkan kulit.' }}
+                            </p>
+                        </div>
+
+                        <!-- Variant Select -->
+                        <div v-if="activeProduct.variants.length > 0" class="space-y-2">
+                            <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Pilih Ukuran / Varian</h4>
+                            <div class="flex flex-wrap gap-1.5">
+                                <button 
+                                    v-for="variant in activeProduct.variants" 
+                                    :key="variant.id"
+                                    @click="activeVariant = variant"
+                                    :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'
+                                    ]"
+                                >
+                                    {{ variant.name }}
+                                    <span class="text-[9px] opacity-70 ml-1">({{ variant.stock }} pcs)</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Price Tiers -->
+                        <div v-if="activeVariant && activeVariant.prices.length > 0" class="space-y-2">
+                            <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Saluran Harga (Grosir/Eceran)</h4>
+                            <div class="grid grid-cols-2 gap-1.5 max-h-36 overflow-y-auto scrollbar-thin pr-1">
+                                <button 
+                                    v-for="price in activeVariant.prices" 
+                                    :key="price.id"
+                                    @click="activePriceType = price.type"
+                                    :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'
+                                    ]"
+                                >
+                                    <span class="block text-[8px] uppercase tracking-wider font-bold text-slate-400 dark:text-slate-500">
+                                        {{ price.type_label }}
+                                    </span>
+                                    <span class="block text-xs font-bold mt-0.5 text-cyan-600 dark:text-cyan-400">
+                                        {{ formatPrice(price.price) }}
+                                    </span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Cart Call to Action -->
+                    <div class="pt-4 border-t border-slate-100 dark:border-cyan-950/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">
+                                    {{ 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">
+                                    {{ activeVariant ? `${activeVariant.stock} pcs` : 'Pilih ukuran' }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <button 
+                            v-if="activeVariant && selectedPrice"
+                            @click="addToCart(activeProduct, activeVariant, selectedPrice)"
+                            :disabled="activeVariant.stock <= 0"
+                            :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'
+                            ]"
+                        >
+                            {{ activeVariant.stock > 0 ? 'Masukkan ke Keranjang' : 'Stok Habis' }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- FLOATING CART SLIDE-OVER SHEET -->
+        <div 
+            v-if="isCartOpen" 
+            class="fixed inset-0 z-50 flex items-center justify-end bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+            @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"
+            >
+                <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>
+                        </div>
+                        <button 
+                            @click="isCartOpen = false" 
+                            class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-cyan-950/30 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-for="item in cart" 
+                            :key="`${item.variant.id}-${item.price.type}`"
+                            class="flex space-x-4 pt-4 first:pt-0"
+                        >
+                            <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"
+                            />
+                            
+                            <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">
+                                            {{ item.product.name }}
+                                        </h4>
+                                        <button 
+                                            @click="removeFromCart(item.variant.id, item.price.type)" 
+                                            class="text-slate-400 hover:text-red-500 p-1 cursor-pointer transition-colors"
+                                        >
+                                            <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>
+                                </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">
+                                        <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"
+                                        >
+                                            <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>
+                                        <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"
+                                        >
+                                            <Plus class="w-3 h-3" />
+                                        </button>
+                                    </div>
+                                    <span class="text-xs font-bold text-cyan-600 dark:text-cyan-400">
+                                        {{ formatPrice(item.price.price * item.quantity) }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 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">
+                            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"
+                        >
+                            Lanjutkan Belanja
+                        </button>
+                    </div>
+                </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 class="space-y-1.5">
+                        <div class="flex justify-between text-xs text-slate-500">
+                            <span>Subtotal</span>
+                            <span>{{ formatPrice(cartTotal) }}</span>
+                        </div>
+                        <div class="flex justify-between text-xs text-slate-500">
+                            <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">
+                            <span>Estimasi Total</span>
+                            <span class="text-cyan-600 dark:text-cyan-400">{{ formatPrice(cartTotal) }}</span>
+                        </div>
+                    </div>
+
+                    <button 
+                        @click="handleWhatsAppCheckout"
+                        :disabled="isCheckingOut"
+                        class="w-full flex items-center justify-center bg-emerald-600 text-white hover:bg-emerald-500 py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md shadow-emerald-100/50"
+                    >
+                        <span v-if="isCheckingOut" class="inline-block border-2 border-current border-t-transparent animate-spin rounded-full w-4 h-4 mr-2"></span>
+                        <Phone class="w-4 h-4 mr-2" />
+                        {{ isCheckingOut ? 'Mengalihkan...' : 'Pesan Via WhatsApp' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<style>
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom marquee animation */
+@keyframes marquee {
+    0% {
+        transform: translateX(0%);
+    }
+    100% {
+        transform: translate3d(-50%, 0, 0);
+    }
+}
+
+.animate-marquee {
+    display: inline-block;
+    animation: marquee 25s linear infinite;
+}
+
+/* Float Animation */
+@keyframes float-hero {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-12px);
+    }
+}
+
+.animate-float-model {
+    animation: float-hero 6s infinite ease-in-out;
+}
+
+.animate-float-tag-1 {
+    animation: float-hero 5s infinite ease-in-out;
+}
+
+.animate-float-tag-2 {
+    animation: float-hero 7s infinite ease-in-out;
+}
+
+/* Blob morphing background animation */
+@keyframes blob-bounce {
+    0%, 100% {
+        transform: translate(0px, 0px) scale(1);
+    }
+    33% {
+        transform: translate(30px, -40px) scale(1.12);
+    }
+    66% {
+        transform: translate(-20px, 20px) scale(0.95);
+    }
+}
+
+.animate-blob {
+    animation: blob-bounce 14s infinite alternate ease-in-out;
+}
+
+.animation-delay-2000 {
+    animation-delay: 2s;
+}
+
+/* Animation classes */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 20px, 0);
+    }
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.animate-fade-in-up {
+    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+</style>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
deleted file mode 100644
index 4bc1e52..0000000
--- a/resources/js/pages/Welcome.vue
+++ /dev/null
@@ -1,413 +0,0 @@
-<script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-</script>
-
-<template>
-    <Head title="Welcome">
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    </Head>
-    <div
-        class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]"
-    >
-        <div
-            class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0"
-        >
-            <main
-                class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row"
-            >
-                <div
-                    class="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
-                >
-                    <h1 class="mb-1 font-medium">Let's get started</h1>
-                    <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
-                        Laravel has an incredibly rich ecosystem. <br />We
-                        suggest starting with the following.
-                    </p>
-                    <ul class="mb-4 flex flex-col lg:mb-6">
-                        <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:top-1/2 before:bottom-0 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
-                        >
-                            <span
-                                class="relative bg-white py-1 dark:bg-[#161615]"
-                            >
-                                <span
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
-                                >
-                                    <span
-                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
-                                    />
-                                </span>
-                            </span>
-                            <span>
-                                Read the
-                                <a
-                                    href="https://laravel.com/docs"
-                                    target="_blank"
-                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
-                                >
-                                    <span>Documentation</span>
-                                    <svg
-                                        width="{10}"
-                                        height="{11}"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                        <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:top-0 before:bottom-1/2 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
-                        >
-                            <span
-                                class="relative bg-white py-1 dark:bg-[#161615]"
-                            >
-                                <span
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
-                                >
-                                    <span
-                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
-                                    />
-                                </span>
-                            </span>
-                            <span>
-                                Watch video tutorials at
-                                <a
-                                    href="https://laracasts.com"
-                                    target="_blank"
-                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
-                                >
-                                    <span>Laracasts</span>
-                                    <svg
-                                        width="{10}"
-                                        height="{11}"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                    </ul>
-                    <ul class="flex gap-3 text-sm leading-normal">
-                        <li>
-                            <a
-                                href="https://cloud.laravel.com"
-                                target="_blank"
-                                class="inline-block rounded-sm border border-black bg-[#1b1b18] px-5 py-1.5 text-sm leading-normal text-white hover:border-black hover:bg-black dark:border-[#eeeeec] dark:bg-[#eeeeec] dark:text-[#1C1C1A] dark:hover:border-white dark:hover:bg-white"
-                            >
-                                Deploy now
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <div
-                    class="relative -mb-px aspect-[335/364] w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:mb-0 lg:-ml-px lg:aspect-auto lg:w-[438px] lg:rounded-t-none lg:rounded-r-lg dark:bg-[#1D0002]"
-                >
-                    <!-- Laravel Logo -->
-                    <svg
-                        class="w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all duration-750 dark:text-[#F61500] starting:opacity-0 motion-safe:starting:translate-y-6"
-                        viewBox="0 0 438 104"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M110.256 41.6337C108.061 38.1275 104.945 35.3731 100.905 33.3681C96.8667 31.3647 92.8016 30.3618 88.7131 30.3618C83.4247 30.3618 78.5885 31.3389 74.201 33.2923C69.8111 35.2456 66.0474 37.928 62.9059 41.3333C59.7643 44.7401 57.3198 48.6726 55.5754 53.1293C53.8287 57.589 52.9572 62.274 52.9572 67.1813C52.9572 72.1925 53.8287 76.8995 55.5754 81.3069C57.3191 85.7173 59.7636 89.6241 62.9059 93.0293C66.0474 96.4361 69.8119 99.1155 74.201 101.069C78.5885 103.022 83.4247 103.999 88.7131 103.999C92.8016 103.999 96.8667 102.997 100.905 100.994C104.945 98.9911 108.061 96.2359 110.256 92.7282V102.195H126.563V32.1642H110.256V41.6337ZM108.76 75.7472C107.762 78.4531 106.366 80.8078 104.572 82.8112C102.776 84.8161 100.606 86.4183 98.0637 87.6206C95.5202 88.823 92.7004 89.4238 89.6103 89.4238C86.5178 89.4238 83.7252 88.823 81.2324 87.6206C78.7388 86.4183 76.5949 84.8161 74.7998 82.8112C73.004 80.8078 71.6319 78.4531 70.6856 75.7472C69.7356 73.0421 69.2644 70.1868 69.2644 67.1821C69.2644 64.1758 69.7356 61.3205 70.6856 58.6154C71.6319 55.9102 73.004 53.5571 74.7998 51.5522C76.5949 49.5495 78.738 47.9451 81.2324 46.7427C83.7252 45.5404 86.5178 44.9396 89.6103 44.9396C92.7012 44.9396 95.5202 45.5404 98.0637 46.7427C100.606 47.9451 102.776 49.5487 104.572 51.5522C106.367 53.5571 107.762 55.9102 108.76 58.6154C109.756 61.3205 110.256 64.1758 110.256 67.1821C110.256 70.1868 109.756 73.0421 108.76 75.7472Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M242.805 41.6337C240.611 38.1275 237.494 35.3731 233.455 33.3681C229.416 31.3647 225.351 30.3618 221.262 30.3618C215.974 30.3618 211.138 31.3389 206.75 33.2923C202.36 35.2456 198.597 37.928 195.455 41.3333C192.314 44.7401 189.869 48.6726 188.125 53.1293C186.378 57.589 185.507 62.274 185.507 67.1813C185.507 72.1925 186.378 76.8995 188.125 81.3069C189.868 85.7173 192.313 89.6241 195.455 93.0293C198.597 96.4361 202.361 99.1155 206.75 101.069C211.138 103.022 215.974 103.999 221.262 103.999C225.351 103.999 229.416 102.997 233.455 100.994C237.494 98.9911 240.611 96.2359 242.805 92.7282V102.195H259.112V32.1642H242.805V41.6337ZM241.31 75.7472C240.312 78.4531 238.916 80.8078 237.122 82.8112C235.326 84.8161 233.156 86.4183 230.614 87.6206C228.07 88.823 225.251 89.4238 222.16 89.4238C219.068 89.4238 216.275 88.823 213.782 87.6206C211.289 86.4183 209.145 84.8161 207.35 82.8112C205.554 80.8078 204.182 78.4531 203.236 75.7472C202.286 73.0421 201.814 70.1868 201.814 67.1821C201.814 64.1758 202.286 61.3205 203.236 58.6154C204.182 55.9102 205.554 53.5571 207.35 51.5522C209.145 49.5495 211.288 47.9451 213.782 46.7427C216.275 45.5404 219.068 44.9396 222.16 44.9396C225.251 44.9396 228.07 45.5404 230.614 46.7427C233.156 47.9451 235.326 49.5487 237.122 51.5522C238.917 53.5571 240.312 55.9102 241.31 58.6154C242.306 61.3205 242.806 64.1758 242.806 67.1821C242.805 70.1868 242.305 73.0421 241.31 75.7472Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M438 -3H421.694V102.197H438V-3Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M324.49 32.1665L303.995 85.794L283.498 32.1665H266.983L293.748 102.197H314.242L341.006 32.1665H324.49Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M376.571 30.3656C356.603 30.3656 340.797 46.8497 340.797 67.1828C340.797 89.6597 356.094 104 378.661 104C391.29 104 399.354 99.1488 409.206 88.5848L398.189 80.0226C398.183 80.031 389.874 90.9895 377.468 90.9895C363.048 90.9895 356.977 79.3111 356.977 73.269H411.075C413.917 50.1328 398.775 30.3656 376.571 30.3656ZM357.02 61.0967C357.145 59.7487 359.023 43.3761 376.442 43.3761C393.861 43.3761 395.978 59.7464 396.099 61.0967H357.02Z"
-                            fill="currentColor"
-                        />
-                    </svg>
-
-                    <!-- 13 -->
-                    <svg
-                        class="relative -mt-[6.6rem] -ml-8 w-[438px] max-w-none [--stroke-color:#1B1B18] lg:ml-0 dark:[--stroke-color:#FF750F]"
-                        viewBox="0 0 440 392"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <g
-                            class="text-[#1B1B18] opacity-100 mix-blend-darken transition-all delay-300 duration-750 dark:text-black dark:mix-blend-normal starting:opacity-0"
-                        >
-                            <mask
-                                id="path-1-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="-0.328613"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="-0.328613"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                />
-                                <path
-                                    d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-1-mask)"
-                            />
-                            <path
-                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-1-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F3BEC7] opacity-100 transition-all delay-400 duration-750 dark:text-[#4B0600] starting:opacity-0 motion-safe:starting:-translate-x-[26px]"
-                        >
-                            <mask
-                                id="path-2-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="25.3357"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="25.3357"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                />
-                                <path
-                                    d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-2-mask)"
-                            />
-                            <path
-                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-2-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F8B803] opacity-100 mix-blend-color transition-all delay-400 duration-750 dark:text-[#391800] dark:mix-blend-hard-light starting:opacity-0 motion-safe:starting:-translate-x-[51px]"
-                        >
-                            <mask
-                                id="path-3-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="51"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="51"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                />
-                                <path
-                                    d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-3-mask)"
-                            />
-                            <path
-                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-3-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F3BEC7] opacity-100 mix-blend-multiply transition-all delay-400 duration-750 dark:text-[#733000] dark:mix-blend-normal starting:opacity-0 motion-safe:starting:-translate-x-[78px]"
-                        >
-                            <mask
-                                id="path-4-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="76.6643"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="76.6643"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                />
-                                <path
-                                    d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-4-mask)"
-                            />
-                            <path
-                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-4-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F3BEC7] opacity-100 mix-blend-hard-light transition-all delay-400 duration-750 dark:text-[#4B0600] starting:opacity-0 motion-safe:starting:-translate-x-[102px]"
-                        >
-                            <mask
-                                id="path-5-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="102.329"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="102.329"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                />
-                                <path
-                                    d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-5-mask)"
-                            />
-                            <path
-                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-5-mask)"
-                            />
-                        </g>
-                    </svg>
-                    <div
-                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-t-none lg:rounded-r-lg dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
-                    ></div>
-                </div>
-            </main>
-        </div>
-    </div>
-</template>
diff --git a/routes/web.php b/routes/web.php
index c7029ed..93a65f2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,10 +27,11 @@
 use App\Http\Controllers\Admin\System\SettingController;
 use App\Http\Controllers\Auth\LoginController;
 use App\Http\Controllers\Auth\LogoutController;
+use App\Http\Controllers\HomeController;
 use App\Http\Controllers\PushSubscriptionController;
 use Illuminate\Support\Facades\Route;
 
-Route::inertia('/', 'Welcome')->name('home');
+Route::get('/', [HomeController::class, 'index'])->name('home');
 
 Route::middleware('guest')->group(function () {
     Route::get('/auth/login', [LoginController::class, 'index'])->name('login');
diff --git a/vite.config.ts b/vite.config.ts
index 3b01ecf..4408dbf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -40,7 +40,7 @@ export default defineConfig(({ mode }) => {
         plugins: [
             laravel({
                 input: ['resources/css/app.css', 'resources/js/app.ts'],
-                refresh: true,
+                refresh: false,
                 fonts: [
                     bunny('Instrument Sans', {
                         weights: [400, 500, 600],