> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fitlocus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Landing Page

> Arquitetura e implementação da landing page do FitLocus

# Landing Page do FitLocus

A landing page do FitLocus é desenvolvida com Next.js e serve como o portal de entrada para novos usuários, apresentando a plataforma, seus recursos e planos de assinatura. Além da página institucional, também inclui o fluxo de cadastro e assinatura para novos usuários.

## Tecnologias Utilizadas

* **Framework**: Next.js 13+ (App Router)
* **Linguagem**: TypeScript
* **Estilização**: Tailwind CSS
* **Componentes**: Radix UI + Shadcn/UI
* **Formulários**: React Hook Form
* **Validação**: Zod
* **Gerenciamento de Estado**: React Context API
* **Requisições HTTP**: Axios
* **Animações**: Framer Motion
* **Internacionalização**: next-intl

## Estrutura do Projeto

```
app/
├── (auth)/                # Rotas de autenticação
│   ├── login/             # Página de login
│   └── registro/          # Página de registro
├── dashboard/             # Área logada para usuários
│   ├── alunos/            # Gerenciamento de alunos
│   ├── configuracoes/     # Configurações de conta
│   ├── perfil/            # Perfil do usuário
│   ├── relatorios/        # Relatórios e análises
│   └── treinos/           # Gerenciamento de treinos
├── planos/                # Página de planos e assinaturas
├── api/                   # Rotas de API do Next.js
│   ├── auth/              # Endpoints de autenticação
│   └── webhook/           # Webhooks para pagamentos
├── layout.tsx             # Layout global da aplicação
└── page.tsx               # Página inicial (home)
components/
├── client-journey/        # Componentes para jornada de alunos
│   ├── client-journey-modal.tsx # Modal principal da jornada
│   ├── payment-step.tsx   # Etapa de pagamento
│   ├── plan-selection-step.tsx # Seleção de plano
│   ├── registration-step.tsx # Etapa de cadastro
│   └── welcome-step.tsx   # Etapa final de boas-vindas
├── professional-journey/  # Componentes para jornada de profissionais
│   ├── professional-journey-modal.tsx # Modal principal da jornada
│   ├── payment-step.tsx   # Etapa de pagamento
│   ├── plan-selection-step.tsx # Seleção de plano
│   ├── registration-step.tsx # Etapa de cadastro
│   └── welcome-step.tsx   # Etapa final de boas-vindas
├── ui/                    # Componentes de UI reutilizáveis
│   ├── button.tsx         # Componente de botão
│   ├── card.tsx           # Componente de card
│   ├── dialog.tsx         # Componente de modal
│   ├── input.tsx          # Componente de input
│   └── ...                # Outros componentes de UI
├── layout/                # Componentes de layout
│   ├── footer.tsx         # Rodapé do site
│   ├── header.tsx         # Cabeçalho do site
│   └── sidebar.tsx        # Barra lateral do dashboard
└── sections/              # Seções da página inicial
    ├── hero.tsx           # Seção principal (hero)
    ├── features.tsx       # Seção de recursos
    ├── pricing.tsx        # Seção de preços
    └── testimonials.tsx   # Seção de depoimentos
hooks/
├── use-auth.tsx           # Hook de autenticação
├── use-students.tsx       # Hook para gerenciamento de alunos
└── use-trainings.tsx      # Hook para gerenciamento de treinos
services/
├── api.ts                 # Configuração do cliente Axios
├── auth/                  # Serviços de autenticação
│   ├── auth-service.ts    # Implementação dos serviços de auth
│   └── firebase-auth.ts   # Integração com Firebase Auth
└── ...                    # Outros serviços
types/
├── auth.ts                # Tipos relacionados à autenticação
├── training.ts            # Tipos relacionados a treinos
└── ...                    # Outros tipos
lib/
├── auth-utils.ts          # Utilitários de autenticação
├── date-utils.ts          # Utilitários para datas
└── ...                    # Outros utilitários
```

## Fluxos Principais

### Página Inicial

A página inicial apresenta a plataforma para visitantes não autenticados:

1. **Hero Section**: Apresentação principal com call-to-action
2. **Features**: Recursos e benefícios da plataforma
3. **Pricing**: Planos disponíveis para alunos e profissionais
4. **Testimonials**: Depoimentos de usuários
5. **FAQ**: Perguntas frequentes
6. **CTA**: Call-to-action final para registro

### Jornada do Profissional

Fluxo de cadastro e assinatura para personal trainers:

1. **Seleção de Plano**: Escolha entre os planos disponíveis (Iniciante, Basic, etc.)
2. **Cadastro**: Formulário de registro com dados pessoais e profissionais
3. **Pagamento**: Integração com AbacatePay para processamento do pagamento
4. **Boas-vindas**: Confirmação e próximos passos

