Merge pull request #241 from nishtha-agarwal-211/fix/homepage-layout-alignment-238

Fix: Correct Homepage Layout Structure and Remove Duplicate Filters

Author: steam-bell-92

web-app/css/styles.css

@@ -119,7 +119,7 @@ body {
 /* Hero Section */
 .hero-section {
     position: relative;
-    padding: 8rem 0;
+    padding: 5rem 0;
     text-align: center;
     overflow: hidden;
     background: var(--bg-color);
@@ -166,7 +166,7 @@ body {
 .hero-content {
     position: relative;
     z-index: 1;
-    max-width: 800px;
+    max-width: 900px;
     margin: 0 auto;
 }
 
@@ -192,23 +192,40 @@ body {
 
 .hero-features {
     display: flex;
-    gap: 1.5rem;
+    gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     animation: fadeInUp 0.7s ease 0.4s both;
 }
 
+.hero-content .btn-random-project {
+    animation: fadeInUp 0.7s ease 0.6s both;
+}
+
 .feature-badge {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
     background: var(--surface-color);
-    padding: 0.75rem 1.5rem;
+    padding: 0.65rem 1.25rem;
     border-radius: 50px;
     border: 2px solid var(--primary-color);
     transition: var(--transition);
-    cursor: default;
+    cursor: pointer;
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+}
+
+.feature-badge.active {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
+}
+
+.feature-badge.active .feature-label {
+    color: white;
 }
 
 .feature-badge:hover {
@@ -218,7 +235,7 @@ body {
 }
 
 .feature-icon {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     display: inline-block;
 }
 
@@ -860,7 +877,7 @@ body {
     font-size: 1rem;
     font-weight: 600;
     transition: var(--transition);
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     white-space: nowrap;

web-app/index.html

@@ -525,67 +525,50 @@ <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>
+                    <p class="hero-subtitle">25+ Mini Projects • Beautiful UI • Beginner Friendly • Zero Dependencies</p>
 
-                    <div class="hero-features">
-                        <div class="feature-badge" role="button" tabindex="0"
-                            onclick="document.querySelector('.tab[data-category=games]').click(); document.querySelector('.projects-section').scrollIntoView({behavior: 'smooth', block: 'start'});"
-                            style="cursor: pointer;">
+                    <div class="hero-features" role="tablist" aria-label="Project categories">
+                        <button class="feature-badge tab active" data-category="all"
+                                role="tab" aria-selected="true" tabindex="0">
+                            <span class="feature-icon">🌟</span>
+                            <span class="feature-label">All Projects</span>
+                        </button>
+                        <button class="feature-badge tab" data-category="games"
+                                role="tab" aria-selected="false" tabindex="-1">
                             <span class="feature-icon">🎮</span>
                             <span class="feature-label">Games</span>
-                        </div>
-                        <div class="feature-badge" role="button" tabindex="0"
-                            onclick="document.querySelector('.tab[data-category=math]').click(); document.querySelector('.projects-section').scrollIntoView({behavior: 'smooth', block: 'start'});"
-                            style="cursor: pointer;">
+                        </button>
+                        <button class="feature-badge tab" data-category="math"
+                                role="tab" aria-selected="false" tabindex="-1">
                             <span class="feature-icon">🔢</span>
                             <span class="feature-label">Math</span>
-                        </div>
-                        <div class="feature-badge" role="button" tabindex="0"
-                            onclick="document.querySelector('.tab[data-category=utilities]').click(); document.querySelector('.projects-section').scrollIntoView({behavior: 'smooth', block: 'start'});"
-                            style="cursor: pointer;">
+                        </button>
+                        <button class="feature-badge tab" data-category="utilities"
+                                role="tab" aria-selected="false" tabindex="-1">
                             <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" role="tablist" aria-label="Project categories">
-                        <button class="tab active" data-category="all" role="tab" aria-selected="true" tabindex="0">🌟
-                            All Projects</button>
-                        <button class="tab" data-category="games" role="tab" aria-selected="false" tabindex="-1">🎮
-                            Games</button>
-                        <button class="tab" data-category="math" role="tab" aria-selected="false" tabindex="-1">🔢
-                            Math</button>
-                        <button class="tab" data-category="utilities" role="tab" aria-selected="false" tabindex="-1">🔐
-                            Utilities</button>
+                        </button>
                         <!--
                             PLAYGROUND TAB
                             data-category="playground" is detected by main.js
                             and delegates to window.playgroundAPI instead of
                             running applyCategoryFilter().
                         -->
-                        <button class="tab" data-category="playground" id="playgroundTab" role="tab"
-                            aria-selected="false" tabindex="-1">🐍 Playground</button>
+                        <button class="feature-badge tab" data-category="playground" id="playgroundTab"
+                                role="tab" aria-selected="false" tabindex="-1">
+                            <span class="feature-icon">🐍</span>
+                            <span class="feature-label">Playground</span>
+                        </button>
                     </div>
-                    <button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">
+
+                    <button class="btn-random-project" id="randomProjectBtn"
+                            title="Discover a random project!">
                         <i class="fas fa-dice"></i> Random Project 🎲
                     </button>
                 </div>