forked from emre/www_projectmycelium_com
sasha-astiadi
d8a7a7331a
- Added useId import for unique gradient IDs in SVG icons - Created six device icon components: DeviceArrowIcon, DeviceCardsIcon, DeviceClockIcon, DeviceListIcon, DeviceLockIcon, DeviceChartIcon - Mapped icons array to use cases with corresponding device icons - Updated PodsFeatures to render icons above card titles with h-8 w-8 sizing - Added mt-6 spacing to card titles for icon separation - Wrapped all
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Eyebrow, H4, H5 } from "@/components/Texts";
|
|
import PodsFlow from "./animations/PodsFlow";
|
|
import { useEffect, useState } from "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 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>
|
|
);
|
|
}
|