### Jornada do Aluno

Fluxo de cadastro e assinatura para alunos:

1. **Seleção de Plano**: Escolha entre os planos disponíveis (Freemium, Premium, etc.)
2. **Cadastro**: Formulário de registro com dados pessoais
3. **Pagamento**: Integração com AbacatePay para processamento do pagamento (se plano pago)
4. **Boas-vindas**: Confirmação e próximos passos

### Dashboard

Área logada para usuários autenticados:

1. **Alunos**: Gerenciamento de alunos (apenas para profissionais)
2. **Treinos**: Criação e gerenciamento de treinos
3. **Relatórios**: Análises e métricas de desempenho
4. **Perfil**: Gerenciamento de dados pessoais
5. **Configurações**: Preferências e configurações da conta

## Componentes de UI

A landing page utiliza uma biblioteca de componentes baseada em Radix UI e Shadcn/UI:

```typescript theme={null}
// Exemplo de componente de botão
export const Button = React.forwardRef<
  HTMLButtonElement,
  ButtonProps
>(({ className, variant, size, ...props }, ref) => {
  return (
    <button
      className={cn(
        "inline-flex items-center justify-center rounded-md font-medium transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        buttonVariants[variant],
        buttonSizes[size],
        className
      )}
      ref={ref}
      {...props}
    />
  );
});
```

## Integração com API

A comunicação com o backend é realizada através de serviços que utilizam Axios:

```typescript theme={null}
// Configuração do cliente Axios
const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080',
  headers: {
    'Content-Type': 'application/json',
  },
});

// Interceptor para adicionar token de autenticação
api.interceptors.request.use((config) => {
  const token = getToken();
  
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  
  return config;
});
```

## Autenticação

A landing page implementa um sistema de autenticação completo:

```typescript theme={null}
// Hook de autenticação
export const useAuth = () => {
  const context = useContext(AuthContext);
  
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  
  return context;
};

// Provedor de autenticação
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  
  // Métodos de autenticação...
  
  return (
    <AuthContext.Provider value={{ user, loading, login, logout, register }}>
      {children}
    </AuthContext.Provider>
  );
};
```

## Proteção de Rotas

A landing page utiliza middleware do Next.js para proteger rotas que requerem autenticação:

```typescript theme={null}
// middleware.ts
export function middleware(request: NextRequest) {
  const token = request.cookies.get(TOKEN_NAME)?.value;
  const isAuthRoute = request.nextUrl.pathname.startsWith('/login') || 
                      request.nextUrl.pathname.startsWith('/registro');
  const isDashboardRoute = request.nextUrl.pathname.startsWith('/dashboard');
  
  if (!token && isDashboardRoute) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  if (token && isAuthRoute) {
    return NextResponse.redirect(new URL('/dashboard', request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/login', '/registro'],
};
```

## Design System

A landing page segue o design system do FitLocus com as seguintes características:

* **Cores**: Paleta baseada em #202020 (fundo), #B4ED00 (acento) e #F9F9F9 (texto)
* **Tipografia**: Hanken Grotesk como fonte principal e SUPERINE para títulos
* **Espaçamento**: Sistema de grid baseado em Tailwind CSS
* **Componentes**: Biblioteca de componentes consistente e acessível

Para mais detalhes sobre o design system, consulte a [documentação de design](/design/brand-guidelines).

## Responsividade

A landing page é totalmente responsiva, adaptando-se a diferentes tamanhos de tela:

* **Mobile**: Layout otimizado para dispositivos móveis (\< 640px)
* **Tablet**: Layout adaptado para tablets (640px - 1024px)
* **Desktop**: Layout completo para desktops (> 1024px)

## SEO

A landing page implementa práticas de SEO para melhorar a visibilidade nos motores de busca:

* **Metadata**: Títulos, descrições e tags Open Graph
* **Sitemap**: Geração automática de sitemap.xml
* **Structured Data**: Dados estruturados para rich snippets
* **Performance**: Otimização de performance para melhor ranking

## Ambiente de Desenvolvimento

Para configurar o ambiente de desenvolvimento:

```bash theme={null}
# Clone o repositório
git clone https://github.com/logoscti/fitlocus-landing.git

# Entre no diretório
cd fitlocus-landing

# Instale as dependências
npm install

# Execute o servidor de desenvolvimento
npm run dev
```

## Implantação

A landing page é implantada na Vercel com integração contínua:

1. **Desenvolvimento**: Ambiente de desenvolvimento para testes
2. **Staging**: Ambiente de homologação para validação
3. **Produção**: Ambiente de produção para usuários finais