diff --git a/src/components/DynamicAwsServices.astro b/src/components/DynamicAwsServices.astro
new file mode 100644
index 00000000..8cb44257
--- /dev/null
+++ b/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
+ };
+});
+---
+
+
+ {serviceData.map(service => (
+
+ ))}
+
diff --git a/src/components/ServiceBox.tsx b/src/components/ServiceBox.tsx
new file mode 100644
index 00000000..83e0d4d5
--- /dev/null
+++ b/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 = ({ title, description, href }) => {
+ return (
+
+
+
{title}
+
{description}
+