Add IconBlock component and use in FeaturesGeneral

Introduced a new Astro component, IconBlock, used for displaying icons paired with a heading and paragraph. This component is then utilized in the newly added FeaturesGeneral component, which encapsulates a feature section of the UI with a title, subtitle, image and a dynamic set of IconBlocks. This promotes reusability and visual consistency across the application.

src/components/FeaturesGeneral.astro

@@ -0,0 +1,118 @@
+---
+// import necessary dependencies
+import { Image } from "astro:assets";
+import featureImage from "../images/features-image.avif";
+import IconBlock from "./ui/blocks/IconBlock.astro";
+
+/* `title` variable used to customise the heading. */
+const title: string = "Meeting Industry Demands";
+
+/* `subTitle` variable used to customise the sub-heading text. */
+const subTitle: string =
+  "At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors. From cutting-edge tools to expert services, we're dedicated to helping you overcome obstacles and achieve your goals.";
+
+/*
+  In the above, the title and subTitle attributes are variables part of the FeaturesGeneral component.
+  */
+---
+
+<div
+  class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
+>
+  <!-- Showing an Image -->
+  <div class="relative mb-6 overflow-hidden md:mb-8">
+    <Image
+      src={featureImage}
+      alt="ScrewFast products in floating boxes"
+      class="h-full w-full object-cover object-center"
+      draggable={"false"}
+    />
+  </div>
+
+  <!-- Render title, subtitle and the various IconBlock instances -->
+  <div class="mt-5 grid gap-8 lg:mt-16 lg:grid-cols-3 lg:gap-12">
+    <div class="lg:col-span-1">
+      <!-- Title Block -->
+      <h2
+        class="text-balanced text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl"
+      >
+        {title}
+      </h2>
+      <!-- Sub Title Block -->
+      <p
+        class="mt-2 text-pretty text-neutral-600 dark:text-neutral-400 md:mt-4"
+      >
+        {subTitle}
+      </p>
+    </div>
+
+    <!-- Render a grid of IconBlocks -->
+    <div class="lg:col-span-2">
+      <div class="grid gap-8 sm:grid-cols-2 md:gap-12">
+        <!-- IconBlock #1 -->
+        <IconBlock
+          heading="Dedicated Teams"
+          paragraph="Benefit from our committed teams who ensure your success is personal. Count on expert guidance and exceptional results throughout your project journey."
+        >
+          <svg
+            class="mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]"
+            height="48"
+            viewBox="0 -960 960 960"
+            width="48"
+            ><path
+              d="m150-400 82-80-82-82-80 82 80 80Zm573-10 87-140 88 140H723Zm-243-70q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm.351-180Q455-660 437.5-642.851t-17.5 42.5Q420-575 437.351-557.5t43 17.5Q506-540 523-557.351t17-43Q540-626 522.851-643t-42.5-17ZM480-600ZM0-240v-53q0-39.464 42-63.232T150.398-380q12.158 0 23.38.5T196-377.273q-8 17.273-12 34.842-4 17.57-4 37.431v65H0Zm240 0v-65q0-65 66.5-105T480-450q108 0 174 40t66 105v65H240Zm570-140q67.5 0 108.75 23.768T960-293v53H780v-65q0-19.861-3.5-37.431Q773-360 765-377.273q11-1.727 22.171-2.227 11.172-.5 22.829-.5Zm-330.2-10Q400-390 350-366q-50 24-50 61v5h360v-6q0-36-49.5-60t-130.7-24Zm.2 90Z"
+            ></path></svg
+          >
+        </IconBlock>
+
+        <!-- IconBlock #2 -->
+        <IconBlock
+          heading="Simplicity and Affordability"
+          paragraph="Find easy-to-use, affordable solutions with ScrewFast's line of tools and equipment. Our products make procurement simple and keep projects within budget."
+        >
+          <svg
+            class="mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]"
+            height="48"
+            viewBox="0 -960 960 960"
+            width="48"
+            ><path
+              d="m346-60-76-130-151-31 17-147-96-112 96-111-17-147 151-31 76-131 134 62 134-62 77 131 150 31-17 147 96 111-96 112 17 147-150 31-77 130-134-62-134 62Zm27-79 107-45 110 45 67-100 117-30-12-119 81-92-81-94 12-119-117-28-69-100-108 45-110-45-67 100-117 28 12 119-81 94 81 92-12 121 117 28 70 100Zm107-341Zm-43 133 227-225-45-41-182 180-95-99-46 45 141 140Z"
+            ></path></svg
+          >
+        </IconBlock>
+
+        <!-- IconBlock #3 -->
+        <IconBlock
+          heading="Comprehensive Documentation"
+          paragraph="Integrate with ease using ScrewFast's exhaustive guides and libraries. Achieve seamless product adoption with our full suite of documentation designed for your success."
+        >
+          <svg
+            class="mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]"
+            height="48"
+            viewBox="0 -960 960 960"
+            width="48"
+            ><path
+              d="M343-420h225v-60H343v60Zm0-90h395v-60H343v60Zm0-90h395v-60H343v60Zm-83 400q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z"
+            ></path></svg
+          >
+        </IconBlock>
+
+        <!-- IconBlock #4 -->
+        <IconBlock
+          heading="User-Centric Design"
+          paragraph="Experience the difference with ScrewFast's user-focused design — where functionality meets practicality for an enhanced work experience."
+        >
+          <svg
+            class="mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]"
+            height="48"
+            viewBox="0 -960 960 960"
+            width="48"
+            ><path
+              d="M480-480q-51 0-85.5-34.5T360-600q0-50 34.5-85t85.5-35q50 0 85 35t35 85q0 51-35 85.5T480-480Zm-.351-60Q505-540 522.5-557.149t17.5-42.5Q540-625 522.649-642.5t-43-17.5Q454-660 437-642.649t-17 43Q420-574 437.149-557t42.5 17ZM240-240v-76q0-27 17.5-47.5T300-397q42-22 86.943-32.5 44.942-10.5 93-10.5Q528-440 573-429.5t87 32.5q25 13 42.5 33.5T720-316v76H240Zm240-140q-47.546 0-92.773 13T300-328v28h360v-28q-42-26-87.227-39-45.227-13-92.773-13Zm0-220Zm0 300h180-360 180ZM140-80q-24 0-42-18t-18-42v-172h60v172h172v60H140ZM80-648v-172q0-24 18-42t42-18h172v60H140v172H80ZM648-80v-60h172v-172h60v172q0 24-18 42t-42 18H648Zm172-568v-172H648v-60h172q24 0 42 18t18 42v172h-60Z"
+            ></path></svg
+          >
+        </IconBlock>
+      </div>
+    </div>
+  </div>
+</div>

src/components/ui/blocks/IconBlock.astro

@@ -0,0 +1,22 @@
+---
+const { heading, paragraph } = Astro.props;
+
+interface Props {
+  heading?: string;
+  paragraph?: string;
+}
+---
+
+<div class="flex gap-x-5">
+  <slot />
+  <div class="grow">
+    <h3
+      class="text-balanced text-lg font-semibold text-gray-800 dark:text-neutral-200"
+    >
+      {heading}
+    </h3>
+    <p class="mt-1 text-pretty text-neutral-700 dark:text-neutral-300">
+      {paragraph}
+    </p>
+  </div>
+</div>