add pricing bagdes to the service pages (#33)

* get the mvp ready

* design changes

* apply inheritance logic

Author: HarshCasper

astro.config.mjs

@@ -39,6 +39,9 @@ export default defineConfig({
       title: 'Docs',
       favicon: '/images/favicons/favicon.ico',
       customCss: ['./src/styles/global.css'],
+      components: {
+        PageTitle: './src/components/PageTitleWithPricing.astro',
+      },
       head: [
         {
           tag: 'script',

src/components/PageTitleWithPricing.astro

@@ -0,0 +1,76 @@
+---
+import Default from '@astrojs/starlight/components/PageTitle.astro';
+
+// Get the current page route
+const route = Astro.locals.starlightRoute;
+const isAwsServicePage = route.id.startsWith('aws/services/') && !route.id.includes('/index');
+const tags = route.entry?.data?.tags || [];
+
+const pricingTags = tags.filter(tag => 
+  ['Free', 'Base', 'Ultimate'].includes(tag)
+);
+
+const getAvailablePlans = (plans) => {
+  if (plans.includes('Free')) {
+    return ['Free', 'Base', 'Ultimate'];
+  } else if (plans.includes('Base')) {
+    return ['Base', 'Ultimate'];
+  } else if (plans.includes('Ultimate')) {
+    return ['Ultimate'];
+  }
+  return plans;
+};
+
+const availablePlans = getAvailablePlans(pricingTags);
+---
+
+<Default />
+
+{isAwsServicePage && availablePlans.length > 0 && (
+  <div class="pricing-badges">
+    {availablePlans.map(plan => (
+      <span class={`pricing-badge pricing-badge-${plan.toLowerCase()}`}>
+        {plan}
+      </span>
+    ))}
+  </div>
+)}
+
+<style>
+  .pricing-badges {
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .pricing-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .pricing-badge-free {
+    background-color: #dcfce7;
+    color: #166534;
+    border: 1px solid #bbf7d0;
+  }
+
+  .pricing-badge-base {
+    background-color: #dbeafe;
+    color: #1e40af;
+    border: 1px solid #93c5fd;
+  }
+
+  .pricing-badge-ultimate {
+    background-color: #fef3c7;
+    color: #92400e;
+    border: 1px solid #fcd34d;
+  }
+</style> 

src/content.config.ts

@@ -12,6 +12,7 @@ export const collections = {
 				deployment: z.array(z.string()).optional(),
 				pro: z.boolean().optional(),
 				leadimage: z.string().optional(),
+				tags: z.array(z.string()).optional(),
 			}),
 		}),
 	}),