I'll create a website for your barber shop with a home page that introduces the business and its five employee hairdressers. The layout will have a light grey background with black text. Let's build this using Next.js and Tailwind CSS.

This code creates a simple website for your barber shop with a home page that introduces the business and its five employee hairdressers. The layout has a light grey background (bg-gray-100) with black text (text-black). Here's a breakdown of what I've created:

1. A layout file (app/layout.tsx) that sets up the overall structure of the site, including the header and footer.
2. A home page (app/page.tsx) that introduces the barber shop and displays information about the employees.
3. A header component (app/components/header.tsx) with the shop name and navigation links.
4. A footer component (app/components/footer.tsx) with a copyright notice.
5. An EmployeeCard component (app/components/employee-card.tsx) to display information about each hairdresser.

The home page includes:

• A welcome section with the shop's name and a brief description.
• An "About Us" section describing the shop's services and atmosphere.
• A "Meet Our Team" section showcasing the five employee hairdressers.

To complete the setup, you'll need to add a globals.css file in the app directory with the following content to enable Tailwind CSS:

This website provides a clean, professional look for your barber shop. You can further customize the colors, add more pages (like a detailed services page or a contact page), and replace the placeholder images with actual photos of your employees and shop.

I'll update the website to name it "Kings Barbers" and create a services page with the requested services and prices. Let's make these changes:

I've made the following changes to rebrand the website as "Kings Barbers" and add a services page:

1. Updated the layout file with the new name and description.
2. Modified the header component to display "Kings Barbers" and added a link to the new services page.
3. Updated the home page with the new name and adjusted the description to fit the "royal" theme.
4. Created a new services page (app/services/page.tsx) that lists the different services with their options and prices.
5. Updated the footer with the new name.

The services page includes the following services as requested:

• Taper Fade (with options for High, Medium, and Low)
• Dreads
• Twists
• Box Braids
• Hair Wash
• Cornrows

Each service is displayed in a card with its name, options (if applicable), and price range.

To make sure the UI components work correctly, you'll need to install the shadcn/ui components. You can do this by running the following command in your project directory:

This will add the necessary Card components used in the services page.

With these changes, your "Kings Barbers" website now has a home page introducing the business and a services page listing the various services offered with their prices. The design maintains the light grey background with black text as requested earlier.