feat(all): tailwind v5 rewrite, astro components

src/components/ServiceCard.astro

@@ -0,0 +1,24 @@
+---
+export interface ServiceProps {
+  serviceName: string;
+  serviceUrl?: string;
+}
+
+const { serviceName, serviceUrl } = Astro.props;
+
+const formattedName = serviceName.toLowerCase().replace(/\s+/g, "-");
+
+const svgFile = `/src/icons/${formattedName}.svg`;
+
+const defaultDomain = "home.arpa";
+const href = serviceUrl ?? `https://${formattedName}.${defaultDomain}`;
+---
+
+<a href={href} target="_blank" rel="noopener noreferrer" aria-label={`Open ${serviceName}`}>
+  <div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md hover:bg-neutral-600 transition">
+    <div>
+      <img src={svgFile} alt={`${serviceName} icon`} class="sm:w-12 w-10 aspect-square" />
+    </div>
+    <span>{serviceName}</span>
+  </div>
+</a>