8f:I[903690,["/chat-static/_next/static/immutable/chunks/24wgnt312c8b6.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/0wwc93vmhyyfd.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/0vy-z01vj9zn4.js","/chat-static/_next/static/immutable/chunks/0ol2dp4k1g4y6.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/immutable/chunks/24wgnt312c8b6.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/0wwc93vmhyyfd.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/0vy-z01vj9zn4.js","/chat-static/_next/static/immutable/chunks/0ol2dp4k1g4y6.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 91:Tb410,[V0_FILE]typescriptreact:file="components/services.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Code, Palette, PenTool, Smartphone } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export function Services() { return (

Services

What I Offer

Professional services tailored to your needs with a focus on quality and attention to detail.

Graphic Design Logos, branding, marketing materials, and more. I create visuals that capture your brand's essence.

Logo Design
Brand Identity
Social Media Graphics
Print Materials


              Web Development
              
                Custom websites built with modern technologies that are fast, responsive, and user-friendly.


            
              
                Custom Websites
                E-commerce Solutions
                CMS Integration
                Web Applications


          
            
              
              UI/UX Design
              
                User-centered design that enhances user experience and drives engagement.
              
            
            
              
                User Interface Design
                User Experience Design
                Wireframing & Prototyping
                Design Systems
              
            
          
          
            
              
              Responsive Design
              
                Websites that look and function perfectly on all devices, from desktops to smartphones.
              
            
            
              
                Mobile-First Approach
                Cross-Browser Compatibility
                Performance Optimization
                Accessibility Compliance


  )
}

[V0_FILE]typescriptreact:file="components/portfolio.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ExternalLink, Maximize2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const portfolioItems = [
  {
    id: 1,
    title: "Brand Identity Design",
    category: "graphic",
    image: "/placeholder.svg?height=600&width=800",
    description: "Complete brand identity design including logo, color palette, typography, and brand guidelines.",
    link: "#",
  },
  {
    id: 2,
    title: "E-commerce Website",
    category: "web",
    image: "/placeholder.svg?height=600&width=800",
    description: "Fully responsive e-commerce website with product catalog, shopping cart, and secure checkout.",
    link: "#",
  },
  {
    id: 3,
    title: "Mobile App UI Design",
    category: "ui",
    image: "/placeholder.svg?height=600&width=800",
    description: "User interface design for a mobile application with a focus on user experience and accessibility.",
    link: "#",
  },
  {
    id: 4,
    title: "Corporate Website Redesign",
    category: "web",
    image: "/placeholder.svg?height=600&width=800",
    description: "Complete redesign of a corporate website to improve user experience and conversion rates.",
    link: "#",
  },
  {
    id: 5,
    title: "Product Packaging Design",
    category: "graphic",
    image: "/placeholder.svg?height=600&width=800",
    description: "Creative packaging design for a consumer product that stands out on the shelf.",
    link: "#",
  },
  {
    id: 6,
    title: "Portfolio Website",
    category: "web",
    image: "/placeholder.svg?height=600&width=800",
    description: "Custom portfolio website for a photographer showcasing their work in a visually appealing way.",
    link: "#",
  },
]

export function Portfolio() {
  const [selectedItem, setSelectedItem] = useState(null)
  const [open, setOpen] = useState(false)
  const [activeTab, setActiveTab] = useState("all")

  const filteredItems =
    activeTab === "all" ? portfolioItems : portfolioItems.filter((item) => item.category === activeTab)

  return (
    
      
        
          
            Portfolio
            My Recent Work
            
              A selection of my recent projects showcasing my skills in graphic design and web development.
            
          
        
        
          
            
              All
              Graphic Design
              Web Development
              UI/UX Design
            
          
          
            
              {filteredItems.map((item, index) => (
                
                  
                    
                  
                  
                    {item.title}
                    {item.description}
                    
                      
                      
                    
                  
                
              ))}
            
          
        
      
      {selectedItem && (
        
          
            
              {selectedItem.title}
              {selectedItem.description}
            
            
              
            
            
              
            
          
        
      )}
    
  )
}

[V0_FILE]typescriptreact:file="components/skills.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { CheckCircle2 } from "lucide-react"

import { Progress } from "@/components/ui/progress"

