[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Header from "@/components/Header" import Hero from "@/components/Hero" import Portfolio from "@/components/Portfolio" import About from "@/components/About" import Contact from "@/components/Contact" import Footer from "@/components/Footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/Header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Menu, X } from "lucide-react" const Header = () => { const [isOpen, setIsOpen] = useState(false) const menuVariants = { closed: { opacity: 0, y: -20 }, open: { opacity: 1, y: 0, transition: { staggerChildren: 0.1, delayChildren: 0.2 } }, } const menuItemVariants = { closed: { opacity: 0, y: -10 }, open: { opacity: 1, y: 0 }, } return (

Jane Doe

{isOpen && ( )}

) } export default Header [V0_FILE]typescriptreact:file="components/Portfolio.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" const projects = [ { id: 1, title: "Project 1", image: "/placeholder.svg?height=300&width=300" }, { id: 2, title: "Project 2", image: "/placeholder.svg?height=300&width=300" }, { id: 3, title: "Project 3", image: "/placeholder.svg?height=300&width=300" }, { id: 4, title: "Project 4", image: "/placeholder.svg?height=300&width=300" }, { id: 5, title: "Project 5", image: "/placeholder.svg?height=300&width=300" }, { id: 6, title: "Project 6", image: "/placeholder.svg?height=300&width=300" }, ] const Portfolio = () => { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.3, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, }, }, } return (

My Portfolio {projects.map((project) => (

{project.title}

View Project ))}

) } export default Portfolio [V0_FILE]typescriptreact:file="components/About.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" const About = () => { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.3, delayChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, }, }, } return (

About Me

I'm Jane Doe, a passionate graphic designer and visual artist with over 5 years of experience. I specialize in creating unique and impactful designs that tell compelling stories and evoke emotions.

My work spans across various mediums, including digital illustration, branding, and UI/UX design. I believe in the power of visual communication to transform ideas into memorable experiences.

Get in Touch

) } export default About [V0_FILE]typescriptreact:file="components/Contact.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import type React from "react" // Added import for React const Contact = () => { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitted, setIsSubmitted] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prevData) => ({ ...prevData, [name]: value, })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission logic here console.log("Form submitted:", formData) // Reset form after submission setFormData({ name: "", email: "", message: "" }) setIsSubmitted(true) setTimeout(() => setIsSubmitted(false), 3000) } const formVariants = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } const inputVariants = { focus: { scale: 1.02, transition: { duration: 0.2 } }, } return (

Get in Touch

Name Email Message Send Message {isSubmitted && ( Thank you for your message! We'll get back to you soon. )}

) } export default Contact [V0_FILE]typescriptreact:file="components/SocialLinks.tsx" isFixed="true" isQuickEdit="true" import { motion } from "framer-motion" import { Twitter, GitlabIcon as GitHub, Linkedin, Instagram, Dribbble } from "lucide-react" import type React from "react" // Added import for React interface SocialLinkProps { href: string icon: React.ReactNode label: string } const SocialLink: React.FC = ({ href, icon, label }) => ( {label} {icon} ) const SocialLinks: React.FC<{ className?: string }> = ({ className }) => { const socialLinks = [ { href: "https://twitter.com/janedoe", icon: , label: "Twitter" }, { href: "https://github.com/janedoe", icon: , label: "GitHub" }, { href: "https://linkedin.com/in/janedoe", icon: , label: "LinkedIn" }, { href: "https://instagram.com/janedoe", icon: , label: "Instagram" }, { href: "https://dribbble.com/janedoe", icon: , label: "Dribbble" }, ] return (

{socialLinks.map((link) => ( ))}

) } export default SocialLinks [V0_FILE]typescriptreact:file="components/Footer.tsx" isEdit="true" import { motion } from "framer-motion" import SocialLinks from "./SocialLinks" const Footer = () => { const currentYear = new Date().getFullYear() return ( ) } export default Footer [V0_FILE]typescriptreact:file="components/Hero.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import SocialLinks from "./SocialLinks" const Hero = () => { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.3, delayChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, }, }, } return (

Jane Doe Graphic Designer & Visual Artist View My Work

) } export default Hero