Restaura é uma landing page moderna e responsiva para restaurantes, cafés e negócios gastronômicos que desejam apresentar seu cardápio, missão, avaliações de clientes e informações de contato de forma elegante e envolvente.
Menu
🏠 Início
ℹ️ Sobre
🧩 Tecnologias
✨ Funcionalidades
🗂️ Arquitetura de dados
📁 Estrutura do projeto
⚙️ Configuração
📜 Scripts disponíveis
🛣️ Rotas
🤝 Contribuidores - proprietário
📞 Contato
📄 Licença
O Restaura é uma aplicação front-end criada como landing page para um restaurante fictício, com foco em apresentar o cardápio, equipe, missão, ambiente e formas de contato de forma visualmente atrativa e responsiva.
O objetivo principal é demonstrar boas práticas de UI/UX com React + Vite + TailwindCSS + Motion, fornecendo uma base que pode ser facilmente adaptada para restaurantes reais ou outros negócios do ramo alimentício com animações modernas e elegantes.
-
React (19.0.0)
Biblioteca JavaScript para construção de interfaces de usuário baseadas em componentes. -
Vite (6.3.1)
Ferramenta de build e dev server extremamente rápido para projetos modernos em React. -
TailwindCSS (4.1.5)
Framework CSS utilitário para criação rápida de interfaces responsivas e personalizáveis. -
Framer Motion (12.15.0)
Biblioteca de animações para React, utilizada para transições suaves e elementos animados na página. -
React Icons (5.5.0)
Coleção de ícones populares para React, utilizada para ícones de seções, redes sociais e navegação. -
ESLint (9.22.0)
Ferramenta de linting para manter a qualidade e padronização do código. -
Prettier (3.5.3)
Formatador de código para manter um estilo consistente em todo o projeto.
-
Seção Hero / Banner principal
Apresenta o nome do restaurante, com um vídeo de fundo. -
Seção de Pratos em Destaque
Lista de pratos com imagens e descrições, utilizando o componenteDishCard. -
Seção de Missão / Sobre o Restaurante
Explica a proposta de valor, conceito e diferenciais do restaurante. -
Seção de Expertise / Especialidades
Mostra os tipos de culinária, técnicas ou especialidades do restaurante. -
Seção de Avaliações (Reviews)
Fotos de clientes que reforçam a credibilidade do estabelecimento. -
Seção de Contato
Informações de endereço, telefone, redes sociais e formas de contato. -
Footer informativo
Rodapé com créditos, direitos autorais e links importantes.
Esta seção documenta como os dados são gerenciados na aplicação.
Fonte de Dados
Atualmente, o projeto utiliza dados locais definidos em src/utils/data.js, representando pratos, depoimentos, seções de conteúdo e demais informações exibidas na interface.
Essa abordagem facilita a prototipação e pode ser posteriormente substituída por uma API real.
Caso seja necessário integrar com uma API real.
src/
├── assets/ # Imagens, ícones e recursos estáticos
├── components/ # Componentes reutilizáveis da interface
│ ├── NavBar.jsx # Navegação principal do site
│ ├── HeroSection.jsx # Seção hero / banner inicial
│ ├── Dishes.jsx # Lista de pratos em destaque
│ ├── DishCard.jsx # Card individual de prato
│ ├── Expertise.jsx # Seção de especialidades / expertise
│ ├── Mission.jsx # Seção de missão / sobre o restaurante
│ ├── Review.jsx # Depoimentos / avaliações de clientes
│ ├── ContactSection.jsx # Seção de contato e informações
│ ├── Footer.jsx # Rodapé do site
│ └── ... # Outros componentes auxiliares
├── utils/
│ └── data.js # Dados mockados usados pela interface
├── index.css # Estilos globais e integração com TailwindCSS
├── App.jsx # Composição principal da página
└── main.jsx # Ponto de entrada da aplicação React + ViteSiga os passos abaixo para clonar e executar o projeto localmente.
# 1. Clone o repositório
git clone git@github.com:ofs-org/restaura.git
# 2. Acesse a pasta do projeto
cd restaura
# 3. Instale as dependências
npm install
# 4. Inicie o servidor de desenvolvimento
npm run dev
# 5. Acesse no navegador (endereço padrão do Vite)
http://localhost:5173Os scripts configurados em package.json são:
-
npm run dev
Inicia o servidor de desenvolvimento Vite. -
npm run build
Gera a versão de produção da aplicação. -
npm run preview
Executa localmente a build de produção para pré-visualização. -
npm run lint
Roda o ESLint em todo o projeto para verificar problemas de código.
Este projeto é uma single page application simples construída com React e Vite, sem uso de react-router-dom.
Todas as seções (Hero, Sobre, Pratos, Avaliações, Contato, etc.) são renderizadas dentro da mesma página principal (App.jsx), com navegação feita via links de âncora na NavBar.
Clique na seta abaixo e veja como você pode contribuir para o projeto
Como fazer uma contribuição ao Projeto ?
Familiarize-se com a documentação do projeto, que geralmente inclui guias de instalação.
Explore o código do projeto para entender sua estrutura e funcionamento.
Faça um Fork
Crie uma cópia (fork) do repositório original em sua conta do GitHub.
Clone o Repositório
Isso criará uma cópia local do projeto, onde você poderá fazer suas modificações.
Crie uma Nova Branch:
Crie uma nova branch para isolar suas alterações.
Isso facilita a organização do seu trabalho e a criação de pull requests.
Faça as Alterações:
Crie funcionalidades, mude estilos ou resolva bugs que irão contribuir para a melhoria do Projeto.
Crie um Pull Request:
Inclua uma descrição clara das suas alterações e explique como elas resolvem o problema ou melhoram o projeto.
Solicitação: Envie um pull request para o repositório original, solicitando que suas alterações sejam incorporadas ao projeto.
Revise e Responda a Feedback:
Colabore: Os mantenedores do projeto podem solicitar alterações ou fornecer feedback sobre o seu código.
- 😁Obrigado por chegar até aqui!
Released in 2026 – This project is under the MIT license.