FAQ's Section

Author: Astraxx04

src/_includes/components/dropdown.njk

@@ -0,0 +1,29 @@
+{% macro renderDropdown(question) %}
+<div class="space-y-4">
+    <div class="bg-white shadow-lg rounded-md overflow-hidden">
+        <button 
+            class="w-full text-left p-4 font-semibold text-lg flex justify-between items-center relative overflow-hidden group hover:bg-[#8385F2] hover:text-white focus:outline-none transition-colors duration-300"
+            onclick="
+                const answer = this.nextElementSibling;
+                const icon = this.querySelector('svg');
+                answer.classList.toggle('hidden');
+                icon.classList.toggle('rotate-180');
+                
+                if (!answer.classList.contains('hidden')) {
+                    this.classList.add('bg-[#8385F2]', 'text-white');
+                } else {
+                    this.classList.remove('bg-[#8385F2]', 'text-white');
+                }
+            "
+        >
+            <span class="relative z-10">{{ question }}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transition-transform duration-300 relative z-10 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+        </button>
+        <div class="hidden p-2 text-black border-t text-justify border-gray-200">
+            {{ caller() }}
+        </div>
+    </div>
+</div>
+{% endmacro %}

src/_includes/footer.njk

@@ -1,5 +1,5 @@
 {% from "components/button.njk" import button %}
-<footer class="bg-blue-600 flex text-white mb-0 bottom-0 w-full relative">
+<footer class="bg-pycon-blue flex text-white mb-0 bottom-0 w-full relative">
     <div class="relative mx-[6%] md:mx-[12%] mt-24 pb-8 md:pt-20 md:pb-12 w-full md:w-auto">
         <div class="xl:scale-125 text-center md:text-left">
             {{ button(text="Become a Volunteer", url="https://docs.google.com/forms/d/e/1FAIpQLSdX2LEom11BbWDiLUiQp1rmeNX9l7J8bfszGidsRDoExy0D5A/viewform", lime_bg=true, env = env) }}

src/_includes/landing/communities.njk

@@ -1,6 +1,6 @@
 {% from "components/button.njk" import button %}
 
-<section class="bg-blue-600 text-white relative px-4 sm:px-20 md:px-40 pt-10" id="communities">
+<section class="bg-pycon-blue text-white relative px-4 sm:px-20 md:px-40 pt-10" id="communities">
     <div class="mx-auto py-16">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-10">
             <div>

src/_includes/landing/sponsors.njk

@@ -1,6 +1,6 @@
 {% from "components/button.njk" import button %}
 
-<section class="bg-blue-600 text-white relative px-4 sm:px-20 md:px-40 pt-10" id="sponsors">
+<section class="bg-pycon-blue text-white relative px-4 sm:px-20 md:px-40 pt-10" id="sponsors">
     <div class="mx-auto py-16">
         <!-- Desktop image visible -->
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-10">

src/_includes/navbar.njk

@@ -7,6 +7,13 @@
       </a>
      <ul class="flex items-center justify-center w-full gap-8 relative mb-0">
         {% set menuItems = [
+          {
+            "name": "About",
+            "hasSubmenu": true,
+            "submenu": [
+              {"name": "FAQ's", "link": "about/faqs"}
+            ]
+          },
           {
             "name": "CFP",
             "link": "cfp",