feat: add cyan glow effects and new network resilience animation

- Added cyan radial glow SVG to CallToAction components across all product pages for visual consistency - Created NoSinglePoint animation demonstrating redundant network paths and resilience against single point failures - Updated HomeArchitecture layout to better center and display animations with improved flex positioning
2025-11-14 22:23:11 +01:00
parent 33821987aa
commit a3028ff448
20 changed files with 548 additions and 174 deletions
--- a/src/pages/nodes/CallToAction.tsx
+++ b/src/pages/nodes/CallToAction.tsx
@@ -13,6 +13,26 @@ export function CallToAction() {
        id="get-started"
        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
      >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
        <Container className="relative">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
--- a/src/pages/nodes/NodeBenefits.tsx
+++ b/src/pages/nodes/NodeBenefits.tsx
@@ -52,7 +52,7 @@ export function NodeBenefits() {
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-t border-l border-r border-gray-800" />

-      <div className="relative px-6 lg:px-12 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
+      <div className="relative px-6 lg:px-6 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -1,32 +1,32 @@
 'use client'

 import { Button } from '@/components/Button'
-import { Eyebrow, H3, P } from '@/components/Texts'
+import { Eyebrow, H3 } from '@/components/Texts'

 export function NodeHero() {
  return (
    <div className="">
      {/* Boxed container */}
      <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden"
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        style={{ backgroundImage: "url('/images/gpuhero2.png')", backgroundSize: "contain" }}
      >
        {/* Inner padding */}
        <div className="px-6 py-16 lg:py-16">
-          <div className="max-w-3xl mx-auto text-center">
+          <div className="max-w-2xl lg:pl-6">
            <Eyebrow>MYCELIUM NODES</Eyebrow>
            <H3 as="h1" className="mt-4">
              Host a Node. Power the Network.
            </H3>
-            <P className="mt-6 text-gray-800">
-              The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
-            </P>
-            
-            <div className="mt-10 flex items-center justify-center gap-x-6">
-              <Button href="/host" variant="solid" color="cyan">
-                Host a Node
+            <p className="mt-6 text-lg">
+              The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
+            </p>
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button to="#node-getting-started" as="a" variant="solid" color="cyan">
+                How it works
              </Button>
-              <Button href="#" variant="outline">
-                Learn More
+              <Button to="#node-architecture" as="a" variant="outline">
+                Explore Docs <span aria-hidden="true">→</span>
              </Button>
            </div>
          </div>
--- a/src/pages/nodes/NodeProducts.tsx
+++ b/src/pages/nodes/NodeProducts.tsx
@@ -137,7 +137,7 @@ export function NodeProducts() {
            {/* CONFIG SELECTOR */}
            <fieldset className="mt-10">
              <legend className="text-sm font-medium text-gray-200">
-                Configuration
+                Choose Your Node Type
              </legend>

              <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -160,7 +160,7 @@ export function NodeProducts() {
            </fieldset>

            <div className="mt-4">
-              <a className="inline-flex text-sm text-gray-500 hover:text-gray-300 transition">
+              <a href="https://threefold.info/mycelium_economics/docs/category/recommended-nodes" target="_blank" rel="noopener noreferrer" className="inline-flex text-sm text-gray-500 hover:text-gray-300 transition">
                What config should I choose?
                <QuestionMarkCircleIcon className="ml-1 w-5 h-5 text-gray-500" />
              </a>
@@ -194,11 +194,7 @@ export function NodeProducts() {
              </a>
            </div>

-            {/* Guarantee */}
-            <div className="mt-6 flex items-center text-gray-400 text-sm">
-              <ShieldCheckIcon className="w-6 h-6 text-gray-500 mr-2" />
-              Lifetime Guarantee
-            </div>
+           
          </motion.div>

          {/* ------------------------------ */}
@@ -214,7 +210,7 @@ export function NodeProducts() {
            <img
              src={selectedNode.image}
              alt={selectedNode.name}
-              className="w-full max-w-md rounded-2xl border border-gray-800 object-cover"
+              className="max-w-md rounded-2xl "
            />
          </motion.div>

--- a/src/pages/nodes/NodeSpecs.tsx
+++ b/src/pages/nodes/NodeSpecs.tsx
@@ -1,97 +1,115 @@
 "use client";

-import { Eyebrow, H3, CT, CP, P } from "@/components/Texts";
+import { Container } from "@/components/Container";
+import { Small } from "@/components/Texts";
+
+// Heroicons
+import {
+  ShieldCheckIcon,
+  BoltIcon,
+  GlobeAltIcon,
+  ServerStackIcon,
+  CheckBadgeIcon,
+  CpuChipIcon,
+} from "@heroicons/react/24/solid";

 const nodeSpecs = [
  {
-    id: "autonomous",
-    eyebrow: "Self-Running",
    title: "Autonomous Operation",
    description: "Runs autonomously with no central control.",
-    colSpan: "lg:col-span-3",
-    rounded: "max-lg:rounded-t-4xl lg:rounded-tl-4xl",
-    innerRounded: "max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]",
+    icon: ServerStackIcon,
  },
  {
-    id: "encrypted",
-    eyebrow: "Security",
    title: "Encrypted by Default",
    description: "Fully encrypted and identity-based.",
-    colSpan: "lg:col-span-3",
-    rounded: "lg:rounded-tr-4xl",
-    innerRounded: "lg:rounded-tr-[calc(2rem+1px)]",
+    icon: ShieldCheckIcon,
  },
  {
-    id: "efficient",
-    eyebrow: "Performance",
    title: "Energy Efficient",
    description: "Energy-efficient and quiet, designed for 24/7 uptime.",
-    colSpan: "lg:col-span-2",
-    rounded: "lg:rounded-bl-4xl",
-    innerRounded: "lg:rounded-bl-[calc(2rem+1px)]",
+    icon: BoltIcon,
  },
  {
-    id: "uptime",
-    eyebrow: "Reliability",
    title: "Measured Uptime",
    description: "Automatically measures uptime and contribution.",
-    colSpan: "lg:col-span-2",
-    rounded: "",
-    innerRounded: "",
+    icon: CheckBadgeIcon,
  },
  {
-    id: "fullstack",
-    eyebrow: "Compatibility",
    title: "Full Mycelium Stack Support",
    description: "Supports Mycelium Network, Cloud, Pods, and Agents.",
-    colSpan: "lg:col-span-2",
-    rounded: "max-lg:rounded-b-4xl lg:rounded-br-4xl",
-    innerRounded: "max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]",
+    icon: GlobeAltIcon,
+  },
+
+  // ✅ NEW 6th card (to complete the grid)
+  {
+    title: "Edge & Home Ready",
+    description:
+      "Runs seamlessly on compact hardware for edge, home, or micro-datacenter deployments.",
+    icon: CpuChipIcon,
  },
 ];

 export function NodeSpecs() {
  return (
-    <div className="bg-white py-24 sm:py-32">
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <Eyebrow>Node Specifications</Eyebrow>
-        <H3 className="mt-2">Built for Reliability and Control</H3>
-        <P className="mt-6 max-w-xl">
-          Each node strengthens the network and helps build a more open, sovereign and
-          distributed internet.
-        </P>
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+      {/* Top horizontal spacing */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />

-        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
-          {nodeSpecs.map((item) => (
-            <div key={item.id} className={`relative ${item.colSpan}`}>
-              {/* BG LAYER */}
-              <div
-                className={`absolute inset-0 rounded-lg bg-white ${item.rounded}`}
-              />
+      <Container className="py-12 border border-t-0 border-b-0 border-gray-100">
+        {/* Header */}
+        <div className="mx-auto max-w-4xl sm:text-center">
+          <h2 className="text-base/7 font-semibold text-cyan-500">
+            NODE SPECIFICATIONS
+          </h2>

-              {/* CONTENT LAYER */}
-              <div
-                className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${item.innerRounded}`}
-              >
-                <div className="p-10 pt-6">
-                  <h3 className="text-sm/4 font-semibold text-cyan-600">{item.eyebrow}</h3>
-                  <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">
-                    {item.title}
-                  </CT>
-                  <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
-                    {item.description}
-                  </CP>
-                </div>
-              </div>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Built for Reliability and Control
+          </p>

-              {/* OUTLINE OVERLAY */}
-              <div
-                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${item.rounded}`}
-              />
-            </div>
-          ))}
+          <p className="mt-6 text-lg text-gray-600">
+            Each node strengthens the network and helps build a more open,
+            sovereign and distributed internet.
+          </p>
        </div>
-      </div>
-    </div>
+
+        {/* Cards */}
+        <ul
+          role="list"
+          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
+                     sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
+        >
+          {nodeSpecs.map((item) => {
+            const Icon = item.icon;
+
+            return (
+              <li
+                key={item.title}
+                className="rounded-md border border-gray-100 bg-white p-6 transition-all duration-300
+                           hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
+              >
+                {/* Title + label */}
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-gray-900">
+                    {item.title}
+                  </h3>
+
+                  <Icon className="h-6 w-6 text-cyan-500" />
+                </div>
+
+                {/* Short description */}
+                <p className="mt-4 text-gray-700 leading-snug">
+                  {item.description}
+                </p>
+              </li>
+            );
+          })}
+        </ul>
+      </Container>
+
+      {/* Bottom spacing */}
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+    </section>
  );
 }