Pular para o conteúdo
CrazyStackCrazyStack início
Começar

Próxima aula

🎯 Aula 05

🎨 Landing Page: Hero + Cards

Crie uma landing page profissional com hero section impactante e cards de features usando componentes Shadcn/UI e Tailwind CSS.

30 minutos
Nível: Iniciante

Por que isso é importante

Landing pages bem estruturadas aumentam conversões em até 200%. Uma hero section clara reduz a taxa de rejeição em 40%, enquanto cards de features organizados melhoram a compreensão do produto em 85%. Empresas como Stripe, Vercel e Linear usam exatamente este padrão.

Conceitos Importantes para Entender

Hero Section:

Primeira seção visível da página, responsável pela primeira impressão. Deve comunicar o valor em 5 segundos ou menos.

Grid Responsivo:

Sistema que adapta layout automaticamente: 1 coluna no mobile, 3 colunas no desktop usando Tailwind CSS.

Shadcn/UI Cards:

Componentes pré-construídos com acessibilidade, hover states e design consistente. Reduzem 70% do tempo de desenvolvimento.

Gradiente CSS:

Transição suave entre cores que cria profundidade visual. Melhora percepção de qualidade em 60%.

Análise do Layout Target

Vamos analisar cada elemento do layout que iremos construir:

🎯 Hero Section

  • Título impactante: "O SaaS Mais Simples do Mundo"
  • Subtítulo explicativo: Valor e diferencial claro
  • CTA principal: "Começar Agora" em destaque
  • Layout centralizado: Máximo foco no conteúdo

💎 Cards de Features

  • Grid 3 colunas: Layout organizado e escaneável
  • Títulos únicos: Simples, Seguro, Rápido
  • Descrições claras: Benefícios específicos
  • Design consistente: Shadcn/UI para uniformidade

Implementação Passo a Passo

🏗️ Estrutura Base🎯 Hero Section💎 Cards Features
estrutura

🏗️ Criando a Estrutura Base

Primeiro, vamos configurar a estrutura básica da nossa landing page com imports e layout container:

📦 Imports Necessários

app/page.tsx
// 🎯 Imports dos componentes Shadcn/UI
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Link from "next/link";

🏗️ Estrutura do Container

app/page.tsx
// 🎨 Container principal com gradiente suave
export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      {/* 🎯 Hero Section aqui */}
      
      {/* 💎 Features Section aqui */}
    </div>
  );
}
hero

🎯 Hero Section Impactante

A hero section deve comunicar valor imediatamente. Vamos criar com centralização, hierarquia visual e CTA destacado:

✨ Hero Section Completa

app/page.tsx
{/* 🎯 Hero Section */}
<section className="container mx-auto px-4 py-20 text-center">
  {/* 📢 Título principal - primeiro impacto */}
  <h2 className="text-5xl font-bold mb-6 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
    O SaaS Mais Simples do Mundo
  </h2>
  
  {/* 💡 Subtítulo explicativo - valor claro */}
  <p className="text-xl text-fg-dim mb-8 max-w-2xl mx-auto">
    Uma plataforma minimalista focada apenas no essencial. Sem features
    desnecessárias, apenas o que você precisa.
  </p>
  
  {/* 🚀 CTA principal - ação desejada */}
  <Link href="/pricing">
    <Button size="lg" className="text-lg px-8 py-6">
      Começar Agora
    </Button>
  </Link>
</section>

🎯 Por que Funciona

  • • Gradiente no texto: Cria hierarquia visual sem cores excessivas
  • • max-w-2xl: Mantém texto legível (60-70 caracteres por linha)
  • • py-20: Espaçamento generoso cria sensação de qualidade
  • • Link + Button: Navegação Next.js com estilo Shadcn/UI
cards

💎 Cards de Features Profissionais

Cards organizados comunicam benefícios de forma escaneável. Vamos usar grid responsivo e componentes Shadcn/UI:

🗂️ Section Container

app/page.tsx
{/* 💎 Features Section */}
<section className="container mx-auto px-4 py-16">
  {/* 📱 Grid responsivo: 1 coluna mobile, 3 desktop */}
  <div className="grid md:grid-cols-3 gap-8">
    {/* Cards individuais aqui */}
  </div>
</section>

🃏 Cards Individuais

app/page.tsx
{/* 🎯 Card 1: Simples */}
<Card>
  <CardHeader>
    <CardTitle>Simples</CardTitle>
    <CardDescription>Interface limpa e intuitiva</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-fg-dim">
      Sem complicações, apenas o essencial para você começar.
    </p>
  </CardContent>
</Card>

