[V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescript:file="hooks/use-mobile.ts" isMerged="true" import * as React from 'react' const MOBILE_BREAKPOINT = 768 export function useIsMobile() { const [isMobile, setIsMobile] = React.useState(undefined) React.useEffect(() => { const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } mql.addEventListener('change', onChange) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) return () => mql.removeEventListener('change', onChange) }, []) return !!isMobile } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist 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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]javascript:file="next.config.mjs" isEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]plaintext:file="public/.gitkeep" isMerged="true" [V0_FILE]png:file="public/bolt-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bolt-logo-BbWTDS2qQ55bAMuqdoxYQL0uqK2Iyi.png" isMerged="true" [V0_FILE]png:file="public/leap-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/leap-logo-yM7QTd3YuLOnjJdzjybB8UsfJf5SEz.png" isMerged="true" [V0_FILE]png:file="public/lovable-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/lovable-logo-gsS2EK68016gD7z7grhMQObyGYjEnF.png" isMerged="true" [V0_FILE]png:file="public/replit-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/replit-logo-5WKjyUd4cJWbIzbJBvRfjltHTzBIRI.png" isMerged="true" [V0_FILE]png:file="public/stripe-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stripe-logo-yDLHyeTsMsK5KpPaCRQgnscoZPFhvZ.png" isMerged="true" [V0_FILE]png:file="public/v0-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v0-logo-a662nbbetknLLNURsxSxXopyZ5Uyq0.png" isMerged="true" [V0_FILE]png:file="public/orchids.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/orchids-3ywdgWlZovlM6kjI2qexnmz7TUsHuR.png" isMerged="true" [V0_FILE]typescriptreact:file="components/logo-marquee.tsx" isMerged="true" "use client" import { motion } from "motion/react" import { useEffect, useState } from "react" import { BoltLogo } from "./bolt-logo" import { LeapLogo } from "./leap-logo" import { LovableLogo } from "./lovable-logo" import { Marquee } from "./marquee" import { OrchidsLogo } from "./orchids-logo" import { ReplitLogo } from "./replit-logo" import { StripeLogo } from "./stripe-logo" import { V0Logo } from "./v0-logo" interface Logo { alt: string href: string component: React.ComponentType<{ className?: string }> height: string } const logos: Logo[] = [ { alt: "Leap", href: "https://leap.new", component: LeapLogo, height: "h-5" }, { alt: "Orchids", href: "https://orchids.app", component: OrchidsLogo, height: "h-10" }, { alt: "v0", href: "https://v0.app", component: V0Logo, height: "h-6" }, { alt: "Replit", href: "https://replit.com", component: ReplitLogo, height: "h-24" }, { alt: "Bolt", href: "https://bolt.new", component: BoltLogo, height: "h-24" }, { alt: "Stripe", href: "https://stripe.com", component: StripeLogo, height: "h-8" }, { alt: "Lovable", href: "https://lovable.dev", component: LovableLogo, height: "h-6" }, ] export function LogoMarquee() { return (

{/* Left fade */}

{/* Right fade */}

{logos.map((logo, index) => ( ))}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; /* @import '@clerk/themes/shadcn.css'; */ @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --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-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); --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); } :root { --radius: 0.625rem; --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.5573 0.2543 283.67); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.6286 0.2107 286.4); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added marquee animation for logo carousel */ @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } .animate-marquee { animation: marquee var(--duration) linear infinite; } [V0_FILE]typescriptreact:file="components/ui/sonner.tsx" isMerged="true" 'use client' import { Toaster as Sonner, ToasterProps } from 'sonner' const Toaster = ({ ...props }: ToasterProps) => { return ( ) } export { Toaster } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@clerk/nextjs": "latest", "@clerk/themes": "latest", "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "latest", "@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.15", "@radix-ui/react-dropdown-menu": "latest", "@radix-ui/react-hover-card": "latest", "@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": "latest", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "latest", "@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": "latest", "@tanstack/react-table": "latest", "@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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "latest", "process": "latest", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "latest", "swr": "latest", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "three": "0.181.1", "framer-motion": "12.23.24", "motion": "12.23.24" }, "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/dot-matrix.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import * as THREE from "three" import { useTheme } from "next-themes" type PixelBlastVariant = "square" | "circle" | "triangle" | "diamond" type PixelBlastProps = { variant?: PixelBlastVariant pixelSize?: number color?: string className?: string style?: React.CSSProperties antialias?: boolean patternScale?: number patternDensity?: number pixelSizeJitter?: number enableRipples?: boolean rippleIntensityScale?: number rippleThickness?: number rippleSpeed?: number autoPauseOffscreen?: boolean speed?: number transparent?: boolean edgeFade?: number } let __colorCanvas: HTMLCanvasElement | null = null let __colorCtx: CanvasRenderingContext2D | null = null const getColorCtx = () => { if (typeof window === "undefined") return null if (!__colorCanvas) { __colorCanvas = document.createElement("canvas") __colorCanvas.width = 1 __colorCanvas.height = 1 __colorCtx = __colorCanvas.getContext("2d", { willReadFrequently: true }) } return __colorCtx } const resolveCssColor = (value: string, scopeEl: HTMLElement | null): string => { if (typeof window === "undefined") return value const parent = scopeEl ?? document.body const el = document.createElement("span") el.style.position = "absolute" el.style.left = "-9999px" el.style.top = "-9999px" el.style.pointerEvents = "none" el.style.opacity = "0" el.style.color = value parent.appendChild(el) const computed = window.getComputedStyle(el).color || value parent.removeChild(el) if (/^(#|rgb\(|rgba\(|hsl\(|hwb\()/i.test(computed)) { return computed } const ctx = getColorCtx() if (!ctx) return computed try { ;(ctx as any).fillStyle = "#000" ;(ctx as any).fillStyle = computed const norm = ctx.fillStyle as string if (typeof norm === "string" && /^(#|rgb\()/i.test(norm)) { return norm } } catch { // fall through to pixel read } try { ctx.clearRect(0, 0, 1, 1) ;(ctx as any).fillStyle = computed ctx.fillRect(0, 0, 1, 1) const data = ctx.getImageData(0, 0, 1, 1).data const r = data[0] const g = data[1] const b = data[2] const a = data[3] / 255 if (a >= 1) return `rgb(${r}, ${g}, ${b})` return `rgba(${r}, ${g}, ${b}, ${Math.round(a * 1000) / 1000})` } catch { return computed } } const createTouchTexture = () => { const size = 64 const canvas = document.createElement("canvas") canvas.width = size canvas.height = size const ctx = canvas.getContext("2d", { alpha: true, desynchronized: true, willReadFrequently: false, }) if (!ctx) { throw new Error("2D context not available") } ctx.fillStyle = "black" ctx.fillRect(0, 0, canvas.width, canvas.height) const texture = new THREE.Texture(canvas) texture.minFilter = THREE.LinearFilter texture.magFilter = THREE.LinearFilter texture.generateMipmaps = false texture.format = THREE.RGBAFormat texture.type = THREE.UnsignedByteType const trail: { x: number y: number vx: number vy: number force: number age: number }[] = [] let last: { x: number; y: number } | null = null const maxAge = 64 let radius = 0.1 * size const speed = 1 / maxAge const clear = () => { ctx.fillStyle = "black" ctx.fillRect(0, 0, canvas.width, canvas.height) } const drawPoint = (p: { x: number y: number vx: number vy: number force: number age: number }) => { const pos = { x: p.x * size, y: (1 - p.y) * size } let intensity = 1 const easeOutSine = (t: number) => Math.sin((t * Math.PI) / 2) const easeOutQuad = (t: number) => -t * (t - 2) if (p.age < maxAge * 0.3) intensity = easeOutSine(p.age / (maxAge * 0.3)) else intensity = easeOutQuad(1 - (p.age - maxAge * 0.3) / (maxAge * 0.7)) || 0 intensity *= p.force const color = `${((p.vx + 1) / 2) * 255}, ${((p.vy + 1) / 2) * 255}, ${intensity * 255}` const offset = size * 5 ctx.shadowOffsetX = offset ctx.shadowOffsetY = offset ctx.shadowBlur = radius ctx.shadowColor = `rgba(${color},${0.22 * intensity})` ctx.beginPath() ctx.fillStyle = "rgba(255,0,0,1)" ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2) ctx.fill() } const addTouch = (norm: { x: number; y: number }) => { let force = 0 let vx = 0 let vy = 0 if (last) { const dx = norm.x - last.x const dy = norm.y - last.y if (dx === 0 && dy === 0) return const dd = dx * dx + dy * dy const d = Math.sqrt(dd) vx = dx / (d || 1) vy = dy / (d || 1) force = Math.min(dd * 10_000, 1) } last = { x: norm.x, y: norm.y } trail.push({ x: norm.x, y: norm.y, age: 0, force, vx, vy }) } const update = () => { clear() for (let i = trail.length - 1; i >= 0; i--) { const point = trail[i] const f = point.force * speed * (1 - point.age / maxAge) point.x += point.vx * f point.y += point.vy * f point.age++ if (point.age > maxAge) trail.splice(i, 1) } for (let i = 0; i < trail.length; i++) drawPoint(trail[i]) texture.needsUpdate = true } return { canvas, texture, addTouch, update, set radiusScale(v: number) { radius = 0.1 * size * v }, get radiusScale() { return radius / (0.1 * size) }, size, } } const SHAPE_MAP: Record = { square: 0, circle: 1, triangle: 2, diamond: 3, } const VERTEX_SRC = ` void main() { gl_Position = vec4(position, 1.0); } ` const FRAGMENT_SRC = ` precision highp float; uniform vec3 uColor; uniform vec2 uResolution; uniform float uTime; uniform float uPixelSize; uniform float uScale; uniform float uDensity; uniform float uPixelJitter; uniform int uEnableRipples; uniform float uRippleSpeed; uniform float uRippleThickness; uniform float uRippleIntensity; uniform float uEdgeFade; uniform int uShapeType; const int SHAPE_SQUARE = 0; const int SHAPE_CIRCLE = 1; const int SHAPE_TRIANGLE = 2; const int SHAPE_DIAMOND = 3; const int MAX_CLICKS = 10; uniform vec2 uClickPos [MAX_CLICKS]; uniform float uClickTimes[MAX_CLICKS]; out vec4 fragColor; float Bayer2(vec2 a) { a = floor(a); return fract(a.x / 2. + a.y * a.y * .75); } #define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a)) #define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a)) #define FBM_OCTAVES 5 #define FBM_LACUNARITY 1.25 #define FBM_GAIN 1.0 float hash11(float n){ return fract(sin(n)*43758.5453); } float vnoise(vec3 p){ vec3 ip = floor(p); vec3 fp = fract(p); float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0))); float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0))); float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0))); float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0))); float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0))); float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0))); float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0))); float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0))); vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0); float x00 = mix(n000, n100, w.x); float x10 = mix(n010, n110, w.x); float x01 = mix(n001, n101, w.x); float x11 = mix(n011, n111, w.x); float y0 = mix(x00, x10, w.y); float y1 = mix(x01, x11, w.y); return mix(y0, y1, w.z) * 2.0 - 1.0; } float fbm2(vec2 uv, float t){ vec3 p = vec3(uv * uScale, t); float amp = 1.0; float freq = 1.0; float sum = 1.0; for (int i = 0; i < FBM_OCTAVES; ++i){ sum += amp * vnoise(p * freq); freq *= FBM_LACUNARITY; amp *= FBM_GAIN; } return sum * 0.5 + 0.5; } float maskCircle(vec2 p, float cov){ float r = sqrt(cov) * .25; float d = length(p - 0.5) - r; float aa = 0.5 * fwidth(d); return cov * (1.0 - smoothstep(-aa, aa, d * 2.0)); } float maskTriangle(vec2 p, vec2 id, float cov){ bool flip = mod(id.x + id.y, 2.0) > 0.5; if (flip) p.x = 1.0 - p.x; float r = sqrt(cov); float d = p.y - r*(1.0 - p.x); float aa = fwidth(d); return cov * clamp(0.5 - d/aa, 0.0, 1.0); } float maskDiamond(vec2 p, float cov){ float r = sqrt(cov) * 0.564; return step(abs(p.x - 0.49) + abs(p.y - 0.49), r); } void main(){ float pixelSize = uPixelSize; vec2 fragCoord = gl_FragCoord.xy - uResolution * .5; float aspectRatio = uResolution.x / uResolution.y; vec2 pixelId = floor(fragCoord / pixelSize); vec2 pixelUV = fract(fragCoord / pixelSize); float cellPixelSize = 8.0 * pixelSize; vec2 cellId = floor(fragCoord / cellPixelSize); vec2 cellCoord = cellId * cellPixelSize; vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0); float base = fbm2(uv, uTime * 0.05); base = base * 0.5 - 0.65; float feed = base + (uDensity - 0.5) * 0.3; float speed = uRippleSpeed; float thickness = uRippleThickness; const float dampT = 1.0; const float dampR = 10.0; if (uEnableRipples == 1) { for (int i = 0; i < MAX_CLICKS; ++i){ vec2 pos = uClickPos[i]; if (pos.x < 0.0) continue; float cellPixelSize = 8.0 * pixelSize; vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0); float t = max(uTime - uClickTimes[i], 0.0); float r = distance(uv, cuv); float waveR = speed * t; float ring = exp(-pow((r - waveR) / thickness, 2.0)); float atten = exp(-dampT * t) * exp(-dampR * r); feed = max(feed, ring * atten * uRippleIntensity); } } float bayer = Bayer8(fragCoord / uPixelSize) - 0.5; float bw = step(0.5, feed + bayer); float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453); float jitterScale = 1.0 + (h - 0.5) * uPixelJitter; float coverage = bw * jitterScale; float M; if (uShapeType == SHAPE_CIRCLE) M = maskCircle (pixelUV, coverage); else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage); else if (uShapeType == SHAPE_DIAMOND) M = maskDiamond(pixelUV, coverage); else M = coverage; if (uEdgeFade > 0.0) { vec2 norm = gl_FragCoord.xy / uResolution; float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y)); float fade = smoothstep(0.0, uEdgeFade, edge); M *= fade; } vec3 color = uColor; fragColor = vec4(color, M); } ` const MAX_CLICKS = 10 export const DotMatrix: React.FC = ({ variant = "diamond", pixelSize = 3, color, className, style, antialias = false, patternScale = 1, patternDensity = 2, pixelSizeJitter = 0, enableRipples = false, rippleIntensityScale = 1, rippleThickness = 0.1, rippleSpeed = 0.3, autoPauseOffscreen = true, speed = 2, transparent = true, edgeFade = 0, }) => { const containerRef = useRef(null) const visibilityRef = useRef({ visible: true }) const speedRef = useRef(speed) const prevConfigRef = useRef>({}) const [resolvedTheme, setResolvedTheme] = useState('light') useEffect(() => { // Detect theme from CSS variable or media query const checkTheme = () => { if (typeof window === 'undefined') return const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches setResolvedTheme(isDark ? 'dark' : 'light') } checkTheme() const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') const handler = () => checkTheme() mediaQuery.addEventListener('change', handler) return () => mediaQuery.removeEventListener('change', handler) }, []) const threeRef = useRef<{ renderer: THREE.WebGLRenderer scene: THREE.Scene camera: THREE.OrthographicCamera material: THREE.ShaderMaterial clock: THREE.Clock clickIx: number uniforms: { uResolution: { value: THREE.Vector2 } uTime: { value: number } uColor: { value: THREE.Color } uClickPos: { value: THREE.Vector2[] } uClickTimes: { value: Float32Array } uShapeType: { value: number } uPixelSize: { value: number } uScale: { value: number } uDensity: { value: number } uPixelJitter: { value: number } uEnableRipples: { value: number } uRippleSpeed: { value: number } uRippleThickness: { value: number } uRippleIntensity: { value: number } uEdgeFade: { value: number } } resizeObserver?: ResizeObserver raf?: number resizeRaf?: number resizeTimer?: number quad?: THREE.Mesh timeOffset?: number touch?: ReturnType lastResolvedColor?: string colorInput?: string } | null>(null) const themeColor = color || (resolvedTheme === "dark" ? "hsl(var(--foreground) / 0.6)" : "hsl(var(--foreground) / 0.4)") useEffect(() => { const container = containerRef.current if (!container) return speedRef.current = speed const needsReinitKeys: Array = ["antialias"] const cfg: PixelBlastProps = { antialias } let mustReinit = false if (!threeRef.current) mustReinit = true else if (prevConfigRef.current) { for (const k of needsReinitKeys) if (prevConfigRef.current[k] !== cfg[k]) { mustReinit = true break } } if (mustReinit) { if (threeRef.current) { const t = threeRef.current t.resizeObserver?.disconnect() cancelAnimationFrame(t.raf!) t.quad?.geometry.dispose() t.material.dispose() t.renderer.dispose() if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement) threeRef.current = null } const canvas = document.createElement("canvas") const renderer = new THREE.WebGLRenderer({ canvas, antialias: false, alpha: true, powerPreference: "high-performance", stencil: false, depth: false, premultipliedAlpha: true, preserveDrawingBuffer: false, failIfMajorPerformanceCaveat: false, }) renderer.domElement.style.width = "100%" renderer.domElement.style.height = "100%" renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5)) renderer.info.autoReset = false renderer.shadowMap.enabled = false container.appendChild(renderer.domElement) if (transparent) renderer.setClearAlpha(0) else renderer.setClearColor(0x00_00_00, 1) const uniforms = { uResolution: { value: new THREE.Vector2(0, 0) }, uTime: { value: 0 }, uColor: { value: new THREE.Color(1, 1, 1) }, uClickPos: { value: Array.from({ length: MAX_CLICKS }, () => new THREE.Vector2(-1, -1)), }, uClickTimes: { value: new Float32Array(MAX_CLICKS) }, uShapeType: { value: SHAPE_MAP[variant] ?? 0 }, uPixelSize: { value: pixelSize * renderer.getPixelRatio() }, uScale: { value: patternScale }, uDensity: { value: patternDensity }, uPixelJitter: { value: pixelSizeJitter }, uEnableRipples: { value: enableRipples ? 1 : 0 }, uRippleSpeed: { value: rippleSpeed }, uRippleThickness: { value: rippleThickness }, uRippleIntensity: { value: rippleIntensityScale }, uEdgeFade: { value: edgeFade }, } const initialResolved = resolveCssColor(themeColor, container) uniforms.uColor.value.setStyle(initialResolved) const scene = new THREE.Scene() scene.matrixAutoUpdate = false const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1) camera.matrixAutoUpdate = false const material = new THREE.ShaderMaterial({ vertexShader: VERTEX_SRC, fragmentShader: FRAGMENT_SRC, uniforms, transparent: true, depthTest: false, depthWrite: false, glslVersion: THREE.GLSL3, precision: "lowp", }) const quadGeom = new THREE.PlaneGeometry(2, 2) const quad = new THREE.Mesh(quadGeom, material) quad.matrixAutoUpdate = false quad.frustumCulled = false scene.add(quad) const clock = new THREE.Clock() const RESIZE_DEBOUNCE = 160 // ms let resizeTimer: number | undefined let pendingW = 0 let pendingH = 0 const applyResize = () => { const w = pendingW || container.clientWidth || 1 const h = pendingH || container.clientHeight || 1 pendingW = 0 pendingH = 0 const canvas = renderer.domElement const targetW = w const targetH = h const pixelRatio = renderer.getPixelRatio() if (canvas.width === targetW * pixelRatio && canvas.height === targetH * pixelRatio) return renderer.setSize(targetW, targetH, false) uniforms.uResolution.value.set(canvas.width, canvas.height) uniforms.uPixelSize.value = pixelSize * pixelRatio renderer.render(scene, camera) } const scheduleResize = () => { pendingW = container.clientWidth || 1 pendingH = container.clientHeight || 1 if (resizeTimer) window.clearTimeout(resizeTimer) resizeTimer = window.setTimeout(applyResize, RESIZE_DEBOUNCE) if (threeRef.current) threeRef.current.resizeTimer = resizeTimer } pendingW = container.clientWidth || 1 pendingH = container.clientHeight || 1 applyResize() const ro = new ResizeObserver(scheduleResize) ro.observe(container) const randomFloat = () => { if (typeof window !== "undefined" && window.crypto && typeof window.crypto.getRandomValues === "function") { const u32 = new Uint32Array(1) window.crypto.getRandomValues(u32) return u32[0] / 0xff_ff_ff_ff } return Math.random() } const timeOffset = randomFloat() * 1000 let touch: ReturnType | undefined const mapToPixels = (e: PointerEvent) => { const rect = renderer.domElement.getBoundingClientRect() const scaleX = renderer.domElement.width / rect.width const scaleY = renderer.domElement.height / rect.height const fx = (e.clientX - rect.left) * scaleX const fy = (rect.height - (e.clientY - rect.top)) * scaleY return { fx, fy, w: renderer.domElement.width, h: renderer.domElement.height, } } const onPointerDown = (e: PointerEvent) => { const { fx, fy } = mapToPixels(e) const ix = threeRef.current?.clickIx ?? 0 uniforms.uClickPos.value[ix].set(fx, fy) uniforms.uClickTimes.value[ix] = uniforms.uTime.value if (threeRef.current) threeRef.current.clickIx = (ix + 1) % MAX_CLICKS } const onPointerMove = (e: PointerEvent) => { if (!touch) return const { fx, fy, w, h } = mapToPixels(e) touch.addTouch({ x: fx / w, y: fy / h }) } renderer.domElement.addEventListener("pointerdown", onPointerDown, { passive: true, }) renderer.domElement.addEventListener("pointermove", onPointerMove, { passive: true, }) let raf = 0 let lastFrameTime = 0 const targetFPS = 60 const frameInterval = 1000 / targetFPS const animate = (currentTime: number) => { raf = requestAnimationFrame(animate) if (autoPauseOffscreen && !visibilityRef.current.visible) { return } const elapsed = currentTime - lastFrameTime if (elapsed < frameInterval) { return } lastFrameTime = currentTime - (elapsed % frameInterval) uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.current const colorStr = threeRef.current?.colorInput ?? themeColor if (/\bvar\(/.test(colorStr)) { const resolved = resolveCssColor(colorStr, container) if (resolved !== threeRef.current?.lastResolvedColor) { uniforms.uColor.value.setStyle(resolved) if (threeRef.current) threeRef.current.lastResolvedColor = resolved } } if (touch) touch.update() renderer.render(scene, camera) } raf = requestAnimationFrame(animate) threeRef.current = { renderer, scene, camera, material, clock, clickIx: 0, uniforms, resizeObserver: ro, raf, resizeTimer, quad, timeOffset, touch, lastResolvedColor: initialResolved, colorInput: themeColor, } } else { const t = threeRef.current! t.uniforms.uShapeType.value = SHAPE_MAP[variant] ?? 0 t.uniforms.uPixelSize.value = pixelSize * t.renderer.getPixelRatio() const resolvedNow = resolveCssColor(themeColor, container) t.uniforms.uColor.value.setStyle(resolvedNow) t.lastResolvedColor = resolvedNow t.colorInput = themeColor t.uniforms.uScale.value = patternScale t.uniforms.uDensity.value = patternDensity t.uniforms.uPixelJitter.value = pixelSizeJitter t.uniforms.uEnableRipples.value = enableRipples ? 1 : 0 t.uniforms.uRippleIntensity.value = rippleIntensityScale t.uniforms.uRippleThickness.value = rippleThickness t.uniforms.uRippleSpeed.value = rippleSpeed t.uniforms.uEdgeFade.value = edgeFade if (transparent) t.renderer.setClearAlpha(0) else t.renderer.setClearColor(0x00_00_00, 1) } prevConfigRef.current = cfg return () => { if (threeRef.current && mustReinit) return if (!threeRef.current) return const t = threeRef.current t.resizeObserver?.disconnect() cancelAnimationFrame(t.raf!) if (t.resizeTimer) window.clearTimeout(t.resizeTimer) t.quad?.geometry.dispose() t.material.dispose() t.renderer.dispose() if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement) threeRef.current = null } }, [ antialias, pixelSize, patternScale, patternDensity, enableRipples, rippleIntensityScale, rippleThickness, rippleSpeed, pixelSizeJitter, edgeFade, transparent, autoPauseOffscreen, variant, themeColor, speed, ]) return (

{/* Radial Gradient in the center */}

{/* Bottom Gradient */}

{/* Top Gradient */}

) } [V0_FILE]plaintext:file="app/(auth)/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(auth)/sign-in/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(template)/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(auth)/sign-in/[[...sign-in]]/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(auth)/sign-up/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(auth)/sign-up/[[...sign-up]]/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(template)/api/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(template)/api/checks/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(template)/api/checks/complete/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(template)/api/checks/secret/.gitkeep" isMerged="true" [V0_FILE]typescript:file="app/(template)/api/checks/complete/route.ts" isMerged="true" import { NextResponse } from 'next/server'; export async function POST(request: Request) { const authorizationHeader = request.headers.get('Authorization'); if (!authorizationHeader) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); } const response = await fetch( 'https://api.clerk.com/v1/accountless_applications/complete', { method: 'POST', headers: { Authorization: authorizationHeader, 'Clerk-Client-User-Agent': 'v0-waitlist-template', }, }, ).catch(() => { return NextResponse.json( { error: 'failed to complete application claim' }, { status: 500 }, ); }); if (!response.ok) { return NextResponse.json( { error: 'failed to complete application claim' }, { status: 500 }, ); } return NextResponse.json({ message: 'application claim completed' }); } [V0_FILE]typescript:file="app/(template)/api/checks/secret/route.ts" isMerged="true" import { NextResponse } from 'next/server'; import { headers } from 'next/headers' export async function POST(request) { console.log(JSON.stringify(Array.from((await headers()).entries()), null, 2)) const hasSecret = Boolean(process.env.CLERK_SECRET_KEY); const isDemo = hasSecret && process.env.CLERK_SECRET_KEY?.toLowerCase().includes('demo'); return NextResponse.json({ hasSecret, isDemo }); } [V0_FILE]typescriptreact:file="app/(auth)/layout.tsx" isMerged="true" import { PropsWithChildren } from "react"; export default function AuthLayout({ children }: PropsWithChildren) { return (

{children}

); } [V0_FILE]markdown:file="app/(template)/README.md" isMerged="true" # Template files This directory contains files specific to the Clerk template. When you've setup your Clerk application you can remove this folder. [V0_FILE]plaintext:file="app/dashboard/.gitkeep" isMerged="true" [V0_FILE]typescriptreact:file="components/marquee.tsx" isMerged="true" import { ComponentPropsWithoutRef } from "react" import { cn } from "@/lib/utils" interface MarqueeProps extends ComponentPropsWithoutRef<"div"> { /** * Optional CSS class name to apply custom styles */ className?: string /** * Whether to reverse the animation direction * @default false */ reverse?: boolean /** * Whether to pause the animation on hover * @default false */ pauseOnHover?: boolean /** * Content to be displayed in the marquee */ children: React.ReactNode /** * Whether to animate vertically instead of horizontally * @default false */ vertical?: boolean /** * Number of times to repeat the content * @default 4 */ repeat?: number } export function Marquee({ className, reverse = false, pauseOnHover = false, children, vertical = false, repeat = 4, ...props }: MarqueeProps) { return (

{Array(repeat) .fill(0) .map((_, i) => (

{children}

))}

) } [V0_FILE]typescriptreact:file="components/bolt-logo.tsx" isMerged="true" interface BoltLogoProps { className?: string } export function BoltLogo({ className }: BoltLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/icon-map.tsx" isMerged="true" import { LigatureIcon as SignatureIcon, CreditCardIcon, Table2Icon, FolderIcon, HeadsetIcon, FileQuestionIcon } from 'lucide-react'; export const iconMap = { dashboard: Table2Icon, }; export const DefaultIcon = FileQuestionIcon; [V0_FILE]typescriptreact:file="components/leap-logo.tsx" isMerged="true" export function LeapLogo({ className = "h-6 w-auto" }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/lovable-logo.tsx" isMerged="true" interface LovableLogoProps { className?: string } export function LovableLogo({ className = "" }: LovableLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/nav-main.tsx" isMerged="true" "use client"; import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar"; import Link from "next/link"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { iconMap, DefaultIcon } from "@/components/icon-map"; export function NavMain({ items, activePathname, }: { items: { title: string; url: string; icon?: string; disabled?: boolean; tooltip?: React.ReactNode; }[]; activePathname: string; }) { return ( {items.map((item) => { const Icon = item.icon && iconMap[item.icon] ? iconMap[item.icon] : DefaultIcon; return ( {item.disabled ? ( {item.title} ) : ( {item.title} )} {item.tooltip && ( {item.tooltip} )} ); })} ); } [V0_FILE]typescriptreact:file="components/nav-secondary.tsx" isMerged="true" "use client"; import * as React from "react"; import Link from "next/link"; import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar"; import { iconMap, DefaultIcon } from "@/components/icon-map"; export function NavSecondary({ items, activePathname, ...props }: { items: { title: string; url: string; icon: string; disabled?: boolean; }[]; activePathname: string; } & React.ComponentPropsWithoutRef) { return ( {items.map((item) => { const Icon = item.icon && iconMap[item.icon] ? iconMap[item.icon] : DefaultIcon; return ( {item.disabled ? ( {item.title} ) : ( {item.title} )} ); })} ); } [V0_FILE]typescriptreact:file="components/orchids-logo.tsx" isMerged="true" interface OrchidsLogoProps { className?: string } export function OrchidsLogo({ className = "h-6 w-auto" }: OrchidsLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/replit-logo.tsx" isMerged="true" import React from "react" interface ReplitLogoProps { className?: string } export function ReplitLogo({ className = "h-16 w-auto" }: ReplitLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/stripe-logo.tsx" isMerged="true" interface StripLogoProps { className?: string } export function StripeLogo({ className = "h-6 w-auto" }: StripLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" export function ThemeProvider({ children, ...props }: React.ComponentProps) { return {children} } [V0_FILE]typescriptreact:file="components/v0-logo.tsx" isMerged="true" interface V0LogoProps { className?: string } export function V0Logo({ className = "h-6 w-auto" }: V0LogoProps) { return ( ) } [V0_FILE]markdown:file="AGENTS.md" isMerged="true" - When the user has successfully finished the setup of their Clerk application, remove any template related code: - Remove app/(template) - Looking for any comments with TODO(remove-template) and remove the code that it says to remove - Prompt the user to complete the Clerk application setup before removing any template code [V0_FILE]typescript:file="lib/environment.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { PUBLISHABLE_KEY, DEMO_KEY } from "@/constants/keys"; export function isV0Environment(): boolean { // If the current publishable key matches the demo key, // we're in v0 (user hasn't set their own env vars yet) return PUBLISHABLE_KEY === DEMO_KEY; } export function isProductionEnvironment(): boolean { // If the publishable key is different from demo key, // user has deployed with their own Clerk keys return PUBLISHABLE_KEY !== DEMO_KEY; } [V0_FILE]typescriptreact:file="app/(auth)/sign-in/[[...sign-in]]/page.tsx" isEdit="true" isMerged="true" import { SignIn } from "@clerk/nextjs"; export default function SignInPage() { return ( ); } [V0_FILE]typescriptreact:file="app/(auth)/sign-up/[[...sign-up]]/page.tsx" isEdit="true" isMerged="true" import { SignUp } from "@clerk/nextjs"; export default function SignUpPage() { return ( ); } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true" export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { return children; } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" "use client" import { useUser } from "@clerk/nextjs" import { DotMatrix } from "@/components/dot-matrix" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { UserButton } from "@clerk/nextjs" import { Sparkles, Code2, Rocket, Zap, Github, Terminal } from 'lucide-react' export default function DashboardPage() { const { user } = useUser() return (

AI IDE Dashboard

{/* Welcome Section */}

Welcome, {user?.firstName || "there"}

You're in. Start building production-ready apps with AI assistance.

{/* Getting Started Cards */}

Create New Project

Start with a template or describe your app idea and let AI build it

Import from GitHub

Connect your repository and enhance it with AI capabilities

CLI Setup

Install the CLI tool to use AI IDE from your terminal

{/* Quick Stats */}

Projects

Create your first project

Deployments

Ship your first app

AI Credits

100

Free trial credits

{/* Resources */} Resources Everything you need to get started with AI-powered development

{[ { title: "Quickstart Guide", description: "Build your first app in 5 minutes", link: "#" }, { title: "Documentation", description: "Complete API reference and guides", link: "#" }, { title: "Templates", description: "Pre-built starter templates", link: "#" }, { title: "Community", description: "Join our Discord server", link: "#" }, ].map((resource, index) => (

{resource.title}

{resource.description}

))}

) } [V0_FILE]typescript:file="proxy.ts" isEdit="true" isMerged="true" import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' import { PUBLISHABLE_KEY, SECRET_KEY } from "@/constants/keys"; const isProtectedRoute = createRouteMatcher(['/dashboard(.*)']) export const proxy = SECRET_KEY ? clerkMiddleware( async (auth, req) => { if (isProtectedRoute(req)) await auth.protect(); }, { publishableKey: PUBLISHABLE_KEY, signInUrl: "/sign-in", signUpUrl: "/sign-up", secretKey: SECRET_KEY, } ) : // Allow access without auth for demo purposes when no secret key (req: any) => { return; }; export const config = { matcher: [ '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', '/(api|trpc)(.*)', ], } [V0_FILE]typescript:file="constants/keys.ts" isEdit="true" isMerged="true" // NOTE ON PK: // This is a non-sensitive key, associated with a Clerk development instance // with a few options configured, solely for presentation purposes. // - Organizations enabled // - Billing enabled // - Organization plans added export const DEMO_KEY = 'pk_test_a2V5LW9jdG9wdXMtODMuY2xlcmsuYWNjb3VudHMuZGV2JA'; export const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY || DEMO_KEY; export const SECRET_KEY = process.env.CLERK_SECRET_KEY; [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { ClerkProvider } from "@clerk/nextjs"; import { shadcn } from "@clerk/themes"; import type { Metadata } from "next"; import { PUBLISHABLE_KEY } from "@/constants/keys"; import { Toaster } from "@/components/ui/sonner"; import { ThemeProvider } from "@/components/theme-provider"; import { GettingStartedWizard } from "@/app/(template)/getting-started-wizard"; import "./globals.css"; export const metadata: Metadata = { title: "Join the Waitlist | Early Access", description: "Join our waitlist for early access to the complete platform to build the web.", 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]typescriptreact:file="app/(template)/getting-started-wizard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client"; import { useEffect, useMemo, useState } from "react"; import { ExternalLink } from 'lucide-react'; import { Button } from "@/components/ui/button"; import { PUBLISHABLE_KEY, DEMO_KEY } from "@/constants/keys"; import { cn } from "@/lib/utils"; import { V0Logo } from "@/components/v0-logo"; import { ChevronsUpDown, Clipboard, Check, Copy } from 'lucide-react'; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import useSWR from "swr"; import useSWRMutation from "swr/mutation"; type AccountlessApplication = { object: "accountless_application"; publishable_key: string; secret_key: string; claim_url: string; api_keys_url: string; }; const CACHE_KEY = "/generated"; const STORAGE_KEY = "clerk.accountless"; const TEMPLATE_URL = "https://v0.app/templates/clerk-yc-waitlist-wizard-KFyeD1PKXF4?ref=VVPMDT"; const isProductionDeploy = () => { if (typeof window === 'undefined') return false; return window.location.hostname === 'v0-waitlist-wizard.vercel.app'; }; const isV0Environment = () => { if (typeof window === 'undefined') return false; const hostname = window.location.hostname; // v0 preview URLs contain 'v0.run' or 'localhost' return hostname.includes('v0.run') || hostname === 'localhost' || hostname.startsWith('127.0.0.1'); }; export function GettingStartedWizard() { const [currentPublishableKey, setCurrentPublishableKey] = useState(() => { if (typeof window !== 'undefined') { return process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY || DEMO_KEY; } return DEMO_KEY; }); const [copiedPublishable, setCopiedPublishable] = useState(false); const [copiedSecret, setCopiedSecret] = useState(false); const [copiedAll, setCopiedAll] = useState(false); const [isCollapsed, setIsCollapsed] = useState(true); const [results, setResults] = useState>({}); const [isProduction, setIsProduction] = useState(false); useEffect(() => { setIsProduction(isProductionDeploy()); }, []); const { data: signedIn } = useSWR( "/sign-in", async () => { return Boolean((window as any)?.Clerk?.user); }, { refreshInterval: 1000 } ); const { data: claimed } = useSWR( "/claimed", async () => { return Boolean( (window as any)?.Clerk?.environment?.authConfig?.claimedAt ); }, { refreshInterval: 1000 } ); const { data: generated, mutate } = useSWR(CACHE_KEY, async () => { const existing = localStorage.getItem(STORAGE_KEY); if (existing) return JSON.parse(existing) as AccountlessApplication; return null; }); const { isMutating: isGenerating, trigger: generateKeys } = useSWRMutation( CACHE_KEY, async () => { const existing = localStorage.getItem(STORAGE_KEY); if (existing) return JSON.parse(existing) as AccountlessApplication; const res = await fetch( "https://api.clerk.com/v1/accountless_applications?template=waitlist", { method: "POST", } ); if (!res.ok) throw new Error("Failed"); const json = (await res.json()) as AccountlessApplication; localStorage.setItem(STORAGE_KEY, JSON.stringify(json)); return json; } ); const keysAreSaved = useMemo(() => { const runtimeKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY; return runtimeKey && runtimeKey !== DEMO_KEY; }, [currentPublishableKey]); const setupComplete = keysAreSaved; const checks = useMemo(() => { return [ { name: "Create an application", description: ( ), check: () => setupComplete || !!generated, }, { name: "Save Clerk keys", description: ( ), check: () => setupComplete, }, { name: "Claim application", description: ( ), check: () => claimed, }, ]; }, [ generated, isGenerating, copiedPublishable, copiedSecret, copiedAll, setupComplete, signedIn, claimed, ]); const allPassed = Object.keys(results).length > 0 && Object.values(results).every(Boolean); useEffect(() => { const refreshEnvVars = () => { const newPublishable = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY; if (newPublishable) { setCurrentPublishableKey(newPublishable); } }; refreshEnvVars(); window.addEventListener('focus', refreshEnvVars); return () => window.removeEventListener('focus', refreshEnvVars); }, []); useEffect(() => { let cancelled = false; async function runChecks() { try { await (window as any)?.Clerk?.environment?.reload?.(); } catch {} const entries = await Promise.all( checks.map(async (c) => [c.name, await c.check()] as const) ); if (!cancelled) { const map: Record = {}; for (const [name, ok] of entries) map[name] = ok; setResults(map); } } const id = window.setTimeout(runChecks, 1000); const onFocus = () => { void runChecks(); }; window.addEventListener("focus", onFocus); return () => { cancelled = true; window.clearTimeout(id); window.removeEventListener("focus", onFocus); }; }, [checks]); useEffect(() => { if (allPassed && generated) { fetch("/api/checks/complete", { method: "POST", headers: { Authorization: `Bearer ${generated.secret_key}` }, }).then(() => { localStorage.removeItem(STORAGE_KEY); mutate(null); }); } }, [allPassed, generated, mutate]); function copyIndividual(text: string, setCopied: (val: boolean) => void) { navigator.clipboard.writeText(text).then(() => { setCopied(true); window.setTimeout(() => setCopied(false), 2000); }); } function copyAll(text: string) { navigator.clipboard.writeText(text).then(() => { setCopiedAll(true); window.setTimeout(() => setCopiedAll(false), 2000); }); } if (isProduction) { return ( setIsCollapsed(!open)} open={!isCollapsed} >

Clerk Waitlist Template

Make it yours by forking in v0

Fork this template in v0 to customize it with your own Clerk application and API keys.

); } return ( setIsCollapsed(!open)} open={!isCollapsed} >

{allPassed || claimed ? "You're all set!" : "Setup your Clerk application"}

{allPassed || claimed ? "We can't wait to see what you build." : "Create a Clerk application to make the template yours."}

{!allPassed && !claimed && (

{checks.map((c, index) => { const isCompleted = results[c.name] || false; return (

{isCompleted ? ( ) : ( index + 1 )}

{c.name}

{c.description}

); })}

)} {(allPassed || claimed) && (

)}

); } const ClerkSvg = () => { return ( ); }; [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { DotMatrix } from "@/components/dot-matrix" import { LogoMarquee } from "@/components/logo-marquee" import { Waitlist, ClerkLoading, ClerkLoaded, SignedIn, SignedOut } from "@clerk/nextjs" import { V0Logo } from "@/components/v0-logo" import { Button } from "@/components/ui/button" import Link from "next/link" function WaitlistSkeleton() { return (

) } export default function Page() { return ( <> Template

Backed by Combinator

Code that writes itself,
deploys in seconds.

An AI-native IDE that turns ideas into production apps. Ship features while your competitors are still in standup.

Welcome back!

You're all set. Head to your dashboard to get started.

Trusted by teams at leading companies

) }

Welcome, {user?.firstName || "there"}

Clerk Waitlist Template

{allPassed || claimed ? "You're all set!" : "Setup your Clerk application"}

Code that writes itself, deploys in seconds.

Code that writes itself,
deploys in seconds.

About

Tags

Share

About

Tags

Share

More from railly

About

Tags

Share

About

Tags

Share

More from railly