[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight, Camera, Layout, Share2, Sparkles } from "lucide-react" export default function Home() { return (

Vizura

Showcase Your Creative Work with Vizura

Create stunning portfolios in minutes with our AI-powered platform. Upload your work, customize your design, and share it with the world.

{[1, 2, 3, 4, 5, 6].map((i) => (

))}

Features

Everything you need to create and share your professional portfolio

Customizable Templates

Choose from a variety of professionally designed templates to showcase your work.

AI-Powered Features

Enhance your images and generate compelling descriptions with our AI tools.

Easy Sharing

Generate a shareable link to your portfolio that you can send to clients and colleagues.

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Camera, Edit, ExternalLink, Plus, Trash2 } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function DashboardPage() { const [portfolios, setPortfolios] = useState([ { id: 1, name: "Photography Portfolio", template: "Grid", images: 12, lastUpdated: "2 days ago", link: "/portfolio/photography", }, { id: 2, name: "Design Work", template: "Masonry", images: 8, lastUpdated: "1 week ago", link: "/portfolio/design", }, ]) const [newPortfolioName, setNewPortfolioName] = useState("") const createPortfolio = () => { if (newPortfolioName.trim()) { const newPortfolio = { id: portfolios.length + 1, name: newPortfolioName, template: "Grid", images: 0, lastUpdated: "Just now", link: `/portfolio/${newPortfolioName.toLowerCase().replace(/\s+/g, "-")}`, } setPortfolios([...portfolios, newPortfolio]) setNewPortfolioName("") } } const deletePortfolio = (id) => { setPortfolios(portfolios.filter((portfolio) => portfolio.id !== id)) } return (

Vizura

Dashboard

My Portfolios Analytics

{portfolios.map((portfolio) => ( {portfolio.name} {portfolio.template} template • {portfolio.images} images

{[...Array(6)].map((_, i) => (

))}

Updated {portfolio.lastUpdated}

))}

Portfolio Views Track how many people are viewing your portfolios

Analytics data will appear here

) } [V0_FILE]typescriptreact:file="app/editor/[id]/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Camera, Check, Copy, Share2, Sparkles } from "lucide-react" import { Separator } from "@/components/ui/separator" import { ScrollArea } from "@/components/ui/scroll-area" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { toast } from "@/hooks/use-toast" export default function EditorPage({ params }) { const [portfolio, setPortfolio] = useState({ id: params.id, name: "Photography Portfolio", description: "A collection of my best photography work from 2023-2024.", template: "grid", images: [ { id: 1, src: "/placeholder.svg?height=400&width=600&text=Image+1", title: "Mountain Sunset", description: "Captured during golden hour in the Rocky Mountains.", }, { id: 2, src: "/placeholder.svg?height=400&width=600&text=Image+2", title: "Urban Portrait", description: "Street photography in downtown Chicago.", }, { id: 3, src: "/placeholder.svg?height=400&width=600&text=Image+3", title: "Ocean Waves", description: "Long exposure shot of waves crashing on the shore.", }, { id: 4, src: "/placeholder.svg?height=400&width=600&text=Image+4", title: "Forest Path", description: "Misty morning in the redwood forest.", }, ], }) const [activeImage, setActiveImage] = useState(null) const [shareUrl, setShareUrl] = useState(`https://vizura.app/p/${params.id}`) const handleImageUpload = (e) => { // In a real app, this would upload to a server // For this demo, we'll just create placeholder images const newImages = [...Array(e.target.files.length)].map((_, index) => ({ id: portfolio.images.length + index + 1, src: `/placeholder.svg?height=400&width=600&text=New+Image+${index + 1}`, title: `New Image ${index + 1}`, description: "Click to add a description.", })) setPortfolio({ ...portfolio, images: [...portfolio.images, ...newImages], }) } const updateImageDetails = (id, field, value) => { setPortfolio({ ...portfolio, images: portfolio.images.map((img) => (img.id === id ? { ...img, [field]: value } : img)), }) } const generateAIDescription = (id) => { // Simulate AI generating a description const descriptions = [ "A stunning composition that captures the essence of natural beauty with perfect lighting and depth.", "This powerful image tells a story of contrast and harmony, drawing the viewer into its emotional landscape.", "An expertly framed shot that demonstrates technical mastery and artistic vision in equal measure.", "The interplay of light and shadow creates a mesmerizing visual experience that lingers in the mind.", ] const randomDescription = descriptions[Math.floor(Math.random() * descriptions.length)] updateImageDetails(id, "description", randomDescription) toast({ title: "AI Description Generated", description: "The AI has created a new description for your image.", }) } const copyShareLink = () => { navigator.clipboard.writeText(shareUrl) toast({ title: "Link Copied", description: "Portfolio link copied to clipboard", }) } return (

Vizura

Portfolio Name setPortfolio({ ...portfolio, name: e.target.value })} />

