123 lines
5.3 KiB
TypeScript
123 lines
5.3 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—a
|
|
supra-structure 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 className="relative">
|
|
<div className="aspect-square rounded-2xl bg-gradient-to-br from-primary/20 via-primary/5 to-transparent border border-primary/20 p-8 flex items-center justify-center">
|
|
<svg viewBox="0 0 200 200" className="w-full h-full">
|
|
{/* Central node */}
|
|
<circle cx="100" cy="100" r="8" fill="currentColor" className="text-primary" />
|
|
|
|
{/* Outer nodes */}
|
|
{[0, 45, 90, 135, 180, 225, 270, 315].map((angle, i) => {
|
|
const rad = (angle * Math.PI) / 180
|
|
const x = 100 + 60 * Math.cos(rad)
|
|
const y = 100 + 60 * Math.sin(rad)
|
|
return (
|
|
<g key={i}>
|
|
<line
|
|
x1="100"
|
|
y1="100"
|
|
x2={x}
|
|
y2={y}
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
className="text-primary/30"
|
|
/>
|
|
<circle cx={x} cy={y} r="6" fill="currentColor" className="text-primary/70" />
|
|
</g>
|
|
)
|
|
})}
|
|
|
|
{/* Connecting lines between outer nodes */}
|
|
{[0, 90, 180, 270].map((angle, i) => {
|
|
const rad1 = (angle * Math.PI) / 180
|
|
const rad2 = ((angle + 90) * Math.PI) / 180
|
|
const x1 = 100 + 60 * Math.cos(rad1)
|
|
const y1 = 100 + 60 * Math.sin(rad1)
|
|
const x2 = 100 + 60 * Math.cos(rad2)
|
|
const y2 = 100 + 60 * Math.sin(rad2)
|
|
return (
|
|
<line
|
|
key={i}
|
|
x1={x1}
|
|
y1={y1}
|
|
x2={x2}
|
|
y2={y2}
|
|
stroke="currentColor"
|
|
strokeWidth="0.5"
|
|
className="text-primary/20"
|
|
/>
|
|
)
|
|
})}
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|