Gustavo G.

Projetos (Aguardando Propostas):

• Criação de landing page responsiva para clínica de estética

  Desenvolvimento Web | Orçamento: Aberto | Publicado: | Propostas: 26

  # Projeto: Criação de **Landing Page Responsiva** para Clínica de Estética
  ### HTML + CSS Moderno (Compatível com Next.js/React)
  
  ---
  
  ## Origem do Projeto
  O design da Landing Page foi **originado a partir de um projeto no Canva**, que pode ser compartilhado em formato editável para futuras iterações.
  Atualmente, a versão de referência está publicada em:
  **[https://dragiulianesodre.my.canva.site/](https://dragiulianesodre.my.canva.site/)**
  
  O objetivo é transformar esse layout em um código **HTML e CSS responsivo, semântico e otimizado**, pronto para integração com **Next.js/React**.
  
  ---
  
  ## Objetivo
  Desenvolver a Landing Page com foco em:
  - **Apresentação profissional**
  - **Clareza dos valores**
  - **Exposição de resultados reais**
  - **Conversão de leads** através de chamadas para ação estratégicas (Agendar Consulta, WhatsApp, Resultados)
  
  ---
  
  ## Requisitos Técnicos
  
  ### 1. Responsividade Total
  - Layout fluido para **desktop, tablet e mobile**.
  - Uso de **CSS Flexbox e Grid** para organização dos elementos.
  - **Mobile-first approach**.
  
  ### 2. Boas Práticas de HTML
  - Estrutura semântica (`<header>`, `<main>`, `<section>`, `<article>`, `<footer>`).
  - Hierarquia correta de headings (H1, H2, H3).
  - Texto alternativo (`alt`) para imagens.
  - Acessibilidade: contraste, navegação via teclado, ARIA attributes.
  
  ### 3. Boas Práticas de CSS
  - Organização modular, pronto para **CSS Modules ou Styled Components**.
  - Uso de variáveis CSS para **cores, fontes e espaçamentos**.
  - Classes utilitárias para consistência visual.
  - Preparado para **dark mode** (opcional).
  
  ### 4. Integração com Next.js/React
  - Estrutura pensada em **componentização**:
  - Navbar
  - Hero
  - Valores
  - Sobre
  - Tratamentos
  - Depoimentos
  - Resultados
  - Consultório
  - Contato
  - Preparado para receber **props** e dados dinâmicos (ex: depoimentos, tratamentos).
  - Imagens otimizadas compatíveis com `next/image`.
  
  ### 5. Performance, SEO e Conversão
  - Otimização para **Core Web Vitals** (CLS, LCP, FID).
  - Lazy loading em imagens e vídeos.
  - Metatags SEO semânticas.
  - Preparado para **i18n (internacionalização)**.
  - **CTAs** claros e bem posicionados.
  
  ---
  
  ## Estrutura da Landing Page
  1. **Header / Navbar** – logo, menu, CTAs principais
  2. **Hero (Destaque Inicial)** – imagem + headline + CTA
  3. **Valores** – Confiança, Excelência, Integridade
  4. **Sobre Mim** – apresentação da profissional
  5. **Tratamentos** – cards de serviços
  6. **Depoimentos** – avaliações de clientes
  7. **Resultados** – galeria de antes e depois
  8. **Consultório Boutique** – imagem + descrição
  9. **Contato / Onde Nos Encontrar** – endereço, telefone, WhatsApp, email, mapa
  10. **Footer** – links rápidos e redes sociais
  
  ---

  Habilidades desejadas: Less/SASS/SCSS, HTML5, PSD para HTML e CSS3.