diff --git a/public/images/podsimg.png b/public/images/podsimg.png new file mode 100644 index 0000000..fda9116 Binary files /dev/null and b/public/images/podsimg.png differ diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 4d38cd0..e6b6bdc 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -5,7 +5,7 @@ import { CallToAction } from './CallToAction' import { HomeTab } from './HomeTab' import { HomeMap } from './HomeMap' import { HomeAudience } from './HomeAudience' -import { HomeBlink } from './HomeBlink' +import { HomeAurora } from './HomeAurora' import { HomeArchitecture } from './HomeArchitecture'; @@ -19,7 +19,7 @@ export default function HomePage() { return (
- + diff --git a/src/pages/pods/PodCapabilities.tsx b/src/pages/pods/PodCapabilities.tsx new file mode 100644 index 0000000..3d24eea --- /dev/null +++ b/src/pages/pods/PodCapabilities.tsx @@ -0,0 +1,151 @@ +"use client"; + +import { useRef } from "react"; +import { Eyebrow, CP, CT, H4 } from "@/components/Texts"; +import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5"; + +import { + HomeModernIcon, + CpuChipIcon, + ServerStackIcon, + ShieldCheckIcon, +} from "@heroicons/react/24/solid"; + +const capabilities = [ + { + isIntro: true, + eyebrow: "CAPABILITIES", + title: "What is a Pod?", + description: "", + }, + + { + title: "Your private digital home on the decentralized internet", + description: + "Your Pod is a private digital home where apps, data, and identity live independently of Big Tech and central servers.", + icon: ( +
+ +
+ ), + }, + + { + title: "An always-on space you fully control", + description: + "A dedicated, always-on environment you fully command — your own sovereign slice of the network that never goes offline.", + icon: ( +
+ +
+ ), + }, + + { + title: "Runs communication, storage, and collaboration tools", + description: + "Runs your communication, storage, and collaboration tools in a secure local environment without reliance on outside platforms.", + icon: ( +
+ +
+ ), + }, + + { + title: "Fully encrypted, federated peer-to-peer network", + description: + "Encrypted, federated peer-to-peer networking that links your Pod directly with trusted devices without intermediaries.", + icon: ( +
+ +
+ ), + }, +]; + +export function PodCapabilities() { + const sliderRef = useRef(null); + + const scrollLeft = () => + sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" }); + + const scrollRight = () => + sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" }); + + return ( +
+
+
+ +
+ {/* Horizontal Slider */} +
    + {capabilities.map((item, idx) => ( +
  • + {/* INTRO CARD */} + {item.isIntro ? ( +
    +
    + {item.eyebrow} +

    {item.title}

    +

    + {item.description} +

    +
    + + {/* Arrow controls */} +
    + + + +
    +
    + ) : ( + <> + {/* LEFT-ALIGNED ICON */} + {item.icon} + +
    + + {/* LEFT-ALIGNED TEXT */} + + {item.title} + + + + {item.description} + + + )} +
    • + ))} +
+
+ +
+
+
+ ); +} diff --git a/src/pages/pods/PodsFeatures.tsx b/src/pages/pods/PodsFeatures.tsx new file mode 100644 index 0000000..f975c05 --- /dev/null +++ b/src/pages/pods/PodsFeatures.tsx @@ -0,0 +1,142 @@ +"use client"; + +import { Container } from "@/components/Container"; +import { CP, Small } from "@/components/Texts"; + +const useCases = [ + { + title: "Private Messaging & Calling", + description: + "Communicate directly Pod-to-Pod with no centralized routing.", + bullets: [ + "End-to-end encrypted messaging and voice calling.", + "No intermediaries — connections flow directly between Pods.", + "Zero metadata profiling, tracking, or data resale.", + ], + }, + { + title: "Safe File Storage & Sharing", + description: + "Store and share files securely without exposing data to third parties.", + bullets: [ + "Files remain private with no platform-level scanning or analysis.", + "Share documents and media directly with trusted contacts.", + "Full ownership of your content — no cloud vendor dependencies.", + ], + }, + { + title: "Personal Calendar & Meetings", + description: + "Manage your schedule within your own sovereign digital space.", + bullets: [ + "Keep events, appointments, and reminders fully private.", + "Coordinate calls and meetings entirely inside your Pod.", + "No syncing with external servers or corporate platforms.", + ], + }, + { + title: "Private Communities & Teams", + description: + "Create groups or collaborative spaces without platform ownership.", + bullets: [ + "Form teams, friendship circles, and micro-communities.", + "All interactions occur directly Pod-to-Pod.", + "No hosting company or service provider controls your group data.", + ], + }, + { + title: "Quantum Safe File System (QSFS)", + description: + "Store data using a self-healing, encrypted, quantum-resistant system.", + bullets: [ + "Files are encrypted, split, and distributed across trusted nodes.", + "Designed to withstand future quantum-level attacks.", + "Automatic repair and reconstruction of data fragments.", + ], + }, + { + title: "Access From Any Device", + description: + "Your Pod travels with you — always accessible, always yours.", + bullets: [ + "Use your Pod from phones, laptops, tablets, or shared machines.", + "Your identity, apps, and files follow you securely.", + "No syncing or duplicated copies — direct access to your environment.", + ], + }, +]; + +export function PodsFeatures() { + return ( +
+ {/* Top horizontal spacing */} +
+
+ + + {/* Header */} +
+

+ WHAT YOU CAN DO +

+ +

+ A Fully Personal, Sovereign Digital Environment +

+ +

+ A Pod gives you a secure digital home where communication, storage, + identity, and collaboration remain fully under your control. +

+
+ + {/* Cards */} +
    + {useCases.map((useCase) => ( +
  • + {/* Title + label */} +
    +

    + {useCase.title} +

    + + Feature + +
    + + {/* Short description */} +

    + {useCase.description} +

    + + {/* Bullet list */} +
      + {useCase.bullets.map((bullet) => ( +
    • + + {bullet} +
      • + ))} +
    +
    • + ))} +
+ + + {/* Bottom spacing */} +
+
+
+ ); +} diff --git a/src/pages/pods/PodsHow.tsx b/src/pages/pods/PodsHow.tsx index 28f9e21..c427bab 100644 --- a/src/pages/pods/PodsHow.tsx +++ b/src/pages/pods/PodsHow.tsx @@ -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() {
{/* ✅ Two-column layout */} -
+
{/* ✅ Right side animation */} -
- +
+
{/* ✅ Left side content */} -
+
How it works

- What Living in a Pod Feels Like + Living in a Pod

-

+

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

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

- 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 628e656..26d1ad5 100644 --- a/src/pages/pods/PodsPage.tsx +++ b/src/pages/pods/PodsPage.tsx @@ -1,13 +1,15 @@ import Homepod from './Homepod'; -import { PodsCapabilities } from './PodsCapabilities'; +import { PodCapabilities } from './PodCapabilities'; import { PodsHow } from './PodsHow'; +import { PodsFeatures } from './PodsFeatures'; const PodsPage = () => { return ( <> - - + + + ); }; diff --git a/src/pages/pods/animations/PodsFlow.tsx b/src/pages/pods/animations/PodsFlow.tsx new file mode 100644 index 0000000..62ce539 --- /dev/null +++ b/src/pages/pods/animations/PodsFlow.tsx @@ -0,0 +1,192 @@ +"use client"; + +import { motion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + gridStroke?: string; +}; + +const W = 760; +const H = 420; + +export default function PodsFlow({ + className, + accent = "#00b8db", + gridStroke = "#2b2a2a", +}: Props) { + const pods = [ + { x: 100, y: 180, label: "Pod 1" }, + { x: 260, y: 180, label: "Pod 2" }, + { x: 420, y: 180, label: "Pod 3" }, + { x: 580, y: 180, label: "Pod 4" }, + ]; + + // Pulse path + const path = ` + M ${pods[0].x + 80} ${pods[0].y + 40} + L ${pods[1].x - 10} ${pods[1].y + 40} + L ${pods[1].x + 80} ${pods[1].y + 40} + L ${pods[2].x - 10} ${pods[2].y + 40} + L ${pods[2].x + 80} ${pods[2].y + 40} + L ${pods[3].x - 10} ${pods[3].y + 40} + `; + + // Arrow segments + const arrows = [ + { + d: `M ${pods[0].x + 80} ${pods[0].y + 40} L ${pods[1].x - 6} ${pods[1].y + 40}`, + end: { x: pods[1].x - 6, y: pods[1].y + 40 }, + }, + { + d: `M ${pods[1].x + 80} ${pods[1].y + 40} L ${pods[2].x - 6} ${pods[2].y + 40}`, + end: { x: pods[2].x - 6, y: pods[2].y + 40 }, + }, + { + d: `M ${pods[2].x + 80} ${pods[2].y + 40} L ${pods[3].x - 6} ${pods[3].y + 40}`, + end: { x: pods[3].x - 6, y: pods[3].y + 40 }, + }, + ]; + + return ( + + ); +}