[V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" export default function Hero() { return (

zen in the
loco

a creative collective for the curious

We help values-aligned brands and startups play with intention in a chaotic world.

) } [V0_FILE]typescriptreact:file="components/canvas.tsx" isMerged="true" 'use client' import { useEffect, useRef } from 'react' export default function Canvas() { const canvasRef = useRef(null) const isDrawingRef = useRef(false) const lastXRef = useRef(0) const lastYRef = useRef(0) const particlesRef = useRef>([]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return // Set canvas size const resizeCanvas = () => { canvas.width = canvas.offsetWidth * window.devicePixelRatio canvas.height = canvas.offsetHeight * window.devicePixelRatio ctx.scale(window.devicePixelRatio, window.devicePixelRatio) } resizeCanvas() window.addEventListener('resize', resizeCanvas) // Drawing setup const colors = ['#ff3333', '#ffff00', '#0066ff', '#00cc00'] const handleStart = (e: MouseEvent | TouchEvent) => { isDrawingRef.current = true const rect = canvas.getBoundingClientRect() const clientX = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY lastXRef.current = clientX - rect.left lastYRef.current = clientY - rect.top } const handleMove = (e: MouseEvent | TouchEvent) => { if (!isDrawingRef.current) return const rect = canvas.getBoundingClientRect() const clientX = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY const x = clientX - rect.left const y = clientY - rect.top // Draw line with chalk effect ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)] ctx.lineWidth = 4 ctx.lineCap = 'round' ctx.lineJoin = 'round' ctx.globalAlpha = 0.8 ctx.beginPath() ctx.moveTo(lastXRef.current, lastYRef.current) ctx.lineTo(x, y) ctx.stroke() // Create particles const distance = Math.sqrt((x - lastXRef.current) ** 2 + (y - lastYRef.current) ** 2) const steps = Math.ceil(distance) for (let i = 0; i < steps; i++) { const t = i / steps const px = lastXRef.current + (x - lastXRef.current) * t const py = lastYRef.current + (y - lastYRef.current) * t particlesRef.current.push({ x: px, y: py, life: 1, }) } lastXRef.current = x lastYRef.current = y } const handleEnd = () => { isDrawingRef.current = false ctx.globalAlpha = 1 } // Animation loop const animate = () => { // Fade out effect ctx.globalAlpha = 0.02 ctx.fillStyle = '#ffffff' ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight) ctx.globalAlpha = 1 // Update and draw particles particlesRef.current = particlesRef.current.filter((p) => p.life > 0) particlesRef.current.forEach((p) => { ctx.globalAlpha = p.life * 0.3 ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)] ctx.fillRect(p.x - 1, p.y - 1, 3, 3) p.life -= 0.01 }) requestAnimationFrame(animate) } canvas.addEventListener('mousedown', handleStart) canvas.addEventListener('mousemove', handleMove) canvas.addEventListener('mouseup', handleEnd) canvas.addEventListener('mouseleave', handleEnd) canvas.addEventListener('touchstart', handleStart) canvas.addEventListener('touchmove', handleMove) canvas.addEventListener('touchend', handleEnd) animate() return () => { canvas.removeEventListener('mousedown', handleStart) canvas.removeEventListener('mousemove', handleMove) canvas.removeEventListener('mouseup', handleEnd) canvas.removeEventListener('mouseleave', handleEnd) canvas.removeEventListener('touchstart', handleStart) canvas.removeEventListener('touchmove', handleMove) canvas.removeEventListener('touchend', handleEnd) window.removeEventListener('resize', resizeCanvas) } }, []) return (

draw here. let's create with our hands (or fingers).

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Analytics } from '@vercel/analytics/next' import './globals.css' import { DM_Sans as V0_Font_DM_Sans, Space_Mono as V0_Font_Space_Mono, Source_Serif_4 as V0_Font_Source_Serif_4 } from 'next/font/google' // Initialize fonts const _dmSans = V0_Font_DM_Sans({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900","1000"] }) const _spaceMono = V0_Font_Space_Mono({ subsets: ['latin'], weight: ["400","700"] }) const _sourceSerif_4 = V0_Font_Source_Serif_4({ subsets: ['latin'], weight: ["200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: 'Zoco Collective | Zen in the Loco', description: 'A creative collective for values-aligned brands. We help startups and established companies play with intention.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: #ffffff; --foreground: #000000; --card: #ffffff; --card-foreground: #000000; --popover: #ffffff; --popover-foreground: #000000; --primary: #ff3333; --primary-foreground: #ffffff; --secondary: #ffff00; --secondary-foreground: #000000; --muted: #f0f0f0; --muted-foreground: #333333; --accent: #0066ff; --accent-foreground: #ffffff; --destructive: #000000; --destructive-foreground: #ffffff; --border: #000000; --input: #000000; --ring: #ff3333; --chart-1: #ff3333; --chart-2: #ffff00; --chart-3: #0066ff; --chart-4: #00cc00; --chart-5: #cc00cc; --radius: 0px; --sidebar: #f0f0f0; --sidebar-foreground: #000000; --sidebar-primary: #ff3333; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #0066ff; --sidebar-accent-foreground: #ffffff; --sidebar-border: #000000; --sidebar-ring: #ff3333; --shadow-x: 4px; --shadow-y: 4px; --shadow-blur: 0px; --shadow-spread: 0px; --shadow-opacity: 1; --shadow-color: #000000; } .dark { --background: #000000; --foreground: #ffffff; --card: #333333; --card-foreground: #ffffff; --popover: #333333; --popover-foreground: #ffffff; --primary: #ff6666; --primary-foreground: #000000; --secondary: #ffff33; --secondary-foreground: #000000; --muted: #333333; --muted-foreground: #cccccc; --accent: #3399ff; --accent-foreground: #000000; --destructive: #ffffff; --destructive-foreground: #000000; --border: #ffffff; --input: #ffffff; --ring: #ff6666; --chart-1: #ff6666; --chart-2: #ffff33; --chart-3: #3399ff; --chart-4: #33cc33; --chart-5: #cc33cc; --sidebar: #000000; --sidebar-foreground: #ffffff; --sidebar-primary: #ff6666; --sidebar-primary-foreground: #000000; --sidebar-accent: #3399ff; --sidebar-accent-foreground: #000000; --sidebar-border: #ffffff; --sidebar-ring: #ff6666; --shadow-x: 4px; --shadow-y: 4px; --shadow-blur: 0px; --shadow-spread: 0px; --shadow-opacity: 1; --shadow-color: #000000; } @theme inline { --font-sans: 'DM Sans', 'DM Sans Fallback'; --font-mono: 'Space Mono', 'Space Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-serif: 'Source Serif 4', 'Source Serif 4 Fallback'; /* computed shadow variables below - do not modify */ --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent); --shadow: var(--shadow-md); --color-shadow-color: var(--shadow-color); --shadow-opacity: var(--shadow-opacity); --shadow-spread: var(--shadow-spread); --shadow-blur: var(--shadow-blur); --shadow-y: var(--shadow-y); --shadow-x: var(--shadow-x); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/supabase-js": "2.91.1", "@react-three/fiber": "9.5.0", "@react-three/rapier": "2.2.0", "@react-three/drei": "10.7.7" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/feeling-selector.tsx" isMerged="true" 'use client'; interface FeelingOption { id: string; label: string; top: string; left: string; } const feelings: FeelingOption[] = [ { id: 'playful-energized', label: 'Playful & Energized', top: '20%', left: '20%' }, { id: 'calm-spacious', label: 'Calm & Spacious', top: '20%', left: '65%' }, { id: 'grounded-curious', label: 'Grounded & Curious', top: '65%', left: '20%' }, { id: 'reflective-soft', label: 'Reflective & Soft', top: '65%', left: '65%' }, ]; export default function FeelingSelector({ onSelect, }: { onSelect: (feeling: string) => void; }) { return (

Pick a feeling below to begin

{/* Axes */}

{/* Labels */}

Playful

Calm

Grounded

Reflective

{/* Feeling Buttons */} {feelings.map((feeling) => ( ))}

); } [V0_FILE]typescriptreact:file="components/values.tsx" isMerged="true" 'use client'; export default function Values() { return (

Why we exist

We believe creativity thrives when we slow down, get curious, and stay true to our values. Zoco is for founders and brands who want their work to reflect who they actually are—not who capitalism tells them to be.

Human-first

We prioritize relationships and authenticity over metrics. Your vision matters more than trends.

Ecocentric

We ask: Does this serve life? We partner with brands committed to regenerative, not extractive, models.

Playful

Seriousness without rigidity. We create things that feel intentional and joyful at the same time.

Thoughtful

We take time. We ask questions. We don't rush into answers. Clarity emerges from curiosity.

); } [V0_FILE]sql:file="scripts/setup-database.sql" isMerged="true" -- Create submissions table for gallery CREATE TABLE IF NOT EXISTS submissions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), image_data TEXT NOT NULL, feeling VARCHAR(255) NOT NULL, feeling_name VARCHAR(255) NOT NULL, message TEXT, approved BOOLEAN DEFAULT FALSE, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Create indexes for faster queries CREATE INDEX IF NOT EXISTS idx_submissions_approved ON submissions(approved); CREATE INDEX IF NOT EXISTS idx_submissions_created_at ON submissions(created_at DESC); -- Enable RLS ALTER TABLE submissions ENABLE ROW LEVEL SECURITY; -- Public can read approved submissions CREATE POLICY "Anyone can view approved submissions" ON submissions FOR SELECT USING (approved = TRUE); -- Public can insert submissions CREATE POLICY "Anyone can submit" ON submissions FOR INSERT WITH CHECK (TRUE); [V0_FILE]typescript:file="scripts/seed-test-data.ts" isMerged="true" import { createClient } from '@supabase/supabase-js'; const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY! ); // Generate simple canvas drawings as base64 function generateDrawing(style: 'organic' | 'geometric' | 'chaotic' | 'minimal'): string { const canvas = typeof document !== 'undefined' ? document.createElement('canvas') : null; if (!canvas) return ''; canvas.width = 800; canvas.height = 600; const ctx = canvas.getContext('2d')!; ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 800, 600); if (style === 'organic') { ctx.strokeStyle = '#000000'; ctx.lineWidth = 4; for (let i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(Math.random() * 800, Math.random() * 600); for (let j = 0; j < 20; j++) { ctx.lineTo( Math.random() * 800, Math.random() * 600 ); } ctx.stroke(); } } else if (style === 'geometric') { ctx.strokeStyle = '#000000'; ctx.lineWidth = 3; ctx.fillStyle = 'rgba(255, 150, 0, 0.3)'; for (let i = 0; i < 8; i++) { const x = Math.random() * 700 + 50; const y = Math.random() * 500 + 50; const size = Math.random() * 100 + 50; ctx.fillRect(x, y, size, size); ctx.strokeRect(x, y, size, size); } } else if (style === 'chaotic') { ctx.fillStyle = '#000000'; for (let i = 0; i < 200; i++) { ctx.fillRect( Math.random() * 800, Math.random() * 600, Math.random() * 20, Math.random() * 20 ); } } else { ctx.strokeStyle = '#000000'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(400, 300, 150, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(400, 300, 100, 0, Math.PI * 2); ctx.stroke(); } return canvas.toDataURL('image/png'); } const testSubmissions = [ { image_data: null, feeling: 'writing', feeling_name: 'Reflective', message: 'Maybe it\'s about balance—not choosing sides but holding the tension between them.', text_response: 'Maybe it\'s about balance—not choosing sides but holding the tension between them.', approved: true, submitted_by: 'Alex Chen', submitted_by_linkedin: 'https://linkedin.com/in/alexchen', }, { image_data: null, feeling: 'drawing', feeling_name: 'Flow', message: 'Letting go and seeing what emerges.', text_response: null, approved: true, submitted_by: null, submitted_by_linkedin: null, }, { image_data: null, feeling: 'writing', feeling_name: 'Hopeful', message: null, text_response: 'Collaboration should feel like jazz—structured chaos where everyone listens more than they speak.', approved: true, submitted_by: 'Jordan', submitted_by_linkedin: null, }, { image_data: null, feeling: 'drawing', feeling_name: 'Curiosity', message: 'What if we stopped trying to be perfect and just played?', text_response: null, approved: true, submitted_by: 'Morgan Lee', submitted_by_linkedin: 'https://linkedin.com/in/morganlee', }, { image_data: null, feeling: 'writing', feeling_name: 'Uncertain', message: null, text_response: 'The ideas that change everything usually look ridiculous at first.', approved: true, submitted_by: null, submitted_by_linkedin: null, }, { image_data: null, feeling: 'drawing', feeling_name: 'Energized', message: 'Raw, unfiltered, alive.', text_response: null, approved: true, submitted_by: 'Sam Park', submitted_by_linkedin: 'https://linkedin.com/in/sampark', }, { image_data: null, feeling: 'drawing', feeling_name: 'Contemplative', message: null, text_response: null, approved: true, submitted_by: 'Casey', submitted_by_linkedin: null, }, { image_data: null, feeling: 'writing', feeling_name: 'Playful', message: null, text_response: 'What does "zen in the loco" mean? Pure intentional chaos with a smile.', approved: true, submitted_by: 'Riley', submitted_by_linkedin: null, }, ]; async function seedData() { console.log('Seeding test data...'); try { // For now, just insert the text submissions // In production, you'd generate actual drawings const { error } = await supabase .from('submissions') .insert( testSubmissions.map((sub) => ({ image_data: sub.image_data, feeling: sub.feeling, feeling_name: sub.feeling_name, message: sub.message, text_response: sub.text_response, approved: sub.approved, submitted_by: sub.submitted_by, submitted_by_linkedin: sub.submitted_by_linkedin, })) ); if (error) { console.error('Error seeding data:', error); } else { console.log('Test data seeded successfully!'); } } catch (error) { console.error('Failed to seed:', error); } } seedData(); [V0_FILE]sql:file="scripts/seed-test-submissions.sql" isMerged="true" -- Seed test data for Zoco Collective gallery -- Using only columns that exist in the schema: image_data, feeling, feeling_name, message, approved INSERT INTO submissions (image_data, feeling, feeling_name, message, approved) VALUES -- Drawing submissions (SVG placeholder with visual variety) ('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSI0MDAiIGN5PSIzMDAiIHI9IjEyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI0Ii8+PGNpcmNsZSBjeD0iNDAwIiBjeT0iMzAwIiByPSI4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+', 'drawing', 'Contemplative', 'Circles within circles.', true), ('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0id2hpdGUiLz48cmVjdCB4PSI1MCIgeT0iNTAiIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiLz48cmVjdCB4PSIyNTAiIHk9IjEwMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIvPjwvc3ZnPg==', 'drawing', 'Structured', 'Geometric intention.', true), ('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyMDAiIHI9IjUwIiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjYwMCIgY3k9IjIwMCIgcj0iNTAiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iNDAwIiBjeT0iNDAwIiByPSI3MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI0Ii8+PC9zdmc+', 'drawing', 'Energized', 'Raw, unfiltered, alive.', true), ('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0id2hpdGUiLz48bGluZSB4MT0iMjAwIiB5MT0iMTAwIiB4Mj0iNjAwIiB5Mj0iNTAwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiLz48bGluZSB4MT0iNjAwIiB5MT0iMTAwIiB4Mj0iMjAwIiB5Mj0iNTAwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiLz48Y2lyY2xlIGN4PSI0MDAiIGN5PSIzMDAiIHI9IjQwIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==', 'drawing', 'Connected', 'All roads lead here.', true), ('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNIDEwMCAxMDAgUSA0MDAgMjUwIDcwMCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+', 'drawing', 'Flow', 'Letting go and seeing what emerges.', true), -- Text responses (stored as plain text in image_data field, prefixed with [TEXT] for clarity) ('[TEXT] We assume the cup is half empty or half full, but maybe we''re asking the wrong question.', 'drawing', 'Reflective', 'Maybe it''s about balance—not choosing sides but holding the tension between them.', true), ('[TEXT] Collaboration should feel like jazz—structured chaos where everyone listens more than they speak.', 'drawing', 'Hopeful', NULL, true), ('[TEXT] The ideas that change everything usually look ridiculous at first.', 'drawing', 'Uncertain', NULL, true), ('[TEXT] What does "zen in the loco" mean? Pure intentional chaos with a smile.', 'drawing', 'Playful', NULL, true), ('[TEXT] Begin before you''re ready. The work teaches you what you need to know.', 'drawing', 'Grounded', 'Starting something real.', true); [V0_FILE]typescriptreact:file="components/write-canvas.tsx" isMerged="true" 'use client'; import { useState } from 'react'; import SaveFlow from './save-flow'; export default function WriteCanvas({ prompt }: { prompt: string }) { const [textResponse, setTextResponse] = useState(''); const [showSaveFlow, setShowSaveFlow] = useState(false); if (showSaveFlow) { return ( { setShowSaveFlow(false); setTextResponse(''); }} /> ); } return (

