fix: correct homepage layout structure and remove duplicate filters (#238)

- Move hero section before the tabs-section (was incorrectly nested
  inside tabs-wrapper, causing left-shifted layout and empty right space)
- Remove duplicate tabs-section that lacked ARIA roles, accessibility
  attributes, and the Random Project button
- Properly close all opened divs/sections for valid HTML structure

Fixes #238

Author: nishtha-agarwal-211

web-app/index.html

@@ -320,6 +320,36 @@ <h1>🎮 Python Mini Projects</h1>
     </nav>
 
     <main id="main-content" tabindex="-1">
+        <!-- Hero Section -->
+        <section class="hero-section" aria-label="Welcome">
+            <div class="hero-background"></div>
+            <div class="container">
+                <div class="hero-content">
+                    <h2 class="hero-title">Learn Python the Fun Way!</h2>
+                    <p class="hero-subtitle">25+ Mini Projects • Beautiful UI • Beginner Friendly • Zero Dependencies</p>
+
+                    <div class="hero-features">
+                        <div class="feature-badge">
+                            <span class="feature-icon">🎮</span>
+                            <span class="feature-label">Games</span>
+                        </div>
+                        <div class="feature-badge">
+                            <span class="feature-icon">🔢</span>
+                            <span class="feature-label">Math</span>
+                        </div>
+                        <div class="feature-badge">
+                            <span class="feature-icon">🔐</span>
+                            <span class="feature-label">Utilities</span>
+                        </div>
+                    </div>
+
+                    <button class="btn-explore" id="exploreBtn" aria-label="Explore all projects">
+                        Explore Projects →
+                    </button>
+                </div>
+            </div>
+        </section>
+
         <!-- Search & Category Tabs -->
         <section class="tabs-section" aria-label="Search and Project categories">
             <div class="container">
@@ -346,45 +376,6 @@ <h1>🎮 Python Mini Projects</h1>
                             title="Discover a random project!">
                         <i class="fas fa-dice"></i> Random Project 🎲
                     </button>
-    <!-- Hero Section -->
-    <section class="hero-section" aria-label="Welcome">
-        <div class="hero-background"></div>
-        <div class="container">
-            <div class="hero-content">
-                <h2 class="hero-title">Learn Python the Fun Way!</h2>
-                <p class="hero-subtitle">25+ Mini Projects • Beautiful UI • Beginner Friendly • Zero Dependencies</p>
-                
-                <div class="hero-features">
-                    <div class="feature-badge">
-                        <span class="feature-icon">🎮</span>
-                        <span class="feature-label">Games</span>
-                    </div>
-                    <div class="feature-badge">
-                        <span class="feature-icon">🔢</span>
-                        <span class="feature-label">Math</span>
-                    </div>
-                    <div class="feature-badge">
-                        <span class="feature-icon">🔐</span>
-                        <span class="feature-label">Utilities</span>
-                    </div>
-                </div>
-
-                <button class="btn-explore" id="exploreBtn" aria-label="Explore all projects">
-                    Explore Projects →
-                </button>
-            </div>
-        </div>
-    </section>
-
-    <!-- Search & Category Tabs -->
-    <section class="tabs-section" aria-label="Search and Project categories">
-        <div class="container">
-            <div class="tabs-wrapper">
-                <div class="tabs">
-                    <button class="tab active" data-category="all">🌟 All Projects</button>
-                    <button class="tab" data-category="games">🎮 Games</button>
-                    <button class="tab" data-category="math">🔢 Math</button>
-                    <button class="tab" data-category="utilities">🔐 Utilities</button>
                 </div>
             </div>
         </section>