Design system

import { Button } from "@/components/ui/button";
import { ArrowRightIcon } from "@/components/ui/icons";

<Button href="/#contato" size="lg" icon={<ArrowRightIcon />}>
  Começar um projeto
</Button>

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  if (mutation.isPending) return;
  mutation.mutate(readForm(event.currentTarget));
};

<form onSubmit={handleSubmit}>
  …
  <Button
    type="submit"
    aria-disabled={mutation.isPending || undefined}
    className="aria-disabled:pointer-events-none aria-disabled:translate-y-[5px] aria-disabled:shadow-key-pressed"
  >
    {mutation.isPending ? "Enviando…" : "Enviar mensagem"}
  </Button>
</form>

import { buttonClasses } from "@/components/ui/button";

<a href="/brand/two9-brand-kit.zip" download className={buttonClasses({ variant: "secondary" })}>
  Baixar kit da marca
</a>

import { Keycap } from "@/components/ui/keycap";

<Keycap size="sm" tone="outline" className="text-sm tabular-nums">
  01
</Keycap>

<Keycap size="sm" tone={open ? "yellow" : "charcoal"} pressed={open}>
  <PlusIcon className={open ? "rotate-[135deg]" : undefined} />
</Keycap>

import { TILE_RADIUS_RATIO } from "@/components/ui/keycap";

const style = { width: side, height: side, borderRadius: side * TILE_RADIUS_RATIO };

import { LitKey } from "@/components/ui/lit-key";

<LitKey side={56} edge={5} lit light="fill" capClassName="font-display text-xl font-semibold">
  9
</LitKey>

const cap = key.querySelector("[data-lit-key-cap]");
const light = key.querySelectorAll("[data-lit-key-light], [data-lit-key-glow]");

gsap
  .timeline()
  .to(cap, { y: 4, duration: 0.07, ease: "power2.in" })
  .to(light, { autoAlpha: 1, duration: 0.08 }, "<")
  .to(cap, { y: 0, duration: 0.42, ease: "back.out(2.6)" });

import { KeySequence } from "@/components/ui/key-sequence";

<KeySequence keys={["4", "0", "4"]} litIndex={1} label="Erro 404">
  <h1 data-typed>
    Esta página não existe.
    <span data-typed-caret aria-hidden className="animate-caret …" />
  </h1>
  <p data-reveal>O endereço mudou ou nunca existiu.</p>
</KeySequence>

import { Container } from "@/components/ui/container";

<section aria-labelledby="servicos-titulo" className="bg-charcoal-900 py-24 sm:py-32 lg:py-40">
  <Container className="grid gap-6 lg:grid-cols-12 lg:gap-8">…</Container>
</section>

import { ResponsiveImage } from "@/components/ui/responsive-image";

<ResponsiveImage
  name="service-agents"
  alt=""
  sizes="(min-width: 1024px) 34vw, 100vw"
  className="aspect-square"
/>

import { VideoLoop } from "@/components/ui/video-loop";

<div className="relative aspect-video overflow-hidden rounded-xl">
  <VideoLoop name="keyfield" />
</div>

import { Marquee } from "@/components/ui/marquee";
import { setMotionPaused, useMotionPaused } from "@/lib/motion-preference";

const paused = useMotionPaused();

<ul className="sr-only">
  {technologies.map((name) => <li key={name}>{name}</li>)}
</ul>
<Marquee paused={paused} copyClassName="py-2">
  {technologies.map((name) => <span key={name}>{name}</span>)}
</Marquee>
<button type="button" aria-pressed={paused} onClick={() => setMotionPaused(!paused)}>
  Pausar movimento
</button>

import { MotionToggle } from "@/components/ui/motion-toggle";

<MotionToggle className="hidden lg:inline-flex" />
<MotionToggle showLabel className="mb-4 self-start" />

import { FULL_MOTION_QUERY, gsap } from "@/lib/gsap";
import { pauseWithMotionPreference } from "@/lib/motion-preference";

media.add(FULL_MOTION_QUERY, () => {
  const loop = gsap.timeline({ repeat: -1 });
  …
  return pauseWithMotionPreference(loop);
});

import { Accordion } from "@/components/ui/accordion";

<Accordion
  headingLevel={3}
  panels={FAQ.map((item) => ({ id: item.id, heading: item.question, body: <p>{item.answer}</p> }))}
  onToggle={(id, open) => open && pressQuestionKey()}
/>

import { TextField } from "@/components/ui/text-field";

<TextField
  name="email"
  type="email"
  label="E-mail"
  autoComplete="email"
  inputMode="email"
  required
  error={fieldErrors.email}
/>

import { FieldShell, fieldControlClasses, useFieldA11y } from "@/components/ui/text-field";

const field = useFieldA11y({ id, hint, error });

<FieldShell label="Orçamento" hint={hint} error={error} field={field}>
  <select id={field.controlId} aria-describedby={field.describedBy} aria-invalid={field.invalid} className={fieldControlClasses("charcoal", "h-14")}>…</select>
</FieldShell>

import { TextArea } from "@/components/ui/text-area";

<TextArea
  name="message"
  label="Mensagem"
  required
  maxLength={2000}
  placeholder="O que você quer construir, para quem e o que já existe hoje."
  error={fieldErrors.message}
/>

import { ChoiceChip, ChoiceChipGroup } from "@/components/ui/choice-chip";

<ChoiceChipGroup legend="Do que você precisa?" optional hint="Marque quantas opções quiser." hintId={`${id}-hint`} errorId={`${id}-error`}>
  {CONTACT_NEEDS.map((need) => (
    <ChoiceChip key={need} name="needs" value={need} label={need} />
  ))}
</ChoiceChipGroup>

import { FieldMessage } from "@/components/ui/field-message";

<FieldMessage id={`${id}-error`} tone="error">
  Escolha uma data a partir de amanhã.
</FieldMessage>

import { Logo } from "@/components/brand/logo";

<Link href="/" aria-label="Two9, página inicial">
  <Logo layout="horizontal" decorative className="w-[118px]" />
</Link>