constants**index.ts

export const products = [
  {
    name: "Futuristic shoes",
    description: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
       doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
       architecto beatae vitae dicta sunt explicabo. 
       Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi`,
    images: [
      "/blueShoes1.png",
      "/blueShoes4.jpg",
      "/blueShoes2.png",
      "/blueShoes3.png",
    ],
    price: 25,
  },
];

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.product-card {
  perspective: 1000px;
}

.card {
  position: relative;
  width: 500px;
  height: 500px;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  /* Your back face styling */

  transform: rotate3d(1, 1, -0, -180deg);
}

.flipped {
  transform: rotate3d(-1.4, -1.4, 0.2, 180deg);
}

.button {
  /* Other button styles such as size, font, etc. */
  background-size: 200% 200%;
  background-image: linear-gradient(
    45deg,
    #00b7eb,
    #2a2aff,
    #2a2aff,
    #3535f9,
    #0000ff,
    #0000cc,
    #0000cc
  );
  animation: none; /* Prevent the animation from playing initially */
  /* Additional styles for the non-hover state can go here */
}

.button:hover {
  animation: Gradient 5s ease infinite;
}

@keyframes Gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}