Home Grid (#935)

# Inspiration - https://github.com/arnvgh/www - https://www.arnvgh.me/
mateusfg7 · May 5, 2024 · 2f16ed5 · 2f16ed5
2 parents 4416ccb + 350e577
commit 2f16ed5
Show file tree

Hide file tree

Showing 41 changed files with 4,226 additions and 9 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,9 @@
 UMAMI_WEBSITE_ID=
 HOST=
 
-LASTFM_API_KEY=
 GITHUB_TOKEN=
+LASTFM_API_KEY=
+
+SPOTIFY_CLIENT_ID=
+SPOTIFY_CLIENT_SECRET=
+SPOTIFY_REFRESH_TOKEN=
diff --git a/next.config.js b/next.config.js
@@ -9,7 +9,8 @@ const nextConfig = {
       'i.imgur.com',
       'mateusf.com',
       'lastfm.freetls.fastly.net',
-      'contribution.catsjuice.com'
+      'contribution.catsjuice.com',
+      'i.scdn.co'
     ]
   },
   async rewrites() {

diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "simple-git": "^3.18.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.0.0",
     "typescript": "5.3.3",
     "velite": "0.1.0-beta.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_components/grid/cards/cat.jpg b/src/app/_components/grid/cards/cat.jpg
diff --git a/src/app/_components/grid/cards/discord-status.tsx b/src/app/_components/grid/cards/discord-status.tsx
@@ -0,0 +1,67 @@
+import { DiscordLogo } from '@phosphor-icons/react/dist/ssr'
+
+enum status {
+  online,
+  idle,
+  dnd
+  //   offline,
+}
+
+export type LanyardResponse = {
+  data: {
+    discord_user: {
+      id: string
+      username: string
+      discriminator: string
+      avatar: string
+    }
+    discord_status: status
+    active_on_discord_web: boolean
+    active_on_discord_desktop: boolean
+    active_on_discord_mobile: boolean
+    listening_to_spotify: boolean
+    activities: {
+      id: string
+      name: string
+      type: number
+      state: string
+      timestamps: {
+        end: number
+      }
+      emoji: {
+        name: string
+      }
+      created_at: number
+    }[]
+    success: boolean
+  }
+}
+
+export async function DiscordStatus() {
+  const { data }: LanyardResponse = await fetch(
+    'https://api.lanyard.rest/v1/users/274521154230812672',
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        'cache-control': 'public, s-maxage=60, stale-while-revalidate=30'
+      }
+    }
+  ).then(data => data.json())
+
+  return (
+    <div className="flex h-36 w-fit items-center justify-center overflow-hidden rounded-xl p-2 text-white">
+      <div className="relative flex -rotate-12 items-center justify-center gap-[0.35rem]">
+        {/* <DiscordLogoIcon className="w-48 h-48 text-blue-800 absolute top-0" /> */}
+        <DiscordLogo
+          size="1em"
+          className="absolute -bottom-6 -z-50 h-40 w-40 -rotate-45 text-white/35 brightness-50"
+        />
+
+        <p className="text-xl font-semibold text-black dark:text-white">
+          {data.discord_status}
+          <p className="text-sm">(@mateusfg7)</p>
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/_components/grid/cards/github-link.tsx b/src/app/_components/grid/cards/github-link.tsx
@@ -0,0 +1,40 @@
+// https://github.com/arnvgh/www/blob/main/components/misc/(home)/cards/gh-link.tsx
+
+import Image from 'next/image'
+import { GithubLogo } from '@phosphor-icons/react/dist/ssr'
+
+import catImg from './cat.jpg'
+
+export const GithubLink = () => {
+  return (
+    <a
+      className="group relative flex h-full w-full transform-gpu flex-col justify-between gap-5 overflow-hidden rounded-xl text-white transition-all duration-500 will-change-[outline,_transform] group-hover:scale-[.97] hover:scale-[.97] active:scale-100"
+      href="http://github.com/mateusfg7"
+      target="_blank"
+    >
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-20"
+      >
+        <Image
+          src={catImg}
+          alt="cat img"
+          className="absolute inset-0 h-full w-full rounded-lg object-cover object-center brightness-[0.7]"
+        />
+        <span
+          aria-hidden="true"
+          className="absolute inset-0 bg-gradient-to-t from-neutral-900/60 to-neutral-900/20 dark:bg-neutral-900/50"
+        ></span>
+      </span>
+      <span aria-hidden="true" className="px-6 pt-6">
+        <span className="flex justify-between">
+          <GithubLogo size="1em" className="text-xl" />
+        </span>
+      </span>
+      <span className="space-y-0.5 px-6 pb-6">
+        <span className="block font-semibold">GitHub</span>
+        <span className="block text-sm">My experiments (aka projects)</span>
+      </span>
+    </a>
+  )
+}
diff --git a/src/app/_components/grid/cards/github-stats.tsx b/src/app/_components/grid/cards/github-stats.tsx
@@ -0,0 +1,62 @@
+import { getGithubRepositories, getGithubUserData } from '~/lib/github'
+
+export const GithubStats = async () => {
+  const { followers, public_repos } = await getGithubUserData()
+  const repositories = await getGithubRepositories()
+  const stars = repositories.reduce(
+    (acc, repo) => acc + repo.stargazers_count,
+    0
+  )
+  return (
+    <div className="group relative h-full w-full transform-gpu overflow-hidden rounded-xl bg-[#f7f2f2] duration-500 hover:scale-[.97] dark:bg-[#0d1117]">
+      <a
+        href="http://github.com/mateusfg7"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <BackgroundPattern />
+        <div className="absolute bottom-1 flex flex-row flex-wrap gap-x-6 p-2 sm:gap-x-4 md:gap-x-6">
+          <GitHubStatsData label="Stars" value={stars} />
+          <GitHubStatsData label="Followers" value={followers} />
+          <GitHubStatsData label="Repos" value={public_repos} />
+        </div>
+      </a>
+    </div>
+  )
+}
+
+const GitHubStatsData = ({
+  label,
+  value
+}: {
+  label: React.ReactNode
+  value: number
+}) => {
+  return (
+    <div>
+      <span className="mr-1 text-sm text-zinc-600 dark:text-zinc-400">
+        {label}:
+      </span>
+      {value}
+    </div>
+  )
+}
+
+const BackgroundPattern = () => {
+  let seed = 1
+  function seededRandom() {
+    const x = Math.sin(seed++) * 10000
+    return x - Math.floor(x)
+  }
+  const colours = ['#39d353', '#0e4429', '#0e4429', '#006d32', '#161b22']
+  const days = new Array(62)
+    .fill(null)
+    .map(_ => colours[Math.floor(seededRandom() * colours.length)])
+  return (
+    <div className="z-0 grid grid-cols-[repeat(15,minmax(0,1fr))] gap-1 opacity-90">
+      {days.map((c, i) => (
+        <div key={i} className="size-3 rounded" style={{ background: c }} />
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/bash.tsx b/src/app/_components/grid/cards/icons/bash.tsx
@@ -0,0 +1,17 @@
+import { SVGProps } from 'react'
+
+export function BashIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 128 128" {...props}>
+      <path fill="none" d="M4.24 4.24h119.53v119.53H4.24z"></path>
+      <path
+        className="fill-[#293138] dark:fill-[#afbfcd]"
+        d="M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2 2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96zM79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6.06-.06.12-.1.18-.13.11-.06.22-.07.31-.03 1.14.38 2.59.2 3.99-.5 1.78-.9 2.97-2.72 2.95-4.52-.02-1.64-.9-2.31-3.05-2.33-2.74.01-5.3-.53-5.34-4.57-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.77.77 0 01-.19.14c-.1.05-.19.06-.28.05-.49-.11-1.65-.36-3.48.56-1.92.97-2.59 2.64-2.58 3.88.02 1.48.77 1.93 3.39 1.97 3.49.06 4.99 1.58 5.03 5.09.05 3.44-1.79 7.15-4.61 9.41zm26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9-.65.11-1.32.19-1.98.19-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63-1.27-2.67-4.09-3.39-7.38-1.47z"
+      ></path>
+      <path
+        fill="#4FA847"
+        d="M99.12 90.73l-9.4 5.62c-.25.15-.43.31-.43.61v2.46c0 .3.2.43.45.28l9.54-5.8c.25-.15.29-.42.29-.72v-2.17c0-.3-.2-.42-.45-.28z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/cloudflare.tsx b/src/app/_components/grid/cards/icons/cloudflare.tsx
@@ -0,0 +1,20 @@
+import { SVGProps } from 'react'
+
+export function CloudflareIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 128 128" {...props}>
+      <path
+        fill="#FFF"
+        d="m115.679 69.288-15.591-8.94-2.689-1.163-63.781.436v32.381h82.061z"
+      ></path>
+      <path
+        fill="#F38020"
+        d="M87.295 89.022c.763-2.617.472-5.015-.8-6.796-1.163-1.635-3.125-2.58-5.488-2.689l-44.737-.581c-.291 0-.545-.145-.691-.363s-.182-.509-.109-.8c.145-.436.581-.763 1.054-.8l45.137-.581c5.342-.254 11.157-4.579 13.192-9.885l2.58-6.723c.109-.291.145-.581.073-.872-2.906-13.158-14.644-22.97-28.672-22.97-12.938 0-23.913 8.359-27.838 19.952a13.35 13.35 0 0 0-9.267-2.58c-6.215.618-11.193 5.597-11.811 11.811-.145 1.599-.036 3.162.327 4.615C10.104 70.051 2 78.337 2 88.549c0 .909.073 1.817.182 2.726a.895.895 0 0 0 .872.763h82.57c.472 0 .909-.327 1.054-.8l.617-2.216z"
+      ></path>
+      <path
+        fill="#FAAE40"
+        d="M101.542 60.275c-.4 0-.836 0-1.236.036-.291 0-.545.218-.654.509l-1.744 6.069c-.763 2.617-.472 5.015.8 6.796 1.163 1.635 3.125 2.58 5.488 2.689l9.522.581c.291 0 .545.145.691.363.145.218.182.545.109.8-.145.436-.581.763-1.054.8l-9.924.582c-5.379.254-11.157 4.579-13.192 9.885l-.727 1.853c-.145.363.109.727.509.727h34.089c.4 0 .763-.254.872-.654.581-2.108.909-4.325.909-6.614 0-13.447-10.975-24.422-24.458-24.422"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/css.tsx b/src/app/_components/grid/cards/icons/css.tsx
@@ -0,0 +1,32 @@
+import { SVGProps } from 'react'
+
+export function CSS3Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 128 128" {...props}>
+      <path
+        fill="#1572B6"
+        d="M18.814 114.123L8.76 1.352h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"
+      ></path>
+      <path
+        fill="#33A9DC"
+        d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"
+      ></path>
+      <path
+        fill="#fff"
+        d="M64.001 51.429h18.302l1.264-14.163H64.001V23.435h34.682l-.332 3.711-3.4 38.114h-30.95V51.429z"
+      ></path>
+      <path
+        fill="#EBEBEB"
+        d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031H33.752l1.937 21.717 28.331 7.863.063-.018v-14.39z"
+      ></path>
+      <path
+        fill="#fff"
+        d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881H81.127z"
+      ></path>
+      <path
+        fill="#EBEBEB"
+        d="M64.048 23.435v13.831H30.64l-.277-3.108-.63-7.012-.331-3.711h34.646zm-.047 27.996v13.831H48.792l-.277-3.108-.631-7.012-.33-3.711h16.447z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/docker.tsx b/src/app/_components/grid/cards/icons/docker.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+export function DockerIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 128 128" {...props}>
+      <path
+        d="M86 118.4c0-.3.1-.6 0-.9-.2-.3-.3-.5-.5-.7-.5-.6-1-1.1-1.6-1.7l-5.9-6 4.6-4.7 2.5-2.7c.4-.4.9-1.2.9-1.8v-.4c0-.9-.4-1.4-1.3-1.6l.2.1h-.7c-.6 0-2.3 1.6-2.7 2.1-1.5 1.5-2.5 2.9-4.5 4.4V92.6c0-1.1-.6-1.6-1.7-1.6H75c-1.1 0-2 .5-2 1.6v25.9c0 1.1.9 1.5 2 1.5h.3c1.1 0 1.7-.5 1.7-1.5v-4.6l3 2.9c.9.9 1.8 1.5 2.6 2.3.4.4 1.2.9 1.8.9h.3c1 0 1.3-.5 1.5-1.3l-.2.1v-.4zM125.1 98h-.4c-2.2 0-4.2.6-6 1.9-3 2.2-4.7 5.1-4.7 8.9v9.8c0 1.1.4 1.4 1.5 1.4h.3c1.1 0 2.2-.4 2.2-1.4v-9.2c0-2 .4-3.9 1.9-5.4 1.2-1.2 2.7-2.2 4.4-2.2 1.3 0 2.8-.3 2.8-1.9 0-1.2-.9-1.9-2-1.9zm-15.4 5c-1.1-1.8-2.6-3.2-4.5-4.1-3.5-1.7-7.2-1.9-10.6.1l-.5.3c-1.4.8-2.6 1.8-3.5 3.1-2.6 3.8-2.9 8.1-.6 12.1l.2.4c1 1.7 2.3 3.1 4 4 3.6 2 7.5 2.2 11.1.2l.3-.2c1-.6 1.2-1.6.7-2.6-.2-.4-.6-.7-1-.9h-.2c-.7-.1-2.6.7-3.3 1-1.4.2-3 .3-4.4-.2l7.6-6.6c1.1-1 2.3-2.1 3.5-3 1-.8 2-1.9 1.2-3.3v-.3zm-6.9 3.6l-8.5 7.3c-.3-.3-.5-.7-.7-1-.6-1-1-2.2-1-3.4-.1-3 1-5.5 3.7-7 2-1.2 4.2-1.4 6.4-.6 1.1.4 2.4 1.1 3.1 2.1-1 .9-2.1 1.7-3 2.6zM22 91h-.3c-1.1 0-1.7.4-1.7 1.5v8.1c-2-1.8-4.4-2.5-7.2-2.5H12c-1.9 0-3.7.3-5.4 1.3-3.6 2.1-5.6 5.2-5.6 9.4v.8c0 1.9.5 3.5 1.5 5.2 2.1 3.6 5.4 5.4 9.5 5.4h.8c1.9 0 3.9-.3 5.5-1.2 3.6-2.1 5.7-5.2 5.7-9.3v-17c0-1.3-.9-1.7-2-1.7zm-3.1 21.8c-1.5 2.5-3.7 3.9-6.6 3.9-1.2 0-2.4-.3-3.4-.9-2.6-1.4-4.1-3.7-4.1-6.7 0-1.1.2-2.1.7-3.1 1.4-2.9 3.7-4.5 6.9-4.5 1.6 0 3 .5 4.2 1.4 2.1 1.5 3.3 3.5 3.3 6.1.1 1.4-.3 2.6-1 3.8zM37.6 98H37c-1.9 0-3.8.3-5.4 1.3-3.6 2.1-5.6 5.2-5.6 9.4v.8c0 1.9.5 3.5 1.5 5.2 2.1 3.6 5.4 5.4 9.6 5.4h.8c1.9 0 3.8-.3 5.5-1.2 3.6-2.1 5.7-5.2 5.7-9.3v-.8c0-1.8-.6-3.3-1.4-4.8-2.2-4-5.7-6-10.1-6zm6.4 14.8c-1.5 2.4-3.6 3.9-6.5 3.9-1.3 0-2.6-.3-3.8-1-2.5-1.5-3.9-3.6-3.9-6.5 0-1.1.2-2.1.7-3.1 1.4-2.9 3.7-4.5 6.9-4.5 1.5 0 2.8.4 4 1.2 2.2 1.5 3.5 3.6 3.5 6.3.1 1.2-.2 2.5-.9 3.7zm24.5-13.4l-.1.1c-1.7-1.1-3.6-1.5-5.6-1.5H62c-1.9 0-3.8.3-5.4 1.3-3.6 2.1-5.6 5.2-5.6 9.3v.8c0 1 .2 1.9.4 2.9 1.6 5.5 5.9 8.6 11.7 8.2 1.6-.1 5.9-.6 5.9-3v-.4c0-.9-.7-1.7-1.5-1.9l-.1-.2h-.7l-.2.3c-.9.4-2.4 1.2-3.4 1.2-1.2 0-2.5 0-3.6-.6-2.9-1.4-4.6-3.7-4.6-6.9 0-1.1.2-2.1.7-3.1 1.4-2.8 3.7-4.6 6.9-4.5.6 0 1.7.3 2.3.6.5.2 1.8 1 2.4 1h.2l.1-.2c.9-.2 1.6-.9 1.6-1.8v-.4c0-.4-.2-.7-.4-1l-.2-.2zM5.8 68.2l.1.2c7.9 13.4 21.7 19 36.8 19 29.2 0 53.3-13.1 64.3-40.6 7.4.4 15-1.8 18.6-8.9l.9-1.8-1.8-1c-4.3-2.5-10-2.8-14.8-1.4-.6-5.2-4-9.7-8-12.9l-1.6-1.3-1.3 1.6c-2.7 3.1-3.5 8.3-3.1 12.3.3 2.9 1.2 5.9 3 8.3-1.4.8-2.9 1.9-4.3 2.4-2.8 1-5.9 2-8.9 2H79V32H66V7H51v12H26v13H13v14H1.8l-.2 1.5c-.5 6.4.3 12.6 3 18.5l1.2 2.2zM66 35h11v11H66V35zM53 9h11v11H53V9zm0 13h11v11H53V22zm0 13h11v11H53V35zM40 22h11v11H40V22zm0 13h11v11H40V35zm1.1 31.2c0 1.7-1.4 3.1-3.1 3.1-1.7 0-3.1-1.4-3.1-3.1 0-1.7 1.4-3.1 3.1-3.1 1.7.1 3.1 1.4 3.1 3.1zM28 22h10v11H28V22zm0 13h10v11H28V35zm-13 0h11v11H15V35zm2.4 38c1.6 0 3.2 0 4.7-.1 3.9-.2 7.3-.7 10.1-1.5 2.3 5.3 6.5 10.2 14 13.8l-3.5.1c-15.8-.1-24.3-5.4-31.3-12.4 2.1.1 4.1.1 6 .1zM38 68.4c1.2 0 2.2-1 2.2-2.2 0-.3-.1-.6-.2-.8-.2.3-.4.5-.8.5-.5 0-.9-.4-.9-.9 0-.3.2-.6.4-.8-.1-.1-.4-.2-.7-.2-1.2 0-2.2 1-2.2 2.2.1 1.2 1 2.2 2.2 2.2z"
+        fill="#019BC6"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/expo.tsx b/src/app/_components/grid/cards/icons/expo.tsx
@@ -0,0 +1,16 @@
+import { SVGProps } from 'react'
+
+export function ExpoIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      className={`fill-[#000020] dark:fill-white ${className}`}
+      {...props}
+    >
+      <title>Expo</title>
+      <path d="M0 20.084c.043.53.23 1.063.718 1.778.58.849 1.576 1.315 2.303.567.49-.505 5.794-9.776 8.35-13.29a.761.761 0 011.248 0c2.556 3.514 7.86 12.785 8.35 13.29.727.748 1.723.282 2.303-.567.57-.835.728-1.42.728-2.046 0-.426-8.26-15.798-9.092-17.078-.8-1.23-1.044-1.498-2.397-1.542h-1.032c-1.353.044-1.597.311-2.398 1.542C8.267 3.991.33 18.758 0 19.77Z" />
+    </svg>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/figma.tsx b/src/app/_components/grid/cards/icons/figma.tsx
@@ -0,0 +1,28 @@
+import { SVGProps } from 'react'
+
+export function FigmaIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 128 128" {...props}>
+      <path
+        fill="#0acf83"
+        d="M45.5 129c11.9 0 21.5-9.6 21.5-21.5V86H45.5C33.6 86 24 95.6 24 107.5S33.6 129 45.5 129zm0 0"
+      ></path>
+      <path
+        fill="#a259ff"
+        d="M24 64.5C24 52.6 33.6 43 45.5 43H67v43H45.5C33.6 86 24 76.4 24 64.5zm0 0"
+      ></path>
+      <path
+        fill="#f24e1e"
+        d="M24 21.5C24 9.6 33.6 0 45.5 0H67v43H45.5C33.6 43 24 33.4 24 21.5zm0 0"
+      ></path>
+      <path
+        fill="#ff7262"
+        d="M67 0h21.5C100.4 0 110 9.6 110 21.5S100.4 43 88.5 43H67zm0 0"
+      ></path>
+      <path
+        fill="#1abcfe"
+        d="M110 64.5c0 11.9-9.6 21.5-21.5 21.5S67 76.4 67 64.5 76.6 43 88.5 43 110 52.6 110 64.5zm0 0"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/google-cloud.tsx b/src/app/_components/grid/cards/icons/google-cloud.tsx
@@ -0,0 +1,24 @@
+import { SVGProps } from 'react'
+
+export function GoogleCloudIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 128 128" {...props}>
+      <path
+        fill="#ea4535"
+        d="M80.6 40.3h.4l-.2-.2 14-14v-.3c-11.8-10.4-28.1-14-43.2-9.5C36.5 20.8 24.9 32.8 20.7 48c.2-.1.5-.2.8-.2 5.2-3.4 11.4-5.4 17.9-5.4 2.2 0 4.3.2 6.4.6.1-.1.2-.1.3-.1 9-9.9 24.2-11.1 34.6-2.6h-.1z"
+      ></path>
+      <path
+        fill="#557ebf"
+        d="M108.1 47.8c-2.3-8.5-7.1-16.2-13.8-22.1L80 39.9c6 4.9 9.5 12.3 9.3 20v2.5c16.9 0 16.9 25.2 0 25.2H63.9v20h-.1l.1.2h25.4c14.6.1 27.5-9.3 31.8-23.1 4.3-13.8-1-28.8-13-36.9z"
+      ></path>
+      <path
+        fill="#36a852"
+        d="M39 107.9h26.3V87.7H39c-1.9 0-3.7-.4-5.4-1.1l-15.2 14.6v.2c6 4.3 13.2 6.6 20.7 6.6z"
+      ></path>
+      <path
+        fill="#f9bc15"
+        d="M40.2 41.9c-14.9.1-28.1 9.3-32.9 22.8-4.8 13.6 0 28.5 11.8 37.3l15.6-14.9c-8.6-3.7-10.6-14.5-4-20.8 6.6-6.4 17.8-4.4 21.7 3.8L68 55.2C61.4 46.9 51.1 42 40.2 42.1z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/app/_components/grid/cards/icons/heroku.tsx b/src/app/_components/grid/cards/icons/heroku.tsx
@@ -0,0 +1,12 @@
+import { SVGProps } from 'react'
+
+export function HerokuIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 128 128" {...props}>
+      <path
+        fill="#6762A6"
+        d="M102.1 2H25.9C19.3 2 14 7.3 14 13.9v100.3c0 6.6 5.3 11.9 11.9 11.9h76.3c6.6 0 11.9-5.3 11.9-11.9V13.9C114 7.3 108.7 2 102.1 2zM37 108.7V80.5l14.1 14.1L37 108.7zm53 .3H76.9l.1-.2V59.4s3.1-11.8-39.7 4.8c-.1.2-.2-45.7-.2-45.7l13.9-.1v29.4s39-15.4 39 11.7V109zm-5.2-73H70c5.3-6 10.2-17 10.2-17h15.3s-2.6 7-10.7 17z"
+      ></path>
+    </svg>
+  )
+}