Seu problemavira software.

Código ilustrativo · Rafael Mota, Toyota// Código ilustrativo · estoque e página por veículo
export default async function Estoque({ searchParams }) {
  const filtros = lerFiltros(searchParams)   // marca, ano, preço
  const carros = await buscarCarros(filtros)

  return (
    <Vitrine>
      <Filtros valores={filtros} />
      {carros.map((carro) => (
        <CartaoCarro key={carro.id} carro={carro}
          href={`/estoque/${carro.slug}`} />
      ))}
    </Vitrine>
  )
}

// área administrativa: só entra com login
export const config = { matcher: ['/admin/:path*'] }

Código ilustrativo · Somos Green Life// Código ilustrativo · catálogo em espanhol
export function Catalogo({ productos }) {
  return (
    <section lang="es">
      <h1>El arte de vivir bien</h1>
      <ul className="grid">
        {productos.map((p) => (
          <Producto key={p.id} {...p}
            pedir={() => abrirWhatsApp(p)} />
        ))}
      </ul>
    </section>
  )
}

// panel de gestión: /admin → /admin/login
<Route path="/admin" element={<Protegida />}>
  <Route path="productos" element={<Productos />} />
  <Route path="ventas" element={<Ventas />} />
</Route>

Código ilustrativo · Crevally Black// Código ilustrativo · loja e pedidos
export function Produto({ produto }) {
  const [cor, setCor] = useState(produto.cores[0])
  const [tam, setTam] = useState(null)
  const estoque = produto.estoque[cor]?.[tam] ?? 0

  return (
    <article>
      <Galeria fotos={produto.fotos[cor]} />
      <Seletor cores={produto.cores} valor={cor} onChange={setCor} />
      <Tamanhos estoque={produto.estoque[cor]} onChange={setTam} />
      <button disabled={!estoque}>
        Adicionar à sacola
      </button>
    </article>
  )
}

Código ilustrativo · Toka Restaurante<!-- Código ilustrativo · cardápio e reserva -->
<header class="hero">
  <h1>Tōka</h1>
  <p>A arte das chamas</p>
  <a class="btn" href="#cardapio">O cardápio</a>
  <a class="btn" href="https://wa.me/...">Reservar</a>
</header>

<section id="cardapio">
  <h2>Pratos</h2>
  <ul class="galeria"><!-- pratos --></ul>
</section>

Código ilustrativo · Hospital Vet// Código ilustrativo · serviços e agendamento
export default function Inicio() {
  return (
    <>
      <Hero titulo="Saúde. Cuidado. Hospital." />
      <Servicos itens={servicos} />
      <Agendar
        canal="whatsapp"
        mensagem="Quero agendar um horário"
      />
    </>
  )
}

Código ilustrativo · Nova Living// Código ilustrativo · vitrine de produtos
export function Vitrine({ colecao }) {
  return (
    <main>
      <Destaque titulo="A Arte de Viver Bem." />
      <Grade>
        {colecao.produtos.map((p) => (
          <Item key={p.id} produto={p} />
        ))}
      </Grade>
      <Checkout />
    </main>
  )
}