move dir

2025-03-21 21:11:48 -03:00
parent 59635bf5d2
commit f14bd6b814
26 changed files with 106 additions and 69 deletions
--- a/superpage/.gitignore
+++ b/superpage/.gitignore
@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
--- a/superpage/.vscode/extensions.json
+++ b/superpage/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/superpage/.vscode/launch.json
+++ b/superpage/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/superpage/README.md
+++ b/superpage/README.md
@@ -0,0 +1,48 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
--- a/superpage/astro.config.mjs
+++ b/superpage/astro.config.mjs
@@ -0,0 +1,14 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import react from '@astrojs/react';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()],
+
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});
--- a/superpage/package-lock.json
+++ b/superpage/package-lock.json
--- a/superpage/package.json
+++ b/superpage/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "eduseg",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.2.1",
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "@tailwindcss/vite": "^4.0.13",
+    "@tanstack/react-query": "^5.68.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "astro": "^5.4.3",
+    "axios": "^1.8.3",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "tailwindcss": "^4.0.13"
+  }
+}
--- a/superpage/public/favicon.svg
+++ b/superpage/public/favicon.svg
@@ -0,0 +1,8 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.54126" width="40" height="40" rx="8" fill="#2E3524"/>
+    <path d="M30.1297 34.3155L21.0128 30.2083C20.7628 30.0489 20.4441 30.0489 20.1941 30.2083L11.0773 34.3155C10.5705 34.6388 9.90771 34.2754 9.90771 33.6745V6.59115C9.90771 6.17148 10.2483 5.83093 10.6679 5.83093H30.539C30.9587 5.83093 31.2992 6.17148 31.2992 6.59115V33.6745C31.2992 34.2754 30.6353 34.6388 30.1297 34.3155Z" fill="#8CD366"/>
+    <path d="M22.3944 15.2321H13.4438V17.9107H22.3944V15.2321Z" fill="#2E3524"/>
+    <path d="M24.1843 20.1695H13.4438V23.731H24.1843V20.1695Z" fill="#2E3524"/>
+    <path d="M24.1843 9.41989H13.4438V12.9813H24.1843V9.41989Z" fill="#2E3524"/>
+    <path d="M27.7643 22.836C27.7643 22.3418 27.3636 21.9411 26.8693 21.9411C26.375 21.9411 25.9744 22.3418 25.9744 22.836C25.9744 23.3303 26.375 23.731 26.8693 23.731C27.3636 23.731 27.7643 23.3303 27.7643 22.836Z" fill="#2E3524"/>
+</svg>
--- a/superpage/src/assets/astro.svg
+++ b/superpage/src/assets/astro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>
--- a/superpage/src/assets/background.svg
+++ b/superpage/src/assets/background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
--- a/superpage/src/components/Bookmark.jsx
+++ b/superpage/src/components/Bookmark.jsx
@@ -0,0 +1,29 @@
+export function Bookmark(props) {
+  return (
+    <svg
+      viewBox="0 0 368 492"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M347.855 489.218L191.347 418.671C187.077 415.933 181.603 415.933 177.278 418.671L20.7705 489.218C12.0665 494.75 0.680176 488.506 0.680176 478.209V13.0816C0.734918 5.85162 6.59233 -0.0090332 13.8183 -0.0090332H354.917C362.143 -0.0090332 368 5.85162 368 13.0816V478.209C368 488.506 356.614 494.75 347.91 489.218H347.855Z"
+        fill="url(#paint0_linear_1145_4906)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1145_4906"
+          x1="326.947"
+          y1="66.4597"
+          x2="-0.94168"
+          y2="306.46"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFCF82" />
+          <stop offset="0.483794" stop-color="#C7D174" />
+          <stop offset="1" stop-color="#8CD366" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
--- a/superpage/src/components/Card.tsx
+++ b/superpage/src/components/Card.tsx
@@ -0,0 +1,30 @@
+import clsx from "clsx";
+
+interface CardProps {
+  children: React.ReactNode;
+  color?: "gradient" | "darker" | "yellow" | "zinc";
+  className?: string | undefined;
+}
+
+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: "text-green-primary bg-yellow-tertiary",
+    zinc: "text-white bg-zinc-900",
+  };
+
+  return (
+    <div
+      className={clsx(
+        "lg:rounded-2xl",
+        "lg:drop-shadow-sm",
+        "p-3 lg:p-12",
+        colorVariants[color],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
--- a/superpage/src/components/Container.tsx
+++ b/superpage/src/components/Container.tsx
@@ -0,0 +1,10 @@
+import clsx from "clsx";
+
+interface ContainerProps {
+  children: React.ReactNode;
+  className?: string | undefined;
+}
+
+export function Container({ children, className }: ContainerProps) {
+  return <div className={clsx("max-w-7xl mx-auto", className)}>{children}</div>;
+}
--- a/superpage/src/components/Form.tsx
+++ b/superpage/src/components/Form.tsx
@@ -0,0 +1,80 @@
+import { useForm } from "react-hook-form";
+import { useMutation } from "node_modules/@tanstack/react-query/build/legacy";
+import { queryClient } from "../queryClient";
+import axios from "axios";
+import { createElement } from "react";
+import clsx from "clsx";
+
+interface IFormInput {
+  name: string;
+  email: string;
+  message: string;
+}
+
+export function Form() {
+  const { register, handleSubmit, reset, formState } = useForm<IFormInput>();
+  const { mutateAsync } = useMutation(
+    {
+      mutationFn: async (data: IFormInput) => {
+        return await axios.post("https://n8n.sergio.run/webhook/eduseg", data);
+      },
+      onSuccess: () => {
+        reset();
+      },
+    },
+    queryClient,
+  );
+
+  const onSubmit = async (data: IFormInput) => {
+    await mutateAsync(data);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex flex-col gap-3 lg:gap-6"
+    >
+      {formState.isSubmitSuccessful && (
+        <p className="bg-green-700 text-white p-3 rounded-lg">OK!</p>
+      )}
+
+      <div className="grid lg:grid-cols-2 gap-3 lg:gap-6">
+        <label>
+          Nome
+          <Input {...register("name")} />
+        </label>
+        <label>
+          Email
+          <Input {...register("email")} />
+        </label>
+      </div>
+
+      <label>
+        Mensagem
+        <Input as="textarea" className="h-26" {...register("message")} />
+      </label>
+
+      <button
+        type="submit"
+        className="font-medium bg-green-secondary hover:text-black hover:bg-green-support p-3 rounded-lg transition cursor-pointer h-12"
+      >
+        Quero um orçamento
+      </button>
+    </form>
+  );
+}
+
+interface IInput extends React.HTMLAttributes<HTMLElement> {
+  as?: string;
+  className?: string | undefined;
+}
+
+export function Input({ as = "input", className, ...props }: IInput) {
+  return createElement(as, {
+    className: clsx(
+      "border border-transparent focus:border-green-secondary focus:ring ring-green-secondary text-white bg-black p-3 rounded-lg w-full outline-none",
+      className,
+    ),
+    ...props,
+  });
+}
--- a/superpage/src/components/Logo.jsx
+++ b/superpage/src/components/Logo.jsx
@@ -0,0 +1,99 @@
+export function Regular(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1072.73 329.6"
+      {...props}
+    >
+      <g>
+        <g>
+          <path
+            className="fill-green-secondary"
+            d="M152.18,217.62l-68.61-30.91c-1.88-1.2-4.28-1.2-6.16,0l-68.61,30.91c-3.81,2.43-8.8-.3-8.8-4.82V8.98C0,5.82,2.56,3.26,5.72,3.26h149.54c3.16,0,5.72,2.56,5.72,5.72v203.81c0,4.52-5,7.26-8.8,4.82Z"
+          />
+          <path
+            className="fill-green-primary"
+            d="M93.97,74.01H26.61v20.16h67.36v-20.16Z"
+          />
+          <path
+            className="fill-green-primary"
+            d="M107.44,111.16H26.61v26.8h80.83v-26.8Z"
+          />
+          <path
+            className="fill-green-primary"
+            d="M107.44,30.27H26.61v26.8h80.83v-26.8Z"
+          />
+          <path
+            className="fill-green-primary"
+            d="M134.38,131.23c0-3.72-3.02-6.73-6.73-6.73s-6.73,3.02-6.73,6.73,3.02,6.73,6.73,6.73,6.73-3.02,6.73-6.73Z"
+          />
+        </g>
+        <g>
+          <path
+            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-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-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-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-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-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-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>
+      </g>
+    </svg>
+  );
+}
+
+export function Smallest(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 206.66 276.36"
+      {...props}
+    >
+      <g>
+        <path
+          className="fill-green-secondary"
+          d="M195.36,275.19l-88.08-39.68c-2.41-1.54-5.49-1.54-7.91,0l-88.08,39.68c-4.9,3.12-11.3-.39-11.3-6.19V7.34C0,3.29,3.29,0,7.34,0h191.97c4.05,0,7.34,3.29,7.34,7.34v261.65c0,5.8-6.41,9.32-11.3,6.19Z"
+        />
+        <g>
+          <path
+            className="fill-green-primary"
+            d="M120.63,90.83H34.16v25.88h86.47v-25.88Z"
+          />
+          <path
+            className="fill-green-primary"
+            d="M137.93,138.53H34.16v34.41h103.76v-34.41Z"
+          />
+          <path
+            className="fill-green-primary"
+            d="M137.93,34.67H34.16v34.41h103.76v-34.41Z"
+          />
+          <path
+            className="fill-green-primary"
+            d="M172.51,164.29c0-4.78-3.87-8.65-8.65-8.65s-8.65,3.87-8.65,8.65,3.87,8.65,8.65,8.65,8.65-3.87,8.65-8.65Z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
--- a/superpage/src/components/Select.jsx
+++ b/superpage/src/components/Select.jsx
@@ -0,0 +1,54 @@
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
+import { useState } from "react";
+
+const people = [
+  { id: 1, name: "8 horas" },
+  { id: 2, name: "40 horas" },
+];
+
+export function Select() {
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(people[1]);
+
+  const filteredPeople =
+    query === ""
+      ? people
+      : people.filter((person) => {
+          return person.name.toLowerCase().includes(query.toLowerCase());
+        });
+
+  return (
+    <Combobox
+      value={selected}
+      onChange={(value) => setSelected(value)}
+      onClose={() => setQuery("")}
+    >
+      <div className="relative">
+        <ComboboxInput
+          displayValue={(person) => person?.name}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <ComboboxButton className="group absolute inset-y-0 right-0 px-2.5">
+          <ChevronDownIcon className="size-4 fill-white/60 group-data-[hover]:fill-white" />
+        </ComboboxButton>
+      </div>
+
+      <ComboboxOptions anchor="bottom" transition className="bg-black w-42">
+        {filteredPeople.map((person) => (
+          <ComboboxOption key={person.id} value={person}>
+            <CheckIcon className="invisible size-4 fill-white group-data-[selected]:visible" />
+            <div className="text-sm/6 text-white">{person.name}</div>
+          </ComboboxOption>
+        ))}
+      </ComboboxOptions>
+    </Combobox>
+  );
+}
--- a/superpage/src/layouts/Layout.astro
+++ b/superpage/src/layouts/Layout.astro
@@ -0,0 +1,82 @@
+---
+import "../styles/app.css";
+import { Regular as Logo } from "@components/Logo";
+import { Container } from "@components/Container";
+import { Select } from "@components/Select";
+import {
+    ArrowLeftStartOnRectangleIcon,
+    AcademicCapIcon,
+} from "@heroicons/react/24/solid";
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="generator" content={Astro.generator} />
+        <title>EDUSEG&reg; &mdash; Educação que garante sua segurança</title>
+    </head>
+
+    <body>
+        <Container className="flex items-center p-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>
+            </div>
+        </Container>
+
+        <section class="bg-lime-400 sticky top-0 z-10">
+            <Container className="flex items-center p-3">
+                <div class="flex gap-1.5 lg:gap-3 items-center">
+                    <div class="bg-black p-1.5 lg:p-3 rounded-lg lg:rounded-xl">
+                        <AcademicCapIcon className="w-5 fill-lime-400" />
+                    </div>
+
+                    <div class="flex gap-1.5">
+                        <div class="text-black truncate max-lg:max-w-36">
+                            NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
+                        </div>
+                        <!-- <Select client:load /> -->
+                    </div>
+                </div>
+
+                <div class="ml-auto">
+                    <button
+                        class="bg-black p-2.5 rounded-md cursor-pointer text-sm"
+                    >
+                        Comprar R$149,00
+                    </button>
+                </div>
+            </Container>
+        </section>
+
+        <slot />
+
+        <footer class="bg-stone-900 p-3 lg:py-10">
+            <Container className="space-y-5">
+                <div class="space-y-1">
+                    <Logo className="h-10" />
+                    <p class="text-sm text-green-tertiary leading-4">
+                        Educação que garante<br />sua segurança.
+                    </p>
+                </div>
+
+                <div class="space-y-1">
+                    <h6 class="text-xl">Cursos</h6>
+                    <ul>
+                        <li>Lei Lucas</li>
+                        <li>NR-18 PEMT Plataforma Móvel de Trabalho Aéreo</li>
+                        <li>NR-35 Trabalho em Altura</li>
+                        <li>NR-10 Básico</li>
+                    </ul>
+                </div>
+            </Container>
+        </footer>
+    </body>
+</html>
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -0,0 +1,77 @@
+---
+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>
+    <Container className="lg:space-y-5 lg:p-3">
+        <!-- <div class="max-lg:px-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>
+
+        <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>
+
+        <section class="grid lg:grid-cols-2 gap-6 p-3">
+            <div class="flex items-center justify-center">
+                <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
+                            class="max-lg:hidden"
+                        />
+                        Fale com nossa equipe e receba uma proposta personalizada.
+                    </p>
+                </div>
+            </div>
+
+            <Card color="zinc" className="rounded-xl p-4">
+                <Form client:load />
+            </Card>
+        </section>
+    </Container>
+</Layout>
--- a/superpage/src/queryClient.js
+++ b/superpage/src/queryClient.js
@@ -0,0 +1,3 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();
--- a/superpage/src/styles/app.css
+++ b/superpage/src/styles/app.css
@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+@theme {
+    --font-sans:
+        "Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+    --color-yellow-primary: #ffcf82;
+    --color-yellow-secondary: #f2ebe1;
+    --color-yellow-tertiary: #f9f7e8;
+
+    --color-green-primary: #2e3524;
+    --color-green-secondary: #8cd366;
+    --color-green-tertiary: #83926d;
+    --color-green-support: #c9fcad;
+    --color-green-pastel: #f9fff6;
+    --color-green-light: #cad9b4;
+    --color-green-dark: #4e8630;
+}
+
+html,
+body {
+    @apply text-white bg-black;
+}
--- a/superpage/tsconfig.json
+++ b/superpage/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@layouts/*": ["src/layouts/*"]
+    }
+  }
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>