add proper design

Author: HarshCasper

src/components/OverviewCards.tsx

@@ -31,4 +31,67 @@ export const OverviewCards: React.FC<OverviewCardsProps> = ({ cards }) => {
       ))}
     </div>
   );
+};
+
+interface HeroCardProps {
+  title: string;
+  href?: string;
+}
+
+const HeroCard: React.FC<HeroCardProps> = ({ title, href = "" }) => {
+  const cardStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '200px',
+    padding: '2rem',
+    borderRadius: '0.75rem',
+    background: ' #654fec',
+    color: 'white',
+    textDecoration: 'none',
+    fontSize: '1.5rem',
+    fontWeight: '600',
+    textAlign: 'center' as const,
+    transition: 'transform 0.2s ease',
+    cursor: href ? 'pointer' : 'default'
+  };
+
+  const hoverStyle = {
+    ':hover': {
+      transform: href ? 'scale(1.02)' : 'none'
+    }
+  };
+
+  if (href) {
+    return (
+      <a href={href} style={cardStyle}>
+        {title}
+      </a>
+    );
+  }
+
+  return (
+    <div style={cardStyle}>
+      {title}
+    </div>
+  );
+};
+
+interface HeroCardsProps {
+  cards: HeroCardProps[];
+}
+
+export const HeroCards: React.FC<HeroCardsProps> = ({ cards }) => {
+  return (
+    <div style={{ 
+      display: 'grid', 
+      gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
+      gap: '2rem', 
+      marginBottom: '3rem' 
+    }}>
+      {cards.map((card, index) => (
+        <HeroCard key={index} {...card} />
+      ))}
+    </div>
+  );
 }; 

src/content/docs/aws/index.mdx

@@ -7,7 +7,23 @@ sidebar:
     order: 1
 ---
 
-import { OverviewCards } from '../../../components/OverviewCards';
+import { OverviewCards, HeroCards } from '../../../components/OverviewCards';
+
+<HeroCards 
+  cards={[
+    {
+      title: "Emulate AWS Services",
+      href: "/aws/services"
+    },
+    {
+      title: "Test Your AWS Apps", 
+      href: "/aws/capabilities"
+    }
+  ]}
+  client:load
+/>
+
+## What would you like to do today?
 
 <OverviewCards 
   cards={[