From a3ae3bfcfe974f118f24ae5507975b0f0a61d5f3 Mon Sep 17 00:00:00 2001
From: Kevin Satria D <130447401+kevinnsd1@users.noreply.github.com>
Date: Wed, 20 May 2026 13:53:45 +0700
Subject: [PATCH] feat: implement project scaffolding with brutalist UI
 components and homepage routing

---
 package-lock.json                 |  60 +++++++++-
 package.json                      |   3 +-
 src/App.tsx                       |  39 +++++--
 src/components/EventSection.tsx   |  11 +-
 src/components/FeaturedEvents.tsx |  59 ++++++++++
 src/components/Hero.tsx           | 105 +++++++++++------
 src/components/Navbar.tsx         |  17 +--
 src/index.css                     |   1 +
 src/pages/AllEvents.tsx           | 182 ++++++++++++++++++++++++++++++
 src/pages/Home.tsx                |  13 +++
 10 files changed, 430 insertions(+), 60 deletions(-)
 create mode 100644 src/components/FeaturedEvents.tsx
 create mode 100644 src/pages/AllEvents.tsx
 create mode 100644 src/pages/Home.tsx

diff --git a/package-lock.json b/package-lock.json
index 6dbf237..31b00ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "lucide-react": "^0.475.0",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-router-dom": "^7.15.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.19.0",
@@ -2259,6 +2260,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3454,6 +3468,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.15.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.15.1.tgz",
+      "integrity": "sha512-R8rl9HhgikFYoPJymnUtPXWbnDb3oget6lQnfIoupbt61aT9aOhRkDsY2XRhZRyX1Z/8a5sL74fXmFNm3NRK5A==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.15.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.15.1.tgz",
+      "integrity": "sha512-AzF62gjY6U9rkMq4RfP/r2EVtQ7DMfNMjyOp/flLTCrtRylLiK4wT4pSq6O8rOXZ2eXdZYJPEYe+ifomiv+Igg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.15.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3532,6 +3584,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/package.json b/package.json
index ffffbf8..0425926 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.15.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
diff --git a/src/App.tsx b/src/App.tsx
index b093b29..2fce6f7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,37 @@
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
 import Navbar from './components/Navbar';
-import Hero from './components/Hero';
-import EventSection from './components/EventSection';
 import Footer from './components/Footer';
+import Home from './pages/Home';
+import AllEvents from './pages/AllEvents';
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
 
 function App() {
   return (
-    <div className="min-h-screen bg-brutal-bg text-black font-sans selection:bg-brutal-pink selection:text-black flex flex-col">
-      <Navbar />
-      
-      <main className="flex-1 flex flex-col">
-        <Hero />
-        <EventSection />
-      </main>
+    <BrowserRouter>
+      <ScrollToTop />
+      <div className="min-h-screen bg-brutal-bg text-black font-sans selection:bg-brutal-pink selection:text-black flex flex-col">
+        <Navbar />
+        
+        <main className="flex-1 flex flex-col">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/events" element={<AllEvents />} />
+          </Routes>
+        </main>
 
-      <Footer />
-    </div>
+        <Footer />
+      </div>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/components/EventSection.tsx b/src/components/EventSection.tsx
index 76d3420..8b8defd 100644
--- a/src/components/EventSection.tsx
+++ b/src/components/EventSection.tsx
@@ -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>
diff --git a/src/components/FeaturedEvents.tsx b/src/components/FeaturedEvents.tsx
new file mode 100644
index 0000000..62760b2
--- /dev/null
+++ b/src/components/FeaturedEvents.tsx
@@ -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>
+  );
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index f4aef07..3a2b739 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -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>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c8a8634..5eaf0aa 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -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">
diff --git a/src/index.css b/src/index.css
index 66a68f7..bd79dcf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -52,6 +52,7 @@
   }
 }
 
