wao 0.41.3 → 0.41.5

package/lp/src/components/CodeBlock.module.css

@@ -0,0 +1,89 @@
+.wrapper {
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--bg-code);
+  overflow: hidden;
+  position: relative;
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+
+.tab {
+  padding: 12px 20px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-3);
+  transition: color 0.2s, background 0.2s;
+  position: relative;
+}
+
+.tab:hover {
+  color: var(--text-2);
+}
+
+.tabActive {
+  color: var(--accent);
+  background: rgba(168, 85, 247, 0.06);
+}
+
+.tabActive::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--accent);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px 0 0;
+}
+
+.copyBtn {
+  padding: 8px 14px;
+  font-size: 0.75rem;
+  color: var(--text-3);
+  border-radius: 8px;
+  transition: color 0.2s, background 0.2s;
+}
+
+.copyBtn:hover {
+  color: var(--text-2);
+  background: rgba(168, 85, 247, 0.08);
+}
+
+.code {
+  padding: 20px 24px;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 0.85rem;
+  line-height: 1.8;
+  overflow-x: auto;
+  white-space: pre;
+  color: var(--text-2);
+}
+
+.code :global(.kw) { color: var(--accent); }
+.code :global(.fn) { color: #60a5fa; }
+.code :global(.str) { color: #34d399; }
+.code :global(.cm) { color: var(--text-3); }
+.code :global(.op) { color: var(--text-3); }
+
+@media (max-width: 480px) {
+  .code {
+    padding: 14px 16px;
+    font-size: 0.75rem;
+    line-height: 1.7;
+  }
+
+  .tab {
+    padding: 10px 14px;
+    font-size: 0.75rem;
+  }
+}

package/lp/src/components/Footer.jsx

@@ -0,0 +1,22 @@
+import s from './Footer.module.css'
+
+export default function Footer() {
+  return (
+    <footer className={s.footer}>
+      <div className={s.bottom}>
+        <span className={s.copyright}>&copy; {new Date().getFullYear()} <a href="https://arweaveoasis.com" target="_blank" rel="noopener noreferrer">ArweaveOasis</a></span>
+        <div className={s.socials}>
+          <a href="https://twitter.com/WaoEco" className={s.socialLink} aria-label="X / Twitter" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+          </a>
+          <a href="https://github.com/arweaveoasis/wao" className={s.socialLink} aria-label="GitHub" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
+          </a>
+          <a href="https://discord.gg/jGqWtUUntQ" className={s.socialLink} aria-label="Discord" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>
+          </a>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/lp/src/components/Footer.module.css

@@ -0,0 +1,60 @@
+.footer {
+  border-top: 1px solid var(--border);
+  padding: 40px 24px;
+}
+
+.bottom {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.copyright {
+  font-size: 0.82rem;
+  color: var(--text-3);
+}
+
+.copyright a {
+  color: var(--text-2);
+  transition: color 0.2s;
+}
+
+.copyright a:hover {
+  color: var(--text-1);
+}
+
+.socials {
+  display: flex;
+  gap: 16px;
+}
+
+.socialLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  color: var(--text-3);
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.socialLink:hover {
+  border-color: var(--accent);
+  color: var(--text-1);
+}
+
+.socialLink svg {
+  width: 18px;
+  height: 18px;
+}
+
+@media (max-width: 480px) {
+  .bottom {
+    flex-direction: column;
+    gap: 16px;
+  }
+}

package/lp/src/components/Nav.jsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { useScrolled } from '../hooks/useScrolled'
+import { scrollTo } from '../utils/scrollTo'
+import s from './Nav.module.css'
+
+const NAV_LINKS = [
+  { label: 'Journey', id: 'journey' },
+  { label: 'Book', id: 'book' },
+  { label: 'SDK', id: 'sdk' },
+  { label: 'Testing', id: 'testing' },
+  { label: 'HyperADD', id: 'hyperadd' },
+  { label: 'DEVNET', id: 'devnet' },
+]
+
+export default function Nav() {
+  const scrolled = useScrolled(80)
+  const [open, setOpen] = useState(false)
+
+  const closeMenu = () => setOpen(false)
+
+  const handleNav = (e, id) => {
+    e.preventDefault()
+    closeMenu()
+    scrollTo(id)
+  }
+
+  return (
+    <>
+      <nav className={`${s.nav} ${scrolled ? s.scrolled : ''}`}>
+        <div className={s.inner}>
+          <a
+            href="/"
+            className={s.logo}
+            onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }) }}
+          >
+            <img src="/logo.png" alt="" className={s.logoIcon} />
+            WizardAO
+          </a>
+
+          <div className={s.links}>
+            {NAV_LINKS.map(l => (
+              <a key={l.id} href={`#${l.id}`} className={s.link} onClick={e => handleNav(e, l.id)}>
+                {l.label}
+              </a>
+            ))}
+          </div>
+
+          <div className={s.ctas}>
+            <a href="https://docs.wao.arweaveoasis.com" className={s.docsBtn} target="_blank" rel="noopener noreferrer">Docs</a>
+            <a href="#get-started" className={s.startBtn} onClick={e => handleNav(e, 'get-started')}>
+              Get Started
+            </a>
+          </div>
+
+          <button
+            className={`${s.hamburger} ${open ? s.hamburgerOpen : ''}`}
+            onClick={() => setOpen(!open)}
+            aria-label="Menu"
+          >
+            <span /><span /><span />
+          </button>
+        </div>
+      </nav>
+
+      <div className={`${s.mobileMenu} ${open ? s.mobileMenuOpen : ''}`}>
+        {NAV_LINKS.map(l => (
+          <a key={l.id} href={`#${l.id}`} className={s.mobileLink} onClick={e => handleNav(e, l.id)}>
+            {l.label}
+          </a>
+        ))}
+        <div className={s.mobileCtas}>
+          <a href="https://docs.wao.arweaveoasis.com" className={s.docsBtn} target="_blank" rel="noopener noreferrer" onClick={closeMenu}>Docs</a>
+          <a href="#get-started" className={s.startBtn} onClick={e => handleNav(e, 'get-started')}>
+            Get Started
+          </a>
+        </div>
+      </div>
+    </>
+  )
+}

package/lp/src/components/Nav.module.css

@@ -0,0 +1,177 @@
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: 0 24px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
+  border-bottom: 1px solid transparent;
+}
+
+.scrolled {
+  background: rgba(10, 5, 21, 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom-color: var(--border);
+}
+
+.inner {
+  max-width: var(--max-width);
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  font-family: var(--font-display);
+  font-weight: 900;
+  font-size: 1.4rem;
+  color: var(--text-1);
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logoIcon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.links {
+  display: flex;
+  gap: 32px;
+}
+
+.link {
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text-2);
+  transition: color 0.2s;
+}
+
+.link:hover {
+  color: var(--text-1);
+}
+
+.ctas {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.docsBtn {
+  padding: 8px 18px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  color: var(--text-2);
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.docsBtn:hover {
+  border-color: var(--accent);
+  color: var(--text-1);
+}
+
+.startBtn {
+  padding: 8px 18px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--accent), #7c3aed);
+  color: #fff;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.startBtn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
+}
+
+.hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  padding: 4px;
+}
+
+.hamburger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--text-2);
+  border-radius: 2px;
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.hamburgerOpen span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.hamburgerOpen span:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburgerOpen span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+.mobileMenu {
+  display: none;
+  position: fixed;
+  top: 64px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(10, 5, 21, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  padding: 32px 24px;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 99;
+}
+
+.mobileMenuOpen {
+  display: flex;
+}
+
+.mobileLink {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--text-2);
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border);
+  transition: color 0.2s;
+}
+
+.mobileLink:hover {
+  color: var(--text-1);
+}
+
+.mobileCtas {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+@media (max-width: 768px) {
+  .links, .ctas {
+    display: none;
+  }
+
+  .hamburger {
+    display: flex;
+  }
+}

package/lp/src/components/SectionWrapper.jsx

@@ -0,0 +1,15 @@
+import { useReveal } from '../hooks/useReveal'
+
+export default function SectionWrapper({ id, className = '', stagger = false, children }) {
+  const ref = useReveal(0.1)
+
+  return (
+    <section
+      id={id}
+      ref={ref}
+      className={`${stagger ? 'reveal-stagger' : 'reveal'} ${className}`}
+    >
+      {children}
+    </section>
+  )
+}

package/lp/src/hooks/useReveal.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react'
+
+export function useReveal(threshold = 0.15) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          el.classList.add('visible')
+          observer.unobserve(el)
+        }
+      },
+      { threshold }
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [threshold])
+
+  return ref
+}

