diff --git a/src/pages/cloud/CloudHostingNew.tsx b/src/pages/cloud/CloudHostingNew.tsx index da576af..c7c37ff 100644 --- a/src/pages/cloud/CloudHostingNew.tsx +++ b/src/pages/cloud/CloudHostingNew.tsx @@ -42,10 +42,10 @@ export function CloudHostingNew() { return (
{/* ✅ Top horizontal line with spacing */} -
-
+
+
{/* ✅ MAIN CONTENT */} -
+
{/* ✅ Product Section */} @@ -98,8 +98,8 @@ export function CloudHostingNew() {
{/* ✅ Bottom horizontal line with spacing */} -
-
+
+
) } diff --git a/src/pages/compute/ComputeArchitecture.tsx b/src/pages/compute/ComputeArchitecture.tsx index 4ed0696..ab1caac 100644 --- a/src/pages/compute/ComputeArchitecture.tsx +++ b/src/pages/compute/ComputeArchitecture.tsx @@ -1,53 +1,125 @@ -import { - LockClosedIcon, - CpuChipIcon, - AdjustmentsHorizontalIcon, -} from '@heroicons/react/24/solid' -import { Container } from '@/components/Container' -import { Eyebrow, H3, CT, CP } from '@/components/Texts' +"use client"; -const architecture = [ +import { Eyebrow, H3, P } from "@/components/Texts"; +import MeshNetworking from "./animations/Meshnetworking"; +import Deterministic from "./animations/Deterministic"; +import SovereignCompute from "./animations/SovereignCompute"; + +const deterministicCards = [ { - name: 'Mesh Networking', - description: 'Secure connectivity across all nodes.', - icon: LockClosedIcon, + id: "core", + eyebrow: "ARCHITECTURE", + title: "Deterministic by Design", + description: + "Every workload runs exactly as declared: no drift, no hidden state, no surpriseSecure connectivity across all nodes..", + animation: null, + colSpan: "lg:col-span-3", + rowSpan: "lg:row-span-1", + custom: true, + noBorder: true, }, { - name: 'Sovereign Compute', - description: 'Execution only on hardware you control.', - icon: CpuChipIcon, + id: "crypto", + title: "Mesh Networking", + description: + "Secure connectivity across all nodes.", + animation: , // ✅ NEW + colSpan: "lg:col-span-3", + rowSpan: "lg:row-span-1", + rounded: "lg:rounded-tr-4xl max-lg:rounded-t-4xl", + innerRounded: "lg:rounded-tr-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]", }, { - name: 'Deterministic Orchestration', - description: 'Workloads deploy and update predictably.', - icon: AdjustmentsHorizontalIcon, + id: "stateless", + title: "Deterministic Orchestration", + description: + "Workloads deploy and update predictably.", + animation: , // ✅ NEW + colSpan: "lg:col-span-3", + rowSpan: "lg:row-span-1", + rounded: "lg:rounded-bl-4xl max-lg:rounded-b-4xl", + innerRounded: "lg:rounded-bl-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]", }, -] + { + id: "healing", + title: "Automatic healing and recovery", + description: + "Self-repairing processes ensure workloads stay available and consistent.", + animation: , // ✅ NEW + colSpan: "lg:col-span-3", + rowSpan: "lg:row-span-1", + rounded: "lg:rounded-br-4xl max-lg:rounded-b-4xl", + innerRounded: "lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]", + }, +]; export function ComputeArchitecture() { return ( -
- -
- ARCHITECTURE -

HOW IT WORKS

-
+
+ {/* ✅ Top horizontal line */} +
+
-
-
- {architecture.map((item) => ( -
-
+ + {!card.noBorder && ( +
+ )} +
+ ))}
- +
+ +
+
- ) + ); } diff --git a/src/pages/compute/animations/Deterministic.tsx b/src/pages/compute/animations/Deterministic.tsx new file mode 100644 index 0000000..6e55526 --- /dev/null +++ b/src/pages/compute/animations/Deterministic.tsx @@ -0,0 +1,189 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + gridStroke?: string; +}; + +const W = 760; +const H = 420; + +export default function Deterministic({ + className, + accent = "#00b8db", + gridStroke = "#2b2a2a", +}: Props) { + const prefers = useReducedMotion(); + + const stages = [ + { x: 180, y: 180, w: 120, h: 80, label: "Build" }, + { x: 330, y: 180, w: 120, h: 80, label: "Package" }, + { x: 480, y: 180, w: 120, h: 80, label: "Deploy" }, + ]; + + // Packet path (deterministic flow) + const packetPath = `M ${stages[0].x + 120} ${stages[0].y + 40} + L ${stages[1].x + 0} ${stages[1].y + 40} + L ${stages[1].x + 120} ${stages[1].y + 40} + L ${stages[2].x + 0} ${stages[2].y + 40}`; + + // tiny arrow for each transition + const arrows = [ + `M ${stages[0].x + 120} ${stages[0].y + 40} L ${stages[1].x + 6} ${stages[1].y + 40}`, + `M ${stages[1].x + 120} ${stages[1].y + 40} L ${stages[2].x + 6} ${stages[2].y + 40}` + ]; + + return ( + + ); +} diff --git a/src/pages/compute/animations/Meshnetworking.tsx b/src/pages/compute/animations/Meshnetworking.tsx new file mode 100644 index 0000000..c55a2d8 --- /dev/null +++ b/src/pages/compute/animations/Meshnetworking.tsx @@ -0,0 +1,151 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + stroke?: string; +}; + +const W = 760; +const H = 420; + +export default function MeshNetworking({ + className, + accent = "#00b8db", + stroke = "#4B5563", +}: Props) { + const prefersReduced = useReducedMotion(); + + // Nodes in a real mesh (hex pattern) + const nodes = [ + { x: 200, y: 120 }, + { x: 380, y: 100 }, + { x: 560, y: 120 }, + + { x: 130, y: 240 }, + { x: 320, y: 240 }, + { x: 540, y: 240 }, + { x: 630, y: 240 }, + + { x: 260, y: 340 }, + { x: 440, y: 340 }, + ]; + + // All connected pairs (mesh links) + const links = [ + [0,1],[1,2], + [0,3],[1,4],[2,5], + [3,4],[4,5],[5,6], + [3,7],[4,7],[4,8],[5,8], + [7,8] + ]; + + const drawLine = (i: number, j: number) => { + const a = nodes[i]; + const b = nodes[j]; + return `M ${a.x} ${a.y} L ${b.x} ${b.y}`; + }; + + return ( + + ); +} diff --git a/src/pages/compute/animations/SovereignCompute.tsx b/src/pages/compute/animations/SovereignCompute.tsx new file mode 100644 index 0000000..77f5438 --- /dev/null +++ b/src/pages/compute/animations/SovereignCompute.tsx @@ -0,0 +1,236 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; // cyan highlight + gridStroke?: string; // grid color (default #2b2a2a as requested) +}; + +const W = 760; +const H = 420; + +const Server = ({ + x, + y, + w = 140, + h = 90, + rows = 3, +}: { + x: number; + y: number; + w?: number; + h?: number; + rows?: number; +}) => { + const rowH = (h - 24) / rows; + + return ( + + {/* chassis */} + + {/* bays */} + {Array.from({ length: rows }).map((_, i) => ( + + + {/* bay indicators */} + + + + + ))} + {/* subtle top highlight */} + + + ); +}; + +export default function SovereignCompute({ + className, + accent = "#00b8db", + gridStroke = "#2b2a2a", +}: Props) { + const prefers = useReducedMotion(); + + // Positions + const left = { x: 140, y: 120 }; + const mid = { x: 310, y: 150 }; + const right= { x: 500, y: 120 }; + + // Shield position (trust boundary) + const shield = { cx: 600, cy: 250, r: 38 }; + + // Attestation paths from racks to shield + const pathFromLeft = `M ${left.x + 140} ${left.y + 45} C 330 150, 470 200, ${shield.cx - 50} ${shield.cy}`; + const pathFromMid = `M ${mid.x + 140} ${mid.y + 45} C 420 190, 500 215, ${shield.cx - 50} ${shield.cy}`; + const pathFromRight = `M ${right.x + 140} ${right.y + 45} C 520 180, 560 220, ${shield.cx - 50} ${shield.cy}`; + + return ( + + ); +} diff --git a/src/pages/home/CallToAction.tsx b/src/pages/home/CallToAction.tsx index d09490d..d2d068e 100644 --- a/src/pages/home/CallToAction.tsx +++ b/src/pages/home/CallToAction.tsx @@ -5,12 +5,12 @@ export function CallToAction() { return (
{/* ✅ Top horizontal line with spacing */} -
+
{/* === Content === */} -
+
+ className="py-18 max-w-7xl mx-auto border-t-0 border-b-0 border bg-[#111111] border-gray-800">

@@ -41,8 +41,8 @@ export function CallToAction() {

{/* ✅ Bottom horizontal line with spacing */} -
-
+
+
) } diff --git a/src/pages/home/StackSectionDark.tsx b/src/pages/home/StackSectionDark.tsx index 2ca0d8a..b0b40a7 100644 --- a/src/pages/home/StackSectionDark.tsx +++ b/src/pages/home/StackSectionDark.tsx @@ -9,10 +9,10 @@ export function StackSectionDark() { return (
{/* ✅ Top horizontal line with spacing */} -
-
+
+
{/* === Background Layer === */} -
+
{/* Central main aura */} {/* === Content === */} -
+
{/* Left Column - Text */}
@@ -97,8 +97,8 @@ export function StackSectionDark() {
{/* ✅ Bottom horizontal line with spacing */} -
-
+
+
); }