+
 html, body {
   background-color: var(--color-brutal-bg);
   color: #000;
diff --git a/src/pages/AllEvents.tsx b/src/pages/AllEvents.tsx
new file mode 100644
index 0000000..27eb5aa
--- /dev/null
+++ b/src/pages/AllEvents.tsx
@@ -0,0 +1,182 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import EventCard from '../components/EventCard';
+import { Search, ArrowLeft } from 'lucide-react';
+
+const ALL_MOCK_EVENTS = [
+  {
+    id: '1',
+    title: 'PURNAMA BERSANTAI 2026',
+    image: 'https://images.unsplash.com/photo-1459749411175-04bf5292ceea?q=80&w=1000&auto=format&fit=crop',
+    date: '2026-08-21 15:00',
+    location: 'Medan, Sumatera Utara',
+    price: 'Rp 185.000',
+    organizer: 'Puber2026',
+    status: 'Coming Soon',
+    isAvailable: true,
+  },
+  {
+    id: '2',
+    title: 'MEDAN GLOWFEST 2024',
+    image: 'https://images.unsplash.com/photo-1540039155732-6761b54f6cce?q=80&w=1000&auto=format&fit=crop',
+    date: '2024-12-31 18:30',
+    location: 'Lakeside Garden Royal...',
+    price: '-',
+    organizer: 'Glowfest 2024',
+    status: 'Ended',
+    isAvailable: false,
+  },
+  {
+    id: '3',
+    title: 'HI REV ENDURANCE OTOFEST',
+    image: 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=1000&auto=format&fit=crop',
+    date: '2024-09-13 10:00',
+    location: 'Jl. Negara, Petapahan...',
+    price: 'Rp 50.000',
+    organizer: 'Hirevendurance',
+    status: 'Ended',
+    isAvailable: false,
+  },
+  {
+    id: '4',
+    title: 'TAMASYA LEBARAN',
+    image: 'https://images.unsplash.com/photo-1493225457124-a1a2a5956093?q=80&w=1000&auto=format&fit=crop',
+    date: '2024-04-18 18:00',
+    location: 'PRSU, Medan',
+    price: 'Rp 100.000',
+    organizer: 'Tamasya Lebaran',
+    status: 'Ended',
+    isAvailable: false,
+  },
+  {
+    id: '5',
+    title: 'AMBYAR FEST SUKABUMI',
+    image: 'https://images.unsplash.com/photo-1540039155732-6761b54f6cce?q=80&w=1000&auto=format&fit=crop',
+    date: '2026-04-19 19:00',
+    location: 'Stadion Surya Kencana',
+    price: 'Rp 150.000',
+    organizer: 'AmbyarFest',
+    status: 'Coming Soon',
+    isAvailable: true,
+  },
+  {
+    id: '6',
+    title: 'BREWDANZA CULTURE',
+    image: 'https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=1000&auto=format&fit=crop',
+    date: '2024-11-20 20:00',
+    location: 'Jakarta Selatan',
+    price: 'Rp 200.000',
+    organizer: 'Brewdanza',
+    status: 'On Going',
+    isAvailable: true,
+  }
+];
+
+export default function AllEvents() {
+  const [filter, setFilter] = useState('All');
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  const filters = ['All', 'On Going', 'Coming Soon', 'Ended'];
+  
+  const filteredEvents = ALL_MOCK_EVENTS.filter(event => {
+    const matchesStatus = filter === 'All' || event.status === filter;
+    const matchesSearch = event.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                          event.location.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesStatus && matchesSearch;
+  });
+
+  return (
+    <div className="bg-white min-h-screen pt-32 pb-24 px-4 sm:px-6 lg:px-8 border-b-4 border-black">
+      <div className="max-w-[1440px] mx-auto">
+        <Link 
+          to="/" 
+          className="inline-flex items-center gap-2 mb-6 text-black font-black uppercase hover:-translate-x-2 transition-transform"
+        >
+          <ArrowLeft className="w-6 h-6 stroke-[3]" />
+          Kembali ke Beranda
+        </Link>
+        
+        <h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-black text-black tracking-tight uppercase mb-8 border-b-4 border-black pb-4">
+          FILTER EVENTS
+        </h1>
+
+        <div className="flex flex-col lg:flex-row gap-10">
+          
+          {/* Left Sidebar Filters */}
+          <div className="lg:w-1/4 lg:shrink-0 flex flex-col gap-8">
+            
+            {/* Search Feature */}
+            <div>
+              <h2 className="text-xl font-black text-black uppercase mb-3">
+                CARI
+              </h2>
+              <div className="flex items-center brutal-border bg-white overflow-hidden shadow-[4px_4px_0_0_#000] focus-within:translate-x-1 focus-within:translate-y-1 focus-within:shadow-none transition-all">
+                <div className="p-3 bg-white border-r-4 border-black">
+                  <Search className="w-5 h-5 text-black stroke-[3]" />
+                </div>
+                <input 
+                  type="text" 
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Ketik nama event..." 
+                  className="w-full px-4 py-3 outline-none text-black font-bold placeholder-gray-500"
+                />
+              </div>
+            </div>
+
+            {/* Status Filter */}
+            <div>
+              <h2 className="text-xl font-black text-black uppercase mb-3">
+                STATUS
+              </h2>
+              <div className="flex flex-wrap lg:flex-col gap-3">
+                {filters.map(f => (
+                  <button
+                    key={f}
+                    onClick={() => setFilter(f)}
+                    className={`px-5 py-3 text-sm font-black uppercase text-left transition-all ${
+                      filter === f 
+                        ? 'bg-brutal-blue text-white brutal-border shadow-none translate-x-[2px] translate-y-[2px]' 
+                        : 'bg-white text-black brutal-border hover:bg-gray-100 hover:translate-x-[2px] hover:translate-y-[2px] shadow-[4px_4px_0_0_#000] hover:shadow-[2px_2px_0_0_#000]'
+                    }`}
+                  >
+                    {f}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+          </div>
+
+          {/* Right Content Grid */}
+          <div className="lg:w-3/4">
+            {filteredEvents.length > 0 ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-8">
+                {filteredEvents.map(event => (
+                  <EventCard 
+                    key={event.id} 
+                    {...event} 
+                    status={event.isAvailable ? 'ON SALE' : 'CLOSE'}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="w-full py-20 flex flex-col justify-center items-center brutal-border bg-brutal-bg shadow-[8px_8px_0_0_#000]">
+                <p className="text-2xl font-black text-black uppercase text-center px-4">
+                  TIDAK ADA EVENT DITEMUKAN
+                </p>
+                <button 
+                  onClick={() => { setSearchQuery(''); setFilter('All'); }}
+                  className="mt-6 px-6 py-2 bg-brutal-pink text-black font-black uppercase brutal-btn text-sm"
+                >
+                  Reset Filter
+                </button>
+              </div>
+            )}
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..409220d
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,13 @@
+import Hero from '../components/Hero';
+import FeaturedEvents from '../components/FeaturedEvents';
+import EventSection from '../components/EventSection';
+
+export default function Home() {
+  return (
+    <>
+      <Hero />
+      <FeaturedEvents />
+      <EventSection />
+    </>
+  );
+}