115 lines
5.1 KiB
TypeScript
115 lines
5.1 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Search } from "lucide-react";
|
|
|
|
const SLIDES = [
|
|
{
|
|
id: 1,
|
|
videoId: "Fpn1imb9qZg", // Konser
|
|
},
|
|
{
|
|
id: 2,
|
|
videoId: "qqvBnmUBP8g", // Lari
|
|
},
|
|
{
|
|
id: 3,
|
|
videoId: "DK3hsi6NBjw", // Seminar
|
|
},
|
|
];
|
|
|
|
export default function Hero() {
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
|
|
// Auto-play
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
|
|
}, 6000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative bg-[#ffd700] pt-28 pb-16 lg:pt-36 lg:pb-24 overflow-hidden border-b-4 border-black min-h-[70vh] flex items-center">
|
|
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
|
|
<div className="lg:grid lg:grid-cols-12 lg:gap-12 items-center">
|
|
{/* Left Content */}
|
|
<div className="lg:col-span-6 mb-16 lg:mb-0 relative z-10">
|
|
{/* Small Label */}
|
|
<div className="inline-flex items-center gap-3 bg-white brutal-border brutal-shadow-sm px-4 py-2 mb-8">
|
|
<div className="w-4 h-3 bg-brutal-pink brutal-border"></div>
|
|
<span className="text-black font-black tracking-widest text-xs uppercase">
|
|
TICKETING MADE SIMPLE
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-5xl lg:text-6xl xl:text-7xl font-display font-black text-black tracking-tight leading-[1.1] mb-6">
|
|
Pesan Tiket Event Jadi Lebih Mudah
|
|
</h1>
|
|
|
|
<div className="pl-4 border-l-4 border-black mb-10">
|
|
<p className="text-lg font-bold text-black max-w-md">
|
|
Platform ticketing modern untuk konser, seminar, festival, dan
|
|
berbagai event lainnya dengan gaya neo-brutalism yang unik.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row brutal-border shadow-[8px_8px_0_0_#000] bg-white">
|
|
<div className="flex-1 flex items-center px-4 py-3 sm:py-0 border-b-4 sm:border-b-0 sm:border-r-4 border-black">
|
|
<Search className="w-6 h-6 text-gray-500 mr-3 shrink-0" />
|
|
<input
|
|
type="text"
|
|
placeholder="Cari konser, seminar, atau festival..."
|
|
className="w-full bg-transparent outline-none text-black font-bold placeholder-gray-500 h-12"
|
|
/>
|
|
</div>
|
|
<button className="px-8 py-4 bg-[#7cb9ff] text-black font-black uppercase hover:bg-[#60A5FA] transition-colors shrink-0">
|
|
Cari Event
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-6 relative mt-12 lg:mt-7 z-10 translate-y-4 lg:translate-y-8">
|
|
<div className="bg-white p-4 md:p-6 brutal-border shadow-[12px_12px_0_0_#000] lg:shadow-[16px_16px_0_0_#000] rotate-2 hover:rotate-0 transition-transform duration-500 max-w-2xl mx-auto xl:ml-auto">
|
|
<div className="relative w-full aspect-video bg-black brutal-border overflow-hidden">
|
|
{SLIDES.map((slide, idx) => (
|
|
<iframe
|
|
key={`video-${slide.id}`}
|
|
src={`https://www.youtube.com/embed/${slide.videoId}?autoplay=1&mute=1&controls=0&loop=1&playlist=${slide.videoId}&modestbranding=1&playsinline=1&rel=0&showinfo=0&disablekb=1&fs=0`}
|
|
className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
|
|
currentSlide === idx
|
|
? "opacity-100 z-10"
|
|
: "opacity-0 z-0"
|
|
}`}
|
|
allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
|
|
frameBorder="0"
|
|
/>
|
|
))}
|
|
<div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>
|
|
</div>
|
|
|
|
{/* Bottom detail for polaroid vibe */}
|
|
<div className="mt-5 flex justify-between items-center px-1">
|
|
<div>
|
|
<h3 className="text-xl font-black text-black">
|
|
Live Event Previews
|
|
</h3>
|
|
<p className="text-sm font-bold text-gray-600 mt-1 flex items-center gap-2 uppercase tracking-wider">
|
|
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
|
ON AIR
|
|
</p>
|
|
</div>
|
|
{/* Decorative squares from reference */}
|
|
<div className="grid grid-cols-2 gap-1 brutal-border p-1 bg-white shadow-[2px_2px_0_0_#000]">
|
|
<div className="w-3 h-3 bg-black"></div>
|
|
<div className="w-3 h-3 bg-black"></div>
|
|
<div className="w-3 h-3 bg-white"></div>
|
|
<div className="w-3 h-3 bg-black"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|