Skip to content

Commit 16678b2

Browse files
kumarshubhhkumarshubhh
committed
✨ Added interactive FAQ section for GSSoC '25
1 parent e2a7af8 commit 16678b2

File tree

4 files changed

+267
-14
lines changed

4 files changed

+267
-14
lines changed

‎app/faqs/page.jsx‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
"use client";
2+
3+
import { useState } from 'react';
4+
import { motion, AnimatePresence } from 'framer-motion';
5+
import { ChevronDown } from 'lucide-react';
6+
7+
8+
const faqs = [
9+
{
10+
question: "When will the registration begin? Where and how to apply?",
11+
answer: "We will soon release the registration details so stay tuned!! Follow GSSoC LinkedIn and Discord for timely updates."
12+
},
13+
{
14+
question: "Can a person participate as both contributor and project admin?",
15+
answer: "Campus Ambassadors can apply for any role. You cannot apply for a contributor if you’re selected for the role of Project Admin or Mentor."
16+
},
17+
{
18+
question: "What are the requirements to qualify for GSSoC?",
19+
answer: "We have some categories and based on that rubric (to be shared with selected candidates), contributors will be provided with perks."
20+
},
21+
{
22+
question: "When will you release the GSSoC date?",
23+
answer: "The timeline will be released soon. Stay tuned to our official platforms."
24+
},
25+
{
26+
question: "How to participate and what is the procedure?",
27+
answer: "Register once the link is live. After selection, choose projects and start contributing under mentor guidance."
28+
},
29+
{
30+
question: "I'm a beginner to open source, can I participate in GSSOC?",
31+
answer: "Absolutely! GSSoC is beginner-friendly and a great way to get started in open source."
32+
},
33+
{
34+
question: "How many projects will be there? Am I selected for contribution?",
35+
answer: "Number of projects will be announced later. Selection depends on form responses and profile."
36+
},
37+
{
38+
question: "Can I propose a Spring Boot API project and also join as participant?",
39+
answer: "Yes! We will soon release registration for Project Admins. Beginners are welcome."
40+
},
41+
{
42+
question: "What is the selection process for GSSoC 2025?",
43+
answer: "Based on your registration form, enthusiasm, past work (if any), and responses."
44+
},
45+
{
46+
question: "Do prior experience or open source contributions matter?",
47+
answer: "Not necessarily. Preferred, but not mandatory. Knowing basic tech like HTML, CSS, Python helps."
48+
},
49+
{
50+
question: "How can I apply as a contributor in GSSoC?",
51+
answer: "Registration details will be shared soon. Apply through the official form."
52+
},
53+
{
54+
question: "I'm a beginner. I need a roadmap.",
55+
answer: "Start by learning GitHub basics, explore HTML/CSS/JS or Python, and join our community."
56+
},
57+
{
58+
question: "Can we participate as both contributor and campus ambassador?",
59+
answer: "Yes. Only constraint is Contributor can't be Project Admin or Mentor."
60+
},
61+
{
62+
question: "Can working professionals in non-tech background participate?",
63+
answer: "Yes, GSSoC is open to all. If you're willing to learn, you can participate."
64+
},
65+
{
66+
question: "How are projects selected and maintained?",
67+
answer: "Project Admins propose and maintain them. Mentors guide contributors."
68+
},
69+
{
70+
question: "What are your expectations from contributors?",
71+
answer: "To be enthusiastic and willing to learn throughout the journey."
72+
},
73+
{
74+
question: "Is this project beginner-friendly?",
75+
answer: "Most projects are. Skills required will be listed per project."
76+
},
77+
{
78+
question: "What tech stack should I know?",
79+
answer: "Depends on the project. Generally HTML, CSS, JS, React, Python, etc."
80+
},
81+
{
82+
question: "What are the eligibility requirements?",
83+
answer: "Full-time students for contributor/campus ambassador roles. Open for all for mentor/admin."
84+
},
85+
{
86+
question: "What does the program timeline look like?",
87+
answer: "Starts with bonding, followed by contributions, evaluations, and final results."
88+
},
89+
{
90+
question: "How does mentorship work?",
91+
answer: "Mentors guide contributors through issues, PRs, and project goals."
92+
},
93+
{
94+
question: "What’s the selection process like?",
95+
answer: "Based on form, enthusiasm, and fit with program goals."
96+
},
97+
{
98+
question: "Are there internship opportunities after the program?",
99+
answer: "Not officially, but contributors may receive LORs, swags, and networking."
100+
},
101+
{
102+
question: "Will there be a community platform?",
103+
answer: "Yes. Discord and Telegram will be used for discussion and support."
104+
},
105+
{
106+
question: "How to become a mentor?",
107+
answer: "Have relevant tech experience. Fill the mentor form when it’s live."
108+
},
109+
{
110+
question: "How much do we need to know to contribute?",
111+
answer: "Basic development knowledge is helpful. Learn and build during GSSoC."
112+
},
113+
{
114+
question: "How to join GSSoC core team?",
115+
answer: "Join other roles first and stay consistent. Core team roles are limited."
116+
},
117+
{
118+
question: "Is GSSoC open for professionals with 1-2 years of experience?",
119+
answer: "Yes. All are welcome."
120+
},
121+
{
122+
question: "Is this same as GSoC?",
123+
answer: "No. GSoC is by Google. GSSoC is by GirlScript Foundation."
124+
},
125+
{
126+
question: "Can anyone contribute?",
127+
answer: "Yes! GSSoC welcomes everyone interested in open source."
128+
},
129+
{
130+
question: "Which organizations will participate?",
131+
answer: "They will be listed on the official site."
132+
},
133+
{
134+
question: "What are the fields for contribution?",
135+
answer: "Web Dev, ML, App Dev, APIs, Documentation, etc."
136+
},
137+
{
138+
question: "What are the perks and benefits for contributors?",
139+
answer: "Top performers will receive certificates, swags, and LORs."
140+
},
141+
{
142+
question: "How to get selected for GSSoC?",
143+
answer: "Fill the form sincerely. Show enthusiasm and basic understanding."
144+
},
145+
{
146+
question: "How to prepare for GSSoC 2025?",
147+
answer: "Learn Git, coding basics, join Discord, and follow past projects."
148+
},
149+
{
150+
question: "Is BCA student eligible?",
151+
answer: "Yes, full-time students are eligible."
152+
},
153+
{
154+
question: "What is the selection criteria?",
155+
answer: "Form responses, enthusiasm, skill interest."
156+
},
157+
{
158+
question: "How to become a core contributor?",
159+
answer: "Be consistent, helpful, and go beyond tasks. Engage post-GSSoC too."
160+
},
161+
{
162+
question: "I’m in 1st year and learning AI/ML. Can I contribute?",
163+
answer: "Yes! Choose a matching project and get started."
164+
}
165+
];
166+
167+
export default function FaqSection() {
168+
const [openIndex, setOpenIndex] = useState(null);
169+
170+
const toggle = (index) => {
171+
setOpenIndex(openIndex === index ? null : index);
172+
};
173+
174+
return (
175+
<section className="bg-[#0a0a23] text-white py-20 px-6" id="faq">
176+
<motion.h2
177+
initial={{ opacity: 0, y: 30 }}
178+
whileInView={{ opacity: 1, y: 0 }}
179+
transition={{ duration: 0.6 }}
180+
viewport={{ once: true }}
181+
className="text-4xl md:text-5xl font-bold text-center mb-14 text-blue-400 drop-shadow"
182+
>
183+
🙋 FAQs - GSSoC '25
184+
</motion.h2>
185+
186+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
187+
{faqs.map((faq, index) => (
188+
<motion.div
189+
key={index}
190+
whileHover={{ scale: 1.015 }}
191+
initial={{ opacity: 0, y: 20 }}
192+
whileInView={{ opacity: 1, y: 0 }}
193+
transition={{ duration: 0.4, delay: index * 0.1 }}
194+
viewport={{ once: true }}
195+
className="bg-gradient-to-tr from-[#111132] to-[#1f1f3c] p-6 rounded-2xl border border-[#262640] transition-all hover:shadow-blue-500/20 shadow-sm cursor-pointer"
196+
onClick={() => toggle(index)}
197+
>
198+
<div className="flex justify-between items-center">
199+
<h3 className="text-lg font-semibold">{faq.question}</h3>
200+
<motion.span
201+
animate={{ rotate: openIndex === index ? 180 : 0 }}
202+
transition={{ duration: 0.3 }}
203+
>
204+
<ChevronDown className="text-blue-400" />
205+
</motion.span>
206+
</div>
207+
208+
<AnimatePresence>
209+
{openIndex === index && (
210+
<motion.p
211+
key="content"
212+
initial={{ opacity: 0, height: 0 }}
213+
animate={{ opacity: 1, height: "auto" }}
214+
exit={{ opacity: 0, height: 0 }}
215+
transition={{ duration: 0.3 }}
216+
className="mt-4 text-gray-300 leading-relaxed"
217+
>
218+
{faq.answer}
219+
</motion.p>
220+
)}
221+
</AnimatePresence>
222+
</motion.div>
223+
))}
224+
</div>
225+
</section>
226+
);
227+
}

