43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import dynamic from 'next/dynamic'
|
|
import SectionHeader from '@/components/ui/SectionHeader'
|
|
import ScrollReveal from '@/components/ui/ScrollReveal'
|
|
|
|
const FlowCanvas = dynamic(() => import('@/components/sandbox/FlowCanvas'), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="w-full h-[500px] md:h-[600px] rounded-lg border border-zen/10 bg-void flex items-center justify-center">
|
|
<span className="text-zen/20 text-sm animate-slow-pulse">loading canvas...</span>
|
|
</div>
|
|
),
|
|
})
|
|
|
|
export default function SandboxSection() {
|
|
return (
|
|
<section className="min-h-screen flex flex-col items-center justify-center relative px-4 py-20">
|
|
<div className="absolute inset-0 bg-void" />
|
|
|
|
<div className="relative z-10 max-w-6xl w-full">
|
|
<SectionHeader wobble={2}>Flow Sandbox</SectionHeader>
|
|
|
|
<ScrollReveal delay={0.1}>
|
|
<p className="font-caveat text-lg md:text-xl text-zen/40 text-center mb-8 max-w-2xl mx-auto">
|
|
Reconnect the flows. What would you build?
|
|
</p>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.2}>
|
|
<FlowCanvas />
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.3}>
|
|
<p className="text-zen/20 text-xs text-center mt-4">
|
|
drag nodes • connect ports • load presets • build your own flow system
|
|
</p>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|