I'll create a simple Next.js application that displays a list of products. Let's build this using the App Router and Tailwind CSS.

This is a simple Next.js application that displays a list of products in a responsive grid layout. Here's what I've created:

1. Main Page (app/page.tsx): Contains mock product data and renders the ProductList component.
2. ProductList Component: Displays products in a responsive grid layout that adapts to different screen sizes.

3. ProductCard Component: Displays individual product information in a card format with:

   • Product image
   • Product name and category
   • Product description
   • Price
   • "Add to Cart" button
4. Types: A simple type definition for the product data structure.

The application uses:

• Next.js App Router
• Tailwind CSS for styling
• shadcn/ui components for UI elements (Card, Badge, Button)
• Responsive design that works on mobile, tablet, and desktop

To run this application:

1. Create a new Next.js project:

2. Install shadcn/ui:

3. Install the required components:

4. Copy the code files into their respective locations in your project.
5. Run the development server:

You can now view your product listing application at http://localhost:3000.

I'll change the button color to yellow. Let's modify the ProductCard component:

I've updated the "Add to Cart" button in the ProductCard component to have a yellow background. The button now has:

1. A yellow background (bg-yellow-500)
2. A slightly darker yellow on hover (hover:bg-yellow-600)
3. Black text for better contrast with the yellow background (text-black)

This change will apply to all product cards in your listing. The yellow buttons will stand out more prominently against the card background, drawing attention to the call-to-action.