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

feat: implement project scaffolding with brutalist UI components and homepage routing

Browse Source
This commit is contained in:
Kevin Satria D
2026-05-20 13:53:45 +07:00
parent 26c9b4b362
commit a3ae3bfcfe
10 changed files with 430 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/EventSection.tsx
View File

@@ -1,5 +1,6 @@
import EventCard from './EventCard';
import { ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';
const MOCK_EVENTS = [
{
@@ -50,7 +51,7 @@ const MOCK_EVENTS = [
export default function EventSection() {
return (
<section className="bg-brutal-bg py-24 px-4 sm:px-6 lg:px-8 border-b-4 border-black">
<section id="events" className="bg-brutal-bg py-24 px-4 sm:px-6 lg:px-8 border-b-4 border-black scroll-mt-20">
<div className="max-w-7xl mx-auto">
{/* Brutalist Section Header */}
@@ -67,10 +68,10 @@ export default function EventSection() {
</p>
</div>
<button className="hidden md:flex items-center gap-3 px-8 py-4 bg-brutal-pink text-black text-lg font-black uppercase brutal-btn shrink-0">
<Link to="/events" className="hidden md:flex items-center gap-3 px-8 py-4 bg-brutal-pink text-black text-lg font-black uppercase brutal-btn shrink-0">
LIHAT SEMUA
<ArrowRight className="w-6 h-6 stroke-[3]" />
</button>
</Link>
</div>
{/* Events Grid */}
@@ -82,10 +83,10 @@ export default function EventSection() {
{/* Mobile View All Button */}
<div className="mt-12 flex justify-center md:hidden">
<button className="flex items-center gap-3 px-8 py-4 bg-brutal-pink text-black text-lg font-black uppercase brutal-btn">
<Link to="/events" className="flex items-center gap-3 px-8 py-4 bg-brutal-pink text-black text-lg font-black uppercase brutal-btn">
LIHAT SEMUA
<ArrowRight className="w-6 h-6 stroke-[3]" />
</button>
</Link>
</div>
</div>

59
src/components/FeaturedEvents.tsx Normal file
View File

@@ -0,0 +1,59 @@
export default function FeaturedEvents() {
const FEATURED_BANNERS = [
{
id: 1,
title: "AMBYAR FEST SUKABUMI",
image: "https://images.unsplash.com/photo-1540039155732-6761b54f6cce?q=80&w=1200&auto=format&fit=crop",
link: "#",
color: "bg-brutal-pink"
},
{
id: 2,
title: "BREWDANZA CULTURE",
image: "https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=1200&auto=format&fit=crop",
link: "#",
color: "bg-brutal-blue"
}
];
return (
<section className="bg-white py-24 px-4 sm:px-6 lg:px-8 border-b-4 border-black">
<div className="max-w-[1440px] mx-auto">
<div className="text-center mb-16">
<h2 className="font-display text-4xl md:text-6xl font-black text-black tracking-tight uppercase inline-block bg-[#ffd700] px-6 py-2 brutal-border shadow-[6px_6px_0_0_#000] -rotate-1 hover:rotate-0 transition-transform">
OUR FEATURED EVENTS
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 px-2">
{FEATURED_BANNERS.map((banner) => (
<a
key={banner.id}
href={banner.link}
className="group block relative"
>
{/* Brutalist Shadow Box */}
<div className={`absolute inset-0 ${banner.color} brutal-border translate-x-3 translate-y-3 transition-transform duration-300 group-hover:translate-x-1 group-hover:translate-y-1`}></div>
{/* Image Container */}
<div className="relative h-64 md:h-80 lg:h-[400px] brutal-border overflow-hidden bg-black z-10">
<img
src={banner.image}
alt={banner.title}
className="w-full h-full object-cover grayscale contrast-125 brightness-90 group-hover:grayscale-0 transition-all duration-500 group-hover:scale-110"
/>
{/* Text Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent flex items-end p-6 md:p-8">
<h3 className="text-3xl md:text-4xl font-display font-black text-white uppercase tracking-widest brutal-text-shadow leading-tight">
{banner.title}
</h3>
</div>
</div>
</a>
))}
</div>
</div>
</section>
);
}

105
src/components/Hero.tsx
View File

@@ -1,4 +1,6 @@
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Search } from "lucide-react";
const SLIDES = [
{
@@ -27,47 +29,82 @@ export default function Hero() {
}, []);
return (
<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>
<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-8 items-center">
<div className="lg:grid lg:grid-cols-12 lg:gap-12 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
<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>
</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>
</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>
<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>
{/* 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="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`}
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 className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></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>

17
src/components/Navbar.tsx
View File

@@ -1,4 +1,5 @@
import { Ticket } from "lucide-react";
import { Link } from "react-router-dom";
export default function Navbar() {
return (
@@ -17,18 +18,18 @@ export default function Navbar() {
{/* Centered Navigation Links */}
<div className="hidden md:flex flex-1 justify-center space-x-8 items-center">
<a
href="#"
<Link
to="/events"
className="bg-[#7cb9ff] text-black font-black uppercase text-sm px-6 py-2 border-4 border-black brutal-shadow-sm hover:-translate-y-1 hover:shadow-[6px_6px_0_0_#000] transition-all"
>
Tickets
</a>
<a
href="#"
className="text-black font-bold uppercase text-sm hover:underline decoration-4 underline-offset-4"
</Link>
<Link
to="/events"
className="text-black font-black uppercase text-sm hover:text-[#7cb9ff] transition-colors"
>
Events
</a>
Explore
</Link>
</div>
<div className="hidden md:flex items-center">
<button className="bg-[#ffd700] text-black font-black text-sm px-6 py-3 brutal-btn">