export const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.5 },
};
export const staggerContainer = {
  animate: { transition: { staggerChildren: 0.1 } },
};
import React from "react";

export const BackgroundElements = () => {
  const circles = [
    { style: { top: "20%", right: "20%", width: "256px", height: "256px" }, className: "bg-amber-500/5" },
    { style: { bottom: "10%", left: "20%", width: "320px", height: "320px" }, className: "bg-blue-500/5" },
     { style: { bottom: "40%", left: "10%", width: "320px", height: "320px" }, className: "bg-blue-500/5" },
      { style: { bottom: "60%", left: "60%", width: "320px", height: "320px" }, className: "bg-blue-500/5" }
  ];

  return (
    <>
      {circles.map((circle, index) => (
        <div key={index} style={circle.style} className={`absolute rounded-full pointer-events-none ${circle.className}`} />
      ))}
    </>
  );
};