feat: redesign homepage with smooth scroll, intersection animations, and updated layout styling
This commit is contained in:
Yoga Pangestu
parent
2edeedbf9e
commit
37f11e63f9
@ -1,115 +1,336 @@
|
||||
import { Head, Link, usePage } from '@inertiajs/react';
|
||||
import { dashboard, login } from '@/routes';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { ArrowRight, Facebook, Instagram, Twitter, X, Youtube } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function Homepage() {
|
||||
const { auth } = usePage().props as any;
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('opacity-100', 'translate-y-0');
|
||||
entry.target.classList.remove('opacity-0', 'translate-y-10');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
section.classList.add('transition-all', 'duration-1000', 'opacity-0', 'translate-y-10');
|
||||
observer.observe(section);
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const scrollToSection = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
|
||||
e.preventDefault();
|
||||
const element = document.querySelector(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
setIsMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Welcome to VN Group" />
|
||||
<div className="relative min-h-screen overflow-hidden bg-[#0a0a0a] font-sans text-white selection:bg-indigo-500/30">
|
||||
{/* Background Blobs */}
|
||||
<div className="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-600/20 blur-[120px]"></div>
|
||||
<div className="absolute bottom-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-blue-600/10 blur-[120px]"></div>
|
||||
<style>{`
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 54px;
|
||||
}
|
||||
`}</style>
|
||||
<div className="min-h-screen scroll-smooth bg-[#f7f3eb] font-serif text-[#1e4a6d] selection:bg-[#1e4a6d] selection:text-white">
|
||||
{/* Navbar */}
|
||||
<header className={`sticky top-0 z-50 border-b border-[#1e4a6d]/10 transition-all duration-300 ${isScrolled ? 'bg-[#f7f3eb]/80 py-3 backdrop-blur-md' : 'bg-transparent py-5'
|
||||
}`}>
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-12">
|
||||
<div className="flex items-center gap-2 text-xl font-bold uppercase tracking-tighter">
|
||||
VN Grup
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex min-h-screen flex-col">
|
||||
{/* Header / Navbar */}
|
||||
<header className="fixed top-6 left-0 right-0 z-50 px-6">
|
||||
<nav className="mx-auto flex max-w-6xl items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-6 py-3 shadow-2xl backdrop-blur-xl">
|
||||
{/* Left: Logo */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg shadow-indigo-500/20"></div>
|
||||
<span className="text-xl font-bold tracking-tight text-white">VN Group</span>
|
||||
</div>
|
||||
|
||||
{/* Center: Menu (Desktop) */}
|
||||
<div className="hidden items-center gap-8 md:flex">
|
||||
<Link href="/" className="text-sm font-medium text-white transition-colors hover:text-indigo-500">Beranda</Link>
|
||||
<Link href="#" className="text-sm font-medium text-zinc-400 transition-colors hover:text-white">Produk</Link>
|
||||
<Link href="#" className="text-sm font-medium text-zinc-400 transition-colors hover:text-white">Cara Order</Link>
|
||||
</div>
|
||||
|
||||
{/* Right: Actions */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden md:block">
|
||||
{auth.user ? (
|
||||
<Link
|
||||
href={dashboard()}
|
||||
className="rounded-xl bg-white/10 px-6 py-2 text-sm font-medium text-white transition-all hover:bg-white/20"
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href={login()}
|
||||
className="rounded-xl bg-indigo-600 px-6 py-2 text-sm font-bold text-white transition-all hover:bg-indigo-500 hover:shadow-lg hover:shadow-indigo-600/20"
|
||||
>
|
||||
Masuk
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Burger Menu Button */}
|
||||
<button
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 text-white md:hidden"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? <X size={20} /> : <Menu size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
<nav className="hidden items-center gap-10 text-[10px] font-bold uppercase tracking-[0.2em] md:flex">
|
||||
<a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:opacity-70 transition-opacity">Beranda</a>
|
||||
<a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:opacity-70 transition-opacity">Produk</a>
|
||||
<a href="#howToOrder" onClick={(e) => scrollToSection(e, '#howToOrder')} className="hover:opacity-70 transition-opacity">Cara Pesan</a>
|
||||
<a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:opacity-70 transition-opacity">Tentang Kami</a>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu Dropdown */}
|
||||
{isMenuOpen && (
|
||||
<div className="mt-4 overflow-hidden rounded-2xl border border-white/10 bg-[#0a0a0a]/90 p-4 shadow-2xl backdrop-blur-2xl animate-in fade-in zoom-in-95 duration-200 md:hidden">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link href="/" className="px-4 py-2 text-sm font-medium text-white">Beranda</Link>
|
||||
<Link href="#" className="px-4 py-2 text-sm font-medium text-zinc-400">Produk</Link>
|
||||
<Link href="#" className="px-4 py-2 text-sm font-medium text-zinc-400">Cara Order</Link>
|
||||
<hr className="border-white/10" />
|
||||
{auth.user ? (
|
||||
<Link href={dashboard()} className="rounded-xl bg-white/10 px-4 py-3 text-center text-sm font-medium text-white">Dashboard</Link>
|
||||
) : (
|
||||
<Link href={login()} className="rounded-xl bg-indigo-600 px-4 py-3 text-center text-sm font-bold text-white">Masuk</Link>
|
||||
)}
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest hover:opacity-70" onClick={() => setIsMenuOpen(!isMenuOpen)}>
|
||||
Menu
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="h-[1px] w-5 bg-[#1e4a6d]"></div>
|
||||
<div className="h-[1px] w-5 bg-[#1e4a6d]"></div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section id="homepage" className="border-b border-[#1e4a6d]/20">
|
||||
<div className="mx-auto max-w-7xl px-6 py-12 lg:px-12">
|
||||
<div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center">
|
||||
|
||||
{/* Categories List */}
|
||||
<div className="order-2 flex flex-col justify-center lg:order-1 lg:col-span-3">
|
||||
<div className="relative mb-8">
|
||||
<div className="flex flex-col border-y border-[#1e4a6d]/20">
|
||||
{['Kenyamanan Terpilih', 'Kemewahan Harian', 'Gaya Berkelanjutan', 'Seri Oxford', 'Seri Flanel'].map((cat) => (
|
||||
<button key={cat} className="group flex items-center justify-between border-b border-[#1e4a6d]/10 px-4 py-4 text-left text-xs font-bold uppercase tracking-wider transition-all hover:bg-[#1e4a6d] hover:text-white last:border-0">
|
||||
{cat}
|
||||
<ArrowRight size={14} className="opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* Diagonal decorative lines like in the image */}
|
||||
<div className="absolute -right-4 top-0 hidden h-full w-20 lg:block">
|
||||
<div className="absolute h-full w-[1px] origin-top rotate-[15deg] bg-[#1e4a6d]/40"></div>
|
||||
<div className="absolute right-0 h-full w-[1px] origin-top rotate-[15deg] bg-[#1e4a6d]/40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<p className="mb-4 text-[10px] font-bold uppercase tracking-widest opacity-60">Ikuti Kami</p>
|
||||
<div className="flex gap-4">
|
||||
<Facebook size={16} className="cursor-pointer hover:opacity-50" />
|
||||
<Twitter size={16} className="cursor-pointer hover:opacity-50" />
|
||||
<Instagram size={16} className="cursor-pointer hover:opacity-50" />
|
||||
<Youtube size={16} className="cursor-pointer hover:opacity-50" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex flex-1 flex-col items-center justify-center px-6 pt-32 text-center">
|
||||
<div className="animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
<h2 className="mb-2 text-sm font-semibold uppercase tracking-[0.3em] text-indigo-500">
|
||||
Premium Experience
|
||||
</h2>
|
||||
<h1 className="mb-6 bg-gradient-to-b from-white to-white/60 bg-clip-text text-6xl font-extrabold tracking-tight text-transparent lg:text-8xl">
|
||||
Hello World.
|
||||
</h1>
|
||||
<p className="mx-auto max-w-2xl text-lg leading-relaxed text-zinc-400">
|
||||
Welcome to the next generation of our platform. We've built something beautiful
|
||||
for you to explore. Stay tuned for more updates.
|
||||
</p>
|
||||
|
||||
<div className="mt-10 flex items-center justify-center gap-4">
|
||||
<button className="group relative rounded-full bg-white px-8 py-3 text-sm font-bold text-black transition-all hover:scale-105 active:scale-95">
|
||||
Get Started
|
||||
</button>
|
||||
<button className="rounded-full border border-white/10 bg-white/5 px-8 py-3 text-sm font-bold transition-all hover:bg-white/10">
|
||||
Learn More
|
||||
</button>
|
||||
{/* Hero Image */}
|
||||
<div className="order-1 lg:order-2 lg:col-span-4">
|
||||
<div className="relative aspect-[3/4] overflow-hidden bg-white shadow-xl">
|
||||
<img src="https://images.unsplash.com/photo-1605763240000-7e93b172d754?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGRyZXNzfGVufDB8fDB8fHww" alt="Model" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Text */}
|
||||
<div className="order-3 lg:col-span-5">
|
||||
<div className="max-w-md">
|
||||
<h1 className="mb-6 text-4xl font-medium leading-[1.1] text-[#1e4a6d] lg:text-6xl">
|
||||
Keahlian <br /> Yang Abadi
|
||||
</h1>
|
||||
<p className="mb-8 text-sm leading-relaxed opacity-70">
|
||||
Tingkatkan gaya harian Anda dengan koleksi esensial yang dibuat dengan ketelitian dan kualitas tinggi. Mulai dari bahan berkelanjutan hingga desain yang tak lekang oleh waktu.
|
||||
</p>
|
||||
<button className="bg-[#1e4a6d] px-8 py-3 text-[10px] font-bold uppercase tracking-[0.2em] text-white transition-all hover:bg-[#15344e]">
|
||||
Jelajahi Sekarang
|
||||
</button>
|
||||
|
||||
<div className="mt-16 flex gap-4">
|
||||
{[
|
||||
'https://images.unsplash.com/photo-1718871716580-117417d490f6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fGRyZXNzfGVufDB8fDB8fHww',
|
||||
'https://plus.unsplash.com/premium_photo-1676234842565-bc1df0bfd45a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDh8fHxlbnwwfHx8fHw%3D',
|
||||
'https://images.unsplash.com/photo-1718871729636-887b3d2359ae?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHx8'
|
||||
].map((url, i) => (
|
||||
<div key={i} className="h-24 w-20 overflow-hidden rounded-t-full border border-[#1e4a6d]/20 bg-white">
|
||||
<img src={url} alt="Shirt Preview" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="px-8 py-10 text-center text-sm text-zinc-600 lg:px-12">
|
||||
<p>© {new Date().getFullYear()} VN Group. All rights reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Best Sellers Section */}
|
||||
<section id="product" className="border-b border-[#1e4a6d]/20">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="flex items-center justify-between border-x border-[#1e4a6d]/20 px-6 py-6 lg:px-12">
|
||||
<h2 className="text-xl font-medium">Produk Terlaris</h2>
|
||||
<a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest hover:opacity-70 transition-all">
|
||||
Semua Produk <ArrowRight size={14} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full-width borders wrapper */}
|
||||
<div className="border-y border-[#1e4a6d]/20">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="grid grid-cols-1 border-x border-[#1e4a6d]/20 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{[
|
||||
{ name: 'Kenyamanan Terpilih', price: 'Rp 450.000', img: 'https://plus.unsplash.com/premium_photo-1661432689064-89feeaa63025?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDI0fHx8ZW58MHx8fHx8' },
|
||||
{ name: 'Kemewahan Harian', price: 'Rp 520.000', img: 'https://images.unsplash.com/photo-1718871828963-450573c7b76f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDI3fHx8ZW58MHx8fHx8' },
|
||||
{ name: 'Seri Oxford', price: 'Rp 425.000', img: 'https://images.unsplash.com/photo-1583333001978-8c57d752ce5b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDM0fHx8ZW58MHx8fHx8' },
|
||||
{ name: 'Gaya Berkelanjutan', price: 'Rp 380.000', img: 'https://images.unsplash.com/photo-1594179056536-dc8714fc8fdf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDU3fHx8ZW58MHx8fHx8' }
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="group border-b border-[#1e4a6d]/20 p-8 last:border-b-0 sm:border-r sm:even:border-r-0 lg:border-b-0 lg:border-r lg:last:border-r-0">
|
||||
<div className="mb-8 aspect-square overflow-hidden bg-white">
|
||||
<img
|
||||
src={item.img}
|
||||
alt={item.name}
|
||||
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-2 text-[10px] font-bold uppercase tracking-widest group-hover:text-indigo-600">
|
||||
{item.name} <ArrowRight size={12} className="inline ml-1" />
|
||||
</p>
|
||||
<p className="text-sm font-medium opacity-60">{item.price}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How To Order Section */}
|
||||
<section id="howToOrder" className="border-b border-[#1e4a6d]/20 bg-[#f7f3eb]">
|
||||
<div className="mx-auto max-w-7xl border-x border-[#1e4a6d]/20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3">
|
||||
{[
|
||||
{ step: "01", title: "Pilih Product", desc: "Temukan koleksi kemeja terbaik kami yang sesuai dengan gaya Anda." },
|
||||
{ step: "02", title: "Hubungi Kami", desc: "Konfirmasi pesanan melalui WhatsApp dengan detail ukuran dan warna." },
|
||||
{ step: "03", title: "Pengiriman", desc: "Pesanan akan dikemas eksklusif dan dikirim langsung ke alamat Anda." }
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="group border-b border-[#1e4a6d]/20 p-12 last:border-b-0 md:border-b-0 md:border-r md:last:border-r-0">
|
||||
<div className="mb-8 flex h-12 w-12 items-center justify-center rounded-full border border-[#1e4a6d]/20 text-xs font-bold transition-all group-hover:bg-[#1e4a6d] group-hover:text-white">
|
||||
{item.step}
|
||||
</div>
|
||||
<h3 className="mb-4 text-xl font-medium">{item.title}</h3>
|
||||
<p className="text-sm leading-relaxed opacity-60">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Section */}
|
||||
<section id="aboutUs" className="border-b border-[#1e4a6d]/20 bg-[#f7f3eb]">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="grid grid-cols-1 gap-20 border-x border-[#1e4a6d]/20 px-6 py-20 lg:grid-cols-2 lg:px-12">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h2 className="mb-8 text-3xl font-medium">Tentang Kami</h2>
|
||||
<p className="mb-6 text-sm leading-relaxed opacity-70">
|
||||
Menghadirkan produk esensial untuk setiap momen berharga Anda. Dibuat dengan penuh perhatian, dirancang untuk bertahan lama. Menghargai kesederhanaan, mendefinisikan ulang gaya hidup.
|
||||
</p>
|
||||
<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">
|
||||
<img src="https://images.unsplash.com/photo-1615102731632-9978cdec7764?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDY3fHx8ZW58MHx8fHx8" alt="Brand" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
{/* Decorative shirt at bottom right like in image */}
|
||||
<div className="absolute -bottom-10 -right-4 h-32 w-32 rotate-12 overflow-hidden rounded-lg border border-[#1e4a6d]/20 shadow-xl lg:-left-10">
|
||||
<img src="https://images.unsplash.com/photo-1733098033886-16454aef70a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDcwfHx8ZW58MHx8fHx8" alt="Shirt detail" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
{/* Brand Info */}
|
||||
<div className="lg:col-span-1">
|
||||
<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>
|
||||
<div className="flex gap-4">
|
||||
<Facebook size={18} className="cursor-pointer hover:opacity-50" />
|
||||
<Twitter size={18} className="cursor-pointer hover:opacity-50" />
|
||||
<Instagram size={18} className="cursor-pointer hover:opacity-50" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Navigation</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">Cara Pesan</Link></li>
|
||||
<li><Link href="#" className="hover:underline">Tentang Kami</Link></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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="px-6 py-6 text-center text-[10px] font-bold uppercase tracking-widest lg:px-12 lg:text-left">
|
||||
<p className="opacity-50">© 2026 VN Grup.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
{isMenuOpen && (
|
||||
<div className="fixed inset-0 z-[60] flex flex-col items-center justify-center bg-[#f7f3eb] p-6 text-center animate-in fade-in slide-in-from-top-full duration-500">
|
||||
<button className="absolute top-8 right-8 text-[#1e4a6d] transition-transform hover:rotate-90" onClick={() => setIsMenuOpen(false)}>
|
||||
<X size={32} />
|
||||
</button>
|
||||
<div className="flex flex-col gap-8 text-3xl font-medium">
|
||||
<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="#howToOrder" onClick={(e) => scrollToSection(e, '#howToOrder')} className="hover:italic transition-all">Cara Pesan</a>
|
||||
<a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:italic transition-all">Tentang Kami</a>
|
||||
</div>
|
||||
<div className="mt-20 flex gap-6">
|
||||
<Facebook size={24} className="hover:opacity-50 cursor-pointer" />
|
||||
<Twitter size={24} className="hover:opacity-50 cursor-pointer" />
|
||||
<Instagram size={24} className="hover:opacity-50 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user