Adding FAQs section

Author: FirePheonix

public/assets/Images/faq.png

@@ -7,6 +7,7 @@ import mentorsTeaching from '/assets/Stats/MentorsHelping.svg';
 import apostrophie from '/assets/Stats/quote-icon.svg';
 import leftHeart from '/assets/Stats/HeartLeft.svg';
 import rightHeart from '/assets/Stats/HeartRight.svg';
+import faq from '/assets/Images/faq.png';
 
 export const stats = {
   kidlaptop,
@@ -18,6 +19,7 @@ export const stats = {
   apostrophie,
   leftHeart,
   rightHeart,
+  faq,
 };
 
 export const statisticsData = [

src/constants/Stats.ts

@@ -0,0 +1,35 @@
+const faqs = [
+  {
+    question: 'What is Sugar Labs?',
+    answer:
+      'Sugar Labs, a 501(c)(3) non-profit foundation, serves as a support base and gathering place for the community of educators and software developers who want to extend the Sugar platform and who have been creating Sugar-compatible applications.',
+  },
+  {
+    question: 'What is the mission of Sugar Labs?',
+    answer:
+      'The overarching mission of Sugar Labs is to support the Sugar platform through software development, and community outreach and support. The purpose of the Sugar platform is provide a software and content environment that enhances learning.',
+  },
+  {
+    question: 'What are the principles that guide Sugar Labs?',
+    answer:
+      'Sugar Labs subscribes to principle that learning thrives within a culture of freedom of expression, hence it has a natural affinity with the free software movement.',
+  },
+  {
+    question:
+      'What makes Sugar different from other educational software platforms?',
+    answer:
+      'The Sugar interface, in its departure from the desktop metaphor for computing, is the first serious attempt to create a user interface that is based on both cognitive and social constructivism.',
+  },
+  {
+    question: 'Who can use Sugar and how do they benefit?',
+    answer:
+      'Sugar is a free software project, freely available to anyone who wants to use it or improve upon it. The Sugar platform was designed for young children (K–6), but it is finding applicability in a number of different venues.',
+  },
+  {
+    question: 'Are there any platforms where Sugar runs on?',
+    answer:
+      'The Sugar Learning Platform is a leading learning platform that began in the famous One Laptop Per Child project. It is used every day by nearly 3 million children around the world.',
+  },
+];
+
+export default faqs;

src/constants/aboutUs/faqs.ts

@@ -1,28 +1,96 @@
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
+import { useState } from 'react';
+import { stats } from '@/constants/Stats';
+import faqs from '@/constants/aboutUs/faqs.ts';
 
 const FAQs = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const toggleFAQ = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
   return (
-    <div>
+    <div className="min-h-screen bg-white text-gray-900">
       <Header />
       <main className="container mx-auto p-4">
-        <h1 className="text-4xl font-bold text-center my-8">FAQs</h1>
-        <div className="mt-6 space-y-4">
-          <div className="bg-gray-100 p-4 rounded-lg">
-            <h2 className="text-xl font-semibold">What is SugarLabs?</h2>
-            <p className="mt-2 text-gray-700">
-              SugarLabs is a non-profit organization that develops free and
-              open-source educational software for children.
-            </p>
-          </div>
-          <div className="bg-gray-100 p-4 rounded-lg">
-            <h2 className="text-xl font-semibold">How can I get involved?</h2>
-            <p className="mt-2 text-gray-700">
-              You can join our community as a developer, volunteer, or donor.
-              Visit the "Join Development" or "Volunteer" pages for more
-              information.
-            </p>
+        {/* Top FAQs Section */}
+        <section className="my-8 flex justify-center">
+          <div className="max-w-4xl w-4/5 flex flex-col md:flex-row justify-between items-center">
+            {/* Left Side - Text */}
+            <div className="md:w-1/2 text-left md:pr-8">
+              <h1 className="text-4xl font-bold">FAQs</h1>
+              <p className="text-gray-600 mt-2 text-lg">
+                Have questions? Here you’ll find the answers most valued by our
+                partners, along with access to step-by-step instructions and
+                support.
+              </p>
+            </div>
+
+            {/* Right Side - Enlarged Image */}
+            <div className="md:w-1/2 flex justify-end">
+              <img
+                src={stats.faq}
+                alt="FAQs Illustration"
+                className="w-80 md:w-[400px] lg:w-[500px]"
+              />
+            </div>
           </div>
+        </section>
+
+        {/* FAQ Sections Container */}
+        <div className="w-4/5 max-w-5xl mx-auto">
+          {/* Quick Answers */}
+          <section className="my-10">
+            <h2 className="text-3xl font-bold mb-6">Quick Answers</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
+              {Array(6)
+                .fill(0)
+                .map((_, index) => (
+                  <div
+                    key={index}
+                    className="bg-white shadow-lg rounded-2xl p-6 flex flex-col items-center border border-gray-200"
+                  >
+                    <div className="w-12 h-12 bg-gray-100 flex items-center justify-center rounded-lg mb-4">
+                      <img
+                        src="/faq-icon.svg"
+                        alt="FAQ Icon"
+                        className="w-6 h-6"
+                      />
+                    </div>
+                    <h3 className="font-semibold text-center">
+                      Is Music Blocks Free?
+                    </h3>
+                    <p className="text-gray-600 text-sm text-center mt-2">
+                      Yes! It is absolutely free to use, just visit the Music
+                      Blocks webpage to access it for free.
+                    </p>
+                  </div>
+                ))}
+            </div>
+          </section>
+
+          {/* General FAQs */}
+          <section className="my-10">
+            <h2 className="text-3xl font-bold mb-6">General FAQs</h2>
+            <div className="bg-white shadow-lg rounded-lg p-6">
+              {faqs.map((faq, index) => (
+                <div key={index} className="border-b">
+                  <button
+                    className="w-full text-left py-4 text-lg font-medium flex justify-between items-center"
+                    onClick={() => toggleFAQ(index)}
+                  >
+                    {faq.question}
+                    <span>{openIndex === index ? '-' : '+'}</span>
+                  </button>
+                  {openIndex === index && (
+                    <p className="p-4 text-gray-700">{faq.answer}</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
         </div>
       </main>
       <Footer />