diff --git a/public/images/dark-bento-01-integrations.png b/public/images/dark-bento-01-integrations.png new file mode 100644 index 0000000..140eb23 Binary files /dev/null and b/public/images/dark-bento-01-integrations.png differ diff --git a/src/pages/pods/PodsCapabilities.tsx b/src/pages/pods/PodsCapabilities.tsx new file mode 100644 index 0000000..64d51c0 --- /dev/null +++ b/src/pages/pods/PodsCapabilities.tsx @@ -0,0 +1,92 @@ +import { + ChatBubbleLeftRightIcon, + CalendarDaysIcon, + UserGroupIcon, + ShieldCheckIcon, +} from '@heroicons/react/24/solid' + +import { Eyebrow, H3, P } from '@/components/Texts' + +export function PodsCapabilities() { + return ( +
+ + {/* ✅ Top horizontal line with spacing */} +
+
+ + {/* ✅ Main content */} +
+ + {/* ✅ LEFT SIDE — Title + Intro */} +
+ What You Can Do + +

+ Pods Features +

+ +

+ Access everything from any device — your data follows you, not the other way around. + 💡 It’s like having your own tiny cloud that belongs only to you. +

+
+ + {/* ✅ RIGHT SIDE — 4 stacked features */} +
+ + {/* 1 — Communicate */} +
+

+ + Communicate +

+

+ Message, call, and share files privately — no tracking or ads. +

+
+
+ + {/* 2 — Organization */} +
+

+ + Organization +

+

+ Organize your calendar and meetings inside your own space. +

+
+
+ + {/* 3 — Manage */} +
+

+ + Manage +

+

+ Create small communities or teams that interact directly, Pod-to-Pod. +

+
+
+ + {/* 4 — Storage */} +
+

+ + Storage +

+

+ Store data safely with Quantum Safe File System (QSFS) built in. +

+
+
+
+ + {/* ✅ Bottom horizontal line with spacing */} +
+
+
+ ) +} diff --git a/src/pages/pods/PodsHow.tsx b/src/pages/pods/PodsHow.tsx new file mode 100644 index 0000000..28f9e21 --- /dev/null +++ b/src/pages/pods/PodsHow.tsx @@ -0,0 +1,53 @@ +"use client"; + +import { Eyebrow, H3, P } from "@/components/Texts"; +import CloudPods from "./animations/CloudPods"; + +export function PodsHow() { + return ( +
+ {/* ✅ Top horizontal line with spacing */} +
+
+ +
+ + {/* ✅ Two-column layout */} +
+ + {/* ✅ Right side animation */} +
+ +
+ + {/* ✅ Left side content */} +
+ + How it works + +

+ What Living in a Pod Feels Like +

+

+ When you use Mycelium, everything — your messages, calls, files — runs directly from your Pod. +

+

+ 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. +

+

+ 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. +

+

+ You don’t log in to the internet — you are part of it. +

+
+
+
+
+
+
+ ); +} diff --git a/src/pages/pods/PodsPage.tsx b/src/pages/pods/PodsPage.tsx index 135e56d..628e656 100644 --- a/src/pages/pods/PodsPage.tsx +++ b/src/pages/pods/PodsPage.tsx @@ -1,9 +1,13 @@ import Homepod from './Homepod'; +import { PodsCapabilities } from './PodsCapabilities'; +import { PodsHow } from './PodsHow'; const PodsPage = () => { return ( <> - + + + ); }; diff --git a/src/pages/pods/animations/CloudPods.tsx b/src/pages/pods/animations/CloudPods.tsx new file mode 100644 index 0000000..f4467a6 --- /dev/null +++ b/src/pages/pods/animations/CloudPods.tsx @@ -0,0 +1,195 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + bg?: string; +}; + +const W = 760; +const H = 420; + +export default function CloudPods({ + className, + accent = "#00b8db", + bg = "#0b0b0b", +}: Props) { + const prefers = useReducedMotion(); + + // Pods: 2 clusters (top-right & bottom-left) + const clusterA = [ + { x: 180, y: 300 }, + { x: 240, y: 330 }, + { x: 300, y: 290 }, + ]; + + const clusterB = [ + { x: 480, y: 100 }, + { x: 540, y: 130 }, + { x: 600, y: 90 }, + ]; + + // Combine all pods for rendering + const pods = [...clusterA, ...clusterB]; + + // Inter-cluster communication paths (cross connections) + const links = [ + [0, 3], + [1, 4], + [2, 5], + [0, 4], + [1, 5], + ]; + + const drawLink = (i: number, j: number) => { + const a = pods[i]; + const b = pods[j]; + return `M ${a.x} ${a.y} L ${b.x} ${b.y}`; + }; + + return ( +
+ + + {/* Subtle cyan glow */} + + + + + + + + + {/* Cyan gradient for pods */} + + + + + + + {/* ✅ Static base links between clusters */} + {links.map(([i, j], idx) => ( + + ))} + + {/* ✅ Cyan data signals moving across clusters */} + {!prefers && + links.map(([i, j], idx) => ( + + ))} + + {/* ✅ Cloud Pods */} + {pods.map((p, i) => ( + + + + {/* Soft inner cyan pulse */} + {!prefers && ( + + )} + + ))} + + {/* ✅ Cluster halos */} + {!prefers && ( + <> + + + + )} + +
+ ); +}