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

@@ -36,6 +36,12 @@
             "link": "https://in.pycon.org/blog/",
             "hasSubmenu": false,
             "isExternal": true
+          },
+          {
+            "name": "FAQ's",
+            "link": "faqs",
+            "hasSubmenu": false,
+            "isExternal": false
           }
         ] %}
 
@@ -99,10 +105,22 @@
     </a>
 
     <input type="checkbox" id="mobile-menu-checkbox" class="hidden">
-    <label for="mobile-menu-checkbox" class="cursor-pointer z-50 bg-white/20 hover:bg-white/30 p-2 rounded-full transition-all duration-300 inline-flex items-center justify-center">
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white block" id="hamburger-icon">
-        <line x1="4" y1="8" x2="20" y2="8"></line>
-        <line x1="4" y1="16" x2="20" y2="16"></line>
+    <label for="mobile-menu-checkbox" class="cursor-pointer z-50 hover:bg-white/30 p-2 rounded-full transition-all duration-300 inline-flex items-center justify-center">
+      <svg width="24" height="22" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_223_10553)">
+          <path d="M11.0351 0.0117188H0.0117188V11.0351H11.0351V0.0117188Z" fill="#F6EBFF" stroke="black" stroke-width="0.0232085" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M13.3602 1.96484H2.33691V12.9882H13.3602V1.96484Z" fill="#D7FF7B" stroke="black" stroke-width="0.062458" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M0.0117188 0.0117188L2.33721 1.96518H13.3608L11.0351 0.0117188H0.0117188Z" fill="white" stroke="black" stroke-width="0.062458" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M0.0117188 0.0117188L2.33721 1.96518V12.9885L0.0117188 11.0351V0.0117188Z" fill="white" stroke="black" stroke-width="0.062458" stroke-linecap="round" stroke-linejoin="round"/>
+          <rect x="4" y="4" width="8" height="0.5" rx="0.25" fill="#4E62F5"/>
+          <rect x="4" y="7" width="8" height="0.5" rx="0.25" fill="#4E62F5"/>
+          <rect x="4" y="10" width="8" height="0.5" rx="0.25" fill="#4E62F5"/>
+        </g>
+        <defs>
+          <clipPath id="clip0_223_10553">
+            <rect width="13.3723" height="13" fill="white"/>
+          </clipPath>
+        </defs>
       </svg>
     </label>
   </div>