{title}

{description}

{technologies.map((tech) => ( {tech} ))}

GitHub {liveUrl && ( Live Demo )}

) } interface SectionTitleProps { command: string title: string } function SectionTitle({ command, title }: SectionTitleProps) { return (

$ {command}

{title}

) } interface SkillItemProps { name: string level: number } function SkillItem({ name, level }: SkillItemProps) { return (

{name} {level}/10

) } const menuItems = [ { icon: User, label: "About" }, { icon: Code, label: "Projects" }, { icon: Mail, label: "Contact" }, ] function PortfolioHeader() { return (

[DEV_NAME]

) } function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const handleChange = ( e: React.ChangeEvent ) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Form submitted:", formData) // Here you would typically send the form data to a server } return (

Name:

Email:

Message:

</div>
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        type="submit"
        className="px-4 py-2 border border-terminal-gray hover:bg-terminal-gray hover:text-white transition-colors flex items-center space-x-2"
      >
        <Send className="w-4 h-4" />
        <span>Send Message</span>
      </motion.button>
    </motion.form>
  )
}

const skills = [
  { name: "Java", level: 10 },
  { name: "JavaScript", level: 9 },
  { name: "React", level: 8 },
  { name: "Node.js", level: 7 },
  { name: "TypeScript", level: 8 },
  { name: "IOS", level: 6 },
]

const projects = [
  {
    title: "BuouUI",
    description:
      "Designed, developed and sold animated UI components for developers.",
    technologies: ["Nextjs", "Tailwind CSS", "Typescript"],
    githubUrl: "https://github.com/buoooou",
    liveUrl: "https://buouui.com",
  },
  {
    title: "BuouNext",
    description:
      "Built and launched a powerful Next.js starter kit to help developers create MVPs faster with modern technologies.",
    technologies: ["Nextjs", "Tailwind CSS", "Typescript"],
    githubUrl: "https://github.com/buoooou",
    liveUrl: "https://next.buouui.com",
  },
]