{prompt}

setTextResponse(e.target.value)}
          placeholder="Write your response here. Be poetic, be direct, be honest."
          className="w-full h-screen border-4 dark:border-slate-700 border-black p-6 bg-white dark:bg-slate-900 text-black dark:text-white font-mono text-lg focus:outline-none resize-none"
        />
      </div>

<div className="flex gap-4 flex-wrap">
        <button
          onClick={() => setShowSaveFlow(true)}
          disabled={!textResponse.trim()}
          className="px-8 py-3 border-4 border-black dark:border-white bg-black dark:bg-white text-white dark:text-black font-bold hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Submit to gallery
        </button>
        <button
          onClick={() => setTextResponse('')}
          className="px-8 py-3 border-4 border-red-500 text-red-500 font-bold hover:bg-red-500 hover:text-white transition-colors"
        >
          Clear
        </button>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/drawing-hero.tsx" isMerged="true"
'use client';

import Image from 'next/image';
import DrawingCanvas from './drawing-canvas';

export default function DrawingHero({ prompt }: { prompt: string }) {
  return (
    <section className="min-h-screen border-b-4 dark:border-slate-700 border-black px-6 py-12 bg-white dark:bg-slate-950">
      <div className="max-w-6xl mx-auto">
        <div className="mb-12">
          <div className="mb-6 w-24 h-24">
            <Image
              src="/zoco-logo.png"
              alt="Zoco Collective"
              width={96}
              height={96}
              className="w-full h-full object-contain"
            />
          </div>
          <p className="text-sm md:text-base font-mono text-slate-600 dark:text-slate-400">
            when was the last time you drew out an idea?
          </p>
        </div>

<DrawingCanvas prompt={prompt} />
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/process.tsx" isMerged="true"
export default function Process() {
  const steps = [
    { title: 'we listen', desc: 'deeply. to your vision, values, and the people you serve' },
    { title: 'we explore', desc: 'together. playing with ideas, testing assumptions, breaking things' },
    { title: 'we create', desc: 'intentionally. craft solutions that feel right and actually work' },
    { title: 'we grow', desc: 'with you. adapting and learning as your work evolves' },
  ]

return (
    <section className="px-6 py-20 md:py-24 border-b-4 dark:border-slate-700 border-black">
      <div className="max-w-4xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold mb-12">
          how we create together
        </h2>

<div className="space-y-6">
          {steps.map((step, idx) => {
            const hoverColors = [
              'hover:bg-red-500 hover:text-white dark:hover:bg-red-600',
              'hover:bg-yellow-400 hover:text-black dark:hover:bg-yellow-500',
              'hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600',
              'hover:bg-emerald-500 hover:text-white dark:hover:bg-emerald-600',
            ];
            return (
              <div
                key={step.title}
                className={`border-4 dark:border-slate-700 border-black p-6 transition-colors ${hoverColors[idx % 4]}`}
              >
                <h3 className="text-xl font-bold mb-2">{step.title}</h3>
                <p className="text-base text-slate-600 dark:text-slate-400 hover:text-inherit">{step.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/drawing-canvas.tsx" isMerged="true"
'use client';

import React from 'react';
import { useRef, useEffect, useState } from 'react';
import SaveFlow from './save-flow';

const STICKERS = {
  'calm-spacious': ['😊', '😌', '😌', '😌', '😌', '😌', '😌', '😌', '😌', '😌'],
  // Add other feelings and stickers as needed
};

export default function DrawingCanvas({ prompt }: { prompt: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [showSaveFlow, setShowSaveFlow] = useState(false);
  const [imageData, setImageData] = useState<string | null>(null);
  const [feeling, setFeeling] = useState('calm-spacious'); // Default feeling
  const isDarkMode = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;

useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

const rect = canvas.getBoundingClientRect();
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;

const ctx = canvas.getContext('2d');
    if (!ctx) return;

ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

// Set background with subtle spectrum gradient
    const gradient = ctx.createLinearGradient(0, 0, rect.width, rect.height);
    gradient.addColorStop(0, '#fafaf9');
    gradient.addColorStop(0.25, '#fef3f2');
    gradient.addColorStop(0.5, '#fffbeb');
    gradient.addColorStop(0.75, '#f0fdf4');
    gradient.addColorStop(1, '#f0f9ff');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, rect.width, rect.height);
  }, [isDarkMode]);

const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
    setIsDrawing(true);
    draw(e);
  };

const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
    if (!isDrawing) return;
    draw(e);
  };

const handleMouseUp = () => {
    setIsDrawing(false);
  };

const handleTouchMove = (e: React.TouchEvent<HTMLCanvasElement>) => {
    if (!isDrawing) return;
    e.preventDefault();
    const touch = e.touches[0];
    const canvas = canvasRef.current;
    if (canvas) {
      const rect = canvas.getBoundingClientRect();
      const x = touch.clientX - rect.left;
      const y = touch.clientY - rect.top;
      drawTouch(x, y);
    }
  };

const handleTouchEnd = () => {
    setIsDrawing(false);
  };

const drawTouch = (x: number, y: number) => {
    const canvas = canvasRef.current;
    if (!canvas) return;

const ctx = canvas.getContext('2d');
    if (!ctx) return;

ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#1f2937';

if (!isDrawing) {
      ctx.beginPath();
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
      ctx.stroke();
    }
  };

const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current;
    if (!canvas) return;

const ctx = canvas.getContext('2d');
    if (!ctx) return;

const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

// Draw brush stroke with visible marker
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#1f2937'; // Dark gray-black, visible on any background

if (!isDrawing) {
      ctx.beginPath();
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
      ctx.stroke();
    }
  };

const handleSave = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    setImageData(canvas.toDataURL('image/png'));
    setShowSaveFlow(true);
  };

const handleDownload = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = `zoco-drawing-${Date.now()}.png`;
    link.click();
  };

const handleClear = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;

const ctx = canvas.getContext('2d');
    if (!ctx) return;

const rect = canvas.getBoundingClientRect();
    
    // Restore the spectrum gradient background
    const gradient = ctx.createLinearGradient(0, 0, rect.width, rect.height);
    gradient.addColorStop(0, '#fafaf9');
    gradient.addColorStop(0.25, '#fef3f2');
    gradient.addColorStop(0.5, '#fffbeb');
    gradient.addColorStop(0.75, '#f0fdf4');
    gradient.addColorStop(1, '#f0f9ff');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, rect.width, rect.height);
  };

const handleZocofy = () => {
    // Placeholder for handleZocofy implementation
  };

if (showSaveFlow && imageData) {
    return (
      <SaveFlow
        imageData={imageData}
        feeling={feeling}
        onBack={() => setShowSaveFlow(false)}
      />
    );
  }

return (
    <div className="space-y-8">
      {/* Yellow bordered section with canvas */}
      <div className="border-4 bg-yellow-400 p-6">
      <canvas
        ref={canvasRef}
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
        className="w-full h-96 border-4 border-black cursor-crosshair bg-white touch-none"
      />
      </div>

{/* Buttons */}
      <div className="flex gap-4 flex-wrap">
        <button
          onClick={handleDownload}
          className="px-8 py-3 border-4 border-black bg-yellow-400 text-black font-bold hover:bg-yellow-300 transition-colors"
        >
          download
        </button>
        <button
          onClick={handleClear}
          className="px-8 py-3 border-4 border-black text-black font-bold hover:bg-black hover:text-white transition-colors"
        >
          clear
        </button>
      </div>
    </div>
  );
}
[V0_FILE]jpeg:file="public/paper-and-pain.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/paper_and_pain_logo-xxgAygLLrMG9lWm8k6qkwdHgjg5dea.jpeg" isMerged="true"
[V0_FILE]png:file="public/collab-folks.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-sq3zez87YO2fCs9but9MjIoLa3mH54.png" isMerged="true"
[V0_FILE]jpeg:file="public/trion.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/trion-r1eKSIlUXcNFTKh7i6oQs6tALtqsMJ.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/jodie.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_7496.JPG-p00b3T4HGjLYjdSbGZ6AtkElXZ81jX.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/jodie-intro.tsx" isMerged="true"
'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';

