forked from emre/www_projectmycelium_com
refactor: redesign pods page with bento grid layout and improved benefits sections
- Increased CloudHeroNew vertical padding on large screens (lg:py-16 to lg:py-24) - Reduced spacing between description paragraphs in CloudHeroNew (mt-4 to mt-2) - Created PodsBento component with animated bento grid showcasing pod benefits - Added animations for data control, connectivity, security, and resilience features - Refactored PodsDesign from accordion layout to centered intro with 4-column grid - Create
This commit is contained in:
160
src/pages/pods/PodsBento.tsx
Normal file
160
src/pages/pods/PodsBento.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
"use client";
|
||||
|
||||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||||
import NoExtraction from "./animations/NoExtraction";
|
||||
import NoControl from "./animations/NoControl";
|
||||
import NoCentral from "./animations/NoCentral";
|
||||
import NoSinglePoint from "./animations/NoSinglePoint";
|
||||
|
||||
const deterministicCards = [
|
||||
{
|
||||
id: "intro",
|
||||
eyebrow: "BENEFITS",
|
||||
title: "Runs on Your Own Infrastructure",
|
||||
description:
|
||||
"Each Pod lives on your own hardware or on trusted local nodes in the Mycelium Network. There is no central cloud and no company in the middle. You are not uploading your life to the cloud. You are running it yourself.",
|
||||
animation: null,
|
||||
colSpan: "lg:col-span-3",
|
||||
rowSpan: "lg:row-span-1",
|
||||
custom: true,
|
||||
noBorder: true,
|
||||
},
|
||||
|
||||
{
|
||||
id: "data",
|
||||
label: "Data Control",
|
||||
title: "Your Data Lives on Your Pods",
|
||||
description:
|
||||
"Full control of where your data is stored and how it’s shared.",
|
||||
animation: <NoCentral className="lg:-mt-12" />,
|
||||
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: "connectivity",
|
||||
label: "Connectivity",
|
||||
title: "Direct Pod-to-Pod Networking",
|
||||
description:
|
||||
"Direct connections between Pods for faster, private communication.",
|
||||
animation: <NoExtraction className="lg:-mt-12" />,
|
||||
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: "security",
|
||||
label: "Security",
|
||||
title: "No One Can Spy or Shut You Down",
|
||||
description:
|
||||
"Independence from corporate servers or cloud outages.",
|
||||
animation: <NoSinglePoint />,
|
||||
colSpan: "lg:col-span-2",
|
||||
rowSpan: "lg:row-span-1",
|
||||
rounded: "",
|
||||
innerRounded: "",
|
||||
},
|
||||
|
||||
{
|
||||
id: "resilience",
|
||||
label: "Resilience",
|
||||
title: "Resilient Even if Nodes Disconnect",
|
||||
description:
|
||||
"Continuous availability even if one node disconnects.",
|
||||
animation: <NoControl />,
|
||||
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 PodsBento() {
|
||||
return (
|
||||
<section className="relative w-full bg-[#121212] overflow-hidden">
|
||||
{/* TOP 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 flex flex-col ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
|
||||
>
|
||||
{/* DISABLE OUTER WRAPPER ON INTRO CARD */}
|
||||
{!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}`}
|
||||
>
|
||||
{/* ANIMATION */}
|
||||
{card.animation ? (
|
||||
<div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center justify-center">
|
||||
<div className="w-full h-full object-cover">
|
||||
{card.animation}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-48 w-full flex items-center justify-center bg-transparent" />
|
||||
)}
|
||||
|
||||
{/* TEXT AREA */}
|
||||
<div className="px-8 pt-4 pb-6">
|
||||
{card.custom ? (
|
||||
<>
|
||||
<Eyebrow className="text-cyan-500">
|
||||
{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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{card.label && (
|
||||
<p className="text-xs uppercase tracking-[0.16em] text-cyan-500">
|
||||
{card.label}
|
||||
</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-300">
|
||||
{card.description}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OUTLINE 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 LINE */}
|
||||
<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