From 52d0e4755f478ffda3523a6a3ff177c72233a19d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Tue, 29 Apr 2025 12:42:52 -0300
Subject: [PATCH] improve accordtion

---
 superpage/src/components/Accordion/Header.astro | 4 ++--
 superpage/src/components/Accordion/Item.astro   | 3 ++-
 superpage/src/components/Course/Plans.astro     | 8 ++++----
 superpage/src/layouts/Layout.astro              | 6 +++++-
 superpage/src/pages/[slug].astro                | 2 +-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/superpage/src/components/Accordion/Header.astro b/superpage/src/components/Accordion/Header.astro
index 96bdd02..312f842 100644
--- a/superpage/src/components/Accordion/Header.astro
+++ b/superpage/src/components/Accordion/Header.astro
@@ -4,12 +4,12 @@ import { Icon } from "astro-icon/components";
 
 <div
     class="cursor-pointer flex items-center justify-between px-5 gap-3 py-3"
-    x-on:click="open = !open"
+    x-on:click="open = ! open"
 >
     <slot />
     <Icon
         name="chevron-down"
-        class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
+        class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0 transition duration-300"
         :class="{'-rotate-180': open === true}"
     />
 </div>
diff --git a/superpage/src/components/Accordion/Item.astro b/superpage/src/components/Accordion/Item.astro
index 33678a1..366e249 100644
--- a/superpage/src/components/Accordion/Item.astro
+++ b/superpage/src/components/Accordion/Item.astro
@@ -1,7 +1,8 @@
 <div
     x-data="{ open: false }"
-    class="bg-white/10 rounded-lg w-full"
+    class="bg-white/10 w-full [&:not([aria-expanded='true']):hover]:outline rounded-lg outline-white/15"
     :class="{'bg-white/15': open === true}"
+    x-bind:aria-expanded="open"
 >
     <slot />
 </div>
diff --git a/superpage/src/components/Course/Plans.astro b/superpage/src/components/Course/Plans.astro
index 9e5957e..59b4e6c 100644
--- a/superpage/src/components/Course/Plans.astro
+++ b/superpage/src/components/Course/Plans.astro
@@ -3,13 +3,13 @@ import Container from "~/components/Container.astro";
 ---
 
 <Container id="planos">
-    <section class="space-y-5 lg:space-y-10 lg:w-4/6 mx-auto">
+    <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
         <h1 class="text-pretty text-4xl lg:text-6xl">
             Modelos de contratação para sua empresa
         </h1>
         <div class="grid lg:grid-cols-3 gap-5">
             <div
-                class="bg-white/5 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 hover:scale-105 hover:bg-white/10 transform transition duration-200"
+                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
             >
                 <h1
                     class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
@@ -36,7 +36,7 @@ import Container from "~/components/Container.astro";
                 </a>
             </div>
             <div
-                class="bg-white/5 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 hover:scale-105 hover:bg-white/10 transform transition duration-200"
+                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
             >
                 <h1
                     class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
@@ -62,7 +62,7 @@ import Container from "~/components/Container.astro";
                 </a>
             </div>
             <div
-                class="bg-white/5 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 hover:scale-105 hover:bg-white/10 transform transition duration-200"
+                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
             >
                 <h1
                     class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
diff --git a/superpage/src/layouts/Layout.astro b/superpage/src/layouts/Layout.astro
index 43d71f5..87be1b9 100644
--- a/superpage/src/layouts/Layout.astro
+++ b/superpage/src/layouts/Layout.astro
@@ -24,7 +24,11 @@ const year = new Date().getFullYear();
     <body>
         <header>
             <Container class="flex items-center py-3">
-                <a href="/" aria-label="Página inicial">
+                <a
+                    href="/"
+                    aria-label="Página inicial"
+                    class="hover:outline rounded-xs outline-offset-2"
+                >
                     <Icon name="logos/eduseg" class="w-28 h-auto" />
                 </a>
 
diff --git a/superpage/src/pages/[slug].astro b/superpage/src/pages/[slug].astro
index 77fc218..daae831 100644
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -122,7 +122,7 @@ const { Content } = await render(course);
                         </div>
                         <a
                             href="http://bit.ly/3RlROu6"
-                            class="flex flex-col hover:outline rounded outline-offset-2"
+                            class="flex flex-col hover:outline rounded-xs outline-offset-2"
                             target="_blank"
                         >
                             <div class="flex items-center gap-1">