export default function Loading() {

  return (

    <div className="mx-auto w-full max-w-register px-4 py-10 sm:px-6">

      <div className="mb-2 h-3 w-28 animate-pulse rounded-sm bg-graphite" />

      <div className="mt-2 h-7 w-64 animate-pulse rounded-sm bg-graphite" />

      <div className="mt-3 h-4 w-full max-w-2xl animate-pulse rounded-sm bg-graphite" />

      {}

      <div className="mt-8 grid gap-4 sm:grid-cols-3">

        {Array.from({ length: 3 }).map((_, i) => (

          <div key={i} className="h-24 animate-pulse rounded-sm bg-graphite" />

        ))}

      </div>

      <div className="mt-8 h-14 w-full animate-pulse rounded-sm bg-graphite" />

      <div className="mt-8 mb-4 h-4 w-40 animate-pulse rounded-sm bg-graphite" />

      <div className="space-y-1">

        {Array.from({ length: 12 }).map((_, i) => (

          <div key={i} className="h-12 w-full animate-pulse rounded-sm bg-graphite" />

        ))}

      </div>

    </div>

  );

}