@backbay/glia 0.2.0-alpha.1

package/dist/components/ClusterHero/sections/CTASection.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+import { cn } from "../../../lib/utils";
+import { getClusterConfigWithResolvedUrls } from "../config";
+const CTA_CONTENT = {
+    alexandria: {
+        headline: "Begin your research journey",
+        subtext: "Unlock the archives. Let curiosity guide your path through infinite knowledge.",
+        primaryLabel: "Enter Alexandria",
+        primaryHref: "/clusters/alexandria",
+        secondaryLabel: "Read the documentation",
+        secondaryHref: "/docs/alexandria",
+    },
+    alpha: {
+        headline: "Start building today",
+        subtext: "From nothing, everything. Your next creation begins with a single step.",
+        primaryLabel: "Launch Alpha",
+        primaryHref: "/clusters/alpha",
+        secondaryLabel: "Explore the guides",
+        secondaryHref: "/docs/alpha",
+    },
+    opus: {
+        headline: "Healthcare runs itself",
+        subtext: "Autonomous diagnostics and care coordination. Production-grade medical systems.",
+        primaryLabel: "Enter Opus",
+        primaryHref: "/clusters/opus",
+        secondaryLabel: "View protocols",
+        secondaryHref: "/docs/opus",
+    },
+    baia: {
+        headline: "Create beyond limits",
+        subtext: "Generative AI for art and music. Production at the speed of imagination.",
+        primaryLabel: "Open Studio",
+        primaryHref: "/clusters/baia",
+        secondaryLabel: "Explore the gallery",
+        secondaryHref: "/docs/baia",
+    },
+    kdot: {
+        headline: "Connect to the mesh",
+        subtext: "The network that routes around failure. Join the resilient web.",
+        primaryLabel: "Enter KDoT",
+        primaryHref: "/clusters/kdot",
+        secondaryLabel: "View topology",
+        secondaryHref: "/docs/kdot",
+    },
+    aegis: {
+        headline: "Shield your operations",
+        subtext: "Protection that grows with you. Security without compromise.",
+        primaryLabel: "Activate Aegis",
+        primaryHref: "/clusters/aegis",
+        secondaryLabel: "See the audit logs",
+        secondaryHref: "/docs/aegis",
+    },
+    providence: {
+        headline: "See threats before they strike",
+        subtext: "Predictive security that anticipates attacks. Defense through foresight.",
+        primaryLabel: "Enter Providence",
+        primaryHref: "/clusters/providence",
+        secondaryLabel: "View threat intelligence",
+        secondaryHref: "/docs/providence",
+    },
+};
+const fadeUpVariants = {
+    hidden: { opacity: 0, y: 32 },
+    visible: { opacity: 1, y: 0 },
+};
+const scaleVariants = {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: { opacity: 1, scale: 1 },
+};
+const fadeUpTransition = {
+    duration: 0.8,
+    ease: [0.22, 1, 0.36, 1],
+};
+/**
+ * CTASection - Final call-to-action section for ClusterHero pages.
+ * Features cluster-specific messaging, animated entrance on scroll,
+ * and a subtle gradient background matching the cluster theme.
+ */
+export function CTASection({ clusterId, className }) {
+    const ref = useRef(null);
+    const isInView = useInView(ref, { once: true, margin: "-100px" });
+    const config = getClusterConfigWithResolvedUrls(clusterId);
+    const content = CTA_CONTENT[clusterId];
+    return (_jsxs("section", { ref: ref, className: cn("relative py-24 md:py-32 overflow-hidden", className), style: {
+            "--cluster-accent": config.accentColor,
+            "--cluster-accent-rgb": config.accentColorRGB,
+        }, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
+                    background: `
+            radial-gradient(ellipse 80% 50% at 50% 100%, rgba(var(--cluster-accent-rgb), 0.12) 0%, transparent 70%),
+            linear-gradient(to bottom, transparent 0%, rgba(var(--cluster-accent-rgb), 0.04) 50%, transparent 100%)
+          `,
+                } }), _jsx(motion.div, { variants: scaleVariants, initial: "hidden", animate: isInView ? "visible" : "hidden", transition: { ...fadeUpTransition, delay: 0 }, className: "absolute top-0 left-1/2 -translate-x-1/2 w-px h-24", style: {
+                    background: `linear-gradient(to bottom, transparent, var(--cluster-accent), transparent)`,
+                } }), _jsxs("div", { className: "relative z-10 max-w-3xl mx-auto px-6 text-center", children: [_jsx(motion.div, { variants: fadeUpVariants, initial: "hidden", animate: isInView ? "visible" : "hidden", transition: { ...fadeUpTransition, delay: 0.1 }, className: "mb-8", children: _jsx("span", { className: "inline-block font-mono text-[10px] uppercase tracking-[0.3em] px-4 py-2 rounded-full border", style: {
+                                borderColor: "rgba(var(--cluster-accent-rgb), 0.3)",
+                                color: "var(--cluster-accent)",
+                            }, children: "Ready to launch?" }) }), _jsx(motion.h2, { variants: fadeUpVariants, initial: "hidden", animate: isInView ? "visible" : "hidden", transition: { ...fadeUpTransition, delay: 0.2 }, className: "font-serif text-4xl md:text-5xl lg:text-6xl text-white mb-6 leading-[1.1] tracking-tight", children: content.headline }), _jsx(motion.p, { variants: fadeUpVariants, initial: "hidden", animate: isInView ? "visible" : "hidden", transition: { ...fadeUpTransition, delay: 0.35 }, className: "text-lg md:text-xl text-white/60 mb-12 max-w-xl mx-auto leading-relaxed font-light", children: content.subtext }), _jsxs(motion.div, { variants: fadeUpVariants, initial: "hidden", animate: isInView ? "visible" : "hidden", transition: { ...fadeUpTransition, delay: 0.5 }, className: "flex flex-col sm:flex-row items-center justify-center gap-6", children: [_jsxs(motion.a, { href: content.primaryHref, className: "group relative px-10 py-4 text-sm font-semibold uppercase tracking-[0.15em] text-black overflow-hidden", style: { backgroundColor: "var(--cluster-accent)" }, whileHover: { scale: 1.02 }, whileTap: { scale: 0.98 }, transition: { duration: 0.2 }, children: [_jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500", style: {
+                                            background: "linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%)",
+                                            transform: "translateX(-100%)",
+                                            animation: "none",
+                                        } }), _jsx("span", { className: "relative z-10", children: content.primaryLabel })] }), _jsxs(motion.a, { href: content.secondaryHref, className: "group flex items-center gap-2 text-sm font-medium tracking-wide text-white/70 hover:text-white transition-colors duration-300", whileHover: { x: 4 }, transition: { duration: 0.2 }, children: [_jsx("span", { children: content.secondaryLabel }), _jsx("svg", { className: "w-4 h-4 transition-transform duration-300 group-hover:translate-x-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17 8l4 4m0 0l-4 4m4-4H3" }) })] })] })] }), _jsxs(motion.div, { variants: scaleVariants, initial: "hidden", animate: isInView ? "visible" : "hidden", transition: { ...fadeUpTransition, delay: 0.7 }, className: "absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-3", children: [_jsx("div", { className: "w-8 h-px", style: { backgroundColor: "rgba(var(--cluster-accent-rgb), 0.3)" } }), _jsx("div", { className: "w-1.5 h-1.5 rounded-full", style: { backgroundColor: "var(--cluster-accent)" } }), _jsx("div", { className: "w-8 h-px", style: { backgroundColor: "rgba(var(--cluster-accent-rgb), 0.3)" } })] })] }));
+}