export function Skills() {
  const designSkills = [
    { name: "Adobe Photoshop", level: 90 },
    { name: "Adobe Illustrator", level: 85 },
    { name: "Adobe XD", level: 80 },
    { name: "Figma", level: 95 },
  ]

  const developmentSkills = [
    { name: "HTML/CSS", level: 95 },
    { name: "JavaScript", level: 85 },
    { name: "React", level: 80 },
    { name: "Next.js", level: 75 },
  ]

  return (
    
      
        
          
            Skills
            My Expertise
            
              A comprehensive overview of my technical skills and proficiency levels.
            
          
        
        
          
            Design Skills
            
              {designSkills.map((skill, index) => (
                
                  
                    {skill.name}
                    {skill.level}%
                  
                  
                
              ))}
            
          
          
            Development Skills
            
              {developmentSkills.map((skill, index) => (
                
                  
                    {skill.name}
                    {skill.level}%
                  
                  
                
              ))}
            
          
        
        
          Additional Skills
          
            {[
              "Responsive Design",
              "UI/UX Design",
              "WordPress",
              "SEO Optimization",
              "Brand Strategy",
              "Typography",
              "Color Theory",
              "Git/GitHub",
            ].map((skill, index) => (
              
                
                {skill}
              
            ))}
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/testimonials.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight, Star } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

const testimonials = [
  {
    id: 1,
    name: "Sarah Johnson",
    role: "Marketing Director",
    company: "TechCorp",
    image: "/placeholder.svg?height=100&width=100",
    content:
      "Working with this designer was an absolute pleasure. They delivered a stunning website that perfectly captured our brand identity. Their attention to detail and creativity exceeded our expectations.",
    rating: 5,
  },
  {
    id: 2,
    name: "Michael Chen",
    role: "Founder",
    company: "StartupX",
    image: "/placeholder.svg?height=100&width=100",
    content:
      "I hired this freelancer for our logo design and brand identity. The results were outstanding! They took the time to understand our vision and translated it into a perfect visual representation of our brand.",
    rating: 5,
  },
  {
    id: 3,
    name: "Emily Rodriguez",
    role: "E-commerce Manager",
    company: "Fashion Boutique",
    image: "/placeholder.svg?height=100&width=100",
    content:
      "Our online store needed a complete redesign, and this developer delivered beyond our expectations. The site is not only beautiful but also performs exceptionally well, leading to increased sales.",
    rating: 5,
  },
  {
    id: 4,
    name: "David Thompson",
    role: "Creative Director",
    company: "Design Studio",
    image: "/placeholder.svg?height=100&width=100",
    content:
      "As a fellow designer, I have high standards. This freelancer met and exceeded them. Their technical skills combined with creative vision make them stand out in the industry.",
    rating: 5,
  },
]

export function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const itemsPerPage = 3
  const totalPages = Math.ceil(testimonials.length / itemsPerPage)

  const nextSlide = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % totalPages)
  }

  const prevSlide = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + totalPages) % totalPages)
  }

  const visibleTestimonials = testimonials.slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)

  return (
    
      
        
          
            Testimonials
            What Clients Say
            
              Don't just take my word for it. Here's what my clients have to say about working with me.
            
          
        
        
          
            {visibleTestimonials.map((testimonial, index) => (
              
                
                  
                    
                      
                    
                    
                      {testimonial.name}
                      
                        {testimonial.role}, {testimonial.company}
                      
                    
                  
                  
                    {[...Array(5)].map((_, i) => (
                      
                    ))}
                  
                  {testimonial.content}
                
              
            ))}
          
          {totalPages > 1 && (
            
              
              
            
          )}
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Mail, MapPin, Phone } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"

export function ContactForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)

    // Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1500))

    toast({
      title: "Message sent!",
      description: "Thank you for your message. I'll get back to you soon.",
    })

    setFormData({
      name: "",
      email: "",
      subject: "",
      message: "",
    })
    setIsSubmitting(false)
  }

  return (
    
      
        
          
            Contact
            Get In Touch
            
              Have a project in mind? Let's discuss how I can help bring your vision to life.
            
          
        
        
          
            
              
                
              
              Phone
              
                
                  +1 (234) 567-8900
                
              
              Monday - Friday, 9am - 5pm EST
            
          
          
            
              
                
              
              Email
              
                
                  contact@designcraft.studio
                
              
              I'll respond to your message within 24 hours
            
          
          
            
              
                
              
              Location
              123 Design Street, Creative City, State 12345, USA
              Available for remote work worldwide
            
          
        
        
          
            
              
                
                  
                    Name
                    
                  
                  
                    Email
                    
                  
                
                
                  Subject
                  
                
                
                  Message
                                  </div>
                <Button
                  type="submit"
                  className="w-full md:w-auto transition-transform hover:scale-105"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? "Sending..." : "Send Message"}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Facebook, Github, Instagram, Linkedin, Twitter } from "lucide-react"

