Começando

Como montar uma landing page com Next.js e Aura UI

Do create-next-app até uma página com hero, recursos, prova social e preço. O core é MIT: dá para publicar sem comprar nada. O Pro entra no fim, se você quiser a landing já composta.

1O que a página precisa responder

Quatro blocos, nesta ordem. O visitante entende o produto, vê por que ele importa, confere quem já usa e só então olha o preço.

O que é: Hero
Por que importa: FeatureGrid
Quem já usa: LogoCloud e TestimonialCard
Quanto custa: PricingGrid

Se quiser uma tela inteira já montada para copiar, o atalho é blocos prontos. Este guia monta a página peça por peça.

2Instalar no Next.js

No App Router, os pacotes entram uma vez. O passo a passo completo, inclusive o ThemeProvider, está na instalação.

bash

pnpm add aura-ui-components aura-ui-tailwind tailwindcss

No CSS global, no lugar de @import "tailwindcss":

app/globals.css

/* app/globals.css */
@import "aura-ui-tailwind";
@import "aura-ui-components/tailwind.css";

Um comando, se preferir copiar o fonte

npx aura-ui-cli init e depois npx aura-ui-cli add hero feature-grid testimonial logo-cloud pricing. O detalhe está no guia do CLI.

3Abrir com o hero

O título diz o resultado, não o nome da ferramenta. O botão principal é o único em gradiente. O segundo é contorno, para quem ainda não vai criar a conta.

app/page.tsx

import { Button } from "aura-ui-components/button";
import {
  Hero,
  HeroActions,
  HeroContent,
  HeroEyebrow,
  HeroSubtitle,
  HeroTitle
} from "aura-ui-components/hero";

export default function Page() {
  return (
    <Hero variant="gradient">
      <HeroContent>
        <HeroEyebrow>Novo</HeroEyebrow>
        <HeroTitle>Cobrança que fecha sozinha</HeroTitle>
        <HeroSubtitle>
          Pix, boleto e nota no mesmo fluxo. Sem planilha no fim do mês.
        </HeroSubtitle>
        <HeroActions>
          <Button variant="gradient">Criar conta</Button>
          <Button variant="outline">Falar com vendas</Button>
        </HeroActions>
      </HeroContent>
    </Hero>
  );
}

4Explicar em três cartões

Três recursos cabem numa linha no desktop e empilham no celular. Cada cartão tem um verbo: o que muda para o cliente.

app/recursos.tsx

import { FeatureCard, FeatureGrid } from "aura-ui-components/feature-grid";

export function Recursos() {
  return (
    <FeatureGrid columns={3}>
      <FeatureCard
        title="Pix e boleto"
        description="A cobrança sai com o vencimento e o cliente paga no banco dele."
      />
      <FeatureCard
        title="Nota fiscal"
        description="A NFS-e dispara quando o pagamento confirma."
      />
      <FeatureCard
        title="Vários CNPJs"
        description="Um login para o grupo, com permissão por pessoa."
      />
    </FeatureGrid>
  );
}

5Mostrar que alguém já usa

Logos em grade, sem animação, para a página não estourar a largura no celular. Um depoimento com nome e cargo vale mais do que uma frase solta.

app/prova.tsx

import { LogoCloud } from "aura-ui-components/logo-cloud";
import { TestimonialCard } from "aura-ui-components/testimonial";

export function Prova() {
  return (
    <>
      <LogoCloud title="Times que já usam">
        <span>Lumen</span>
        <span>Órbita</span>
        <span>Atlas</span>
      </LogoCloud>
      <TestimonialCard
        quote="A página foi para o ar no mesmo dia."
        author="Marina Costa"
        role="Produto, Lumen"
        rating={5}
      />
    </>
  );
}

6Fechar com o preço do seu produto

O preço abaixo é o do produto de exemplo, não o do Aura. Dois planos chegam. O destaque fica no que você quer vender.

app/planos.tsx

import { Button } from "aura-ui-components/button";
import { PricingCard, PricingGrid } from "aura-ui-components/pricing";

export function Planos() {
  return (
    <PricingGrid>
      <PricingCard
        name="Equipe"
        price="R$ 89"
        priceSuffix="/mês"
        description="Para o primeiro CNPJ."
        features={["2 usuários", "Pix e boleto", "Suporte por e-mail"]}
        actions={<Button variant="outline">Começar</Button>}
      />
      <PricingCard
        name="Grupo"
        price="R$ 189"
        priceSuffix="/mês"
        featured
        description="Para quem opera mais de uma empresa."
        features={["Usuários ilimitados", "Vários CNPJs", "Nota fiscal"]}
        actions={<Button variant="gradient">Assinar</Button>}
      />
    </PricingGrid>
  );
}

Publique com pnpm build no projeto Next e envie para a plataforma que você já usa. A página não precisa de WebGL para ir ao ar.

O core continua MIT: componentes, efeitos, temas, CLI e esta documentação. O Pro é a licença comercial do template SaaS 3D, a landing já composta, para projeto seu ou de cliente. Não inclui revenda do arquivo.

Pessoal: US$ 49 (R$ 147 no lançamento; depois, US$ 79).
Time: US$ 249 (R$ 697 para o time).

O pagamento é PIX pelo WhatsApp. O zip sai depois do comprovante. Os valores e o que entra no arquivo estão na página de preços. A prévia do template está em Template SaaS.

Comprar