ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 9 Pull Requests Projects Releases Activity

feat: add cyan glow effects and new network resilience animation

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-14 22:23:11 +01:00
parent 33821987aa
commit a3028ff448
20 changed files with 548 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/pods/CallToAction.tsx
View File

@@ -15,6 +15,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">

2
src/pages/pods/Homepod.tsx
View File

@@ -6,7 +6,7 @@ export default function Homepod() {
{/* Boxed container */}
<div
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/pods.png')", backgroundSize: "contain" }}
style={{ backgroundImage: "url('/images/computehero11.webp')", backgroundSize: "contain" }}
>
{/* Inner padding */}
<div className="px-6 py-16 lg:py-16">

12
src/pages/pods/PodsDesign.tsx
View File

@@ -49,10 +49,10 @@ export function PodsDesign() {
return (
<div className="bg-white text-gray-900">
{/* TOP LINE */}
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
<div className="w-full border-t border-l border-r border-gray-200" />
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
<div className="w-full border-t border-l border-r border-gray-100" />
<main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-200">
<main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-100">
<div className="mx-auto max-w-2xl lg:max-w-none">
<div className="lg:grid lg:grid-cols-5 lg:items-start lg:gap-x-8">
@@ -61,7 +61,7 @@ export function PodsDesign() {
<div className="lg:col-span-2 lg:mt-8 mt-2">
<img
alt="Mycelium Federation"
src="/images/cloudhosting.webp"
src="/images/pod1.png"
className="aspect-square w-full object-cover rounded-md"
/>
</div>
@@ -114,8 +114,8 @@ export function PodsDesign() {
</main>
{/* BOTTOM LINE */}
<div className="w-full border-b border-gray-200" />
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
<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>
)
}

121
src/pages/pods/PodsWhat.tsx
View File

@@ -1,5 +1,12 @@
"use client";
import {
ServerIcon,
ShieldCheckIcon,
BoltIcon,
GlobeAltIcon,
} from "@heroicons/react/24/solid";
import { Eyebrow, H3 } from "@/components/Texts";
const podCards = [
@@ -8,53 +15,38 @@ const podCards = [
eyebrow: "Capabilities",
title: "What is a Pod?",
description: null,
image: null,
colSpan: "lg:col-span-3",
rowSpan: "lg:row-span-1",
icon: null,
custom: true,
noBorder: true,
colSpan: "lg:col-span-4",
},
{
id: "home",
title: "Your private digital home on the decentralized internet",
description:
"Your Pod is a private digital home where apps, data, and identity live independently of Big Tech and central servers.",
image: "/images/test.png",
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)]",
icon: ServerIcon,
},
{
id: "control",
title: "An always-on space you fully control",
description:
"A dedicated, always-on environment you fully command — your own sovereign slice of the network that never goes offline.",
image: "/images/test.png",
colSpan: "lg:col-span-2",
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)]",
icon: ShieldCheckIcon,
},
{
id: "tools",
title: "Runs communication, storage, and collaboration tools",
description:
"Runs your communication, storage, and collaboration tools in a secure local environment without reliance on outside platforms.",
image: "/images/test.png",
colSpan: "lg:col-span-2",
rowSpan: "lg:row-span-1",
icon: BoltIcon,
},
{
id: "networking",
title: "Fully encrypted, federated peer-to-peer network",
description:
"Encrypted, federated peer-to-peer networking that links your Pod directly with trusted devices without intermediaries.",
image: "/images/test.png",
colSpan: "lg:col-span-2",
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)]",
icon: GlobeAltIcon,
},
];
@@ -62,70 +54,51 @@ export function PodsWhat() {
return (
<section className="relative w-full bg-[#121212] overflow-hidden">
{/* Top horizontal line */}
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<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="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">
<div className="grid grid-cols-1 gap-6 pt-6 lg:grid-cols-6 lg:grid-rows-2 pb-6">
{podCards.map((card) => (
<div
key={card.id}
className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
>
{/* Border wrapper for non-intro */}
{!card.noBorder && (
<div
className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111111] ${card.rounded} group-hover:bg-linear-to-br from-gray-900 to-gray-800`}
/>
)}
{/* Content container */}
<div className="mx-auto bg-[#111111] max-w-7xl px-6 lg:px-10 border border-t-0 border-b-0 border-gray-800">
{/* 4-column grid */}
<div className="grid grid-cols-1 gap-12 pt-12 lg:grid-cols-4 pb-20">
{podCards.map((card) => {
const Icon = card.icon;
return (
<div
className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
key={card.id}
className={`${card.colSpan || ""} flex flex-col ${
card.custom ? "" : "transition-transform duration-300 hover:scale-[1.02]"
}`}
>
{/* Image */}
{card.image ? (
<div className="lg:h-64 h-48 w-full flex items-center justify-center bg-transparent overflow-hidden">
<img
src={card.image}
alt={card.title}
className="h-full w-auto object-contain opacity-90"
/>
</div>
{/* Custom Intro Card */}
{card.custom ? (
<>
<Eyebrow>{card.eyebrow}</Eyebrow>
<H3 className="mt-2 text-white">{card.title}</H3>
</>
) : (
<div className="h-48 w-full flex items-center justify-center bg-transparent" />
<>
{/* TITLE WITH ICON (matching the TL example) */}
<dt className="flex items-center gap-x-3 text-base font-semibold text-white">
<Icon className="h-6 w-6 text-cyan-500" aria-hidden="true" />
{card.title}
</dt>
{/* DESCRIPTION */}
<dd className="mt-4 text-base text-gray-300">
{card.description}
</dd>
</>
)}
{/* Text */}
<div className="px-8 pt-4 pb-6">
{card.custom ? (
<>
<Eyebrow>{card.eyebrow}</Eyebrow>
<H3 className="mt-2 text-white">{card.title}</H3>
</>
) : (
<>
<p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
{card.title}
</p>
<p className="mt-1 max-w-lg text-sm/6 text-gray-200">
{card.description}
</p>
</>
)}
</div>
</div>
{/* Outer shadow */}
{!card.noBorder && (
<div
className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
/>
)}
</div>
))}
);
})}
</div>
</div>
{/* Bottom border */}
<div className="w-full border-b border-gray-800" />
<div className="max-w-7xl mx-auto py-6 border-x border-gray-800 border-t-0 border-b-0" />
</section>