werefox-cafe/src/info/pages/contacts/index.js

import BasicPage from "../../components/basic-page-template";
import WCard from "../../components/werefox-card";
import Image from "next/image";

export default function Contacts() {
  return (
    <BasicPage
      page_title="Where To Find Me"
      card_title={`"Do you have a [Social Media]?"`}
    >
      <WCard>
        <div className="p-2 space-y-2">
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              You can find me in quite a few places!
            </p>
          </div>
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
              <a href="https://vulpine.club/@shadow8t4" target="_blank">
                <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                  <Image
                    src="/emoji/mastodon-logo.png"
                    layout="fill"
                    objectFit="contain"
                    alt="Mastodon logo"
                  />
                </span>
              </a>{" "}
              My public Mastodon{" "}
              <a
                className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                href="https://vulpine.club/@shadow8t4"
                target="_blank"
              >
                @shadow8t4@vulpine.club
              </a>
            </p>
            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
              <a href="https://twitter.com/alexis_werefox" target="_blank">
                <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                  <Image
                    src="/emoji/twitter-logo.png"
                    layout="fill"
                    objectFit="contain"
                    alt="Twitter logo"
                  />
                </span>
              </a>{" "}
              My Twitter{" "}
              <a
                className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                href="https://twitter.com/alexis_werefox"
                target="_blank"
              >
                @alexis_werefox
              </a>
            </p>
            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
              <a href="https://www.twitch.tv/alexis_werefox" target="_blank">
                <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                  <Image
                    src="/emoji/twitch-logo.png"
                    layout="fill"
                    objectFit="contain"
                    alt="Twitch logo"
                  />
                </span>
              </a>{" "}
              My Twitch{" "}
              <a
                className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                href="https://www.twitch.tv/alexis_werefox"
                target="_blank"
              >
                @Alexis_Werefox
              </a>
            </p>
            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
              <a
                href="https://vid.werefox.dev/accounts/shadow8t4/video-channels"
                target="_blank"
              >
                <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                  <Image
                    src="/emoji/vhs.svg"
                    layout="fill"
                    objectFit="contain"
                    alt="VHS tape emoji"
                  />
                </span>
              </a>{" "}
              My PeerTube (mostly VODs from the stream){" "}
              <a
                className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                href="https://vid.werefox.dev/accounts/shadow8t4/video-channels"
                target="_blank"
              >
                vid.werefox.dev
              </a>
            </p>
            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
              <a href="https://write.as/a-letter-to-the-void" target="_blank">
                <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                  <Image
                    src="/emoji/pen.svg"
                    layout="fill"
                    objectFit="contain"
                    alt="Pen emoji"
                  />
                </span>
              </a>{" "}
              My poetry{" "}
              <a
                className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                href="https://write.as/a-letter-to-the-void"
                target="_blank"
              >
                write.as/a-letter-to-the-void
              </a>
            </p>
            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
              <a href="https://werefox.dev" target="_blank">
                <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                  <Image
                    src="/emoji/page_with_pencil.svg"
                    layout="fill"
                    objectFit="contain"
                    alt="A piece of paper with a pencil emoji"
                  />
                </span>
              </a>{" "}
              My (often outdated) blog{" "}
              <a
                className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                href="https://werefox.dev"
                target="_blank"
              >
                werefox.dev
              </a>
            </p>
            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
              <a href="mailto:adh9694@gmail.com" target="">
                <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                  <Image
                    src="/emoji/inbox.svg"
                    layout="fill"
                    objectFit="contain"
                    alt="Inbox emoji"
                  />
                </span>
              </a>{" "}
              My e-mail{" "}
              <a
                className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                href="mailto:adh9694@gmail.com"
                target="_blank"
              >
                adh9694@gmail.com
              </a>
            </p>
          </div>
        </div>
      </WCard>
    </BasicPage>
  );
}