[V0_FILE]typescriptreact:file="components/mobile-nav.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Menu, X } from "lucide-react" export function MobileNav() { const [open, setOpen] = useState(false) return (

setOpen(false)}> Portfolio

) } [V0_FILE]typescriptreact:file="components/project-card.tsx" isMerged="true" import Image from "next/image" import Link from "next/link" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Github, ExternalLink } from "lucide-react" interface ProjectCardProps { title: string description: string image: string tags: string[] demoUrl: string repoUrl: string } export function ProjectCard({ title, description, image, tags, demoUrl, repoUrl }: ProjectCardProps) { return (

{title}

{description}

{tags.map((tag) => ( {tag} ))}

) } [V0_FILE]typescriptreact:file="components/skill-badge.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" interface SkillBadgeProps { name: string } export function SkillBadge({ name }: SkillBadgeProps) { return ( {name} ) } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card } from "@/components/ui/card" export function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise((resolve) => setTimeout(resolve, 1000)) // Reset form and show success message setFormData({ name: "", email: "", subject: "", message: "" }) setIsSubmitting(false) setIsSubmitted(true) // Hide success message after 5 seconds setTimeout(() => setIsSubmitted(false), 5000) } return ( {isSubmitted ? (

Message Sent!

Thank you for reaching out. I'll get back to you as soon as possible.

) : (

</div>
          <Button type="submit" className="w-full" disabled={isSubmitting}>
            {isSubmitting ? "Sending..." : "Send Message"}
          </Button>
        </form>
      )}
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Modern Portfolio",
  description: "A modern portfolio website built with Next.js and Tailwind CSS",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

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

export function HeroSection() {
  return (
    <section className="py-20 md:py-28">
      <div className="container">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
              Build your professional portfolio in minutes
            </h1>
            <p className="text-xl text-muted-foreground">
              Create stunning, customizable portfolios that showcase your work and impress potential employers. No coding required.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 pt-4">
              <Button size="lg" asChild>
                <Link href="/signup">
                  Get Started
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button size="lg" variant="outline" asChild>
                <Link href="/templates">
                  View Templates
                </Link>
              </Button>
            </div>
            <div className="flex items-center gap-4 text-sm text-muted-foreground">
              <div className="flex -space-x-2">
                <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">J</div>
                <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">S</div>
                <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">M</div>
              </div>
              <p>Join 10,000+ professionals already using PortfolioBuilder</p>
            </div>
          </div>
          <div className="relative">
            <div className="absolute -inset-1 bg-gradient-to-r from-primary to-primary/50 rounded-lg blur-lg opacity-30"></div>
            <div className="relative bg-card border rounded-lg overflow-hidden shadow-xl">
              <Image 
                src="/placeholder.svg?height=600&width=800" 
                width={800}
                height={600}
                alt="Portfolio Builder Preview"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/landing/features-section.tsx" isMerged="true"
import Image from "next/image"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Brush, Code, Eye, Layout, Share2, Sparkles } from 'lucide-react'

export function FeaturesSection() {
  return (
    <section id="features" className="py-20 bg-muted/30">
      <div className="container">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
            Everything you need to build an impressive portfolio
          </h2>
          <p className="text-xl text-muted-foreground">
            Our platform provides all the tools you need to create a professional portfolio that stands out.
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <Card>
            <CardHeader>
              <Layout className="h-10 w-10 text-primary mb-2" />
              <CardTitle>Customizable Templates</CardTitle>
              <CardDescription>
                Choose from dozens of professionally designed templates tailored for different industries.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image 
                src="/placeholder.svg?height=200&width=350" 
                width={350}
                height={200}
                alt="Customizable Templates"
                className="rounded-md border"
              />
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <Eye className="h-10 w-10 text-primary mb-2" />
              <CardTitle>Real-time Preview</CardTitle>
              <CardDescription>
                See changes to your portfolio in real-time as you make them with our live preview feature.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image 
                src="/placeholder.svg?height=200&width=350" 
                width={350}
                height={200}
                alt="Real-time Preview"
                className="rounded-md border"
              />
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <Brush className="h-10 w-10 text-primary mb-2" />
              <CardTitle>Drag-and-Drop Editor</CardTitle>
              <CardDescription>
                Easily customize your portfolio with our intuitive drag-and-drop interface.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image 
                src="/placeholder.svg?height=200&width=350" 
                width={350}
                height={200}
                alt="Drag-and-Drop Editor"
                className="rounded-md border"
              />
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <Share2 className="h-10 w-10 text-primary mb-2" />
              <CardTitle>Social Media Integration</CardTitle>
              <CardDescription>
                Connect your social media accounts and share your portfolio across platforms.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image 
                src="/placeholder.svg?height=200&width=350" 
                width={350}
                height={200}
                alt="Social Media Integration"
                className="rounded-md border"
              />
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <Code className="h-10 w-10 text-primary mb-2" />
              <CardTitle>Custom Domain</CardTitle>
              <CardDescription>
                Use your own domain name for a more professional and personalized portfolio.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image 
                src="/placeholder.svg?height=200&width=350" 
                width={350}
                height={200}
                alt="Custom Domain"
                className="rounded-md border"
              />
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <Sparkles className="h-10 w-10 text-primary mb-2" />
              <CardTitle>PDF Export</CardTitle>
              <CardDescription>
                Download your portfolio as a PDF resume to share with potential employers.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image 
                src="/placeholder.svg?height=200&width=350" 
                width={350}
                height={200}
                alt="PDF Export"
                className="rounded-md border"
              />
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/landing/pricing-section.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 PricingSection() {
  return (
    <section id="pricing" className="py-20 bg-muted/30">
      <div className="container">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
            Simple, transparent pricing
          </h2>
          <p className="text-xl text-muted-foreground">
            Choose the plan that's right for you and start building your professional portfolio today.
          </p>
        </div>
        
        <div className="grid md:grid-cols-3 gap-8">
          <Card className="flex flex-col border-muted">
            <CardHeader>
              <CardTitle>Free</CardTitle>
              <div className="mt-4 flex items-baseline text-5xl font-bold">
                $0<span className="ml-1 text-xl text-muted-foreground">/mo</span>
              </div>
              <CardDescription className="mt-4">
                Perfect for getting started with basic features.
              </CardDescription>
            </CardHeader>
            <CardContent className="flex-1">
              <ul className="space-y-3">
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>1 portfolio site</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Basic templates</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>PortfolioBuilder subdomain</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>PDF export</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Community support</span>
                </li>
              </ul>
            </CardContent>
            <CardFooter>
              <Button variant="outline" className="w-full" asChild>
                <Link href="/signup?plan=free">
                  Get Started
                </Link>
              </Button>
            </CardFooter>
          </Card>
          
          <Card className="flex flex-col relative border-primary">
            <div className="absolute top-0 right-0 transform translate-x-2 -translate-y-2">
              <span className="bg-primary text-primary-foreground text-xs font-medium px-2 py-1 rounded-md">
                Popular
              </span>
            </div>
            <CardHeader>
              <CardTitle>Pro</CardTitle>
              <div className="mt-4 flex items-baseline text-5xl font-bold">
                $12<span className="ml-1 text-xl text-muted-foreground">/mo</span>
              </div>
              <CardDescription className="mt-4">
                For professionals who need more features and customization.
              </CardDescription>
            </CardHeader>
            <CardContent className="flex-1">
              <ul className="space-y-3">
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Up to 3 portfolio sites</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>All templates</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Custom domain</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Advanced analytics</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Priority support</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Remove PortfolioBuilder branding</span>
                </li>
              </ul>
            </CardContent>
            <CardFooter>
              <Button className="w-full" asChild>
                <Link href="/signup?plan=pro">
                  Get Started
                </Link>
              </Button>
            </CardFooter>
          </Card>
          
          <Card className="flex flex-col border-muted">
            <CardHeader>
              <CardTitle>Business</CardTitle>
              <div className="mt-4 flex items-baseline text-5xl font-bold">
                $29<span className="ml-1 text-xl text-muted-foreground">/mo</span>
              </div>
              <CardDescription className="mt-4">
                For teams and businesses with advanced needs.
              </CardDescription>
            </CardHeader>
            <CardContent className="flex-1">
              <ul className="space-y-3">
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Unlimited portfolio sites</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>All Pro features</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Team collaboration</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>API access</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Dedicated account manager</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-4 w-4 text-primary mr-2" />
                  <span>Custom branding</span>
                </li>
              </ul>
            </CardContent>
            <CardFooter>
              <Button variant="outline" className="w-full" asChild>
                <Link href="/signup?plan=business">
                  Get Started
                </Link>
              </Button>
            </CardFooter>
          </Card>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/landing/testimonials-section.tsx" isMerged="true"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Star } from "lucide-react"

export function TestimonialsSection() {
  return (
    <section className="py-20 bg-muted/30">
      <div className="container">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">Loved by professionals worldwide</h2>
          <p className="text-xl text-muted-foreground">
            See what our users have to say about their experience with PortfolioBuilder.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <Card>
            <CardContent className="pt-6">
              <div className="flex mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="h-5 w-5 fill-primary text-primary" />
                ))}
              </div>
              <p className="text-muted-foreground">
                "PortfolioBuilder helped me create a stunning portfolio that landed me my dream job. The templates are
                beautiful and the customization options are endless."
              </p>
            </CardContent>
            <CardFooter className="flex items-center gap-4 pt-4 border-t">
              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">
                JD
              </div>
              <div>
                <p className="font-medium">Jane Doe</p>
                <p className="text-sm text-muted-foreground">UX Designer</p>
              </div>
            </CardFooter>
          </Card>

<Card>
            <CardContent className="pt-6">
              <div className="flex mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="h-5 w-5 fill-primary text-primary" />
                ))}
              </div>
              <p className="text-muted-foreground">
                "As a freelance developer, having a professional portfolio is essential. PortfolioBuilder made it easy
                to showcase my projects and skills in a way that impresses clients."
              </p>
            </CardContent>
            <CardFooter className="flex items-center gap-4 pt-4 border-t">
              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">
                MS
              </div>
              <div>
                <p className="font-medium">Michael Smith</p>
                <p className="text-sm text-muted-foreground">Frontend Developer</p>
              </div>
            </CardFooter>
          </Card>

<Card>
            <CardContent className="pt-6">
              <div className="flex mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="h-5 w-5 fill-primary text-primary" />
                ))}
              </div>
              <p className="text-muted-foreground">
                "The real-time preview feature is a game-changer. I was able to create and publish my portfolio in less
                than an hour. Highly recommend!"
              </p>
            </CardContent>
            <CardFooter className="flex items-center gap-4 pt-4 border-t">
              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">
                AJ
              </div>
              <div>
                <p className="font-medium">Alex Johnson</p>
                <p className="text-sm text-muted-foreground">Graphic Designer</p>
              </div>
            </CardFooter>
          </Card>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/landing/faq-section.tsx" isMerged="true"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function FAQSection() {
  return (
    <section id="faq" className="py-20">
      <div className="container">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
            Frequently asked questions
          </h2>
          <p className="text-xl text-muted-foreground">
            Find answers to common questions about PortfolioBuilder.
          </p>
        </div>
        
        <div className="max-w-3xl mx-auto">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="item-1">
              <AccordionTrigger>Do I need coding skills to use PortfolioBuilder?</AccordionTrigger>
              <AccordionContent>
                No, PortfolioBuilder is designed to be completely no-code. Our drag-and-drop editor and customizable templates make it easy for anyone to create a professional portfolio without any coding knowledge.
              </AccordionContent>
            </AccordionItem>
            
            <AccordionItem value="item-2">
              <AccordionTrigger>Can I use my own domain name?</AccordionTrigger>
              <AccordionContent>
                Yes, our Pro and Business plans allow you to connect your own custom domain to your portfolio. We provide easy-to-follow instructions to set up your domain with your portfolio.
              </AccordionContent>
            </AccordionItem>
            
            <AccordionItem value="item-3">
              <AccordionTrigger>How many projects can I showcase in my portfolio?</AccordionTrigger>
              <AccordionContent>
                There is no limit to the number of projects you can showcase in your portfolio, regardless of which plan you choose. You can add as many projects as you need to highlight your skills and experience.
              </AccordionContent>
            </AccordionItem>
            
            <AccordionItem value="item-4">
              <AccordionTrigger>Can I switch templates after creating my portfolio?</AccordionTrigger>
              <AccordionContent>
                Yes, you can switch templates at any time without losing your content. All your information will be automatically transferred to the new template, which you can then customize to your liking.
              </AccordionContent>
            </AccordionItem>
            
            <AccordionItem value="item-5">
              <AccordionTrigger>Is my portfolio mobile-friendly?</AccordionTrigger>
              <AccordionContent>
                All our templates are fully responsive and look great on all devices, from desktops to tablets and smartphones. You can preview how your portfolio looks on different devices using our preview tool.
              </AccordionContent>
            </AccordionItem>
            
            <AccordionItem value="item-6">
              <AccordionTrigger>Can I export my portfolio as a PDF?</AccordionTrigger>
              <AccordionContent>
                Yes, you can download your portfolio as a PDF resume with a single click. This is perfect for sharing with potential employers or clients who prefer traditional resume formats.
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      </div>
    </section>
  )
}

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

