Recanto Belle Vue 🏨

Bem-vindo ao repositório do site do Recanto Belle Vue. Este projeto é uma vitrine digital moderna e elegante, desenvolvida para apresentar a beleza e os serviços do local, com foco em uma experiência de usuário imersiva e animações de alta performance.

➡️ Visite o site ao vivo!

---

📜 Sobre o Projeto

O site do Recanto Belle Vue foi desenvolvido para oferecer uma experiência de usuário agradável, refletindo a tranquilidade e a beleza do local. Com uma interface limpa, animações sutis e design totalmente responsivo, garante uma navegação perfeita em qualquer dispositivo. O site conta com 14 páginas, sendo que em 7 delas as informações são carregadas dinamicamente, proporcionando maior flexibilidade e facilidade de atualização.

✨ Funcionalidades

• Design Responsivo: Totalmente adaptado para desktops, tablets e smartphones.
• Animações de Alta Performance: Efeitos visuais fluidos e imersivos, como o pan nas imagens de fundo, construídos com GSAP (GreenSock) para uma experiência de usuário premium.
• Navegação Dinâmica: Transições de página rápidas e suaves com React Router, sem a necessidade de recarregar o site a cada clique.
• Carrossel de Imagens Interativo: Galerias de imagens e depoimentos apresentados de forma elegante e interativa com Swiper.js.
• Componentização com React: Estrutura de código moderna, escalável e de fácil manutenção.
• Estilização Avançada: Uso de SASS/SCSS para criar um design consistente e de fácil manutenção.

---

📸 Screenshots

Desktop	Mobile

---

📂 Estrutura de Pastas

O código-fonte do projeto está organizado na pasta src, seguindo uma arquitetura modular que visa a clareza e a facilidade de manutenção. Os componentes reutilizáveis, como o cabeçalho (Header), rodapé (Footer) e os cards de depoimentos, ficam em src/components. As páginas principais da aplicação, como a Home, estão localizadas em src/pages. Todos os ativos estáticos, como imagens e ícones, são armazenados em public/assets, garantindo que a lógica e os recursos visuais do projeto permaneçam bem-organizados e desacoplados.

Recanto-Belle-Vue/
├── public/               # Arquivos estáticos e o favicon
|   ├── assets/           # Imagens, ícones e fontes
├── src/
│   ├── components/       # Componentes reutilizáveis (Header, Footer, Card, etc.)
│   ├── pages/            # Páginas principais da aplicação (Home, Sobre, etc.)
│   └── main.jsx          # Ponto de entrada da aplicação React
└── package.json          # Dependências e scripts do projeto

---

🛠️ Tecnologias Utilizadas

Este projeto foi construído com as seguintes tecnologias:

• React: A tecnologia principal para construir a interface visual e interativa do site.
• Vite: Ferramenta de desenvolvimento moderna que proporciona um ambiente de trabalho rápido e otimizado.
• React Router: Biblioteca para gerenciar a navegação e as rotas da aplicação.
• GSAP (GreenSock): Biblioteca de animação profissional para criar os efeitos visuais fluidos.
• Swiper.js: Para a criação de carrosséis de imagens modernos e responsivos.
• SASS/SCSS: Ferramenta que ajuda a escrever e organizar o código de design (CSS) de forma mais eficiente.
• ESLint: Ferramenta que garante a qualidade e a consistência do código, facilitando a manutenção.

---

🚀 Começando

Siga estas instruções para obter uma cópia do projeto em execução na sua máquina local para fins de desenvolvimento e teste.

Pré-requisitos

Você precisa ter o Node.js e o npm (ou Yarn) instalados.

Instalação

1. Clone o repositório:

   git clone https://github.com/emerson-elias/Recanto-Belle-Vue.git
   

2. Navegue até o diretório do projeto:

   cd Recanto-Belle-Vue
   

3. Instale as dependências:

   npm install
   

Executando o Projeto

Para iniciar o servidor de desenvolvimento:

npm run dev

Abra http://localhost:3000 (ou a porta indicada no seu terminal) no seu navegador para ver o resultado.

---

👨‍💻 Autor

• Emerson - Desenvolvimento
  • GitHub: @emerson-elias
  • LinkedIn: emerson-elias

---

📄 Licença

Este projeto é para fins de portfólio. Sinta-se à vontade para usá-lo como inspiração.

---