[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Code } from "lucide-react" import { PricingCards } from "@/components/pricing-cards" import { FeatureHighlights } from "@/components/feature-highlights" import { HeroSection } from "@/components/hero-section" export default function Home() { return (


            CodeCollab
          
          
            
              Features
            
            
              Pricing
            
            
              Documentation
            
          
          
            
              Login


      
        
        
        
      
      
        
          
            
              Product
              
                
                  
                    Features
                  
                
                
                  
                    Pricing
                  
                
                
                  
                    Roadmap
                  
                
              
            
            
              Company
              
                
                  
                    About
                  
                
                
                  
                    Blog
                  
                
                
                  
                    Careers
                  
                
              
            
            
              Resources
              
                
                  
                    Documentation
                  
                
                
                  
                    Guides
                  
                
                
                  
                    Support
                  
                
              
            
            
              Legal
              
                
                  
                    Privacy
                  
                
                
                  
                    Terms
                  
                
              
            
          
          
            
              © {new Date().getFullYear()} CodeCollab. All rights reserved.
            
            
              
                Twitter
                
              
              
                GitHub


  )
}

[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export function HeroSection() {
  return (
    
      
        
          
            
              
                Code Together. Build Faster.
              
              
                A powerful online code editor with real-time collaboration, AI-powered assistance, and seamless team
                workflows.
              
            
            
              
              
            
          
          
            
              
              
                
                  
                  
                  
                  main.js - CodeCollab
                
                
                                      {`// Collaborative code editing in real-time
function greeting(name) {
  return \`Hello, \${name}!\`;
}

// AI-powered code suggestions
function calculateTotal(items) {
  return items.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);
}

// Team collaboration made easy
async function fetchUserData(userId) {
  const response = await fetch(\`/api/users/\${userId}\`);
  return response.json();
}`}
                  
                
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/feature-highlights.tsx" isMerged="true"
import { Code, Users, Zap, GitBranch, Shield, Bot } from "lucide-react"

export function FeatureHighlights() {
  return (
    
      
        
          
            Features
            
              Everything you need to code better, together
            
            
              Our platform combines powerful code editing with seamless collaboration and AI assistance to help teams
              build faster.
            
          
        
        
          
            
              
            

            Advanced Editor
            
              Powerful code editor with syntax highlighting, autocomplete, and multi-language support.
            
          

          
            
              
            
            Real-time Collaboration
            
              Code together in real-time with your team. See changes as they happen with live cursors and edits.
            
          
          
            
              
            
            AI Assistance
            
              Get intelligent code suggestions, auto-completion, and bug detection powered by advanced AI models.
            
          
          
            
              
            
            Version Control
            
              Seamless integration with Git. Commit, branch, and merge without leaving the editor.
            
          
          
            
              
            
            Secure Workspace
            
              Enterprise-grade security with role-based access control and encrypted data storage.
            
          
          
            
              
            
            Code Analysis
            
              Automated code reviews, quality checks, and performance optimization suggestions.
            
          
        

      

    

  )
}

[V0_FILE]typescriptreact:file="components/pricing-cards.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Check } from "lucide-react"

export function PricingCards() {
  return (
    
      
        
          
            Pricing
            
              Choose the plan that's right for you
            
            
              Whether you're a solo developer or a large team, we have a plan that fits your needs.
            
          
        
        
          
            
              Free
              For individual developers getting started
              
                $0
                /month
              
            
            
              
                
                  
                  Basic code editor
                
                
                  
                  Up to 3 projects
                
                
                  
                  Limited collaboration (1 guest)
                
                
                  
                  Community support
                
              
            
            
              
            
          
          
            
              Most Popular
            
            
              Pro
              For professional developers and small teams
              
                $19
                /month
              
            
            
              
                
                  
                  Advanced code editor
                
                
                  
                  Unlimited projects
                
                
                  
                  Team collaboration (up to 5 members)
                
                
                  
                  Basic AI code assistance
                
                
                  
                  Git integration
                
                
                  
                  Priority email support
                
              
            
            
              
            
          
          
            
              Enterprise
              For organizations with advanced needs
              
                $49
                /month
              
            
            
              
                
                  
                  Everything in Pro
                
                
                  
                  Unlimited team members
                
                
                  
                  Advanced AI code generation
                
                
                  
                  Custom integrations
                
                
                  
                  Advanced security features
                
                
                  
                  Dedicated support
                
                
                  
                  Custom branding
                
              
            
            
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/code-editor.tsx" isMerged="true"
"use client"

import { useRef, useState } from "react"

export function CodeEditor() {
  const editorRef = useRef(null)
  const [code, setCode] = useState(`// Welcome to CodeCollab
function greeting(name) {
  return \`Hello, \${name}!\`;
}

// Try editing this code
function calculateTotal(items) {
  return items.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);
}

// AI will suggest improvements as you type
async function fetchUserData(userId) {
  const response = await fetch(\`/api/users/\${userId}\`);
  return response.json();
}

// This is a collaborative editor
// Your teammates can see your changes in real-time
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  getDisplayName() {
    return this.name;
  }
}
`)

  // This is a simplified editor for demonstration purposes
  // In a real application, you would use Monaco Editor or CodeMirror
  return (
    
      
        
          {Array.from({ length: code.split("\n").length }).map((_, i) => (
            
              {i + 1}
            
          ))}
        
        
           setCode(e.currentTarget.textContent || "")}
          >
            {code}
          
        
        
          
          2 collaborators online
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/file-explorer.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronRight, File, Folder, FolderOpen, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

type FileItem = {
  id: string
  name: string
  type: "file" | "folder"
  children?: FileItem[]
}

const initialFiles: FileItem[] = [
  {
    id: "1",
    name: "src",
    type: "folder",
    children: [
      {
        id: "2",
        name: "components",
        type: "folder",
        children: [
          { id: "3", name: "Button.js", type: "file" },
          { id: "4", name: "Card.js", type: "file" },
          { id: "5", name: "Input.js", type: "file" },
        ],
      },
      {
        id: "6",
        name: "pages",
        type: "folder",
        children: [
          { id: "7", name: "index.js", type: "file" },
          { id: "8", name: "about.js", type: "file" },
          { id: "9", name: "contact.js", type: "file" },
        ],
      },
      { id: "10", name: "App.js", type: "file" },
      { id: "11", name: "index.js", type: "file" },
    ],
  },
  {
    id: "12",
    name: "public",
    type: "folder",
    children: [
      { id: "13", name: "index.html", type: "file" },
      { id: "14", name: "favicon.ico", type: "file" },
    ],
  },
  { id: "15", name: "package.json", type: "file" },
  { id: "16", name: "README.md", type: "file" },
]

export function FileExplorer() {
  const [files, setFiles] = useState(initialFiles)
  const [expandedFolders, setExpandedFolders] = useState>(new Set(["1"]))

  const toggleFolder = (id: string) => {
    setExpandedFolders((prev) => {
      const next = new Set(prev)
      if (next.has(id)) {
        next.delete(id)
      } else {
        next.add(id)
      }
      return next
    })
  }

  const renderFileItem = (item: FileItem, depth = 0) => {
    const isExpanded = expandedFolders.has(item.id)

    return (
      
         0 ? `ml-${depth * 4}` : ""
          }`}
          style={{ marginLeft: depth * 12 }}
        >
          {item.type === "folder" ? (
            
          ) : (
            
          )}
          {item.type === "folder" ? (
            isExpanded ? (
              
            ) : (
              
            )
          ) : (
            
          )}
          {item.name}
          
            
              
                
              
              
                Rename
                Delete
              
            
          
        
        {item.type === "folder" && isExpanded && item.children?.map((child) => renderFileItem(child, depth + 1))}
      
    )
  }

  return (
    
      
        Files
        
      
      {files.map((file) => renderFileItem(file))}
    
  )
}

[V0_FILE]typescriptreact:file="components/collaboration-panel.tsx" isMerged="true"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"

type Collaborator = {
  id: string
  name: string
  email: string
  status: "online" | "offline" | "away"
  avatar: string
  role: "owner" | "editor" | "viewer"
}

const collaborators: Collaborator[] = [
  {
    id: "1",
    name: "John Doe",
    email: "john@example.com",
    status: "online",
    avatar: "/placeholder.svg?height=40&width=40",
    role: "owner",
  },
  {
    id: "2",
    name: "Alice Brown",
    email: "alice@example.com",
    status: "online",
    avatar: "/placeholder.svg?height=40&width=40",
    role: "editor",
  },
  {
    id: "3",
    name: "Bob Smith",
    email: "bob@example.com",
    status: "away",
    avatar: "/placeholder.svg?height=40&width=40",
    role: "editor",
  },
  {
    id: "4",
    name: "Carol White",
    email: "carol@example.com",
    status: "offline",
    avatar: "/placeholder.svg?height=40&width=40",
    role: "viewer",
  },
]

export function CollaborationPanel() {
  return (
    
      
        Collaborators
        People working on this project
      
      
        {collaborators.map((user) => (
          
            
              
                
                {user.name.substring(0, 2).toUpperCase()}
              
              
            
            
              
                {user.name}
                
                  {user.role}
                
              
              {user.email}
            
          
        ))}
      
      
        Invite People
        
          
          
        
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/ai-assistant-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Bot, Code, Lightbulb, Search, Wand2 } from "lucide-react"

export function AIAssistantPanel() {
  const [query, setQuery] = useState("")
  const [suggestions, setSuggestions] = useState([
    "Optimize this function",
    "Explain this code",
    "Find bugs in my code",
    "Generate unit tests",
  ])

  return (
    
      
        
          
          AI Assistant
        
        Get help with your code
      
      
         setQuery(e.target.value)}
          className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 pr-8"
        />
        
      
      
        
          
            Suggestions
          
          
            Tools
          
          
            History
          
        
        
          {suggestions.map((suggestion, i) => (
            
          ))}
        
        
          
          
          
        
        
          No recent queries
        
      
      
        Pro Tip
        
          Use AI to generate code, find bugs, and get suggestions for improvements. Upgrade to Pro for advanced AI
          features.
        
        
      
    

  )
}

[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Code, Github } from "lucide-react"

export default function LoginPage() {
  return (
    
      
        
          
            
              
              CodeCollab
            
            Welcome back
            Enter your credentials to sign in to your account
          

          
            
              Email
              
            
            
              
                Password
                
                  Forgot password?
                
              
              
            
            
            
          
          
            Don't have an account?{" "}
            
              Sign up
            
          
        

      

    

  )
}

[V0_FILE]typescriptreact:file="app/signup/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Code, Github } from "lucide-react"

export default function SignupPage() {
  return (
    
      
        
          
            
              
              CodeCollab
            
            Create an account
            Enter your information to create an account
          

          
            
              
                First name
                
              
              
                Last name
                
              
            
            
              Email
              
            
            
              Password
              
            
            
              Confirm Password
              
            
            
            
          
          
            Already have an account?{" "}
            
              Sign in
            
          
        

      

    

  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="app/editor/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  Code,
  FileCode,
  FileText,
  FolderTree,
  GitBranch,
  MessageSquare,
  Play,
  Plus,
  Save,
  Settings,
  Share2,
  Users,
  Zap,
} from "lucide-react"
import { CodeEditor } from "@/components/code-editor"
import { FileExplorer } from "@/components/file-explorer"
import { CollaborationPanel } from "@/components/collaboration-panel"
import { AIAssistantPanel } from "@/components/ai-assistant-panel"

export default function EditorPage() {
  const [activeTab, setActiveTab] = useState("code")
  const [sidebarTab, setSidebarTab] = useState("files")
  const [rightSidebarTab, setRightSidebarTab] = useState("ai")

  return (
    
      
        
          
          CodeCollab
        
        
          
          
        
        
          
            
              
                
              
              Save
            
          
          
            
              
                
              
              Run
            
          
          
            
              
                
              
              Share
            
          
          
            
              
              JD
            
            
              
              AB
            
            
          
          
            
            YA
          
        
      

      
        
          
            
              
                
                  
                
                
                  
                
                
                  
                
              
            
            
              
                
              
              
                
              
              
                
                  Editor Settings
                  
                    
                      Theme
                      
                    
                    
                      Font Size
                      
                    
                    
                      Tab Size
                      
                    
                  
                
              
            
          
        
        
          
            
              
                
                  
                  Code
                
                
                  
                  Preview
                
                
                  
                  Chat
                
              
            
            
              
                
              
              
                
                  
                    Preview
                    Preview your code output here
                  
                
              
              
                
                  
                    
                      
                        
                        JD
                      
                      
                        
                          Hey team, I've updated the authentication flow. Can someone review it?
                        
                      
                    
                    
                      
                        
                        AB
                      
                      
                        I'll take a look at it this afternoon!
                      
                    
                  
                  
                    
                      
                      
                    
                  
                
              
            
          
        
        
          
            
              
                
                  
                
                
                  
                
              
            
            
              
                
              
              
                
                  Team Chat
                  
                    
                      
                        
                          
                          JD
                        
                        John Doe
                      
                      Just pushed the new UI components
                    
                    
                      
                        
                          
                          AB
                        
                        Alice Brown
                      
                      Great! I'll review them now
                    
                  
                
              
            
          
        
      
    

  )
}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This