From f6cbeb1b8bd9e318b868ca52447738be8d4d5a9e Mon Sep 17 00:00:00 2001
From: hani <guptahani75@gmail.com>
Date: Fri, 26 Jun 2026 00:04:51 +0530
Subject: [PATCH 1/3] improve hero section readability

---
 app/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 1ee36b7..d6d9f35 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -28,13 +28,13 @@ const Page = async ({ searchParams }: PageProps) => {
 
   return (
     <section>
-      <h1 className="text-center">The Hub for Every Dev <br /> Event You Can&apos;t Miss</h1>
-      <p className="text-center mt-5">Hackathons, Meetups, and Conferences, All in One Place</p>
+     <h1 className="text-center drop-shadow-[0_6px_30px_rgba(0,0,0,0.7)]">The Hub for Every Dev <br /> Event You Can&apos;t Miss</h1>
+      <p className="text-center mt-5 max-w-3xl mx-auto text-lg text-gray-200 leading-8 drop-shadow-[0_2px_10px_rgba(0,0,0,0.6)]">Hackathons, Meetups, and Conferences, All in One Place</p>
 
       <ExploreBtn />
 
       {/* 3. Insert the newly generated Search and Filter component bar */}
-      <div className="mt-10">
+      <div className="mt-12">
         <SearchFilters />
       </div>
 
@@ -52,10 +52,10 @@ const Page = async ({ searchParams }: PageProps) => {
           </ul>
         ) : (
           /* Smooth Contextual Empty State displayed dynamically */
-          <div className="flex flex-col items-center justify-center text-center p-12 border border-dashed border-gray-300 rounded-2xl max-w-xl mx-auto bg-white/50">
-            <h4 className="text-lg font-semibold text-gray-800 mb-1">No events found</h4>
+           <div className="flex flex-col items-center justify-center text-center p-12 rounded-2xl max-w-xl mx-auto border border-cyan-500/20 bg-[#111827]/80 backdrop-blur-md shadow-lg">
+            <h4 className="text-lg font-semibold text-white mb-2">No events found</h4>
             {/* Fixed Linting Error: Escaped the apostrophe here */}
-            <p className="text-sm text-gray-500 max-w-xs">
+            <p className="text-sm text-gray-300 max-w-xs leading-6">
               We couldn&apos;t find any listings matching your search constraints. Try checking your spelling or adjusting filters.
             </p>
           </div>

From ea8a72e527c665bb5b78d4c0b0129a7073a39e40 Mon Sep 17 00:00:00 2001
From: hani <guptahani75@gmail.com>
Date: Fri, 26 Jun 2026 00:05:22 +0530
Subject: [PATCH 2/3] improve search and filter visibility

---
 components/SearchFilters.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/SearchFilters.tsx b/components/SearchFilters.tsx
index 9613ad7..27a01b8 100644
--- a/components/SearchFilters.tsx
+++ b/components/SearchFilters.tsx
@@ -37,15 +37,15 @@ export default function SearchFilters() {
         placeholder="Search events by title, description or tags..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
-        className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm transition"
+        className="w-full px-4 py-3 rounded-xl border border-cyan-500/20 bg-[#111827]/80 text-white placeholder:text-gray-400 backdrop-blur-md focus:outline-none focus:ring-2 focus:ring-cyan-400 transition"
       />
       <div className="flex flex-col md:flex-row gap-4 md:items-center justify-between pt-2">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-500">Mode:</span>
+          <span className="text-sm font-medium text-gray-300">Mode:</span>
           <select
             value={searchParams.get('mode') || 'All'}
             onChange={(e) => handleFilterChange('mode', e.target.value)}
-            className="px-3 py-1.5 rounded-lg border border-gray-200 bg-white dark:bg-gray-900 text-sm focus:outline-none"
+            className="px-3 py-2 rounded-lg border border-cyan-500/20 bg-[#111827] text-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-400"
           >
             {MODES.map((mode) => (
               <option key={mode} value={mode}>{mode}</option>
@@ -53,7 +53,7 @@ export default function SearchFilters() {
           </select>
         </div>
         <div className="flex items-center gap-2 overflow-x-auto max-w-full">
-          <span className="text-sm font-medium text-gray-500 shrink-0">Tags:</span>
+          <span className="text-sm font-medium text-gray-300 shrink-0">Tags:</span>
           <div className="flex gap-1.5">
             {POPULAR_TAGS.map((tag) => {
               const isActive = (searchParams.get('tag') || 'All') === tag;
@@ -61,9 +61,10 @@ export default function SearchFilters() {
                 <button
                   key={tag}
                   onClick={() => handleFilterChange('tag', tag)}
-                  className={`px-3 py-1 text-xs font-medium rounded-full border transition ${
-                    isActive ? 'bg-blue-600 text-white' : 'bg-gray-50 text-gray-600'
-                  }`}
+                  className={`px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200 ${isActive
+                      ? 'bg-cyan-500 text-black border-cyan-500'
+                      : 'bg-[#111827]/80 text-gray-300 border-cyan-500/20 hover:bg-cyan-500/10'
+                    }`}
                 >
                   {tag}
                 </button>

From 7ad2f130ea6a18f979ba3e87b7fcff9dc37d34c9 Mon Sep 17 00:00:00 2001
From: hani <guptahani75@gmail.com>
Date: Sun, 28 Jun 2026 15:45:06 +0530
Subject: [PATCH 3/3] fix review feedback for homepage search filters

---
 components/SearchFilters.tsx | 81 +++++++++++++++++++++++++++++-------
 1 file changed, 67 insertions(+), 14 deletions(-)

diff --git a/components/SearchFilters.tsx b/components/SearchFilters.tsx
index 27a01b8..439a593 100644
--- a/components/SearchFilters.tsx
+++ b/components/SearchFilters.tsx
@@ -3,8 +3,17 @@
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import { useState, useEffect } from 'react';
 
+
 const MODES = ['All', 'Online', 'Offline', 'Hybrid'];
-const POPULAR_TAGS = ['All', 'Hackathons', 'Meetups', 'Web3', 'React', 'DevOps', 'AI'];
+const POPULAR_TAGS = ['All', 'Hackathon', 'Meetup', 'Web3', 'React', 'DevOps', 'AI'];
+const SORT_OPTIONS = [
+  { label: 'Newest First', value: '' },
+  { label: 'Date (Earliest First)', value: 'date_asc' },
+  { label: 'Date (Latest First)', value: 'date_desc' },
+  { label: 'Popularity (Most Booked)', value: 'popularity' },
+  { label: 'Name (A–Z)', value: 'name_asc' },
+  { label: 'Name (Z–A)', value: 'name_desc' },
+];
 
 export default function SearchFilters() {
   const router = useRouter();
@@ -21,31 +30,50 @@ export default function SearchFilters() {
       params.delete(key);
     }
     router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    captureEvent(POSTHOG_EVENTS.EVENT_FILTER_CHANGED, {
+      filter: key,
+      value,
+    });
   };
 
   useEffect(() => {
     const delayDebounceFn = setTimeout(() => {
       handleFilterChange('query', search);
+      if (search.trim()) {
+        captureEvent(POSTHOG_EVENTS.EVENT_SEARCHED, {
+          query: search,
+        });
+      }
     }, 400);
     return () => clearTimeout(delayDebounceFn);
   }, [search]);
 
+  const selectClass = 'px-3 py-1.5 rounded-lg border border-[var(--color-border-dark)] bg-[var(--color-dark-200)] text-[var(--color-light-100)] text-sm focus:outline-none focus:ring-1 focus:ring-[var(--color-blue)] transition cursor-pointer';
+
   return (
     <div className="w-full max-w-6xl mx-auto my-6 px-4 space-y-4">
-      <input
-        type="text"
-        placeholder="Search events by title, description or tags..."
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        className="w-full px-4 py-3 rounded-xl border border-cyan-500/20 bg-[#111827]/80 text-white placeholder:text-gray-400 backdrop-blur-md focus:outline-none focus:ring-2 focus:ring-cyan-400 transition"
-      />
+      <div className="relative">
+        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--color-light-200)] text-sm pointer-events-none">
+          🔍
+        </span>
+
+        <input
+          id="event-search-input"
+          type="text"
+          placeholder="Search events by title, description or tags..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-full pl-10 pr-4 py-3 rounded-xl border border-[var(--color-border-dark)] bg-[var(--color-dark-200)] text-[var(--color-light-100)] placeholder:text-[var(--color-light-200)] focus:outline-none focus:ring-1 focus:ring-[var(--color-blue)] shadow-sm transition"
+        />
+      </div>
       <div className="flex flex-col md:flex-row gap-4 md:items-center justify-between pt-2">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-300">Mode:</span>
+          <span className="text-sm font-medium text-[var(--color-light-200)]">Mode:</span>
           <select
+            id="event-mode-filter"
             value={searchParams.get('mode') || 'All'}
             onChange={(e) => handleFilterChange('mode', e.target.value)}
-            className="px-3 py-2 rounded-lg border border-cyan-500/20 bg-[#111827] text-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-400"
+            className={selectClass}
           >
             {MODES.map((mode) => (
               <option key={mode} value={mode}>{mode}</option>
@@ -53,17 +81,18 @@ export default function SearchFilters() {
           </select>
         </div>
         <div className="flex items-center gap-2 overflow-x-auto max-w-full">
-          <span className="text-sm font-medium text-gray-300 shrink-0">Tags:</span>
+          <span className="text-sm font-medium text-[var(--color-light-200)] shrink-0">Tags:</span>
           <div className="flex gap-1.5">
             {POPULAR_TAGS.map((tag) => {
               const isActive = (searchParams.get('tag') || 'All') === tag;
               return (
                 <button
                   key={tag}
+                  id={`tag-filter-${tag.toLowerCase()}`}
                   onClick={() => handleFilterChange('tag', tag)}
-                  className={`px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200 ${isActive
-                      ? 'bg-cyan-500 text-black border-cyan-500'
-                      : 'bg-[#111827]/80 text-gray-300 border-cyan-500/20 hover:bg-cyan-500/10'
+                  className={`px-3 py-1 text-xs font-medium rounded-full border transition cursor-pointer ${isActive
+                    ? 'bg-[var(--primary)] text-black border-[var(--primary)]'
+                    : 'bg-[var(--color-dark-100)] text-[var(--color-light-100)] border-[var(--color-border-dark)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]'
                     }`}
                 >
                   {tag}
@@ -71,8 +100,32 @@ export default function SearchFilters() {
               );
             })}
           </div>
+
+        </div>
+        {/* Sort dropdown */}
+        <div className="flex items-center gap-2 shrink-0">
+          <label
+            htmlFor="event-sort-select"
+            className="text-sm font-medium text-[var(--color-light-200)] whitespace-nowrap"
+          >
+            Sort by:
+          </label>
+          <select
+            id="event-sort-select"
+            value={searchParams.get('sortBy') || ''}
+            onChange={(e) => handleFilterChange('sortBy', e.target.value)}
+            className={`${selectClass} min-w-[185px]`}
+          >
+            {SORT_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
         </div>
       </div>
     </div>
+
+
   );
 }