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

add nav and footer

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-03-16 17:11:17 -03:00
parent d4bb54017d
commit bfc1114090
11 changed files with 206 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
eduseg/package-lock.json generated
View File

@@ -10,12 +10,15 @@
"dependencies": {
"@astrojs/react": "^4.2.1",
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"astro": "^5.4.3",
"clsx": "^2.1.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"tailwindcss": "^4.0.13"
}
},
@@ -886,6 +889,15 @@
"react-dom": "^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/@heroicons/react": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
"integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
"license": "MIT",
"peerDependencies": {
"react": ">= 16 || ^19.0.0-rc"
}
},
"node_modules/@img/sharp-darwin-arm64": {
"version": "0.33.5",
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -4751,6 +4763,22 @@
"react": "^19.0.0"
}
},
"node_modules/react-hook-form": {
"version": "7.54.2",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
"integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
"license": "MIT",
"engines": {
"node": ">=18.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
},
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

3
eduseg/package.json
View File

@@ -11,12 +11,15 @@
"dependencies": {
"@astrojs/react": "^4.2.1",
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"astro": "^5.4.3",
"clsx": "^2.1.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"tailwindcss": "^4.0.13"
}
}

27
eduseg/src/components/Card.tsx Normal file
View File

@@ -0,0 +1,27 @@
import clsx from "clsx";
interface CardProps {
children: React.ReactNode;
color?: "gradient" | "darker" | "yellow";
className?: string | null;
}
export function Card({ children, color = "gradient", className }: CardProps) {
const colorVariants = {
gradient: "bg-linear-to-tr from-green-secondary to-yellow-primary",
darker: "bg-green-primary text-white",
yellow: "bg-yellow-tertiary",
};
return (
<div
className={clsx(
"lg:rounded-2xl p-5 xl:p-10",
colorVariants[color],
className,
)}
>
{children}
</div>
);
}

10
eduseg/src/components/Container.tsx Normal file
View File

@@ -0,0 +1,10 @@
import clsx from "clsx";
interface ContainerProps {
children: React.ReactNode;
className?: string | null;
}
export function Container({ children, className }: ContainerProps) {
return <div className={clsx("max-w-7xl mx-auto", className)}>{children}</div>;
}

42
eduseg/src/components/Form.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { useForm } from "react-hook-form";
interface IFormInput {
name: string;
email: string;
}
export function Form() {
const { register, handleSubmit } = useForm<IFormInput>();
const onSubmit = async (data: IFormInput) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2.5">
<label>
Nome
<Input {...register("name")} />
</label>
<label>
Email
<Input {...register("email")} />
</label>
<button
type="submit"
className="font-medium bg-green-secondary hover:bg-green-support p-2.5 rounded-lg transition cursor-pointer h-12"
>
Quero um orçamento
</button>
</form>
);
}
export function Input({ ...props }) {
return (
<input
className="border border-gray-300 focus:border-green-secondary focus:ring ring-green-secondary bg-white px-5 rounded-lg w-full outline-none h-12"
{...props}
/>
);
}

14
eduseg/src/components/Logo.jsx
View File