export function Portfolio() {
  return (
    <div className="min-h-screen bg-white dark:bg-black text-black dark:text-white">
      <PortfolioHeader />
      <main className="container mx-auto px-4 py-8 space-y-16">
        <motion.section
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
          id="about"
          className="space-y-4"
        >
          <SectionTitle command="./about.sh" title="About Me" />
          <p className="font-mono text-sm leading-relaxed">
            \u{1F44F} Hi, I'm kuo Zhang, I am a full-stack engineer, my main technology
            stack is Nextjs, the founder of BuouUI, and I am committed to making
            every developer make money.
          </p>
        </motion.section>

<section id="skills" className="space-y-4">
          <SectionTitle command="./skills.sh" title="Skills" />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {skills.map((skill) => (
              <SkillItem
                key={skill.name}
                name={skill.name}
                level={skill.level}
              />
            ))}
          </div>
        </section>

<section id="projects" className="space-y-4">
          <SectionTitle command="./projects.sh" title="Projects" />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {projects.map((project) => (
              <ProjectCard key={project.title} {...project} />
            ))}
          </div>
        </section>

<section id="contact" className="space-y-4">
          <SectionTitle command="./contact.sh" title="Get in Touch" />
          <ContactForm />
        </section>
      </main>
    </div>
  )
}
`,__src__:"registry/default/example/sections/portfolio.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { useState } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { motion } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"framer-motion"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  Code,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  ExternalLink,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  Github,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  Mail,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  Send,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  Terminal,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  User,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lucide-react"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ProjectCardProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"technologies"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"[]"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"githubUrl"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"liveUrl"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"ProjectCard"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"technologies"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"githubUrl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"liveUrl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ProjectCardProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"border border-terminal-gray p-4 rounded-md"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h3"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-mono text-lg font-bold mb-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h3"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-mono text-sm text-terminal-gray mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-wrap gap-2 mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"technologies."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"tech"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"tech"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-mono text-xs px-2 py-1 bg-terminal-gray text-white rounded"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"tech"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        ))"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex space-x-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"a"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"href"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"githubUrl"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"_blank"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"rel"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"noopener noreferrer"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center space-x-1 text-sm hover:text-terminal-gray transition-colors"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Github"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">GitHub</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"a"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"liveUrl "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"a"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"href"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"liveUrl"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"target"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"_blank"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"rel"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"noopener noreferrer"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center space-x-1 text-sm hover:text-terminal-gray transition-colors"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ExternalLink"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Live Demo</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"a"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  )"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"SectionTitleProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"command"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"SectionTitle"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"command"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"SectionTitleProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mb-6 font-mono"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm text-terminal-gray"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">$ "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"command"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-2xl font-bold mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  )"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"SkillItemProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"level"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"number"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"SkillItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"level"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"SkillItemProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", x: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", x: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mb-2"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex justify-between mb-1"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-mono text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-mono text-sm text-terminal-gray"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"level"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"/10</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"h-2 bg-gray-200 dark:bg-gray-700 rounded"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"h-full bg-terminal-gray rounded"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ width: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ width: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`${"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"level"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}%`"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", delay: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  )"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"menuItems"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { icon: User, label: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"About"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { icon: Code, label: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Projects"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { icon: Mail, label: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Contact"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"]"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"PortfolioHeader"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"header"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"border-b border-terminal-gray font-mono"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"container mx-auto px-4 py-4 flex items-center justify-between"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", x: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", x: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center space-x-2"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Terminal"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-6 h-6"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-lg font-bold"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">[DEV_NAME]</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"nav"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ul"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex space-x-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"menuItems."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"item"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.li"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"item.label"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ delay: index "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"a"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                  "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"href"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`#${"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"item"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"toLowerCase"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                  "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center space-x-1 hover:text-terminal-gray transition-colors"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                  <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"item.icon"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                  <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"hidden sm:inline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"item.label"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"a"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.li"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            ))"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ul"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"nav"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"header"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  )"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"ContactForm"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"formData"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setFormData"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    name: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    email: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    message: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  })"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleChange"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ChangeEvent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLInputElement"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLTextAreaElement"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  ) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" e.target"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setFormData"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"prev"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"prev, [name]: value }))"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"FormEvent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    e."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    console."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"log"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Form submitted:"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", formData)"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// Here you would typically send the form data to a server"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.form"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-4 font-mono"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"name"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"block text-sm mb-1"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          Name:"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"input"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"name"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"name"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"formData.name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onChange"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"handleChange"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"required"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full px-3 py-2 bg-transparent border border-terminal-gray rounded focus:outline-none focus:ring-1 focus:ring-terminal-gray"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"email"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"block text-sm mb-1"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          Email:"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"input"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"email"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"email"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"email"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"formData.email"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onChange"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"handleChange"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"required"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full px-3 py-2 bg-transparent border border-terminal-gray rounded focus:outline-none focus:ring-1 focus:ring-terminal-gray"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"message"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"block text-sm mb-1"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          Message:"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"textarea"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"message"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"message"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"formData.message"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onChange"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"handleChange"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"required"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"rows"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"4"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full px-3 py-2 bg-transparent border border-terminal-gray rounded focus:outline-none focus:ring-1 focus:ring-terminal-gray"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.button"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileHover"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1.05"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileTap"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.95"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"submit"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"px-4 py-2 border border-terminal-gray hover:bg-terminal-gray hover:text-white transition-colors flex items-center space-x-2"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Send"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Send Message</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.form"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  )"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"skills"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { name: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Java"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", level: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { name: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"JavaScript"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", level: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"9"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { name: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"React"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", level: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"8"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { name: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Node.js"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", level: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"7"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { name: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"TypeScript"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", level: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"8"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  { name: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"IOS"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", level: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"6"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"]"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"projects"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  {"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    title: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"BuouUI"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    description:"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Designed, developed and sold animated UI components for developers."'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    technologies: ["}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Nextjs"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Tailwind CSS"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Typescript"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"],"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    githubUrl: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://github.com/buoooou"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    liveUrl: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://buouui.com"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  },"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  {"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    title: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"BuouNext"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    description:"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Built and launched a powerful Next.js starter kit to help developers create MVPs faster with modern technologies."'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    technologies: ["}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Nextjs"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Tailwind CSS"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Typescript"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"],"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    githubUrl: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://github.com/buoooou"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    liveUrl: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://next.buouui.com"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  },"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"]"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Portfolio"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"min-h-screen bg-white dark:bg-black text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PortfolioHeader"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"main"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"container mx-auto px-4 py-8 space-y-16"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.section"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"about"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-4"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"SectionTitle"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"command"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"./about.sh"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"About Me"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-mono text-sm leading-relaxed"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            \u{1F44F} Hi, I'm kuo Zhang, I am a full-stack engineer, my main technology"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            stack is Nextjs, the founder of BuouUI, and I am committed to making"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            every developer make money."})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"skills"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"SectionTitle"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"command"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"./skills.sh"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Skills"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-1 md:grid-cols-2 gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"skills."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"skill"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"SkillItem"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"skill.name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"skill.name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"                "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"level"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"skill.level"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            ))"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"projects"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"SectionTitle"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"command"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"./projects.sh"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Projects"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-1 md:grid-cols-2 gap-6"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"projects."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"project"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ProjectCard"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"project.title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"project"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            ))"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"contact"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"SectionTitle"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"command"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"./contact.sh"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Get in Touch"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ContactForm"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"main"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  )"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),`
`,(0,n.jsx)(r,{defaultValue:"manual",children:(0,n.jsx)(c,{value:"manual",children:(0,n.jsxs)(t,{children:[(0,n.jsx)(i,{children:"Install the following dependencies:"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install framer-motion lucide-react
`,__npmCommand__:`npm install framer-motion lucide-react
`,__yarnCommand__:`yarn add framer-motion lucide-react
`,__pnpmCommand__:`pnpm add framer-motion lucide-react
`,__bunCommand__:`bun add framer-motion lucide-react
`,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"npm install framer-motion lucide-react"})})})})}),(0,n.jsx)(i,{children:"Copy and paste the code into your project."})]})})})]})}function b(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(y,e)})):y(e)}var A=b;function o(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(v);})();
;return Component;</article></body></html>