🏋️ PowerFit Studio

Landing Page moderna e responsiva desenvolvida para uma academia premium fictícia, com foco na prática de HTML5, CSS3, organização de código e construção de interfaces profissionais.

Este projeto faz parte da minha jornada de estudos em Desenvolvimento Front-end e tem como objetivo consolidar conceitos fundamentais antes do início dos estudos em JavaScript.

---

🚀 Funcionalidades

• ✅ Landing Page moderna
• ✅ Layout totalmente responsivo
• ✅ Navegação entre seções
• ✅ Hero Section
• ✅ Sessão de benefícios
• ✅ Área institucional
• ✅ Sessão de professores
• ✅ Planos com destaque visual
• ✅ FAQ interativo
• ✅ Formulário de contato
• ✅ Componentes reutilizáveis
• ✅ Micro animações em CSS

---

💻 Tecnologias Utilizadas

• HTML5
• CSS3
• CSS Grid
• Flexbox
• CSS Variables
• Google Fonts
• Responsive Design

---

🎯 Objetivos do Projeto

Este projeto foi desenvolvido com foco em aprofundar conhecimentos de HTML e CSS, colocando em prática conceitos importantes como:

• HTML Semântico
• Organização de CSS
• Componentização
• CSS Variables (Design Tokens)
• Flexbox
• CSS Grid
• Responsividade
• Hierarquia Visual
• Boas práticas de Front-end
• Estrutura profissional de projetos

---

📁 Estrutura do Projeto

powerfit-studio/
│
├── assets/
│   ├── icons/
│   └── images/
│
├── css/
│   └── style.css
│
├── index.html
└── README.md

---

🎨 Design

O projeto utiliza uma identidade visual inspirada em academias premium, priorizando uma interface moderna e organizada.

Características do layout:

• Tema escuro
• Paleta em tons de vermelho
• Tipografia Montserrat + Inter
• Componentes reutilizáveis
• Cards padronizados
• Espaçamentos definidos através de Design Tokens

---

📱 Responsividade

A aplicação foi desenvolvida utilizando a abordagem Desktop First, adaptando o layout para diferentes tamanhos de tela através de Media Queries.

Breakpoints utilizados:

• Desktop
• Tablet (992px)
• Mobile (768px)

---

🤖 Utilização de Inteligência Artificial

Durante o desenvolvimento deste projeto utilizei ferramentas de Inteligência Artificial como apoio ao processo de aprendizagem e desenvolvimento.

• ChatGPT: utilizado como mentor para revisão do código, boas práticas, organização da arquitetura CSS, sugestões de melhorias e esclarecimento de dúvidas.
• Google Gemini: utilizado para gerar as imagens ilustrativas presentes na landing page.

Todo o desenvolvimento, estruturação do projeto e implementação do código foram realizados por mim.

---

📚 Aprendizados

Ao concluir este projeto, pratiquei:

• Estruturação semântica em HTML5
• Organização de arquivos
• CSS moderno
• Componentização
• Flexbox
• CSS Grid
• Responsividade
• Pseudo-classes
• Pseudo-elementos
• Transições e animações
• Organização de Design System utilizando CSS Variables

---

🚀 Próximos Passos

Algumas melhorias planejadas para versões futuras:

• Adicionar JavaScript
• Menu Mobile
• Validação do formulário
• Integração com WhatsApp
• Integração com Google Maps
• Scroll Animations

---

👨‍💻 Autor

Desenvolvido por Matheus Martins

🌐 GitHub Pages:

(Link)