From 9b4cdac7bba7ab7cf81a224e46f353fed0cbb8c3 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sat, 29 Jun 2024 03:39:05 +0400
Subject: [PATCH] Update MegaMenuLink to use data-driven rendering

The MegaMenuLink component has been refactored to use data-driven rendering rather than hard-coded values.
---
 src/components/ui/links/MegaMenuLink.astro | 255 ++++-----------------
 1 file changed, 44 insertions(+), 211 deletions(-)

diff --git a/src/components/ui/links/MegaMenuLink.astro b/src/components/ui/links/MegaMenuLink.astro
index c25ae12..923deb6 100644
--- a/src/components/ui/links/MegaMenuLink.astro
+++ b/src/components/ui/links/MegaMenuLink.astro
@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import Icon from "../icons/Icon.astro";
-import personWorking from "@images/person-working.avif";
+import { servicesData, successStoriesData } from "@data/mega_link";
 ---
 
 <div
@@ -11,21 +11,7 @@ import personWorking from "@images/person-working.avif";
     type="button"
     class="flex w-full items-center font-medium text-neutral-600 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-neutral-500"
   >
-    Services
-
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      class="ms-2 size-4 flex-shrink-0"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
-    </svg>
+    Services <Icon name="chevronDown" />
   </button>
 
   <div
@@ -33,198 +19,47 @@ import personWorking from "@images/person-working.avif";
   >
     <div class="gap-4 md:grid md:grid-cols-2 lg:grid-cols-3">
       <div class="mx-1 flex flex-col md:mx-0">
-        <a
-          class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
-          href="#"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="mt-1 size-5 flex-shrink-0"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
-            ></path>
-          </svg>
-          <div class="grow">
-            <p class="font-medium text-neutral-800 dark:text-neutral-200">
-              Explore Advice and Explanations
-            </p>
-            <p
-              class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200"
-            >
-              Dive deep into helpful guides and explanations for all of
-              ScrewFast's features
-            </p>
-          </div>
-        </a>
-
-        <a
-          class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
-          href="#"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="mt-1 size-5 flex-shrink-0"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
-            ></path>
-          </svg>
-
-          <div class="grow">
-            <p class="font-medium text-neutral-800 dark:text-neutral-200">
-              Discover Integrations
-            </p>
-            <p
-              class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200"
-            >
-              Supercharge Your Workflow. Seamless integrations with all your
-              favorite tools
-            </p>
-          </div>
-        </a>
-
-        <a
-          class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
-          href="#"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="mt-1 size-5 flex-shrink-0"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-            ></path>
-          </svg>
-
-          <div class="grow">
-            <p class="font-medium text-neutral-800 dark:text-neutral-200">
-              Expert Services
-            </p>
-            <p
-              class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200"
-            >
-              Go beyond tools with ScrewFast's expert services
-            </p>
-          </div>
-        </a>
+        {
+          servicesData &&
+            servicesData.slice(0, 3).map((data) => (
+              <a
+                class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
+                href={data.url}
+              >
+                <Icon name={data.icon} class="mt-1 size-5 flex-shrink-0" />
+                <div class="grow">
+                  <p class="font-medium text-neutral-800 dark:text-neutral-200">
+                    {data.title}
+                  </p>
+                  <p class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200">
+                    {data.description}
+                  </p>
+                </div>
+              </a>
+            ))
+        }
       </div>
 
       <div class="mx-1 flex flex-col md:mx-0">
-        <a
-          class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
-          href="#"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="mt-1 size-5 flex-shrink-0"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"
-            ></path>
-          </svg>
-
-          <div class="grow">
-            <p class="font-medium text-neutral-800 dark:text-neutral-200">
-              Cutting-Edge Tools
-            </p>
-            <p
-              class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200"
-            >
-              Build Smarter, Faster. Experience next-level efficiency with
-              ScrewFast's cutting-edge construction tools
-            </p>
-          </div>
-        </a>
-
-        <a
-          class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
-          href="#"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="mt-1 size-5 flex-shrink-0"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
-            ></path>
-          </svg>
-
-          <div class="grow">
-            <p class="font-medium text-neutral-800 dark:text-neutral-200">
-              Simple Plans
-            </p>
-            <p
-              class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200"
-            >
-              Boost your efficiency with ScrewFast's straightforward,
-              value-driven plans
-            </p>
-          </div>
-        </a>
-
-        <a
-          class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
-          href="#"
-        >
-          <svg
-            class="mt-1 size-5 flex-shrink-0"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            ><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle
-              cx="9"
-              cy="7"
-              r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path
-              d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
-          >
-          <div class="grow">
-            <p class="font-medium text-neutral-800 dark:text-neutral-200">
-              Community Forum
-            </p>
-            <p
-              class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200"
-            >
-              Learn, share, and connect with other ScrewFast users
-            </p>
-          </div>
-        </a>
+        {
+          servicesData &&
+            servicesData.slice(3, 6).map((data) => (
+              <a
+                class="group flex gap-x-5 rounded-lg p-4 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-500/10"
+                href={data.url}
+              >
+                <Icon name={data.icon} class="mt-1 size-5 flex-shrink-0" />
+                <div class="grow">
+                  <p class="font-medium text-neutral-800 dark:text-neutral-200">
+                    {data.title}
+                  </p>
+                  <p class="text-sm text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-400 dark:group-hover:text-neutral-200">
+                    {data.description}
+                  </p>
+                </div>
+              </a>
+            ))
+        }
       </div>
 
       <div class="mx-1 flex flex-col pt-4 md:mx-0 md:pt-0">
@@ -232,21 +67,19 @@ import personWorking from "@images/person-working.avif";
           class="text-sm font-semibold uppercase text-neutral-800 dark:text-neutral-200"
           >Success Stories</span
         >
-
         <a
           class="group mt-2 flex items-center gap-x-5 rounded-xl p-3 hover:bg-neutral-100 dark:hover:bg-neutral-500/10"
-          href="#"
+          href={successStoriesData[0].learnMoreUrl}
         >
           <Image
-            src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=1376&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
+            src={successStoriesData[0].image}
             inferSize={true}
-            alt="Image Description"
+            alt={successStoriesData[0].alt}
             class="size-32 rounded-lg"
           />
           <div class="grow">
             <p class="text-sm text-neutral-800 dark:text-neutral-400">
-              See how ScrewFast has empowered businesses of all sizes to achieve
-              outstanding results.
+              {successStoriesData[0].description}
             </p>
             <p
               class="mt-3 inline-flex items-center gap-x-1 text-sm font-medium text-orange-400 decoration-2 hover:underline dark:text-orange-300"