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-2xl border border-flow/10 bg-deep flex items-center justify-center">
|
|
<span className="text-foam/20 text-sm animate-glow-pulse font-light">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-24">
|
|
<div className="absolute inset-0 bg-deep" />
|
|
|
|
<div className="relative z-10 max-w-6xl w-full">
|
|
<SectionHeader>Flow Sandbox</SectionHeader>
|
|
|
|
<ScrollReveal delay={0.1}>
|
|
<p className="font-caveat text-lg md:text-xl text-foam/35 text-center mb-10 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-mist/30 text-xs text-center mt-6 font-light tracking-wide">
|
|
drag nodes · connect ports · load presets · build your own flow system
|
|
</p>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|