From 67370c27f0f43414a9876e09adcb7dc991e41791 Mon Sep 17 00:00:00 2001
From: Gopal Kaul <gopalkaul5@gmail.com>
Date: Tue, 21 Feb 2023 20:32:52 +0530
Subject: [PATCH] Add FAQs to the Header

---
 src/components/widgets/Header.astro | 59 ++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index 5e88e7e..cd5d1a9 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -1,29 +1,38 @@
 ---
-import { Icon } from 'astro-icon';
-import Logo from '~/components/common/Logo.astro';
-import ToggleTheme from '~/components/common/ToggleTheme.astro';
-import ToggleMenu from '~/components/common/ToggleMenu.astro';
+import { Icon } from "astro-icon";
+import Logo from "~/components/common/Logo.astro";
+import ToggleTheme from "~/components/common/ToggleTheme.astro";
+import ToggleMenu from "~/components/common/ToggleMenu.astro";
 
-import { getHomePermalink} from '~/utils/permalinks';
+import { getHomePermalink } from "~/utils/permalinks";
 
 const links = [
-      {
-        text: 'Features',
-        href: '#features',
-      },
-      {
-        text: 'Download',
-        href: '#download',
-      },
-      // {
-      //   text: 'About us',
-      //   href: '#about',
-      // },
+  {
+    text: "Features",
+    href: "#features",
+  },
+  {
+    text: "FAQs",
+    href: "#faqs",
+  },
+  {
+    text: "Download",
+    href: "#download",
+  },
+  // {
+  //   text: 'About us',
+  //   href: '#about',
+  // },
 ];
 ---
 
-<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100" id="header">
-  <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-6xl">
+<header
+  class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100"
+  id="header"
+>
+  <div
+    class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-6xl"
+  >
     <div class="flex justify-between">
       <a class="flex items-center" href={getHomePermalink()}>
         <Logo />
@@ -37,14 +46,20 @@ const links = [
       class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
       aria-label="Main navigation"
     >
-      <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
+      <ul
+        class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base"
+      >
         {
           links.map(({ text, href, links }) => (
-            <li class={links?.length ? 'dropdown' : ''}>
+            <li class={links?.length ? "dropdown" : ""}>
               {links?.length ? (
                 <>
                   <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
-                    {text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
+                    {text}{" "}
+                    <Icon
+                      name="tabler:chevron-down"
+                      class="w-3.5 h-3.5 ml-0.5 hidden md:inline"
+                    />
                   </button>
                   <ul class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl">
                     {links.map(({ text: text2, href: href2 }) => (