Uln.industries mailbox email homepage widget

mailbox-email.module.scss

.mailboxContainer {
  position: relative;

  background-color: #111111; /* Changed to black background */
  color: #ffffff; /* Changed to white foreground */
  z-index: 1;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: contrast(10);
  font-weight: 800;
  transform: rotateY(17deg);
}

.mailboxContent {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  filter: blur(2px);
  background: linear-gradient(129deg, rgba(0, 0, 0, 1) 0%, rgb(59, 59, 59) 100%); /* Changed to gradient from black to dark grey */
  transition: filter 0.5s ease-in-out;

  animation: hover-enabled-blur 2s ease-in-out;

  &:hover {
    filter: blur(1px);
  }

  @media (hover: none) {
    animation: no-hover-blur 2s ease-in-out;
    transition: none;
    filter: blur(1px);
  }

  > :nth-child(1) {
    transform: rotateZ(-0.5deg);
  }

  > :nth-child(2) {
    transform: rotateZ(0.5deg);
  }

  > :nth-child(3) {
    transform: rotateZ(-0.25deg);
  }
}

@keyframes hover-enabled-blur {
  0% {
    filter: blur(8px);
  }
  100% {
    filter: blur(2px);
  }
}

@keyframes no-hover-blur {
  0% {
    filter: blur(8px);
  }

  100% {
    filter: blur(1px);
  }
}

mailbox-email.tsx

import Link from "next/link";

import classes from "./mailbox-email.module.scss";
import { cn } from "../../lib/utils";

const MailboxEmail = () => {
  return (
    <Link
      href={"mailto:[email protected]"}
      className={classes.mailboxContainer}
    >
      <div
        className={cn(
          "flex justify-center items-center",
          classes.mailboxContent,
        )}
      >
        <div>jake</div>
        <pre style={{ fontFamily: "monospace", lineHeight: 1 }}>
          {" "}
          {`
 ┌―――――――┐
 │    ▓▓️ │
 │ ==    │
 │ ====  │
 └―――――――┘ 
        `}
        </pre>
        <div>uln.industries</div>
      </div>
    </Link>
  );
};

export default MailboxEmail;