ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 9 Pull Requests Projects Releases Activity

feat: refactor pods page with simplified content and improved animations

Browse Source 
- Added agent1.png image asset
- Refactored InfiniteMovingCards component with cleaner animation logic and improved duplication handling
- Changed default speed from "fast" to "slow" and simplified animation setup
- Updated AgentBento title from "Augmented Intelligence Fabric" to "Intelligence Fabric"
- Increased Homepod vertical padding on large screens (lg:py-16 to lg:py-24)
- Removed "Feature" label from PodsFeatures use
This commit is contained in:
sasha-astiadi
2025-11-17 14:39:23 +01:00
parent 6ff539b3fc
commit 57c39a8b2b
9 changed files with 154 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,57 +1,70 @@
"use client";
import { Eyebrow, H3, P } from "@/components/Texts";
import { Eyebrow, H4, H5 } from "@/components/Texts";
import PodsFlow from "./animations/PodsFlow";
import { useEffect, useState } from "react";
import { IconClockHour5 } from "@tabler/icons-react";
const phrases = [
"everything runs directly from your Pod.",
"Messages travel from Pod to Pod, never through a server.",
"Calls are hosted on your Pod, not in a data center.",
"Files stay encrypted, available, and always yours.",
];
export function PodsHow() {
const [index, setIndex] = useState(0);
const [fade, setFade] = useState(true);
useEffect(() => {
const interval = setInterval(() => {
setFade(false);
setTimeout(() => {
setIndex((prev) => (prev + 1) % phrases.length);
setFade(true);
}, 300);
}, 3000);
return () => clearInterval(interval);
}, []);
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 */}
{/* Two-column layout */}
<div className="flex flex-col lg:flex-row-reverse gap-8">
{/* ✅ Right side animation */}
{/* Right: 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">
A Pod in Action
</H3>
<P className="max-w-4xl text-gray-400 mt-6">
When you use Mycelium, everything runs directly from your Pod.
</P>
<ul className="max-w-4xl text-gray-400 mt-6 space-y-2 ml-6">
<li className="flex items-start gap-2">
<span className="mt-1 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 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 involved.</span>
</li>
<li className="flex items-start gap-3">
<span className="mt-1 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>
{/* Left: JUST the H3 with auto-changing sentence */}
<div className="w-full lg:w-5/9 text-white flex items-center">
<div>
<Eyebrow color="accent">How it works</Eyebrow>
<H4 color="white">A Pod in Action</H4>
<H5 color="white" className="mt-4">
When you use Mycelium,&nbsp;
<span
className={`inline-block transition-opacity duration-300 ${
fade ? "opacity-100" : "opacity-0"
}`}
>
{phrases[index]}
</span>
</H5>
</div>
</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>