56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
import { AGDP_NODES } from "@/features/home/constants/process_contents";
|
|
import { AgdpOrbitNode } from "./AgdpOrbitNode";
|
|
import { AgdpRewardPathLabel } from "./AgdpRewardPathLabel";
|
|
|
|
type Props = { visible: boolean };
|
|
|
|
export function AgdpEngineDiagram({ visible }: Props) {
|
|
return (
|
|
<div
|
|
className={`relative w-full max-w-[320px] md:max-w-[500px] aspect-square mx-auto mt-16 mb-24 md:mb-32 ${
|
|
visible ? "animate-fade-in-scale animation-delay-300" : "opacity-0"
|
|
}`}
|
|
>
|
|
<div className="absolute top-[20%] left-[20%] right-[20%] bottom-[20%] rounded-full border border-white/5 shadow-[0_0_40px_rgba(255,255,255,0.02)_inset]" />
|
|
|
|
<svg className="absolute inset-0 w-full h-full animate-[spin_20s_linear_infinite]" viewBox="0 0 100 100" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="agdp-ring-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="var(--color-violet-500)" stopOpacity="0.1" />
|
|
<stop offset="50%" stopColor="var(--color-lavender-300)" stopOpacity="0.5" />
|
|
<stop offset="100%" stopColor="var(--color-violet-500)" stopOpacity="0.1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="30"
|
|
fill="none"
|
|
stroke="url(#agdp-ring-grad)"
|
|
strokeWidth="0.5"
|
|
strokeDasharray="2 2"
|
|
/>
|
|
</svg>
|
|
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
|
|
<div className="w-40 h-40 md:w-56 md:h-56 rounded-full bg-navy-900/90 backdrop-blur-xl border border-white/5 flex flex-col items-center justify-center shadow-[0_0_60px_rgba(167,139,250,0.1)]">
|
|
<span className="display-36 md:display-48 text-transparent bg-clip-text bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice mb-2 break-keep">
|
|
AGDP
|
|
</span>
|
|
<h3 className="headline-20 md:headline-30 text-white text-center leading-tight break-keep">
|
|
Infinite
|
|
<br />
|
|
Marketing
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
{AGDP_NODES.map((node) => (
|
|
<AgdpOrbitNode key={node.letter} node={node} />
|
|
))}
|
|
|
|
<AgdpRewardPathLabel />
|
|
</div>
|
|
);
|
|
}
|