Revamps design with modernized UI and improved accessibility

[sympact06]

• Updates header and homepage with new styling, utilizing Tailwind CSS for consistency and improved layout
• Refactors Footer component to a dynamic and flexible structure; enhances link data accessibility
• Refactors ProfileButton, replacing legacy styling with Tailwind CSS classes
• Removes redundant subreddit fetch; simplifies link and card component markup for cleaner code
• Optimizes hero section to fill the viewport and centralize content for better user engagement
• Adds new Tailwind styles and restructures to maintain legacy compatibility
• Introduces link to new contributor, Sympact06, in the footer

This update enhances the codebase's maintainability and delivers a cohesive visual identity across the site.

[silent-decibel]

Might be worth adding something like:

const credits = [
  { name: "Moonbear", href: "https://github.com/LunaUrsa" },
  { name: "Sympact06", href: "https://github.com/Sympact06" },
  { name: "Team TripSit" },
];

Then your div block for credits can be simplified:

<p>
  Made with <i className="bx bxs-heart align-middle text-violet" aria-hidden />
  <span className="sr-only">love</span> by {credits.map((c, i) => (
    <span key={c.name}>
      {i > 0 && (i === credits.length - 1 ? " and " : ", ")}
      {c.href ? (
        <a href={c.href} className="text-ink transition hover:text-cyan">
          {c.name}
        </a>
      ) : (
        c.name
      )}
    </span>
  ))}
</p>

[silent-decibel]

This could be made a bit more explicit and we should use constants for the guild values. It's also async without a timeout so we probably don't want everything to freeze if this call freezes:

  const GUILD_ID = "179641883222474752";
  const GUILD_URL = `https://discord.com/api/v10/guilds/${GUILD_ID}?with_counts=true`;

  async function getDiscordGuild(): Promise<APIGuild> {
    try {
      const { data } = await axios.get<APIGuild>(GUILD_URL, {
        timeout: 3000,
        headers: { Authorization: `Bot ${process.env.DISCORD_CLIENT_TOKEN}` },
      });
      return data;
    } catch {
      return {} as APIGuild;
    }
  }

  export async function getServerSideProps() {
    return { props: { guild: await getDiscordGuild() } };
  }

[silent-decibel]

Might be worth changing this to "instanceof" to prevent a runtime crash in case e.target isn't an Element but we've gone and told Typescript it is.

  const onPointerDown = (e: PointerEvent) => {
        if (e.target instanceof Element && !e.target.closest("header")) {
          setOpenMenu(null);
        }
      };