forked from emre/www_projectmycelium_com
sasha-astiadi
57c39a8b2b
- 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
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
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">
|
|
<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: Animation */}
|
|
<div className="w-full lg:w-4/9">
|
|
<PodsFlow />
|
|
</div>
|
|
|
|
{/* 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,
|
|
<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>
|
|
);
|
|
}
|