Portfolio Page - Copy this React, Tailwind Component to your project

FIX THE DESIIGN THIS IS A PORT FOLIO i AM A 3D SOTWARE ENGIVEER ETC import { Link } from "@nextui org/link"; import { Snippet } from "@nextui org/snippet"; import { Code } from "@nextui org/code"; import { button as buttonStyles } from "@nextui org/theme"; import { siteConfig } from "@/config/site"; import { title, subtitle } from "@/components/primitives"; import { GithubIcon } from "@/components/icons"; export default function Home() { return ( <> <div className="flex justify center items center"> <section className="flex flex col items center justify center gap 4 py 8 md:py 10"> <div className="inline block max w xl text center justify center"> <span className={title()}>Make&nbsp;</span> <span className={title({ color: "violet" })}>beautiful&nbsp;</span> <br /> <span className={title()}> websites regardless of your design experience. </span> <div className={subtitle({ class: "mt 4" })}> Beautiful, fast and modern React UI library. </div> </div> <div className="flex gap 3"> <Link isExternal className={buttonStyles({ color: "primary", radius: "full", variant: "shadow", })} href={siteConfig.links.docs} > Documentation </Link> <Link isExternal className={buttonStyles({ variant: "bordered", radius: "full" })} href={siteConfig.links.github} > <GithubIcon size={20} /> GitHub </Link> </div> <div className="mt 8"> <Snippet hideCopyButton hideSymbol variant="bordered"> <span> Get started by editing <Code color="primary">app/page.tsx</Code> </span> </Snippet> </div> </section> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, animi quaerat accusantium laborum explicabo consectetur aut possimus amet! Tenetur, magni cumque? Beatae illo officia assumenda, nisi officiis veritatis. Mollitia, itaque! </div> </div> </> ); }