114:"ExplicitChatIdProvider" 115:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7c","$8d","$7f","$7e","$8e","$87","$82","$8f","$7d","$85","$90","$80","$91","$92","$84","$89","$93","$8a","$88","$94","$83","$95","$86","$96","$97"],"$114"] 116:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7c","$8d","$7f","$7e","$8e","$87","$82","$8f","$7d","$85","$90","$80","$91","$92","$84","$89","$93","$8a","$88","$94","$83","$95","$86","$96","$97"],"SWRDataProvider"] 118:[] 119:[["b_1XOhDf2zdMk",null],["b_dT8U3lSO8GM",null],["b_Xo9z4D4Z4rY",null]] 11a:[["b_1XOhDf2zdMk",{"templateVersionId":null,"templateCanonId":null}],["b_dT8U3lSO8GM",{"templateVersionId":null,"templateCanonId":null}],["b_Xo9z4D4Z4rY",{"templateVersionId":null,"templateCanonId":null}]] 11b:[["b_fqoaH8xC0JY","$D2025-09-27T14:20:49.850Z"],["b_MKxAR2SgD4j","$D2025-09-27T14:22:42.698Z"],["b_QBFrrpvD23F","$D2025-09-27T14:25:04.526Z"],["b_GMjuBmHdSi6","$D2025-09-27T14:27:09.744Z"],["b_Ot0r0lGnzBr","$D2025-09-27T14:43:05.165Z"],["b_4D8bxNocfoH","$D2025-09-27T14:44:00.430Z"],["b_ZmINHOfwYG1","$D2025-09-27T14:45:49.116Z"],["b_2WHoOoizXW3","$D2025-09-27T14:46:12.685Z"],["b_KM71C8IOgUX","$D2025-09-27T14:47:38.427Z"],["b_zwxAPgJMQPp","$D2025-09-27T14:55:43.673Z"],["b_aUSpaDtaFRZ","$D2025-09-27T15:08:45.275Z"],["b_BIqGaTVPUcN","$D2025-09-27T15:12:39.562Z"],["b_ACxwfs9QKE8","$D2025-09-27T15:14:20.607Z"],["b_gS72Uaw6dtQ","$D2025-09-27T15:15:37.500Z"],["b_iKA7Lqt4Bup","$D2025-09-27T19:08:34.768Z"],["b_cm0L4AV6LOC","$D2025-09-27T19:44:39.908Z"],["b_gmo6tICSKHM","$D2025-09-27T19:46:42.679Z"],["b_kOQDo6JVP7Q","$D2025-09-27T19:47:19.144Z"],["b_A7WBgUkj4Xf","$D2025-09-27T19:50:42.632Z"],["b_QO3oByMDxqi","$D2025-09-27T19:53:17.362Z"],["b_LXGDz7pUUwP","$D2025-09-27T19:56:55.595Z"],["b_Z9wpbr8wN8N","$D2025-09-27T19:57:34.423Z"],["b_UpbsPUpiJt5","$D2025-09-27T19:58:01.030Z"],["b_WWnousY4XGD","$D2025-09-27T20:26:19.457Z"],["b_n5Z3NLIqrAt","$D2025-09-27T20:27:21.296Z"],["b_gpKzpqxcizZ","$D2025-09-27T20:27:29.877Z"],["b_OHP2wGtGA8s","$D2025-09-27T20:28:11.581Z"],["b_xcQ7D3cpFZM","$D2025-09-27T20:42:43.929Z"],["b_JLDAtq7sfpb","$D2025-09-27T20:48:47.884Z"],["b_iHjpkeB9mgr","$D2025-10-20T16:07:35.769Z"],["b_l6GdcNBGhPZ","$D2025-10-20T16:08:23.064Z"],["b_npKBxpYlX0m","$D2025-10-20T16:14:44.114Z"],["b_4ij2p76nd1e","$D2025-10-20T16:16:10.974Z"],["b_BCvTjBjx3qE","$D2025-10-20T16:17:56.962Z"],["b_vqPjZVLSEip","$D2025-10-20T16:18:35.391Z"],["b_IEJ6EERWxww","$D2025-10-20T16:19:36.170Z"],["b_XeIUvesdc7u","$D2025-10-20T16:37:44.360Z"],["b_8rffr6hrGqi","$D2025-10-20T16:38:53.008Z"],["b_ME5hfNnzz78","$D2025-10-20T16:39:38.094Z"],["b_TpIX5qH2O79","$D2025-10-20T16:40:37.446Z"],["b_Q8QY7rjmMd4","$D2025-10-20T16:41:10.322Z"],["b_eZkrrjzlx7z","$D2025-10-20T16:46:22.769Z"],["b_OvqYrjY6E3k","$D2025-10-20T16:47:15.011Z"],["b_p1l1sIXlVIF","$D2025-10-20T16:51:29.097Z"],["b_cm5vtoKnWTb","$D2025-10-20T16:51:43.705Z"],["b_SMc4OfiJQrN","$D2025-10-20T16:55:23.376Z"],["b_eF31nuMr0CN","$D2025-10-20T16:59:12.143Z"],["b_g091IuU7tn2","$D2025-10-20T17:01:00.242Z"],["b_zxy6JtaRq0I","$D2025-10-20T17:04:03.519Z"],["b_dHWwGPBptJI","$D2025-10-20T17:04:23.940Z"],["b_7xJ5kM6nojN","$D2025-10-20T17:04:42.859Z"],["b_wa7OsFUs9vA","$D2025-10-20T17:05:46.753Z"],["b_ynNHucjZHNx","$D2025-10-20T17:08:58.398Z"],["b_4ULRU9XmDRU","$D2025-10-20T17:09:40.575Z"],["b_VU89QktgCVA","$D2025-10-20T17:14:42.482Z"],["b_Bw4TtKhwdjw","$D2025-10-20T17:17:56.375Z"],["b_TNEjhS5AwFh","$D2025-10-20T17:19:36.463Z"],["b_oFo5lQrv1xb","$D2025-10-20T17:58:09.440Z"],["b_jDOiVvBMybR","$D2025-10-20T17:58:32.846Z"],["b_U5xCffxmmPe","$D2025-10-20T18:01:27.344Z"],["b_yTQpiBz4QyJ","$D2025-10-20T18:02:57.045Z"],["b_LZrNdlM72ZQ","$D2025-10-20T18:04:52.596Z"],["b_xPjUOb3vdtz","$D2025-10-20T18:07:51.297Z"],["b_gpBa6IS3fco","$D2025-10-20T18:10:48.680Z"],["b_9FWAOMmclYK","$D2025-10-20T20:55:34.987Z"],["b_yiPgSPfcwgd","$D2025-10-20T20:57:35.482Z"],["b_DjEbItJnBrO","$D2025-10-20T21:11:26.267Z"],["b_4gay1H7zmcN","$D2025-10-20T21:19:55.398Z"],["b_09vZRz0aPQy","$D2025-10-20T21:21:55.886Z"],["b_pYNc1Vj9z08","$D2025-10-20T21:25:16.722Z"],["b_C1mS3wEhvTD","$D2025-10-20T21:26:23.099Z"],["b_tbw2qXWjoIE","$D2025-10-20T21:41:39.342Z"],["b_1XOhDf2zdMk","$D2025-10-20T21:52:44.298Z"],["b_dT8U3lSO8GM","$D2025-10-20T21:54:27.857Z"],["b_sQFiDS5T0oG","$D2025-10-20T22:03:37.087Z"],["b_Xo9z4D4Z4rY","$D2025-10-20T22:13:03.738Z"]] 11c:[["b_1XOhDf2zdMk",false],["b_dT8U3lSO8GM",false],["b_Xo9z4D4Z4rY",false]] 11d:[["b_1XOhDf2zdMk","$undefined"],["b_dT8U3lSO8GM","$undefined"],["b_Xo9z4D4Z4rY","$undefined"]] 11e:[["b_1XOhDf2zdMk",null],["b_dT8U3lSO8GM",null],["b_Xo9z4D4Z4rY",null]] 11f:[["b_1XOhDf2zdMk",true],["b_dT8U3lSO8GM",true],["b_Xo9z4D4Z4rY",true]] 120:[["b_1XOhDf2zdMk",true],["b_dT8U3lSO8GM",true],["b_Xo9z4D4Z4rY",true]] 121:[] 122:T441,The error message is very vague - just "Uncaught error: Uncaught". Looking at the B2C page code, I can see it's a server component (no "use client" directive) but it's using client-side features like Link from next/link which should be fine. However, I notice the page is using several components from lucide-react and shadcn components. The issue might be: - Missing imports - Component compatibility issues - The page might need to be a client component if it's using interactive features Looking more carefully, the code looks syntactically correct. The error might be coming from: - The metadata export in a client component (but this is a server component, so that's fine) - Some issue with the Card or Button components - An issue with the layout wrapping this page Let me check if there are any syntax issues or if we need to make this a client component. Actually, looking at the code, everything seems fine for a server component. The issue might be that the error is not very descriptive. Let me try wrapping the page content more safely and ensure all imports are correct.123:Tafa55,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme to match professional SaaS design inspiration */ --background: oklch(0.08 0 0); /* Deep black background */ --foreground: oklch(0.98 0 0); /* Pure white text */ --card: oklch(0.12 0 0); /* Dark card background */ --card-foreground: oklch(0.98 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.2 280); /* Purple accent for CTAs */ --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.18 0 0); /* Darker secondary */ --secondary-foreground: oklch(0.85 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.65 0 0); /* Muted gray text */ --accent: oklch(0.55 0.15 160); /* Green accent for success states */ --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.2 0 0); /* Subtle borders */ --input: oklch(0.15 0 0); --ring: oklch(0.65 0.2 280); /* Purple ring to match primary */ --chart-1: oklch(0.65 0.2 280); --chart-2: oklch(0.55 0.15 160); --chart-3: oklch(0.7 0.18 50); --chart-4: oklch(0.6 0.2 320); --chart-5: oklch(0.75 0.15 200); --radius: 0.75rem; /* Slightly more rounded */ --sidebar: oklch(0.1 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.2 280); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.65 0.2 280); } .dark { /* Dark mode uses same values as root for consistency */ --background: oklch(0.08 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.2 280); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.85 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.55 0.15 160); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.2 0 0); --input: oklch(0.15 0 0); --ring: oklch(0.65 0.2 280); --chart-1: oklch(0.65 0.2 280); --chart-2: oklch(0.55 0.15 160); --chart-3: oklch(0.7 0.18 50); --chart-4: oklch(0.6 0.2 320); --chart-5: oklch(0.75 0.15 200); --sidebar: oklch(0.1 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.2 280); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.65 0.2 280); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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; } } /* Added custom styles for professional SaaS look */ .gradient-text { background: linear-gradient(135deg, oklch(0.98 0 0), oklch(0.75 0 0)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .grid-pattern { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; } .glow-effect { box-shadow: 0 0 20px rgba(168, 85, 247, 0.15); } [V0_FILE]typescriptreact:file="components/stats-section.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { useLanguage } from "@/contexts/language-context" export function StatsSection() { const { t } = useLanguage() const stats = [ { value: t("stats.time.value"), label: t("stats.time.label"), description: t("stats.time.desc"), }, { value: t("stats.quality.value"), label: t("stats.quality.label"), description: t("stats.quality.desc"), }, { value: t("stats.pages.value"), label: t("stats.pages.label"), description: t("stats.pages.desc"), }, { value: t("stats.formats.value"), label: t("stats.formats.label"), description: t("stats.formats.desc"), }, ] return (

{/* Stats Grid - Removed misleading client logos */}

{stats.map((stat, index) => (

{stat.value}

{stat.label}

{stat.description}

))}

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Upload, Layout, Palette, Eye, Download, Share2, Zap, Shield, Users, BarChart3 } from "lucide-react" const features = [ { icon: Upload, title: "Multi-Source Import", description: "Upload videos, capture live, or import from TikTok, Instagram, YouTube", color: "text-primary", }, { icon: Layout, title: "Professional Layouts", description: "A3, A4, A5, Card, Polaroid formats with print-ready specifications", color: "text-accent", }, { icon: Palette, title: "Creative Customization", description: "AI backgrounds, branding, effects, and premium finishing options", color: "text-chart-3", }, { icon: Eye, title: "Live Preview", description: "Real-time GIF preview with frame-by-frame editing capabilities", color: "text-chart-4", }, { icon: Download, title: "Multi-Format Export", description: "PDF for print, GIF, MP4, interactive digital flipbooks", color: "text-chart-5", }, { icon: Share2, title: "Smart Sharing", description: "QR codes, secure links, email/WhatsApp integration with tracking", color: "text-primary", }, ] const businessFeatures = [ { icon: Users, title: "Team Collaboration", description: "Real-time collaboration tools for creative teams", }, { icon: BarChart3, title: "Analytics Dashboard", description: "Track engagement and performance metrics", }, { icon: Shield, title: "Enterprise Security", description: "SOC 2 compliant with advanced data protection", }, { icon: Zap, title: "API Integration", description: "Seamless integration with your existing workflow", }, ] export function FeaturesSection() { return (

{/* Section Header */}

Everything you need to create professional flipbooks

From video import to final delivery, our platform handles every step of the flipbook creation process with professional-grade quality.

{/* Main Features Grid */}

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

{/* Business Features */}

Built for Business

Advanced features for teams, agencies, and enterprises

{businessFeatures.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } [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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "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": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/video-import/batch-import.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { FileVideo, X, CheckCircle2, AlertCircle, Clock } from "lucide-react" interface BatchFile { id: string file: File status: "pending" | "processing" | "completed" | "error" progress: number error?: string } interface BatchImportProps { files: File[] onRemoveFile: (index: number) => void onProcessBatch: () => void } export function BatchImport({ files, onRemoveFile, onProcessBatch }: BatchImportProps) { const [batchFiles, setBatchFiles] = useState( files.map((file, index) => ({ id: `file-${index}`, file, status: "pending", progress: 0, })), ) const processBatch = () => { setBatchFiles((prev) => prev.map((file) => ({ ...file, status: "processing", })), ) // Simulate batch processing batchFiles.forEach((file, index) => { setTimeout(() => { const interval = setInterval(() => { setBatchFiles((prev) => prev.map((f) => { if (f.id === file.id) { const newProgress = Math.min(f.progress + 10, 100) return { ...f, progress: newProgress, status: newProgress === 100 ? "completed" : "processing", } } return f }), ) }, 200) setTimeout(() => clearInterval(interval), 2000) }, index * 500) }) onProcessBatch() } const getStatusIcon = (status: BatchFile["status"]) => { switch (status) { case "completed": return case "error": return case "processing": return default: return } } const getStatusBadge = (status: BatchFile["status"]) => { switch (status) { case "completed": return ( Completed ) case "error": return Error case "processing": return Processing default: return Pending } } return (

Batch Import ({batchFiles.length} files)

{batchFiles.map((batchFile, index) => (

{getStatusIcon(batchFile.status)}

{batchFile.file.name}

{getStatusBadge(batchFile.status)}

{(batchFile.file.size / (1024 * 1024)).toFixed(1)} MB • {batchFile.file.type}

{batchFile.status === "processing" && } {batchFile.error &&

{batchFile.error}

}

))}

) } [V0_FILE]typescriptreact:file="components/video-import/import-dashboard.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { VideoImportModal } from "./video-import-modal" import { BatchImport } from "./batch-import" import { Plus, Upload, History, Settings } from "lucide-react" import { Badge } from "@/components/ui/badge" interface ImportedVideo { id: string name: string type: "upload" | "url" | "capture" size?: number duration?: string platform?: string importedAt: Date thumbnail?: string } export function ImportDashboard() { const [isImportModalOpen, setIsImportModalOpen] = useState(false) const [importedVideos, setImportedVideos] = useState([]) const [batchFiles, setBatchFiles] = useState([]) const handleVideoImported = (videoData: any) => { const newVideo: ImportedVideo = { id: Date.now().toString(), name: videoData.name, type: videoData.type, size: videoData.size, duration: videoData.duration, platform: videoData.platform, importedAt: new Date(), } setImportedVideos((prev) => [newVideo, ...prev]) } const handleBatchDrop = (e: React.DragEvent) => { e.preventDefault() const files = Array.from(e.dataTransfer.files).filter((file) => file.type.startsWith("video/")) setBatchFiles((prev) => [...prev, ...files]) } const removeBatchFile = (index: number) => { setBatchFiles((prev) => prev.filter((_, i) => i !== index)) } const processBatch = () => { // Convert batch files to imported videos const newVideos = batchFiles.map((file) => ({ id: Date.now().toString() + Math.random(), name: file.name, type: "upload" as const, size: file.size, importedAt: new Date(), })) setImportedVideos((prev) => [...newVideos, ...prev]) setBatchFiles([]) } return (

{/* Header */}

Video Import

Import videos from multiple sources to create flipbooks

{/* Quick Stats */}

{importedVideos.length}

Total Imports

{importedVideos.filter((v) => v.type === "upload").length}

File Uploads

{importedVideos.filter((v) => v.type === "url").length}

URL Imports

{(importedVideos.reduce((acc, v) => acc + (v.size || 0), 0) / (1024 * 1024)).toFixed(1)} MB

Total Size

{/* Batch Import Area */} {batchFiles.length > 0 && ( )} {/* Batch Drop Zone */} e.preventDefault()} onDrop={handleBatchDrop} >

Batch Import

Drop multiple video files here for batch processing

{/* Recent Imports */}

Recent Imports

{importedVideos.length === 0 ? (

No videos imported yet

Start by importing your first video

) : (

{importedVideos.slice(0, 10).map((video) => (

{video.name}

{video.type} {video.platform && • {video.platform}} {video.size && • {(video.size / (1024 * 1024)).toFixed(1)} MB} • {video.importedAt.toLocaleDateString()}

))}

)} setIsImportModalOpen(false)} onVideoImported={handleVideoImported} />

) } [V0_FILE]typescriptreact:file="app/import/page.tsx" isEdit="true" isMerged="true" import { ImportDashboard } from "@/components/video-import/import-dashboard" import { PageHeader } from "@/components/ui/page-header" export default function ImportPage() { return (

) } [V0_FILE]typescriptreact:file="components/layout-config/format-selector.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Ruler, RotateCcw, RotateCw } from "lucide-react" interface FormatOption { id: string name: string dimensions: string description: string popular?: boolean preview: { width: number height: number } } const formats: FormatOption[] = [ { id: "a4", name: "A4", dimensions: "210 × 297 mm", description: "Standard format, perfect for most projects", popular: true, preview: { width: 210, height: 297 }, }, { id: "a3", name: "A3", dimensions: "297 × 420 mm", description: "Large format for premium flipbooks", preview: { width: 297, height: 420 }, }, { id: "a5", name: "A5", dimensions: "148 × 210 mm", description: "Compact format for pocket flipbooks", preview: { width: 148, height: 210 }, }, { id: "card", name: "Card", dimensions: "85 × 55 mm", description: "Business card size flipbook", preview: { width: 85, height: 55 }, }, { id: "polaroid", name: "Polaroid", dimensions: "93 × 55 mm", description: "Polaroid-style with fixed margins", preview: { width: 93, height: 55 }, }, ] interface FormatSelectorProps { selectedFormat: string orientation: "portrait" | "landscape" onFormatChange: (format: string) => void onOrientationChange: (orientation: "portrait" | "landscape") => void } export function FormatSelector({ selectedFormat, orientation, onFormatChange, onOrientationChange, }: FormatSelectorProps) { const getPreviewDimensions = (format: FormatOption) => { const baseWidth = format.preview.width const baseHeight = format.preview.height const scale = 0.3 if (orientation === "landscape") { return { width: Math.max(baseWidth, baseHeight) * scale, height: Math.min(baseWidth, baseHeight) * scale, } } return { width: Math.min(baseWidth, baseHeight) * scale, height: Math.max(baseWidth, baseHeight) * scale, } } return (

