sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

spacing

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-03-18 14:40:15 -03:00
parent 3519e4dc95
commit 48cb945180
3 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
eduseg/src/components/Card.tsx
View File

@@ -16,7 +16,7 @@ export function Card({ children, color = "gradient", className }: CardProps) {
return (
<div
className={clsx(
"lg:rounded-2xl p-5 xl:p-10",
"lg:rounded-2xl p-3 xl:p-10",
"lg:drop-shadow-sm",
colorVariants[color],
className,

30
eduseg/src/layouts/Layout.astro
View File

@@ -2,7 +2,10 @@
import "../styles/app.css";
import { Regular as Logo } from "@components/Logo";
import { Container } from "@components/Container";
import { ArrowLeftStartOnRectangleIcon } from "@heroicons/react/24/solid";
import {
ArrowLeftStartOnRectangleIcon,
AcademicCapIcon,
} from "@heroicons/react/24/solid";
---
<!doctype html>
@@ -16,23 +19,28 @@ import { ArrowLeftStartOnRectangleIcon } from "@heroicons/react/24/solid";
</head>
<body>
<Container className="flex items-center py-2.5 max-lg:px-5">
<Container className="flex items-center py-3 max-lg:px-3">
<Logo className="h-8" />
<div class="ml-auto">
<a href="#" class="flex gap-1 items-center"
><ArrowLeftStartOnRectangleIcon
className="w-5 rotate-180"
/>Entrar</a
>
<a href="#" class="flex gap-1 items-center">
<ArrowLeftStartOnRectangleIcon className="w-5 rotate-180" />
<>Entrar</>
</a>
</div>
</Container>
<section class="bg-lime-400 sticky top-0 z-10">
<Container className="flex items-center py-2.5 lg:py-5 max-lg:px-5">
<div class="text-black truncate max-lg:max-w-42">
<Container className="flex items-center py-3 max-lg:px-3">
<div class="flex gap-1 lg:gap-3 items-center">
<div class="bg-black p-1.5 lg:p-3 rounded-lg lg:rounded-xl">
<AcademicCapIcon className="w-5 lg:w-6 fill-lime-400" />
</div>
<div class="text-black truncate max-lg:max-w-36">
NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
</div>
</div>
<div
class="ml-auto flex max-lg:flex-col items-center gap-1 lg:gap-2.5"
@@ -40,7 +48,7 @@ import { ArrowLeftStartOnRectangleIcon } from "@heroicons/react/24/solid";
<button
class="bg-black p-2.5 rounded-md cursor-pointer text-sm"
>
Comprar R$100
Comprar R$149,00
</button>
</div>
</Container>
@@ -48,7 +56,7 @@ import { ArrowLeftStartOnRectangleIcon } from "@heroicons/react/24/solid";
<slot />
<footer class="bg-stone-900 p-5 lg:py-10">
<footer class="bg-stone-900 py-3 lg:py-10 max-lg:px-3">
<Container className="space-y-5">
<div class="space-y-1">
<Logo className="h-10" />

6
eduseg/src/pages/index.astro
View File

@@ -56,9 +56,9 @@ import Layout from "@layouts/Layout.astro";
</p>
</Card>
<section class="grid lg:grid-cols-2 gap-6 p-5">
<section class="grid lg:grid-cols-2 gap-6 p-3">
<div class="flex items-center justify-center">
<div class="space-y-2.5">
<div class="space-y-3">
<h4 class="font-medium text-4xl">Solicite um orçamento</h4>
<p>
Quer saber como podemos capacitar sua equipe?<br
@@ -69,7 +69,7 @@ import Layout from "@layouts/Layout.astro";
</div>
</div>
<Card color="yellow" className="rounded-xl">
<Card color="yellow" className="rounded-xl p-5">
<Form client:load />
</Card>
</section>