add friends page

add friends!

components/pages/friends/friend-card.tsx

@@ -0,0 +1,37 @@
+import { Friend } from 'app/friends/page';
+import clsx from 'clsx';
+import Image from 'next/image';
+
+const FriendCard = ({ friend }: { friend: Friend }) => {
+  return (
+    <a href={friend.link} target="_blank">
+      <div
+        className={clsx(
+          'py-3 px-4 rounded-xl bg-slate-100',
+          'hover:bg-slate-200',
+          'transition-all duration-300',
+          'flex items-center cursor-pointer',
+          'justify-between dark:bg-rua-gray-800',
+          'hover:dark:bg-rua-gray-700',
+          'shadow-card',
+        )}
+      >
+        <div>
+          <h2 className={clsx('text-xl font-semibold')}>{friend.name}</h2>
+          <div className="text-sm text-subtext0">{friend.link}</div>
+        </div>
+        <div className="overflow-hidden rounded-lg w-14 h-14">
+          <Image
+            src={friend.avatar}
+            alt="avatar"
+            width={56}
+            height={56}
+            objectFit="contain"
+          />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default FriendCard;

components/pages/projects/project-card.tsx

@@ -26,6 +26,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
           'flex items-center cursor-pointer',
           'justify-between dark:bg-rua-gray-800',
           'hover:dark:bg-rua-gray-700',
+          'shadow-card',
         )}
       >
         {Icon ? Icon : <VscGithubInverted className="w-8 h-8" />}