"use client"; import Image from "next/image"; import { Button } from "@/components/ui/button"; import { useModal } from "@/app/_providers/modal/provider"; import CreateCalendarEvent from "@/components/Modals/CreateCalendarEvent"; export default function BecomeACreator() { const modal = useModal(); return ( <div className="padded-container overflow-x-clip pb-8 max-sm:-mx-5 md:py-[120px]"> <div className="flex w-full flex-col items-center justify-between gap-8 lg:flex-row"> <Image alt="creator icons" width={512} height={210.82} src={ "https://whop.com/_next/image/?url=%2Fv2%2Fhomepage-whop-sellers-grid.png&w=1080&q=75" } className="h-44 object-cover object-bottom lg:h-auto" /> <div className="max-sm:px-5 md:self-start lg:max-w-lg lg:self-center"> <h2 className="font-condensed text-2xl font-bold text-foreground sm:text-3xl"> Create Events on Nostr </h2> <div className="mb-6 mt-2 text-muted-foreground"> Start organizing your events an calendar on directly on Nostr. Seamlessly collect payments and engage with your community. </div> <Button onClick={() => modal?.show(<CreateCalendarEvent />)}> Create an Event </Button> </div> </div> </div> ); }