Tattoo Shop - Website with Next.js

Start your practice with Next.js by creating a commercial website for a hypothetical tattoo artist named Sandro Luz. Build the entire Next.js project from scratch.

📸 Project Preview

🤓 Before you start

In this mini project, there is no initial template/boilerplate. You will need to start the project from scratch.

🔨 Requirements

• Initialize the project from scratch using create-next-app
• Create 4 pages for "Sandro Luz Tattoo Shop":
  • Home
  • Services
  • About
  • Contact
• Use all native Next.js features, such as: next/link, next/image, next/font;
• The contact button (both in the navbar and on the contact page) should be a link to WhatsApp's click-to-chat functionality (https://faq.whatsapp.com/5913398998672934). This link should open in a new tab;
• Use the App Router (instead of the Pages Router);
• Use images directly from Figma (exporting them);
• As a suggestion, use TailwindCSS for styling.

🔨 Extra Challenge for those who want to go further

• Add some animations. This could be for the image and text on the home page or the navbar when switching links, for example.

🎨 Suggested Design

We have a suggested design in Figma. However, feel free to create the application based on your own creativity.

Figma

🔗 Link do design

Deploy

🔗 Link

👉🏽 About this mini-project

What you will practice:

Next.js

• create-next-app
• next/link
• next/image
• next/font
• App Router
• Nested Routes e Layouts
• Server components

TailwindCSS

• Design "pixel-perfect" com TailwindCSS

Prerequisites

No prerequisites with Next.js. Basic React knowledge is required.