feat: icons

app/components/HomeElement.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import type { ReactNode } from "react";
 
@@ -56,97 +57,56 @@ export default function HomeElement({
   );
 }
 
-export function JellyfinIcon() {
+export function StreamingIcon() {
   return (
     <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
       <defs>
-        <linearGradient id="jellyfin-gradient" x1="16" y1="84" x2="80" y2="12">
+        <linearGradient id="streaming-gradient" x1="14" y1="80" x2="82" y2="16">
-          <stop stopColor="#7c3cff" />
+          <stop stopColor="#8b4dff" />
-          <stop offset="0.52" stopColor="#00d8ff" />
+          <stop offset="0.5" stopColor="#c395fc" />
-          <stop offset="1" stopColor="#c833ff" />
+          <stop offset="1" stopColor="#6df4ff" />
         </linearGradient>
       </defs>
-      <path
+      <rect x="10" y="18" width="76" height="56" rx="9" fill="#11182d" stroke="url(#streaming-gradient)" strokeWidth="6" />
-        d="M48 11 88 80H8z"
+      <path d="m41 34 22 12.5L41 59z" fill="url(#streaming-gradient)" />
-        fill="none"
+      <path d="M31 85h34M39 74v11m18-11v11" fill="none" stroke="#c395fc" strokeLinecap="round" strokeWidth="6" />
-        stroke="url(#jellyfin-gradient)"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="9"
-      />
-      <path
-        d="M48 35 66 67H30z"
-        fill="none"
-        stroke="url(#jellyfin-gradient)"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="8"
-      />
     </svg>
   );
 }
 
-export function SeerrIcon() {
+export function JellyseerrIcon() {
   return (
-    <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
+    <Image
-      <defs>
+      className="service-brand-icon service-brand-icon--jellyseerr"
-        <linearGradient id="seerr-gradient" x1="16" y1="82" x2="80" y2="14">
+      src="/assets/jellyseerr.svg"
-          <stop stopColor="#ff6b8a" />
+      alt=""
-          <stop offset="0.5" stopColor="#ffd166" />
+      width={96}
-          <stop offset="1" stopColor="#6df4ff" />
+      height={96}
-        </linearGradient>
+    />
-      </defs>
-      <rect
-        x="15"
-        y="22"
-        width="58"
-        height="48"
-        rx="8"
-        fill="none"
-        stroke="url(#seerr-gradient)"
-        strokeWidth="7"
-      />
-      <path d="m42 36 18 10-18 10z" fill="#ffd166" />
-      <circle cx="62" cy="62" r="14" fill="#10182e" stroke="#ff6b8a" strokeWidth="7" />
-      <path d="m72 72 10 10" stroke="#6df4ff" strokeLinecap="round" strokeWidth="7" />
-    </svg>
   );
 }
 
 export function MinecraftIcon() {
   return (
-    <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
+    <Image
-      <path d="M48 8 84 28 48 48 12 28z" fill="#7bd452" />
+      className="service-brand-icon service-brand-icon--minecraft"
-      <path d="M48 48 84 28v40L48 88z" fill="#6b4a2c" />
+      src="/assets/minecraft.svg"
-      <path d="M48 48 12 28v40l36 20z" fill="#8a6238" />
+      alt=""
-      <path d="M24 34h10v10H24zm19 9h11v11H43zm18-9h11v10H61z" fill="#5aa543" />
+      width={192}
-      <path d="M56 58h9v10h-9zm-25 0h10v11H31zm14 14h9v10h-9z" fill="#4b3525" opacity=".7" />
+      height={192}
-    </svg>
+    />
   );
 }
 
 export function AstroneerIcon() {
   return (
-    <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
+    <Image
-      <defs>
+      className="service-brand-icon service-brand-icon--astroneer"
-        <linearGradient id="astroneer-gradient" x1="16" y1="82" x2="80" y2="14">
+      src="/assets/astroneer.svg"
-          <stop stopColor="#ffd54a" />
+      alt=""
-          <stop offset="0.48" stopColor="#ff7a3d" />
+      width={192}
-          <stop offset="1" stopColor="#6df4ff" />
+      height={192}
-        </linearGradient>
+    />
-      </defs>
-      <path
-        d="M14 54c13-25 44-39 68-28"
-        fill="none"
-        stroke="url(#astroneer-gradient)"
-        strokeLinecap="round"
-        strokeWidth="7"
-      />
-      <circle cx="45" cy="48" r="22" fill="#172341" stroke="#6df4ff" strokeWidth="6" />
-      <path d="M29 41h13l7 8h18" fill="none" stroke="#ffd54a" strokeLinecap="round" strokeWidth="6" />
-      <path d="M38 65h14l9-9" fill="none" stroke="#ff7a3d" strokeLinecap="round" strokeWidth="6" />
-      <circle cx="70" cy="25" r="8" fill="#ffd54a" />
-    </svg>
   );
 }
 

app/globals.css

@@ -298,12 +298,19 @@ svg {
   margin-bottom: 22px;
 }
 
-.service-icon-shell svg {
+.service-icon-shell svg,
+.service-brand-icon {
   width: 94px;
   height: 94px;
+  object-fit: contain;
   filter: drop-shadow(0 8px 14px rgb(0 0 0 / 40%));
 }
 
+.service-brand-icon--minecraft,
+.service-brand-icon--astroneer {
+  border-radius: 20px;
+}
+
 .service-copy {
   position: relative;
   display: grid;

app/page.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
 import HomeElement, {
   AstroneerIcon,
-  JellyfinIcon,
+  JellyseerrIcon,
   MinecraftIcon,
-  SeerrIcon,
+  StreamingIcon,
 } from "./components/HomeElement";
 import { astroneerServer, siteConfig } from "./lib/server-config";
 
@@ -32,7 +32,7 @@ export default function Home() {
             variant="jellyfin"
             external
           >
-            <JellyfinIcon />
+            <StreamingIcon />
           </HomeElement>
 
           <HomeElement
@@ -43,7 +43,7 @@ export default function Home() {
             variant="seerr"
             external
           >
-            <SeerrIcon />
+            <JellyseerrIcon />
           </HomeElement>
 
           <HomeElement