Format Selection

Choose your flipbook size and orientation

{formats.map((format) => { const isSelected = selectedFormat === format.id const previewDims = getPreviewDimensions(format) return ( onFormatChange(format.id)} >

{format.name}

{format.popular && ( Popular )}

{isSelected &&

}

{format.dimensions}

{format.description}

) })}

) } [V0_FILE]typescriptreact:file="components/layout-config/print-specifications.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Printer, Scissors, Layers, AlertTriangle } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" interface PrintSpecsProps { specs: { bleed: number gutter: number margins: number safetyZone: number cropMarks: boolean colorProfile: string resolution: number } onSpecsChange: (specs: any) => void } export function PrintSpecifications({ specs, onSpecsChange }: PrintSpecsProps) { const updateSpec = (key: string, value: any) => { onSpecsChange({ ...specs, [key]: value, }) } return (

Print Specifications

Professional printing settings for high-quality output

{/* Bleed Settings */}

Bleed Area

{specs.bleed} mm

Extra area beyond the trim edge to ensure no white borders after cutting

updateSpec("bleed", value[0])} max={5} min={0} step={0.5} className="w-full" />

0 mm 5 mm

{/* Gutter Settings */}

Gutter

{specs.gutter} mm

Space between pages for binding and folding

updateSpec("gutter", value[0])} max={10} min={0} step={0.5} className="w-full" />

