refactor: update homepage footer layout and replace newsletter with contact information
This commit is contained in:
Yoga Pangestu
parent
c2e79e1b37
commit
1a0c4a4601
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user