Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/victorbravim/kaffe
Template page coffee vending
https://github.com/victorbravim/kaffe
coffee nextjs tailwind typescript
Last synced: 11 days ago
JSON representation
Template page coffee vending
- Host: GitHub
- URL: https://github.com/victorbravim/kaffe
- Owner: VictorBravim
- License: mit
- Created: 2024-05-02T14:17:08.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-26T20:16:45.000Z (8 months ago)
- Last Synced: 2024-11-09T17:13:58.282Z (2 months ago)
- Topics: coffee, nextjs, tailwind, typescript
- Language: TypeScript
- Homepage: https://kaffe-coral.vercel.app
- Size: 10.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ☕ Kaffe
## 🚀 Overview
Kaffe is a website project developed in React with Next.js, focused on presenting a fictional coffee shop with different sections such as products, company information and a contact form.
## 📋 Requirements
- Node.js
- npm ou yarn
- react-slick
## 🔧 Installation
1. Clone the Repository:
```
git clone https://github.com/VictorBravim/Kaffe.git
cd kaffe
```
2. Install Dependencies:
```
npm install
# ou
yarn install
```
3. Run the Project:
```
npm run dev
# ou
yarn dev
```
## 🛠️ Project Structure
- RootLayout.tsx: Defines the base layout of the site, including font imports (Montserrat), global styles (globals.css) and metadata settings.
- Page.tsx: Main component of the home page, which makes up the complete structure of the page, including navigation, hero, products, "About" section, contact section and footer.
- Nav.tsx: Site navigation, allows changing sections by clicking on buttons and visually highlights the current section.
- Hero.tsx: Image slider in the hero section of the home page, using react-slick for carousel functionality.
- Produtos.tsx: Renders a list of products with images and associated information, using static data.
- About.tsx: Presents information about different topics in content cards.
- Contact.tsx: Contact form that captures user information (name, email, message) and handles submission.
- Footer.tsx: Website footer with links to different sections and collapsible menu functionality.
## 📄 License
- This project is licensed under the [MIT License](LICENSE).