71 lines
3.2 KiB
TypeScript
71 lines
3.2 KiB
TypeScript
import { Network, Layers, Sparkles } from "lucide-react"
|
|
|
|
export function InterlaySection() {
|
|
return (
|
|
<section className="py-16 md:py-24 border-b border-border bg-muted/20">
|
|
<div className="container px-4 mx-auto max-w-6xl">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div className="space-y-8">
|
|
<div>
|
|
<div className="inline-block px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-sm text-primary mb-4">
|
|
The Solution
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">The Space Between the Apps</h2>
|
|
</div>
|
|
|
|
<p className="text-xl text-muted-foreground leading-relaxed">
|
|
A research initiative to decompose app silos by creating an
|
|
<span className="text-foreground font-semibold"> interface integration domain</span>. Not another app—an
|
|
exfrastructure for interoperation, built on{" "}
|
|
<a href="https://folkjs.org" className="text-primary hover:underline">
|
|
FolkJS
|
|
</a>{" "}
|
|
as the computational substrate.
|
|
</p>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<Network className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">Networked Topology</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Contrast to app-centric software. Emphasizing interconnectivity and user agency over vendor control.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<Layers className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">Exfrastructure</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Like mycelium binding ecosystems together—decentralized, adaptive networks operating beyond
|
|
traditional infrastructure.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<Sparkles className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">Emergent Interconnections</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Named for "leylines"—a metaphor for emergent connections across digital domains that self-organize
|
|
and flow freely.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|