forked from emre/www_projectmycelium_com
sasha-astiadi
aab7e66f29
- Created PodsCapabilities component showcasing four key features (communicate, organization, manage, storage) with icon-based layout - Added PodsHow section with CloudPods animation demonstrating pod-to-pod communication concept - Implemented animated CloudPods visualization with inter-cluster data flow and pulsing effects
93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import {
|
||
ChatBubbleLeftRightIcon,
|
||
CalendarDaysIcon,
|
||
UserGroupIcon,
|
||
ShieldCheckIcon,
|
||
} from '@heroicons/react/24/solid'
|
||
|
||
import { Eyebrow, H3, P } from '@/components/Texts'
|
||
|
||
export function PodsCapabilities() {
|
||
return (
|
||
<section className="w-full max-w-8xl mx-auto bg-[#121212]">
|
||
|
||
{/* ✅ Top horizontal line with spacing */}
|
||
<div className="max-w-7xl bg-transparent 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" />
|
||
|
||
{/* ✅ Main content */}
|
||
<div className="mx-auto max-w-7xl px-6 bg-[#111111] lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-800">
|
||
|
||
{/* ✅ LEFT SIDE — Title + Intro */}
|
||
<div className="max-w-xl ">
|
||
<Eyebrow>What You Can Do</Eyebrow>
|
||
|
||
<H3 className="mt-6 text-white">
|
||
Pods Features
|
||
</H3>
|
||
|
||
<P className="mt-6 text-gray-200">
|
||
Access everything from any device — your data follows you, not the other way around.
|
||
💡 It’s like having your own tiny cloud that belongs only to you.
|
||
</P>
|
||
</div>
|
||
|
||
{/* ✅ RIGHT SIDE — 4 stacked features */}
|
||
<div className="space-y-8">
|
||
|
||
{/* 1 — Communicate */}
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||
<ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||
Communicate
|
||
</h3>
|
||
<p className="mt-2 text-gray-200 max-w-2xl">
|
||
Message, call, and share files privately — no tracking or ads.
|
||
</p>
|
||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||
</div>
|
||
|
||
{/* 2 — Organization */}
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||
<CalendarDaysIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||
Organization
|
||
</h3>
|
||
<p className="mt-2 text-gray-200 max-w-2xl">
|
||
Organize your calendar and meetings inside your own space.
|
||
</p>
|
||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||
</div>
|
||
|
||
{/* 3 — Manage */}
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||
<UserGroupIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||
Manage
|
||
</h3>
|
||
<p className="mt-2 text-gray-200 max-w-2xl">
|
||
Create small communities or teams that interact directly, Pod-to-Pod.
|
||
</p>
|
||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||
</div>
|
||
|
||
{/* 4 — Storage */}
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||
<ShieldCheckIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||
Storage
|
||
</h3>
|
||
<p className="mt-2 text-gray-200 max-w-2xl">
|
||
Store data safely with Quantum Safe File System (QSFS) built in.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ✅ Bottom horizontal line with spacing */}
|
||
<div className="w-full border-b border-gray-800" />
|
||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||
</section>
|
||
)
|
||
}
|