🐛 fix: Fix the hover event on footer links

This commit is contained in:
Wanjohi
2024-09-06 23:21:33 +03:00
parent d66248cb97
commit 8cc5a8b9e6

View File

@@ -67,29 +67,29 @@ export const Footer = component$(() => {
<section class="gap-4 grid grid-cols-2 sm:grid-cols-3 justify-around py-6 items-start" > <section class="gap-4 grid grid-cols-2 sm:grid-cols-3 justify-around py-6 items-start" >
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h2 class="font-title text-sm font-bold" >Product</h2> <h2 class="font-title text-sm font-bold" >Product</h2>
<div class="text-gray-950/70 dark:text-gray-50/70 flex flex-col gap-2" > <div class="text-gray-950/50 dark:text-gray-50/50 flex flex-col gap-2" >
<Link href="/pricing" class="text-base hover:text-primary-500" >Pricing</Link> <Link href="/pricing" class="text-base hover:text-gray-950 dark:hover:text-gray-50 transition-all duration-200 hover:underline hover:underline-offset-4" >Pricing</Link>
<Link href="/changelog" class="text-base hover:text-primary-500" >Changelog</Link> <Link href="/changelog" class="text-base hover:text-gray-950 dark:hover:text-gray-50 transition-all duration-200 hover:underline hover:underline-offset-4" >Changelog</Link>
<p class="text-base opacity-50 cursor-not-allowed" >Docs</p> <p class="text-base opacity-50 cursor-not-allowed" >Docs</p>
</div> </div>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h2 class="font-title text-sm font-bold" >Company</h2> <h2 class="font-title text-sm font-bold" >Company</h2>
<div class="text-gray-950/70 dark:text-gray-50/70 flex flex-col gap-2" > <div class="text-gray-950/50 dark:text-gray-50/50 flex flex-col gap-2" >
<Link href="/contact" class="text-base hover:text-primary-500" >Contact Us</Link> <Link href="/contact" class="text-base hover:text-gray-950 dark:hover:text-gray-50 transition-all duration-200 hover:underline hover:underline-offset-4" >Contact Us</Link>
<p class="text-base opacity-50 cursor-not-allowed" >Open Nestri</p> <p class="text-base opacity-50 cursor-not-allowed" >Open Nestri</p>
<p class="text-base opacity-50 cursor-not-allowed" >Blog</p> <p class="text-base opacity-50 cursor-not-allowed" >Blog</p>
</div> </div>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h2 class="font-title text-sm font-bold" >Relations</h2> <h2 class="font-title text-sm font-bold" >Relations</h2>
<div class="text-gray-950/70 dark:text-gray-50/70 flex flex-col gap-2" > <div class="text-gray-950/50 dark:text-gray-50/50 flex flex-col gap-2" >
<Link href="/terms" class="text-base hover:text-primary-500" >Terms of Service</Link> <Link href="/terms" class="text-base hover:text-gray-950 dark:hover:text-gray-50 hover:underline underline-offset-4 transition-all duration-200" >Terms of Service</Link>
<Link href="/privacy" class="text-base hover:text-primary-500" >Privacy Policy</Link> <Link href="/privacy" class="text-base hover:text-gray-950 dark:hover:text-gray-50 hover:underline underline-offset-4 transition-all duration-200" >Privacy Policy</Link>
{/**Social Media Icons with Links */} {/**Social Media Icons with Links */}
<div class="flex flex-row gap-3"> <div class="flex flex-row gap-3">
{socialMedia.map((item) => ( {socialMedia.map((item) => (
<Link key={item.link} href={item.link} class="hover:text-primary-500" target="_blank" rel="noopener noreferrer"> <Link key={item.link} href={item.link} class=" hover:text-gray-950 dark:hover:text-gray-50" target="_blank" rel="noopener noreferrer">
{item.icon()} {item.icon()}
</Link> </Link>
))} ))}