vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update homepage footer layout and replace newsletter with contact information

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-24 00:37:20 +07:00
parent c2e79e1b37
commit 1a0c4a4601
1 changed files with 34 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
resources/js/pages/homepage.tsx
View File

@ -1,6 +1,6 @@
import { formatCurrency } from '@/lib/formatters'; import { formatCurrency } from '@/lib/formatters';
import { Link, router } from '@inertiajs/react'; 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'; import { useEffect, useState } from 'react';
export default function Homepage({ categories = [], bestSellers, topSellingProducts = [] }: { categories: any[], bestSellers: any, topSellingProducts: any[] }) { export default function Homepage({ categories = [], bestSellers, topSellingProducts = [] }: { categories: any[], bestSellers: any, topSellingProducts: any[] }) {
@ -382,9 +382,6 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
<p className="mb-10 text-sm leading-relaxed opacity-70"> <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. Keahlian tangan terbaik dalam setiap jahitan. Kain berkualitas yang memanjakan, daya tarik abadi sepanjang masa. Bagi mereka yang menghargai seni berpakaian yang sesungguhnya.
</p> </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>
<div className="relative"> <div className="relative">
<div className="aspect-[4/3] overflow-hidden rounded-xl border border-[#1e4a6d]/20 shadow-2xl"> <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 */}
<footer className="border-t border-[#1e4a6d]/20 bg-[#f7f3eb]"> <footer className="border-t border-[#1e4a6d]/20 bg-[#f7f3eb]">
<div className="mx-auto max-w-7xl border-x border-[#1e4a6d]/20"> <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 */} {/* 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"> <div className="mb-6 flex items-center gap-2 text-xl font-bold uppercase tracking-tighter">
VN Grup VN Grup
</div> </div>
<p className="mb-8 text-sm leading-relaxed opacity-60"> <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 sejak 2026. Menghadirkan produk esensial yang tak lekang oleh waktu dengan fokus pada kualitas, keberlanjutan, dan gaya yang abadi.
</p> </p>
<div className="flex gap-4"> <div className="flex gap-4">
<Facebook size={18} className="cursor-pointer hover:opacity-50" /> <Facebook size={18} className="cursor-pointer hover:opacity-50" />
@ -419,39 +416,35 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
</div> </div>
{/* Quick Links */} {/* Quick Links */}
<div> <div className="lg:col-span-2">
<h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Navigation</h3> <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"> <ul className="flex flex-col gap-3 text-sm opacity-60">
<li><Link href="#" className="hover:underline">Beranda</Link></li> <li><a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:underline cursor-pointer">Beranda</a></li>
<li><Link href="#" className="hover:underline">Produk</Link></li> <li><a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:underline cursor-pointer">Produk</a></li>
<li><Link href="#" className="hover:underline">Tentang Kami</Link></li> <li><a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:underline cursor-pointer">Tentang Kami</a></li>
</ul> </ul>
</div> </div>
{/* Collections */} {/* Contact Info */}
<div> <div className="lg:col-span-5">
<h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Koleksi</h3> <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Kontak</h3>
<ul className="flex flex-col gap-3 text-sm opacity-60"> <div className="space-y-4 text-sm opacity-60">
<li><Link href="#" className="hover:underline">Kemeja Casual</Link></li> <div className="flex gap-3">
<li><Link href="#" className="hover:underline">Kemeja Flanel</Link></li> <div className="shrink-0 pt-1">
<li><Link href="#" className="hover:underline">Kemeja Oxford</Link></li> <Search size={14} className="rotate-45" />
<li><Link href="#" className="hover:underline">Kemeja Polos</Link></li> </div>
</ul> <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>
{/* 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>
</div> </div>
</div> </div>
</div> </div>