export default function JodieIntro() {
  const [hovered, setHovered] = useState(false);
  const [isScrollVisible, setIsScrollVisible] = useState(false);
  const cardRef = useRef<HTMLDivElement>(null);

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsScrollVisible(true);
        } else {
          setIsScrollVisible(false);
        }
      },
      { threshold: 0.5 }
    );

if (cardRef.current) {
      observer.observe(cardRef.current);
    }

return () => observer.disconnect();
  }, []);

const isActive = hovered || isScrollVisible;

{/* Jodie Card with Hover and Scroll Animation */}
        <div
          ref={cardRef}
          onMouseEnter={() => setHovered(true)}
          onMouseLeave={() => setHovered(false)}
          className={`border-4 dark:border-slate-700 border-black p-8 bg-white dark:bg-slate-800 transition-all transform cursor-pointer ${
            isActive ? 'scale-105 -rotate-2 bg-yellow-400 text-black' : 'scale-100 rotate-0'
          }`}
        >
          <div className="flex flex-col md:flex-row gap-8 items-start">
            <div className="w-32 h-32 bg-white border-4 border-black flex-shrink-0 overflow-hidden">
              <Image
                src="/jodie.jpg"
                alt="Jodie"
                width={128}
                height={128}
                className="w-full h-full object-cover scale-150"
                style={{ objectPosition: 'center top' }}
              />
            </div>
            <div className="flex-1">
              <h4 className="text-2xl font-bold mb-2">Jodie</h4>
              <p className="text-sm font-mono text-slate-600 dark:text-slate-400 mb-4">part-time designer, full-time friend</p>
              <p className="text-base leading-relaxed">
                curator of conversations. believer in ecocentric ways of being and doing. here to make space for play, bridging good ideas with good people.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]jpg:file="public/gallery-workshop.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-LWqQ0J5PqvKRGAu0vqMVGUyWyqLtLB.png" isMerged="true"
