add nav and footer

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",

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"
   }
 }

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 (
+    <div
+      className={clsx(
+        "lg:rounded-2xl p-5 xl:p-10",
+        colorVariants[color],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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 <div className={clsx("max-w-7xl mx-auto", className)}>{children}</div>;
+}

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<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}
+    />
+  );
+}

eduseg/src/components/Logo.jsx

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

eduseg/src/components/Welcome.astro

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

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";
 ---
 
 <!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>

eduseg/src/pages/index.astro

@@ -1,16 +1,63 @@
 ---
-import Welcome from "../components/Welcome.astro";
+import { Bookmark } from "@components/Bookmark";
-import { Regular } from "../components/Logo.jsx";
+import { Card } from "@components/Card";
-import Layout from "../layouts/Layout.astro";
+import { Container } from "@components/Container";
-
+import { Form } from "@components/Form";
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
+import Layout from "@layouts/Layout.astro";
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
 ---
 
 <Layout>
-    <div class="mt-2.5 lg:mt-5">
+    <Container className="lg:space-y-5">
-        <Regular className="w-46" />
+        <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>

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;

eduseg/tsconfig.json

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