forked from emre/www_projectmycelium_com
sasha-astiadi
2b7559ab47
- 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
107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
'use client'
|
||
|
||
import { Eyebrow, H3, P, Small } from "@/components/Texts"
|
||
|
||
const product = {
|
||
subtitle: "BENEFITS",
|
||
name: "Runs on Your Own Infrastructure",
|
||
description: `
|
||
<p>
|
||
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.
|
||
</p>
|
||
`,
|
||
|
||
details: [
|
||
{
|
||
label: "Data Control",
|
||
name: "Your Data Lives on Your Pods",
|
||
description:
|
||
"Full control of where your data is stored and how it’s shared.",
|
||
},
|
||
{
|
||
label: "Connectivity",
|
||
name: "Direct Pod-to-Pod Networking",
|
||
description:
|
||
"Direct connections between Pods for faster, private communication.",
|
||
},
|
||
{
|
||
label: "Security",
|
||
name: "No One Can Spy or Shut You Down",
|
||
description:
|
||
"Independence from corporate servers or cloud outages.",
|
||
},
|
||
{
|
||
label: "Resilience",
|
||
name: "Resilient Even if Nodes Disconnect",
|
||
description:
|
||
"Continuous availability even if one node disconnects.",
|
||
},
|
||
],
|
||
}
|
||
|
||
export function PodsDesign() {
|
||
return (
|
||
<section className="relative w-full bg-[#FDFDFD] overflow-hidden">
|
||
{/* ▸ Top Spacing Line */}
|
||
<div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||
|
||
{/* ▸ Intro Section */}
|
||
<div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
|
||
<div className="px-8 py-12 max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
|
||
|
||
<Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
|
||
{product.subtitle}
|
||
</Eyebrow>
|
||
|
||
<H3 className="mt-4 text-black">
|
||
{product.name}
|
||
</H3>
|
||
|
||
<P
|
||
className="mt-4 text-gray-700 text-base leading-relaxed"
|
||
dangerouslySetInnerHTML={{ __html: product.description }}
|
||
/>
|
||
</div>
|
||
|
||
{/* ▸ 4-Column Highlights Grid */}
|
||
<div className="grid lg:grid-cols-4">
|
||
{product.details.map((item) => (
|
||
<div
|
||
key={item.name}
|
||
className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
|
||
>
|
||
{/* Hover Glow */}
|
||
<div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
|
||
|
||
<div className="relative">
|
||
|
||
{item.label && (
|
||
<Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
|
||
{item.label}
|
||
</Small>
|
||
)}
|
||
|
||
<h3 className="mt-4 text-lg font-semibold leading-tight text-black">
|
||
{item.name}
|
||
</h3>
|
||
|
||
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
||
{item.description}
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ▸ Bottom Spacing */}
|
||
<div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
|
||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
||
</section>
|
||
);
|
||
}
|