export function Footer() {
  return (
    <footer className="border-t py-6 md:py-8">
      <div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
        <div className="flex flex-col items-center gap-4 md:flex-row md:gap-6">
          <Link href="/" className="font-bold">
            DesignCraft Studio
          </Link>
          <p className="text-center text-sm text-muted-foreground md:text-left">
            © {new Date().getFullYear()} DesignCraft Studio. All rights reserved.
          </p>
        </div>
        <div className="flex gap-4">
          <Link href="#" target="_blank" rel="noopener noreferrer">
            <Twitter className="h-5 w-5 text-muted-foreground hover:text-foreground transition-colors" />
            <span className="sr-only">Twitter</span>
          </Link>
          <Link href="#" target="_blank" rel="noopener noreferrer">
            <Instagram className="h-5 w-5 text-muted-foreground hover:text-foreground transition-colors" />
            <span className="sr-only">Instagram</span>
          </Link>
          <Link href="#" target="_blank" rel="noopener noreferrer">
            <Github className="h-5 w-5 text-muted-foreground hover:text-foreground transition-colors" />
            <span className="sr-only">GitHub</span>
          </Link>
          <Link href="#" target="_blank" rel="noopener noreferrer">
            <Linkedin className="h-5 w-5 text-muted-foreground hover:text-foreground transition-colors" />
            <span className="sr-only">LinkedIn</span>
          </Link>
          <Link href="#" target="_blank" rel="noopener noreferrer">
            <Facebook className="h-5 w-5 text-muted-foreground hover:text-foreground transition-colors" />
            <span className="sr-only">Facebook</span>
          </Link>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isMerged="true" isEdit="true"
export function toast({ title, description }) {
  // This is a simplified version just for the demo
  alert(`${title}\n${description}`)
}

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

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import "./globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"

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

export const metadata: Metadata = {
  title: "DesignCraft Studio | Graphic Designer & Web Developer",
  description: "Portfolio showcasing graphic design and web development projects",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/scroller.tsx" isMerged="true"
import Image from "next/image"

export function Scroller() {
  return (
    <div className="bg-primary py-4 overflow-hidden">
      <div className="flex animate-scroll">
        {[...Array(10)].map((_, i) => (
          <div key={i} className="flex items-center mx-4 text-white">
            <Image src="/dc-logo.png" alt="DC Studio Logo" width={30} height={30} />
            <span className="ml-2 text-lg font-semibold">DesignCraft Studio</span>
          </div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Download } from "lucide-react"

import { Button } from "@/components/ui/button"

export function Hero() {
  return (
    <section id="home" className="relative min-h-screen py-20 md:py-32">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <Image
          src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/39557660_8715283.jpg-4TC8REs2IA9H6ATWNlFYjb4roTHkDE.jpeg"
          alt="Gradient Background"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-white/10 backdrop-blur-[2px]" />
      </div>

      <div className="container relative z-10 px-4 md:px-6">
        <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
          <div className="flex flex-col justify-center space-y-4 animate-fade-in">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-gray-800">
                Graphic Designer & Web Developer
              </h1>
              <p className="max-w-[600px] text-gray-600 md:text-xl">
                Transforming ideas into stunning visuals and functional websites. Let's create something amazing
                together.
              </p>
            </div>
            <div className="flex flex-col gap-2 min-[400px]:flex-row">
              <Button asChild size="lg" className="bg-primary/90 hover:bg-primary">
                <Link href="#portfolio">
                  View My Work
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button variant="outline" size="lg" className="bg-white/50 hover:bg-white/70">
                <Download className="mr-2 h-4 w-4" />
                Download Resume
              </Button>
            </div>
          </div>
          <div className="flex items-center justify-center animate-scale-in animate-delay-300">
            <div className="relative aspect-square overflow-hidden rounded-full border-8 border-white/50 w-[280px] h-[280px] md:w-[400px] md:h-[400px] animate-pulse-slow">
              <Image src="/placeholder.svg?height=400&width=400" alt="Profile" fill className="object-cover" priority />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

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

import { useState, useEffect } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"

import { Button } from "@/components/ui/button"

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [activeSection, setActiveSection] = useState("home")

  useEffect(() => {
    const handleScroll = () => {
      const sections = document.querySelectorAll("section[id]")
      let currentSection = "home"

      sections.forEach((section) => {
        const sectionTop = section.offsetTop
        const sectionHeight = section.clientHeight
        if (window.scrollY >= sectionTop - 100) {
          currentSection = section.id
        }
      })

      setActiveSection(currentSection)
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId)
    if (element) {
      const offset = 80 // Height of the fixed header
      const elementPosition = element.getBoundingClientRect().top
      const offsetPosition = elementPosition + window.pageYOffset - offset

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      })
    }
    setIsMenuOpen(false)
  }

  return (
    <header className="sticky top-0 z-50 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">
        <Link href="#home" onClick={() => scrollToSection("home")} className="font-bold text-xl">
          DesignCraft Studio
        </Link>
        <nav className="hidden md:flex gap-6">
          {["home", "services", "portfolio", "skills", "testimonials", "contact"].map((section) => (
            <button
              key={section}
              onClick={() => scrollToSection(section)}
              className={`text-sm font-medium transition-colors px-3 py-2 rounded-md ${
                activeSection === section ? "bg-primary text-white" : "hover:bg-primary hover:text-white"
              }`}
            >
              {section.charAt(0).toUpperCase() + section.slice(1)}
            </button>
          ))}
        </nav>
        <Button asChild className="hidden md:inline-flex">
          <Link href="https://www.fiverr.com/yourusername" target="_blank" rel="noopener noreferrer">
            Hire Me on Fiverr
          </Link>
        </Button>
        <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
          {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </Button>
      </div>
      {isMenuOpen && (
        <div className="container md:hidden py-4 border-t">
          <nav className="flex flex-col gap-4">
            {["home", "services", "portfolio", "skills", "testimonials", "contact"].map((section) => (
              <button
                key={section}
                onClick={() => scrollToSection(section)}
                className={`text-sm font-medium transition-colors px-3 py-2 rounded-md text-left ${
                  activeSection === section ? "bg-primary text-white" : "hover:bg-primary hover:text-white"
                }`}
              >
                {section.charAt(0).toUpperCase() + section.slice(1)}
              </button>
            ))}
            <Button asChild className="w-full">
              <Link href="https://www.fiverr.com/yourusername" target="_blank" rel="noopener noreferrer">
                Hire Me on Fiverr
              </Link>
            </Button>
          </nav>
        </div>
      )}
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/scroll-to-top.tsx"
"use client"

import { useState, useEffect } from "react"
import { ArrowUp } from "lucide-react"
import { Button } from "@/components/ui/button"

export function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > 300) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }
    }

    window.addEventListener("scroll", toggleVisibility)
    return () => window.removeEventListener("scroll", toggleVisibility)
  }, [])

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    })
  }

  return (
    <div
      className={`fixed bottom-8 right-8 transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
    >
      <Button
        variant="outline"
        size="icon"
        onClick={scrollToTop}
        className="h-10 w-10 rounded-full bg-primary text-white hover:bg-primary/90 hover:scale-110 transition-transform shadow-lg"
      >
        <ArrowUp className="h-5 w-5" />
        <span className="sr-only">Scroll to top</span>
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import { ContactForm } from "@/components/contact-form"
import { Footer } from "@/components/footer"
import { Header } from "@/components/header"
import { Hero } from "@/components/hero"
import { Portfolio } from "@/components/portfolio"
import { Services } from "@/components/services"
import { Skills } from "@/components/skills"
import { Testimonials } from "@/components/testimonials"
import { ScrollToTop } from "@/components/scroll-to-top"

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1">
        <Hero />
        <Services />
        <Portfolio />
        <Skills />
        <Testimonials />
        <ContactForm />
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  )
}

[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 142 76% 36%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 142 76% 96%;
    --secondary-foreground: 142 76% 26%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 142 76% 96%;
    --accent-foreground: 142 76% 26%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 142 76% 36%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 142 76% 46%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 142 76% 16%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 142 76% 16%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 142 76% 46%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    scroll-behavior: smooth;
  }
}

/* Add animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

.animate-slide-left {
  animation: slideInLeft 0.5s ease-out forwards;
}

.animate-slide-right {
  animation: slideInRight 0.5s ease-out forwards;
}

.animate-pulse-slow {
  animation: pulse 3s infinite;
}

.animate-delay-100 {
  animation-delay: 100ms;
}

.animate-delay-200 {
  animation-delay: 200ms;
}

.animate-delay-300 {
  animation-delay: 300ms;
}

.animate-delay-400 {
  animation-delay: 400ms;
}

.animate-delay-500 {
  animation-delay: 500ms;
}

.scroll-to-top {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Add this if you want a smooth transition when the scroll button appears/disappears */
.scroll-to-top-enter {
  opacity: 0;
  transform: translateY(20px);
}

.scroll-to-top-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.scroll-to-top-exit {
  opacity: 1;
}

.scroll-to-top-exit-active {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms, transform 300ms;
}
88:["$","$L8f",null,{"chatId":"b5wXka6aSJD","children":["$","$L90",null,{"data":{"@\"active-block\",\"b5wXka6aSJD\",":{"id":"b_KjowAzK8hkX","messageId":"PYe635aTbiXrfCfbrsZ3IX2zT8ZOhMcd","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"portfolio","type":"code-project","project":"portfolio"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"b5wXka6aSJD\",":false},"children":"$L92"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This