Hey everyone! 👋

I hope you're all doing well. I've been working on a project using Next.js and Tailwind CSS that involves having a HERO section on every page, each with a different background image. However, I'm encountering a problem with dynamic background rendering. Here's a breakdown:

### Tailwind Configuration:

// tailwind.config.js
module.exports = {
  // ... other configurations
  theme: {
    extend: {
      backgroundImage: {
        home: "url('/assets/images/bg/hero-bg.jpg')",
        store: "url('/assets/images/bg/store-bg.jpg')",
        about: "url('/assets/images/bg/about-bg.jpg')",
        contact: "url('/assets/images/bg/contact-bg.jpg')",
        cta: "url('/assets/images/bg/CTA-bg.jpg')",
      },
    },
  },
}

### Constants for About Page:

// constants.js
export const aboutHero = [
  { background: "bg-about", heading: "About Us" }
];

### Component Implementation:

// SomeComponent.js
import { aboutHero } from 'path/to/constants';
import Hero from 'path/to/Hero';

// ...

{aboutHero.map((about, index) => (
  <Hero key={index} image={about.background} heading={about.heading} />
))}

### Dynamic Hero Component:

// Hero.js
const Hero = ({ image, topText, heading, button }) => {
  return (
    <section
      className={`hero-radius min-h-[87vh] ${image} bg-cover bg-center`}
    >
      {/* Content goes here */}
    </section>
  );
};

export default Hero;

### Problem Statement:
The problem arises when dynamically passing the background to the Hero component; it doesn't seem to work as expected. However, hardcoding the background, such as "bg-home" or "bg-about," works perfectly fine.

Any insights on what might be causing this issue would be greatly appreciated! 🙏