[V0_FILE]jpg:file="public/gallery-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-DsLqi8g8LLd6kd8ZYnWnx6BQqG8tJ5.png" isMerged="true"
[V0_FILE]jpg:file="public/gallery-process.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-qjUZaWi9LSRDWoeHFTCLArStISKvIi.png" isMerged="true"
[V0_FILE]png:file="public/zoco-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zoco-CKqwMWh3pMSMY2fdGGLegsqjRyWNDw.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/contact.tsx" isMerged="true"
'use client';

import { useState, useEffect, useRef } from 'react';

export default function Contact() {
  const [hovered, setHovered] = useState(false);
  const [isScrollVisible, setIsScrollVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

return () => observer.disconnect();
  }, []);

const isActive = hovered || isScrollVisible;

return (
    <section className="px-6 py-20 md:py-24">
      <div
        ref={sectionRef}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        className={`max-w-4xl mx-auto border-4 dark:border-slate-700 border-black p-8 md:p-12 transition-all transform ${
          isActive ? 'bg-yellow-400 text-black scale-105 -rotate-1' : 'bg-slate-50 dark:bg-slate-900 text-black dark:text-white'
        }`}
      >
        <h2 className="text-4xl md:text-5xl font-bold mb-6">
          let's create together
        </h2>
        
        <p className={`text-lg mb-8 max-w-2xl ${
          isActive ? 'text-black' : 'text-slate-700 dark:text-slate-300'
        }`}>
          if you're building something that matters and want to collaborate with people who care about the details, let's talk.
        </p>

<div className="flex flex-col sm:flex-row gap-6">
          <a
            href="mailto:hello@zococollective.com"
            className="px-8 py-4 border-3 dark:border-slate-300 border-black bg-white dark:bg-slate-800 text-black dark:text-white font-bold hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors inline-block"
          >
            email us
          </a>
          
          <a
            href="https://linkedin.com"
            target="_blank"
            rel="noopener noreferrer"
            className="px-8 py-4 border-3 dark:border-blue-400 border-blue-500 bg-blue-400 dark:bg-blue-500 text-black font-bold hover:scale-105 transition-transform inline-block"
          >
            connect on linkedin
          </a>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function Navigation() {
  const [isOpen, setIsOpen] = useState(false);

const sections = [
    { name: 'Canvas', href: '#canvas' },
    { name: 'About', href: '#about' },
    { name: 'Philosophy', href: '#philosophy' },
    { name: 'Collaborators', href: '#collaborators' },
    { name: 'Gallery', href: '#gallery' },
    { name: 'Contact', href: '#contact' },
  ];

return (
    <nav className="fixed top-0 left-0 right-0 z-40 bg-white dark:bg-slate-950 border-b-4 dark:border-slate-700 border-black">
      <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
        {/* Logo */}
        <a href="#" className="w-8 h-8 flex-shrink-0">
          <Image
            src="/zoco-logo.png"
            alt="Zoco"
            width={32}
            height={32}
            className="w-full h-full object-contain"
          />
        </a>

{/* Desktop Menu */}
        <div className="hidden md:flex gap-6 items-center">
          {sections.map((section) => (
            <a
              key={section.name}
              href={section.href}
              className="text-sm font-mono hover:scale-110 transition-transform"
            >
              {section.name}
            </a>
          ))}
        </div>

{/* Mobile Menu Button */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="md:hidden border-2 border-black dark:border-white p-2"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>

{/* Mobile Menu */}
      {isOpen && (
        <div className="md:hidden border-t-4 dark:border-slate-700 border-black bg-white dark:bg-slate-900 px-6 py-4 flex flex-col gap-4">
          {sections.map((section) => (
            <a
              key={section.name}
              href={section.href}
              className="text-sm font-mono hover:font-bold transition-all"
              onClick={() => setIsOpen(false)}
            >
              {section.name}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
}
[V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" isMerged="true"
'use client';

import { useState, useEffect } from 'react';

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
    const toggleVisibility = () => {
      if (window.scrollY > 300) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

window.addEventListener('scroll', toggleVisibility);
    return () => window.removeEventListener('scroll', toggleVisibility);
  }, []);

const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

return (
    <>
      {isVisible && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-8 right-6 z-40 w-12 h-12 border-3 border-black dark:border-white bg-white dark:bg-slate-950 hover:scale-110 transition-transform flex items-center justify-center font-bold"
          aria-label="Scroll to top"
        >
          ↑
        </button>
      )}
    </>
  );
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
'use client';

import DrawingHero from '@/components/drawing-hero';
import JodieIntro from '@/components/jodie-intro';
import Philosophy from '@/components/philosophy';
import Collaborators from '@/components/collaborators';
import Playful from '@/components/playful';
import Gallery from '@/components/gallery';
import Contact from '@/components/contact';

export default function Home() {
  const prompt = 'when was the last time you drew out an idea?';

return (
    <main className="bg-white dark:bg-slate-950 text-black dark:text-white">
      <DrawingHero prompt={prompt} />
      <JodieIntro />
      <Philosophy />
      <Collaborators />
      <Playful />
      <Gallery />
      <Contact />
    </main>
  );
}
[V0_FILE]typescriptreact:file="components/gallery.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import Image from 'next/image';

const galleryItems = [
  {
    src: '/gallery-workshop.jpg',
    caption: 'training & equipping for collective design & mobilisation',
  },
  {
    src: '/gallery-team.jpg',
    caption: 'enabling better collaboration and conversation',
  },
  {
    src: '/gallery-process.jpg',
    caption: 'scribing and visual facilitation for deeper listening',
  },
];

export default function Gallery() {
  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);

return (
    <section className="px-6 py-20 md:py-24 border-b-4 dark:border-slate-700 border-black" id="gallery">
      <div className="max-w-4xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold mb-12">
          how we show up
        </h2>

{/* Horizontal scroll gallery */}
        <div className="flex gap-6 overflow-x-auto pb-4 -mx-6 px-6">
          {galleryItems.map((item, idx) => (
            <div
              key={idx}
              className="flex-shrink-0 w-64 md:w-80 cursor-pointer transition-transform hover:scale-105"
              onClick={() => setExpandedIndex(idx)}
            >
              <div className="border-4 dark:border-slate-700 border-black overflow-hidden bg-white dark:bg-slate-800">
                <Image
                  src={item.src || "/placeholder.svg"}
                  alt={item.caption}
                  width={400}
                  height={300}
                  className="w-full h-48 object-cover"
                />
              </div>
              <p className="text-sm font-mono mt-3 text-slate-600 dark:text-slate-400">
                {item.caption}
              </p>
            </div>
          ))}
        </div>

{/* Expanded modal */}
        {expandedIndex !== null && (
          <div
            className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50"
            onClick={() => setExpandedIndex(null)}
          >
            <div
              className="bg-white dark:bg-slate-800 border-4 dark:border-slate-700 border-black max-w-3xl w-full overflow-hidden"
              onClick={(e) => e.stopPropagation()}
            >
              <Image
                src={galleryItems[expandedIndex].src || "/placeholder.svg"}
                alt={galleryItems[expandedIndex].caption}
                width={800}
                height={600}
                className="w-full h-auto"
              />
              <div className="p-6">
                <p className="text-lg font-mono text-slate-700 dark:text-slate-300">
                  {galleryItems[expandedIndex].caption}
                </p>
                <button
                  onClick={() => setExpandedIndex(null)}
                  className="mt-6 px-8 py-3 border-4 dark:border-slate-700 border-black bg-black dark:bg-white text-white dark:text-black font-bold hover:scale-105 transition-transform"
                >
                  close
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/philosophy.tsx" isMerged="true"
'use client';

import { useState, useEffect, useRef } from 'react';

export default function Philosophy() {
  const [hovered, setHovered] = useState<number | null>(null);
  const [visibleIndices, setVisibleIndices] = useState<Set<number>>(new Set());
  const sectionRef = useRef<HTMLDivElement>(null);

const values = [
    { label: 'human-first', desc: 'for healthier systems that focus less on productivity, more on care' },
    { label: 'ecocentric', desc: 'because everything is connected and we should protect what we have' },
    { label: 'playful', desc: 'with the permission to do differently, because better ways can both be fun and intentional' },
    { label: 'curious', desc: 'always asking better questions, and allowing stupid questions too' },
  ]

const hoverColors = [
    { bg: 'bg-red-500', text: 'text-white', hover: 'hover:bg-red-500 hover:text-white dark:hover:bg-red-600' },
    { bg: 'bg-emerald-500', text: 'text-white', hover: 'hover:bg-emerald-500 hover:text-white dark:hover:bg-emerald-600' },
    { bg: 'bg-blue-500', text: 'text-white', hover: 'hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600' },
    { bg: 'bg-yellow-400', text: 'text-black', hover: 'hover:bg-yellow-400 hover:text-black dark:hover:bg-yellow-500' },
  ];

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // Stagger animation with 0.4s delay between each card
          values.forEach((_, idx) => {
            setTimeout(() => {
              setVisibleIndices(prev => new Set(prev).add(idx));
            }, idx * 400);
          });
        } else {
          setVisibleIndices(new Set());
        }
      },
      { threshold: 0.5 }
    );

if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

return () => observer.disconnect();
  }, []);

<div ref={sectionRef} className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {values.map((value, idx) => {
            const color = hoverColors[idx];
            const isActive = hovered === idx || visibleIndices.has(idx);
            
            return (
              <div
                key={value.label}
                onMouseEnter={() => setHovered(idx)}
                onMouseLeave={() => setHovered(null)}
                className={`border-4 dark:border-slate-700 border-black p-6 transition-colors ${
                  isActive ? `${color.bg} ${color.text}` : ''
                } ${color.hover}`}
              >
                <h3 className={`text-xl font-bold mb-2 ${isActive ? color.text : ''}`}>{value.label}</h3>
                <p className={`text-sm ${isActive ? color.text : 'text-slate-600 dark:text-slate-400'}`}>{value.desc}</p>
              </div>
            );
          })}
        </div>

<p className="text-base md:text-lg font-mono mt-12 text-slate-600 dark:text-slate-400">
          in these crazy times, where can we be still for a little while and be intentional? we believe play is the answer in the chaos, embracing serendipitous and considered creation. we believe in the collective responsibility to this earth that we must each first take as our own.
        </p>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/collaborators.tsx" isMerged="true"
'use client';

import { useState, useEffect, useRef } from 'react';

const collaborators = [
  { name: 'Paper and Pain', color: 'hover:bg-red-500', website: 'https://pain.design', logo: '/paper-and-pain.jpeg' },
  { name: 'The Collab Folks', color: 'hover:bg-yellow-400 hover:text-black', website: 'https://thecollabfolks.com', logo: '/collab-folks.png' },
  { name: 'TriOn and Co', color: 'hover:bg-blue-500', website: 'https://trionandco.com', logo: '/trion.jpeg' },
];

const pastClients = [
  'Sustainable Startups Co',
  'Creative Minds Design',
  'EcoFlow Systems',
  'Human-First Labs',
  'The Curious Institute',
  'Play & Purpose Studio',
];

export default function Collaborators() {
  const [hovered, setHovered] = useState<number | null>(null);
  const [showPastClients, setShowPastClients] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);
  const [visibleIndices, setVisibleIndices] = useState(new Set<number>());

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // Stagger animation with 0.4s delay between each card
          collaborators.forEach((_, idx) => {
            setTimeout(() => {
              setVisibleIndices(prev => new Set(prev).add(idx));
            }, idx * 400);
          });
        } else {
          setVisibleIndices(new Set());
        }
      },
      { threshold: 0.5 }
    );

if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

return () => observer.disconnect();
  }, []);

return (
    <section className="px-6 py-20 md:py-24 border-b-4 dark:border-slate-700 border-black bg-slate-50 dark:bg-slate-900">
      <div className="max-w-4xl mx-auto">
        <h3 className="text-lg font-mono uppercase tracking-wider mb-8">
          collaborating with
        </h3>
        <div ref={sectionRef} className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {collaborators.map((collab, idx) => {
            const isActive = hovered === idx || visibleIndices.has(idx);
            return (
              <a
                key={idx}
                href={collab.website}
                target="_blank"
                rel="noopener noreferrer"
                onMouseEnter={() => setHovered(idx)}
                onMouseLeave={() => setHovered(null)}
                className={`border-4 dark:border-slate-700 border-black p-6 bg-white dark:bg-slate-800 transition-colors cursor-pointer ${
                  isActive ? collab.color : ''
                }`}
              >
                <p className="font-mono text-sm">{collab.name}</p>
              </a>
            );
          })}

{/* Click for more - Past Clients */}
          <button
            onClick={() => setShowPastClients(!showPastClients)}
            onMouseEnter={() => setHovered(3)}
            onMouseLeave={() => setHovered(null)}
            className={`border-4 dark:border-slate-700 border-black p-6 bg-white dark:bg-slate-800 transition-colors text-left ${
              hovered === 3 ? 'hover:bg-emerald-500 hover:text-white' : ''
            }`}
          >
            <p className="font-mono text-sm">click for more</p>
          </button>
        </div>

{/* Past Clients Modal */}
        {showPastClients && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
            <div className="bg-white dark:bg-slate-800 border-4 dark:border-slate-700 border-black max-w-2xl w-full p-8">
              <h3 className="text-2xl font-bold mb-6">past collaborations</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                {pastClients.map((client, idx) => (
                  <div key={idx} className="border-2 dark:border-slate-700 border-black p-4 text-sm">
                    {client}
                  </div>
                ))}
              </div>
              <button
                onClick={() => setShowPastClients(false)}
                className="px-8 py-3 border-4 dark:border-slate-700 border-black bg-black dark:bg-white text-white dark:text-black font-bold hover:scale-105 transition-transform"
              >
                close
              </button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/playful.tsx" isMerged="true"
'use client';

import { useState, useEffect, useRef } from 'react';

export default function Playful() {
  const [hovered, setHovered] = useState<number | null>(null);
  const [visibleIndices, setVisibleIndices] = useState<Set<number>>(new Set());
  const sectionRef = useRef<HTMLDivElement>(null);

const phrases = [
    'ideas start messy',
    'clarity comes second',
    'play first',
    'then build',
    'together is better',
  ];

const cardColors = [
    { bg: 'bg-red-500', text: 'text-white' },
    { bg: 'bg-yellow-400', text: 'text-black' },
    { bg: 'bg-blue-500', text: 'text-white' },
    { bg: 'bg-emerald-500', text: 'text-white' },
    { bg: 'bg-purple-500', text: 'text-white' },
  ];

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // Stagger animation with 0.4s delay between each card
          phrases.forEach((_, idx) => {
            setTimeout(() => {
              setVisibleIndices(prev => new Set(prev).add(idx));
            }, idx * 400);
          });
        } else {
          setVisibleIndices(new Set());
        }
      },
      { threshold: 0.5 }
    );

if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

return () => observer.disconnect();
  }, []);

