Prarambha369 · Copilot · Jan 23, 2026 · Jan 23, 2026 · Jan 23, 2026 · Jan 23, 2026
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,8 @@
+{
+  "name": "HackDay Dev Environment",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
+  "features": {
+    "ghcr.io/devcontainers/features/git:1": {}
+  },
+  "postCreateCommand": "npm install"
+}
diff --git a/AGENTS.md b/AGENTS.md
@@ -0,0 +1,9 @@
+# Volunteer Instructions
+
+- Follow the roadmap and TODO.md
+- Use modular React components
+- Keep content editable in JSON files under content/
+- All styling must follow brand colors and brand fonts
+- Use SVGs for all logos and icons
+- Commit small, descriptive changes
+- Open Pull Requests for any new features or fixes
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -0,0 +1,11 @@
+## Phase 1
+- Launch homepage with hero, mission, and event details
+- Add sponsors and team projects dynamically
+
+## Phase 2
+- Add gallery / photos
+- Add testimonials & feedback section
+
+## Phase 3
+- Prepare archive for future events
+- Automate volunteer updates via JSON
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,6 @@
+- Update homepage content in content/home.json
+- Add about/contact sections
+- Update events.json to mark event status
+- Update teams.json with GitHub & Devpost links
+- Ensure all sponsor logos are SVG
+- Deploy updates to staging or production
diff --git a/content/events.json b/content/events.json
@@ -0,0 +1,8 @@
+[
+  {
+    "name": "HackDay Lumbini 2026",
+    "status": "Ended",
+    "date": "2026-01-17",
+    "venue": "Lumbini World School"
+  }
+]
diff --git a/content/home.json b/content/home.json
@@ -0,0 +1,6 @@
+{
+  "title": "HackDay Lumbini 2026",
+  "tagline": "Innovate. Build. Collaborate.",
+  "location": "Lumbini World School, Rupandehi District",
+  "mission": "Empowering students with hands-on hackathon experience in collaboration with MLH and Google Gemini HackDays Innovative."
+}
diff --git a/content/sponsors.json b/content/sponsors.json
@@ -0,0 +1,12 @@
+[
+  {
+    "name": "MLH",
+    "logo": "/svg/mlh.svg",
+    "website": "https://mlh.io"
+  },
+  {
+    "name": "Google Gemini HackDays",
+    "logo": "/svg/google-gemini.svg",
+    "website": "https://developers.google.com/gemini"
+  }
+]
diff --git a/content/teams.json b/content/teams.json
@@ -0,0 +1,14 @@
+[
+  {
+    "team_name": "Team Alpha",
+    "github_repo": "https://github.com/Butwal-Hacks/team-alpha",
+    "devpost_link": "https://butwal.devpost.com/project/alpha",
+    "project_title": "Smart Campus App"
+  },
+  {
+    "team_name": "Team Beta",
+    "github_repo": "https://github.com/Butwal-Hacks/team-beta",
+    "devpost_link": "https://butwal.devpost.com/project/beta",
+    "project_title": "AI Attendance Tracker"
+  }
+]
diff --git a/demo.html b/demo.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HackDay Lumbini 2026 - Component Demo</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { font-family: 'Arial', sans-serif; }
+    </style>
+</head>
+<body class="text-gray-800">
+    <!-- Hero Section -->
+    <section class="bg-gradient-to-br from-purple-600 to-blue-500 text-white py-20 px-6 text-center">
+        <h1 class="text-5xl font-bold mb-4">HackDay Lumbini 2026</h1>
+        <p class="text-2xl mb-2">Innovate. Build. Collaborate.</p>
+        <p class="text-lg mb-4">January 17, 2026 | Lumbini World School, Rupandehi District</p>
+        <button class="bg-white text-purple-600 font-semibold px-8 py-3 rounded-lg hover:bg-gray-100 transition">
+            Register Now
+        </button>
+    </section>
+
+    <!-- About Section -->
+    <section class="py-16 px-6 max-w-4xl mx-auto">
+        <h2 class="text-3xl font-bold mb-4">About HackDay Lumbini 2026</h2>
+        <p class="mb-4">
+            HackDay Lumbini 2026 is a one-day event where students and young developers
+            come together to build projects in a focused and friendly environment. Learn, create, and collaborate!
+        </p>
+        <h3 class="text-xl font-semibold mb-2">Participation Requirements</h3>
+        <ul class="list-disc list-inside">
+            <li>Must be a student or young developer</li>
+            <li>Bring your laptop and enthusiasm</li>
+            <li>Form teams of 2-4 people (or join on-site)</li>
+            <li>Follow MLH Code of Conduct</li>
+            <li>Be ready to learn and collaborate</li>
+        </ul>
+    </section>
+
+    <!-- Schedule Section -->
+    <section class="py-16 px-6 max-w-4xl mx-auto bg-gray-50">
+        <h2 class="text-3xl font-bold mb-6">Schedule</h2>
+        <ul class="border-l-2 border-purple-500 ml-4">
+            <li class="mb-4 pl-4 relative">
+                <span class="absolute -left-3 top-0 w-6 h-6 bg-purple-500 rounded-full"></span>
+                <p class="font-semibold">9:00 AM</p>
+                <p>Check-in & Welcome</p>
+            </li>
+            <li class="mb-4 pl-4 relative">
+                <span class="absolute -left-3 top-0 w-6 h-6 bg-purple-500 rounded-full"></span>
+                <p class="font-semibold">10:00 AM</p>
+                <p>Team Formation & Kickoff</p>
+            </li>
+            <li class="mb-4 pl-4 relative">
+                <span class="absolute -left-3 top-0 w-6 h-6 bg-purple-500 rounded-full"></span>
+                <p class="font-semibold">12:30 PM</p>
+                <p>Lunch Break</p>
+            </li>
+            <li class="mb-4 pl-4 relative">
+                <span class="absolute -left-3 top-0 w-6 h-6 bg-purple-500 rounded-full"></span>
+                <p class="font-semibold">1:30 PM</p>
+                <p>Coding Session</p>
+            </li>
+            <li class="mb-4 pl-4 relative">
+                <span class="absolute -left-3 top-0 w-6 h-6 bg-purple-500 rounded-full"></span>
+                <p class="font-semibold">4:30 PM</p>
+                <p>Project Submission</p>
+            </li>
+            <li class="mb-4 pl-4 relative">
+                <span class="absolute -left-3 top-0 w-6 h-6 bg-purple-500 rounded-full"></span>
+                <p class="font-semibold">5:00 PM</p>
+                <p>Presentations & Judging</p>
+            </li>
+            <li class="mb-4 pl-4 relative">
+                <span class="absolute -left-3 top-0 w-6 h-6 bg-purple-500 rounded-full"></span>
+                <p class="font-semibold">6:00 PM</p>
+                <p>Awards & Closing</p>
+            </li>
+        </ul>
+    </section>
+
+    <!-- Sponsors Section -->
+    <section class="py-16 px-6 max-w-6xl mx-auto">
+        <h2 class="text-3xl font-bold mb-6 text-center">Sponsors</h2>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 items-center justify-center">
+            <div class="p-4 border rounded text-center font-semibold bg-gray-50 hover:bg-purple-50 transition">MLH</div>
+            <div class="p-4 border rounded text-center font-semibold bg-gray-50 hover:bg-purple-50 transition">Google Gemini HackDays</div>
+            <div class="p-4 border rounded text-center font-semibold bg-gray-50 hover:bg-purple-50 transition">Lumbini World School</div>
+            <div class="p-4 border rounded text-center font-semibold bg-gray-50 hover:bg-purple-50 transition">GitHub</div>
+            <div class="p-4 border rounded text-center font-semibold bg-gray-50 hover:bg-purple-50 transition">Devpost</div>
+            <div class="p-4 border rounded text-center font-semibold bg-gray-50 hover:bg-purple-50 transition">Tech Community Nepal</div>
+        </div>
+    </section>
+
+    <!-- Prizes Section -->
+    <section class="py-16 px-6 max-w-6xl mx-auto bg-gray-50">
+        <h2 class="text-3xl font-bold mb-6 text-center">Prizes</h2>
+        <div class="grid md:grid-cols-3 gap-6">
+            <div class="p-6 border rounded shadow hover:shadow-lg transition bg-white">
+                <h3 class="text-xl font-semibold">🥇 First Place</h3>
+                <p class="font-bold">NPR 25,000</p>
+                <p class="mt-2">MLH Swag Pack + Certificates</p>
+                <p class="mt-2 text-gray-600">1 winner(s)</p>
+            </div>
+            <div class="p-6 border rounded shadow hover:shadow-lg transition bg-white">
+                <h3 class="text-xl font-semibold">🥈 Second Place</h3>
+                <p class="font-bold">NPR 15,000</p>
+                <p class="mt-2">GitHub Pro + Certificates</p>
+                <p class="mt-2 text-gray-600">1 winner(s)</p>
+            </div>
+            <div class="p-6 border rounded shadow hover:shadow-lg transition bg-white">
+                <h3 class="text-xl font-semibold">🥉 Third Place</h3>
+                <p class="font-bold">NPR 10,000</p>
+                <p class="mt-2">Swag Pack + Certificates</p>
+                <p class="mt-2 text-gray-600">1 winner(s)</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Team Gallery Section -->
+    <section class="py-16 px-6 max-w-6xl mx-auto">
+        <h2 class="text-3xl font-bold mb-6 text-center">Team Projects & Winners</h2>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="border rounded-lg p-6 shadow hover:shadow-xl transition">
+                <h3 class="text-xl font-bold mb-2">Smart Campus App</h3>
+                <p class="text-purple-600 font-semibold mb-2">Team Alpha</p>
+                <p class="text-gray-600 mb-4 text-sm">An AI-powered campus management system</p>
+                <div class="mb-4">
+                    <p class="text-sm font-semibold mb-1">Team Members:</p>
+                    <p class="text-sm text-gray-600">John Doe, Jane Smith, Alex Johnson</p>
+                </div>
+                <div class="flex gap-3">
+                    <a href="#" class="flex-1 text-center bg-gray-800 text-white py-2 rounded hover:bg-gray-700 transition text-sm font-semibold">GitHub</a>
+                    <a href="#" class="flex-1 text-center bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition text-sm font-semibold">Devpost</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-8 px-6 text-center">
+        <p>&copy; 2026 HackDay Butwal. All rights reserved.</p>
+        <div class="flex justify-center gap-4 mt-2">
+            <a href="#" class="hover:underline">Twitter</a>
+            <a href="#" class="hover:underline">Discord</a>
+            <a href="#" class="hover:underline">Facebook</a>
+            <a href="#" class="hover:underline">LinkedIn</a>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/public/svg/google-gemini.svg b/public/svg/google-gemini.svg
diff --git a/public/svg/mlh.svg b/public/svg/mlh.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
 import CodeOfConductPage from "./pages/CodeOfConduct";