‎app/page.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ import { redirect } from "next/navigation";
4141
import Testimonials from "@/components/Testimonials";
4242
import PastSponsors from "@/components/PastSponsors";
4343

44+
import Link from 'next/link';
45+
4446
const containerVariants = {
4547
hidden: {},
4648
show: {
@@ -783,6 +785,15 @@ export default function Home() {
783785
</motion.section>
784786
*/}
785787

788+
789+
<div className="text-center my-16">
790+
<Link href="/faqs">
791+
<span className="inline-block bg-gradient-to-r from-purple-500 to-blue-500 text-white px-6 py-3 rounded-full text-xl font-semibold shadow-lg hover:scale-105 transition duration-300 cursor-pointer">
792+
🤔 View FAQs – GSSoC '25
793+
</span>
794+
</Link>
795+
</div>
796+
786797
<motion.section
787798
id="testimonials"
788799
initial="hidden"
@@ -881,6 +892,7 @@ export default function Home() {
881892
</motion.div> */}
882893
</motion.section>
883894

895+
884896
<Testimonials/>
885897

886898
<motion.section

‎package-lock.json‎

Lines changed: 26 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"@tsparticles/react": "^3.0.0",
1515
"@tsparticles/slim": "^3.8.1",
1616
"clsx": "^2.1.1",
17-
"framer-motion": "^12.12.1",
17+
"framer-motion": "^12.18.1",
18+
"lucide-react": "^0.515.0",
1819
"motion": "^12.12.1",
1920
"next": "15.3.2",
2021
"react": "^19.0.0",

0 commit comments

Comments
 (0)