forked from emre/www_projectmycelium_com
sasha-astiadi
aa6f475050
- Replaced HomeBlink with HomeAurora component for improved visual experience - Added PodCapabilities horizontal slider with interactive navigation controls - Created PodsFeatures section showcasing use cases with hover animations - Updated PodsHow layout with bullet points and new PodsFlow animation component
60 lines
2.6 KiB
TypeScript
60 lines
2.6 KiB
TypeScript
"use client";
|
||
|
||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||
import PodsFlow from "./animations/PodsFlow";
|
||
|
||
export function PodsHow() {
|
||
return (
|
||
<section className="relative w-full bg-[#121212] overflow-hidden">
|
||
{/* ✅ Top horizontal line with spacing */}
|
||
<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="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">
|
||
|
||
{/* ✅ Two-column layout */}
|
||
<div className="flex flex-col lg:flex-row-reverse gap-8">
|
||
|
||
{/* ✅ Right side animation */}
|
||
<div className="w-full lg:w-4/9">
|
||
<PodsFlow />
|
||
</div>
|
||
|
||
{/* ✅ Left side content */}
|
||
<div className="w-full lg:w-5/9 text-white">
|
||
<Eyebrow color="accent" className="">
|
||
How it works
|
||
</Eyebrow>
|
||
<H3 color="white" className="mt-6">
|
||
Living in a Pod
|
||
</H3>
|
||
<P className="max-w-4xl text-gray-400 mt-6">
|
||
When you use Mycelium, everything — your messages, calls, files — runs directly from your Pod.
|
||
</P>
|
||
<ul className="max-w-4xl text-gray-400 mt-6 space-y-3 ml-4">
|
||
<li className="flex items-start gap-3">
|
||
<span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
|
||
<span>When you message someone, it goes Pod to Pod, not through a central server.</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
|
||
<span>When you host a call, it runs on your Pod — no third-party data centers.</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<span className="mt-1.5 inline-block size-2 rounded-full bg-cyan-400" />
|
||
<span>When you save a file, it stays on your Pod, encrypted and always available.</span>
|
||
</li>
|
||
</ul>
|
||
<P className="max-w-3xl text-gray-400 mt-4">
|
||
No one else can read it, rent it, or switch it off.
|
||
You don’t log in to the internet — you are part of it.
|
||
</P>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
|
||
<div className="w-full border-b border-gray-800" />
|
||
</section>
|
||
);
|
||
}
|