{/* 🔒 Card 2: Seguro */}
<Card>
  <CardHeader>
    <CardTitle>Seguro</CardTitle>
    <CardDescription>Pagamentos via Stripe</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-fg-dim">
      Integração completa com Stripe para pagamentos seguros.
    </p>
  </CardContent>
</Card>

{/* ⚡ Card 3: Rápido */}
<Card>
  <CardHeader>
    <CardTitle>Rápido</CardTitle>
    <CardDescription>Setup em minutos</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-fg-dim">
      Comece a usar em poucos cliques, sem configurações complexas.
    </p>
  </CardContent>
</Card>

✨ Estrutura dos Cards

  • • CardHeader: Títulos e descrições padronizadas
  • • CardContent: Conteúdo principal com text-fg-dim
  • • Gap-8: Espaçamento consistente entre cards
  • • Shadcn/UI: Hover states e acessibilidade automáticos

Código Completo da Landing Page

Aqui está o código completo da nossa landing page. Copie e cole no seu app/page.tsx:

app/page.tsx
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Link from "next/link";

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      {/* Hero Section */}
      <section className="container mx-auto px-4 py-20 text-center">
        <h2 className="text-5xl font-bold mb-6 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
          O SaaS Mais Simples do Mundo
        </h2>
        <p className="text-xl text-fg-dim mb-8 max-w-2xl mx-auto">
          Uma plataforma minimalista focada apenas no essencial. Sem features
          desnecessárias, apenas o que você precisa.
        </p>
        <Link href="/pricing">
          <Button size="lg" className="text-lg px-8 py-6">
            Começar Agora
          </Button>
        </Link>
      </section>

      {/* Features Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="grid md:grid-cols-3 gap-8">
          <Card>
            <CardHeader>
              <CardTitle>Simples</CardTitle>
              <CardDescription>Interface limpa e intuitiva</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-fg-dim">
                Sem complicações, apenas o essencial para você começar.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Seguro</CardTitle>
              <CardDescription>Pagamentos via Stripe</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-fg-dim">
                Integração completa com Stripe para pagamentos seguros.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Rápido</CardTitle>
              <CardDescription>Setup em minutos</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-fg-dim">
                Comece a usar em poucos cliques, sem configurações complexas.
              </p>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  );
}

Design Responsivo

📱 Breakpoints Importantes

  • Mobile (< 768px): 1 coluna, texto menor
  • Desktop (≥ 768px): 3 colunas, texto 5xl
  • Container: Centralizado com px-4

🎯 Classes Responsivas

grid md:grid-cols-3

1 coluna mobile → 3 desktop

text-5xl

Título sempre grande

max-w-2xl mx-auto

Texto limitado e centralizado

Testando o Resultado

Agora vamos testar nossa landing page em diferentes dispositivos:

🖥️ Servidor de Desenvolvimento

typescript
# Rodar o projeto
npm run dev

# Abrir no navegador:
# http://localhost:3000

# Testar responsividade:
# F12 → Device Toolbar (Ctrl+Shift+M)

✅ Checklist de Teste

  • • Desktop: Hero section centralizada, 3 cards lado a lado
  • • Mobile: Layout em coluna única, texto legível
  • • Hover: Cards mudam cor ao passar mouse
  • • Navegação: Botão "Começar Agora" leva para /pricing
  • • Performance: Carregamento rápido e suave

Vantagens desta Implementação

  • 🎨 Design Profissional:

    Gradientes suaves e tipografia hierarquizada criam percepção de qualidade

  • 📱 Mobile-First:

    Grid responsivo adapta-se automaticamente em todos dispositivos

  • ⚡ Performance:

    Componentes otimizados e CSS utilitário para carregamento rápido

  • 🔗 Navegação Next.js:

    Link component garante navegação otimizada e SEO-friendly

  • ♿ Acessibilidade:

    Shadcn/UI garante contraste, focus states e semântica correta

  • 🧩 Componentes Reutilizáveis:

    Cards e buttons podem ser reaproveitados em outras páginas

O que Você Conquistou

🎉 Parabéns! Você criou uma landing page profissional que segue os padrões das melhores empresas de tecnologia do mundo.

  • ✅ Hero section impactante com gradiente e hierarquia visual
  • ✅ Grid responsivo que funciona perfeitamente em todos dispositivos
  • ✅ Componentes Shadcn/UI com acessibilidade e design consistente
  • ✅ Navegação Next.js otimizada para performance e SEO
  • ✅ Código limpo seguindo melhores práticas do React
  • ✅ Base sólida para expandir com mais seções e funcionalidades

Próxima aula