+
+ {/* Navbar */}
+
+
+
+
+
+ {/* Heading */}
+
+
+
+ Explore
+
+
+
+
+
+
+
+ Discover Hackathons
+
+
+
+ Find opportunities that match your skills, interests
+ and goals.
+
+
+
+
+
+ {/* Mobile filters button */}
+
setShowFilters(true)}
+ className="flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium shadow-sm lg:hidden"
+ >
+
+
+
+
+
+
+ setSearchQuery('')}
+ className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700"
+ >
+
+ )}
+
+
+
+
+ {/* Categories */}
+
+
+ setSelectedDomains([])}
+ />
+
+ {[
+ 'AI / ML',
+ 'Web Development',
+ 'Cybersecurity',
+ 'FinTech',
+ 'Blockchain',
+ 'Open Source',
+ 'IoT',
+ ].map((domain) => (
+ toggleDomain(domain)}
+ />
+ ))}
+
+
+
+
+ {/* Main layout */}
+
+
+
+ {/* Desktop filters */}
+
+
+
+ {/* Results */}
+
+
+ {/* Toolbar */}
+
+
+
+ {hackathons.length > 0
+ ? `${hackathons.length} opportunities`
+ : 'Explore available opportunities'}
+
+
+
+ {/* Sort */}
+
+
+ setSortBy(event.target.value)}
+ className="appearance-none rounded-xl border border-slate-200 bg-white py-2.5 pl-4 pr-10 text-sm font-medium text-slate-700 outline-none shadow-sm focus:border-indigo-400"
+ >
+
+
+ Recommended
+
+
+
+ Latest
+
+
+
+ Deadline
+
+
+
+
+
+
+
+
+ {hackathons.map((hackathon) => (
+
+
+ ) : (
+
+
+
+
+
+
+ {/* Mobile filter drawer */}
+ {showFilters && (
+
+
+
+ {/* Overlay */}
+
setShowFilters(false)}
+ />
+
+
+ {/* Drawer */}
+
+
+
+
+
+ Filters
+
+
+ setShowFilters(false)}
+ className="rounded-lg p-2 text-slate-500 hover:bg-slate-100"
+ >
+
+
+
+
+
+
+
+
+
setShowFilters(false)}
+ className="mt-6 w-full rounded-xl bg-slate-950 py-3.5 text-sm font-semibold text-white"
+ >
+ Apply Filters
+
+
+
+
+
+
+ )}
+
+
+ )
+}
+
+
+/* ============================================================
+ NAVBAR
+============================================================ */
+
+function Navbar() {
+ return (
+
+ )
+}
+
+
+/* ============================================================
+ FILTER PANEL
+============================================================ */
+
+function FilterPanel({
+ selectedDomains,
+ selectedModes,
+ selectedDeadline,
+ toggleDomain,
+ toggleMode,
+ setSelectedDeadline,
+ clearFilters,
+ hasFilters,
+}) {
+ return (
+
+
+
+ {/* Header */}
+
+
+
+
+
+ Filters
+
+
+
+
+
+ {hasFilters && (
+
+ Clear all
+
+ )}
+
+
+
+
+ {/* Domain */}
+
+
+ {[
+ 'AI / ML',
+ 'Web Development',
+ 'Cybersecurity',
+ 'FinTech',
+ 'Blockchain',
+ 'Open Source',
+ ].map((domain) => (
+
+ toggleDomain(domain)}
+ />
+
+ ))}
+
+
+
+
+ {/* Mode */}
+
+
+ {[
+ 'Online',
+ 'Offline',
+ 'Hybrid',
+ ].map((mode) => (
+
+ toggleMode(mode)}
+ />
+
+ ))}
+
+
+
+
+ {/* Deadline */}
+
+
+ {[
+ ['this-week', 'This week'],
+ ['this-month', 'This month'],
+ ['next-month', 'Next month'],
+ ].map(([value, label]) => (
+
+ setSelectedDeadline(value)}
+ />
+
+ ))}
+
+
+
+
+ {/* Location */}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+/* ============================================================
+ FILTER GROUP
+============================================================ */
+
+function FilterGroup({ title, children }) {
+ return (
+
+
+
+ {title}
+
+
+
+ {children}
+
+
+
+ )
+}
+
+
+/* ============================================================
+ CHECKBOX
+============================================================ */
+
+function Checkbox({
+ label,
+ checked,
+ onChange,
+ type = 'checkbox',
+}) {
+ return (
+
+
+
+ {label}
+
+
+
+ )
+}
+
+
+/* ============================================================
+ CATEGORY CHIP
+============================================================ */
+
+function CategoryChip({
+ label,
+ active,
+ onClick,
+}) {
+ return (
+
+ {label}
+
+ )
+}
+
+
+/* ============================================================
+ HACKATHON CARD
+============================================================ */
+
+function HackathonCard({ hackathon }) {
+ const [saved, setSaved] = useState(false)
+
+ return (
+
+
+
+ {/* Top */}
+
+
+
+
+ {hackathon.logo ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {/* Bookmark */}
+
setSaved(!saved)}
+ className={`rounded-lg p-2 transition ${
+ saved
+ ? 'bg-indigo-50 text-indigo-600'
+ : 'text-slate-400 hover:bg-slate-50 hover:text-slate-700'
+ }`}
+ aria-label="Save hackathon"
+ >
+
+
+
+
+
+
+ {hackathon.organizer}
+
+
+
+ {hackathon.title}
+
+
+
+
+ {hackathon.domains?.map((domain) => (
+
+
+ {domain}
+
+
+ ))}
+
+
+
+
+ {/* Details */}
+
+
+ {hackathon.mode && (
+
+
+
+
+
+ )}
+
+
+ {hackathon.deadline && (
+
+
+
+
+
+ )}
+
+
+
+ {hackathon.source && (
+
+
+ Source: {hackathon.source}
+
+
+ )}
+
+
+ View details →
+
+
+
+
+
+ )
+}
+
+
+/* ============================================================
+ EMPTY STATE
+============================================================ */
+
+function EmptyState({
+ hasFilters,
+ clearFilters,
+}) {
+ return (
+
+
+ {/* Icon */}
+
+
+
+
+
+ {/* Heading */}
+
+
+ {hasFilters
+ ? 'No hackathons match your filters'
+ : 'No hackathons available yet'}
+
+
+
+
+ {/* Description */}
+
+
+ {hasFilters
+ ? 'Try adjusting your search or removing some filters to see more opportunities.'
+ : 'Hackathon opportunities will appear here once the platform receives data from its connected sources.'}
+
+
+
+
+ {/* Clear */}
+ {hasFilters && (
+
+
+ Clear filters
+
+
+ )}
+
+
+ )
+}
+
+export default Discover
\ No newline at end of file
diff --git a/frontend/src/pages/landing.jsx b/frontend/src/pages/landing.jsx
new file mode 100644
index 0000000..4299b19
--- /dev/null
+++ b/frontend/src/pages/landing.jsx
@@ -0,0 +1,29 @@
+import Navbar from '../components/Navbar'
+import Hero from '../components/Hero'
+import AggregationSection from '../components/AggregationSection'
+import FeaturedHackathons from '../components/FeaturedHackathons'
+import HowItWorks from '../components/HowItWorks'
+import CareerSection from '../components/CareerSection'
+import CTA from '../components/CTA'
+import Footer from '../components/Footer'
+
+function Landing() {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Landing
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..9930e28
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ react(),
+ tailwindcss(),
+ ],
+})
\ No newline at end of file