+import HackathonPage from "./pages/HackathonPage";
 
 const queryClient = new QueryClient();
 
@@ -18,6 +19,7 @@ const App = () => (
         <Routes>
           <Route path="/" element={<Index />} />
           <Route path="/cod" element={<CodeOfConductPage />} />
+          <Route path="/hackathon" element={<HackathonPage />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

diff --git a/src/App_Demo.tsx b/src/App_Demo.tsx
@@ -0,0 +1,8 @@
+import HackathonPage from './pages/HackathonPage'
+import './index.css'
+
+function App() {
+  return <HackathonPage />
+}
+
+export default App
diff --git a/src/assets/svg/google-gemini.svg b/src/assets/svg/google-gemini.svg
diff --git a/src/assets/svg/mlh.svg b/src/assets/svg/mlh.svg
diff --git a/src/components/AboutData.tsx b/src/components/AboutData.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { hackathonInfo, participationRequirements } from "../data/sampleData";
+
+const AboutData: React.FC = () => {
+  return (
+    <section className="py-16 px-6 max-w-4xl mx-auto">
+      <h2 className="text-3xl font-bold mb-4">About {hackathonInfo.name}</h2>
+      <p className="mb-4">
+        {hackathonInfo.name} is a one-day event where students and young developers
+        come together to build projects in a focused and friendly environment. Learn, create, and collaborate!
+      </p>
+      <h3 className="text-xl font-semibold mb-2">Participation Requirements</h3>
+      <ul className="list-disc list-inside">
+        {participationRequirements.map((req) => (
+          <li key={req}>{req}</li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default AboutData;
diff --git a/src/components/FAQData.tsx b/src/components/FAQData.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { faq } from "../data/sampleData";
+
+const FAQData: React.FC = () => {
+  return (
+    <section className="py-16 px-6 max-w-4xl mx-auto">
+      <h2 className="text-3xl font-bold mb-6 text-center">FAQ</h2>
+      <div className="space-y-4">
+        {faq.map(({ question, answer }) => (
+          <details key={question} className="border rounded p-4 bg-gray-50">
+            <summary className="font-semibold cursor-pointer">{question}</summary>
+            <p className="mt-2">{answer}</p>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default FAQData;
diff --git a/src/components/FooterData.tsx b/src/components/FooterData.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { socialLinks } from "../data/sampleData";
+
+const FooterData: React.FC = () => {
+  return (
+    <footer className="bg-gray-900 text-white py-8 px-6 text-center">
+      <p>&copy; 2026 HackDay Butwal. All rights reserved.</p>
+      <div className="flex justify-center gap-4 mt-2">
+        <a href={socialLinks.twitter} className="hover:underline">Twitter</a>
+        <a href={socialLinks.discord} className="hover:underline">Discord</a>
+        <a href={socialLinks.facebook} className="hover:underline">Facebook</a>
+        <a href={socialLinks.linkedin} className="hover:underline">LinkedIn</a>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterData;
diff --git a/src/components/HeroData.tsx b/src/components/HeroData.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { hackathonInfo } from "../data/sampleData";
+
+const HeroData: React.FC = () => {
+  return (
+    <section className="bg-gradient-to-br from-purple-600 to-blue-500 text-white py-20 px-6 text-center">
+      <h1 className="text-5xl font-bold mb-4">{hackathonInfo.name}</h1>
+      <p className="text-2xl mb-2">{hackathonInfo.tagline}</p>
+      <p className="text-lg mb-4">{hackathonInfo.date} | {hackathonInfo.location}</p>
+      <button className="bg-white text-purple-600 font-semibold px-8 py-3 rounded-lg hover:bg-gray-100 transition">
+        Register Now
+      </button>
+    </section>
+  );
+};
+
+export default HeroData;
diff --git a/src/components/JudgesData.tsx b/src/components/JudgesData.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { judges } from "../data/sampleData";
+
+const JudgesData: React.FC = () => {
+  return (
+    <section className="py-16 px-6 max-w-6xl mx-auto">
+      <h2 className="text-3xl font-bold mb-6 text-center">Judges</h2>
+      <div className="grid md:grid-cols-3 gap-6">
+        {judges.map((judge) => (
+          <div key={judge.name} className="p-6 border rounded text-center">
+            <p className="font-bold">{judge.name}</p>
+            <p className="text-gray-600">{judge.organization}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default JudgesData;