diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 0cde3b4..a04cc51 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -8,7 +8,7 @@ export function Footer() {
- Mycelium Logomark + Mycelium Logomark

Project Mycelium

Unleash the Power of Decentralization

diff --git a/src/components/ui/DynamicMapContainer.tsx b/src/components/ui/DynamicMapContainer.tsx index 4ea6596..70ac9b1 100644 --- a/src/components/ui/DynamicMapContainer.tsx +++ b/src/components/ui/DynamicMapContainer.tsx @@ -71,30 +71,27 @@ const clusterNodes = (nodeList: GeoNode[], cellSize = 2) => { function DynamicMapContainer() { const [loading, setLoading] = useState(true); const [nodes, setNodes] = useState([]); - const API_URL = "https://gridproxy.grid.tf/nodes?healthy=true&size=99999"; + const API_URL = "https://gridproxy.grid.tf/nodes?healthy=true&size=500"; useEffect(() => { async function fetchNodeData() { try { const response = await fetch(API_URL); - const data: RawNode[] = await response.json(); // Type the incoming data - - // 🚨 Map the API response to your component's expected GeoNode format + const data: RawNode[] = await response.json(); + const geoNodes: GeoNode[] = data .filter((node: RawNode) => node.location && node.location.latitude && node.location.longitude) .map((node: RawNode) => ({ - // Convert string coordinates to numbers - lat: parseFloat(node.location.latitude), - lng: parseFloat(node.location.longitude), + lat: parseFloat(node.location.latitude), + lng: parseFloat(node.location.longitude), label: `${node.location.city}, ${node.location.country} (${node.node_id})`, - // Optionally set color based on some node property if available })); const clusteredNodes = clusterNodes(geoNodes); setNodes(clusteredNodes); - setLoading(false); } catch (error) { console.error("Failed to fetch node data:", error); + } finally { setLoading(false); } } @@ -102,30 +99,24 @@ function DynamicMapContainer() { fetchNodeData(); }, []); - // --- RENDERING --- - + // While fetching, show a loading state if (loading) { - // Show a loading state while data is being fetched return ( -
- - 🌎 - -

Loading nodes...

-
+
+ + 🌎 + +

Loading nodes...

+
); } - // Pass the dynamically fetched nodes to your WorldMap component - return ( - - ); + // After data is loaded, render the map + return ; } export default DynamicMapContainer; \ No newline at end of file diff --git a/src/pages/agents/AgentHeroAlt.tsx b/src/pages/agents/AgentHeroAlt.tsx index 11af5ab..3b9b558 100644 --- a/src/pages/agents/AgentHeroAlt.tsx +++ b/src/pages/agents/AgentHeroAlt.tsx @@ -1,6 +1,5 @@ 'use client' -import { Button } from '@/components/Button' import { Eyebrow, H3, P } from '@/components/Texts' export function AgentHeroAlt() { @@ -30,12 +29,8 @@ Private, local, and autonomous by design, they give you everything you need to b

- - + {/* TODO: Hero CTAs (Follow Development / Explore Docs) to be added when links are ready. + Previously two Buttons here with href="#". */}
diff --git a/src/pages/agents/GallerySection.tsx b/src/pages/agents/GallerySection.tsx index 4f1b89c..1918be0 100644 --- a/src/pages/agents/GallerySection.tsx +++ b/src/pages/agents/GallerySection.tsx @@ -4,7 +4,6 @@ import { useEffect, useMemo, useState } from 'react' import { useResponsiveCarousel } from '@/hooks/useResponsiveCarousel'; import { motion, AnimatePresence } from 'framer-motion' import { wrap } from 'popmotion' -import { Button } from '@/components/Button'; import { SectionHeader, P, Eyebrow, CP } from '@/components/Texts'; import { TypeAnimation } from 'react-type-animation' import { FadeIn } from '@/components/FadeIn'; @@ -147,9 +146,8 @@ export function GallerySection() { repeat={0} /> - + {/* TODO: Desktop CTA (Start) button to be added when link target is defined. + Previously: */}
@@ -166,9 +164,8 @@ export function GallerySection() { repeat={0} /> - + {/* TODO: Mobile CTA (Start) button to be added when link target is defined. + Previously: */} diff --git a/src/pages/compute/ComputeCapabilities.tsx b/src/pages/compute/ComputeCapabilities.tsx index ef4de49..c1a3f7d 100644 --- a/src/pages/compute/ComputeCapabilities.tsx +++ b/src/pages/compute/ComputeCapabilities.tsx @@ -2,7 +2,6 @@ import { Container } from '@/components/Container' import { Eyebrow, H3, P } from '@/components/Texts' -import { Button } from '@/components/Button' const capabilities = [ { @@ -76,14 +75,8 @@ export function ComputeCapabilities() { {/* Button section */} -
- - -
+ {/* TODO: CTA buttons (Get Started / Explore Docs) to be re-enabled when real links are available. + Previously rendered here as two Buttons with href="#". */} diff --git a/src/pages/compute/ComputeCapabilitiesNew.tsx b/src/pages/compute/ComputeCapabilitiesNew.tsx index 4e864d2..c8e76c7 100644 --- a/src/pages/compute/ComputeCapabilitiesNew.tsx +++ b/src/pages/compute/ComputeCapabilitiesNew.tsx @@ -78,12 +78,8 @@ export function ComputeCapabilitiesNew() { {/* Arrows inside first card */}
- - Learn more β†’ - + {/* TODO: Intro card CTA (Learn more) to be added here when destination is defined. + Previously: Learn more β†’ */} - + {/* TODO: Secondary CTA (Documentation) link to be wired when docs route is ready. + Previously: */}
diff --git a/src/pages/home/HomeMap.tsx b/src/pages/home/HomeMap.tsx index 5770c30..c2d7dc8 100644 --- a/src/pages/home/HomeMap.tsx +++ b/src/pages/home/HomeMap.tsx @@ -103,7 +103,7 @@ export function HomeMap() { Mycelium runs on nodes hosted by people and organizations around the world. Each node adds compute, storage, and bandwidth, expanding the network’s capacity and resilience.

-

+

You can share your idle resources and earn rewards when they are used. Configure it once. Your node takes over from there.

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index ac4572b..6d3b21e 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -1,4 +1,4 @@ - +import { useEffect, useRef, useState } from 'react' import { AnimatedSection } from '../../components/AnimatedSection' import { CallToAction } from './CallToAction' import { HomeTab } from './HomeTab' @@ -7,7 +7,50 @@ import { HomeAurora } from './HomeAurora' import { HomeArchitecture } from './HomeArchitecture'; import { HomeDesign } from './HomeDesign'; +function LazyHomeMapSection() { + const [isVisible, setIsVisible] = useState(false) + const containerRef = useRef(null) + useEffect(() => { + const el = containerRef.current + if (!el || isVisible) return + + const observer = new IntersectionObserver( + (entries) => { + const [entry] = entries + if (entry.isIntersecting) { + setIsVisible(true) + observer.disconnect() + } + }, + { + root: null, + rootMargin: '200px 0px', + threshold: 0.1, + }, + ) + + observer.observe(el) + + return () => { + observer.disconnect() + } + }, [isVisible]) + + return ( +
+ {isVisible ? ( + + ) : ( +
+

+ Loading live node map when you scroll here… +

+
+ )} +
+ ) +} export default function HomePage() { return ( @@ -17,7 +60,7 @@ export default function HomePage() { - + @@ -25,16 +68,16 @@ export default function HomePage() { - + - + - + - + - + ) } diff --git a/src/pages/pods/PodsPricing.tsx b/src/pages/pods/PodsPricing.tsx index 2f6cf3d..ec6b30d 100644 --- a/src/pages/pods/PodsPricing.tsx +++ b/src/pages/pods/PodsPricing.tsx @@ -116,20 +116,8 @@ export function PodsPricing() { - {/* CTA */} - - Choose Pod - + {/* TODO: Plan-specific CTA (Choose Pod) to be reinstated when purchase/upgrade flows are ready. + Previously rendered an Choose Pod button here. */} ))} diff --git a/src/pages/storage/StorageCapabilitiesNew.tsx b/src/pages/storage/StorageCapabilitiesNew.tsx index d1b473c..afd5846 100644 --- a/src/pages/storage/StorageCapabilitiesNew.tsx +++ b/src/pages/storage/StorageCapabilitiesNew.tsx @@ -70,12 +70,8 @@ export function StorageCapabilitiesNew() { {/* Arrows inside first card */}
- - Learn more β†’ - + {/* TODO: Intro card CTA (Learn more) to be added here when destination is defined. + Previously: Learn more β†’ */}
))}