Skip to content

Commit 80450af

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request steam-bell-92#485 from PIYUSH-NEXTGEN/fix-faq-section
add FAQ section on the landing page
2 parents 95a5345 + dde5125 commit 80450af

2 files changed

Lines changed: 325 additions & 2 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1417,6 +1417,179 @@ body {
14171417
═══════════════════════════════════════ */
14181418
.projects-section { padding: 4rem 0; }
14191419

1420+
.faq-section {
1421+
padding: 4rem 0;
1422+
}
1423+
1424+
.section-header {
1425+
max-width: 820px;
1426+
margin: 0 auto;
1427+
text-align: center;
1428+
}
1429+
1430+
.section-kicker {
1431+
color: var(--accent-color);
1432+
font-size: 0.9rem;
1433+
letter-spacing: 0.17em;
1434+
text-transform: uppercase;
1435+
margin-bottom: 0.8rem;
1436+
}
1437+
1438+
.section-title {
1439+
font-size: clamp(2rem, 2.5vw, 2.8rem);
1440+
color: var(--text-color);
1441+
margin-bottom: 0.8rem;
1442+
line-height: 1.05;
1443+
}
1444+
1445+
.section-subtitle {
1446+
color: var(--text-secondary);
1447+
max-width: 640px;
1448+
margin: 0 auto;
1449+
font-size: 1rem;
1450+
line-height: 1.75;
1451+
}
1452+
1453+
.faq-grid {
1454+
display: grid;
1455+
grid-template-columns: repeat(2, minmax(0, 1fr));
1456+
gap: 1rem;
1457+
margin-top: 2rem;
1458+
align-items: start;
1459+
}
1460+
1461+
.faq-card {
1462+
display: flex;
1463+
flex-direction: column;
1464+
justify-content: flex-start;
1465+
background: var(--surface-color);
1466+
border: 1px solid var(--border-color);
1467+
border-radius: 1.5rem;
1468+
overflow: hidden;
1469+
box-shadow: var(--shadow);
1470+
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
1471+
}
1472+
1473+
.faq-card:hover {
1474+
transform: translateY(-3px);
1475+
border-color: var(--accent-border);
1476+
}
1477+
1478+
.faq-trigger {
1479+
width: 100%;
1480+
display: flex;
1481+
align-items: center;
1482+
justify-content: space-between;
1483+
gap: 1rem;
1484+
padding: 1.25rem 1.5rem;
1485+
background: transparent;
1486+
border: none;
1487+
color: var(--text-color);
1488+
text-align: left;
1489+
font-size: 1rem;
1490+
cursor: pointer;
1491+
transition: background 0.2s ease, color 0.2s ease;
1492+
}
1493+
1494+
.faq-trigger:hover,
1495+
.faq-trigger:focus-visible {
1496+
background: rgba(99, 102, 241, 0.08);
1497+
outline: none;
1498+
}
1499+
1500+
.faq-trigger:focus-visible {
1501+
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
1502+
}
1503+
1504+
.faq-label {
1505+
display: inline-flex;
1506+
align-items: center;
1507+
gap: 0.85rem;
1508+
}
1509+
1510+
.faq-label i {
1511+
color: var(--primary-color);
1512+
min-width: 1.25rem;
1513+
font-size: 1.05rem;
1514+
}
1515+
1516+
.faq-icon {
1517+
display: inline-flex;
1518+
align-items: center;
1519+
justify-content: center;
1520+
transition: transform 0.25s ease;
1521+
}
1522+
1523+
.faq-card.open .faq-icon {
1524+
transform: rotate(180deg);
1525+
}
1526+
1527+
.faq-panel {
1528+
max-height: 0;
1529+
overflow: hidden;
1530+
padding: 0 1.5rem;
1531+
transition: max-height 0.32s ease, padding 0.32s ease;
1532+
}
1533+
1534+
.faq-card.open .faq-panel {
1535+
max-height: 1000px;
1536+
padding-bottom: 1.25rem;
1537+
}
1538+
1539+
.faq-panel p {
1540+
margin: 0;
1541+
color: var(--text-secondary);
1542+
line-height: 1.8;
1543+
font-size: 0.98rem;
1544+
}
1545+
1546+
.faq-panel ul {
1547+
margin: 0.75rem 0 0 1.1rem;
1548+
color: var(--text-secondary);
1549+
line-height: 1.8;
1550+
}
1551+
1552+
.faq-panel ul li {
1553+
margin-bottom: 0.55rem;
1554+
}
1555+
1556+
.faq-panel pre {
1557+
margin: 0.75rem 0 0;
1558+
padding: 1rem;
1559+
background: rgba(99, 102, 241, 0.08);
1560+
border: 1px solid var(--border-color);
1561+
border-radius: 0.85rem;
1562+
overflow-x: auto;
1563+
color: var(--text-color);
1564+
font-family: 'Courier New', monospace;
1565+
font-size: 0.92rem;
1566+
line-height: 1.6;
1567+
}
1568+
1569+
.faq-panel code {
1570+
white-space: pre-wrap;
1571+
}
1572+
1573+
@media (max-width: 860px) {
1574+
.faq-grid {
1575+
grid-template-columns: 1fr;
1576+
}
1577+
}
1578+
1579+
@media (max-width: 640px) {
1580+
.faq-section {
1581+
padding: 3rem 0;
1582+
}
1583+
1584+
.faq-trigger {
1585+
padding: 1rem 1.25rem;
1586+
}
1587+
1588+
.faq-panel {
1589+
padding: 0 1.25rem;
1590+
}
1591+
}
1592+
14201593
.projects-grid {
14211594
display: grid;
14221595
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

‎web-app/index.html‎

Lines changed: 152 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1041,6 +1041,113 @@ <h3>Word Scramble</h3><p>Unscramble words before attempts run out!</p><button cl
10411041
</div>
10421042
</section>
10431043

1044+
<section class="faq-section" id="faqSection" aria-label="Frequently asked questions">
1045+
<div class="container">
1046+
<div class="section-header">
1047+
<p class="section-kicker">Need a hand?</p>
1048+
<h2 class="section-title">Frequently Asked Questions</h2>
1049+
<p class="section-subtitle">Explore common questions about the lab, project launch flow, and how to use the integrated playground.</p>
1050+
</div>
1051+
<div class="faq-grid">
1052+
<article class="faq-card">
1053+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-1" id="faq-button-1">
1054+
<span class="faq-label"><i class="fas fa-book-open" aria-hidden="true"></i> What is Python Mini Projects?</span>
1055+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1056+
</button>
1057+
<div id="faq-panel-1" class="faq-panel" role="region" aria-labelledby="faq-button-1">
1058+
<p>Python Mini Projects is a GSSoC-approved open-source project designed to make learning Python fun, practical, and beginner-friendly through interactive mini projects.</p>
1059+
<p>Perfect for students, beginners, and anyone who wants to build fun projects while learning Python.</p>
1060+
</div>
1061+
</article>
1062+
<article class="faq-card">
1063+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-2" id="faq-button-2">
1064+
<span class="faq-label"><i class="fas fa-hands-helping" aria-hidden="true"></i> Who can contribute to this project?</span>
1065+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1066+
</button>
1067+
<div id="faq-panel-2" class="faq-panel" role="region" aria-labelledby="faq-button-2">
1068+
<p>Currently, contributions are open only to officially approved GSSoC participants.</p>
1069+
</div>
1070+
</article>
1071+
<article class="faq-card">
1072+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-3" id="faq-button-3">
1073+
<span class="faq-label"><i class="fas fa-code-branch" aria-hidden="true"></i> How can I contribute?</span>
1074+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1075+
</button>
1076+
<div id="faq-panel-3" class="faq-panel" role="region" aria-labelledby="faq-button-3">
1077+
<p>You can:</p>
1078+
<ul>
1079+
<li>work on existing issues</li>
1080+
<li>create a new issue (after checking for duplicates)</li>
1081+
<li>comment under the issue to get assigned</li>
1082+
</ul>
1083+
<p>A project admin will review and assign the issue.</p>
1084+
</div>
1085+
</article>
1086+
<article class="faq-card">
1087+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-4" id="faq-button-4">
1088+
<span class="faq-label"><i class="fas fa-list-check" aria-hidden="true"></i> What are the project requirements?</span>
1089+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1090+
</button>
1091+
<div id="faq-panel-4" class="faq-panel" role="region" aria-labelledby="faq-button-4">
1092+
<ul>
1093+
<li>Python 3.10+</li>
1094+
<li>Standard library only (no external dependencies)</li>
1095+
<li>Zero setup required</li>
1096+
<li>Cross-platform support (Windows, macOS, Linux)</li>
1097+
</ul>
1098+
</div>
1099+
</article>
1100+
<article class="faq-card">
1101+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-5" id="faq-button-5">
1102+
<span class="faq-label"><i class="fas fa-user-graduate" aria-hidden="true"></i> Can I contribute without prior open-source experience?</span>
1103+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1104+
</button>
1105+
<div id="faq-panel-5" class="faq-panel" role="region" aria-labelledby="faq-button-5">
1106+
<p>Yes. This project is beginner-friendly and a great place to start contributing to open source.</p>
1107+
</div>
1108+
</article>
1109+
<article class="faq-card">
1110+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-6" id="faq-button-6">
1111+
<span class="faq-label"><i class="fas fa-ban" aria-hidden="true"></i> Are external Python libraries allowed?</span>
1112+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1113+
</button>
1114+
<div id="faq-panel-6" class="faq-panel" role="region" aria-labelledby="faq-button-6">
1115+
<p>No. Only Python standard libraries are allowed in this project.</p>
1116+
</div>
1117+
</article>
1118+
<article class="faq-card">
1119+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-7" id="faq-button-7">
1120+
<span class="faq-label"><i class="fas fa-check-circle" aria-hidden="true"></i> What happens after my PR is submitted?</span>
1121+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1122+
</button>
1123+
<div id="faq-panel-7" class="faq-panel" role="region" aria-labelledby="faq-button-7">
1124+
<p>After your PR is reviewed and merged, your contribution points will be updated on your GSSoC profile within approximately 20–24 hours.</p>
1125+
</div>
1126+
</article>
1127+
<article class="faq-card">
1128+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-8" id="faq-button-8">
1129+
<span class="faq-label"><i class="fas fa-terminal" aria-hidden="true"></i> How do I run a project locally?</span>
1130+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1131+
</button>
1132+
<div id="faq-panel-8" class="faq-panel" role="region" aria-labelledby="faq-button-8">
1133+
<p>Clone the repository:</p>
1134+
<pre><code>git clone https://github.com/YOUR_USERNAME/python-mini-project.git</code></pre>
1135+
<p>Then:</p>
1136+
<pre><code>cd web-app
1137+
python -m http.server 5500</code></pre>
1138+
<p>Open the local link in your browser.</p>
1139+
<p>For live-server do this:</p>
1140+
<p>If Node.js installed:</p>
1141+
<pre><code>npm install -g live-server</code></pre>
1142+
<p>Then:</p>
1143+
<pre><code>cd web-app
1144+
live-server</code></pre>
1145+
</div>
1146+
</article>
1147+
</div>
1148+
</div>
1149+
</section>
1150+
10441151
<section class="playground-section" id="playgroundSection" aria-label="Python Playground">
10451152
<div class="container">
10461153
<div class="playground-card" role="region" aria-labelledby="playgroundTitle">
@@ -1132,8 +1239,7 @@ <h3>Resources</h3>
11321239
<ul>
11331240
<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/README.md"><i class="fas fa-book"></i> Documentation</a></li>
11341241
<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/CONTRIBUTING.md"><i class="fas fa-code-branch"></i> Contribute</a></li>
1135-
<li><a href="https://github.com/steam-bell-92/python-mini-project/issues/new"><i class="fas fa-bug"></i> Report a Bug</a></li>
1136-
<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/README.md"><i class="fas fa-question-circle"></i> FAQ</a></li>
1242+
<li><a href="https://github.com/steam-bell-92/python-mini-project/issues/new?template=bug_report.md"><i class="fas fa-bug"></i> Report a Bug</a></li>
11371243
</ul>
11381244
</div>
11391245
<div class="footer-newsletter">
@@ -1246,6 +1352,50 @@ <h3>Stay Updated</h3>
12461352
searchInput.value = '';
12471353
});
12481354
});
1355+
1356+
(function() {
1357+
function closeAllFaqItems() {
1358+
document.querySelectorAll('.faq-trigger').forEach(function(button) {
1359+
button.setAttribute('aria-expanded', 'false');
1360+
button.closest('.faq-card')?.classList.remove('open');
1361+
});
1362+
}
1363+
1364+
function toggleFaqItem(button) {
1365+
var isExpanded = button.getAttribute('aria-expanded') === 'true';
1366+
closeAllFaqItems();
1367+
if (!isExpanded) {
1368+
button.setAttribute('aria-expanded', 'true');
1369+
button.closest('.faq-card')?.classList.add('open');
1370+
}
1371+
}
1372+
1373+
document.querySelectorAll('.faq-trigger').forEach(function(button) {
1374+
button.addEventListener('click', function() {
1375+
toggleFaqItem(button);
1376+
});
1377+
button.addEventListener('keydown', function(event) {
1378+
if (event.key === 'Enter' || event.key === ' ') {
1379+
event.preventDefault();
1380+
toggleFaqItem(button);
1381+
}
1382+
});
1383+
});
1384+
1385+
document.querySelectorAll('a[href="#faqSection"]').forEach(function(anchor) {
1386+
anchor.addEventListener('click', function(event) {
1387+
event.preventDefault();
1388+
var target = document.getElementById('faqSection');
1389+
if (target) {
1390+
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
1391+
var firstTrigger = target.querySelector('.faq-trigger');
1392+
if (firstTrigger) {
1393+
firstTrigger.focus({ preventScroll: true });
1394+
}
1395+
}
1396+
});
1397+
});
1398+
})();
12491399
</script>
12501400

12511401
</body>

0 commit comments

Comments
 (0)