export function CTASection() {
  return (
    <section className="py-20 bg-primary/5">
      <div className="container">
        <div className="max-w-3xl mx-auto text-center space-y-6">
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight">Ready to showcase your work to the world?</h2>
          <p className="text-xl text-muted-foreground">
            Join thousands of professionals who trust PortfolioBuilder to create stunning portfolios.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4 pt-4">
            <Button size="lg" asChild>
              <Link href="/signup">Get Started for Free</Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link href="#templates">Explore Templates</Link>
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { PortfolioList } from "@/components/dashboard/portfolio-list"
import { RecentActivity } from "@/components/dashboard/recent-activity"
import { AnalyticsSummary } from "@/components/dashboard/analytics-summary"
import { TemplateGallery } from "@/components/dashboard/template-gallery"
import Link from "next/link"
import { Plus } from "lucide-react"

export default function DashboardPage() {
  return (
    <DashboardShell>
      <DashboardHeader heading="Dashboard" text="Manage your portfolios and view analytics.">
        <Button asChild>
          <Link href="/dashboard/portfolios/new">
            <Plus className="mr-2 h-4 w-4" />
            New Portfolio
          </Link>
        </Button>
      </DashboardHeader>

<Tabs defaultValue="portfolios" className="space-y-4">
          <TabsList>
            <TabsTrigger value="portfolios">My Portfolios</TabsTrigger>
            <TabsTrigger value="templates">Templates</TabsTrigger>
            <TabsTrigger value="activity">Recent Activity</TabsTrigger>
          </TabsList>

<TabsContent value="activity" className="space-y-4">
            <RecentActivity />
          </TabsContent>
        </Tabs>
      </div>
    </DashboardShell>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/dashboard-header.tsx" isMerged="true"
import type React from "react"
interface DashboardHeaderProps {
  heading: string
  text?: string
  children?: React.ReactNode
}

export function DashboardHeader({ heading, text, children }: DashboardHeaderProps) {
  return (
    <div className="flex items-center justify-between px-2">
      <div className="grid gap-1">
        <h1 className="text-2xl font-bold tracking-tight">{heading}</h1>
        {text && <p className="text-muted-foreground">{text}</p>}
      </div>
      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/dashboard-shell.tsx" isMerged="true"
import type React from "react"
import { DashboardNav } from "@/components/dashboard/dashboard-nav"

interface DashboardShellProps {
  children: React.ReactNode
}

export function DashboardShell({ children }: DashboardShellProps) {
  return (
    <div className="grid min-h-screen w-full md:grid-cols-[240px_1fr] lg:grid-cols-[280px_1fr]">
      <DashboardNav />
      <main className="flex flex-col">
        <div className="flex-1 space-y-8 p-8 pt-6">{children}</div>
      </main>
    </div>
  )
}

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

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { BarChart, Briefcase, CreditCard, Home, LayoutTemplate, LogOut, Settings, Share2 } from "lucide-react"

export function DashboardNav() {
  const pathname = usePathname()

const navItems = [
    {
      title: "Dashboard",
      href: "/dashboard",
      icon: Home,
    },
    {
      title: "Portfolios",
      href: "/dashboard/portfolios",
      icon: Briefcase,
    },
    {
      title: "Templates",
      href: "/dashboard/templates",
      icon: LayoutTemplate,
    },
    {
      title: "Analytics",
      href: "/dashboard/analytics",
      icon: BarChart,
    },
    {
      title: "Social Sharing",
      href: "/dashboard/social",
      icon: Share2,
    },
    {
      title: "Billing",
      href: "/dashboard/billing",
      icon: CreditCard,
    },
    {
      title: "Settings",
      href: "/dashboard/settings",
      icon: Settings,
    },
  ]

return (
    <div className="flex flex-col h-full border-r bg-muted/40">
      <div className="flex h-14 items-center border-b px-4">
        <Link href="/" className="flex items-center space-x-2">
          <span className="font-bold">PortfolioBuilder</span>
        </Link>
      </div>
      <div className="flex-1 overflow-auto py-2">
        <nav className="grid items-start px-2 text-sm">
          {navItems.map((item, index) => {
            const Icon = item.icon
            return (
              <Link
                key={index}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-foreground",
                  pathname === item.href && "bg-muted text-foreground",
                )}
              >
                <Icon className="h-4 w-4" />
                <span>{item.title}</span>
              </Link>
            )
          })}
        </nav>
      </div>
      <div className="mt-auto p-4 border-t">
        <div className="flex items-center gap-3 mb-4 px-2">
          <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">
            U
          </div>
          <div>
            <p className="text-sm font-medium">User Name</p>
            <p className="text-xs text-muted-foreground">user@example.com</p>
          </div>
        </div>
        <Button variant="outline" className="w-full justify-start" size="sm">
          <LogOut className="mr-2 h-4 w-4" />
          Log out
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/analytics-summary.tsx" isMerged="true"
import type React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Eye, Share2, ThumbsUp } from "lucide-react"

export function AnalyticsSummary() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Views</CardTitle>
          <Eye className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">1,234</div>
          <p className="text-xs text-muted-foreground">+12% from last month</p>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Unique Visitors</CardTitle>
          <User className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">567</div>
          <p className="text-xs text-muted-foreground">+5% from last month</p>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Social Shares</CardTitle>
          <Share2 className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">89</div>
          <p className="text-xs text-muted-foreground">+18% from last month</p>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Engagement Rate</CardTitle>
          <ThumbsUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">4.6%</div>
          <p className="text-xs text-muted-foreground">+2% from last month</p>
        </CardContent>
      </Card>
    </div>
  )
}

function User(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
      <circle cx="12" cy="7" r="4" />
    </svg>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/portfolio-list.tsx" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Copy, Edit, Eye, MoreHorizontal, Share2, Trash } from "lucide-react"

export function PortfolioList() {
  // Mock data for portfolios
  const portfolios = [
    {
      id: "1",
      title: "Professional Developer Portfolio",
      slug: "professional-developer",
      status: "published",
      views: 423,
      lastUpdated: "2 days ago",
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
    {
      id: "2",
      title: "Creative Design Portfolio",
      slug: "creative-design",
      status: "draft",
      views: 0,
      lastUpdated: "1 week ago",
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
    {
      id: "3",
      title: "Photography Portfolio",
      slug: "photography",
      status: "published",
      views: 128,
      lastUpdated: "3 days ago",
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
  ]

return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {portfolios.map((portfolio) => (
        <Card key={portfolio.id} className="overflow-hidden">
          <div className="relative aspect-video">
            <Image
              src={portfolio.thumbnail || "/placeholder.svg"}
              alt={portfolio.title}
              fill
              className="object-cover"
            />
            <div className="absolute top-2 right-2">
              <Badge variant={portfolio.status === "published" ? "default" : "secondary"}>
                {portfolio.status === "published" ? "Published" : "Draft"}
              </Badge>
            </div>
          </div>
          <CardContent className="p-4">
            <div className="flex justify-between items-start">
              <div>
                <h3 className="font-semibold truncate">{portfolio.title}</h3>
                <p className="text-sm text-muted-foreground">
                  {portfolio.views} views • Updated {portfolio.lastUpdated}
                </p>
              </div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <MoreHorizontal className="h-4 w-4" />
                    <span className="sr-only">More options</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Edit className="mr-2 h-4 w-4" />
                    Edit
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Eye className="mr-2 h-4 w-4" />
                    Preview
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Share2 className="mr-2 h-4 w-4" />
                    Share
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Copy className="mr-2 h-4 w-4" />
                    Duplicate
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem className="text-destructive focus:text-destructive">
                    <Trash className="mr-2 h-4 w-4" />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </CardContent>
          <CardFooter className="p-4 pt-0 flex gap-2">
            <Button variant="outline" size="sm" className="flex-1" asChild>
              <Link href={`/dashboard/portfolios/${portfolio.id}`}>
                <Edit className="mr-2 h-4 w-4" />
                Edit
              </Link>
            </Button>
            <Button size="sm" className="flex-1" asChild>
              <Link href={`/preview/${portfolio.slug}`} target="_blank">
                <Eye className="mr-2 h-4 w-4" />
                Preview
              </Link>
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/recent-activity.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Edit, Eye, Share2 } from "lucide-react"

export function RecentActivity() {
  // Mock data for recent activity
  const activities = [
    {
      id: "1",
      type: "edit",
      portfolio: "Professional Developer Portfolio",
      time: "2 hours ago",
      icon: Edit,
    },
    {
      id: "2",
      type: "view",
      portfolio: "Professional Developer Portfolio",
      time: "5 hours ago",
      icon: Eye,
      user: "Recruiter from TechCorp",
    },
    {
      id: "3",
      type: "share",
      portfolio: "Creative Design Portfolio",
      time: "1 day ago",
      icon: Share2,
      platform: "LinkedIn",
    },
    {
      id: "4",
      type: "view",
      portfolio: "Photography Portfolio",
      time: "2 days ago",
      icon: Eye,
      user: "Anonymous visitor",
    },
    {
      id: "5",
      type: "edit",
      portfolio: "Photography Portfolio",
      time: "3 days ago",
      icon: Edit,
    },
  ]

return (
    <Card>
      <CardHeader>
        <CardTitle>Recent Activity</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {activities.map((activity) => {
            const Icon = activity.icon

return (
              <div key={activity.id} className="flex items-start gap-4">
                <div className="rounded-full p-2 bg-muted">
                  <Icon className="h-4 w-4" />
                </div>
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium leading-none">
                    {activity.type === "edit" && "You edited "}
                    {activity.type === "view" && (
                      <>
                        <span className="font-semibold">{activity.user}</span> viewed{" "}
                      </>
                    )}
                    {activity.type === "share" && (
                      <>
                        You shared on <span className="font-semibold">{activity.platform}</span>{" "}
                      </>
                    )}
                    <span className="font-semibold">{activity.portfolio}</span>
                  </p>
                  <p className="text-sm text-muted-foreground">{activity.time}</p>
                </div>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/template-gallery.tsx" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export function TemplateGallery() {
  // Mock data for templates
  const templates = [
    {
      id: "1",
      title: "Minimal Developer",
      category: "Developer",
      isPremium: false,
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
    {
      id: "2",
      title: "Creative Designer",
      category: "Designer",
      isPremium: true,
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
    {
      id: "3",
      title: "Professional Resume",
      category: "Business",
      isPremium: false,
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
    {
      id: "4",
      title: "Photography Portfolio",
      category: "Photography",
      isPremium: true,
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
    {
      id: "5",
      title: "Freelancer Showcase",
      category: "Freelancer",
      isPremium: false,
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
    {
      id: "6",
      title: "Agency Portfolio",
      category: "Agency",
      isPremium: true,
      thumbnail: "/placeholder.svg?height=200&width=350",
    },
  ]

return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {templates.map((template) => (
        <Card key={template.id} className="overflow-hidden">
          <div className="relative aspect-video">
            <Image src={template.thumbnail || "/placeholder.svg"} alt={template.title} fill className="object-cover" />
            {template.isPremium && (
              <div className="absolute top-2 right-2">
                <Badge variant="default">Premium</Badge>
              </div>
            )}
          </div>
          <CardContent className="p-4">
            <div>
              <h3 className="font-semibold">{template.title}</h3>
              <p className="text-sm text-muted-foreground">{template.category}</p>
            </div>
          </CardContent>
          <CardFooter className="p-4 pt-0">
            <Button className="w-full" asChild>
              <Link href={`/dashboard/templates/${template.id}`}>Use Template</Link>
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { AdminNav } from "@/components/admin/admin-nav"
import { UserManagement } from "@/components/admin/user-management"
import { TemplateManagement } from "@/components/admin/template-management"
import { AdminAnalytics } from "@/components/admin/admin-analytics"
import { ActivityLogs } from "@/components/admin/activity-logs"

export default function AdminDashboardPage() {
  return (
    <div className="grid min-h-screen w-full md:grid-cols-[240px_1fr] lg:grid-cols-[280px_1fr]">
      <AdminNav />
      <main className="flex flex-col">
        <div className="flex-1 space-y-8 p-8 pt-6">
          <DashboardHeader heading="Admin Dashboard" text="Manage users, templates, and view platform analytics." />

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Users</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,234</div>
                <p className="text-xs text-muted-foreground">+21 in the last 24 hours</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Active Portfolios</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">2,567</div>
                <p className="text-xs text-muted-foreground">+43 in the last 24 hours</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Premium Subscribers</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">432</div>
                <p className="text-xs text-muted-foreground">+8 in the last 24 hours</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Monthly Revenue</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">$12,543</div>
                <p className="text-xs text-muted-foreground">+12% from last month</p>
              </CardContent>
            </Card>
          </div>

<Tabs defaultValue="users" className="space-y-4">
            <TabsList>
              <TabsTrigger value="users">User Management</TabsTrigger>
              <TabsTrigger value="templates">Template Management</TabsTrigger>
              <TabsTrigger value="analytics">Analytics</TabsTrigger>
              <TabsTrigger value="logs">Activity Logs</TabsTrigger>
            </TabsList>

<TabsContent value="logs" className="space-y-4">
              <ActivityLogs />
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}

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

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { BarChart, FileText, Home, LayoutTemplate, LogOut, Settings, Shield, Users } from "lucide-react"

export function AdminNav() {
  const pathname = usePathname()

const navItems = [
    {
      title: "Dashboard",
      href: "/admin",
      icon: Home,
    },
    {
      title: "User Management",
      href: "/admin/users",
      icon: Users,
    },
    {
      title: "Template Management",
      href: "/admin/templates",
      icon: LayoutTemplate,
    },
    {
      title: "Analytics",
      href: "/admin/analytics",
      icon: BarChart,
    },
    {
      title: "Activity Logs",
      href: "/admin/logs",
      icon: FileText,
    },
    {
      title: "Role Management",
      href: "/admin/roles",
      icon: Shield,
    },
    {
      title: "Settings",
      href: "/admin/settings",
      icon: Settings,
    },
  ]

return (
    <div className="flex flex-col h-full border-r bg-muted/40">
      <div className="flex h-14 items-center border-b px-4">
        <Link href="/admin" className="flex items-center space-x-2">
          <span className="font-bold">Admin Dashboard</span>
        </Link>
      </div>
      <div className="flex-1 overflow-auto py-2">
        <nav className="grid items-start px-2 text-sm">
          {navItems.map((item, index) => {
            const Icon = item.icon
            return (
              <Link
                key={index}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-foreground",
                  pathname === item.href && "bg-muted text-foreground",
                )}
              >
                <Icon className="h-4 w-4" />
                <span>{item.title}</span>
              </Link>
            )
          })}
        </nav>
      </div>
      <div className="mt-auto p-4 border-t">
        <div className="flex items-center gap-3 mb-4 px-2">
          <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium">
            A
          </div>
          <div>
            <p className="text-sm font-medium">Admin User</p>
            <p className="text-xs text-muted-foreground">admin@example.com</p>
          </div>
        </div>
        <Button variant="outline" className="w-full justify-start" size="sm">
          <LogOut className="mr-2 h-4 w-4" />
          Log out
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/admin/user-management.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { Edit, MoreHorizontal, Plus, Search, Trash, UserCog } from "lucide-react"

export function UserManagement() {
  const [searchQuery, setSearchQuery] = useState("")

// Mock data for users
  const users = [
    {
      id: "1",
      name: "John Doe",
      email: "john.doe@example.com",
      role: "user",
      plan: "pro",
      status: "active",
      joinedDate: "Jan 15, 2023",
    },
    {
      id: "2",
      name: "Jane Smith",
      email: "jane.smith@example.com",
      role: "user",
      plan: "free",
      status: "active",
      joinedDate: "Feb 3, 2023",
    },
    {
      id: "3",
      name: "Robert Johnson",
      email: "robert.johnson@example.com",
      role: "admin",
      plan: "business",
      status: "active",
      joinedDate: "Nov 12, 2022",
    },
    {
      id: "4",
      name: "Emily Davis",
      email: "emily.davis@example.com",
      role: "user",
      plan: "pro",
      status: "inactive",
      joinedDate: "Mar 21, 2023",
    },
    {
      id: "5",
      name: "Michael Wilson",
      email: "michael.wilson@example.com",
      role: "user",
      plan: "free",
      status: "active",
      joinedDate: "Apr 8, 2023",
    },
  ]

const filteredUsers = users.filter(
    (user) =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="relative w-64">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search users..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          Add User
        </Button>
      </div>

<div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Role</TableHead>
              <TableHead>Plan</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Joined Date</TableHead>
              <TableHead className="w-[80px]">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredUsers.map((user) => (
              <TableRow key={user.id}>
                <TableCell className="font-medium">{user.name}</TableCell>
                <TableCell>{user.email}</TableCell>
                <TableCell>
                  <Badge variant={user.role === "admin" ? "default" : "outline"}>{user.role}</Badge>
                </TableCell>
                <TableCell>
                  <Badge variant={user.plan === "free" ? "outline" : "secondary"}>{user.plan}</Badge>
                </TableCell>
                <TableCell>
                  <Badge variant={user.status === "active" ? "success" : "destructive"}>{user.status}</Badge>
                </TableCell>
                <TableCell>{user.joinedDate}</TableCell>
                <TableCell>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Actions</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>
                        <Edit className="mr-2 h-4 w-4" />
                        Edit
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <UserCog className="mr-2 h-4 w-4" />
                        Change Role
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="text-destructive focus:text-destructive">
                        <Trash className="mr-2 h-4 w-4" />
                        Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}

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

import { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { Edit, Eye, MoreHorizontal, Plus, Search, Trash } from "lucide-react"

export function TemplateManagement() {
  const [searchQuery, setSearchQuery] = useState("")

// Mock data for templates
  const templates = [
    {
      id: "1",
      name: "Minimal Developer",
      category: "Developer",
      isPremium: false,
      status: "active",
      createdDate: "Jan 10, 2023",
      thumbnail: "/placeholder.svg?height=50&width=100",
    },
    {
      id: "2",
      name: "Creative Designer",
      category: "Designer",
      isPremium: true,
      status: "active",
      createdDate: "Feb 15, 2023",
      thumbnail: "/placeholder.svg?height=50&width=100",
    },
    {
      id: "3",
      name: "Professional Resume",
      category: "Business",
      isPremium: false,
      status: "active",
      createdDate: "Mar 5, 2023",
      thumbnail: "/placeholder.svg?height=50&width=100",
    },
    {
      id: "4",
      name: "Photography Portfolio",
      category: "Photography",
      isPremium: true,
      status: "inactive",
      createdDate: "Apr 20, 2023",
      thumbnail: "/placeholder.svg?height=50&width=100",
    },
    {
      id: "5",
      name: "Freelancer Showcase",
      category: "Freelancer",
      isPremium: false,
      status: "active",
      createdDate: "May 8, 2023",
      thumbnail: "/placeholder.svg?height=50&width=100",
    },
  ]

const filteredTemplates = templates.filter(
    (template) =>
      template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      template.category.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="relative w-64">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search templates..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          Add Template
        </Button>
      </div>

<div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Preview</TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Category</TableHead>
              <TableHead>Type</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Created Date</TableHead>
              <TableHead className="w-[80px]">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredTemplates.map((template) => (
              <TableRow key={template.id}>
                <TableCell>
                  <div className="relative w-20 h-10 overflow-hidden rounded border">
                    <Image
                      src={template.thumbnail || "/placeholder.svg"}
                      alt={template.name}
                      fill
                      className="object-cover"
                    />
                  </div>
                </TableCell>
                <TableCell className="font-medium">{template.name}</TableCell>
                <TableCell>{template.category}</TableCell>
                <TableCell>
                  <Badge variant={template.isPremium ? "default" : "outline"}>
                    {template.isPremium ? "Premium" : "Free"}
                  </Badge>
                </TableCell>
                <TableCell>
                  <Badge variant={template.status === "active" ? "success" : "destructive"}>{template.status}</Badge>
                </TableCell>
                <TableCell>{template.createdDate}</TableCell>
                <TableCell>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Actions</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>
                        <Edit className="mr-2 h-4 w-4" />
                        Edit
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Eye className="mr-2 h-4 w-4" />
                        Preview
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="text-destructive focus:text-destructive">
                        <Trash className="mr-2 h-4 w-4" />
                        Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/admin/admin-analytics.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function AdminAnalytics() {
  return (
    <div className="space-y-6">
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="demographics">Demographics</TabsTrigger>
          <TabsTrigger value="usage">Usage Statistics</TabsTrigger>
          <TabsTrigger value="revenue">Revenue</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Users</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,234</div>
                <p className="text-xs text-muted-foreground">+21% from last month</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Active Portfolios</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">2,567</div>
                <p className="text-xs text-muted-foreground">+15% from last month</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">5.2%</div>
                <p className="text-xs text-muted-foreground">+0.5% from last month</p>
              </CardContent>
            </Card>

<div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>User Growth</CardTitle>
                <CardDescription>Monthly user registrations over the past year</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [User Growth Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Revenue Breakdown</CardTitle>
                <CardDescription>Revenue by subscription plan</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Revenue Breakdown Chart]
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="demographics" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Age Distribution</CardTitle>
                <CardDescription>User age demographics</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Age Distribution Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Gender Distribution</CardTitle>
                <CardDescription>User gender demographics</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Gender Distribution Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Geographic Distribution</CardTitle>
                <CardDescription>User locations worldwide</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Geographic Map]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Industry Breakdown</CardTitle>
                <CardDescription>User professional industries</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Industry Breakdown Chart]
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="usage" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Template Popularity</CardTitle>
                <CardDescription>Most used templates</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Template Popularity Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Feature Usage</CardTitle>
                <CardDescription>Most used platform features</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Feature Usage Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>User Engagement</CardTitle>
                <CardDescription>Average time spent on platform</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [User Engagement Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Portfolio Views</CardTitle>
                <CardDescription>Total portfolio views over time</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Portfolio Views Chart]
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="revenue" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Revenue Growth</CardTitle>
                <CardDescription>Monthly revenue over the past year</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Revenue Growth Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Subscription Plans</CardTitle>
                <CardDescription>Distribution of subscription plans</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Subscription Plans Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Churn Rate</CardTitle>
                <CardDescription>Monthly subscription cancellations</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Churn Rate Chart]
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Lifetime Value</CardTitle>
                <CardDescription>Average customer lifetime value</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center bg-muted/40 rounded-md">
                  [Lifetime Value Chart]
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

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

export function ActivityLogs() {
  const [searchQuery, setSearchQuery] = useState("")

// Mock data for activity logs
  const logs = [
    {
      id: "1",
      user: "John Doe",
      action: "login",
      resource: "system",
      timestamp: "2023-06-15 09:23:45",
      ipAddress: "192.168.1.1",
    },
    {
      id: "2",
      user: "Admin User",
      action: "create",
      resource: "template",
      timestamp: "2023-06-15 10:15:22",
      ipAddress: "192.168.1.2",
    },
    {
      id: "3",
      user: "Jane Smith",
      action: "update",
      resource: "portfolio",
      timestamp: "2023-06-15 11:05:17",
      ipAddress: "192.168.1.3",
    },
    {
      id: "4",
      user: "Robert Johnson",
      action: "delete",
      resource: "project",
      timestamp: "2023-06-15 12:45:33",
      ipAddress: "192.168.1.4",
    },
    {
      id: "5",
      user: "Admin User",
      action: "update",
      resource: "user",
      timestamp: "2023-06-15 13:12:09",
      ipAddress: "192.168.1.2",
    },
    {
      id: "6",
      user: "Emily Davis",
      action: "login",
      resource: "system",
      timestamp: "2023-06-15 14:30:51",
      ipAddress: "192.168.1.5",
    },
    {
      id: "7",
      user: "Michael Wilson",
      action: "create",
      resource: "portfolio",
      timestamp: "2023-06-15 15:22:40",
      ipAddress: "192.168.1.6",
    },
  ]

const filteredLogs = logs.filter(
    (log) =>
      log.user.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.action.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.resource.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <div className="relative w-64">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search logs..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <Button variant="outline">Export Logs</Button>
      </div>

<div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>User</TableHead>
              <TableHead>Action</TableHead>
              <TableHead>Resource</TableHead>
              <TableHead>Timestamp</TableHead>
              <TableHead>IP Address</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredLogs.map((log) => (
              <TableRow key={log.id}>
                <TableCell className="font-medium">{log.user}</TableCell>
                <TableCell>
                  <Badge
                    variant={
                      log.action === "create"
                        ? "default"
                        : log.action === "update"
                          ? "secondary"
                          : log.action === "delete"
                            ? "destructive"
                            : "outline"
                    }
                  >
                    {log.action}
                  </Badge>
                </TableCell>
                <TableCell>{log.resource}</TableCell>
                <TableCell>{log.timestamp}</TableCell>
                <TableCell>{log.ipAddress}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}

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

import { useState } from "react"
import { EditorSidebar } from "@/components/editor/editor-sidebar"
import { EditorCanvas } from "@/components/editor/editor-canvas"
import { EditorHeader } from "@/components/editor/editor-header"
import { EditorPreview } from "@/components/editor/editor-preview"

export default function PortfolioEditorPage({ params }: { params: { id: string } }) {
  const [currentView, setCurrentView] = useState<"edit" | "preview">("edit")
  const [autoSave, setAutoSave] = useState(true)
  const [lastSaved, setLastSaved] = useState("Just now")

// Mock portfolio data
  const portfolio = {
    id: params.id,
    title: "Professional Developer Portfolio",
    sections: [
      {
        id: "hero",
        type: "hero",
        title: "John Doe",
        subtitle: "Full-Stack Developer",
        description: "I build modern web applications with React, Node.js, and more.",
        ctaText: "Contact Me",
        ctaLink: "#contact",
        image: "/placeholder.svg?height=400&width=400",
      },
      {
        id: "about",
        type: "about",
        title: "About Me",
        content: "I'm a passionate developer with over 5 years of experience building web applications...",
        image: "/placeholder.svg?height=400&width=600",
      },
      {
        id: "skills",
        type: "skills",
        title: "My Skills",
        skills: [
          { name: "React", level: 90 },
          { name: "Node.js", level: 85 },
          { name: "TypeScript", level: 80 },
          { name: "Next.js", level: 85 },
          { name: "CSS/Tailwind", level: 90 },
          { name: "MongoDB", level: 75 },
        ],
      },
      {
        id: "projects",
        type: "projects",
        title: "My Projects",
        projects: [
          {
            title: "E-commerce Platform",
            description: "A full-stack e-commerce platform with user authentication and payment processing.",
            image: "/placeholder.svg?height=300&width=500",
            tags: ["React", "Node.js", "MongoDB", "Stripe"],
            link: "#",
          },
          {
            title: "Task Management App",
            description: "A collaborative task management application with real-time updates.",
            image: "/placeholder.svg?height=300&width=500",
            tags: ["Next.js", "TypeScript", "Supabase"],
            link: "#",
          },
          {
            title: "Portfolio Website",
            description: "A responsive portfolio website built with modern technologies.",
            image: "/placeholder.svg?height=300&width=500",
            tags: ["React", "Tailwind CSS", "Framer Motion"],
            link: "#",
          },
        ],
      },
      {
        id: "contact",
        type: "contact",
        title: "Get In Touch",
        email: "john.doe@example.com",
        phone: "+1 (555) 123-4567",
        location: "San Francisco, CA",
        socialLinks: [
          { platform: "github", url: "https://github.com" },
          { platform: "linkedin", url: "https://linkedin.com" },
          { platform: "twitter", url: "https://twitter.com" },
        ],
      },
    ],
  }

const handleSave = () => {
    // Save portfolio logic would go here
    setLastSaved("Just now")
  }

return (
    <div className="flex flex-col h-screen">
      <EditorHeader
        title={portfolio.title}
        lastSaved={lastSaved}
        autoSave={autoSave}
        onToggleAutoSave={() => setAutoSave(!autoSave)}
        onSave={handleSave}
        currentView={currentView}
        onChangeView={setCurrentView}
      />

{currentView === "edit" ? (
        <div className="flex flex-1 overflow-hidden">
          <EditorSidebar portfolio={portfolio} />
          <EditorCanvas portfolio={portfolio} />
        </div>
      ) : (
        <EditorPreview portfolio={portfolio} />
      )}
    </div>
  )
}

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

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Eye, Laptop, Pencil, Save, Smartphone, Tablet } from "lucide-react"

interface EditorHeaderProps {
  title: string
  lastSaved: string
  autoSave: boolean
  onToggleAutoSave: () => void
  onSave: () => void
  currentView: "edit" | "preview"
  onChangeView: (view: "edit" | "preview") => void
}

export function EditorHeader({
  title,
  lastSaved,
  autoSave,
  onToggleAutoSave,
  onSave,
  currentView,
  onChangeView,
}: EditorHeaderProps) {
  return (
    <header className="flex items-center justify-between h-14 px-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/dashboard/portfolios">
            <ArrowLeft className="h-4 w-4" />
            <span className="sr-only">Back to portfolios</span>
          </Link>
        </Button>
        <h1 className="text-lg font-semibold">{title}</h1>
      </div>

<div className="flex items-center gap-4">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <span>Last saved: {lastSaved}</span>
          <div className="flex items-center gap-1">
            <span>Auto-save</span>
            <Switch checked={autoSave} onCheckedChange={onToggleAutoSave} />
          </div>
        </div>

<div className="hidden md:flex items-center border rounded-md">
          <Button variant="ghost" size="sm" className="px-3">
            <Smartphone className="h-4 w-4" />
            <span className="sr-only">Mobile view</span>
          </Button>
          <Button variant="ghost" size="sm" className="px-3">
            <Tablet className="h-4 w-4" />
            <span className="sr-only">Tablet view</span>
          </Button>
          <Button variant="ghost" size="sm" className="px-3">
            <Laptop className="h-4 w-4" />
            <span className="sr-only">Desktop view</span>
          </Button>
        </div>

<Button
          variant={currentView === "edit" ? "outline" : "default"}
          size="sm"
          onClick={() => onChangeView(currentView === "edit" ? "preview" : "edit")}
        >
          {currentView === "edit" ? (
            <>
              <Eye className="h-4 w-4 mr-2" />
              Preview
            </>
          ) : (
            <>
              <Pencil className="h-4 w-4 mr-2" />
              Edit
            </>
          )}
        </Button>
      </div>
    </header>
  )
}

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

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Grip, Plus, Trash } from "lucide-react"

interface EditorSidebarProps {
  portfolio: any
}

export function EditorSidebar({ portfolio }: EditorSidebarProps) {
  const [activeTab, setActiveTab] = useState("sections")

return (
    <div className="w-80 border-r bg-muted/40 flex flex-col h-full">
      <Tabs defaultValue="sections" onValueChange={setActiveTab}>
        <TabsList className="w-full grid grid-cols-2">
          <TabsTrigger value="sections">Sections</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>

<TabsContent value="sections" className="flex-1 overflow-auto p-4">
          <div className="space-y-4">
            <Button className="w-full" size="sm">
              <Plus className="h-4 w-4 mr-2" />
              Add Section
            </Button>

<Accordion type="multiple" defaultValue={["hero"]} className="w-full">
              {portfolio.sections.map((section: any) => (
                <AccordionItem key={section.id} value={section.id} className="border rounded-md mb-2">
                  <div className="flex items-center px-4 py-2">
                    <Grip className="h-4 w-4 text-muted-foreground mr-2 cursor-move" />
                    <AccordionTrigger className="flex-1 hover:no-underline py-0">
                      <span className="text-sm font-medium">
                        {section.type.charAt(0).toUpperCase() + section.type.slice(1)}
                      </span>
                    </AccordionTrigger>
                    <Button variant="ghost" size="icon" className="h-8 w-8">
                      <Trash className="h-4 w-4 text-muted-foreground" />
                    </Button>
                  </div>
                  <AccordionContent className="px-4 pb-4 pt-2">
                    <div className="space-y-3">
                      <div className="space-y-1">
                        <label className="text-xs font-medium">Title</label>
                        <Input defaultValue={section.title} className="h-8 text-sm" />
                      </div>

{section.type === "hero" && (
                        <>
                          <div className="space-y-1">
                            <label className="text-xs font-medium">Subtitle</label>
                            <Input defaultValue={section.subtitle} className="h-8 text-sm" />
                          </div>
                          <div className="space-y-1">
                            <label className="text-xs font-medium">Description</label>
                            <Input defaultValue={section.description} className="h-8 text-sm" />
                          </div>
                        </>
                      )}

{section.type === "about" && (
                        <div className="space-y-1">
                          <label className="text-xs font-medium">Content</label>
                          <textarea
                            defaultValue={section.content}
                            className="w-full min-h-[100px] rounded-md border border-input bg-transparent px-3 py-2 text-sm"
                          />
                        </div>
                      )}

{section.type === "skills" && (
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <label className="text-xs font-medium">Skills</label>
                            <Button variant="ghost" size="sm" className="h-6 text-xs">
                              <Plus className="h-3 w-3 mr-1" />
                              Add Skill
                            </Button>
                          </div>
                          {section.skills.map((skill: any, index: number) => (
                            <div key={index} className="flex items-center gap-2">
                              <Input defaultValue={skill.name} className="h-8 text-sm" />
                              <Input
                                type="number"
                                defaultValue={skill.level}
                                min="0"
                                max="100"
                                className="h-8 text-sm w-16"
                              />
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Trash className="h-4 w-4 text-muted-foreground" />
                              </Button>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </TabsContent>

<TabsContent value="settings" className="flex-1 overflow-auto p-4">
          <div className="space-y-4">
            <div className="space-y-1">
              <label className="text-sm font-medium">Portfolio Title</label>
              <Input defaultValue={portfolio.title} />
            </div>

<div className="space-y-1">
              <label className="text-sm font-medium">SEO Description</label>
              <textarea
                className="w-full min-h-[100px] rounded-md border border-input bg-transparent px-3 py-2 text-sm"
                placeholder="Enter a description for search engines..."
              />
            </div>

<div className="space-y-1">
              <label className="text-sm font-medium">Custom Domain</label>
              <Input placeholder="yourdomain.com" />
              <p className="text-xs text-muted-foreground mt-1">Available on Pro and Business plans</p>
            </div>

<div className="space-y-1">
              <label className="text-sm font-medium">Theme</label>
              <div className="grid grid-cols-3 gap-2">
                <div className="border rounded-md p-2 flex items-center justify-center aspect-square cursor-pointer hover:border-primary">
                  <span className="text-xs">Light</span>
                </div>
                <div className="border rounded-md p-2 flex items-center justify-center aspect-square cursor-pointer hover:border-primary bg-zinc-900 text-white">
                  <span className="text-xs">Dark</span>
                </div>
                <div className="border rounded-md p-2 flex items-center justify-center aspect-square cursor-pointer hover:border-primary bg-gradient-to-b from-white to-zinc-900 text-zinc-900">
                  <span className="text-xs">Auto</span>
                </div>
              </div>
            </div>

<div className="space-y-1">
              <label className="text-sm font-medium">Primary Color</label>
              <div className="flex gap-2">
                <div className="w-8 h-8 rounded-md bg-primary"></div>
                <Input defaultValue="#0070f3" />
              </div>
            </div>

<div className="space-y-1">
              <label className="text-sm font-medium">Font</label>
              <select className="w-full h-10 rounded-md border border-input bg-transparent px-3 py-2 text-sm">
                <option>Inter</option>
                <option>Roboto</option>
                <option>Open Sans</option>
                <option>Montserrat</option>
                <option>Poppins</option>
              </select>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

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

import type React from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Github, Linkedin, Mail, MapPin, Phone, Twitter } from "lucide-react"

interface EditorCanvasProps {
  portfolio: any
}

export function EditorCanvas({ portfolio }: EditorCanvasProps) {
  return (
    <div className="flex-1 overflow-auto bg-muted/20 p-8">
      <div className="max-w-4xl mx-auto bg-background rounded-lg shadow-sm border">
        {portfolio.sections.map((section: any) => (
          <div key={section.id} className="relative group">
            <div className="absolute -left-4 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity">
              <div className="flex flex-col gap-1">
                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full bg-background shadow-sm border">
                  <ChevronUp className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full bg-background shadow-sm border">
                  <ChevronDown className="h-4 w-4" />
                </Button>
              </div>
            </div>

{section.type === "hero" && (
              <section className="py-20 px-8 text-center">
                <div className="relative w-32 h-32 mx-auto mb-6 overflow-hidden rounded-full border-4 border-primary/20">
                  <Image src={section.image || "/placeholder.svg"} alt={section.title} fill className="object-cover" />
                </div>
                <h1 className="text-4xl font-bold mb-2">{section.title}</h1>
                <h2 className="text-xl text-muted-foreground mb-4">{section.subtitle}</h2>
                <p className="max-w-2xl mx-auto mb-8">{section.description}</p>
                <Button asChild>
                  <a href={section.ctaLink}>{section.ctaText}</a>
                </Button>
              </section>
            )}

{section.type === "about" && (
              <section className="py-16 px-8">
                <div className="grid md:grid-cols-2 gap-8 items-center">
                  <div>
                    <h2 className="text-3xl font-bold mb-4">{section.title}</h2>
                    <p className="text-muted-foreground">{section.content}</p>
                  </div>
                  <div className="relative aspect-square overflow-hidden rounded-lg">
                    <Image
                      src={section.image || "/placeholder.svg"}
                      alt={section.title}
                      fill
                      className="object-cover"
                    />
                  </div>
                </div>
              </section>
            )}

{section.type === "skills" && (
              <section className="py-16 px-8 bg-muted/20">
                <h2 className="text-3xl font-bold mb-8 text-center">{section.title}</h2>
                <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
                  {section.skills.map((skill: any, index: number) => (
                    <div key={index} className="space-y-2">
                      <div className="flex justify-between">
                        <span className="font-medium">{skill.name}</span>
                        <span>{skill.level}%</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-2.5">
                        <div className="bg-primary h-2.5 rounded-full" style={{ width: `${skill.level}%` }}></div>
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            )}

{section.type === "projects" && (
              <section className="py-16 px-8">
                <h2 className="text-3xl font-bold mb-8 text-center">{section.title}</h2>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {section.projects.map((project: any, index: number) => (
                    <Card key={index} className="overflow-hidden">
                      <div className="relative aspect-video">
                        <Image
                          src={project.image || "/placeholder.svg"}
                          alt={project.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div className="p-4">
                        <h3 className="font-semibold mb-2">{project.title}</h3>
                        <p className="text-sm text-muted-foreground mb-4">{project.description}</p>
                        <div className="flex flex-wrap gap-2 mb-4">
                          {project.tags.map((tag: string, tagIndex: number) => (
                            <Badge key={tagIndex} variant="secondary">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                        <Button variant="outline" size="sm" asChild>
                          <a href={project.link} target="_blank" rel="noopener noreferrer">
                            View Project
                          </a>
                        </Button>
                      </div>
                    </Card>
                  ))}
                </div>
              </section>
            )}

{section.type === "contact" && (
              <section className="py-16 px-8 bg-muted/20">
                <h2 className="text-3xl font-bold mb-8 text-center">{section.title}</h2>
                <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                  <div className="space-y-6">
                    <div className="flex items-center gap-3">
                      <Mail className="h-5 w-5 text-primary" />
                      <span>{section.email}</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Phone className="h-5 w-5 text-primary" />
                      <span>{section.phone}</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <MapPin className="h-5 w-5 text-primary" />
                      <span>{section.location}</span>
                    </div>
                    <div className="flex items-center gap-4 pt-4">
                      {section.socialLinks.map((link: any, index: number) => {
                        const Icon =
                          link.platform === "github"
                            ? Github
                            : link.platform === "linkedin"
                              ? Linkedin
                              : link.platform === "twitter"
                                ? Twitter
                                : Mail

return (
                          <a
                            key={index}
                            href={link.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-muted-foreground hover:text-primary transition-colors"
                          >
                            <Icon className="h-5 w-5" />
                            <span className="sr-only">{link.platform}</span>
                          </a>
                        )
                      })}
                    </div>
                  </div>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Name</label>
                      <Input placeholder="Your name" />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Email</label>
                      <Input type="email" placeholder="Your email" />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Message</label>
                      <textarea
                        className="w-full min-h-[120px] rounded-md border border-input bg-transparent px-3 py-2 text-sm"
                        placeholder="Your message"
                      />
                    </div>
                    <Button className="w-full">Send Message</Button>
                  </div>
                </div>
              </section>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function ChevronUp(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m18 15-6-6-6 6" />
    </svg>
  )
}

function ChevronDown(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m6 9 6 6 6-6" />
    </svg>
  )
}

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

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Github, Linkedin, Mail, MapPin, Phone, Twitter } from "lucide-react"

interface EditorPreviewProps {
  portfolio: any
}

export function EditorPreview({ portfolio }: EditorPreviewProps) {
  return (
    <div className="flex-1 overflow-auto">
      <div className="min-h-screen bg-background">
        {portfolio.sections.map((section: any) => (
          <div key={section.id}>
            {section.type === "hero" && (
              <section className="py-20 px-8 text-center">
                <div className="relative w-32 h-32 mx-auto mb-6 overflow-hidden rounded-full border-4 border-primary/20">
                  <Image src={section.image || "/placeholder.svg"} alt={section.title} fill className="object-cover" />
                </div>
                <h1 className="text-4xl font-bold mb-2">{section.title}</h1>
                <h2 className="text-xl text-muted-foreground mb-4">{section.subtitle}</h2>
                <p className="max-w-2xl mx-auto mb-8">{section.description}</p>
                <Button asChild>
                  <a href={section.ctaLink}>{section.ctaText}</a>
                </Button>
              </section>
            )}

{section.type === "about" && (
              <section className="py-16 px-8">
                <div className="max-w-6xl mx-auto">
                  <div className="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                      <h2 className="text-3xl font-bold mb-4">{section.title}</h2>
                      <p className="text-muted-foreground">{section.content}</p>
                    </div>
                    <div className="relative aspect-square overflow-hidden rounded-lg">
                      <Image
                        src={section.image || "/placeholder.svg"}
                        alt={section.title}
                        fill
                        className="object-cover"
                      />
                    </div>
                  </div>
                </div>
              </section>
            )}

{section.type === "skills" && (
              <section className="py-16 px-8 bg-muted/20">
                <div className="max-w-6xl mx-auto">
                  <h2 className="text-3xl font-bold mb-8 text-center">{section.title}</h2>
                  <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
                    {section.skills.map((skill: any, index: number) => (
                      <div key={index} className="space-y-2">
                        <div className="flex justify-between">
                          <span className="font-medium">{skill.name}</span>
                          <span>{skill.level}%</span>
                        </div>
                        <div className="w-full bg-muted rounded-full h-2.5">
                          <div className="bg-primary h-2.5 rounded-full" style={{ width: `${skill.level}%` }}></div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </section>
            )}

{section.type === "projects" && (
              <section className="py-16 px-8">
                <div className="max-w-6xl mx-auto">
                  <h2 className="text-3xl font-bold mb-8 text-center">{section.title}</h2>
                  <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {section.projects.map((project: any, index: number) => (
                      <Card key={index} className="overflow-hidden">
                        <div className="relative aspect-video">
                          <Image
                            src={project.image || "/placeholder.svg"}
                            alt={project.title}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <div className="p-4">
                          <h3 className="font-semibold mb-2">{project.title}</h3>
                          <p className="text-sm text-muted-foreground mb-4">{project.description}</p>
                          <div className="flex flex-wrap gap-2 mb-4">
                            {project.tags.map((tag: string, tagIndex: number) => (
                              <Badge key={tagIndex} variant="secondary">
                                {tag}
                              </Badge>
                            ))}
                          </div>
                          <Button variant="outline" size="sm" asChild>
                            <a href={project.link} target="_blank" rel="noopener noreferrer">
                              View Project
                            </a>
                          </Button>
                        </div>
                      </Card>
                    ))}
                  </div>
                </div>
              </section>
            )}

{section.type === "contact" && (
              <section className="py-16 px-8 bg-muted/20">
                <div className="max-w-6xl mx-auto">
                  <h2 className="text-3xl font-bold mb-8 text-center">{section.title}</h2>
                  <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                    <div className="space-y-6">
                      <div className="flex items-center gap-3">
                        <Mail className="h-5 w-5 text-primary" />
                        <span>{section.email}</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <Phone className="h-5 w-5 text-primary" />
                        <span>{section.phone}</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <MapPin className="h-5 w-5 text-primary" />
                        <span>{section.location}</span>
                      </div>
                      <div className="flex items-center gap-4 pt-4">
                        {section.socialLinks.map((link: any, index: number) => {
                          const Icon =
                            link.platform === "github"
                              ? Github
                              : link.platform === "linkedin"
                                ? Linkedin
                                : link.platform === "twitter"
                                  ? Twitter
                                  : Mail

return (
                            <a
                              key={index}
                              href={link.url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-muted-foreground hover:text-primary transition-colors"
                            >
                              <Icon className="h-5 w-5" />
                              <span className="sr-only">{link.platform}</span>
                            </a>
                          )
                        })}
                      </div>
                    </div>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <label className="text-sm font-medium">Name</label>
                        <input
                          className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm"
                          placeholder="Your name"
                        />
                      </div>
                      <div className="space-y-2">
                        <label className="text-sm font-medium">Email</label>
                        <input
                          type="email"
                          className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm"
                          placeholder="Your email"
                        />
                      </div>
                      <div className="space-y-2">
                        <label className="text-sm font-medium">Message</label>
                        <textarea
                          className="w-full min-h-[120px] rounded-md border border-input bg-background px-3 py-2 text-sm"
                          placeholder="Your message"
                        />
                      </div>
                      <Button className="w-full">Send Message</Button>
                    </div>
                  </div>
                </div>
              </section>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Download, Eye, Github, Share2 } from "lucide-react"
import { TemplateCard } from "@/components/template-card"

export default function Home() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between py-4">
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-xl font-bold">PortfolioBuilder</span>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex gap-6">
            <Link href="/features" className="text-sm font-medium transition-colors hover:text-primary">
              Features
            </Link>
            <Link href="/pricing" className="text-sm font-medium transition-colors hover:text-primary">
              Pricing
            </Link>
            <Link href="/templates" className="text-sm font-medium transition-colors hover:text-primary">
              Templates
            </Link>
            <Link href="/faq" className="text-sm font-medium transition-colors hover:text-primary">
              FAQ
            </Link>
          </nav>

<main>
        {/* Hero Section */}
        <section className="py-20 md:py-28">
          <div className="container">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div className="space-y-6">
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
                  Build your professional portfolio in minutes
                </h1>
                <p className="text-xl text-muted-foreground">
                  Create stunning, customizable portfolios that showcase your work and impress potential employers. No
                  coding required.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 pt-4">
                  <Button size="lg" asChild>
                    <Link href="/signup">
                      Get Started
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                  <Button size="lg" variant="outline" asChild>
                    <Link href="/templates">View Templates</Link>
                  </Button>
                </div>
              </div>
              <div className="relative">
                <div className="absolute -inset-1 bg-gradient-to-r from-primary to-primary/50 rounded-lg blur-lg opacity-30"></div>
                <div className="relative bg-card border rounded-lg overflow-hidden shadow-xl">
                  <Image
                    src="/placeholder.svg?height=600&width=800"
                    width={800}
                    height={600}
                    alt="Portfolio Builder Preview"
                    className="w-full h-auto"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

{/* How It Works Section */}
        <section className="py-20 bg-muted/30">
          <div className="container">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">How It Works</h2>
              <p className="text-xl text-muted-foreground">Create your professional portfolio in three simple steps</p>
            </div>

<div className="grid md:grid-cols-3 gap-8">
              <Card className="bg-background">
                <CardContent className="pt-6">
                  <div className="rounded-full w-12 h-12 bg-primary/10 text-primary flex items-center justify-center mb-4 text-xl font-bold">
                    1
                  </div>
                  <h3 className="text-xl font-bold mb-2">Choose a Template</h3>
                  <p className="text-muted-foreground">
                    Browse our collection of professionally designed templates tailored for different industries.
                  </p>
                </CardContent>
              </Card>

<Card className="bg-background">
                <CardContent className="pt-6">
                  <div className="rounded-full w-12 h-12 bg-primary/10 text-primary flex items-center justify-center mb-4 text-xl font-bold">
                    2
                  </div>
                  <h3 className="text-xl font-bold mb-2">Customize Content</h3>
                  <p className="text-muted-foreground">
                    Add your information, projects, skills, and experience with our easy-to-use editor.
                  </p>
                </CardContent>
              </Card>

<Card className="bg-background">
                <CardContent className="pt-6">
                  <div className="rounded-full w-12 h-12 bg-primary/10 text-primary flex items-center justify-center mb-4 text-xl font-bold">
                    3
                  </div>
                  <h3 className="text-xl font-bold mb-2">Share & Download</h3>
                  <p className="text-muted-foreground">
                    Preview your portfolio, share it online, or download as a PDF to use anywhere.
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Featured Templates Section */}
        <section className="py-20">
          <div className="container">
            <div className="flex justify-between items-center mb-12">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-2">Featured Templates</h2>
                <p className="text-muted-foreground">Choose from our collection of professionally designed templates</p>
              </div>
              <Link href="/templates">
                <Button variant="outline">
                  View All Templates
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
            </div>

{/* Features Section */}
        <section className="py-20 bg-muted/30">
          <div className="container">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">Powerful Features</h2>
              <p className="text-xl text-muted-foreground">Everything you need to create a professional portfolio</p>
            </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="flex flex-col items-center text-center p-6">
                <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <Eye className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold mb-2">Real-time Preview</h3>
                <p className="text-muted-foreground">See changes to your portfolio in real-time as you make them.</p>
              </div>

<div className="flex flex-col items-center text-center p-6">
                <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <Download className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold mb-2">PDF Export</h3>
                <p className="text-muted-foreground">Download your portfolio as a PDF to share or print.</p>
              </div>

<div className="flex flex-col items-center text-center p-6">
                <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <Share2 className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold mb-2">Social Sharing</h3>
                <p className="text-muted-foreground">Share your portfolio on social media platforms with one click.</p>
              </div>

<div className="flex flex-col items-center text-center p-6">
                <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    className="h-8 w-8 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M2 12H22"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Custom Domain</h3>
                <p className="text-muted-foreground">Use your own domain name for a more professional portfolio.</p>
              </div>

<div className="flex flex-col items-center text-center p-6">
                <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    className="h-8 w-8 text-primary"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M20 14.66V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V6C2 5.46957 2.21071 4.96086 2.58579 4.58579C2.96086 4.21071 3.46957 4 4 4H9.34"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M18 2L22 6L12 16H8V12L18 2Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Easy Editing</h3>
                <p className="text-muted-foreground">Simple drag-and-drop interface for customizing your portfolio.</p>
              </div>

<div className="flex flex-col items-center text-center p-6">
                <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <Github className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold mb-2">Deploy to Vercel</h3>
                <p className="text-muted-foreground">
                  Deploy your portfolio to Vercel with one click for fast hosting.
                </p>
              </div>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="py-20">
          <div className="container">
            <div className="max-w-4xl mx-auto text-center bg-primary/5 rounded-lg p-12">
              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
                Ready to build your professional portfolio?
              </h2>
              <p className="text-xl text-muted-foreground mb-8">
                Join thousands of professionals who trust PortfolioBuilder to showcase their work.
              </p>
              <div className="flex flex-col sm:flex-row justify-center gap-4">
                <Button size="lg" asChild>
                  <Link href="/signup">Get Started for Free</Link>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <Link href="/templates">Explore Templates</Link>
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>

{/* Footer */}
      <footer className="border-t py-12 bg-muted/40">
        <div className="container">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
            <div>
              <h3 className="font-bold mb-4">Product</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="/features" className="text-muted-foreground hover:text-foreground">
                    Features
                  </Link>
                </li>
                <li>
                  <Link href="/templates" className="text-muted-foreground hover:text-foreground">
                    Templates
                  </Link>
                </li>
                <li>
                  <Link href="/pricing" className="text-muted-foreground hover:text-foreground">
                    Pricing
                  </Link>
                </li>
                <li>
                  <Link href="/faq" className="text-muted-foreground hover:text-foreground">
                    FAQ
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Company</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="/about" className="text-muted-foreground hover:text-foreground">
                    About
                  </Link>
                </li>
                <li>
                  <Link href="/blog" className="text-muted-foreground hover:text-foreground">
                    Blog
                  </Link>
                </li>
                <li>
                  <Link href="/careers" className="text-muted-foreground hover:text-foreground">
                    Careers
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="text-muted-foreground hover:text-foreground">
                    Contact
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Legal</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="/privacy" className="text-muted-foreground hover:text-foreground">
                    Privacy Policy
                  </Link>
                </li>
                <li>
                  <Link href="/terms" className="text-muted-foreground hover:text-foreground">
                    Terms of Service
                  </Link>
                </li>
                <li>
                  <Link href="/cookies" className="text-muted-foreground hover:text-foreground">
                    Cookie Policy
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Connect</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="https://twitter.com" className="text-muted-foreground hover:text-foreground">
                    Twitter
                  </Link>
                </li>
                <li>
                  <Link href="https://linkedin.com" className="text-muted-foreground hover:text-foreground">
                    LinkedIn
                  </Link>
                </li>
                <li>
                  <Link href="https://github.com" className="text-muted-foreground hover:text-foreground">
                    GitHub
                  </Link>
                </li>
                <li>
                  <Link href="https://discord.com" className="text-muted-foreground hover:text-foreground">
                    Discord
                  </Link>
                </li>
              </ul>
            </div>
          </div>
          <div className="border-t pt-8 flex flex-col md:flex-row justify-between items-center">
            <p className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} PortfolioBuilder. All rights reserved.
            </p>
            <div className="flex items-center gap-4 mt-4 md:mt-0">
              <Link href="https://twitter.com" className="text-muted-foreground hover:text-foreground">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-twitter"
                >
                  <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
                </svg>
              </Link>
              <Link href="https://linkedin.com" className="text-muted-foreground hover:text-foreground">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-linkedin"
                >
                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
                  <rect width="4" height="12" x="2" y="9" />
                  <circle cx="4" cy="4" r="2" />
                </svg>
              </Link>
              <Link href="https://github.com" className="text-muted-foreground hover:text-foreground">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-github"
                >
                  <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
                  <path d="M9 18c-4.51 2-5-2-7-2" />
                </svg>
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/template-card.tsx"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface TemplateCardProps {
  title: string
  category: string
  image: string
  isPremium: boolean
}

export function TemplateCard({ title, category, image, isPremium }: TemplateCardProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-lg">
      <div className="relative aspect-[3/4] overflow-hidden">
        <Image
          src={image || "/placeholder.svg"}
          alt={title}
          fill
          className="object-cover transition-transform hover:scale-105"
        />
        {isPremium && (
          <div className="absolute top-2 right-2">
            <Badge variant="default">Premium</Badge>
          </div>
        )}
      </div>
      <CardContent className="p-4">
        <h3 className="font-semibold">{title}</h3>
        <p className="text-sm text-muted-foreground">{category}</p>
      </CardContent>
      <CardFooter className="p-4 pt-0">
        <Button className="w-full" asChild>
          <Link href={`/templates/${title.toLowerCase().replace(/\s+/g, "-")}`}>Use Template</Link>
        </Button>
      </CardFooter>
    </Card>
  )
}

[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 { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Github } from "lucide-react"

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-muted/40 py-12 px-4 sm:px-6 lg:px-8">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold text-center">Log in to your account</CardTitle>
          <CardDescription className="text-center">
            Enter your email and password to log in to your account
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <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" type="submit">
            Log in
          </Button>
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
            </div>
          </div>
          <Button variant="outline" className="w-full" type="button">
            <Github className="mr-2 h-4 w-4" />
            GitHub
          </Button>
        </CardContent>
        <CardFooter className="flex flex-col space-y-4">
          <div className="text-center text-sm">
            Don't have an account?{" "}
            <Link href="/signup" className="text-primary hover:underline">
              Sign up
            </Link>
          </div>
          <div className="text-center text-xs text-muted-foreground">
            By logging in, you agree to our{" "}
            <Link href="/terms" className="underline underline-offset-4 hover:text-primary">
              Terms of Service
            </Link>{" "}
            and{" "}
            <Link href="/privacy" className="underline underline-offset-4 hover:text-primary">
              Privacy Policy
            </Link>
            .
          </div>
        </CardFooter>
      </Card>
    </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 { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Github } from "lucide-react"

export default function SignupPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-muted/40 py-12 px-4 sm:px-6 lg:px-8">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold text-center">Create an account</CardTitle>
          <CardDescription className="text-center">Enter your information to create an account</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="firstName">First name</Label>
              <Input id="firstName" placeholder="John" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="lastName">Last name</Label>
              <Input id="lastName" placeholder="Doe" />
            </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>
          <div className="space-y-2">
            <Label htmlFor="confirmPassword">Confirm password</Label>
            <Input id="confirmPassword" type="password" />
          </div>
          <Button className="w-full" type="submit">
            Sign up
          </Button>
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
            </div>
          </div>
          <Button variant="outline" className="w-full" type="button">
            <Github className="mr-2 h-4 w-4" />
            GitHub
          </Button>
        </CardContent>
        <CardFooter className="flex flex-col space-y-4">
          <div className="text-center text-sm">
            Already have an account?{" "}
            <Link href="/login" className="text-primary hover:underline">
              Log in
            </Link>
          </div>
          <div className="text-center text-xs text-muted-foreground">
            By signing up, you agree to our{" "}
            <Link href="/terms" className="underline underline-offset-4 hover:text-primary">
              Terms of Service
            </Link>{" "}
            and{" "}
            <Link href="/privacy" className="underline underline-offset-4 hover:text-primary">
              Privacy Policy
            </Link>
            .
          </div>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/features/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Check, Download, Eye, Share2 } from "lucide-react"

export default function FeaturesPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between py-4">
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-xl font-bold">PortfolioBuilder</span>
          </Link>

<main>
        {/* Hero Section */}
        <section className="py-20 md:py-28 bg-muted/30">
          <div className="container">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
                Powerful Features for Your Portfolio
              </h1>
              <p className="text-xl text-muted-foreground">
                Everything you need to create, customize, and share your professional portfolio
              </p>
            </div>
          </div>
        </section>

{/* Main Features Section */}
        <section className="py-20">
          <div className="container">
            <div className="grid md:grid-cols-2 gap-16 items-center mb-24">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-4">Real-time Preview</h2>
                <p className="text-lg text-muted-foreground mb-6">
                  See changes to your portfolio in real-time as you make them. Our preview mode allows you to visualize
                  your portfolio exactly as it will appear to visitors.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Instant visual feedback</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Mobile and desktop previews</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Toggle between edit and preview modes</span>
                  </li>
                </ul>
              </div>
              <div className="relative">
                <div className="absolute -inset-1 bg-gradient-to-r from-primary to-primary/50 rounded-lg blur-lg opacity-30"></div>
                <div className="relative bg-card border rounded-lg overflow-hidden shadow-xl">
                  <Image
                    src="/placeholder.svg?height=400&width=600"
                    width={600}
                    height={400}
                    alt="Real-time Preview Feature"
                    className="w-full h-auto"
                  />
                </div>
              </div>
            </div>

<div className="grid md:grid-cols-2 gap-16 items-center mb-24">
              <div className="order-2 md:order-1">
                <div className="relative">
                  <div className="absolute -inset-1 bg-gradient-to-r from-primary to-primary/50 rounded-lg blur-lg opacity-30"></div>
                  <div className="relative bg-card border rounded-lg overflow-hidden shadow-xl">
                    <Image
                      src="/placeholder.svg?height=400&width=600"
                      width={600}
                      height={400}
                      alt="PDF Export Feature"
                      className="w-full h-auto"
                    />
                  </div>
                </div>
              </div>
              <div className="order-1 md:order-2">
                <h2 className="text-3xl font-bold tracking-tight mb-4">PDF Export</h2>
                <p className="text-lg text-muted-foreground mb-6">
                  Download your portfolio as a professionally formatted PDF to share with potential employers or
                  clients, or to keep as a backup.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>High-quality PDF generation</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Customizable PDF layout</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Print-ready format</span>
                  </li>
                </ul>
              </div>
            </div>

<div className="grid md:grid-cols-2 gap-16 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-4">One-Click Deployment</h2>
                <p className="text-lg text-muted-foreground mb-6">
                  Deploy your portfolio to Vercel with a single click for fast, reliable hosting with a custom URL that
                  you can share with anyone.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Instant deployment to Vercel</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Custom domain support</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="h-5 w-5 text-primary" />
                    <span>Automatic HTTPS encryption</span>
                  </li>
                </ul>
              </div>
              <div className="relative">
                <div className="absolute -inset-1 bg-gradient-to-r from-primary to-primary/50 rounded-lg blur-lg opacity-30"></div>
                <div className="relative bg-card border rounded-lg overflow-hidden shadow-xl">
                  <Image
                    src="/placeholder.svg?height=400&width=600"
                    width={600}
                    height={400}
                    alt="Deployment Feature"
                    className="w-full h-auto"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Additional Features Section */}
        <section className="py-20 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight mb-12 text-center">More Powerful Features</h2>

<div className="grid md:grid-cols-3 gap-8">
              <Card>
                <CardHeader>
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                    <Eye className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle>Customizable Templates</CardTitle>
                  <CardDescription>
                    Choose from dozens of professionally designed templates tailored for different industries.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Industry-specific designs</span>
                    </li>
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Fully customizable layouts</span>
                    </li>
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Regular template updates</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                    <Share2 className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle>Social Sharing</CardTitle>
                  <CardDescription>Share your portfolio on social media platforms with one click.</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>One-click social sharing</span>
                    </li>
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Customizable share cards</span>
                    </li>
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Track sharing analytics</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                    <Download className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle>Analytics Dashboard</CardTitle>
                  <CardDescription>Track visits, engagement, and other metrics for your portfolio.</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Visitor tracking</span>
                    </li>
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Engagement metrics</span>
                    </li>
                    <li className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-primary" />
                      <span>Downloadable reports</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>