Minor improvements

Author: Wykks

src/components/mktd/ButtonWithMovingBorderEffect.tsx

@@ -27,7 +27,7 @@ export function ButtonWithMovingBorderEffect({
   [key: string]: any;
 }) {
   return (
-    <div
+    <a
       className={cn(
         "relative block h-16 w-40 overflow-hidden bg-transparent p-[1px] text-xl",
         containerClassName,
@@ -62,7 +62,7 @@ export function ButtonWithMovingBorderEffect({
       >
         {children}
       </div>
-    </div>
+    </a>
   );
 }
 

src/components/mktd/Hero.astro

@@ -46,18 +46,19 @@ const mktdIsUpcoming = mktd.data.date > new Date();
       </div>
       {
         mktdIsUpcoming && (
-          <ButtonWithMovingBorderEffect client:idle className="gap-2">
-            S'inscrire
+          <div class="flex flex-wrap gap-2">
             {mktd.data.inscriptionLinks.map((inscriptionLink) => (
-              <a
-                rel="noopener"
+              <ButtonWithMovingBorderEffect
+                client:idle
+                className="gap-2"
                 href={inscriptionLink.url}
-                aria-label={inscriptionLink.type}
+                aria-label={`S'incrire sur ${inscriptionLink.type}`}
               >
                 <Icon name={inscriptionLink.type} />
-              </a>
+                S'inscrire
+              </ButtonWithMovingBorderEffect>
             ))}
-          </ButtonWithMovingBorderEffect>
+          </div>
         )
       }
     </div>

src/components/mktd/Infos.astro

@@ -8,27 +8,23 @@ const mktd = Astro.props;
 
 <section>
   <div class="container m-auto gap-2 space-y-4 px-4 py-8">
-    <div class="grid grid-cols-2 items-center max-sm:grid-cols-1">
+    <div class="grid grid-cols-2 items-center max-sm:mx-4 max-sm:grid-cols-1">
       <h2 class="mb-4 text-center text-2xl font-bold text-main-900">
         Au programme
       </h2>
-      <ul
-        class="flex flex-col gap-2 text-lg max-sm:items-center max-sm:text-center"
-      >
-        {mktd.data.program.map((item) => <li class="sm:list-disc">{item}</li>)}
+      <ul class="flex flex-col gap-2 text-lg">
+        {mktd.data.program.map((item) => <li class="list-disc">{item}</li>)}
       </ul>
     </div>
     <hr />
-    <div class="grid grid-cols-2 items-center max-sm:grid-cols-1">
+    <div class="grid grid-cols-2 items-center max-sm:mx-4 max-sm:grid-cols-1">
       <h2 class="mb-4 text-center text-2xl font-bold text-main-900">
         Prérequis
       </h2>
-      <ul
-        class="flex flex-col gap-2 text-lg max-sm:items-center max-sm:text-center"
-      >
+      <ul class="flex flex-col gap-2 text-lg">
         {
           mktd.data.requirements.map((item) => (
-            <li class="sm:list-disc">{item}</li>
+            <li class="list-disc">{item}</li>
           ))
         }
       </ul>