From 1a0c4a46019bbfb2d1fee7f1dc841c35e9d66e34 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 24 Apr 2026 00:37:20 +0700
Subject: [PATCH] refactor: update homepage footer layout and replace
 newsletter with contact information

---
 resources/js/pages/homepage.tsx | 75 +++++++++++++++------------------
 1 file changed, 34 insertions(+), 41 deletions(-)

diff --git a/resources/js/pages/homepage.tsx b/resources/js/pages/homepage.tsx
index c4ece3a..ef5430e 100644
--- a/resources/js/pages/homepage.tsx
+++ b/resources/js/pages/homepage.tsx
@@ -1,6 +1,6 @@
 import { formatCurrency } from '@/lib/formatters';
 import { Link, router } from '@inertiajs/react';
-import { ArrowRight, Facebook, Instagram, Search, X } from 'lucide-react';
+import { ArrowRight, Facebook, Instagram, Phone, Search, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
 export default function Homepage({ categories = [], bestSellers, topSellingProducts = [] }: { categories: any[], bestSellers: any, topSellingProducts: any[] }) {
@@ -147,8 +147,8 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                         </nav>
 
                         <div className="flex items-center gap-4">
-                            <Link 
-                                href="/login" 
+                            <Link
+                                href="/login"
                                 className="hidden md:block border border-[#1e4a6d] px-6 py-2 text-[10px] font-bold uppercase tracking-widest transition-all hover:bg-[#1e4a6d] hover:text-white"
                             >
                                 Login
@@ -382,9 +382,6 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                                 <p className="mb-10 text-sm leading-relaxed opacity-70">
                                     Keahlian tangan terbaik dalam setiap jahitan. Kain berkualitas yang memanjakan, daya tarik abadi sepanjang masa. Bagi mereka yang menghargai seni berpakaian yang sesungguhnya.
                                 </p>
-                                <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="text-[10px] font-bold uppercase tracking-widest underline underline-offset-8 hover:opacity-70 transition-all">
-                                    Baca Selengkapnya...
-                                </a>
                             </div>
                             <div className="relative">
                                 <div className="aspect-[4/3] overflow-hidden rounded-xl border border-[#1e4a6d]/20 shadow-2xl">
@@ -402,14 +399,14 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                 {/* Footer */}
                 <footer className="border-t border-[#1e4a6d]/20 bg-[#f7f3eb]">
                     <div className="mx-auto max-w-7xl border-x border-[#1e4a6d]/20">
-                        <div className="grid grid-cols-1 gap-12 border-b border-[#1e4a6d]/10 px-6 py-16 lg:grid-cols-4 lg:px-12">
+                        <div className="grid grid-cols-1 gap-12 border-b border-[#1e4a6d]/10 px-6 py-16 lg:grid-cols-12 lg:px-12">
                             {/* Brand Info */}
-                            <div className="lg:col-span-1">
+                            <div className="lg:col-span-5">
                                 <div className="mb-6 flex items-center gap-2 text-xl font-bold uppercase tracking-tighter">
                                     VN Grup
                                 </div>
-                                <p className="mb-8 text-sm leading-relaxed opacity-60">
-                                    Menghadirkan produk esensial yang tak lekang oleh waktu dengan fokus pada kualitas, keberlanjutan, dan gaya yang abadi sejak 2026.
+                                <p className="mb-8 text-sm leading-relaxed opacity-60 lg:max-w-xs">
+                                    Menghadirkan produk esensial yang tak lekang oleh waktu dengan fokus pada kualitas, keberlanjutan, dan gaya yang abadi.
                                 </p>
                                 <div className="flex gap-4">
                                     <Facebook size={18} className="cursor-pointer hover:opacity-50" />
@@ -419,39 +416,35 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                             </div>
 
                             {/* Quick Links */}
-                            <div>
-                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Navigation</h3>
+                            <div className="lg:col-span-2">
+                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Tautan</h3>
                                 <ul className="flex flex-col gap-3 text-sm opacity-60">
-                                    <li><Link href="#" className="hover:underline">Beranda</Link></li>
-                                    <li><Link href="#" className="hover:underline">Produk</Link></li>
-                                    <li><Link href="#" className="hover:underline">Tentang Kami</Link></li>
+                                    <li><a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:underline cursor-pointer">Beranda</a></li>
+                                    <li><a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:underline cursor-pointer">Produk</a></li>
+                                    <li><a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:underline cursor-pointer">Tentang Kami</a></li>
                                 </ul>
                             </div>
 
-                            {/* Collections */}
-                            <div>
-                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Koleksi</h3>
-                                <ul className="flex flex-col gap-3 text-sm opacity-60">
-                                    <li><Link href="#" className="hover:underline">Kemeja Casual</Link></li>
-                                    <li><Link href="#" className="hover:underline">Kemeja Flanel</Link></li>
-                                    <li><Link href="#" className="hover:underline">Kemeja Oxford</Link></li>
-                                    <li><Link href="#" className="hover:underline">Kemeja Polos</Link></li>
-                                </ul>
-                            </div>
-
-                            {/* Newsletter */}
-                            <div>
-                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Buletin</h3>
-                                <p className="mb-4 text-sm opacity-60 text-zinc-500">Dapatkan penawaran eksklusif dan berita terbaru.</p>
-                                <div className="flex border-b border-[#1e4a6d]">
-                                    <input
-                                        type="email"
-                                        placeholder="Alamat email Anda"
-                                        className="w-full bg-transparent py-2 text-sm outline-none placeholder:text-[#1e4a6d]/30"
-                                    />
-                                    <button className="px-2 hover:opacity-50">
-                                        <ArrowRight size={18} />
-                                    </button>
+                            {/* Contact Info */}
+                            <div className="lg:col-span-5">
+                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Kontak</h3>
+                                <div className="space-y-4 text-sm opacity-60">
+                                    <div className="flex gap-3">
+                                        <div className="shrink-0 pt-1">
+                                            <Search size={14} className="rotate-45" />
+                                        </div>
+                                        <p className="leading-relaxed">
+                                            Jl. Raya Utama No. 123, <br />
+                                            Kec. Lengkong, Kota Bandung, <br />
+                                            Jawa Barat 40262
+                                        </p>
+                                    </div>
+                                    <div className="flex items-center gap-3">
+                                        <Phone size={14} />
+                                        <a href="https://wa.me/628123456789" target="_blank" className="hover:underline">
+                                            +62 812 3456 789
+                                        </a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -473,8 +466,8 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                             <a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:italic transition-all">Beranda</a>
                             <a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:italic transition-all">Produk</a>
                             <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:italic transition-all">Tentang Kami</a>
-                            <Link 
-                                href="/login" 
+                            <Link
+                                href="/login"
                                 className="mt-4 border border-[#1e4a6d] px-12 py-4 text-sm font-bold uppercase tracking-[0.2em] transition-all hover:bg-[#1e4a6d] hover:text-white"
                             >
                                 Login