diff --git a/src/app/page.jsx b/src/app/page.jsx index 5467c5a7..8b9bfd32 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,6 +1,7 @@ import Image from 'next/image' import Link from 'next/link' import { ArrowRightIcon } from '@heroicons/react/24/outline' +import { Cpu } from 'lucide-react' import {FooterMarketing} from '@/components/FooterMarketing'; import {HeaderSparse} from '@/components/HeaderSparse'; @@ -28,7 +29,7 @@ export default function Page() {
-
+
{/* hero */}
@@ -147,6 +148,17 @@ export default function Page() {
+ +
+
+

IoT & Embedded Devices

+

Run iroh on ESP32, Raspberry Pi, and Linux with the same API. Devices discover each other automatically — no brokers, no gateways.

+
+
+ +
+
+
diff --git a/src/app/providers.jsx b/src/app/providers.jsx index fd430207..bf4ae474 100644 --- a/src/app/providers.jsx +++ b/src/app/providers.jsx @@ -31,7 +31,7 @@ export const AppContext = createContext({}) export function Providers({ children }) { return ( - + {children} diff --git a/src/app/solutions/iot/page.jsx b/src/app/solutions/iot/page.jsx new file mode 100644 index 00000000..2839e076 --- /dev/null +++ b/src/app/solutions/iot/page.jsx @@ -0,0 +1,130 @@ +import { Button } from "@/components/Button" +import { HeaderSparse } from '@/components/HeaderSparse' +import { FooterMarketing } from "@/components/FooterMarketing" +import Link from "next/link" +import { DiscoveryDiagram } from "@/components/DiscoveryDiagram" + +export const metadata = { + title: 'Iroh for IoT & Embedded Devices', + description: 'Connect embedded devices directly with iroh. Run on ESP32, Raspberry Pi, and Linux. No brokers, no gateways.', +} + +const devices = [ + { name: "Raspberry Pi", note: "Fully supported" }, + { name: "ESP32", note: "4 MiB flash / 2 MiB RAM" }, + { name: "Linux SBCs", note: "x86_64 and ARM" }, + { name: "FreeRTOS", note: "Microcontroller-class" }, +] + +export default function IoTUseCasePage() { + return ( +
+ + +
+ {/* Hero */} +
+
+

IoT & Embedded

+

+ Connect every device, everywhere +

+

+ Run iroh on ESP32, Raspberry Pi, and Linux with the same API. + No brokers, no gateways. +

+
+ + + + + + +
+
+
+ + {/* Discovery */} +
+
+
+
+

Automatic Discovery

+

Devices find each other

+

+ Power on a device and it announces itself on the local network. + Peers connect directly over Wi-Fi, Ethernet, or Bluetooth — no + broker, no manual pairing, no cloud round-trip. +

+
+
+ +
+
+
+
+ + {/* Device Support */} +
+
+

From microcontroller to cloud

+

+ The same API runs across the full range of hardware a connected product touches. +

+
+ {devices.map((device) => ( +
+

{device.name}

+

{device.note}

+
+ ))} +
+

+ See the full{" "} + + compatibility matrix + . +

+
+
+ + {/* CTA */} +
+
+

+ Ship devices that just work +

+
+ + + + + + +
+
+
+ + +
+
+ ) +} diff --git a/src/app/solutions/page.jsx b/src/app/solutions/page.jsx index 89497715..70b03c8d 100644 --- a/src/app/solutions/page.jsx +++ b/src/app/solutions/page.jsx @@ -43,6 +43,13 @@ const solutions = [ logo: "paycode", logoExt: "svg", }, + { + category: "IoT & Embedded Devices", + company: "IoT", + headline: "Connect Every Device, Everywhere", + description: "Run iroh on ESP32, Raspberry Pi, and Linux with the same API. No brokers, no gateways, no custom protocols.", + href: "/solutions/iot", + }, ] export default function SolutionsPage() { diff --git a/src/components/DiscoveryDiagram.jsx b/src/components/DiscoveryDiagram.jsx new file mode 100644 index 00000000..3ef164ad --- /dev/null +++ b/src/components/DiscoveryDiagram.jsx @@ -0,0 +1,129 @@ +const palette = [ + "#7C7CFF", // irohPurple-500 + "#6257F7", // irohPurple-600 + "#4E3FE0", // irohPurple-700 +] + +const GRAY = "#888" + +// Device positions +const A = { x: 130, y: 110 } // ESP32 +const B = { x: 390, y: 110 } // Raspberry Pi +const C = { x: 260, y: 250 } // Phone / controller + +const ESP32 = ({ x, y }) => ( + + + + + + + + + + ESP32 + +) + +const RaspberryPi = ({ x, y }) => ( + + + + + + {/* pin header */} + + + Raspberry Pi + +) + +const Phone = ({ x, y }) => ( + + + + + Phone + +) + +// Expanding discovery ring +const Ripple = ({ cx, cy, delay, color }) => ( + + + + +) + +// Animated connection line that fades in +const Connection = ({ x1, y1, x2, y2, delay, color }) => ( + + + + + + + + + + +) + +const IrohBadge = ({ x, y }) => ( + + + + + iroh + + +) + +export function DiscoveryDiagram({ className }) { + const centerX = (A.x + B.x + C.x) / 3 + const centerY = (A.y + B.y + C.y) / 3 + + return ( +
+ + + {/* Discovery ripples — each device broadcasts */} + + + + + + + + {/* Peer connections form after discovery */} + + + + + {/* Devices */} + + + + + {/* Center iroh badge */} + + + {/* Label */} + + LOCAL DISCOVERY + + + devices find each other on the network + + + +
+ ) +} diff --git a/src/components/FeatureTabs.jsx b/src/components/FeatureTabs.jsx index fd93f2b4..20f05345 100644 --- a/src/components/FeatureTabs.jsx +++ b/src/components/FeatureTabs.jsx @@ -27,13 +27,13 @@ export function FeatureTabs({ title, tabs }) { className={`text-left py-5 border-l-2 pl-5 transition-all cursor-pointer ${ i === active ? 'border-irohPurple-500 opacity-100' - : 'border-irohGray-200 dark:border-irohGray-700 opacity-40 hover:opacity-60' + : 'border-irohGray-200 dark:border-irohGray-700 opacity-70 hover:opacity-90' }`} >

{tab.label}

-
+
{tab.body}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 973fb623..9557ce9f 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -27,6 +27,7 @@ export const navItems = [ {label: 'Video Streaming', href: '/solutions/rave'}, {label: 'Real-time Sync', href: '/solutions/delta-chat'}, {label: 'Payments & POS', href: '/solutions/pos'}, + {label: 'IoT & Embedded', href: '/solutions/iot'}, ]}, {content: 'Docs', href: 'https://docs.iroh.computer/'}, {content: 'Blog', href: '/blog'}, @@ -77,7 +78,7 @@ function DropdownNavItem({ label, items }) { {item.label} diff --git a/src/components/HeaderSparse.jsx b/src/components/HeaderSparse.jsx index bb771b67..f34f53fc 100644 --- a/src/components/HeaderSparse.jsx +++ b/src/components/HeaderSparse.jsx @@ -12,7 +12,7 @@ function TopLevelNavItem({ href, children }) {
  • {children} @@ -38,7 +38,7 @@ function DropdownNavItem({ href, label, items }) {
    • diff --git a/src/components/PaycodePCIDiagram.jsx b/src/components/PaycodePCIDiagram.jsx index 8c1c1992..e7edefb0 100644 --- a/src/components/PaycodePCIDiagram.jsx +++ b/src/components/PaycodePCIDiagram.jsx @@ -154,7 +154,7 @@ export function PaycodePCIDiagram({ className }) { const pciHeight = 230 return ( -
    +
    {/* ---- PCI Compliance Boundary ---- */}