From bfc111409037c80f9b39f1fb42fc1b9fa5277d17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?= Date: Sun, 16 Mar 2025 17:11:17 -0300 Subject: [PATCH] add nav and footer --- eduseg/package-lock.json | 28 ++++++++++++ eduseg/package.json | 3 ++ eduseg/src/components/Card.tsx | 27 ++++++++++++ eduseg/src/components/Container.tsx | 10 +++++ eduseg/src/components/Form.tsx | 42 ++++++++++++++++++ eduseg/src/components/Logo.jsx | 14 +++--- eduseg/src/components/Welcome.astro | 29 ------------- eduseg/src/layouts/Layout.astro | 24 +++++++++-- eduseg/src/pages/index.astro | 67 ++++++++++++++++++++++++----- eduseg/src/styles/app.css | 4 +- eduseg/tsconfig.json | 18 ++++---- 11 files changed, 206 insertions(+), 60 deletions(-) create mode 100644 eduseg/src/components/Card.tsx create mode 100644 eduseg/src/components/Container.tsx create mode 100644 eduseg/src/components/Form.tsx delete mode 100644 eduseg/src/components/Welcome.astro diff --git a/eduseg/package-lock.json b/eduseg/package-lock.json index 8376113..9d5ef9c 100644 --- a/eduseg/package-lock.json +++ b/eduseg/package-lock.json @@ -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", diff --git a/eduseg/package.json b/eduseg/package.json index ea3bd12..9cfb56b 100644 --- a/eduseg/package.json +++ b/eduseg/package.json @@ -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" } } diff --git a/eduseg/src/components/Card.tsx b/eduseg/src/components/Card.tsx new file mode 100644 index 0000000..ea39a00 --- /dev/null +++ b/eduseg/src/components/Card.tsx @@ -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 ( +
+ {children} +
+ ); +} diff --git a/eduseg/src/components/Container.tsx b/eduseg/src/components/Container.tsx new file mode 100644 index 0000000..b70f5d2 --- /dev/null +++ b/eduseg/src/components/Container.tsx @@ -0,0 +1,10 @@ +import clsx from "clsx"; + +interface ContainerProps { + children: React.ReactNode; + className?: string | null; +} + +export function Container({ children, className }: ContainerProps) { + return
{children}
; +} diff --git a/eduseg/src/components/Form.tsx b/eduseg/src/components/Form.tsx new file mode 100644 index 0000000..49c78c9 --- /dev/null +++ b/eduseg/src/components/Form.tsx @@ -0,0 +1,42 @@ +import { useForm } from "react-hook-form"; + +interface IFormInput { + name: string; + email: string; +} + +export function Form() { + const { register, handleSubmit } = useForm(); + + const onSubmit = async (data: IFormInput) => { + console.log(data); + }; + + return ( +
+ + + +
+ ); +} + +export function Input({ ...props }) { + return ( + + ); +} diff --git a/eduseg/src/components/Logo.jsx b/eduseg/src/components/Logo.jsx index fa72930..740394a 100644 --- a/eduseg/src/components/Logo.jsx +++ b/eduseg/src/components/Logo.jsx @@ -30,31 +30,31 @@ export function Regular(props) { diff --git a/eduseg/src/components/Welcome.astro b/eduseg/src/components/Welcome.astro deleted file mode 100644 index bc3d923..0000000 --- a/eduseg/src/components/Welcome.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -import { Bookmark } from "./Bookmark"; ---- - -
- -
-
-
-

- Garanta a capacitação para sua empresa -

-

- 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. -

-
-
...
-
- -
- ... -
-
diff --git a/eduseg/src/layouts/Layout.astro b/eduseg/src/layouts/Layout.astro index 8d66a27..90ab9a6 100644 --- a/eduseg/src/layouts/Layout.astro +++ b/eduseg/src/layouts/Layout.astro @@ -1,5 +1,7 @@ --- import "../styles/app.css"; +import { Regular as Logo } from "@components/Logo"; +import { Container } from "@components/Container"; --- @@ -11,9 +13,25 @@ import "../styles/app.css"; EDUSEG® + -
- -
+ + + + +
+ +
+ +

+ Educação que garante
sua segurança. +

+
+ +
diff --git a/eduseg/src/pages/index.astro b/eduseg/src/pages/index.astro index 9b47607..c20b13b 100644 --- a/eduseg/src/pages/index.astro +++ b/eduseg/src/pages/index.astro @@ -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"; --- -
- -
+ +
+ +
+ +

+ 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. +

+ 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. +

+ - + +

+ 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. +

+ + + +
+ + diff --git a/eduseg/src/styles/app.css b/eduseg/src/styles/app.css index bc9d7cb..5f02aad 100644 --- a/eduseg/src/styles/app.css +++ b/eduseg/src/styles/app.css @@ -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; diff --git a/eduseg/tsconfig.json b/eduseg/tsconfig.json index 69c1600..88a0116 100644 --- a/eduseg/tsconfig.json +++ b/eduseg/tsconfig.json @@ -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/*"] + } } -} \ No newline at end of file +}