ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Projects Releases Activity

feat: redesign pods page with enhanced UI and animations

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-13 14:04:13 +01:00
parent 5c2fcecbd9
commit aa6f475050
7 changed files with 513 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/pods/PodsHow.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { Eyebrow, H3, P } from "@/components/Texts";
import CloudPods from "./animations/CloudPods";
import PodsFlow from "./animations/PodsFlow";
export function PodsHow() {
return (
@@ -13,34 +13,40 @@ export function PodsHow() {
<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-16">
<div className="flex flex-col lg:flex-row-reverse gap-8">
{/* ✅ Right side animation */}
<div className="w-full lg:w-1/2">
<CloudPods />
<div className="w-full lg:w-4/9">
<PodsFlow />
</div>
{/* ✅ Left side content */}
<div className="w-full lg:w-1/2 text-white">
<div className="w-full lg:w-5/9 text-white">
<Eyebrow color="accent" className="">
How it works
</Eyebrow>
<H3 color="white" className="mt-6">
What Living in a Pod Feels Like
Living in a Pod
</H3>
<P className="max-w-3xl text-gray-400 mt-6">
<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">
It’s your personal digital hub:
When you message someone, it goes Pod to Pod, not through a central server.
When you host a call, it runs on your Pod — no third-party data centers.
</P>
<P className="max-w-3xl text-gray-400 mt-4">
When you save a file, it stays on your Pod, encrypted and always available.
No one else can read it, rent it, or switch it off.
</P>
<P className="max-w-3xl text-gray-400 mt-4">
You don’t log in to the internet — you are part of it.
</P>
</div>