27 lines
957 B
JavaScript
27 lines
957 B
JavaScript
|
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}`} />
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|