form black

This commit is contained in:
2025-03-18 23:07:37 -03:00
parent bc8a763112
commit bc8b9805e3
4 changed files with 14 additions and 12 deletions

View File

@@ -2,7 +2,7 @@ import clsx from "clsx";
interface CardProps {
children: React.ReactNode;
color?: "gradient" | "darker" | "yellow";
color?: "gradient" | "darker" | "yellow" | "zinc";
className?: string | undefined;
}
@@ -11,13 +11,15 @@ export function Card({ children, color = "gradient", className }: CardProps) {
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 p-3 xl:p-10",
"lg:rounded-2xl",
"lg:drop-shadow-sm",
"p-3 lg:p-12",
colorVariants[color],
className,
)}

View File

@@ -35,10 +35,10 @@ export function Form() {
className="flex flex-col gap-3 lg:gap-6"
>
{formState.isSubmitSuccessful && (
<p className="bg-green-700 text-white p-2.5 rounded-lg">OK!</p>
<p className="bg-green-700 text-white p-3 rounded-lg">OK!</p>
)}
<div className="grid lg:grid-cols-2 gap-2.5 lg:gap-5">
<div className="grid lg:grid-cols-2 gap-3 lg:gap-6">
<label>
Nome
<Input {...register("name")} />
@@ -56,7 +56,7 @@ export function Form() {
<button
type="submit"
className="font-medium bg-green-secondary hover:bg-green-support p-2.5 rounded-lg transition cursor-pointer h-12"
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>
@@ -72,7 +72,7 @@ interface IInput extends React.HTMLAttributes<HTMLElement> {
export function Input({ as = "input", className, ...props }: IInput) {
return createElement(as, {
className: clsx(
"border border-gray-300 focus:border-green-secondary focus:ring ring-green-secondary bg-white p-2.5 rounded-lg w-full outline-none",
"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

@@ -20,7 +20,7 @@ import {
</head>
<body>
<Container className="flex items-center py-3 max-lg:px-3">
<Container className="flex items-center p-3">
<Logo className="h-8" />
<div class="ml-auto">
@@ -32,7 +32,7 @@ import {
</Container>
<section class="bg-lime-400 sticky top-0 z-10">
<Container className="flex items-center py-3 max-lg:px-3">
<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" />
@@ -42,7 +42,7 @@ import {
<div class="text-black truncate max-lg:max-w-36">
NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
</div>
<Select client:load />
<!-- <Select client:load /> -->
</div>
</div>
@@ -58,7 +58,7 @@ import {
<slot />
<footer class="bg-stone-900 py-3 lg:py-10 max-lg:px-3">
<footer class="bg-stone-900 p-3 lg:py-10">
<Container className="space-y-5">
<div class="space-y-1">
<Logo className="h-10" />

View File

@@ -7,7 +7,7 @@ import Layout from "@layouts/Layout.astro";
---
<Layout>
<Container className="lg:space-y-5">
<Container className="lg:space-y-5 lg:p-3">
<!-- <div class="max-lg:px-5">
<Bookmark className="h-96" />
</div> -->
@@ -69,7 +69,7 @@ import Layout from "@layouts/Layout.astro";
</div>
</div>
<Card color="yellow" className="rounded-xl p-4">
<Card color="zinc" className="rounded-xl p-4">
<Form client:load />
</Card>
</section>