"use client"; import React, { useRef } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; import { ChevronRight, Shield, Database, Globe, Cpu, Lock, Fingerprint } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface HeroRadialCoreProps { badgeText?: string; headline?: string; description?: string; primaryAction?: string; secondaryAction?: string; onPrimaryClick?: () => void; onSecondaryClick?: () => void; className?: string; } const defaultProps: HeroRadialCoreProps = { badgeText: "SYSTEM_CORE ONLINE", headline: "Centralize your security.", description: "A unified command center for your entire infrastructure. Monitor, deploy, and protect your data across global nodes in real-time.", primaryAction: "Initialize Core", secondaryAction: "View Architecture", }; export default function HeroRadialCore(props: HeroRadialCoreProps) { const { badgeText, headline, description, primaryAction, secondaryAction, onPrimaryClick, onSecondaryClick, className, } = { ...defaultProps, ...props }; const containerRef = useRef(null); const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start start", "end start"], }); const yText = useTransform(scrollYProgress, [0, 1], [0, 100]); const opacityText = useTransform(scrollYProgress, [0, 0.8], [1, 0]); return (

{/* Background Noise for texture */}

{/* Ambient Core Glow */}

{/* --- Orbital Rings System --- */}

{/* Inner Ring */}

{/* Middle Ring */}

{/* Outer Ring */} {/* Trailing gradient effect on SVG path */}

{/* --- Central Content (The Core) --- */} {/* Core Pulsing Badge */}

{badgeText}

{headline} {description} {/* Bottom Fade Gradient to blend with next section */}

); }