Supabooking Welcome Modal

WelcomeModal.tsx

<div className="flex flex-col gap-y-1.5 bg-white sm:max-w-[780px]">
  <div className="flex justify-between items-start">
    <h2 className="font-bold text-xl">Welcome to Supabooking 👋</h2>
    {/* <Button variant="ghost" className="p-0 h-auto" onClick={onClose}>
            <X className="w-4 h-4" />
          </Button> */}
  </div>

  <p className="font-bold text-base">
    Your account is now active and ready to use!
  </p>

  <div className="mt-0">
    <p className="mb-2 text-sm leading-loose">
      You can manage your account at{" "}
      <Link
        href={`/${companySlug}/dashboard`}
        className="group inline-flex relative items-center px-1 rounded-sm overflow-hidden text-brand-primary"
      >
        <span
          className="z-10 relative"
          style={{
            color: "var(--ui-dark-darker)",
          }}
        >
          {`supabooking.com/${companySlug}/dashboard`}
        </span>
        <div
          className="absolute inset-0 opacity-[15%] group-hover:opacity-[25%] border border-neutral-900/10 transition-opacity"
          style={{
            backgroundColor: "var(--brand-primary-base)",
          }}
        />
      </Link>{" "}
      and your new online booking website is available at{" "}
      <Link
        href={`/${companySlug}`}
        className="group inline-flex relative items-center px-1 rounded-sm overflow-hidden text-brand-primary"
      >
        <div
          className="absolute inset-0 opacity-[15%] group-hover:opacity-[25%] border border-neutral-900/10 transition-opacity"
          style={{
            backgroundColor: "var(--brand-primary-base)",
          }}
        />
        <span
          className="z-10 relative"
          style={{
            color: "var(--ui-dark-darker)",
          }}
        >{`supabooking.com/${companySlug}`}</span>
      </Link>
    </p>
  </div>

  <div className="gap-4 grid grid-cols-1 md:grid-cols-2 mt-2">
    <Link
      href={`/${companySlug}/dashboard/templates`}
      className="group relative flex flex-col justify-center bg-neutral-100 hover:bg-white p-8 border-4 rounded-lg transition-all duration-150 ease-in-out"
      style={{
        borderColor: "var(--brand-primary-base)",
      }}
    >
      <div
        className="-top-0 -right-0 z-20 absolute px-2 py-1 rounded-bl-sm text-xs"
        style={{
          backgroundColor: "var(--brand-primary-base)",
          color: "white",
          opacity: 1,
        }}
      >
        Recommended
      </div>
      <div
        className="z-0 absolute inset-0 opacity-0 group-hover:opacity-20 overflow-hidden transition-all duration-150 ease-in-out"
        style={{
          backgroundColor: "var(--brand-primary-base)",
        }}
      ></div>
      <div className="z-20 mb-4 text-xl">
        <Zap className="w-8 h-8 text-neutral-800 group-hover:text-neutral-900 transition-colors" />
      </div>
      <h3 className="z-20 mb-3 font-bold text-neutral-800 group-hover:text-neutral-900 text-xl">
        Use a Template
      </h3>
      <p className="z-20 text-gray-600">
        Get started with one click with our pre-built templates
      </p>
    </Link>

    <div className="gap-4 grid md:col-span-1">
      <Link
        href="https://wa.me/+447123456789"
        className="group relative bg-neutral-100 hover:bg-white p-6 rounded-lg overflow-hidden transition-all duration-150 ease-in-out"
      >
        <div
          className="z-0 absolute inset-0 opacity-0 group-hover:opacity-20 overflow-hidden transition-all duration-150 ease-in-out"
          style={{
            backgroundColor: "var(--brand-primary-base)",
          }}
        ></div>
        <div className="mb-3 text-xl">
          <MessageSquare className="w-6 h-6 text-neutral-800 group-hover:text-neutral-900 transition-colors" />
        </div>
        <h3 className="mb-2 font-bold text-neutral-800 group-hover:text-neutral-900 text-xl">
          Chat with us
        </h3>
        <p className="text-gray-600 text-sm">
          Get instant help from our support team via WhatsApp
        </p>
      </Link>

      <Link
        href="https://docs.supabooking.com"
        className="group relative bg-neutral-100 hover:bg-white p-6 rounded-lg overflow-hidden transition-all duration-150 ease-in-out"
      >
        <div
          className="z-0 absolute inset-0 opacity-0 group-hover:opacity-20 overflow-hidden transition-all duration-150 ease-in-out"
          style={{
            backgroundColor: "var(--brand-primary-base)",
          }}
        ></div>
        <div className="mb-3 text-xl">
          <BookOpen className="w-6 h-6 text-neutral-800 group-hover:text-neutral-900 transition-colors" />
        </div>
        <h3 className="mb-2 font-bold text-neutral-800 group-hover:text-neutral-900 text-xl">
          Read the Docs
        </h3>
        <p className="text-gray-600 text-sm">
          Detailed guides and tutorials to help you get started
        </p>
      </Link>
    </div>
  </div>

  <div className="space-y-2 mt-6">
    <p
      className="mb-1 font-bold text-sm"
      style={{ color: "var(--ui-dark-darker)" }}
    >
      Popular guides:
    </p>
    <div className="gap-4 grid grid-cols-1 md:grid-cols-2">
      {[
        {
          num: 1,
          text: "Setting up your first service",
          href: "/guides/services",
        },
        {
          num: 2,
          text: "Adding team members",
          href: "/guides/resources",
        },
        {
          num: 3,
          text: "Setting your availability",
          href: "/guides/availability",
        },
        {
          num: 4,
          text: "Customizing your booking page",
          href: "/guides/customization",
        },
      ].map((guide) => (
        <Link
          key={guide.num}
          href={`https://docs.supabooking.com${guide.href}`}
          className="group flex items-center gap-3 bg-neutral-100 hover:bg-neutral-200 p-4 rounded-lg transition-colors"
        >
          <span
            className="flex justify-center items-center bg-white rounded-full w-6 h-6 font-medium text-xs shrink-0"
            style={{ color: "var(--ui-dark-darker)" }}
          >
            {guide.num}
          </span>
          <span className="text-sm" style={{ color: "var(--ui-dark-darker)" }}>
            {guide.text}
          </span>
        </Link>
      ))}
    </div>
  </div>

  <div className="flex items-center gap-2 mt-6 ml-auto">
    <button
      onClick={handleDontShowAgain}
      className="bg-white hover:bg-gray-50 px-4 py-2 border border-gray-300 hover:border-gray-400 rounded-md font-medium text-gray-700 text-sm transition-colors"
    >
      Don't show this again
    </button>
    <Button
      onClick={onClose}
      className="bg-[#95c066] hover:bg-[#85b056] text-white"
    >
      Get started
    </Button>
  </div>
</div>