Add temporary link service card

src/components/Card.astro

@@ -4,8 +4,9 @@ interface Props {
   description: string;
   href: string;
   cta: string;
-  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch";
+  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch" | "link";
   accent?: "primary" | "default";
+  warning?: string;
 }
 
 const {
@@ -15,6 +16,7 @@ const {
   cta,
   icon,
   accent = "default",
+  warning,
 } = Astro.props;
 
 const icons = {
@@ -24,6 +26,7 @@ const icons = {
   psn: "fa-brands fa-playstation",
   xbox: "fa-brands fa-xbox",
   switch: "fa-solid fa-gamepad",
+  link: "fa-solid fa-link",
 } satisfies Record<Props["icon"], string>;
 ---
 
@@ -44,6 +47,7 @@ const icons = {
         <span class="card-arrow" aria-hidden="true">↗</span>
       </div>
       <p>{description}</p>
+      {warning && <p class="card-warning">{warning}</p>}
     </div>
     <span class="card-cta">{cta}</span>
   </a>

src/data/links.ts

@@ -3,8 +3,9 @@ export type HubLink = {
   description: string;
   href: string;
   cta: string;
-  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch";
+  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch" | "link";
   accent?: "primary" | "default";
+  warning?: string;
 };
 
 export const hero = {
@@ -62,3 +63,16 @@ export const playLinks: HubLink[] = [
     icon: "switch",
   },
 ];
+
+export const utilityLinks: HubLink[] = [
+  {
+    title: "Short Tiny Link to the Internet",
+    description:
+      "Short-lived URL helper powered by Kutt for quick shares, redirects, and temporary references.",
+    href: "https://tinyurl.thelilfrog.com",
+    cta: "Open Short Link",
+    icon: "link",
+    warning:
+      "Tinyfied URLs can be unavailable at any moment. Use this service only to generate temporary links.",
+  },
+];

src/pages/index.astro

@@ -2,7 +2,7 @@
 import Card from "../components/Card.astro";
 import Section from "../components/Section.astro";
 import Layout from "../layouts/Layout.astro";
-import { codeLinks, hero, playLinks } from "../data/links";
+import { codeLinks, hero, playLinks, utilityLinks } from "../data/links";
 ---
 
 <Layout
@@ -31,6 +31,15 @@ import { codeLinks, hero, playLinks } from "../data/links";
       {codeLinks.map((link) => <Card {...link} />)}
     </Section>
 
+    <Section
+      id="links"
+      title="Temporary Links"
+      columns="2"
+      description="A small utility for temporary short URLs when permanence is not important."
+    >
+      {utilityLinks.map((link) => <Card {...link} />)}
+    </Section>
+
     <Section
       id="play"
       title="Play"

src/styles/global.css

@@ -171,6 +171,16 @@ h3 {
   color: var(--muted);
 }
 
+.card-warning {
+  padding: 0.75rem 0.9rem;
+  border: 1px solid rgba(245, 158, 11, 0.24);
+  border-radius: 14px;
+  background: rgba(245, 158, 11, 0.08);
+  color: #f7c77a;
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+
 .section-grid {
   display: grid;
   gap: 1rem;