0 mm 10 mm

{/* Margins */}

Content Margins {specs.margins} mm

Safe area for content placement

updateSpec("margins", value[0])} max={50} min={5} step={1} className="w-full" />

5 mm 50 mm

{/* Safety Zone */}

Safety Zone {specs.safetyZone} mm

Additional safe area for critical content

updateSpec("safetyZone", value[0])} max={10} min={0} step={0.5} className="w-full" />

{/* Print Options */}

Print Options

Crop Marks

Add cutting guides for professional printing

updateSpec("cropMarks", checked)} />

Color Profile

ISO Coated v2 FOGRA39

CMYK

Resolution

Print Quality

300 DPI

{/* Warning */} These settings ensure professional print quality. Modifying them may affect the final output quality.

) } [V0_FILE]typescriptreact:file="components/layout-config/recto-verso-config.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Card } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { FlipHorizontal, ImageIcon, Video, Upload } from "lucide-react" import { useState } from "react" interface RectoVersoMode { id: string name: string description: string icon: React.ReactNode badge?: string } const modes: RectoVersoMode[] = [ { id: "recto-only", name: "Recto Only", description: "Single-sided flipbook with video frames on front only", icon:

Everything you need to create professional flipbooks

{feature.title}

Built for Business

{feature.title}

Batch Import ({batchFiles.length} files)

Video Import

Batch Import

Recent Imports

Format Selection

{format.name}

Print Specifications

Print Options

Recto/Verso Configuration

Verso Content ({selectedMode === "dual-video" ? "Video" : "Image"})

Preview

Layout Configuration

Current Configuration

Branding & Identity