package/dist/components/ClusterHero/sections/ClusterStatsSection.d.ts

@@ -0,0 +1,11 @@
+import type { ClusterId } from "../types";
+export interface ClusterStatsSectionProps {
+    clusterId: ClusterId;
+    className?: string;
+}
+/**
+ * ClusterStatsSection displays animated statistics for a cluster.
+ * Features scroll-triggered counter animations and cluster-specific data.
+ */
+export declare function ClusterStatsSection({ clusterId, className }: ClusterStatsSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ClusterStatsSection.d.ts.map

package/dist/components/ClusterHero/sections/ClusterStatsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterStatsSection.d.ts","sourceRoot":"","sources":["../../../../src/components/ClusterHero/sections/ClusterStatsSection.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA2J1C,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CAqErF"}

package/dist/components/ClusterHero/sections/ClusterStatsSection.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { motion, useInView, useSpring, useTransform } from "framer-motion";
+import { cn } from "../../../lib/utils";
+const CLUSTER_STATS = {
+    alexandria: {
+        activeUsers: { value: 12847, suffix: "", label: "Active Users" },
+        uptime: { value: 99.97, suffix: "%", label: "Uptime" },
+        computeHours: { value: 2.4, suffix: "M", label: "Compute Hours" },
+        projects: { value: 8234, suffix: "", label: "Projects" },
+    },
+    alpha: {
+        activeUsers: { value: 8421, suffix: "", label: "Active Users" },
+        uptime: { value: 99.92, suffix: "%", label: "Uptime" },
+        computeHours: { value: 1.8, suffix: "M", label: "Compute Hours" },
+        projects: { value: 5672, suffix: "", label: "Projects" },
+    },
+    opus: {
+        activeUsers: { value: 24156, suffix: "", label: "Active Providers" },
+        uptime: { value: 99.99, suffix: "%", label: "Uptime" },
+        computeHours: { value: 2.4, suffix: "M", label: "Diagnostics/Day" },
+        projects: { value: 847, suffix: "", label: "Care Protocols" },
+    },
+    baia: {
+        activeUsers: { value: 156842, suffix: "", label: "Active Artists" },
+        uptime: { value: 99.97, suffix: "%", label: "Uptime" },
+        computeHours: { value: 4.2, suffix: "M", label: "Works Generated" },
+        projects: { value: 847, suffix: "K", label: "Daily Renders" },
+    },
+    kdot: {
+        activeUsers: { value: 18542, suffix: "", label: "Active Nodes" },
+        uptime: { value: 99.99, suffix: "%", label: "Uptime" },
+        computeHours: { value: 4.7, suffix: "M", label: "Connections/Day" },
+        projects: { value: 9821, suffix: "", label: "Networks" },
+    },
+    aegis: {
+        activeUsers: { value: 31284, suffix: "", label: "Protected Assets" },
+        uptime: { value: 99.97, suffix: "%", label: "Uptime" },
+        computeHours: { value: 2.1, suffix: "B", label: "Threats Blocked" },
+        projects: { value: 4523, suffix: "", label: "Security Policies" },
+    },
+    providence: {
+        activeUsers: { value: 18742, suffix: "", label: "Monitored Endpoints" },
+        uptime: { value: 99.99, suffix: "%", label: "Uptime" },
+        computeHours: { value: 847, suffix: "K", label: "Threats Analyzed" },
+        projects: { value: 2891, suffix: "", label: "Active Policies" },
+    },
+};
+const ACCENT_COLORS = {
+    alexandria: "#D4AF37",
+    alpha: "#00D4FF",
+    opus: "#FF6B6B",
+    baia: "#7B68EE",
+    kdot: "#00D4AA",
+    aegis: "#4A7BF7",
+    providence: "#00D4AA",
+};
+function AnimatedCounter({ value, suffix = "", isDecimal = false }) {
+    const ref = useRef(null);
+    const isInView = useInView(ref, { once: true, margin: "-100px" });
+    const spring = useSpring(0, {
+        duration: 2000,
+        bounce: 0,
+    });
+    useEffect(() => {
+        if (isInView) {
+            spring.set(value);
+        }
+    }, [isInView, spring, value]);
+    const display = useTransform(spring, (current) => {
+        if (isDecimal) {
+            return current.toFixed(2) + suffix;
+        }
+        return Math.floor(current).toLocaleString() + suffix;
+    });
+    return (_jsx(motion.span, { ref: ref, className: "tabular-nums", children: display }));
+}
+function StatItem({ stat, accentColor, index, isLast }) {
+    const isDecimal = stat.suffix === "%" || stat.suffix === "M";
+    return (_jsxs(_Fragment, { children: [_jsxs(motion.div, { initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-50px" }, transition: {
+                    duration: 0.6,
+                    delay: index * 0.1,
+                    ease: [0.22, 1, 0.36, 1],
+                }, className: "flex flex-col items-center text-center px-8 py-4", children: [_jsx("span", { className: "font-mono text-4xl md:text-5xl lg:text-6xl font-bold mb-3 tracking-tight", style: { color: accentColor }, children: _jsx(AnimatedCounter, { value: stat.value, suffix: stat.suffix, isDecimal: isDecimal }) }), _jsx("span", { className: "text-[10px] md:text-xs uppercase tracking-[0.25em] text-white/50 font-medium", children: stat.label })] }), !isLast && (_jsx("div", { className: "w-px h-16 self-center opacity-20", style: {
+                    background: `linear-gradient(to bottom, transparent, ${accentColor}, transparent)`,
+                } }))] }));
+}
+/**
+ * ClusterStatsSection displays animated statistics for a cluster.
+ * Features scroll-triggered counter animations and cluster-specific data.
+ */
+export function ClusterStatsSection({ clusterId, className }) {
+    const stats = CLUSTER_STATS[clusterId];
+    const accentColor = ACCENT_COLORS[clusterId];
+    const statsArray = [
+        stats.activeUsers,
+        stats.uptime,
+        stats.computeHours,
+        stats.projects,
+    ];
+    return (_jsxs("section", { className: cn("relative w-full py-16 md:py-20", className), style: {
+            background: `
+          linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0.95) 0%,
+            rgba(12, 12, 18, 0.98) 50%,
+            rgba(0, 0, 0, 0.95) 100%
+          )
+        `,
+        }, children: [_jsx("div", { className: "absolute inset-0 opacity-[0.03]", style: {
+                    backgroundImage: `
+            radial-gradient(${accentColor} 1px, transparent 1px)
+          `,
+                    backgroundSize: "32px 32px",
+                } }), _jsx("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-2/3 h-px", style: {
+                    background: `linear-gradient(to right, transparent, ${accentColor}40, transparent)`,
+                } }), _jsx("div", { className: "relative z-10 max-w-6xl mx-auto px-6", children: _jsx("div", { className: "flex flex-wrap justify-center md:justify-between items-center", children: statsArray.map((stat, index) => (_jsx(StatItem, { stat: stat, accentColor: accentColor, index: index, isLast: index === statsArray.length - 1 }, stat.label))) }) }), _jsx("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-px", style: {
+                    background: `linear-gradient(to right, transparent, ${accentColor}40, transparent)`,
+                } })] }));
+}