@@ -30,31 +30,31 @@ export function Regular(props) {
</g>
<g>
<path
className="fill-green-primary dark:fill-yellow-terciary"
className="fill-yellow-tertiary"
d="M244.7,3.24h92.33v44.43h-44.15v88.85h39.38v39.62h-39.38v105.77h44.15v44.42h-92.33V3.24Z"
/>
<path
className="fill-green-primary dark:fill-yellow-terciary"
className="fill-yellow-tertiary"
d="M362.72,3.24h57.79c10.71,0,20.47,2.35,29.29,7.06,8.83,4.7,15.79,11.18,20.87,19.39,5.08,8.21,7.63,17.45,7.63,27.67v214.88c0,10.22-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.83,4.7-18.73,7.08-29.7,7.08h-57.79V3.24ZM427.55,283.88c1.74-1.87,2.6-4.18,2.6-6.86V52.56c-.26-2.69-1.34-4.97-3.22-6.86-1.88-1.87-4.15-2.83-6.82-2.83h-14v243.85h14.41c2.93,0,5.27-.94,7.01-2.83h.02Z"
/>
<path
className="fill-green-primary dark:fill-yellow-terciary"
className="fill-yellow-tertiary"
d="M531.5,322.49c-8.71-4.7-15.6-11.16-20.68-19.39-5.08-8.21-7.63-17.42-7.63-27.67V3.24h48.15v279.41c0,2.69.93,4.99,2.82,6.86,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.86V3.24h48.16v272.21c0,10.25-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.85,4.7-18.73,7.08-29.7,7.08s-20.8-2.35-29.5-7.08l.05-.02Z"
/>
<path
className="fill-green-primary dark:fill-yellow-terciary"
className="fill-yellow-tertiary"
d="M672.79,322.49c-8.7-4.7-15.6-11.16-20.68-19.39-5.08-8.21-7.63-17.42-7.63-27.67v-78.75h48.16v85.95c0,2.69.93,4.99,2.82,6.87,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.87v-77.88c0-5.66-2.22-10.3-6.63-13.94-4.41-3.62-11.57-8.02-21.47-13.13-8.3-4.3-15.05-8.14-20.27-11.52-5.22-3.36-9.71-7.87-13.45-13.54-3.75-5.66-5.63-12.24-5.63-19.8V54.12c0-10.22,2.53-19.44,7.63-27.67,5.08-8.21,11.97-14.66,20.68-19.39,8.68-4.7,18.53-7.06,29.5-7.06s20.87,2.35,29.69,7.06c8.83,4.7,15.72,11.18,20.68,19.39,4.96,8.21,7.42,17.45,7.42,27.67v71.09h-48.16V46.92c0-2.69-.88-4.97-2.6-6.86-1.74-1.87-4.08-2.83-7.01-2.83-2.67,0-4.96.94-6.82,2.83-1.89,1.9-2.82,4.18-2.82,6.86v69.79c0,6.19,2.34,11.26,7.04,15.14,4.67,3.91,12.24,8.83,22.68,14.74,8.04,4.32,14.57,8.09,19.68,11.3,5.08,3.24,9.37,7.46,12.83,12.72,3.48,5.26,5.22,11.26,5.22,17.98v86.83c0,10.25-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.85,4.71-18.72,7.08-29.7,7.08s-20.8-2.35-29.5-7.08Z"
/>
<path
className="fill-green-primary dark:fill-yellow-terciary"
className="fill-yellow-tertiary"
d="M784.56,3.24h92.33v44.43h-44.15v88.85h39.38v39.62h-39.38v105.77h44.15v44.42h-92.33V3.24Z"
/>
<path
className="fill-green-primary dark:fill-yellow-terciary"
className="fill-yellow-tertiary"
d="M920.63,322.49c-5.63-4.18-10.11-10.1-13.45-17.76-3.34-7.68-5.01-16.49-5.01-26.45V53.71c0-9.96,2.53-19.06,7.63-27.26,5.08-8.21,12.05-14.66,20.87-19.39,8.83-4.7,18.6-7.06,29.32-7.06s20.54,2.35,29.5,7.06c8.97,4.7,15.91,11.18,20.87,19.39,4.96,8.21,7.42,17.3,7.42,27.26v94.51h-48.16V46.92c0-2.69-.88-4.97-2.6-6.86-1.74-1.87-4.08-2.83-7.01-2.83-2.67,0-4.96.94-6.82,2.83-1.89,1.9-2.82,4.18-2.82,6.86v231.36c0,2.69.93,4.99,2.82,6.87,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.87v-46.03h-11.64v-51.29h59.8v145.4h-48.16v-14.14c-2.96,5.4-6.82,9.48-11.64,12.31-4.82,2.83-10.83,4.25-18.06,4.25s-13.64-2.09-19.27-6.26l-.02-.02Z"
/>
<path
className="fill-green-primary dark:fill-yellow-terciary"
className="fill-yellow-tertiary"
d="M1053.27,25.05h-6.13l-.06-3.69h5.48c.83-.02,1.61-.15,2.33-.4.72-.27,1.3-.64,1.73-1.14.44-.51.65-1.14.65-1.87,0-.93-.16-1.67-.48-2.22-.3-.55-.83-.94-1.59-1.16-.74-.25-1.74-.37-3.01-.37h-3.78v20.42h-4.12V10.54h7.9c1.87,0,3.49.27,4.86.82,1.38.53,2.44,1.34,3.18,2.44.76,1.08,1.14,2.43,1.14,4.06,0,1.02-.24,1.93-.71,2.73-.47.8-1.17,1.49-2.1,2.07-.91.57-2.03,1.03-3.35,1.39-.06,0-.12.07-.2.2-.06.13-.11.2-.17.2-.32.19-.53.33-.63.43-.08.08-.16.12-.25.14-.08.02-.31.03-.68.03ZM1052.99,25.05l.6-2.81c2.95,0,4.97.64,6.05,1.93,1.08,1.27,1.62,2.89,1.62,4.86v1.53c0,.7.03,1.37.08,2.02.08.62.21,1.15.4,1.59v.45h-4.23c-.19-.49-.3-1.19-.34-2.1-.02-.91-.03-1.57-.03-1.99v-1.48c0-1.38-.31-2.39-.94-3.04s-1.69-.97-3.21-.97ZM1035.75,22.92c0,2.52.43,4.87,1.28,7.04.87,2.16,2.08,4.05,3.64,5.68,1.55,1.61,3.34,2.87,5.37,3.78,2.05.89,4.22,1.33,6.53,1.33s4.51-.44,6.53-1.33c2.03-.91,3.8-2.17,5.34-3.78,1.53-1.63,2.74-3.52,3.61-5.68.87-2.18,1.31-4.52,1.31-7.04s-.44-4.86-1.31-7.01c-.87-2.16-2.07-4.04-3.61-5.65-1.53-1.61-3.31-2.86-5.34-3.75-2.03-.91-4.2-1.36-6.53-1.36s-4.49.45-6.53,1.36c-2.03.89-3.81,2.14-5.37,3.75-1.55,1.61-2.77,3.49-3.64,5.65-.85,2.16-1.28,4.5-1.28,7.01ZM1032.4,22.92c0-3.01.52-5.8,1.56-8.38,1.04-2.57,2.49-4.82,4.34-6.73,1.86-1.93,4-3.43,6.42-4.49,2.44-1.08,5.06-1.62,7.84-1.62s5.39.54,7.81,1.62c2.44,1.06,4.58,2.56,6.42,4.49,1.86,1.91,3.31,4.16,4.35,6.73,1.06,2.57,1.59,5.37,1.59,8.38s-.53,5.8-1.59,8.38c-1.04,2.57-2.49,4.84-4.35,6.79-1.83,1.93-3.97,3.44-6.42,4.52-2.42,1.08-5.03,1.62-7.81,1.62s-5.39-.54-7.84-1.62c-2.42-1.08-4.56-2.58-6.42-4.52-1.85-1.95-3.3-4.21-4.34-6.79-1.04-2.57-1.56-5.37-1.56-8.38Z"
/>
</g>

29
eduseg/src/components/Welcome.astro
View File

@@ -1,29 +0,0 @@
---
import { Bookmark } from "./Bookmark";
---
<div><Bookmark className="h-96" /></div>
<div
class="rounded-2xl p-6 xl:p-18 bg-linear-to-tr from-green-secondary to-yellow-primary"
>
<div class="lg:grid grid-cols-2 gap-6">
<div class="space-y-2.5">
<h1 class="text-4xl font-medium">
Garanta a capacitação para sua empresa
</h1>
<p>
Junte-se a milhares de profissionais capacitados e preparados
para agir com segurança e eficiência. Garanta um ambiente mais
seguro com uma certificação reconhecida.
</p>
</div>
<div class="">...</div>
</div>
<div
class="text-white bg-green-primary border border-white rounded-2xl p-5"
>
...
</div>
</div>

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

@@ -1,5 +1,7 @@
---
import "../styles/app.css";
import { Regular as Logo } from "@components/Logo";
import { Container } from "@components/Container";
---
<!doctype html>
@@ -11,9 +13,25 @@ import "../styles/app.css";
<meta name="generator" content={Astro.generator} />
<title>EDUSEG&reg;</title>
</head>
<body>
<div class="max-w-7xl mx-auto px-2.5 space-y-2.5 lg:space-y-5">
<nav class="bg-green-primary sticky top-0">
<Container className="flex items-center py-5 max-lg:px-5">
<Logo className="h-8" />
</Container>
</nav>
<slot />
<footer class="bg-green-primary p-5 lg:py-10">
<Container>
<div class="space-y-1">
<Logo className="h-8" />
<p class="text-sm text-green-tertiary leading-4">
Educação que garante<br />sua segurança.
</p>
</div>
</Container>
</footer>
</body>
</html>

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

@@ -1,16 +1,63 @@
---
import Welcome from "../components/Welcome.astro";
import { Regular } from "../components/Logo.jsx";
import Layout from "../layouts/Layout.astro";
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
import { Bookmark } from "@components/Bookmark";
import { Card } from "@components/Card";
import { Container } from "@components/Container";
import { Form } from "@components/Form";
import Layout from "@layouts/Layout.astro";
---
<Layout>
<div class="mt-2.5 lg:mt-5">
<Regular className="w-46" />
<Container className="lg:space-y-5">
<div class="max-lg:p-5">
<Bookmark className="h-96" />
</div>
<Card>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
quis mattis tortor, sit amet mollis lorem. In imperdiet, ante
sit amet maximus dictum, est elit ultrices lacus, in placerat
ante risus vel massa. Maecenas porta purus non feugiat
venenatis. Sed tempus quam id commodo interdum. Aliquam id
ullamcorper diam. Morbi a porttitor tellus. Fusce viverra
euismod laoreet. Cras id sapien quis orci rutrum lacinia. Donec
vitae libero at felis auctor blandit commodo sed libero. Aliquam
tellus risus, sagittis a libero eget, hendrerit feugiat mauris.
Ut vehicula id est non iaculis. Suspendisse potenti. Maecenas in
tellus risus. Proin quis libero et ero s ullamcorper faucibus
non vitae lacus. Vestibulum at ultricies sem, vel euismod dolor.
</p><p>
In tempor vel felis ut imperdiet. Pellentesque ac vulputate
lorem, id pellentesque velit. Sed rutrum, nisi vel convallis
rhoncus, ex mi vulputate leo, id hendrerit ipsum sapien in
dolor. Nullam auctor eu nunc sed euismod. Donec molestie velit
nec est bibendum pulvinar. Nullam mattis mollis neque, nec
cursus mi iaculis et. Morbi tempus purus sit amet orci pulvinar
accumsan. Fusce mattis, nisl ac fringilla euismod, orci odio
condimentum sapien, a convallis lacus diam et libero. Nunc non
urna a orci eleifend porttitor in eget nisi. Ut scelerisque
egestas hendrerit. Aenean in tortor cursus, lobortis dolor
iaculis, dignissim velit. Nulla facilisi.
</p>
</Card>
<Welcome />
<Card color="darker">
<p>
In tempor vel felis ut imperdiet. Pellentesque ac vulputate
lorem, id pellentesque velit. Sed rutrum, nisi vel convallis
rhoncus, ex mi vulputate leo, id hendrerit ipsum sapien in
dolor. Nullam auctor eu nunc sed euismod. Donec molestie velit
nec est bibendum pulvinar. Nullam mattis mollis neque, nec
cursus mi iaculis et. Morbi tempus purus sit amet orci pulvinar
accumsan. Fusce mattis, nisl ac fringilla euismod, orci odio
condimentum sapien, a convallis lacus diam et libero. Nunc non
urna a orci eleifend porttitor in eget nisi. Ut scelerisque
egestas hendrerit. Aenean in tortor cursus, lobortis dolor
iaculis, dignissim velit. Nulla facilisi.
</p>
</Card>
<Card color="yellow">
<Form client:load />
</Card>
</Container>
</Layout>

4
eduseg/src/styles/app.css
View File

@@ -7,11 +7,11 @@
--color-yellow-primary: #ffcf82;
--color-yellow-secondary: #f2ebe1;
--color-yellow-terciary: #f9f7e8;
--color-yellow-tertiary: #f9f7e8;
--color-green-primary: #2e3524;
--color-green-secondary: #8cd366;
--color-green-terciary: #83926d;
--color-green-tertiary: #83926d;
--color-green-support: #c9fcad;
--color-green-pastel: #f9fff6;
--color-green-light: #cad9b4;

16
eduseg/tsconfig.json
View File

@@ -1,14 +1,14 @@
{
"extends": "astro/tsconfigs/strict",
"include": [
".astro/types.d.ts",
"**/*"
],
"exclude": [
"dist"
],
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"],
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
"jsxImportSource": "react",
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"]
}
}
}