⚡️ UserCard: React.memo + <a> instead of <div>

website/components/UserCard/UserCard.css

@@ -0,0 +1,47 @@
+.UserCard {
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-direction: column;
+  word-wrap: break-word;
+  box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
+  border: 1px solid black;
+  border-radius: 1rem;
+  margin: 0 0 50px 0;
+  cursor: pointer;
+  transition: all 0.3s;
+  padding: 10px;
+}
+.UserCard__container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--text-color);
+  text-decoration: none !important;
+}
+.UserCard:hover {
+  transform: translateY(-7px);
+}
+/* col-md */
+@media (min-width: 768px) {
+  .UserCard {
+    margin: 0 30px 50px 30px;
+  }
+}
+/* col-xl */
+@media (min-width: 1200px) {
+  .UserCard {
+    margin: 0 20px 50px 20px;
+  }
+}
+.UserCard__logo {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.UserCard__name {
+  margin: 30px 0 10px 0;
+}

website/components/UserCard/UserCard.jsx

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import { forwardRef, memo } from 'react'
+import { API_URL } from '../../utils/config/config'
+import './UserCard.css'
+
+const UserCard = memo(
+  forwardRef((props, ref) => {
+    return (
+      <div className='UserCard col-sm-24 col-md-10 col-xl-7' ref={ref}>
+        <Link href='/users/[name]' as={`/users/${props.name}`}>
+          <a className='UserCard__container'>
+            <img
+              className='UserCard__logo'
+              src={API_URL + props.logo}
+              alt={props.name}
+            />
+            <h2 className='UserCard__name'>{props.name}</h2>
+          </a>
+        </Link>
+      </div>
+    )
+  })
+)
+
+export default UserCard