kevinsatriadarmawan/Frontend-Smart_Ticketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize project structure with core UI components including Navbar, Footer, and Hero sections

Browse Source
This commit is contained in:
Kevin Satria D
2026-05-20 13:13:51 +07:00
parent a8dfc3d294
commit 26c9b4b362
7 changed files with 271 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/Hero.tsx
View File

@@ -1,40 +1,18 @@
import { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useState, useEffect } from "react";
const SLIDES = [
{
id: 1,
title1: "Music Festival",
title2: "Concert",
subtitle: "Jual Ticket di Smart Ticketing Aja",
gradientText: "from-cyan-400 via-indigo-400 to-purple-400",
gradientSub: "from-emerald-400 to-cyan-400",
blob1: "bg-purple-600/30",
blob2: "bg-cyan-500/20",
blob3: "bg-indigo-600/20"
videoId: "Fpn1imb9qZg",
},
{
id: 2,
title1: "Standup Comedy",
title2: "Special Show",
subtitle: "Pesan Kursi Terbaikmu Sekarang",
gradientText: "from-pink-400 via-rose-400 to-red-500",
gradientSub: "from-orange-400 to-amber-400",
blob1: "bg-pink-600/30",
blob2: "bg-rose-500/20",
blob3: "bg-red-600/20"
videoId: "PN7Pv23FrWg",
},
{
id: 3,
title1: "E-Sports",
title2: "Tournament",
subtitle: "Dukung Tim Favoritmu Langsung",
gradientText: "from-blue-400 via-cyan-400 to-teal-400",
gradientSub: "from-lime-400 to-emerald-400",
blob1: "bg-blue-600/30",
blob2: "bg-teal-500/20",
blob3: "bg-cyan-600/20"
}
videoId: "YsJqKjD2sXE",
},
];
export default function Hero() {
@@ -44,89 +22,56 @@ export default function Hero() {
useEffect(() => {
const timer = setInterval(() => {
setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
}, 5000);
}, 6000);
return () => clearInterval(timer);
}, []);
const nextSlide = () => {
setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
};
const prevSlide = () => {
setCurrentSlide((prev) => (prev - 1 + SLIDES.length) % SLIDES.length);
};
const slide = SLIDES[currentSlide];
return (
<div className="relative min-h-[90vh] flex items-center justify-center overflow-hidden bg-slate-950 pt-20 transition-colors duration-1000">
{/* Abstract Backgrounds (Dynamic based on slide) */}
<div className="absolute inset-0 w-full h-full transition-all duration-1000">
<div className={`absolute top-0 left-1/4 w-[800px] h-[800px] ${slide.blob1} rounded-full blur-[150px] mix-blend-screen animate-pulse transition-colors duration-1000`} />
<div className={`absolute bottom-0 right-1/4 w-[600px] h-[600px] ${slide.blob2} rounded-full blur-[120px] mix-blend-screen transition-colors duration-1000`} />
<div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[500px] ${slide.blob3} rounded-full blur-[150px] transition-colors duration-1000`} />
</div>
<div className="relative bg-white pt-32 pb-20 lg:pt-40 lg:pb-32 overflow-hidden border-b-4 border-black min-h-[90vh] flex items-center">
{/* Absolute light blue background block on the left */}
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1/3 h-[300px] bg-[#c2e2ff] hidden lg:block z-0 border-y-4 border-r-4 border-black"></div>
{/* Content Container */}
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto flex flex-col items-center">
{/* Large Decorative Text */}
<h1
key={`title1-${slide.id}`}
className={`font-display font-black text-6xl md:text-8xl lg:text-9xl text-transparent bg-clip-text bg-gradient-to-r ${slide.gradientText} drop-shadow-2xl mb-2 tracking-tighter uppercase animate-in fade-in slide-in-from-bottom-4 duration-700`}
>
{slide.title1}
</h1>
<h2
key={`title2-${slide.id}`}
className="font-display font-black text-6xl md:text-8xl lg:text-9xl text-slate-100 drop-shadow-2xl tracking-tighter uppercase mb-8 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-100 fill-mode-backwards"
>
{slide.title2}
</h2>
<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-8 items-center">
{/* Left Content */}
<div className="lg:col-span-5 mb-16 lg:mb-0 relative z-10">
<h1 className="text-6xl lg:text-7xl xl:text-8xl font-display font-black text-black tracking-tighter leading-[0.9] mb-8 uppercase flex flex-col items-start">
<span>ACCESS</span>
<span className="inline-block px-4 py-1 bg-[#7cb9ff] brutal-border shadow-[6px_6px_0_0_#000] rotate-[-2deg] mt-2 ml-4">
THE GRID
</span>
</h1>
<p className="text-lg font-bold text-black mb-12 max-w-md">
Next-generation ticketing for the brutalist era. No hidden fees.
No scalpers. Just raw access.
</p>
{/* Subtitle Call to action */}
<div className="inline-block relative animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200 fill-mode-backwards" key={`sub-${slide.id}`}>
<div className={`absolute inset-0 bg-gradient-to-r ${slide.gradientSub} blur-xl opacity-30 transition-colors duration-1000`}></div>
<h3 className={`relative font-display font-extrabold text-3xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-r ${slide.gradientSub} tracking-tight uppercase transition-colors duration-1000`}>
{slide.subtitle}
</h3>
</div>
<button className="px-8 py-4 bg-[#7cb9ff] brutal-border shadow-[8px_8px_0_0_#000] hover:shadow-[4px_4px_0_0_#000] hover:translate-x-1 hover:translate-y-1 transition-all text-black font-black text-xl tracking-wider uppercase">
EXPLORE EVENTS
</button>
</div>
{/* Decorative Elements */}
<div className="absolute top-1/4 left-10 md:left-20 animate-bounce delay-100 hidden lg:block">
<div className="w-16 h-16 rounded-3xl bg-gradient-to-tr from-cyan-400 to-blue-500 rotate-12 shadow-[0_0_30px_rgba(34,211,238,0.4)]" />
</div>
<div className="absolute bottom-1/4 right-10 md:right-20 animate-bounce delay-300 hidden lg:block">
<div className="w-20 h-20 rounded-full bg-gradient-to-tr from-yellow-400 to-orange-500 shadow-[0_0_30px_rgba(250,204,21,0.4)]" />
{/* Right Content - Wide Video Container */}
<div className="lg:col-span-7 relative">
<div className="relative w-full aspect-video bg-black brutal-border shadow-[12px_12px_0_0_#000] lg:shadow-[16px_16px_0_0_#000] overflow-hidden">
{/* Render ALL iframes at once to keep them playing, just toggle opacity */}
{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`}
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"
frameBorder="0"
/>
))}
<div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>
</div>
</div>
</div>
</div>
{/* Slide Indicators */}
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex items-center gap-3 z-20">
{SLIDES.map((_, index) => (
<button
key={index}
onClick={() => setCurrentSlide(index)}
className={`w-3 h-3 rounded-full transition-all duration-300 ${
currentSlide === index ? 'bg-white w-8' : 'bg-white/30 hover:bg-white/60'
}`}
/>
))}
</div>
{/* Carousel Controls */}
<button
onClick={prevSlide}
className="absolute left-4 md:left-10 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/10 transition-all backdrop-blur-md z-20"
>
<ChevronLeft className="w-6 h-6" />
</button>
<button
onClick={nextSlide}
className="absolute right-4 md:right-10 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/10 transition-all backdrop-blur-md z-20"
>
<ChevronRight className="w-6 h-6" />
</button>
</div>
);
}