(null)
+ const firstMenuLinkRef = React.useRef(null)
+
+ React.useEffect(() => {
+ if (!isMenuOpen) return
+
+ firstMenuLinkRef.current?.focus()
+
+ function handleKeyDown(event: KeyboardEvent) {
+ if (event.key === "Escape") {
+ setIsMenuOpen(false)
+ menuButtonRef.current?.focus()
+ }
+ }
+
+ document.addEventListener("keydown", handleKeyDown)
+ return () => document.removeEventListener("keydown", handleKeyDown)
+ }, [isMenuOpen])
return (
@@ -19,7 +37,7 @@ export function Header() {
)
}
diff --git a/src/components/landing/hero.tsx b/src/components/landing/hero.tsx
index 80451a6..76ea99f 100644
--- a/src/components/landing/hero.tsx
+++ b/src/components/landing/hero.tsx
@@ -10,6 +10,9 @@ export function Hero() {
-
diff --git a/src/components/landing/operational-flow.tsx b/src/components/landing/operational-flow.tsx
new file mode 100644
index 0000000..5c29974
--- /dev/null
+++ b/src/components/landing/operational-flow.tsx
@@ -0,0 +1,52 @@
+import { QrCode, Smartphone, TicketCheck } from "lucide-react"
+
+import { Section, SectionHeading } from "@/components/landing/section"
+
+const FLOW_STEPS = [
+ {
+ title: "Ingresso digital",
+ description: "A pessoa compra e acessa o ingresso pelo celular, sem fila e sem papel.",
+ icon: Smartphone,
+ },
+ {
+ title: "Check-in por QR Code",
+ description: "A equipe valida a entrada com rapidez e clareza na porta do evento.",
+ icon: QrCode,
+ },
+ {
+ title: "Confirmação da entrada",
+ description: "O evento acompanha em tempo real o público que já entrou.",
+ icon: TicketCheck,
+ },
+] as const
+
+export function OperationalFlow() {
+ return (
+
+
+
+ + Programa piloto para eventos universitários +
{/* Explicit breaks from lg up so the three lines land exactly as in the reference design; below lg the copy wraps naturally. */}@@ -38,9 +41,16 @@ export function Hero() { Conhecer a proposta
+ Candidatura sem compromisso. Retornamos em até 48 horas úteis para entender o seu + evento. +
+
-
+ {FLOW_STEPS.map((step, index) => (
+
-
+ + + + + + {String(index + 1).padStart(2, "0")} + ++
{step.title}
+{step.description}
+
+ ))}
+
-
diff --git a/src/components/landing/pilot-form-lazy.tsx b/src/components/landing/pilot-form-lazy.tsx
new file mode 100644
index 0000000..160e16c
--- /dev/null
+++ b/src/components/landing/pilot-form-lazy.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import dynamic from "next/dynamic"
+
+/**
+ * Placeholder that mirrors the form's card container and reserves height, so the
+ * swap to the real form doesn't shift the page. Kept intentionally quiet.
+ */
+function FormSkeleton() {
+ return (
+
+ )
+}
+
+// ssr:false keeps the validation stack (zod + react-hook-form + radix) out of
+// the home's first-load JS entirely; it loads as an async chunk on approach.
+const PilotForm = dynamic(
+ () => import("@/components/landing/pilot-form").then((m) => m.PilotForm),
+ { ssr: false, loading: () =>
+
Programa piloto
diff --git a/src/components/landing/pilot-form-lazy.tsx b/src/components/landing/pilot-form-lazy.tsx
new file mode 100644
index 0000000..160e16c
--- /dev/null
+++ b/src/components/landing/pilot-form-lazy.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import dynamic from "next/dynamic"
+
+/**
+ * Placeholder that mirrors the form's card container and reserves height, so the
+ * swap to the real form doesn't shift the page. Kept intentionally quiet.
+ */
+function FormSkeleton() {
+ return (
+
+ )
+}
+
+// ssr:false keeps the validation stack (zod + react-hook-form + radix) out of
+// the home's first-load JS entirely; it loads as an async chunk on approach.
+const PilotForm = dynamic(
+ () => import("@/components/landing/pilot-form").then((m) => m.PilotForm),
+ { ssr: false, loading: () => (null)
+ const [show, setShow] = React.useState(false)
+
+ React.useEffect(() => {
+ const el = ref.current
+ if (!el || show) return
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ if (entries.some((entry) => entry.isIntersecting)) {
+ setShow(true)
+ observer.disconnect()
+ }
+ },
+ { rootMargin: "600px" },
+ )
+ observer.observe(el)
+ return () => observer.disconnect()
+ }, [show])
+
+ return {show ? (null)
const form = useForm({
resolver: zodResolver(pilotFormSchema),
@@ -74,6 +75,7 @@ export function PilotForm() {
async function onSubmit(data: PilotFormData) {
setIsSubmitting(true)
+ setSubmitError(null)
try {
const res = await fetch("/api/subscribe", {
method: "POST",
@@ -89,6 +91,7 @@ export function PilotForm() {
form.reset()
router.push("/obrigado")
} catch {
+ setSubmitError("Não foi possível enviar agora. Tente novamente em alguns minutos.")
toast.error("Erro ao enviar candidatura", {
description: "Tente novamente em alguns minutos ou entre em contato diretamente.",
})
@@ -97,153 +100,190 @@ export function PilotForm() {
}
}
+ function onInvalid(errors: FieldErrors) {
+ const firstError = Object.keys(errors)[0] as keyof PilotFormData | undefined
+ if (firstError) {
+ window.requestAnimationFrame(() => form.setFocus(firstError))
+ }
+ }
+
return (
Candidate seu evento
+
+ Conte um pouco sobre a sua operação. A candidatura não garante vaga; retornamos em até 48
+ horas úteis para conversar sobre data, público e formato.
+
-
{show ?
+}
diff --git a/src/components/landing/pilot-form.tsx b/src/components/landing/pilot-form.tsx
index e7d9757..83e61b0 100644
--- a/src/components/landing/pilot-form.tsx
+++ b/src/components/landing/pilot-form.tsx
@@ -3,7 +3,7 @@
import * as React from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
-import { useForm } from "react-hook-form"
+import { useForm, type FieldErrors } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { ArrowRight, Loader2 } from "lucide-react"
import { toast } from "sonner"
@@ -57,6 +57,7 @@ const UF_OPTIONS = toOptions(UFS, UF_LABELS)
export function PilotForm() {
const router = useRouter()
const [isSubmitting, setIsSubmitting] = React.useState(false)
+ const [submitError, setSubmitError] = React.useStateCandidate seu evento
++ Conte um pouco sobre a sua operação. A candidatura não garante vaga; retornamos em até 48 + horas úteis para conversar sobre data, público e formato. +
-