This commit is contained in:
2025-03-21 21:11:48 -03:00
parent 59635bf5d2
commit f14bd6b814
26 changed files with 106 additions and 69 deletions

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

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

View File

@@ -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,
});
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}