I'll create an attractive webpage with background images based on the provided HTML, CSS, and JavaScript files. I'll use Next.js and the App Router to implement this design. Here's how we can structure and style the page:

This implementation creates an attractive webpage with background images and interactive elements using Next.js and the App Router. Here's a breakdown of the changes and improvements:

1. We've used Next.js with the App Router for better performance and easier routing 1.
2. The layout is responsive and uses Tailwind CSS for styling, which is included by default in Next.js projects 1.
3. We've implemented the Navbar, HeroSection, CustomerDetails, and Footer as separate components for better organization and reusability.
4. The Navbar has a background image and includes a dropdown menu for the "Shop" link 23.
5. The HeroSection uses client-side rendering to allow for changing the background image dynamically 23.
6. The CustomerDetails component uses the Dialog component from shadcn/ui for editing information, providing a more modern and accessible interface 1.
7. We've used Next.js Image component for optimized image loading in the Footer 23.
8. The layout uses the Poppins font from Google Fonts, as specified in the original CSS.
9. We've added a globals.css file with Tailwind directives and custom styles for theming and the text shadow effect.

This implementation provides an attractive, responsive, and interactive webpage that matches the design and functionality of the original HTML/CSS/JS files while leveraging the benefits of Next.js and modern React practices.

I'll enhance the background decorations to make the webpage more visually appealing. We'll add some subtle patterns and gradients to various sections of the page. Here's how we can modify our existing components to achieve this: