forked from emre/www_projectmycelium_com
refactor: streamline page components and simplify UI elements
- Removed unused HomeAudience component from HomePage - Renamed NetworkPros to CloudPros for clarity - Removed bullet point lists from PodsFeatures to simplify presentation - Replaced PodCapabilities with PodsWhat and removed PodsComing section
This commit is contained in:
133
src/pages/pods/PodsWhat.tsx
Normal file
133
src/pages/pods/PodsWhat.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { Eyebrow, H3 } from "@/components/Texts";
|
||||
|
||||
const podCards = [
|
||||
{
|
||||
id: "intro",
|
||||
eyebrow: "Capabilities",
|
||||
title: "What is a Pod?",
|
||||
description: null,
|
||||
image: null,
|
||||
colSpan: "lg:col-span-3",
|
||||
rowSpan: "lg:row-span-1",
|
||||
custom: true,
|
||||
noBorder: true,
|
||||
},
|
||||
{
|
||||
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)]",
|
||||
},
|
||||
{
|
||||
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)]",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
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)]",
|
||||
},
|
||||
];
|
||||
|
||||
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="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`}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
|
||||
>
|
||||
{/* 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>
|
||||
) : (
|
||||
<div className="h-48 w-full flex items-center justify-center bg-transparent" />
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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