From 37f11e63f9f2b717b62ad12d9953c1112c46615a Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Thu, 23 Apr 2026 23:03:12 +0700 Subject: [PATCH] feat: redesign homepage with smooth scroll, intersection animations, and updated layout styling --- resources/js/pages/homepage.tsx | 415 ++++++++++++++++++++++++-------- 1 file changed, 318 insertions(+), 97 deletions(-) diff --git a/resources/js/pages/homepage.tsx b/resources/js/pages/homepage.tsx index 9085b22..1b53b2b 100644 --- a/resources/js/pages/homepage.tsx +++ b/resources/js/pages/homepage.tsx @@ -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, id: string) => { + e.preventDefault(); + const element = document.querySelector(id); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + setIsMenuOpen(false); + } + }; return ( <> - -
- {/* Background Blobs */} -
-
+ +
+ {/* Navbar */} +
+
+
+ VN Grup +
-
- {/* Header / Navbar */} -
-
+ + {/* Hero Section */} +
+
+
+ + {/* Categories List */} +
+
+
+ {['Kenyamanan Terpilih', 'Kemewahan Harian', 'Gaya Berkelanjutan', 'Seri Oxford', 'Seri Flanel'].map((cat) => ( + + ))} +
+ {/* Diagonal decorative lines like in the image */} +
+
+
+
+
+ +
+

Ikuti Kami

+
+ + + + +
- )} -
- {/* Main Content */} -
-
-

- Premium Experience -

-

- Hello World. -

-

- Welcome to the next generation of our platform. We've built something beautiful - for you to explore. Stay tuned for more updates. -

- -
- - + {/* Hero Image */} +
+
+ Model +
+
+ + {/* Hero Text */} +
+
+

+ Keahlian
Yang Abadi +

+

+ 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. +

+ + +
+ {[ + '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) => ( +
+ Shirt Preview +
+ ))} +
+
-
+
+ - {/* Footer */} -
-

© {new Date().getFullYear()} VN Group. All rights reserved.

-
-
+ {/* Best Sellers Section */} +
+
+
+

Produk Terlaris

+ scrollToSection(e, '#product')} className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest hover:opacity-70 transition-all"> + Semua Produk + +
+
+ + {/* Full-width borders wrapper */} +
+
+
+ {[ + { 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) => ( +
+
+ {item.name} +
+
+

+ {item.name} +

+

{item.price}

+
+
+ ))} +
+
+
+
+ + {/* How To Order Section */} +
+
+
+ {[ + { 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) => ( +
+
+ {item.step} +
+

{item.title}

+

+ {item.desc} +

+
+ ))} +
+
+
+ + {/* Brand Section */} +
+
+
+
+

Tentang Kami

+

+ Menghadirkan produk esensial untuk setiap momen berharga Anda. Dibuat dengan penuh perhatian, dirancang untuk bertahan lama. Menghargai kesederhanaan, mendefinisikan ulang gaya hidup. +

+

+ Keahlian tangan terbaik dalam setiap jahitan. Kain berkualitas yang memanjakan, daya tarik abadi sepanjang masa. Bagi mereka yang menghargai seni berpakaian yang sesungguhnya. +

+ scrollToSection(e, '#aboutUs')} className="text-[10px] font-bold uppercase tracking-widest underline underline-offset-8 hover:opacity-70 transition-all"> + Baca Selengkapnya... + +
+
+
+ Brand +
+ {/* Decorative shirt at bottom right like in image */} +
+ Shirt detail +
+
+
+
+
+ + {/* Footer */} +
+
+
+ {/* Brand Info */} +
+
+ VN Grup +
+

+ Menghadirkan produk esensial yang tak lekang oleh waktu dengan fokus pada kualitas, keberlanjutan, dan gaya yang abadi sejak 2026. +

+
+ + + +
+
+ + {/* Quick Links */} +
+

Navigation

+
    +
  • Beranda
    • +
  • Produk
    • +
  • Cara Pesan
    • +
  • Tentang Kami
    • +
+
+ + {/* Collections */} +
+

Koleksi

+
    +
  • Kemeja Casual
    • +
  • Kemeja Flanel
    • +
  • Kemeja Oxford
    • +
  • Kemeja Polos
    • +
+
+ + {/* Newsletter */} +
+

Buletin

+

Dapatkan penawaran eksklusif dan berita terbaru.

+
+ + +
+
+
+ + {/* Bottom Bar */} +
+

© 2026 VN Grup.

+
+
+
+ + {/* Mobile Menu Overlay */} + {isMenuOpen && ( +
+ +
+ scrollToSection(e, '#homepage')} className="hover:italic transition-all">Beranda + scrollToSection(e, '#product')} className="hover:italic transition-all">Produk + scrollToSection(e, '#howToOrder')} className="hover:italic transition-all">Cara Pesan + scrollToSection(e, '#aboutUs')} className="hover:italic transition-all">Tentang Kami +
+
+ + + +
+
+ )} );