feat: added FAQ section

layouts/_default/list.html

@@ -95,9 +95,89 @@ <h2 class="text-sm lg:text-lg font-semibold mb-1">{{ .Params.title }}</h2>
 
     {{ template "_internal/pagination.html" . }}
 
+
     <div class="mt-12 text-center">
       <img src="https://kochifoss.org/images/group.png" class="inline-block w-1/2 h-1/2 md:w-5/12 lg:h-auto object-cover rounded-lg shadow-lg">
     </div>
+
+    <div class="my-16 w-full max-w-3xl mx-auto px-4">
+      <h2 class="text-3xl font-bold text-center mb-8">Frequently Asked Questions</h2>
+
+      <div class="space-y-4"> <details class="border-b border-gray-300 pb-4">
+          <summary class="font-semibold text-xl cursor-pointer list-none flex justify-between items-center">
+            What is KochiFOSS?
+            <span class="transform transition-transform duration-200 open:rotate-90">
+              <img src="/images/arrow.png" alt="toggle" class="w-5 h-5"> 
+            </span>
+          </summary>
+          <p class="text-gray-700 mt-4">
+            A freewheeling community of developers and enthusiasts of സ്വതന്ത്ര/Free/Libre and Open Source Software who gather in person for laid-back meetups in Kochi, India.
+          </p>
+        </details>
+
+        <details class="border-b border-gray-300 pb-4">
+          <summary class="font-semibold text-xl cursor-pointer list-none flex justify-between items-center">
+            How can I join the community?
+            <span class="transform transition-transform duration-200 open:rotate-90">
+              <img src="/images/arrow.png" alt="toggle" class="w-5 h-5"> 
+            </span>
+          </summary>
+          <p class="text-gray-700 mt-4">
+            You can join our community chats on Matrix, XMPP, or Telegram. The links are right at the top of this page!
+          </p>
+        </details>
+
+        <details class="border-b border-gray-300 pb-4">
+          <summary class="font-semibold text-xl cursor-pointer list-none flex justify-between items-center">
+            How do I propose a talk?
+            <span class="transform transition-transform duration-200 open:rotate-90">
+              <img src="/images/arrow.png" alt="toggle" class="w-5 h-5"> 
+            </span>
+          </summary>
+          <p class="text-gray-700 mt-4">
+            When an upcoming meetup is announced, we will include a "Propose a talk!" link if we are looking for speakers. You can also bring your topic to the community chat.
+          </p>
+        </details>
+
+        <details class="border-b border-gray-300 pb-4">
+          <summary class="font-semibold text-xl cursor-pointer list-none flex justify-between items-center">
+            Is there any fee?
+            <span class="transform transition-transform duration-200 open:rotate-90">
+              <img src="/images/arrow.png" alt="toggle" class="w-5 h-5"> 
+            </span>
+          </summary>
+          <p class="text-gray-700 mt-4">
+            No, it's absolutely free! But you should sign up early before the seats run out.
+          </p>
+        </details>
+
+        <details class="border-b border-gray-300 pb-4">
+          <summary class="font-semibold text-xl cursor-pointer list-none flex justify-between items-center">
+            Anything to carry?
+            <span class="transform transition-transform duration-200 open:rotate-90">
+              <img src="/images/arrow.png" alt="toggle" class="w-5 h-5"> 
+            </span>
+            </summary>
+            <p class="text-gray-700 mt-4">
+              Yes, please bring a government-issued ID card with you for security verification.
+            </p>
+        </details>
+
+        <details class="border-b border-gray-300 pb-4">
+          <summary class="font-semibold text-xl cursor-pointer list-none flex justify-between items-center">
+            How do I submit a topic for presentation?
+            <span class="transform transition-transform duration-200 open:rotate-90">
+              <img src="/images/arrow.png" alt="toggle" class="w-5 h-5"> 
+            </span>
+          </summary>
+          <p class="text-gray-700 mt-4">
+            Keep it simple! We need more talking and just use the PPT to guide the conversation.
+          </p>
+        </details>
+
+      </div>
+    </div>
+
   </div>
 </div>
-{{ end }}
+{{ end }}