package/lp/src/hooks/useScrolled.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+
+export function useScrolled(offset = 80) {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > offset)
+    window.addEventListener('scroll', onScroll, { passive: true })
+    onScroll()
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [offset])
+
+  return scrolled
+}

package/lp/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles/globals.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/lp/src/sections/Book.jsx

@@ -0,0 +1,60 @@
+import SectionWrapper from '../components/SectionWrapper'
+import s from './Book.module.css'
+
+const CHAPTERS = [
+  { ch: 'Ch 0', title: 'HyperBEAM', desc: 'The OS for the verifiable internet.', count: 'Permaweb' },
+  { ch: 'Ch 1', title: 'Setup', desc: 'Environment setup and getting started.', count: 'Environment' },
+  { ch: 'Ch 2', title: 'Erlang', desc: 'Enough Erlang to read HyperBEAM source.', count: 'Crash course' },
+  { ch: 'Ch 3', title: 'Project Structure', desc: 'How the HyperBEAM codebase is organized.', count: 'Codebase' },
+  { ch: 'Ch 4', title: 'Arweave Utils', desc: 'Transaction helpers, wallets, and GraphQL.', count: '7 modules' },
+  { ch: 'Ch 5', title: 'HyperBEAM Core', desc: 'Runtime, routing, scheduling, and message passing.', count: '11 sections' },
+  { ch: 'Ch 6', title: 'Devices', desc: 'Compute, storage, cron, payment, and auth devices.', count: '9 sections' },
+  { ch: 'Ch 7', title: 'Building Your Own Devices', desc: 'From beginner to advanced — Erlang, Rust, and C++.', count: '5 tutorials' },
+]
+
+export default function Book() {
+  return (
+    <SectionWrapper id="book" className={s.section}>
+      <div className={s.inner}>
+        <div className={s.imageCol}>
+          <span className={`eyebrow ${s.eyebrow}`}>Step 01 &middot; Learn</span>
+          <h2 className="section-title">The knowledge base<br />for devs and agents.</h2>
+          <p className={`section-subtitle ${s.subtitle}`}>
+            7 chapters covering AO and HyperBEAM from the ground up, plus a
+            comprehensive 139-module reference — for devs and AI agents alike.
+          </p>
+          <div className={s.imageWrap}>
+            <div className={s.glow} />
+            <div className={s.book}>
+              <img src="/images/book.jpg" alt="HyperBEAM Book" className={s.bookCover} />
+            </div>
+          </div>
+          <div className={s.btnRow}>
+            <a href="https://docs.wao.arweaveoasis.com/book" className={`btn-primary ${s.ctaBtn}`} target="_blank" rel="noopener noreferrer">
+              Read the Book
+            </a>
+            <a href="https://docs.wao.arweaveoasis.com/hyperbeam" className={`btn-ghost ${s.ctaBtn}`} target="_blank" rel="noopener noreferrer">
+              Go to Reference
+            </a>
+          </div>
+        </div>
+
+        <div className={s.textCol}>
+          <div className={s.tocPill}>Table of Contents</div>
+          <div className={s.chapters}>
+            {CHAPTERS.map(ch => (
+              <div className={s.chapter} key={ch.ch}>
+                <span className={s.chapterNum}>{ch.ch}</span>
+                <div className={s.chapterContent}>
+                  <span className={s.chapterTitle}>{ch.title}</span>
+                  <span className={s.chapterDesc}>{ch.desc}</span>
+                </div>
+                {ch.count && <span className={s.chapterCount}>{ch.count}</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </SectionWrapper>
+  )
+}