Skip to content

improve readability and visual hierarchy of homepage #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haniigupta wants to merge 4 commits into
base: main
Choose a base branch
from
Open

improve readability and visual hierarchy of homepage #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f6cbeb1
improve hero section readability
haniigupta Jun 25, 2026
ea8a72e
improve search and filter visibility
haniigupta Jun 25, 2026
ae59600
Merge branch 'main' into feat/homepage-enhance
haniigupta Jun 25, 2026
7ad2f13
fix review feedback for homepage search filters
haniigupta Jun 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
47 changes: 22 additions & 25 deletions components/SearchFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@

import { useRouter, useSearchParams, usePathname } from 'next/navigation';
import { useState, useEffect } from 'react';
import { captureEvent } from '@/lib/posthog/helpers';
import { POSTHOG_EVENTS } from '@/lib/posthog/events';


const MODES = ['All', 'Online', 'Offline', 'Hybrid'];
const POPULAR_TAGS = ['All', 'Hackathon', 'Meetup', 'Web3', 'React', 'DevOps', 'AI'];

const SORT_OPTIONS = [
{ label: 'Newest First', value: '' },
{ label: 'Date (Earliest First)', value: 'date_asc' },
Expand All @@ -32,29 +30,33 @@ export default function SearchFilters() {
params.delete(key);
}
router.push(`${pathname}?${params.toString()}`, { scroll: false });
captureEvent(POSTHOG_EVENTS.EVENT_FILTER_CHANGED, { filter: key, value });
captureEvent(POSTHOG_EVENTS.EVENT_FILTER_CHANGED, {
filter: key,
value,
});
};

useEffect(() => {
const timer = setTimeout(() => {
const delayDebounceFn = setTimeout(() => {
handleFilterChange('query', search);
if (search.trim()) {
captureEvent(POSTHOG_EVENTS.EVENT_SEARCHED, { query: search });
captureEvent(POSTHOG_EVENTS.EVENT_SEARCHED, {
query: search,
});
Comment thread
haniigupta marked this conversation as resolved.
}
}, 400);
return () => clearTimeout(timer);
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';
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">
{/* Search input */}
<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"
Expand All @@ -64,12 +66,8 @@ export default function SearchFilters() {
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>

{/* Filter row */}
<div className="flex flex-col md:flex-row gap-4 md:items-center justify-between pt-1">

{/* Mode filter */}
<div className="flex items-center gap-2 shrink-0">
<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-[var(--color-light-200)]">Mode:</span>
<select
id="event-mode-filter"
Expand All @@ -82,31 +80,28 @@ export default function SearchFilters() {
))}
</select>
</div>

{/* Tag pills */}
<div className="flex items-center gap-2 overflow-x-auto max-w-full">
<span className="text-sm font-medium text-[var(--color-light-200)] shrink-0">Tags:</span>
<div className="flex gap-1.5 flex-wrap">
<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 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)]'
}`}
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}
</button>
);
})}
</div>
</div>

</div>
{/* Sort dropdown */}
<div className="flex items-center gap-2 shrink-0">
<label
Expand All @@ -130,5 +125,7 @@ export default function SearchFilters() {
</div>
</div>
</div>


);
}
Loading