Add icons to Basic Faqs

src/components/astro/faqs/BasicFAQs.astro

@@ -1,4 +1,5 @@
 ---
+import { IconArrowDownRight } from "~/components/astro/icons";
 ---
 
 <div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
@@ -13,7 +14,10 @@
     <div class="grid grid-cols-1 gap-8 lg:gap-16 row-gap-8 md:grid-cols-2">
       <div class="space-y-8">
         <div>
-          <p class="mb-4 text-xl font-bold">What do I need to start?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            What do I need to start?
+          </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to
             explore strange new worlds.
@@ -23,7 +27,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">How to install the Astro + Tailwind CSS template?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            How to install the Astro + Tailwind CSS template?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             Well, the way they make shows is, they make one show. That show's called a pilot.
           </p>
@@ -34,7 +40,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">Is the Space Pope reptilian!?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            Is the Space Pope reptilian!?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know
             we were calling him Big Bear.
@@ -43,7 +51,9 @@
       </div>
       <div class="space-y-8">
         <div>
-          <p class="mb-4 text-xl font-bold">How much money you got on you?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            How much money you got on you?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless
             in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on
@@ -51,7 +61,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">Galaxies Orion's sword globular star cluster?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            Galaxies Orion's sword globular star cluster?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
           </p>
@@ -60,7 +72,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">When has justice ever been as simple as a rule book?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            When has justice ever been as simple as a rule book?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well,
             that's certainly good to know. About four years. I got tired of hearing how young I looked.

src/components/astro/icons/IconArrowDownRight.astro

@@ -0,0 +1,20 @@
+---
+const { class: className = "w-5 h-5" } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <line x1="7" y1="7" x2="17" y2="17"></line>
+  <polyline points="17 8 17 17 8 17"></polyline>
+</svg>

src/components/astro/icons/index.js

@@ -5,13 +5,6 @@ import IconFacebook from "./IconFacebook.astro";
 import IconInstagram from "./IconInstagram.astro";
 import IconArrowRight from "./IconArrowRight.astro";
 import IconMenu from "./IconMenu.astro";
+import IconArrowDownRight from "./IconArrowDownRight.astro";
 
-export {
+export { IconSun, IconGithub, IconTwitter, IconFacebook, IconInstagram, IconArrowRight, IconMenu, IconArrowDownRight };
-  IconSun,
-  IconGithub,
-  IconTwitter,
-  IconFacebook,
-  IconInstagram,
-  IconArrowRight,
-  IconMenu,
-};

src/pages/index.astro

@@ -5,7 +5,7 @@ import BasicCTA from "~/components/astro/ctas/BasicCTA.astro";
 import BasicFeatures from "~/components/astro/features/BasicFeatures.astro";
 import StepsFeatures from "~/components/astro/features/StepsFeatures.astro";
 import HeroWithImage from "~/components/astro/hero/HeroWithImage.astro";
-import FAQsBasic from "~/components/astro/faqs/FAQsBasic.astro";
+import BasicFAQs from "~/components/astro/faqs/BasicFAQs.astro";
 import TwoColsFeatures from "~/components/astro/features/TwoColsFeatures.astro";
 import StepsLeft from "~/components/astro/features/StepsLeft.astro";
 import BasicStats from "~/components/astro/stats/BasicStats.astro";
@@ -23,7 +23,7 @@ import BlogFeaturesFourCols from "~/components/astro/blog/BlogFeaturesFourCols.a
     <TwoColsFeatures />
     <StepsFeatures />
     <BlogFeaturesFourCols />
-    <FAQsBasic />
+    <BasicFAQs />
     <BasicStats />
     <BasicCTA />
   </main>