ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "motion/react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface AgentSphereProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function AgentSphere({ className }: AgentSphereProps) {
|
|
const reduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<motion.div
|
|
className={cn(
|
|
"relative flex size-16 items-center justify-center sm:size-20",
|
|
className
|
|
)}
|
|
aria-hidden
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: reduceMotion ? 0 : [0, -5, 0],
|
|
}}
|
|
transition={{
|
|
opacity: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
|
|
scale: { type: "spring", stiffness: 320, damping: 24 },
|
|
y: reduceMotion
|
|
? undefined
|
|
: { duration: 4, repeat: Infinity, ease: "easeInOut" },
|
|
}}
|
|
>
|
|
<motion.div
|
|
className="absolute inset-0 rounded-full bg-primary/15 blur-xl"
|
|
animate={
|
|
reduceMotion
|
|
? undefined
|
|
: { scale: [1, 1.12, 1], opacity: [0.6, 0.9, 0.6] }
|
|
}
|
|
transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
|
|
/>
|
|
<div
|
|
className="relative size-full rounded-full shadow-lg"
|
|
style={{
|
|
background:
|
|
"radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--brand-primary) 55%, white), var(--brand-primary) 45%, var(--brand-primary-dark) 100%)",
|
|
}}
|
|
>
|
|
<div className="absolute inset-[18%] rounded-full bg-white/20 blur-sm" />
|
|
<div className="absolute left-[22%] top-[18%] size-[28%] rounded-full bg-white/35 blur-[2px]" />
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|