add aws service cards

src/components/DynamicAwsServices.astro

@@ -0,0 +1,38 @@
+---
+import { getCollection } from 'astro:content';
+import { ServiceBox } from './ServiceBox.tsx';
+
+const allServices = await getCollection('docs', ({ id }) => {
+  return id.startsWith('aws/services/') && !id.includes('/index');
+});
+
+const sortedServices = allServices.sort((a, b) => {
+  const titleA = a.data.title || a.data.linkTitle || '';
+  const titleB = b.data.title || b.data.linkTitle || '';
+  return titleA.localeCompare(titleB);
+});
+
+const serviceData = sortedServices.map(service => {
+  const title = service.data.title || service.data.linkTitle || 'Unknown Service';
+  const description = service.data.description || `Implementation details for ${title} API`;
+
+  const href = `/${service.id}`;
+
+  return {
+    title,
+    description,
+    href
+  };
+});
+---
+
+<div class="service-grid">
+  {serviceData.map(service => (
+    <ServiceBox 
+      title={service.title}
+      description={service.description}
+      href={service.href}
+      client:load
+    />
+  ))}
+</div> 

src/components/ServiceBox.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface ServiceBoxProps {
+  title: string;
+  description: string;
+  href: string;
+}
+
+export const ServiceBox: React.FC<ServiceBoxProps> = ({ title, description, href }) => {
+  return (
+    <a href={href} className="service-box">
+      <div className="service-box-content">
+        <h3 className="service-box-title">{title}</h3>
+        <p className="service-box-description">{description}</p>
+      </div>
+    </a>
+  );
+}; 

src/content/docs/aws/aws-services.mdx

@@ -0,0 +1,13 @@
+---
+title: Local AWS Services
+description: Browse LocalStack's implemented AWS services and explore their capabilities
+template: doc
+sidebar:
+    order: 3
+---
+
+import DynamicAwsServices from '../../../components/DynamicAwsServices.astro';
+
+Browse LocalStack's implemented AWS services and explore their comprehensive feature sets. Each service provides detailed documentation on APIs, configuration options, and practical examples to help you get started quickly.
+
+<DynamicAwsServices /> 

src/styles/global.css

@@ -2,4 +2,50 @@
 
 @import '@astrojs/starlight-tailwind';
 @import 'tailwindcss/theme.css' layer(theme);
-@import 'tailwindcss/utilities.css' layer(utilities);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+.service-box {
+  display: block;
+  padding: 1.5rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+  height: 100%;
+}
+
+.service-box:hover {
+  border-color: var(--sl-color-accent);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.service-box-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.service-box-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: var(--sl-color-white);
+  line-height: 1.4;
+}
+
+.service-box-description {
+  font-size: 0.875rem;
+  color: var(--sl-color-gray-2);
+  margin: 0;
+  line-height: 1.5;
+  flex-grow: 1;
+}
+
+.service-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}