docs(footer): set a tags as link buttonVariants

Author: maiieul

apps/website/src/components/footer/footer.tsx

@@ -1,27 +1,35 @@
 import { component$ } from '@builder.io/qwik';
 import { GitHubIcon } from '../icons/GitHubIcon';
 import { DiscordIcon } from '../icons/discord';
+import { cn } from '@qwik-ui/utils';
+import { buttonVariants } from '@qwik-ui/styled';
 
 export const Footer = component$(() => {
   return (
     <footer class="border-t">
       <div class="mx-auto max-w-7xl overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
         <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
           <div class="px-5 py-2">
-            <a href="/docs/headless/introduction" class="hover:text-muted-foreground">
+            <a
+              href="/docs/headless/introduction"
+              class={cn(buttonVariants({ look: 'link' }))}
+            >
               Headless Kit
             </a>
           </div>
           <div class="px-5 py-2">
-            <a href="/docs/styled/introduction" class="hover:text-muted-foreground">
+            <a
+              href="/docs/styled/introduction"
+              class={cn(buttonVariants({ look: 'link' }))}
+            >
               Styled Kit
             </a>
           </div>
           <div class="px-5 py-2">
             <a
               href="https://discord.gg/PVWUUejrez"
               target="_blank"
-              class="hover:text-muted-foreground"
+              class={cn(buttonVariants({ look: 'link' }))}
             >
               Community
             </a>
@@ -31,7 +39,7 @@ export const Footer = component$(() => {
             <a
               href="https://www.w3.org/standards/webdesign/accessibility"
               target="_blank"
-              class="hover:text-muted-foreground"
+              class={cn(buttonVariants({ look: 'link' }))}
             >
               Accessibility
             </a>
@@ -40,7 +48,7 @@ export const Footer = component$(() => {
             <a
               href="https://qwik.builder.io/docs"
               target="_blank"
-              class="hover:text-muted-foreground"
+              class={cn(buttonVariants({ look: 'link' }))}
             >
               Qwik Documentation
             </a>