Skip to content

Commit f3814c9

Browse files
nishtha-agarwal-211nishtha-agarwal-211
committed
fix: address maintainer feedback on hero section
- Remove duplicate tabs-section below hero (was redundant) - Remove 'Explore Projects' button entirely - Add 'All Projects' badge to left of Games in hero - Convert hero feature-badges into functional tab buttons (retain .tab class, data-category, ARIA roles for JS compat) - Move Random Project button into hero section, centered - Add .feature-badge.active CSS for selected state - Compact badge sizing so all 5 fit on one row - Change btn-random-project to inline-flex for centering No JS changes needed — all existing functionality preserved.
1 parent cde2e0f commit f3814c9

2 files changed

Lines changed: 49 additions & 41 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ body {
119119
/* Hero Section */
120120
.hero-section {
121121
position: relative;
122-
padding: 8rem 0;
122+
padding: 5rem 0;
123123
text-align: center;
124124
overflow: hidden;
125125
background: var(--bg-color);
@@ -166,7 +166,7 @@ body {
166166
.hero-content {
167167
position: relative;
168168
z-index: 1;
169-
max-width: 800px;
169+
max-width: 900px;
170170
margin: 0 auto;
171171
}
172172

@@ -192,23 +192,40 @@ body {
192192

193193
.hero-features {
194194
display: flex;
195-
gap: 1.5rem;
195+
gap: 1rem;
196196
justify-content: center;
197197
flex-wrap: wrap;
198-
margin-bottom: 3rem;
198+
margin-bottom: 2rem;
199199
animation: fadeInUp 0.7s ease 0.4s both;
200200
}
201201

202+
.hero-content .btn-random-project {
203+
animation: fadeInUp 0.7s ease 0.6s both;
204+
}
205+
202206
.feature-badge {
203207
display: flex;
204208
align-items: center;
205-
gap: 0.75rem;
209+
gap: 0.5rem;
206210
background: var(--surface-color);
207-
padding: 0.75rem 1.5rem;
211+
padding: 0.65rem 1.25rem;
208212
border-radius: 50px;
209213
border: 2px solid var(--primary-color);
210214
transition: var(--transition);
211-
cursor: default;
215+
cursor: pointer;
216+
font-size: inherit;
217+
font-family: inherit;
218+
color: inherit;
219+
}
220+
221+
.feature-badge.active {
222+
background: var(--primary-color);
223+
border-color: var(--primary-color);
224+
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
225+
}
226+
227+
.feature-badge.active .feature-label {
228+
color: white;
212229
}
213230

214231
.feature-badge:hover {
@@ -218,7 +235,7 @@ body {
218235
}
219236

220237
.feature-icon {
221-
font-size: 1.5rem;
238+
font-size: 1.25rem;
222239
display: inline-block;
223240
}
224241

@@ -860,7 +877,7 @@ body {
860877
font-size: 1rem;
861878
font-weight: 600;
862879
transition: var(--transition);
863-
display: flex;
880+
display: inline-flex;
864881
align-items: center;
865882
gap: 0.5rem;
866883
white-space: nowrap;

‎web-app/index.html‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -533,51 +533,42 @@ <h1>
533533
<h2 class="hero-title">Learn Python the Fun Way!</h2>
534534
<p class="hero-subtitle">25+ Mini Projects • Beautiful UI • Beginner Friendly • Zero Dependencies</p>
535535

536-
<div class="hero-features">
537-
<div class="feature-badge">
536+
<div class="hero-features" role="tablist" aria-label="Project categories">
537+
<button class="feature-badge tab active" data-category="all"
538+
role="tab" aria-selected="true" tabindex="0">
539+
<span class="feature-icon">🌟</span>
540+
<span class="feature-label">All Projects</span>
541+
</button>
542+
<button class="feature-badge tab" data-category="games"
543+
role="tab" aria-selected="false" tabindex="-1">
538544
<span class="feature-icon">🎮</span>
539545
<span class="feature-label">Games</span>
540-
</div>
541-
<div class="feature-badge">
546+
</button>
547+
<button class="feature-badge tab" data-category="math"
548+
role="tab" aria-selected="false" tabindex="-1">
542549
<span class="feature-icon">🔢</span>
543550
<span class="feature-label">Math</span>
544-
</div>
545-
<div class="feature-badge">
551+
</button>
552+
<button class="feature-badge tab" data-category="utilities"
553+
role="tab" aria-selected="false" tabindex="-1">
546554
<span class="feature-icon">🔐</span>
547555
<span class="feature-label">Utilities</span>
548-
</div>
549-
</div>
550-
551-
<button class="btn-explore" id="exploreBtn" aria-label="Explore all projects">
552-
Explore Projects →
553-
</button>
554-
</div>
555-
</div>
556-
</section>
557-
558-
<!-- Search & Category Tabs -->
559-
<section class="tabs-section" aria-label="Search and Project categories">
560-
<div class="container">
561-
<div class="tabs-wrapper">
562-
<div class="tabs" role="tablist" aria-label="Project categories">
563-
<button class="tab active" data-category="all" role="tab" aria-selected="true" tabindex="0">🌟
564-
All Projects</button>
565-
<button class="tab" data-category="games" role="tab" aria-selected="false" tabindex="-1">🎮
566-
Games</button>
567-
<button class="tab" data-category="math" role="tab" aria-selected="false" tabindex="-1">🔢
568-
Math</button>
569-
<button class="tab" data-category="utilities" role="tab" aria-selected="false" tabindex="-1">🔐
570-
Utilities</button>
556+
</button>
571557
<!--
572558
PLAYGROUND TAB
573559
data-category="playground" is detected by main.js
574560
and delegates to window.playgroundAPI instead of
575561
running applyCategoryFilter().
576562
-->
577-
<button class="tab" data-category="playground" id="playgroundTab" role="tab"
578-
aria-selected="false" tabindex="-1">🐍 Playground</button>
563+
<button class="feature-badge tab" data-category="playground" id="playgroundTab"
564+
role="tab" aria-selected="false" tabindex="-1">
565+
<span class="feature-icon">🐍</span>
566+
<span class="feature-label">Playground</span>
567+
</button>
579568
</div>
580-
<button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">
569+
570+
<button class="btn-random-project" id="randomProjectBtn"
571+
title="Discover a random project!">
581572
<i class="fas fa-dice"></i> Random Project 🎲
582573
</button>
583574
</div>

0 commit comments

Comments
 (0)