Marcenaria Prime - Vue.js + Vite

Um site moderno e responsivo para uma marcenaria, desenvolvido com Vue.js 3, Vite e Tailwind CSS.

🚀 Funcionalidades

• Design Responsivo: Layout adaptável para todos os dispositivos
• Navegação Suave: Scroll suave entre seções
• Galeria Interativa: Modal de imagens do portfólio
• Carrossel de Depoimentos: Depoimentos rotativos automáticos
• Formulário de Contato: Formulário funcional com validação
• Botão WhatsApp: Link direto para contato via WhatsApp
• Animações Fluidas: Transições e animações CSS
• Menu Mobile: Menu hamburger para dispositivos móveis

🛠️ Tecnologias Utilizadas

• Vue.js 3 - Framework JavaScript reativo
• Vite - Build tool rápida e moderna
• Tailwind CSS - Framework CSS utilitário
• Composition API - API moderna do Vue.js
• PostCSS - Processamento de CSS

📦 Instalação

1. Clone o repositório:

git clone <seu-repositorio>
cd marcenaria-prime-vue

2. Instale as dependências:

npm install

3. Execute o servidor de desenvolvimento:

npm run dev

4. Acesse o projeto em http://localhost:3000

🏗️ Scripts Disponíveis

• npm run dev - Inicia o servidor de desenvolvimento
• npm run build - Gera a build de produção
• npm run preview - Visualiza a build de produção

📁 Estrutura do Projeto

src/
├── components/          # Componentes Vue
│   ├── Header.vue
│   ├── HeroSection.vue
│   ├── ServicesSection.vue
│   ├── ServiceCard.vue
│   ├── PortfolioSection.vue
│   ├── PortfolioItem.vue
│   ├── TestimonialsSection.vue
│   ├── ContactSection.vue
│   ├── ContactInfo.vue
│   ├── ContactForm.vue
│   ├── FooterSection.vue
│   ├── WhatsAppButton.vue
│   ├── ImageModal.vue
│   └── Notification.vue
├── App.vue              # Componente principal
├── main.js              # Entrada da aplicação
└── style.css            # Estilos globais

🎨 Personalização

Cores

As cores do projeto estão definidas no tailwind.config.js:

• primary: #2C1810 (Marrom escuro)
• secondary: #8B4513 (Marrom médio)
• accent: #D4AF37 (Dourado)
• wood: #DEB887 (Bege madeira)
• cream: #FFF8DC (Creme)

Componentes

Cada seção do site é um componente separado, facilitando a manutenção e customização.

📱 Responsividade

O projeto utiliza classes responsivas do Tailwind CSS:

• sm: para telas pequenas (640px+)
• md: para telas médias (768px+)
• lg: para telas grandes (1024px+)
• xl: para telas extra grandes (1280px+)

🔧 Configuração do WhatsApp

Para alterar o número do WhatsApp, edite o componente WhatsAppButton.vue:

data() {
  return {
    phoneNumber: '5516999999999', // Seu número aqui
    message: 'Sua mensagem personalizada'
  }
}

📧 Formulário de Contato

O formulário atualmente exibe uma notificação de sucesso. Para integrar com um backend:

1. Edite o método handleFormSubmit no App.vue
2. Implemente a chamada para sua API
3. Trate os retornos de sucesso e erro

🎯 SEO e Performance

• Imagens otimizadas do Unsplash
• CSS minificado em produção
• JavaScript otimizado pelo Vite
• Fontes carregadas de forma otimizada

📄 Licença

Este projeto está sob a licença MIT.