Update MegaMenuLink to use data-driven rendering
The MegaMenuLink component has been refactored to use data-driven rendering rather than hard-coded values.
This commit is contained in:
Emil Gulamov
parent
b867fbc93f
commit
9b4cdac7bb
1 changed files with 44 additions and 211 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue