improve accordtion
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user