wao 0.41.3 → 0.41.5

package/lp/src/sections/Hero.jsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from 'react'
+import { scrollTo } from '../utils/scrollTo'
+import s from './Hero.module.css'
+
+const STATS = [
+  { value: '5', label: 'Test Envs' },
+  { value: '1000x', label: 'Faster' },
+  { value: 'Free', label: 'To Start' },
+]
+
+export default function Hero() {
+  const sectionRef = useRef(null)
+
+  useEffect(() => {
+    const el = sectionRef.current
+    if (!el) return
+    requestAnimationFrame(() => el.classList.add(s.entered))
+  }, [])
+
+  return (
+    <section className={s.hero} id="hero" ref={sectionRef}>
+      <div className={s.meshBg} />
+
+      <div className={s.content}>
+        <span className={s.badge}>AO &amp; HyperBEAM Toolchain</span>
+        <h1 className={s.title}>
+          Agent Driven Development<br />
+          for the <span className={s.gradient}>Verifiable Internet.</span>
+        </h1>
+
+        <p className={s.subtitle}>
+          Write less code with the SDK. Write no code with AI agents.
+          Test at lightning speed. Learn from the most comprehensive
+          AO knowledge base — built for devs and agents alike.
+        </p>
+
+        <div className={s.ctas}>
+          <a
+            href="#get-started"
+            className="btn-primary"
+            onClick={e => { e.preventDefault(); scrollTo('get-started') }}
+          >
+            Start Your Journey
+          </a>
+          <a
+            href="https://github.com/arweaveoasis/wao"
+            className="btn-ghost"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View on GitHub
+          </a>
+        </div>
+
+        <div className={s.stats}>
+          {STATS.map(st => (
+            <div className={s.stat} key={st.label}>
+              <span className={s.statValue}>{st.value}</span>
+              <span className={s.statLabel}>{st.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+    </section>
+  )
+}

package/lp/src/sections/Hero.module.css

@@ -0,0 +1,202 @@
+.hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 140px 24px 80px;
+  overflow: hidden;
+}
+
+/* Background image with mask */
+.meshBg {
+  position: absolute;
+  inset: 0;
+  background: url('/images/hero-bg.png') center/cover no-repeat;
+  pointer-events: none;
+  mask-image:
+    radial-gradient(ellipse 60% 50% at 75% 60%, black 0%, transparent 70%),
+    radial-gradient(ellipse 35% 45% at 15% 45%, rgba(0,0,0,0.5) 0%, transparent 60%);
+  -webkit-mask-image:
+    radial-gradient(ellipse 60% 50% at 75% 60%, black 0%, transparent 70%),
+    radial-gradient(ellipse 35% 45% at 15% 45%, rgba(0,0,0,0.5) 0%, transparent 60%);
+  mask-composite: add;
+  -webkit-mask-composite: source-over;
+  opacity: 0.7;
+  animation: heroBgPulse 8s ease-in-out infinite alternate;
+}
+
+@keyframes heroBgPulse {
+  0% { opacity: 0.6; }
+  100% { opacity: 0.8; }
+}
+
+/* Colored glow accents */
+.hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle 400px at 70% 65%, rgba(59, 130, 246, 0.12) 0%, transparent 70%),
+    radial-gradient(circle 300px at 25% 75%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
+    linear-gradient(180deg, transparent 70%, var(--bg-primary) 100%);
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  max-width: 1000px;
+}
+
+/* Staggered entrance */
+.badge,
+.title,
+.subtitle,
+.ctas,
+.stats {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.entered .badge    { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
+.entered .title    { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
+.entered .subtitle { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
+.entered .ctas     { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
+.entered .stats    { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 18px;
+  border-radius: 100px;
+  border: 1px solid var(--border);
+  background: rgba(168, 85, 247, 0.06);
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--accent-light);
+  margin-bottom: 32px;
+}
+
+.badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+}
+
+.title {
+  font-size: clamp(2.5rem, 6vw, 4.2rem);
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 28px;
+  letter-spacing: -0.03em;
+}
+
+.gradient {
+  background: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradientShift 6s ease-in-out infinite;
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: var(--text-2);
+  line-height: 1.7;
+  max-width: 600px;
+  margin: 0 auto 40px;
+}
+
+.ctas {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Stat pills — horizontal row */
+.stats {
+  display: flex;
+  gap: 16px;
+  margin-top: 48px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px 28px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.statValue {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--accent-light);
+}
+
+.statLabel {
+  font-size: 0.72rem;
+  color: rgba(255, 255, 255, 0.7);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+@media (max-width: 768px) {
+  .stats {
+    gap: 10px;
+  }
+
+  .stat {
+    padding: 12px 20px;
+  }
+
+  .statValue {
+    font-size: 0.95rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding: 120px 20px 60px;
+  }
+
+  .subtitle {
+    font-size: 1.05rem;
+  }
+
+  .stats {
+    flex-direction: column;
+    max-width: 280px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .stat {
+    flex-direction: row;
+    gap: 10px;
+  }
+}

package/lp/src/sections/HyperADD.jsx

@@ -0,0 +1,46 @@
+import SectionWrapper from '../components/SectionWrapper'
+import s from './HyperADD.module.css'
+
+const FEATURES = [
+  'Scaffold projects instantly',
+  '10 specialized HyperWizard roles',
+  'Quality gates & enforcing hooks',
+  '20+ slash commands',
+  'Persistent task tracking',
+  'Structured agent handoffs',
+]
+
+export default function HyperADD() {
+  return (
+    <SectionWrapper id="hyperadd" className={s.section}>
+      {/* Full-bleed background image */}
+      <div className={s.bgImage} />
+      <div className={s.bgOverlay} />
+
+      <div className={s.heroContent}>
+        <div className={s.textCol}>
+          <span className={`eyebrow ${s.eyebrow}`}>Step 04 &middot; Build with AI</span>
+          <h2 className={`section-title ${s.title}`}>Write no code.</h2>
+          <p className={s.subtitle}>
+            AI agents that scaffold, build, test, and ship your AO applications.
+            Persistent context, quality gates, and structured handoffs — you direct, they deliver.
+          </p>
+
+          <div className={s.pills}>
+            {FEATURES.map(f => (
+              <span className={s.pill} key={f}>{f}</span>
+            ))}
+          </div>
+
+          <a href="https://docs.wao.arweaveoasis.com/add/overview" className={`btn-primary ${s.ctaBtn}`} target="_blank" rel="noopener noreferrer">
+            Build with HyperADD
+          </a>
+        </div>
+
+        <div className={s.screenshotCol}>
+          <img src="/images/dashboard.png" alt="HyperADD Dashboard" className={s.screenshot} />
+        </div>
+      </div>
+    </SectionWrapper>
+  )
+}

package/lp/src/sections/HyperADD.module.css

@@ -0,0 +1,113 @@
+.section {
+  --section-accent: #3b82f6;
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* Full-bleed background */
+.bgImage {
+  position: absolute;
+  inset: 0;
+  background: url('/images/hyperadd.png') center/cover no-repeat;
+  z-index: 0;
+}
+
+.bgOverlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, var(--bg-primary) 0%, rgba(10, 5, 21, 0.7) 30%, rgba(10, 5, 21, 0.75) 70%, var(--bg-primary) 100%);
+  z-index: 1;
+}
+
+.heroContent {
+  position: relative;
+  z-index: 2;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 48px;
+  align-items: center;
+  padding: 120px 24px;
+}
+
+.textCol {
+  display: flex;
+  flex-direction: column;
+}
+
+.eyebrow {
+  color: #3b82f6;
+}
+
+.title {
+  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
+}
+
+.subtitle {
+  font-size: 1.1rem;
+  color: var(--text-2);
+  line-height: 1.7;
+  max-width: 500px;
+  margin-bottom: 32px;
+}
+
+/* Feature pills */
+.pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.pill {
+  padding: 8px 16px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  border-radius: 100px;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  color: #93c5fd;
+  white-space: nowrap;
+  transition: background 0.2s;
+}
+
+.pill:hover {
+  background: rgba(59, 130, 246, 0.18);
+}
+
+.ctaBtn {
+  margin-top: 28px;
+  width: fit-content;
+}
+
+/* Screenshot */
+.screenshot {
+  width: 100%;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 900px) {
+  .heroContent {
+    grid-template-columns: 1fr;
+    gap: 40px;
+    padding: 100px 24px;
+  }
+}
+
+@media (max-width: 480px) {
+  .heroContent {
+    padding: 80px 20px;
+  }
+
+  .pills {
+    gap: 8px;
+  }
+
+  .pill {
+    font-size: 0.78rem;
+    padding: 6px 12px;
+  }
+}

package/lp/src/sections/SDK.jsx

@@ -0,0 +1,90 @@
+import SectionWrapper from '../components/SectionWrapper'
+import CodeBlock from '../components/CodeBlock'
+import s from './SDK.module.css'
+
+const WAO_CODE = `<span class="kw">import</span> { <span class="fn">AO</span>, <span class="fn">acc</span> } <span class="kw">from</span> <span class="str">"wao/test"</span>
+
+<span class="kw">const</span> ao = <span class="kw">await new</span> <span class="fn">AO</span>().<span class="fn">init</span>(<span class="fn">acc</span>[0])
+<span class="kw">const</span> { p } = <span class="kw">await</span> ao.<span class="fn">deploy</span>({ src_data })
+assert.<span class="fn">equal</span>(<span class="kw">await</span> p.<span class="fn">d</span>(<span class="str">"Hello"</span>, false), <span class="str">"Hello, World!"</span>)`
+
+const TRAD_CODE = `<span class="kw">import</span> { <span class="fn">connect</span>, <span class="fn">acc</span> } <span class="kw">from</span> <span class="str">"wao/test"</span>
+
+<span class="kw">const</span> { spawn, message, dryrun } = <span class="fn">connect</span>()
+<span class="kw">const</span> signer = <span class="fn">acc</span>[0].signer
+
+<span class="kw">const</span> pid = <span class="kw">await</span> <span class="fn">spawn</span>({
+  signer,
+  module: <span class="str">"Do_Uc2Sju_ffp6Ev0AnLVdPtot15rvMjP..."</span>,
+  scheduler: <span class="str">"_GQ33BkPtZrqxA84vM8Zk-N2aO0toNNu..."</span>
+})
+
+<span class="kw">await</span> <span class="fn">message</span>({
+  process: pid,
+  tags: [{ name: <span class="str">"Action"</span>, value: <span class="str">"Eval"</span> }],
+  data: src_data, signer,
+})
+
+<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">dryrun</span>({
+  process: pid,
+  tags: [{ name: <span class="str">"Action"</span>, value: <span class="str">"Hello"</span> }],
+  signer,
+})
+assert.<span class="fn">equal</span>(res.Messages[0].Data, <span class="str">"Hello, World!"</span>)`
+
+const FEATURES = [
+  'Concise, intuitive API — 3 lines instead of 30+',
+  'Built-in check/get validation pattern',
+  'Function piping with pipe() for composable flows',
+  'Unified modules: AO, AR, HB, GQL, and HBSig',
+]
+
+export default function SDK() {
+  return (
+    <SectionWrapper id="sdk" className={s.section}>
+      <div className={s.separator} />
+      <div className={s.inner}>
+        <div className={s.text}>
+          <span className="eyebrow">Step 02 &middot; Code</span>
+          <h2 className="section-title">Write less code.</h2>
+          <p className="section-subtitle">
+            3 lines instead of 30+. A radically simplified developer experience
+            for Arweave and AO — everything you need, nothing you don't.
+          </p>
+          <div className={s.features}>
+            {FEATURES.map(f => (
+              <div className={s.feature} key={f}>
+                <span className={s.featureDot} />
+                <span>{f}</span>
+              </div>
+            ))}
+          </div>
+
+          <a href="https://docs.wao.arweaveoasis.com/api/overview" className="btn-primary" style={{ marginTop: '24px', width: 'fit-content' }} target="_blank" rel="noopener noreferrer">
+            Explore the SDK
+          </a>
+        </div>
+
+        <div className={s.codeCol}>
+          <div className={s.linesPill}>3 lines vs 15+</div>
+          <div className={s.codeWrap}>
+            <CodeBlock
+              tabs={[
+                {
+                  label: 'WAO SDK',
+                  code: WAO_CODE,
+                  raw: `import { AO, acc } from "wao/test"\n\nconst ao = await new AO().init(acc[0])\nconst { p } = await ao.deploy({ src_data })\nassert.equal(await p.d("Hello", false), "Hello, World!")`,
+                },
+                {
+                  label: 'Traditional',
+                  code: TRAD_CODE,
+                  raw: `import { connect, acc } from "wao/test"\n\nconst { spawn, message, dryrun } = connect()\nconst signer = acc[0].signer\n\nconst pid = await spawn({ signer, module: "...", scheduler: "..." })\nawait message({ process: pid, tags: [...], data: src_data, signer })\nconst res = await dryrun({ process: pid, tags: [...], signer })\nassert.equal(res.Messages[0].Data, "Hello, World!")`,
+                },
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+    </SectionWrapper>
+  )
+}

package/lp/src/sections/SDK.module.css

@@ -0,0 +1,122 @@
+.section {
+  padding: var(--section-padding);
+  position: relative;
+}
+
+.btnRow {
+  display: flex;
+  gap: 12px;
+  margin-top: 28px;
+  flex-wrap: wrap;
+}
+
+/* Full-width gradient separator */
+.separator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+}
+
+.inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 64px;
+  align-items: center;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+}
+
+.features {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.feature {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  font-size: 0.95rem;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+
+.featureDot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-top: 7px;
+}
+
+/* Code column with perspective tilt */
+.codeCol {
+  position: relative;
+}
+
+.linesPill {
+  display: inline-flex;
+  padding: 6px 14px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 100px;
+  background: rgba(168, 85, 247, 0.1);
+  border: 1px solid rgba(168, 85, 247, 0.2);
+  color: var(--accent-light);
+  margin-bottom: 16px;
+}
+
+.codeWrap {
+  perspective: 1000px;
+}
+
+.codeWrap > * {
+  transform: rotateY(-2deg);
+  transition: transform 0.4s ease;
+  position: relative;
+}
+
+.codeWrap > *:hover {
+  transform: rotateY(0deg);
+}
+
+/* Animated gradient border */
+.codeWrap > *::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 17px;
+  background: conic-gradient(from var(--angle, 0deg), var(--accent), #3b82f6, #22d3ee, var(--accent));
+  z-index: -1;
+  opacity: 0.4;
+  animation: spinBorder 4s linear infinite;
+}
+
+@keyframes spinBorder {
+  to { --angle: 360deg; }
+}
+
+@media (max-width: 768px) {
+  .inner {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+
+  .codeWrap > * {
+    transform: none;
+  }
+
+  .codeWrap > *:hover {
+    transform: none;
+  }
+}

package/lp/src/sections/Testing.jsx

@@ -0,0 +1,47 @@
+import SectionWrapper from '../components/SectionWrapper'
+import s from './Testing.module.css'
+
+const ENVS = [
+  { num: '01', title: 'In-Memory AOS', speed: 'Lightning Fast', color: '#34d399' },
+  { num: '02', title: 'Local AO Units', speed: 'Your Machine', color: '#60a5fa' },
+  { num: '03', title: 'Local HyperBEAM', speed: 'Sandboxed', color: '#a78bfa' },
+  { num: '04', title: 'WAO DEVNET', speed: 'Free & Scalable', color: '#f43f5e' },
+  { num: '05', title: 'Remote HyperBEAM', speed: 'Production', color: '#f59e0b' },
+]
+
+export default function Testing() {
+  return (
+    <SectionWrapper id="testing" className={s.section}>
+      <div className={s.inner}>
+        <div className={s.header}>
+          <span className="eyebrow">Step 03 &middot; Test</span>
+          <h2 className="section-title">Lightning fast testing.</h2>
+          <p className="section-subtitle" style={{ margin: '0 auto' }}>
+            Five environments from sub-second in-memory to full remote —
+            one API, zero code changes. Test at the speed you think, or let wizard agents handle.
+          </p>
+        </div>
+
+        <div className={s.spectrum}>
+          <span className={s.specLabel}>Fast</span>
+          <span className={s.specLabel}>Realistic</span>
+        </div>
+        <div className={s.specBar} />
+
+        <div className={s.cards}>
+          {ENVS.map((env) => (
+            <div
+              className={s.card}
+              key={env.num}
+              style={{ '--card-color': env.color }}
+            >
+              <span className={s.cardNum}>{env.num}</span>
+              <span className={s.cardTitle}>{env.title}</span>
+              <span className={s.cardSpeed}>{env.speed}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </SectionWrapper>
+  )
+}