fix: restore white form surfaces
This commit is contained in:
parent
80d423a829
commit
07d68cf3bc
GPG key ID:
C2720CF8CD701894
5 changed files with 21 additions and 21 deletions
|
|
@ -38,8 +38,8 @@ export function ContactPage() {
|
|||
</PublicSurface>
|
||||
|
||||
<aside className="space-y-5">
|
||||
<Card className="overflow-hidden rounded-[2rem] border-border/70 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
|
||||
<CardContent className="bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.98))] p-6">
|
||||
<Card className="overflow-hidden rounded-[2rem] border-border/70 bg-background shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
|
||||
<CardContent className="bg-background p-6">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">Direct Options</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-foreground">Reach the team directly</h2>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
||||
|
|
@ -47,7 +47,7 @@ export function ContactPage() {
|
|||
</p>
|
||||
|
||||
<div className="mt-6 space-y-4">
|
||||
<a href={businessConfig.publicCallUrl} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background/85 px-4 py-4 transition hover:border-primary/35 hover:bg-primary/[0.04]">
|
||||
<a href={businessConfig.publicCallUrl} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background px-4 py-4 transition hover:border-primary/35">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<Phone className="h-5 w-5" />
|
||||
</div>
|
||||
|
|
@ -58,7 +58,7 @@ export function ContactPage() {
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<a href={`mailto:${businessConfig.email}?Subject=Rocky%20Mountain%20Vending%20Inquiry`} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background/85 px-4 py-4 transition hover:border-primary/35 hover:bg-primary/[0.04]">
|
||||
<a href={`mailto:${businessConfig.email}?Subject=Rocky%20Mountain%20Vending%20Inquiry`} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background px-4 py-4 transition hover:border-primary/35">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<Mail className="h-5 w-5" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ export function ContactForm({ onSubmit, className }: ContactFormProps) {
|
|||
<input id="confirm-email" type="email" {...register("confirmEmail")} className="sr-only" tabIndex={-1} />
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 1"
|
||||
title="How should we reach you?"
|
||||
|
|
@ -229,7 +229,7 @@ export function ContactForm({ onSubmit, className }: ContactFormProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 2"
|
||||
title="What do you need help with?"
|
||||
|
|
@ -257,7 +257,7 @@ export function ContactForm({ onSubmit, className }: ContactFormProps) {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-3 rounded-2xl border border-primary/10 bg-primary/[0.04] p-4 text-sm text-muted-foreground md:grid-cols-[auto_1fr]">
|
||||
<div className="mt-5 grid gap-3 rounded-2xl border border-border/60 bg-background p-4 text-sm text-muted-foreground md:grid-cols-[auto_1fr]">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<Wrench className="h-4 w-4" />
|
||||
</div>
|
||||
|
|
@ -274,7 +274,7 @@ export function ContactForm({ onSubmit, className }: ContactFormProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 3"
|
||||
title="Tell us the details"
|
||||
|
|
@ -298,7 +298,7 @@ export function ContactForm({ onSubmit, className }: ContactFormProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 4"
|
||||
title="Text updates"
|
||||
|
|
@ -317,7 +317,7 @@ export function ContactForm({ onSubmit, className }: ContactFormProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.5rem] border border-border/60 bg-muted/35 px-4 py-4 text-sm text-muted-foreground">
|
||||
<div className="rounded-[1.5rem] border border-border/60 bg-background px-4 py-4 text-sm text-muted-foreground">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-foreground">Need a faster handoff?</p>
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ export function RequestMachineForm({ onSubmit, className }: RequestMachineFormPr
|
|||
<input id="confirm-email" type="email" {...register("confirmEmail")} className="sr-only" tabIndex={-1} />
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 1"
|
||||
title="Business contact"
|
||||
|
|
@ -274,21 +274,21 @@ export function RequestMachineForm({ onSubmit, className }: RequestMachineFormPr
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 2"
|
||||
title="What should we plan for?"
|
||||
description="Tell us what kind of setup you'd like so we can recommend the right mix."
|
||||
/>
|
||||
|
||||
<div className="mt-5 grid gap-3 rounded-[1.5rem] border border-border/60 bg-muted/25 p-4 md:grid-cols-2">
|
||||
<div className="mt-5 grid gap-3 rounded-[1.5rem] border border-border/60 bg-background p-4 md:grid-cols-2">
|
||||
{MACHINE_TYPE_OPTIONS.map((option) => {
|
||||
const isChecked = selectedMachineTypes.includes(option.value)
|
||||
return (
|
||||
<label
|
||||
key={option.value}
|
||||
htmlFor={`machine-type-${option.value}`}
|
||||
className="flex cursor-pointer items-start gap-3 rounded-xl border border-border/60 bg-background/90 px-4 py-3 transition hover:border-primary/35 hover:bg-primary/[0.04]"
|
||||
className="flex cursor-pointer items-start gap-3 rounded-xl border border-border/60 bg-background px-4 py-3 transition hover:border-primary/35"
|
||||
>
|
||||
<Checkbox
|
||||
id={`machine-type-${option.value}`}
|
||||
|
|
@ -320,7 +320,7 @@ export function RequestMachineForm({ onSubmit, className }: RequestMachineFormPr
|
|||
},
|
||||
})}
|
||||
/>
|
||||
<div className="rounded-2xl border border-primary/10 bg-primary/[0.04] p-4 text-sm text-muted-foreground">
|
||||
<div className="rounded-2xl border border-border/60 bg-background p-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2 font-medium text-foreground">
|
||||
<ClipboardCheck className="h-4 w-4 text-primary" />
|
||||
Free placement intake
|
||||
|
|
@ -332,7 +332,7 @@ export function RequestMachineForm({ onSubmit, className }: RequestMachineFormPr
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 3"
|
||||
title="Anything else we should know?"
|
||||
|
|
@ -349,7 +349,7 @@ export function RequestMachineForm({ onSubmit, className }: RequestMachineFormPr
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background/85 p-5 shadow-sm md:p-6">
|
||||
<div className="rounded-[1.75rem] border border-border/70 bg-background p-5 shadow-sm md:p-6">
|
||||
<PublicSectionHeader
|
||||
eyebrow="Step 4"
|
||||
title="Text updates"
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ import { businessConfig } from "@/lib/seo-config"
|
|||
|
||||
export function RequestMachineSection() {
|
||||
return (
|
||||
<section id="request-machine" className="bg-[linear-gradient(180deg,rgba(247,244,236,0.55),rgba(255,255,255,0.98))] py-16 md:py-24">
|
||||
<section id="request-machine" className="bg-background py-16 md:py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-start">
|
||||
<PublicSurface className="bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_50%),linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.98))] p-6 md:p-8 lg:sticky lg:top-28">
|
||||
<PublicSurface className="bg-background p-6 md:p-8 lg:sticky lg:top-28">
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-primary">
|
||||
<Package className="h-4 w-4" />
|
||||
Free Placement
|
||||
|
|
@ -43,7 +43,7 @@ export function RequestMachineSection() {
|
|||
</div>
|
||||
</PublicSurface>
|
||||
|
||||
<PublicSurface className="bg-background/95 p-5 md:p-7">
|
||||
<PublicSurface className="bg-background p-5 md:p-7">
|
||||
<RequestMachineForm onSubmit={(data) => console.log("Machine request form submitted:", data)} />
|
||||
</PublicSurface>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -567,7 +567,7 @@ export function SiteChatWidget() {
|
|||
placeholder="Describe what you need"
|
||||
rows={3}
|
||||
disabled={isSending}
|
||||
className="min-h-24 w-full rounded-2xl border border-border/70 bg-background/85 px-4 py-3 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:border-primary focus:ring-4 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
className="min-h-24 w-full rounded-2xl border border-border/70 bg-background px-4 py-3 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:border-primary focus:ring-4 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
/>
|
||||
|
||||
<SupportHint
|
||||
|
|
|
|||
Loading…
Reference in a new issue