How to animate the background and the card in React?

// Get a hook function
const { useState } = React;

const Example = ({ }) => {
    const services = [
        {
            id: 1,
            title: 'training & education',
            description: 'creation of workshops and educational materials to guide brands through a fast-paced industry',
            image: 'https://i.imgur.com/XVtwOQH.png',
        },
        {
            id: 2,
            title: 'development',
            description: 'development and deployment of comprehensive gaming experiences',
            image: 'https://i.imgur.com/XVtwOQH.png',
        },
        {
            id: 3,
            title: 'NFT plug-n-play',
            description: "creation of web3 solutions built around customers' business, technical, and legal need",
            image: 'https://i.imgur.com/XVtwOQH.png',
        },
        {
            id: 4,
            title: 'concept creation',
            description: 'conception of creative engagement formats embedded in innovative storytelling',
            image: 'https://i.imgur.com/XVtwOQH.png',
        },
        {
            id: 5,
            title: 'strategic consulting',
            description: 'definition of go-to-market strategies & long-term roadmaps for gaming initiatives based on clients’ strategic objectives',
            image: 'https://i.imgur.com/XVtwOQH.png',
        },
    ];

    return (
        <div className="container">
            <div className="services">
                {
                    services.map((service) => (<div className="card_item" key={service.id}>
                        <div className="images">
                            <img src={service.image} alt="image" />
                        </div>
                        <div className="description_container">

                            <p className="card_item_title">{service.title}</p>
                            <p className="card_item_description">{service.description}</p>
                        </div>
                    </div>))
                }
            </div>

        </div>
    );
};

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Example />
);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  height: 753px;
  max-width: 82rem;
  background-color: #000;
  padding: 30px 0;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  background-image: url('/images/spin_background.png');
  background-size: cover;
}

.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card_item {
  max-width: 439px;
  height: max-content;
  background-color: #fff;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 23px;
}

.card_item:nth-child(2) {
  margin-top: 70px;
}

.card_item:nth-child(3) {
  margin-left: 140px;
}

.card_item:nth-child(4) {
  margin-top: 150px;
  margin-right: -40px;
}

.services .card_item .images {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card_item_title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 5px;
  color: #000 !important;
}

.card_item_description {
  max-width: 307px;
  font-size: 16px;
  color: #000 !important;
  margin: 0;
}

@media only screen and (max-width: 992px) {
  /* Responsive adjustments if needed */
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>