export default function Loading() {
  return (
    <div className="mx-4 mt-6 animate-pulse sm:mx-6 lg:mx-auto lg:max-w-7xl">
      <div className="h-4 w-32 bg-ink-soft" />
      <div className="mt-4 h-10 w-72 bg-ink-soft" />
      <div className="mt-3 h-4 w-96 max-w-full bg-ink-soft" />
      <div className="mt-6 h-11 w-full max-w-sm bg-ink-soft" />
      <div className="mt-6 flex flex-wrap gap-2">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="h-7 w-20 bg-ink-soft" />
        ))}
      </div>
      <div className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
        {Array.from({ length: 12 }).map((_, i) => (
          <div key={i} className="aspect-[3/4] w-full bg-ink-soft" />
        ))}
      </div>
    </div>
  );
}