package/dist/components/ClusterHero/sections/FeatureCardsSection.d.ts

@@ -0,0 +1,15 @@
+import type { ClusterId } from "../types";
+export interface FeatureCardsSectionProps {
+    /** Cluster identifier to determine feature set and accent color */
+    clusterId: ClusterId;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * FeatureCardsSection displays a grid of feature cards specific to each cluster.
+ * Each card animates in with a staggered fade-up effect when scrolled into view.
+ * Cards feature glass-morphism styling with the cluster's accent color for highlights.
+ */
+export declare function FeatureCardsSection({ clusterId, className, }: FeatureCardsSectionProps): import("react/jsx-runtime").JSX.Element;
+export default FeatureCardsSection;
+//# sourceMappingURL=FeatureCardsSection.d.ts.map

package/dist/components/ClusterHero/sections/FeatureCardsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureCardsSection.d.ts","sourceRoot":"","sources":["../../../../src/components/ClusterHero/sections/FeatureCardsSection.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,MAAM,WAAW,wBAAwB;IACvC,mEAAmE;IACnE,SAAS,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAySD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,SAAS,GACV,EAAE,wBAAwB,2CA2C1B;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/ClusterHero/sections/FeatureCardsSection.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { Network, FlaskConical, Users, Archive, Server, Cpu, Globe, Shield, Paintbrush, GitBranch, Send, Activity, Zap, } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { CLUSTER_CONFIGS } from "../config";
+const CLUSTER_FEATURES = {
+    alexandria: [
+        {
+            icon: Network,
+            title: "Knowledge Graph",
+            description: "Traverse interconnected concepts and discover emergent patterns across your entire knowledge base.",
+        },
+        {
+            icon: FlaskConical,
+            title: "Research Tools",
+            description: "Advanced query interfaces and analytical instruments for deep exploration and synthesis.",
+        },
+        {
+            icon: Users,
+            title: "Collaboration",
+            description: "Real-time co-authoring, annotation threads, and shared workspaces for collective intelligence.",
+        },
+        {
+            icon: Archive,
+            title: "Archives",
+            description: "Immutable versioning and temporal navigation through the complete history of your work.",
+        },
+    ],
+    alpha: [
+        {
+            icon: Server,
+            title: "Infrastructure",
+            description: "Elastic compute fabric that scales seamlessly from prototype to planet-scale deployments.",
+        },
+        {
+            icon: Cpu,
+            title: "Compute",
+            description: "GPU clusters, inference endpoints, and batch processing with automatic resource optimization.",
+        },
+        {
+            icon: Globe,
+            title: "Networking",
+            description: "Global edge presence with intelligent routing and sub-millisecond latency guarantees.",
+        },
+        {
+            icon: Shield,
+            title: "Security",
+            description: "Zero-trust architecture, end-to-end encryption, and comprehensive audit trails.",
+        },
+    ],
+    opus: [
+        {
+            icon: Activity,
+            title: "Diagnostic Engines",
+            description: "AI-powered analysis pipelines for medical imaging, pathology, and patient data synthesis.",
+        },
+        {
+            icon: Network,
+            title: "Care Coordination",
+            description: "Autonomous orchestration of treatment workflows across provider networks and facilities.",
+        },
+        {
+            icon: Shield,
+            title: "Compliance Layer",
+            description: "Built-in HIPAA, SOC2, and regulatory framework adherence with continuous auditing.",
+        },
+        {
+            icon: Zap,
+            title: "Real-time Processing",
+            description: "Sub-second diagnostic latency with edge deployment for critical care applications.",
+        },
+    ],
+    baia: [
+        {
+            icon: Paintbrush,
+            title: "Neural Canvas",
+            description: "Generative models that transform prompts into visual masterpieces across any style or medium.",
+        },
+        {
+            icon: Activity,
+            title: "Sound Synthesis",
+            description: "AI composition engines for music, ambient soundscapes, and professional audio design.",
+        },
+        {
+            icon: GitBranch,
+            title: "Style Transfer",
+            description: "Cross-modal translation between artistic mediums, formats, and aesthetic vocabularies.",
+        },
+        {
+            icon: Send,
+            title: "Instant Publishing",
+            description: "One-click minting and distribution to galleries, marketplaces, and streaming platforms.",
+        },
+    ],
+    kdot: [
+        {
+            icon: Network,
+            title: "Mesh Networking",
+            description: "Self-healing topology that routes around failures and optimizes paths in real-time.",
+        },
+        {
+            icon: Globe,
+            title: "Protocol Bridge",
+            description: "Universal translation layer connecting disparate systems and legacy infrastructure.",
+        },
+        {
+            icon: Activity,
+            title: "Traffic Analysis",
+            description: "Deep packet inspection and flow analytics for network optimization and debugging.",
+        },
+        {
+            icon: Zap,
+            title: "Edge Compute",
+            description: "Distributed processing at the network edge for ultra-low latency applications.",
+        },
+    ],
+    aegis: [
+        {
+            icon: Shield,
+            title: "Threat Protection",
+            description: "Multi-layered defense with AI-powered detection of zero-day exploits and advanced threats.",
+        },
+        {
+            icon: Server,
+            title: "Access Management",
+            description: "Fine-grained permissions, MFA enforcement, and just-in-time privilege escalation.",
+        },
+        {
+            icon: Activity,
+            title: "Security Monitoring",
+            description: "24/7 SOC integration with automated incident response and forensic analysis.",
+        },
+        {
+            icon: Archive,
+            title: "Compliance",
+            description: "Automated policy enforcement with continuous auditing for SOC2, HIPAA, and GDPR.",
+        },
+    ],
+    providence: [
+        {
+            icon: Activity,
+            title: "Threat Intelligence",
+            description: "Predictive threat analysis powered by global telemetry and machine learning models.",
+        },
+        {
+            icon: Network,
+            title: "Attack Surface Mapping",
+            description: "Continuous discovery and assessment of exposed assets and potential entry points.",
+        },
+        {
+            icon: Zap,
+            title: "Incident Response",
+            description: "Automated containment, forensic collection, and guided remediation playbooks.",
+        },
+        {
+            icon: Shield,
+            title: "Security Posture",
+            description: "Real-time scoring and recommendations to strengthen your defensive stance.",
+        },
+    ],
+};
+function FeatureCard({ feature, index, accentColor, }) {
+    const Icon = feature.icon;
+    return (_jsx(motion.div, { initial: { opacity: 0, y: 40 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-100px" }, transition: {
+            delay: index * 0.1,
+            duration: 0.5,
+            ease: [0.22, 1, 0.36, 1],
+        }, className: "group relative", children: _jsxs("div", { className: cn("relative h-full p-6 rounded-lg", "bg-white/[0.03] backdrop-blur-md", "border border-white/[0.08]", "transition-all duration-500 ease-out", "hover:bg-white/[0.06] hover:border-white/[0.15]", "hover:shadow-[0_8px_32px_rgba(0,0,0,0.3)]"), style: {
+                "--card-accent": accentColor,
+            }, children: [_jsx("div", { className: cn("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-500", "group-hover:opacity-100"), style: {
+                        background: `radial-gradient(ellipse at top left, ${accentColor}15 0%, transparent 50%)`,
+                    } }), _jsxs("div", { className: "relative z-10", children: [_jsx("div", { className: cn("w-10 h-10 rounded-md flex items-center justify-center mb-4", "bg-white/[0.05] border border-white/[0.08]", "transition-all duration-300", "group-hover:border-[var(--card-accent)]/30"), children: _jsx(Icon, { className: "w-5 h-5 text-white/70 transition-colors duration-300 group-hover:text-[var(--card-accent)]", strokeWidth: 1.5 }) }), _jsx("h3", { className: cn("font-medium text-white/90 mb-2 tracking-wide", "transition-colors duration-300", "group-hover:text-white"), children: feature.title }), _jsx("p", { className: "text-sm text-white/50 leading-relaxed", children: feature.description })] }), _jsx("div", { className: cn("absolute top-0 left-6 w-8 h-px", "bg-gradient-to-r from-transparent via-[var(--card-accent)]/50 to-transparent", "opacity-0 transition-opacity duration-500", "group-hover:opacity-100") })] }) }));
+}
+/**
+ * FeatureCardsSection displays a grid of feature cards specific to each cluster.
+ * Each card animates in with a staggered fade-up effect when scrolled into view.
+ * Cards feature glass-morphism styling with the cluster's accent color for highlights.
+ */
+export function FeatureCardsSection({ clusterId, className, }) {
+    const features = CLUSTER_FEATURES[clusterId];
+    const config = CLUSTER_CONFIGS[clusterId];
+    return (_jsxs("section", { className: cn("w-full px-8 md:px-16 py-24", className), style: {
+            "--cluster-accent": config.accentColor,
+        }, children: [_jsxs(motion.div, { initial: { opacity: 0, y: 24 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-100px" }, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }, className: "mb-12", children: [_jsx("span", { className: "font-mono text-xs uppercase tracking-[0.2em] text-white/60", children: "Capabilities" }), _jsx("div", { className: "mt-2 h-px w-8", style: { backgroundColor: config.accentColor } })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", children: features.map((feature, index) => (_jsx(FeatureCard, { feature: feature, index: index, accentColor: config.accentColor }, feature.title))) })] }));
+}
+export default FeatureCardsSection;

package/dist/components/ClusterHero/sections/index.d.ts

@@ -0,0 +1,4 @@
+export { FeatureCardsSection, type FeatureCardsSectionProps } from './FeatureCardsSection.js';
+export { ClusterStatsSection, type ClusterStatsSectionProps } from './ClusterStatsSection.js';
+export { CTASection, type CTASectionProps } from './CTASection.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ClusterHero/sections/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ClusterHero/sections/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/ClusterHero/sections/index.js

@@ -0,0 +1,3 @@
+export { FeatureCardsSection } from './FeatureCardsSection.js';
+export { ClusterStatsSection } from './ClusterStatsSection.js';
+export { CTASection } from './CTASection.js';

package/dist/components/ClusterHero/types.d.ts

@@ -0,0 +1,111 @@
+export type ClusterId = 'alexandria' | 'alpha' | 'opus' | 'baia' | 'kdot' | 'aegis' | 'providence';
+export type LiveModuleType = 'market' | 'live' | 'governance' | 'progress';
+export interface ClusterConfig {
+    id: ClusterId;
+    name: string;
+    tagline: string;
+    latinMotto?: string;
+    sigilSrc: string;
+    videoSrc: string;
+    videoPoster: string;
+    accentColor: string;
+    accentColorRGB: string;
+    atmosphere: AtmosphereConfig;
+    buttons: ButtonConfig[];
+    description: string;
+    capabilities: [string, string, string];
+    fastPath: {
+        label: string;
+        href: string;
+    };
+    status: {
+        network: string;
+        verification: string;
+        fees: string;
+    };
+    liveModule: LiveModuleType;
+    liveContent?: string;
+    metrics: {
+        realms: number;
+        output24h: string;
+        rank?: number;
+    };
+}
+export interface AtmosphereConfig {
+    dustMotes?: {
+        colors: string[];
+        density: number;
+        speed: number;
+    };
+    fog?: {
+        type: 'volumetric' | 'depth' | 'mist';
+        color: string;
+        intensity: number;
+    };
+    light?: {
+        type: 'godrays' | 'bloom' | 'caustics';
+        color: string;
+        intensity: number;
+        source?: {
+            x: number;
+            y: number;
+        };
+    };
+}
+export interface ButtonConfig {
+    label: string;
+    href: string;
+    variant: 'primary' | 'secondary' | 'ghost';
+    /** If true, opens in new tab with external link attributes */
+    external?: boolean;
+}
+export interface ClusterHeroProps {
+    cluster: ClusterId;
+    className?: string;
+}
+export interface BriefingPanelProps {
+    description: string;
+    capabilities: [string, string, string];
+    fastPath: {
+        label: string;
+        href: string;
+    };
+    status: {
+        network: string;
+        verification: string;
+        fees: string;
+    };
+    accentColor: string;
+    className?: string;
+}
+export interface SigilMonumentProps {
+    name: string;
+    tagline: string;
+    latinMotto?: string;
+    sigilSrc: string;
+    accentColor: string;
+    className?: string;
+}
+export interface LiveStripProps {
+    moduleType: LiveModuleType;
+    content?: string;
+    accentColor: string;
+    className?: string;
+}
+export interface ClusterRailProps {
+    name: string;
+    tagline: string;
+    metrics: {
+        realms: number;
+        output24h: string;
+        rank?: number;
+    };
+    buttons: ButtonConfig[];
+    accentColor: string;
+    className?: string;
+}
+export interface StructuralElementsProps {
+    accentColor: string;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ClusterHero/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/types.ts"],"names":[],"mappings":"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"}

package/dist/components/ClusterHero/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ClusterHero/useVideoPreload.d.ts

@@ -0,0 +1,28 @@
+export interface UseVideoPreloadOptions {
+    /** Video source URL to preload */
+    videoSrc: string;
+    /** Poster image source URL to preload */
+    posterSrc: string;
+    /** Whether preloading is enabled (default: true) */
+    enabled?: boolean;
+}
+export interface UseVideoPreloadResult {
+    /** Whether the assets have been preloaded */
+    isPreloaded: boolean;
+}
+/**
+ * Custom hook to preload video and poster assets.
+ * Adds <link rel="preload"> hints to the document head for faster loading.
+ * Cleans up preload hints on unmount.
+ *
+ * @example
+ * ```tsx
+ * const { isPreloaded } = useVideoPreload({
+ *   videoSrc: '/videos/hero.mp4',
+ *   posterSrc: '/images/hero-poster.jpg',
+ * });
+ * ```
+ */
+export declare function useVideoPreload({ videoSrc, posterSrc, enabled, }: UseVideoPreloadOptions): UseVideoPreloadResult;
+export default useVideoPreload;
+//# sourceMappingURL=useVideoPreload.d.ts.map

package/dist/components/ClusterHero/useVideoPreload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoPreload.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/useVideoPreload.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,sBAAsB;IACrC,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,6CAA6C;IAC7C,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,OAAc,GACf,EAAE,sBAAsB,GAAG,qBAAqB,CAiDhD;AAED,eAAe,eAAe,CAAC"}