[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.25 0 0); --card: oklch(0.99 0.02 85); --card-foreground: oklch(0.25 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0 0); --primary: oklch(0.65 0.15 45); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.7 0.15 160); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.7 0.15 160); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9 0 0); --input: oklch(0.98 0 0); --ring: oklch(0.7 0.15 160 / 0.3); --chart-1: oklch(0.65 0.15 45); --chart-2: oklch(0.7 0.15 160); --chart-3: oklch(0.65 0.18 150); --chart-4: oklch(0.55 0.2 25); --chart-5: oklch(0.35 0 0); --radius: 0.5rem; --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.25 0 0); --sidebar-primary: oklch(0.65 0.15 45); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.7 0.15 160); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.9 0 0); --sidebar-ring: oklch(0.7 0.15 160 / 0.3); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.18 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.7 0.15 45); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.75 0.15 160); --secondary-foreground: oklch(0.145 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.75 0.15 160); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.75 0.15 160 / 0.3); --chart-1: oklch(0.7 0.15 45); --chart-2: oklch(0.75 0.15 160); --chart-3: oklch(0.7 0.18 150); --chart-4: oklch(0.6 0.2 25); --chart-5: oklch(0.7 0 0); --sidebar: oklch(0.18 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.7 0.15 45); --sidebar-primary-foreground: oklch(0.145 0 0); --sidebar-accent: oklch(0.75 0.15 160); --sidebar-accent-foreground: oklch(0.145 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.75 0.15 160 / 0.3); } @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; } } [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="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { ChevronUp, Upload, X } from "lucide-react" interface Feature { id: string title: string description: string status: "planned" | "in-progress" | "shipped" version?: string votes: number userVoted: boolean } const initialFeatures: Feature[] = [ { id: "1", title: "AI Voice Cloning", description: "Clone any voice with just 30 seconds of audio for personalized video narration", status: "shipped", version: "2.3.1", votes: 1247, userVoted: false, }, { id: "2", title: "Real-time Collaboration", description: "Work together on video projects with live editing and instant feedback", status: "in-progress", votes: 892, userVoted: true, }, { id: "3", title: "Advanced Motion Graphics", description: "Create stunning animations and transitions with AI-powered motion design", status: "in-progress", votes: 756, userVoted: false, }, { id: "4", title: "4K Video Export", description: "Export videos in ultra-high definition with optimized compression", status: "shipped", version: "2.2.8", votes: 1156, userVoted: false, }, { id: "5", title: "Auto Subtitle Generation", description: "Generate accurate subtitles in 50+ languages with speaker detection", status: "shipped", version: "2.1.5", votes: 1089, userVoted: true, }, { id: "6", title: "Green Screen Removal", description: "AI-powered background removal without requiring green screens", status: "in-progress", votes: 823, userVoted: false, }, { id: "7", title: "Auto Scene Detection", description: "Automatically identify and segment scenes for faster editing workflows", status: "planned", votes: 634, userVoted: false, }, { id: "8", title: "Performance Analytics", description: "Track video performance across platforms with detailed engagement metrics", status: "planned", votes: 521, userVoted: true, }, { id: "9", title: "Instant Video Generation", description: "Generate complete videos from text prompts in under 60 seconds", status: "planned", votes: 445, userVoted: false, }, { id: "10", title: "Multi-Camera Sync", description: "Automatically sync footage from multiple cameras using audio waveforms", status: "planned", votes: 398, userVoted: false, }, { id: "11", title: "AI Music Generation", description: "Create custom background music that matches your video's mood and pacing", status: "planned", votes: 367, userVoted: false, }, { id: "12", title: "Batch Processing", description: "Apply effects and edits to multiple videos simultaneously", status: "planned", votes: 334, userVoted: false, }, { id: "13", title: "Live Streaming Integration", description: "Stream directly to YouTube, Twitch, and other platforms with one click", status: "planned", votes: 298, userVoted: false, }, { id: "14", title: "Face Swap Technology", description: "Replace faces in videos with AI-powered deepfake technology", status: "planned", votes: 267, userVoted: false, }, { id: "15", title: "360° Video Support", description: "Edit and export immersive 360-degree videos for VR platforms", status: "planned", votes: 234, userVoted: false, }, ] export default function RoadmapPage() { const [features, setFeatures] = useState(initialFeatures) const [isModalOpen, setIsModalOpen] = useState(false) const [isDarkMode, setIsDarkMode] = useState(false) const [newFeature, setNewFeature] = useState({ title: "", description: "", }) const [uploadedFiles, setUploadedFiles] = useState([]) const [isDragOver, setIsDragOver] = useState(false) const handleVote = (featureId: string) => { setFeatures((prev) => prev.map((feature) => { if (feature.id === featureId) { return { ...feature, votes: feature.userVoted ? feature.votes - 1 : feature.votes + 1, userVoted: !feature.userVoted, } } return feature }), ) } const handleFileUpload = useCallback((files: FileList | null) => { if (!files) return const validFiles = Array.from(files).filter( (file) => file.type.startsWith("image/") || file.type.startsWith("video/"), ) setUploadedFiles((prev) => [...prev, ...validFiles]) }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) handleFileUpload(e.dataTransfer.files) }, [handleFileUpload], ) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragOver(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) }, []) const removeFile = (index: number) => { setUploadedFiles((prev) => prev.filter((_, i) => i !== index)) } const handleSuggestFeature = () => { if (newFeature.title.trim() && newFeature.description.trim()) { console.log("New feature suggested:", newFeature, "Files:", uploadedFiles) setNewFeature({ title: "", description: "" }) setUploadedFiles([]) setIsModalOpen(false) } } const getStatusBadge = (status: Feature["status"], version?: string) => { switch (status) { case "shipped": return ( {version} ) case "in-progress": return ( In Progress ) case "planned": return ( Planned ) } } const sortedFeatures = [...features].sort((a, b) => { const statusOrder = { shipped: 0, "in-progress": 1, planned: 2 } if (statusOrder[a.status] !== statusOrder[b.status]) { return statusOrder[a.status] - statusOrder[b.status] } return b.votes - a.votes }) return (

Feature Roadmap

Vote for the features you want to see next

Dark

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This