{/* Colorful phrase cards - hover and scroll interaction */}
        <div ref={sectionRef} className="flex flex-wrap gap-3 mb-12">
          {phrases.map((phrase, idx) => {
            const isActive = hovered === idx || visibleIndices.has(idx);
            const color = cardColors[idx];
            return (
              <div
                key={idx}
                onMouseEnter={() => setHovered(idx)}
                onMouseLeave={() => setHovered(null)}
                className={`px-6 py-3 border-3 border-black font-bold cursor-pointer transition-all transform ${
                  isActive
                    ? `${color.bg} ${color.text} scale-110 -rotate-2`
                    : 'bg-white text-black'
                }`}
              >
                {phrase}
              </div>
            );
          })}
        </div>

<p className="text-lg text-slate-600 dark:text-slate-400">
          or keep scrolling to say hello.
        </p>
      </div>
    </section>
  );
}
[V0_FILE]typescript:file="app/api/gallery/route.ts" isDeleted="true"
GENERATING
[V0_FILE]typescript:file="app/api/submissions/route.ts" isDeleted="true"
GENERATING
[V0_FILE]typescriptreact:file="components/save-flow.tsx"
'use client';

import { useState } from 'react';

export default function SaveFlow({
  imageData,
  onBack,
}: {
  imageData: string;
  feeling?: string;
  onBack: () => void;
}) {
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);

