From 106cf8e584441c2c8e336dfb40fbfc8819ff5ab6 Mon Sep 17 00:00:00 2001 From: JonnieSparkles Date: Tue, 16 Dec 2025 08:48:55 -0400 Subject: [PATCH] Test of ario site homepage created via fumadocs --- .../marketing/use-cases/decentralized-ai.mdx | 118 ++++++ public/ario-lockup.svg | 12 + src/app/{[[...slug]] => [...slug]}/layout.tsx | 2 + src/app/{[[...slug]] => [...slug]}/page.tsx | 47 +-- src/app/global.css | 23 ++ src/app/layout.tsx | 5 + src/app/page.tsx | 377 ++++++++++++++++++ 7 files changed, 553 insertions(+), 31 deletions(-) create mode 100644 content/marketing/use-cases/decentralized-ai.mdx create mode 100644 public/ario-lockup.svg rename src/app/{[[...slug]] => [...slug]}/layout.tsx (99%) rename src/app/{[[...slug]] => [...slug]}/page.tsx (81%) create mode 100644 src/app/page.tsx diff --git a/content/marketing/use-cases/decentralized-ai.mdx b/content/marketing/use-cases/decentralized-ai.mdx new file mode 100644 index 000000000..366a39fa4 --- /dev/null +++ b/content/marketing/use-cases/decentralized-ai.mdx @@ -0,0 +1,118 @@ +--- +title: "Decentralized AI" +description: "Why AR.IO and Arweave are a strong foundation for AI data, provenance, and resilient access." +full: true +--- + +import { Card, Cards } from "fumadocs-ui/components/card"; +import { Callout } from "fumadocs-ui/components/callout"; +import { Steps, Step } from "fumadocs-ui/components/steps"; +import { Sparkles, ShieldCheck, Database, Globe, Cpu, ArrowRight } from "lucide-react"; + +# Decentralized AI + +Artificial Intelligence thrives on vast amounts of data for training, analysis, and execution. Managing this data efficiently and securely gets harder when you need **immutability**, **auditability**, and **long-term accessibility**. + + + } + title="Talk to the team" + description="Explore how permanence + provenance can strengthen your AI stack." + href="mailto:info@pds.inc" + /> + } + title="Get started" + description="Jump into the docs and start building on AR.IO." + href="/learn" + /> + + + + Quick takeaway: AR.IO makes Arweave data faster and easier to use via gateways, while Arweave provides permanent, verifiable storage for datasets, model artifacts, and audit trails. + + +## Why AR.IO and Arweave for AI? + +## Key benefits + + + } + title="Permanent data storage" + description="Pay once, store forever—predictable costs for long-lived datasets and model artifacts." + /> + } + title="Immutable data integrity" + description="Once stored, data can’t be silently changed—your AI inputs remain verifiable." + /> + } + title="Scalable & accessible" + description="AR.IO gateways improve read/write performance so systems can scale without sacrificing availability." + /> + } + title="Provenance & coordination" + description="Maintain transparent histories of data and outputs, with emerging compute patterns in the ecosystem." + /> + + +## How teams use this (examples) + + + + Keep the exact training inputs, configs, and outputs available for auditing and reproducibility. + + + Use AR.IO gateways for performant access to historical and newly-published data—without tampering risk. + + + Leverage immutable provenance to satisfy governance, compliance, and trust requirements. + + + +## AI projects leveraging AR.IO + Arweave + + + + + + + +## Next steps + + + + + + + +## Contact + +Email us at **[`info@pds.inc`](mailto:info@pds.inc)** to discuss how AR.IO and Arweave can support your AI roadmap. diff --git a/public/ario-lockup.svg b/public/ario-lockup.svg new file mode 100644 index 000000000..3d3ecbd91 --- /dev/null +++ b/public/ario-lockup.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/app/[[...slug]]/layout.tsx b/src/app/[...slug]/layout.tsx similarity index 99% rename from src/app/[[...slug]]/layout.tsx rename to src/app/[...slug]/layout.tsx index e7f6e8708..4d273f646 100644 --- a/src/app/[[...slug]]/layout.tsx +++ b/src/app/[...slug]/layout.tsx @@ -15,3 +15,5 @@ export default function Layout({ children }: { children: React.ReactNode }) { ); } + + diff --git a/src/app/[[...slug]]/page.tsx b/src/app/[...slug]/page.tsx similarity index 81% rename from src/app/[[...slug]]/page.tsx rename to src/app/[...slug]/page.tsx index c248d233c..806eb2fbf 100644 --- a/src/app/[[...slug]]/page.tsx +++ b/src/app/[...slug]/page.tsx @@ -7,12 +7,9 @@ import { LLMCopyButton, ViewOptions } from "@/components/page-actions"; import { PageFeedback } from "@/components/page-feedback"; import { redirect } from "next/navigation"; -export default async function Page(props: { - params: Promise<{ slug?: string[] }>; -}) { +export default async function Page(props: { params: Promise<{ slug: string[] }> }) { const params = await props.params; - // Try to get the page content first (this will work for both root and other pages) const page = source.getPage(params.slug); // If no page found, trigger 404 @@ -45,8 +42,7 @@ export default async function Page(props: { // For public assets like /llms-full.txt, use a plain anchor so the browser // requests the static file instead of the docs catch-all route. const isPublicAsset = - href.startsWith("/") && - /\.(?:txt|json|xml|pdf)($|[?#])/i.test(href); + href.startsWith("/") && /\.(?:txt|json|xml|pdf)($|[?#])/i.test(href); if (isPublicAsset) return ; @@ -62,16 +58,13 @@ export default async function Page(props: { export async function generateStaticParams() { const params = source.generateParams(); - - // Add root path for static export - return [ - { slug: [] }, // Root path - ...params - ]; + + // `app/page.tsx` owns `/`; docs pages require at least one segment. + return params.filter((p) => Array.isArray(p.slug) && p.slug.length > 0); } export async function generateMetadata(props: { - params: Promise<{ slug?: string[] }>; + params: Promise<{ slug: string[] }>; }): Promise { const params = await props.params; @@ -101,9 +94,7 @@ export async function generateMetadata(props: { card: "summary_large_image", title: "AR.IO Documentation", description: "Documentation for AR.IO", - images: [ - "/meta.png", - ], + images: ["/meta.png"], creator: "@ar_io_network", site: "@ar_io_network", }, @@ -111,8 +102,7 @@ export async function generateMetadata(props: { icon: "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", shortcut: "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", - apple: - "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", + apple: "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", }, }; } @@ -130,13 +120,8 @@ export async function generateMetadata(props: { // Use existing frontmatter fields, with fallbacks const pageTitle = frontmatter.title || page.data.title; const pageDescription = frontmatter.description || page.data.description; - const pageImage = - frontmatter.image || frontmatter.icon || "/meta.png"; - const pageKeywords = frontmatter.keywords || [ - "AR.IO", - "Arweave", - "documentation", - ]; + const pageImage = frontmatter.image || frontmatter.icon || "/meta.png"; + const pageKeywords = frontmatter.keywords || ["AR.IO", "Arweave", "documentation"]; const pageAuthor = frontmatter.author || "AR.IO Team"; return { @@ -156,7 +141,7 @@ export async function generateMetadata(props: { }, ], // Add canonical URL for better SEO - url: `https://docs.ar.io/${params.slug?.join("/") || ""}`, + url: `https://docs.ar.io/${params.slug.join("/")}`, }, twitter: { card: "summary_large_image", @@ -167,11 +152,9 @@ export async function generateMetadata(props: { site: "@ar_io_network", }, icons: { - icon: "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", - shortcut: - "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", - apple: - "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", + icon: "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", + shortcut: "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", + apple: "https://arweave.net/XAv8yHVUdsjaiM_WJhHAAyBmjpk4RRDvzB9hfzsD-so", }, // Add additional metadata for better SEO keywords: pageKeywords, @@ -189,3 +172,5 @@ export async function generateMetadata(props: { }, }; } + + diff --git a/src/app/global.css b/src/app/global.css index 87e74977b..3418eaf04 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -6,6 +6,29 @@ @import "fumadocs-ui/css/preset.css"; @import "fumadocs-openapi/css/preset.css"; +/* AR.IO marketing purple palette overrides (light + dark) + Use :root to guarantee runtime override of Fumadocs CSS variables. */ +:root { + /* Primary brand purple (used by buttons, links, pills, and our gradients) */ + --color-fd-primary: hsl(258, 88%, 62%); + --color-fd-primary-foreground: hsl(0, 0%, 100%); + + /* Softer purple accents for hover surfaces */ + --color-fd-accent: hsla(258, 88%, 62%, 14%); + --color-fd-accent-foreground: hsl(258, 30%, 18%); + + /* Focus ring */ + --color-fd-ring: hsl(258, 88%, 62%); +} + +.dark { + --color-fd-primary: hsl(258, 95%, 76%); + --color-fd-primary-foreground: hsl(258, 40%, 10%); + --color-fd-accent: hsla(258, 95%, 76%, 18%); + --color-fd-accent-foreground: hsl(0, 0%, 96%); + --color-fd-ring: hsl(258, 95%, 76%); +} + /* Define font-inter class */ .font-inter { font-family: diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ba407eadc..a175b99c5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -32,6 +32,11 @@ export default function Layout({ children }: LayoutProps<"/">) { data-domain="docs.ar.io" /> + {children} + + ); +} + +function PillDropdown({ + label, + items, +}: { + label: string; + items: Array<{ label: string; href: string }>; +}) { + return ( +
+ + {label} + + + + {/* Click outside closes automatically because this is
*/} +
+
+ {items.map((item) => ( + + {item.label} + + ))} +
+
+
+ ); +} + +function PrimaryCta({ + href, + children, +}: { + href: string; + children: React.ReactNode; +}) { + return ( + + {children} + + + ); +} + +function SecondaryCta({ + href, + children, +}: { + href: string; + children: React.ReactNode; +}) { + const isExternal = /^https?:\/\//i.test(href); + + if (isExternal) { + return ( + + {children} + + + ); + } + + return ( + + {children} + + + ); +} + +function PersonaCard({ + kicker, + title, + description, + primary, + secondary, + imageSrc, + imageAlt, +}: { + kicker: string; + title: string; + description: string; + primary: { label: string; href: string }; + secondary: { label: string; href: string }; + imageSrc: string; + imageAlt: string; +}) { + const isExternalImage = /^https?:\/\//i.test(imageSrc); + + return ( +
+
+
+
+ {kicker} +
+
{title}
+

+ {description} +

+
+ {primary.label} + {secondary.label} +
+
+ +
+ {isExternalImage ? ( + // Use for external sources to avoid Next Image remote config friction. + {imageAlt} + ) : ( + {imageAlt} + )} +
+
+ ); +} + +export default function HomePage() { + return ( +
+
+
+ + AR.IO + + + + +
+ Get Started +
+
+
+ +
+
+
+
+
+ +
+
+
+ Time with zero data lost: 2920:23:17:23 +
+ +

+ Zero downtime. +

+ +

+ And zero sleepless nights. Secure your files in the permanent cloud with AR.IO. +

+ +
    +
  • + + + + + 0 data lost and 0 downtime since launch + +
    • +
  • + + + + Secure, permanent cloud storage +
    • +
  • + + + + Own your files — stop renting +
    • +
+ +
+ Secure Your Files + Learn More +
+
+ +
+
+ Person smiling while holding a device +
+
+
+ +
+ + + +
+
+
+ +
+
+
+
+ Solutions +
+
Build & ship
+

+ Upload data, resolve names, and retrieve content with the same + SDKs and APIs used across the ecosystem. +

+
+ Explore build docs +
+
+ +
+
+ Ecosystem +
+
Tools & SDKs
+

+ Start from a library, not a blank slate. Wayfinder, Turbo, ArNS, + and more. +

+
+ Browse SDKs +
+
+ +
+
+ Use Cases +
+
Patterns
+

+ Learn by example: gateway operations, decentralized access, ArNS + integration, and advanced upload flows. +

+
+ Read guides +
+
+
+ +
+
+ Contact +
+
+ Want this to be the real homepage? +
+

+ We can wire these sections to your real marketing content, reuse + docs navigation/search, and keep everything in one repo with a + consistent design system. +

+
+ Start in the docs + + Join Discord + +
+
+
+
+
+ ); +} + +