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

// 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}
    />
  );
});

// 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;
});

// 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>
  );
};

// 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'],
};

# 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