refactor: update styling and layout for Input, Textarea, ChiSiamo, and Contatto components
This commit is contained in:
parent
4ec060c14d
commit
b5dcb5e8e1
4 changed files with 34 additions and 48 deletions
|
|
@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||||
type={type}
|
type={type}
|
||||||
{...props}
|
{...props}
|
||||||
className={cn(
|
className={cn(
|
||||||
`w-full rounded-lg border border-border bg-background px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50`,
|
`w-full rounded-lg border border-border bg-background px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50`,
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||||
return (
|
return (
|
||||||
<textarea
|
<textarea
|
||||||
className={cn(
|
className={cn(
|
||||||
`flex min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 shadow-sm outline-hidden transition-all duration-200 hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-500 dark:focus:border-transparent dark:hover:border-neutral-400 dark:placeholder:text-neutral-400`,
|
`flex min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 shadow-sm outline-hidden transition-all duration-200 hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50 dark:placeholder:text-neutral-400`,
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
|
|
||||||
|
|
@ -12,54 +12,40 @@ const ChiSiamo: NextPage = () => {
|
||||||
<title>{t.heads.chi_siamo_titolo}</title>
|
<title>{t.heads.chi_siamo_titolo}</title>
|
||||||
<meta content={t.heads.main_description} name="description" />
|
<meta content={t.heads.main_description} name="description" />
|
||||||
</Head>
|
</Head>
|
||||||
<main className="mx-auto w-full max-w-8xl space-y-5 px-2 py-5 md:px-8">
|
<main className="mx-auto w-full max-w-8xl space-y-5 px-4 py-5 md:px-8">
|
||||||
<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
|
<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
|
||||||
{t.chi_siamo.title}
|
{t.chi_siamo.title}
|
||||||
</Badge>
|
</Badge>
|
||||||
<div className="mx-auto w-full max-w-6xl space-y-5 sm:space-y-14">
|
<div className="mx-auto grid w-full max-w-6xl grid-flow-row grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
|
||||||
<section className="relative mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
|
<Image
|
||||||
<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
|
alt="Ufficio"
|
||||||
<Image
|
className="w-full rounded-lg object-cover"
|
||||||
alt=""
|
height={1050}
|
||||||
className="w-full rounded-md object-cover"
|
src="/ufficio.webp"
|
||||||
height={1050}
|
width={1400}
|
||||||
src="/ufficio.webp"
|
/>
|
||||||
width={1400}
|
<div className="flex w-full flex-1 flex-col items-center justify-center rounded-lg bg-neutral-200 p-4 sm:mx-auto sm:text-center md:max-w-max md:text-left dark:bg-neutral-800">
|
||||||
/>
|
<h3 className="font-semibold text-3xl text-foreground md:text-4xl">
|
||||||
</div>
|
{t.chi_siamo.cta.title1}
|
||||||
<div className="max-w-lg flex-1 py-5 sm:mx-auto sm:text-center md:max-w-max md:text-left">
|
<span className="text-indigo-600">{t.chi_siamo.cta.title2}</span>
|
||||||
<h3 className="font-semibold text-3xl text-gray-800 md:text-4xl">
|
</h3>
|
||||||
{t.chi_siamo.cta.title1}
|
<p className="mt-3 leading-relaxed">{t.chi_siamo.cta.desc}</p>
|
||||||
<span className="text-indigo-600">
|
|
||||||
{t.chi_siamo.cta.title2}
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
<p className="mt-3 text-gray-500 leading-relaxed">
|
|
||||||
{t.chi_siamo.cta.desc}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="flex w-full flex-col gap-8">
|
|
||||||
<div className="flex flex-col gap-8 sm:flex-row sm:items-stretch sm:justify-between">
|
|
||||||
<div className="w-full basis-1/2 space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
|
|
||||||
<h3 className="font-bold text-xl">{t.chi_siamo.mission}</h3>
|
|
||||||
<p>{t.chi_siamo.mission_desc}</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-full basis-1/2 space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
|
|
||||||
<h3 className="font-bold text-xl">{t.chi_siamo.vision}</h3>
|
|
||||||
<p>{t.chi_siamo.vision_desc}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
|
|
||||||
<h3 className="font-bold text-xl">{t.chi_siamo.progetto}</h3>
|
|
||||||
<p>{t.chi_siamo.progetto_desc}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 dark:bg-neutral-800">
|
||||||
<section className="text-center">
|
<h3 className="font-bold text-xl">{t.chi_siamo.mission}</h3>
|
||||||
|
<p>{t.chi_siamo.mission_desc}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 dark:bg-neutral-800">
|
||||||
|
<h3 className="font-bold text-xl">{t.chi_siamo.vision}</h3>
|
||||||
|
<p>{t.chi_siamo.vision_desc}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 sm:col-span-2 dark:bg-neutral-800">
|
||||||
|
<h3 className="font-bold text-xl">{t.chi_siamo.progetto}</h3>
|
||||||
|
<p>{t.chi_siamo.progetto_desc}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 text-center sm:col-span-2">
|
||||||
<p className="text-lg">{t.chi_siamo.indirizzo}</p>
|
<p className="text-lg">{t.chi_siamo.indirizzo}</p>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@ const Contatto: NextPage = () => {
|
||||||
{t.contatti}
|
{t.contatti}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|
||||||
<div className="mx-auto max-w-screen-xl px-4 md:px-8">
|
<div className="mx-auto max-w-7xl px-4 md:px-8">
|
||||||
<div className="mx-auto max-w-lg space-y-3 sm:text-center">
|
<div className="mx-auto max-w-lg space-y-3 sm:text-center">
|
||||||
<p className="font-semibold text-4xl text-accent-foreground">
|
<p className="font-semibold text-4xl text-accent-foreground">
|
||||||
{t.contact_form.titolo}
|
{t.contact_form.titolo}
|
||||||
|
|
@ -185,7 +185,7 @@ const Contatto: NextPage = () => {
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</div>
|
</div>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Textarea className="min-h-[150px]" {...field} />
|
<Textarea className="min-h-37.5" {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -202,7 +202,7 @@ const Contatto: NextPage = () => {
|
||||||
|
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={field.value}
|
defaultChecked={field.value}
|
||||||
id="checkbox"
|
id="checkbox"
|
||||||
onCheckedChange={field.onChange}
|
onCheckedChange={field.onChange}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue