[V0_FILE]typescriptreact:file="app/signup/page.tsx" isMerged="true" import { WireframeSignup } from "@/components/wireframe-signup" export default function SignupPage() { return } [V0_FILE]typescriptreact:file="app/wizard/page.tsx" isMerged="true" import { WireframeWizard } from "@/components/wireframe-wizard" export default function WizardPage() { return } [V0_FILE]typescriptreact:file="components/wireframe-signup.tsx" isMerged="true" import Link from "next/link" import { WireframeBox } from "./wireframe-box" import { WireframeInput } from "./wireframe-input" import { WireframeButton } from "./wireframe-button" export function WireframeSignup() { return (

{/* Mobile Frame */}

{/* Status Bar Sketch */}

9:41

{/* Header */}

Headspace Partner

Registro de Empresa

{/* Form Fields */}

{/* Company Name */} {/* Logo Upload */}

Subir Logo

{/* Description */}

{/* Submit Button */} Crear Cuenta

{/* Back Link */} ← Volver

) } [V0_FILE]typescriptreact:file="components/wireframe-input.tsx" isMerged="true" interface WireframeInputProps { placeholder: string } export function WireframeInput({ placeholder }: WireframeInputProps) { return (

{placeholder}

) } [V0_FILE]typescriptreact:file="components/wireframe-button.tsx" isMerged="true" import type React from "react" interface WireframeButtonProps { children: React.ReactNode } export function WireframeButton({ children }: WireframeButtonProps) { return ( ) } [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.3", "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" }, "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="app/dashboard/page.tsx" isMerged="true" import { WireframeDashboard } from "@/components/wireframe-dashboard" export default function DashboardPage() { return } [V0_FILE]typescriptreact:file="app/edit-resource/page.tsx" isMerged="true" import { WireframeEditResource } from "@/components/wireframe-edit-resource" export default function EditResourcePage() { return } [V0_FILE]typescriptreact:file="components/wireframe-edit-resource.tsx" isMerged="true" "use client" import { useState } from "react" import { WireframeBox } from "./wireframe-box" import { WireframeInput } from "./wireframe-input" import { WireframeButton } from "./wireframe-button" import { ArrowLeft, ImageIcon } from "lucide-react" import Link from "next/link" export function WireframeEditResource() { const [isPublished, setIsPublished] = useState(false) return (

{/* Header */}

Editar Recurso

{/* Content */}

{/* Thumbnail Preview */}

Miniatura

Toca para subir

{/* Title */}

Título

{/* Description */}

Descripción

Escribe una descripción...

{/* Category/Folder */}

Carpeta

Wellness Content

{/* Draft/Published Toggle */}

Estado

{isPublished ? "Publicado y visible" : "Borrador privado"}

{/* Toggle Switch */}

{/* Labels */}

DRAFT PUBLISHED

{/* Tags */}

Etiquetas

#meditación

#bienestar

{/* Footer Actions */}

Guardar Cambios

) } [V0_FILE]typescriptreact:file="components/wireframe-wizard.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { WireframeBox } from "./wireframe-box" import { WireframeInput } from "./wireframe-input" export function WireframeWizard() { const [step, setStep] = useState(1) // Iniciar en paso 1 const totalSteps = 4 // Ahora son 4 pasos en total return (

{/* Mobile Frame */}

{/* Status Bar Sketch */}

9:41

{/* Header */}

Crear Carpeta de Contenido

{/* Progress Indicator */}

{[1, 2, 3, 4].map((s) => (

{s < step ? "✓" : s}

))}

{[1, 2, 3, 4].map((s) => (

))}

{/* Step Content */}

{step === 1 && ( <>

Paso 1: Información Básica

Seleccionar... ▼

)} {step === 2 && ( <>

Paso 2: Contenido

{["Videos", "Artículos", "Meditaciones"].map((item) => (

{item}

))}

)} {step === 3 && ( <>

Paso 3: Sube tu primer recurso

{/* Título del Recurso */} {/* Upload Area */}

Subir Archivo (Video/Audio)

{/* Descripción */}

</WireframeBox>
            </>
          )}

{step === 4 && (
            <>
              <div className="text-center mb-4">
                <h2 className="font-semibold text-lg">Paso 4: Confirmación</h2>
              </div>

{/* Summary Box */}
              <div className="border-2 border-black rounded p-4 bg-white space-y-4">
                <div className="flex justify-between items-center pb-3 border-b border-black">
                  <span className="font-semibold">Carpeta:</span>
                  <span className="text-sm">Bienestar 2025</span>
                </div>
                <div className="flex justify-between items-center pb-3 border-b border-black">
                  <span className="font-semibold">Categoría:</span>
                  <span className="text-sm">Salud Mental</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="font-semibold">Tipos:</span>
                  <span className="text-sm">Videos, Artículos</span>
                </div>
              </div>
            </>
          )}
        </div>

{/* Navigation Buttons */}
        <div className="flex gap-3 mb-4">
          {step > 1 && (
            <button
              onClick={() => setStep(step - 1)}
              className="flex-1 border-2 border-black py-3 rounded font-semibold hover:bg-gray-100 transition-colors"
            >
              Atrás
            </button>
          )}
          {step < totalSteps ? (
            <button
              onClick={() => setStep(step + 1)}
              className="flex-1 bg-black text-white border-2 border-black py-3 rounded font-semibold shadow-[3px_3px_0_0_rgba(0,0,0,1)] active:shadow-none active:translate-x-[3px] active:translate-y-[3px] transition-all"
            >
              Siguiente
            </button>
          ) : (
            <button className="flex-1 bg-black text-white border-2 border-black py-3 rounded font-semibold shadow-[3px_3px_0_0_rgba(0,0,0,1)] active:shadow-none active:translate-x-[3px] active:translate-y-[3px] transition-all">
              Finalizar
            </button>
          )}
        </div>

<div className="text-center">
          <button className="text-sm underline hover:no-underline">
            {step === 4 ? "← Volver" : "Guardar como borrador"}
          </button>
        </div>

{/* Back Link */}
        {step < 4 && (
          <Link href="/" className="block text-center mt-6 text-sm underline hover:no-underline">
            ← Volver
          </Link>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/wireframe-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { WireframeBox } from "./wireframe-box"
import { ChevronRight, Plus, Upload, FolderPlus, Menu, User, Home, BarChart3 } from "lucide-react"

export function WireframeDashboard() {
  const [showBottomSheet, setShowBottomSheet] = useState(false)

return (
    <div className="min-h-screen bg-white flex items-center justify-center p-6">
      <WireframeBox className="w-full max-w-sm h-[700px] relative flex flex-col overflow-hidden">
        {/* Header */}
        <div className="p-4 border-b-2 border-black">
          <div className="flex items-center justify-between mb-1">
            <button className="w-8 h-8 border-2 border-black flex items-center justify-center hover:bg-gray-100 transition-colors">
              <Menu className="w-5 h-5" />
            </button>
            <button className="w-8 h-8 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 transition-colors">
              <User className="w-4 h-4" />
            </button>
          </div>
          <h1 className="text-xl font-bold mt-4">Content Dashboard</h1>
          <p className="text-sm text-gray-600 mt-1">Gestiona tu contenido</p>
        </div>

{/* Content List */}
        <div className="flex-1 overflow-auto p-4 space-y-4 pb-24">
          {/* Folder 1 */}
          <div className="border-2 border-black p-3 rounded">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 border-2 border-black flex items-center justify-center">
                  <span className="text-xs font-bold">📁</span>
                </div>
                <div>
                  <p className="font-semibold text-sm">Marketing Q1</p>
                  <p className="text-xs text-gray-600">12 items</p>
                </div>
              </div>
              <ChevronRight className="w-5 h-5" />
            </div>

{/* Media items in folder */}
            <div className="space-y-2 ml-12">
              <div className="border border-black p-2 rounded flex items-center gap-2">
                <div className="w-8 h-8 border border-black" />
                <div className="flex-1">
                  <p className="text-xs font-medium">video_intro.mp4</p>
                  <p className="text-xs text-gray-500">2.4 MB</p>
                </div>
              </div>
              <div className="border border-black p-2 rounded flex items-center gap-2">
                <div className="w-8 h-8 border border-black" />
                <div className="flex-1">
                  <p className="text-xs font-medium">audio_podcast.mp3</p>
                  <p className="text-xs text-gray-500">5.1 MB</p>
                </div>
              </div>
            </div>
          </div>

{/* Folder 2 */}
          <div className="border-2 border-black p-3 rounded">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 border-2 border-black flex items-center justify-center">
                  <span className="text-xs font-bold">📁</span>
                </div>
                <div>
                  <p className="font-semibold text-sm">Wellness Content</p>
                  <p className="text-xs text-gray-600">8 items</p>
                </div>
              </div>
              <ChevronRight className="w-5 h-5" />
            </div>
          </div>

{/* Standalone media items */}
          <div className="space-y-2">
            <p className="text-xs font-semibold text-gray-600 uppercase">Sin carpeta</p>
            <div className="border-2 border-black p-3 rounded flex items-center gap-3">
              <div className="w-12 h-12 border-2 border-black" />
              <div className="flex-1">
                <p className="text-sm font-medium">presentation.mp4</p>
                <p className="text-xs text-gray-500">12.3 MB • Video</p>
              </div>
            </div>
            <div className="border-2 border-black p-3 rounded flex items-center gap-3">
              <div className="w-12 h-12 border-2 border-black" />
              <div className="flex-1">
                <p className="text-sm font-medium">meditation.mp3</p>
                <p className="text-xs text-gray-500">3.7 MB • Audio</p>
              </div>
            </div>
          </div>
        </div>

{/* Bottom Navigation Bar */}
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-white border-t-2 border-black flex items-center justify-around px-8 z-10">
          <button className="flex flex-col items-center gap-1 group">
            <div className="w-10 h-10 border-2 border-black rounded flex items-center justify-center bg-black transition-colors">
              <Home className="w-5 h-5 text-white" />
            </div>
          </button>

{/* FAB Button */}
        <button
          onClick={() => setShowBottomSheet(!showBottomSheet)}
          className="absolute bottom-20 right-4 w-14 h-14 rounded-full bg-black border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all flex items-center justify-center z-20"
        >
          <Plus className="w-8 h-8 text-white stroke-[3]" />
        </button>

{/* Bottom Sheet */}
        {showBottomSheet && (
          <div className="absolute inset-0 bg-black/20 flex items-end" onClick={() => setShowBottomSheet(false)}>
            <div
              className="w-full bg-white border-t-4 border-black p-6 rounded-t-2xl"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="w-12 h-1 bg-gray-300 rounded-full mx-auto mb-6" />

<h3 className="text-lg font-bold mb-4">Agregar nuevo</h3>

<div className="space-y-3">
                <button className="w-full p-4 border-2 border-black rounded-lg flex items-center gap-3 hover:bg-gray-50 transition-colors">
                  <div className="w-10 h-10 border-2 border-black rounded flex items-center justify-center">
                    <Upload className="w-5 h-5" />
                  </div>
                  <div className="text-left">
                    <p className="font-semibold">Upload Resource</p>
                    <p className="text-sm text-gray-600">Subir video o audio</p>
                  </div>
                </button>

<button className="w-full p-4 border-2 border-black rounded-lg flex items-center gap-3 hover:bg-gray-50 transition-colors">
                  <div className="w-10 h-10 border-2 border-black rounded flex items-center justify-center">
                    <FolderPlus className="w-5 h-5" />
                  </div>
                  <div className="text-left">
                    <p className="font-semibold">New Folder</p>
                    <p className="text-sm text-gray-600">Crear nueva carpeta</p>
                  </div>
                </button>
              </div>

<button
                onClick={() => setShowBottomSheet(false)}
                className="w-full mt-4 p-3 border-2 border-black rounded-lg font-semibold hover:bg-gray-50 transition-colors"
              >
                Cancelar
              </button>
            </div>
          </div>
        )}
      </WireframeBox>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/success/page.tsx" isMerged="true"
import WireframeSuccess from "@/components/wireframe-success"

export default function SuccessPage() {
  return (
    <div className="min-h-screen bg-neutral-50 flex items-center justify-center p-4">
      <div className="space-y-8">
        <WireframeSuccess type="published" onBack="/dashboard" />

<WireframeSuccess type="saved" onBack="/dashboard" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/wireframe-success.tsx" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
import WireframeBox from "./wireframe-box"

interface WireframeSuccessProps {
  type: "published" | "saved"
  onBack?: string
}

export default function WireframeSuccess({ type, onBack = "/dashboard" }: WireframeSuccessProps) {
  const router = useRouter()

const messages = {
    published: "¡Recurso publicado con éxito!",
    saved: "¡Cambios guardados correctamente!",
  }

return (
    <WireframeBox className="w-full max-w-sm mx-auto">
      {/* Mobile Screen Container */}
      <div className="relative w-full max-w-[375px] h-[667px] mx-auto border-[6px] border-black rounded-[40px] bg-white overflow-hidden shadow-[8px_8px_0px_rgba(0,0,0,1)]">
        {/* Status Bar */}
        <div className="flex justify-between items-center px-6 pt-4 pb-2">
          <span className="text-sm font-medium">9:41</span>
          <div className="flex gap-1">
            <div className="w-4 h-4 border-2 border-black rounded-sm" />
            <div className="w-4 h-4 border-2 border-black rounded-sm" />
            <div className="w-4 h-4 border-2 border-black rounded-sm" />
          </div>
        </div>

{/* Content Area - Centered Modal */}
        <div className="flex items-center justify-center h-[calc(100%-60px)] px-6">
          <div className="w-full max-w-[318px] bg-white border-4 border-black rounded-lg p-8 shadow-[4px_4px_0px_rgba(0,0,0,1)]">
            {/* Success Icon */}
            <div className="flex justify-center mb-6">
              <div className="w-16 h-16 border-4 border-black rounded-full flex items-center justify-center">
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="3"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="w-10 h-10"
                >
                  <polyline points="20 6 9 17 4 12" />
                </svg>
              </div>
            </div>

{/* Success Message */}
            <h2 className="text-xl font-bold text-center mb-8 leading-tight">{messages[type]}</h2>

{/* Action Button */}
            <button
              onClick={() => router.push(onBack)}
              className="w-full bg-black text-white py-4 px-6 border-4 border-black rounded-full font-bold text-base hover:bg-neutral-800 transition-colors"
            >
              Volver al dashboard
            </button>
          </div>
        </div>
      </div>
    </WireframeBox>
  )
}
[V0_FILE]typescriptreact:file="components/wireframe-box.tsx" isEdit="true" isMerged="true"
import type React from "react"

interface WireframeBoxProps {
  label?: string
  children: React.ReactNode
  className?: string
}

export function WireframeBox({ label, children, className = "" }: WireframeBoxProps) {
  if (label) {
    return (
      <div className={`space-y-2 ${className}`}>
        <label className="text-sm font-semibold block">{label}</label>
        {children}
      </div>
    )
  }

return <div className={className}>{children}</div>
}

export default WireframeBox
[V0_FILE]typescriptreact:file="app/account-created/page.tsx" isMerged="true"
export default function AccountCreatedPage() {
  return (
    <div className="min-h-screen bg-zinc-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <WireframeAccountCreated />
      </div>
    </div>
  )
}

function WireframeAccountCreated() {
  return (
    <div className="relative bg-white border-[3px] border-black rounded-[40px] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden h-[700px]">
      {/* Status Bar */}
      <div className="flex items-center justify-between px-6 pt-4 pb-4">
        <span className="text-sm font-mono">9:41</span>
        <div className="flex gap-1">
          <div className="w-5 h-5 border-2 border-black rounded-full" />
          <div className="w-5 h-5 border-2 border-black rounded-full" />
          <div className="w-5 h-5 border-2 border-black rounded-full" />
        </div>
      </div>

{/* Content Area */}
      <div className="flex flex-col items-center justify-center px-8 pt-24">
        {/* Success Icon */}
        <div className="w-32 h-32 border-[4px] border-black rounded-full flex items-center justify-center mb-8">
          <svg className="w-16 h-16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>

{/* Headline */}
        <h1 className="text-2xl font-bold text-center mb-4">¡Cuenta creada con éxito!</h1>

{/* Description */}
        <p className="text-center text-gray-600 leading-relaxed px-4">
          Bienvenido a Headspace Partner. Ahora, vamos a crear tu primera carpeta y subir contenido.
        </p>
      </div>

{/* Bottom Button */}
      <div className="absolute bottom-8 left-8 right-8">
        <button className="w-full bg-black text-white py-4 px-6 border-[3px] border-black rounded-lg text-lg font-semibold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-all">
          Comenzar
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/splash/page.tsx" isMerged="true"
export default function SplashPage() {
  return (
    <div className="min-h-screen bg-white flex items-center justify-center p-8">
      <div className="w-full max-w-sm mx-auto">
        {/* Mobile Frame */}
        <div
          className="relative bg-white border-[6px] border-black rounded-[48px] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden"
          style={{ height: "700px" }}
        >
          {/* Status Bar */}
          <div className="absolute top-0 left-0 right-0 flex items-center justify-between px-8 py-4 text-sm font-medium">
            <span>9:41</span>
            <div className="flex gap-1">
              <div className="w-5 h-5 rounded-full border-2 border-black" />
              <div className="w-5 h-5 rounded-full border-2 border-black" />
              <div className="w-5 h-5 rounded-full border-2 border-black" />
            </div>
          </div>

{/* Content */}
          <div className="h-full flex flex-col items-center justify-center px-8 pb-20">
            {/* Logo Icon - Simple Air/Wind Symbol */}
            <div className="relative mb-12">
              {/* Outer Circle */}
              <div className="w-32 h-32 rounded-full border-[6px] border-black flex items-center justify-center">
                {/* Wind Lines */}
                <div className="space-y-3">
                  <div className="h-1 w-16 bg-black rounded-full" />
                  <div className="h-1 w-12 bg-black rounded-full ml-4" />
                  <div className="h-1 w-14 bg-black rounded-full ml-2" />
                </div>
              </div>
            </div>

{/* App Name */}
            <h1 className="text-4xl font-bold text-center mb-2">Headspace Air</h1>

{/* Tagline */}
            <p className="text-lg text-gray-600 text-center mb-16">Bienestar empresarial</p>

{/* Loading Indicator */}
            <div className="flex gap-2">
              <div
                className="w-3 h-3 rounded-full border-2 border-black animate-pulse"
                style={{ animationDelay: "0ms" }}
              />
              <div
                className="w-3 h-3 rounded-full border-2 border-black animate-pulse"
                style={{ animationDelay: "200ms" }}
              />
              <div
                className="w-3 h-3 rounded-full border-2 border-black animate-pulse"
                style={{ animationDelay: "400ms" }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"

export default function Home() {
  return (
    <div className="min-h-screen bg-white flex flex-col items-center justify-center p-6 gap-8">
      <div className="text-center mb-8">
        <h1 className="text-2xl font-bold mb-2">Headspace Air</h1>
        <p className="text-muted-foreground">Wireframes de baja fidelidad</p>
      </div>

<div className="flex flex-col gap-6 w-full max-w-md">
        <Link href="/splash" className="p-6 border-2 border-black rounded-lg hover:bg-gray-50 transition-colors">
          <h2 className="text-lg font-semibold mb-2">Pantalla 0: Splash</h2>
          <p className="text-sm text-gray-600">Pantalla inicial de bienvenida</p>
        </Link>

<Link href="/signup" className="p-6 border-2 border-black rounded-lg hover:bg-gray-50 transition-colors">
          <h2 className="text-lg font-semibold mb-2">Pantalla 1: Registro</h2>
          <p className="text-sm text-gray-600">Formulario de registro de empresa</p>
        </Link>

<Link
          href="/account-created"
          className="p-6 border-2 border-black rounded-lg hover:bg-gray-50 transition-colors"
        >
          <h2 className="text-lg font-semibold mb-2">Pantalla 2: Cuenta Creada</h2>
          <p className="text-sm text-gray-600">Confirmación de registro exitoso</p>
        </Link>

<Link href="/wizard" className="p-6 border-2 border-black rounded-lg hover:bg-gray-50 transition-colors">
          <h2 className="text-lg font-semibold mb-2">Pantalla 3: Wizard</h2>
          <p className="text-sm text-gray-600">Asistente para crear carpeta de contenido</p>
        </Link>

<Link href="/dashboard" className="p-6 border-2 border-black rounded-lg hover:bg-gray-50 transition-colors">
          <h2 className="text-lg font-semibold mb-2">Pantalla 4: Dashboard</h2>
          <p className="text-sm text-gray-600">Dashboard de creador de contenido</p>
        </Link>

<Link href="/edit-resource" className="p-6 border-2 border-black rounded-lg hover:bg-gray-50 transition-colors">
          <h2 className="text-lg font-semibold mb-2">Pantalla 5: Edición</h2>
          <p className="text-sm text-gray-600">Pantalla de edición de recurso</p>
        </Link>

<Link href="/success" className="p-6 border-2 border-black rounded-lg hover:bg-gray-50 transition-colors">
          <h2 className="text-lg font-semibold mb-2">Pantalla 6: Confirmación</h2>
          <p className="text-sm text-gray-600">Mensajes de éxito (publicado/guardado)</p>
        </Link>
      </div>
    </div>
  )
}</article></body></html>