Description

setPortfolio({ ...portfolio, description: e.target.value })}
                rows={3}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="template">Template</Label>
              <Select
                value={portfolio.template}
                onValueChange={(value) => setPortfolio({ ...portfolio, template: value })}
              >
                <SelectTrigger id="template">
                  <SelectValue placeholder="Select a template" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="grid">Grid</SelectItem>
                  <SelectItem value="masonry">Masonry</SelectItem>
                  <SelectItem value="rows">Rows</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Separator />
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="ai-enhancement">AI Image Enhancement</Label>
                <Switch id="ai-enhancement" />
              </div>
              <p className="text-xs text-muted-foreground">Automatically enhance your images using AI</p>
            </div>
            <Button className="w-full" onClick={() => document.getElementById("image-upload").click()}>
              Upload Images
            </Button>
            <input
              id="image-upload"
              type="file"
              multiple
              accept="image/*"
              className="hidden"
              onChange={handleImageUpload}
            />
          </div>
          <Separator />
          <div className="p-4">
            <h3 className="mb-2 text-sm font-medium">Images</h3>
            <ScrollArea className="h-[calc(100vh-400px)]">
              <div className="space-y-2">
                {portfolio.images.map((image) => (
                  <div
                    key={image.id}
                    className={`flex items-center gap-2 rounded-md p-2 cursor-pointer ${activeImage === image.id ? "bg-muted" : "hover:bg-muted/50"}`}
                    onClick={() => setActiveImage(image.id)}
                  >
                    <div className="h-12 w-12 overflow-hidden rounded-md bg-muted">
                      <img
                        src={image.src || "/placeholder.svg"}
                        alt={image.title}
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div className="flex-1 truncate">
                      <p className="text-sm font-medium truncate">{image.title}</p>
                    </div>
                  </div>
                ))}
              </div>
            </ScrollArea>
          </div>
        </aside>
        <main className="flex-1">
          <Tabs defaultValue="editor">
            <div className="border-b">
              <div className="flex items-center px-4 py-2">
                <TabsList>
                  <TabsTrigger value="editor">Editor</TabsTrigger>
                  <TabsTrigger value="preview">Preview</TabsTrigger>
                </TabsList>
              </div>
            </div>
            <TabsContent value="editor" className="p-4">
              {activeImage ? (
                <div className="grid gap-6 md:grid-cols-[1fr_300px]">
                  <div className="aspect-video overflow-hidden rounded-lg border bg-muted">
                    <img
                      src={portfolio.images.find((img) => img.id === activeImage)?.src || "/placeholder.svg"}
                      alt={portfolio.images.find((img) => img.id === activeImage)?.title}
                      className="h-full w-full object-contain"
                    />
                  </div>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="image-title">Image Title</Label>
                      <Input
                        id="image-title"
                        value={portfolio.images.find((img) => img.id === activeImage)?.title || ""}
                        onChange={(e) => updateImageDetails(activeImage, "title", e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="image-description">Description</Label>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 gap-1 text-xs"
                          onClick={() => generateAIDescription(activeImage)}
                        >
                          <Sparkles className="h-3 w-3" />
                          Generate with AI
                        </Button>
                      </div>
                      <Textarea
                        id="image-description"
                        value={portfolio.images.find((img) => img.id === activeImage)?.description || ""}
                        onChange={(e) => updateImageDetails(activeImage, "description", e.target.value)}
                        rows={4}
                      />
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex h-[calc(100vh-200px)] items-center justify-center">
                  <div className="text-center">
                    <h3 className="text-lg font-medium">Select an image to edit</h3>
                    <p className="text-muted-foreground">Click on an image from the sidebar to edit its details</p>
                  </div>
                </div>
              )}
            </TabsContent>
            <TabsContent value="preview" className="p-4">
              <div className="rounded-lg border bg-card">
                <div className="p-6">
                  <h1 className="text-2xl font-bold mb-2">{portfolio.name}</h1>
                  <p className="text-muted-foreground mb-6">{portfolio.description}</p>

{portfolio.template === "grid" && (
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                      {portfolio.images.map((image) => (
                        <Card key={image.id} className="overflow-hidden">
                          <CardContent className="p-0">
                            <img
                              src={image.src || "/placeholder.svg"}
                              alt={image.title}
                              className="w-full aspect-square object-cover"
                            />
                            <div className="p-3">
                              <h3 className="font-medium">{image.title}</h3>
                              <p className="text-xs text-muted-foreground line-clamp-2">{image.description}</p>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  )}

{portfolio.template === "masonry" && (
                    <div className="columns-2 md:columns-3 gap-4 space-y-4">
                      {portfolio.images.map((image) => (
                        <div key={image.id} className="break-inside-avoid">
                          <img src={image.src || "/placeholder.svg"} alt={image.title} className="w-full rounded-lg" />
                          <div className="p-2">
                            <h3 className="font-medium">{image.title}</h3>
                            <p className="text-xs text-muted-foreground">{image.description}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}

{portfolio.template === "rows" && (
                    <div className="space-y-8">
                      {portfolio.images.map((image) => (
                        <div key={image.id} className="grid md:grid-cols-2 gap-6 items-center">
                          <img src={image.src || "/placeholder.svg"} alt={image.title} className="w-full rounded-lg" />
                          <div>
                            <h3 className="text-xl font-medium mb-2">{image.title}</h3>
                            <p className="text-muted-foreground">{image.description}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/portfolio/[id]/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Camera, ArrowLeft } from "lucide-react"

export default function PortfolioPage({ params }) {
  const [portfolio, setPortfolio] = useState(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    // In a real app, this would fetch from an API
    // For this demo, we'll use mock data
    setTimeout(() => {
      setPortfolio({
        id: params.id,
        name: "Photography Portfolio",
        description: "A collection of my best photography work from 2023-2024.",
        template: "grid",
        images: [
          {
            id: 1,
            src: "/placeholder.svg?height=400&width=600&text=Image+1",
            title: "Mountain Sunset",
            description: "Captured during golden hour in the Rocky Mountains.",
          },
          {
            id: 2,
            src: "/placeholder.svg?height=400&width=600&text=Image+2",
            title: "Urban Portrait",
            description: "Street photography in downtown Chicago.",
          },
          {
            id: 3,
            src: "/placeholder.svg?height=400&width=600&text=Image+3",
            title: "Ocean Waves",
            description: "Long exposure shot of waves crashing on the shore.",
          },
          {
            id: 4,
            src: "/placeholder.svg?height=400&width=600&text=Image+4",
            title: "Forest Path",
            description: "Misty morning in the redwood forest.",
          },
        ],
      })
      setLoading(false)
    }, 1000)
  }, [params.id])

if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-center">
          <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
          <p>Loading portfolio...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background/80 backdrop-blur-sm px-4 md:px-6">
        <Link href="/" className="flex items-center gap-2 font-bold text-xl">
          <Camera className="h-6 w-6" />
          <span>Vizura</span>
        </Link>
        <div className="ml-auto">
          <Button variant="ghost" size="sm" asChild>
            <Link href="/dashboard">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Dashboard
            </Link>
          </Button>
        </div>
      </header>
      <main className="container mx-auto py-8 px-4">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl font-bold mb-2">{portfolio.name}</h1>
          <p className="text-muted-foreground mb-8">{portfolio.description}</p>

{portfolio.template === "grid" && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {portfolio.images.map((image) => (
                <div key={image.id} className="overflow-hidden rounded-lg border bg-card">
                  <div className="aspect-square overflow-hidden">
                    <img
                      src={image.src || "/placeholder.svg"}
                      alt={image.title}
                      className="w-full h-full object-cover transition-transform hover:scale-105"
                    />
                  </div>
                  <div className="p-4">
                    <h3 className="font-medium">{image.title}</h3>
                    <p className="text-sm text-muted-foreground mt-1">{image.description}</p>
                  </div>
                </div>
              ))}
            </div>
          )}

{portfolio.template === "masonry" && (
            <div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
              {portfolio.images.map((image) => (
                <div key={image.id} className="break-inside-avoid overflow-hidden rounded-lg border bg-card">
                  <img src={image.src || "/placeholder.svg"} alt={image.title} className="w-full" />
                  <div className="p-4">
                    <h3 className="font-medium">{image.title}</h3>
                    <p className="text-sm text-muted-foreground mt-1">{image.description}</p>
                  </div>
                </div>
              ))}
            </div>
          )}

{portfolio.template === "rows" && (
            <div className="space-y-12">
              {portfolio.images.map((image) => (
                <div key={image.id} className="grid md:grid-cols-2 gap-8 items-center">
                  <img src={image.src || "/placeholder.svg"} alt={image.title} className="w-full rounded-lg" />
                  <div>
                    <h3 className="text-xl font-medium mb-2">{image.title}</h3>
                    <p className="text-muted-foreground">{image.description}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </main>
      <footer className="border-t py-6 px-4 md:px-6">
        <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
          <p className="text-sm text-muted-foreground">
            Created with{" "}
            <Link href="/" className="font-medium hover:underline">
              Vizura
            </Link>
          </p>
          <p className="text-sm text-muted-foreground">© 2024 All rights reserved</p>
        </div>
      </footer>
    </div>
  )
}

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

export default function LoginPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col items-center justify-center px-6 py-12">
        <Link href="/" className="flex items-center gap-2 mb-8">
          <Camera className="h-6 w-6" />
          <span className="text-xl font-bold">Vizura</span>
        </Link>
        <div className="w-full max-w-md space-y-8">
          <div className="text-center">
            <h1 className="text-2xl font-bold tracking-tight">Welcome back</h1>
            <p className="mt-2 text-sm text-muted-foreground">Sign in to your account to continue</p>
          </div>
          <div className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="name@example.com" />
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                  Forgot password?
                </Link>
              </div>
              <Input id="password" type="password" />
            </div>
            <Button className="w-full">Sign In</Button>
            <div className="text-center text-sm">
              Don't have an account?{" "}
              <Link href="/signup" className="text-primary hover:underline">
                Sign up
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

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

export default function SignupPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col items-center justify-center px-6 py-12">
        <Link href="/" className="flex items-center gap-2 mb-8">
          <Camera className="h-6 w-6" />
          <span className="text-xl font-bold">Vizura</span>
        </Link>
        <div className="w-full max-w-md space-y-8">
          <div className="text-center">
            <h1 className="text-2xl font-bold tracking-tight">Create an account</h1>
            <p className="mt-2 text-sm text-muted-foreground">Sign up to start creating your portfolio</p>
          </div>
          <div className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="first-name">First name</Label>
                <Input id="first-name" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="last-name">Last name</Label>
                <Input id="last-name" />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="name@example.com" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" type="password" />
            </div>
            <Button className="w-full">Sign Up</Button>
            <div className="text-center text-sm">
              Already have an account?{" "}
              <Link href="/login" className="text-primary hover:underline">
                Sign in
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/templates/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Camera, Grid, LayoutGrid, Rows } from "lucide-react"

export default function TemplatesPage() {
  const templates = [
    {
      id: "grid",
      name: "Grid",
      description: "A clean grid layout perfect for photography portfolios",
      icon: <Grid className="h-8 w-8" />,
      preview: "/placeholder.svg?height=200&width=300&text=Grid+Template",
    },
    {
      id: "masonry",
      name: "Masonry",
      description: "A Pinterest-style masonry layout for creative portfolios",
      icon: <LayoutGrid className="h-8 w-8" />,
      preview: "/placeholder.svg?height=200&width=300&text=Masonry+Template",
    },
    {
      id: "rows",
      name: "Rows",
      description: "A horizontal row layout with text and images side by side",
      icon: <Rows className="h-8 w-8" />,
      preview: "/placeholder.svg?height=200&width=300&text=Rows+Template",
    },
  ]

return (
    <div className="flex min-h-screen flex-col">
      <header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b">
        <Link href="/" className="flex items-center gap-2 font-bold text-xl">
          <Camera className="h-6 w-6" />
          <span>Vizura</span>
        </Link>
        <nav className="flex gap-4 sm:gap-6">
          <Link href="/templates" className="text-sm font-medium hover:underline underline-offset-4">
            Templates
          </Link>
          <Link href="/features" className="text-sm font-medium hover:underline underline-offset-4">
            Features
          </Link>
          <Link href="/pricing" className="text-sm font-medium hover:underline underline-offset-4">
            Pricing
          </Link>
        </nav>
        <div className="flex items-center gap-4">
          <Link href="/login">
            <Button variant="ghost" size="sm">
              Log In
            </Button>
          </Link>
          <Link href="/signup">
            <Button size="sm">Sign Up</Button>
          </Link>
        </div>
      </header>
      <main className="flex-1 py-12 md:py-24">
        <div className="container px-4 md:px-6">
          <div className="text-center mb-12">
            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl">Portfolio Templates</h1>
            <p className="mt-4 text-muted-foreground md:text-xl">
              Choose from our professionally designed templates to showcase your work
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {templates.map((template) => (
              <Card key={template.id} className="overflow-hidden">
                <CardHeader className="pb-0">
                  <div className="flex items-center gap-2">
                    {template.icon}
                    <CardTitle>{template.name}</CardTitle>
                  </div>
                  <CardDescription>{template.description}</CardDescription>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="overflow-hidden rounded-md">
                    <img
                      src={template.preview || "/placeholder.svg"}
                      alt={`${template.name} template preview`}
                      className="w-full object-cover transition-transform hover:scale-105"
                    />
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full" asChild>
                    <Link href="/signup">Use This Template</Link>
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </main>
      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full border-t px-4 md:px-6">
        <p className="text-xs text-muted-foreground">© 2024 Vizura. All rights reserved.</p>
        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
          <Link href="/terms" className="text-xs hover:underline underline-offset-4">
            Terms of Service
          </Link>
          <Link href="/privacy" className="text-xs hover:underline underline-offset-4">
            Privacy
          </Link>
        </nav>
      </footer>
    </div>
  )
}
</article></body></html>