werefox-cafe/src/info/components/faq-card.js

import Image from "next/image";
import Link from "next/link";

export default function TestimonialCard({ question, answer, src, alt }) {
  const finalsrc = Boolean(src) ? src : "/images/logo.png";

  return (
    <div className="space-y-1">
      <div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink">
        <p className="p-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink">
          {question}
        </p>
      </div>
      <div className="p-2 flex ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
        <div className="order-1 flex-shrink-0 relative inline sm:w-32 w-16 min-h-full items-center justify-center align-middle pt-4 pb-4 pl-4">
          <Link href="https://vulpine.club/@shadow8t4">
            <a>
                <Image
                  src={finalsrc}
                  layout="fill"
                  objectFit="contain"
                  alt={alt}
                />
            </a>
          </Link>
        </div>
        <div className="order-2 flex overflow-auto items-center justify-center animate-wiggle p-4 sm:text-lg text-xs text-center sm:min-h-full h-full text-werefox-blue-dark dark:text-werefox-blue">
          <p>
            {answer}
            <br />
            {"- "}
            <Link href="https://vulpine.club/@shadow8t4">
              <a
                target="_blank"
                className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
              >{`@shadow8t4`}</a>
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}