import Hero2 from "@/components/ui/8bit/blocks/hero2"export default function Demo() {  return (    <Hero2      title="Find your next quest"      subtitle="A world of ideas awaits"      description="Plan your next adventure with a little help from your party."      badges={[{ label: "New adventure" }]}      actions={[{ label: "Start exploring", href: "/explore" }]}      visual={        <div className="mx-auto aspect-[4/3] w-full max-w-md overflow-hidden border-4 border-foreground bg-sky-200">          <div className="relative h-full w-full overflow-hidden bg-gradient-to-b from-sky-200 via-sky-100 to-amber-100">            <div className="absolute right-[16%] top-[14%] size-12 bg-amber-300" />            <div className="absolute left-[14%] top-[28%] h-3 w-12 bg-white" />            <div className="absolute left-[20%] top-[24%] h-3 w-9 bg-white" />            <div className="absolute right-[17%] top-[34%] h-3 w-10 bg-white" />            <div className="absolute left-[-8%] top-[46%] h-[34%] w-[72%] bg-emerald-700 [clip-path:polygon(0_100%,50%_0,100%_100%)]" />            <div className="absolute right-[-12%] top-[42%] h-[40%] w-[78%] bg-emerald-600 [clip-path:polygon(0_100%,48%_0,100%_100%)]" />            <div className="absolute bottom-0 h-[32%] w-full bg-emerald-800" />            <div className="absolute bottom-[18%] left-[18%] h-5 w-5 bg-lime-400" />            <div className="absolute bottom-[30%] right-[22%] h-4 w-4 bg-lime-300" />            <div className="absolute bottom-[10%] left-[48%] h-8 w-8 bg-amber-700" />            <div className="absolute bottom-[10%] left-[48%] h-4 w-8 bg-amber-500" />          </div>        </div>      }    />  )}