improve accordtion

This commit is contained in:
2025-04-29 12:42:52 -03:00
parent f535e1aa25
commit 52d0e4755f
5 changed files with 14 additions and 9 deletions

View File

@@ -4,12 +4,12 @@ import { Icon } from "astro-icon/components";
<div <div
class="cursor-pointer flex items-center justify-between px-5 gap-3 py-3" 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 /> <slot />
<Icon <Icon
name="chevron-down" 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}" :class="{'-rotate-180': open === true}"
/> />
</div> </div>

View File

@@ -1,7 +1,8 @@
<div <div
x-data="{ open: false }" 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}" :class="{'bg-white/15': open === true}"
x-bind:aria-expanded="open"
> >
<slot /> <slot />
</div> </div>

View File

@@ -3,13 +3,13 @@ import Container from "~/components/Container.astro";
--- ---
<Container id="planos"> <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"> <h1 class="text-pretty text-4xl lg:text-6xl">
Modelos de contratação para sua empresa Modelos de contratação para sua empresa
</h1> </h1>
<div class="grid lg:grid-cols-3 gap-5"> <div class="grid lg:grid-cols-3 gap-5">
<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 <h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase" 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> </a>
</div> </div>
<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 <h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase" 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> </a>
</div> </div>
<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 <h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase" class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"

View File

@@ -24,7 +24,11 @@ const year = new Date().getFullYear();
<body> <body>
<header> <header>
<Container class="flex items-center py-3"> <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" /> <Icon name="logos/eduseg" class="w-28 h-auto" />
</a> </a>

View File

@@ -122,7 +122,7 @@ const { Content } = await render(course);
</div> </div>
<a <a
href="http://bit.ly/3RlROu6" 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" target="_blank"
> >
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">