MyGym é uma landing page moderna e responsiva desenvolvida para academias que buscam uma presença digital profissional. O projeto oferece uma interface atrativa e funcional, com recursos interativos como calculadora de IMC, seções de serviços, equipe e depoimentos, proporcionando uma experiência completa para os visitantes.
- 🎨 Design moderno e responsivo
- 📱 Compatível com todos os dispositivos (desktop, tablet, mobile)
- 🔍 Otimizado para SEO com meta tags completas
- ⚡ Carregamento rápido com Next.js 15
- 📊 Calculadora de IMC integrada e interativa
- 👥 Apresentação da equipe com cards personalizados
- 💬 Depoimentos de clientes com carousel
- 📞 Formulário de contato funcional
- 🎯 Seções de serviços e sobre a academia
- 🌟 Animações suaves e transições elegantes
- ⬆️ Botão "Voltar ao Topo" com animações suaves
- 🎨 Interface otimizada com componentes UI reutilizáveis
- Next.js 15 - Framework React para produção
- React 19 - Biblioteca JavaScript para interfaces
- TypeScript - Tipagem estática para JavaScript
- Tailwind CSS - Framework CSS utilitário
- Lucide React - Biblioteca de ícones
- ESLint - Linter para qualidade de código
- PostCSS - Processador de CSS
- Node.js (versão 18 ou superior)
- npm ou yarn
- Clone o repositório:
git clone <url-do-repositorio>
cd MyGym- Instale as dependências:
npm install- Execute o projeto em modo de desenvolvimento:
npm run dev- Acesse no navegador:
http://localhost:3000
npm run dev- Executa em modo de desenvolvimentonpm run build- Gera build de produçãonpm run start- Executa build de produçãonpm run lint- Executa verificação de código
src/
├── app/
│ ├── layout.tsx # Layout principal e metadata SEO
│ ├── page.tsx # Página inicial
│ └── globals.css # Estilos globais
├── components/
│ ├── Header.tsx # Cabeçalho com navegação
│ ├── Footer.tsx # Rodapé com informações
│ ├── ScrollToTopButton.tsx # Botão voltar ao topo
│ ├── sections/ # Seções da página
│ │ ├── Hero.tsx # Seção principal
│ │ ├── About.tsx # Sobre a academia
│ │ ├── Services.tsx # Serviços oferecidos
│ │ ├── BMICalculator.tsx # Calculadora de IMC
│ │ ├── Team.tsx # Equipe de profissionais
│ │ ├── Testimonials.tsx # Depoimentos
│ │ └── Contact.tsx # Formulário de contato
│ └── ui/ # Componentes UI reutilizáveis
│ └── Button.tsx # Componente de botão
├── types/
│ └── index.ts # Definições de tipos TypeScript
└── lib/
└── utils.ts # Utilitários e helpers
- Header: Logo MyGym e menu de navegação responsivo
- Hero: Seção principal com chamada para ação
- Sobre: Apresentação da academia com imagens e benefícios
- Serviços: Cards com os principais serviços oferecidos
- Calculadora IMC: Ferramenta interativa para cálculo de IMC
- Equipe: Apresentação dos profissionais com fotos e especialidades
- Depoimentos: Carousel com opiniões de clientes
- Contato: Formulário de contato simplificado
- Footer: Informações de contato e redes sociais
O projeto foi desenvolvido para ser facilmente personalizável:
- Cores e Tema: Modifique as cores no Tailwind CSS
- Conteúdo: Atualize textos e informações nas seções
- Imagens: Substitua as imagens na pasta
public/images/ - Logo: Atualize a logo no Header e Footer
- Informações de Contato: Modifique dados no Footer e seção Contact
- Componentes UI: Personalize botões e outros elementos na pasta
src/components/ui/
O projeto inclui componentes UI reutilizáveis:
- Button: Componente de botão com variantes
primaryesecondary- Variante
primary: Botão laranja para ações principais - Variante
secondary: Botão com borda para ações secundárias
- Variante
- Tamanhos:
sm,md,lgpara diferentes contextos - Totalmente customizável via props e classes CSS
A landing page é totalmente responsiva com breakpoints otimizados:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
O projeto inclui otimizações SEO básicas:
- Meta tags completas (title, description, keywords)
- Open Graph para redes sociais
- Twitter Cards
- Estrutura semântica HTML5
- Idioma configurado para português brasileiro
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
⭐ MyGym - Transformando a presença digital de academias com tecnologia moderna e design profissional!