Skip to content

Commit dde5125

Browse files
PIYUSH-NEXTGENPIYUSH-NEXTGEN
committed
add FAQ section on the landing page
1 parent c337e06 commit dde5125

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(210px, 1fr));

‎web-app/index.html‎

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

1031+
<section class="faq-section" id="faqSection" aria-label="Frequently asked questions">
1032+
<div class="container">
1033+
<div class="section-header">
1034+
<p class="section-kicker">Need a hand?</p>
1035+
<h2 class="section-title">Frequently Asked Questions</h2>
1036+
<p class="section-subtitle">Explore common questions about the lab, project launch flow, and how to use the integrated playground.</p>
1037+
</div>
1038+
<div class="faq-grid">
1039+
<article class="faq-card">
1040+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-1" id="faq-button-1">
1041+
<span class="faq-label"><i class="fas fa-book-open" aria-hidden="true"></i> What is Python Mini Projects?</span>
1042+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1043+
</button>
1044+
<div id="faq-panel-1" class="faq-panel" role="region" aria-labelledby="faq-button-1">
1045+
<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>
1046+
<p>Perfect for students, beginners, and anyone who wants to build fun projects while learning Python.</p>
1047+
</div>
1048+
</article>
1049+
<article class="faq-card">
1050+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-2" id="faq-button-2">
1051+
<span class="faq-label"><i class="fas fa-hands-helping" aria-hidden="true"></i> Who can contribute to this project?</span>
1052+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1053+
</button>
1054+
<div id="faq-panel-2" class="faq-panel" role="region" aria-labelledby="faq-button-2">
1055+
<p>Currently, contributions are open only to officially approved GSSoC participants.</p>
1056+
</div>
1057+
</article>
1058+
<article class="faq-card">
1059+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-3" id="faq-button-3">
1060+
<span class="faq-label"><i class="fas fa-code-branch" aria-hidden="true"></i> How can I contribute?</span>
1061+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1062+
</button>
1063+
<div id="faq-panel-3" class="faq-panel" role="region" aria-labelledby="faq-button-3">
1064+
<p>You can:</p>
1065+
<ul>
1066+
<li>work on existing issues</li>
1067+
<li>create a new issue (after checking for duplicates)</li>
1068+
<li>comment under the issue to get assigned</li>
1069+
</ul>
1070+
<p>A project admin will review and assign the issue.</p>
1071+
</div>
1072+
</article>
1073+
<article class="faq-card">
1074+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-4" id="faq-button-4">
1075+
<span class="faq-label"><i class="fas fa-list-check" aria-hidden="true"></i> What are the project requirements?</span>
1076+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1077+
</button>
1078+
<div id="faq-panel-4" class="faq-panel" role="region" aria-labelledby="faq-button-4">
1079+
<ul>
1080+
<li>Python 3.10+</li>
1081+
<li>Standard library only (no external dependencies)</li>
1082+
<li>Zero setup required</li>
1083+
<li>Cross-platform support (Windows, macOS, Linux)</li>
1084+
</ul>
1085+
</div>
1086+
</article>
1087+
<article class="faq-card">
1088+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-5" id="faq-button-5">
1089+
<span class="faq-label"><i class="fas fa-user-graduate" aria-hidden="true"></i> Can I contribute without prior open-source experience?</span>
1090+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1091+
</button>
1092+
<div id="faq-panel-5" class="faq-panel" role="region" aria-labelledby="faq-button-5">
1093+
<p>Yes. This project is beginner-friendly and a great place to start contributing to open source.</p>
1094+
</div>
1095+
</article>
1096+
<article class="faq-card">
1097+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-6" id="faq-button-6">
1098+
<span class="faq-label"><i class="fas fa-ban" aria-hidden="true"></i> Are external Python libraries allowed?</span>
1099+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1100+
</button>
1101+
<div id="faq-panel-6" class="faq-panel" role="region" aria-labelledby="faq-button-6">
1102+
<p>No. Only Python standard libraries are allowed in this project.</p>
1103+
</div>
1104+
</article>
1105+
<article class="faq-card">
1106+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-7" id="faq-button-7">
1107+
<span class="faq-label"><i class="fas fa-check-circle" aria-hidden="true"></i> What happens after my PR is submitted?</span>
1108+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1109+
</button>
1110+
<div id="faq-panel-7" class="faq-panel" role="region" aria-labelledby="faq-button-7">
1111+
<p>After your PR is reviewed and merged, your contribution points will be updated on your GSSoC profile within approximately 20–24 hours.</p>
1112+
</div>
1113+
</article>
1114+
<article class="faq-card">
1115+
<button class="faq-trigger" aria-expanded="false" aria-controls="faq-panel-8" id="faq-button-8">
1116+
<span class="faq-label"><i class="fas fa-terminal" aria-hidden="true"></i> How do I run a project locally?</span>
1117+
<span class="faq-icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
1118+
</button>
1119+
<div id="faq-panel-8" class="faq-panel" role="region" aria-labelledby="faq-button-8">
1120+
<p>Clone the repository:</p>
1121+
<pre><code>git clone https://github.com/YOUR_USERNAME/python-mini-project.git</code></pre>
1122+
<p>Then:</p>
1123+
<pre><code>cd web-app
1124+
python -m http.server 5500</code></pre>
1125+
<p>Open the local link in your browser.</p>
1126+
<p>For live-server do this:</p>
1127+
<p>If Node.js installed:</p>
1128+
<pre><code>npm install -g live-server</code></pre>
1129+
<p>Then:</p>
1130+
<pre><code>cd web-app
1131+
live-server</code></pre>
1132+
</div>
1133+
</article>
1134+
</div>
1135+
</div>
1136+
</section>
1137+
10311138
<section class="playground-section" id="playgroundSection" aria-label="Python Playground">
10321139
<div class="container">
10331140
<div class="playground-header">
@@ -1106,8 +1213,7 @@ <h3>Resources</h3>
11061213
<ul>
11071214
<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>
11081215
<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>
1109-
<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>
1110-
<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>
1216+
<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>
11111217
</ul>
11121218
</div>
11131219
<div class="footer-newsletter">
@@ -1220,6 +1326,50 @@ <h3>Stay Updated</h3>
12201326
searchInput.value = '';
12211327
});
12221328
});
1329+
1330+
(function() {
1331+
function closeAllFaqItems() {
1332+
document.querySelectorAll('.faq-trigger').forEach(function(button) {
1333+
button.setAttribute('aria-expanded', 'false');
1334+
button.closest('.faq-card')?.classList.remove('open');
1335+
});
1336+
}
1337+
1338+
function toggleFaqItem(button) {
1339+
var isExpanded = button.getAttribute('aria-expanded') === 'true';
1340+
closeAllFaqItems();
1341+
if (!isExpanded) {
1342+
button.setAttribute('aria-expanded', 'true');
1343+
button.closest('.faq-card')?.classList.add('open');
1344+
}
1345+
}
1346+
1347+
document.querySelectorAll('.faq-trigger').forEach(function(button) {
1348+
button.addEventListener('click', function() {
1349+
toggleFaqItem(button);
1350+
});
1351+
button.addEventListener('keydown', function(event) {
1352+
if (event.key === 'Enter' || event.key === ' ') {
1353+
event.preventDefault();
1354+
toggleFaqItem(button);
1355+
}
1356+
});
1357+
});
1358+
1359+
document.querySelectorAll('a[href="#faqSection"]').forEach(function(anchor) {
1360+
anchor.addEventListener('click', function(event) {
1361+
event.preventDefault();
1362+
var target = document.getElementById('faqSection');
1363+
if (target) {
1364+
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
1365+
var firstTrigger = target.querySelector('.faq-trigger');
1366+
if (firstTrigger) {
1367+
firstTrigger.focus({ preventScroll: true });
1368+
}
1369+
}
1370+
});
1371+
});
1372+
})();
12231373
</script>
12241374

12251375
</body>

0 commit comments

Comments
 (0)