forked from emre/www_projectmycelium_com
feat: add architecture section with animated illustrations
- Created HomeArchitecture component showcasing decentralized network principles with SVG animations - Added animated illustrations for mesh networking, no extraction, no control, and no central servers - Enhanced CallToAction with cyan radial glow effect for visual emphasis - Fixed audience gallery image paths to use correct /images/audiences/ directory
This commit is contained in:
126
src/pages/home/HomeArchitecture.tsx
Normal file
126
src/pages/home/HomeArchitecture.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||||
import MeshNetworking from "./animations/Meshnetworking";
|
||||
import NoExtraction from "./animations/NoExtraction";
|
||||
import NoControl from "./animations/NoControl";
|
||||
import NoCentral from "./animations/NoCentral";
|
||||
|
||||
const deterministicCards = [
|
||||
{
|
||||
id: "core",
|
||||
eyebrow: "Why It Matters",
|
||||
title: "Built for a Sovereign Digital World",
|
||||
description:
|
||||
"The current internet is a rent-seeking one. Mycelium builds one that belongs to everyone — where infrastructure, data, and intelligence stay with the people and organizations who create them.",
|
||||
animation: null,
|
||||
colSpan: "lg:col-span-3",
|
||||
rowSpan: "lg:row-span-1",
|
||||
custom: true,
|
||||
noBorder: true,
|
||||
},
|
||||
{
|
||||
id: "crypto",
|
||||
title: "No central servers.",
|
||||
description:
|
||||
"Your devices form a distributed network, eliminating reliance on centralized data centers.",
|
||||
animation: <NoCentral className="lg:-mt-12" />, // ✅ 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)]",
|
||||
},
|
||||
{
|
||||
id: "stateless",
|
||||
title: "No data extraction.",
|
||||
description:
|
||||
"You own your data. Run services and AI models on your own devices, ensuring privacy and control.",
|
||||
animation: <NoExtraction className="lg:-mt-12" />, // ✅ 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: "No single point of control.",
|
||||
description:
|
||||
"No single entity can dictate or censor your online experience.",
|
||||
animation: <NoControl />, // ✅ 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 HomeArchitecture() {
|
||||
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="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">
|
||||
{deterministicCards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
|
||||
>
|
||||
{/* ✅ Disable wrapper on first card */}
|
||||
{!card.noBorder && (
|
||||
<div
|
||||
className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded} group-hover:bg-linear-to-br from-gray-900 to-gray-800`}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
|
||||
>
|
||||
{/* ✅ SVG Animation instead of images */}
|
||||
{card.animation ? (
|
||||
<div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
|
||||
<div className="w-full h-full">
|
||||
{card.animation}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-48 w-full flex items-center justify-center bg-transparent" />
|
||||
)}
|
||||
|
||||
<div className="px-8 pt-4 pb-6">
|
||||
{card.custom ? (
|
||||
<>
|
||||
{card.eyebrow && <Eyebrow>{card.eyebrow}</Eyebrow>}
|
||||
<H3 className="mt-2 text-white">{card.title}</H3>
|
||||
<P className="mt-4 max-w-lg text-gray-200">{card.description}</P>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
|
||||
{!card.noBorder && (
|
||||
<div
|
||||
className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user