const handleDownload = () => {
    const link = document.createElement('a');
    link.href = imageData;
    link.download = `zoco-creation-${Date.now()}.png`;
    link.click();
  };

const handleDownloadAndShare = () => {
    handleDownload();
    setSubmitted(true);
  };

if (submitted) {
    return (
      <div className="max-w-2xl mx-auto text-center py-12 border-4 dark:border-slate-700 border-black p-8 bg-slate-50 dark:bg-slate-900">
        <h3 className="text-3xl font-bold text-black dark:text-white mb-4">
          Thanks for creating
        </h3>
        <p className="text-slate-600 dark:text-slate-300 mb-6">
          Your creation has been downloaded. Keep playing.
        </p>
        <button
          onClick={onBack}
          className="px-8 py-3 border-4 border-black dark:border-white bg-black dark:bg-white text-white dark:text-black font-bold hover:scale-105 transition-transform"
        >
          Try another
        </button>
      </div>
    );
  }

return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div className="border-4 dark:border-slate-700 border-black overflow-hidden">
        <img
          src={imageData || "/placeholder.svg"}
          alt="Your creation"
          className="w-full h-auto"
        />
      </div>

<div className="flex gap-4">
        <button
          onClick={handleDownloadAndShare}
          className="flex-1 px-8 py-3 border-4 border-black dark:border-white bg-black dark:bg-white text-white dark:text-black font-bold hover:scale-105 transition-transform"
        >
          Download & Share
        </button>
        <button
          onClick={onBack}
          className="flex-1 px-8 py-3 border-4 border-black dark:border-white text-black dark:text-white font-bold hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors"
        >
          Back to drawing
        </button>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/hive-mind.tsx"
'use client';

export default function HiveMind() {
  return (
    <div className="border-4 dark:border-slate-700 border-black p-12 bg-slate-50 dark:bg-slate-900 text-center">
      <p className="text-slate-600 dark:text-slate-300 text-lg">
        The hive mind is a space for shared creations. Download your work and share it with us.
      </p>
    </div>
  );
}</article></body></html>