leonm/landing-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: icons
CI / 🔍 Lint & Type Check (push) Successful in 1m46s
Details
CI / 🐳 Build & Push Image (push) Successful in 47s
Details

Browse Source
This commit is contained in:
Leon Morival
2026-07-16 17:53:13 +02:00
parent 6b4953ca36
commit 0c2f42b4a3
6 changed files with 46 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/HomeElement.tsx
+31 -71
View File
@@ -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">
<stop stopColor="#7c3cff" />
<stop offset="0.52" stopColor="#00d8ff" />
<stop offset="1" stopColor="#c833ff" />
<linearGradient id="streaming-gradient" x1="14" y1="80" x2="82" y2="16">
<stop stopColor="#8b4dff" />
<stop offset="0.5" stopColor="#c395fc" />
<stop offset="1" stopColor="#6df4ff" />
</linearGradient>
</defs>
<path
d="M48 11 88 80H8z"
fill="none"
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"
/>
<rect x="10" y="18" width="76" height="56" rx="9" fill="#11182d" stroke="url(#streaming-gradient)" strokeWidth="6" />
<path d="m41 34 22 12.5L41 59z" fill="url(#streaming-gradient)" />
<path d="M31 85h34M39 74v11m18-11v11" fill="none" stroke="#c395fc" strokeLinecap="round" strokeWidth="6" />
</svg>
);
}
export function SeerrIcon() {
export function JellyseerrIcon() {
return (
<svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
<defs>
<linearGradient id="seerr-gradient" x1="16" y1="82" x2="80" y2="14">
<stop stopColor="#ff6b8a" />
<stop offset="0.5" stopColor="#ffd166" />
<stop offset="1" stopColor="#6df4ff" />
</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>
<Image
className="service-brand-icon service-brand-icon--jellyseerr"
src="/assets/jellyseerr.svg"
alt=""
width={96}
height={96}
/>
);
}
export function MinecraftIcon() {
return (
<svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
<path d="M48 8 84 28 48 48 12 28z" fill="#7bd452" />
<path d="M48 48 84 28v40L48 88z" fill="#6b4a2c" />
<path d="M48 48 12 28v40l36 20z" fill="#8a6238" />
<path d="M24 34h10v10H24zm19 9h11v11H43zm18-9h11v10H61z" fill="#5aa543" />
<path d="M56 58h9v10h-9zm-25 0h10v11H31zm14 14h9v10h-9z" fill="#4b3525" opacity=".7" />
</svg>
<Image
className="service-brand-icon service-brand-icon--minecraft"
src="/assets/minecraft.svg"
alt=""
width={192}
height={192}
/>
);
}
export function AstroneerIcon() {
return (
<svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
<defs>
<linearGradient id="astroneer-gradient" x1="16" y1="82" x2="80" y2="14">
<stop stopColor="#ffd54a" />
<stop offset="0.48" stopColor="#ff7a3d" />
<stop offset="1" stopColor="#6df4ff" />
</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>
<Image
className="service-brand-icon service-brand-icon--astroneer"
src="/assets/astroneer.svg"
alt=""
width={192}
height={192}
/>
);
}