From 6bdd2630e9e207b35db2845fad48befb9f530b61 Mon Sep 17 00:00:00 2001
From: Harsh Mishra <erbeusgriffincasper@gmail.com>
Date: Fri, 20 Jun 2025 20:54:24 +0530
Subject: [PATCH 1/2] get the base done

---
 src/components/OverviewCards.tsx | 34 +++++++++++++++++++++
 src/content/docs/aws/index.md    | 42 --------------------------
 src/content/docs/aws/index.mdx   | 52 ++++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 42 deletions(-)
 create mode 100644 src/components/OverviewCards.tsx
 delete mode 100644 src/content/docs/aws/index.md
 create mode 100644 src/content/docs/aws/index.mdx

diff --git a/src/components/OverviewCards.tsx b/src/components/OverviewCards.tsx
new file mode 100644
index 00000000..3cf35805
--- /dev/null
+++ b/src/components/OverviewCards.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface OverviewCardProps {
+  title: string;
+  description: string | React.ReactNode;
+  href: string;
+  icon: string;
+}
+
+const OverviewCard: React.FC<OverviewCardProps> = ({ title, description, href, icon }) => {
+  return (
+    <a href={href} className="service-box" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+      <img src={icon} alt={`${title} icon`} width={40} height={40} style={{ marginBottom: '1rem' }} />
+      <div className="service-box-content">
+        <div className="service-box-title">{title}</div>
+        <div className="service-box-description">{description}</div>
+      </div>
+    </a>
+  );
+};
+
+interface OverviewCardsProps {
+  cards: OverviewCardProps[];
+}
+
+export const OverviewCards: React.FC<OverviewCardsProps> = ({ cards }) => {
+  return (
+    <div className="service-grid">
+      {cards.map((card, index) => (
+        <OverviewCard key={index} {...card} />
+      ))}
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/content/docs/aws/index.md b/src/content/docs/aws/index.md
deleted file mode 100644
index cd0dd1cd..00000000
--- a/src/content/docs/aws/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Welcome to LocalStack Docs
-description: Get started with LocalStack Docs.
-template: doc
-sidebar:
-    label: Welcome
-    order: 1
----
-
-## What do you want to do today?
-
-## Build & Test Your AWS App Locally
-Simulate AWS services and run your stack offline.
-
-## Speed Up Your AWS Dev Experience
-Boost productivity with tools, CI integrations, and more.
-
-### Getting Started
-
-[Install and run LocalStack]( ) on your machine, and discover the benefits of local cloud development.
-
-### AWS Services
-
-[Browse AWS Services]() that LocalStack emulates.
-
-### LocalStack Capabilities
-
-[Understand how LocalStack works]() and how you can tweak it for your use case.
-
-### Integrations
-
-[Pick your favorite cloud development framework]() with LocalStack: CDK, Terraform, Serverless, and more!
-
-### LocalStack Tools
-
-[Learn how LocalStack Cloud Developer Tools]() boost your efficiency.
-
-### LocalStack in CI
-
-[Use LocalStack]() in your Continuous Integration pipelines.
-
-
diff --git a/src/content/docs/aws/index.mdx b/src/content/docs/aws/index.mdx
new file mode 100644
index 00000000..9a26b529
--- /dev/null
+++ b/src/content/docs/aws/index.mdx
@@ -0,0 +1,52 @@
+---
+title: Welcome to LocalStack Docs
+description: Get started with LocalStack Docs.
+template: doc
+sidebar:
+    label: Welcome
+    order: 1
+---
+
+import { OverviewCards } from '../../../components/OverviewCards';
+
+<OverviewCards 
+  cards={[
+    {
+      title: "Getting Started",
+      description: "Install and run LocalStack on your machine, and discover the benefits of local cloud development.",
+      href: "/aws/getting-started",
+      icon: "/images/aws/rocket.svg"
+    },
+    {
+      title: "Local AWS Services", 
+      description: "Browse through the AWS Services that LocalStack supports & emulates in your development environment.",
+      href: "/aws/services",
+      icon: "/images/aws/integrations.svg"
+    },
+    {
+      title: "Capabilities",
+      description: "Learn about the LocalStack's capabilities and using them to accelerate your development workflow.",
+      href: "/aws/capabilities",
+      icon: "/images/aws/ci.svg"
+    },
+    {
+      title: "Tooling",
+      description: "Learn how LocalStack's Cloud Developer Tools can boost your development & testing efficiency.",
+      href: "/aws/tooling",
+      icon: "/images/aws/aws.svg"
+    },
+    {
+      title: "Integrations",
+      description: "Learn how to use LocalStack with your favorite cloud development tools, libraries & frameworks.",
+      href: "/aws/integrations",
+      icon: "/images/aws/tools.svg"
+    },
+    {
+      title: "Enterprise",
+      description: "Learn how LocalStack Enterprise provides additional security, flexibility, compliance & support.",
+      href: "/aws/enterprise",
+      icon: "/images/aws/understanding.svg"
+    }
+  ]}
+  client:load
+/>

From 24d829d0c982af7d74a3abea56aefc2ef707e4fb Mon Sep 17 00:00:00 2001
From: Harsh Mishra <erbeusgriffincasper@gmail.com>
Date: Fri, 20 Jun 2025 21:16:37 +0530
Subject: [PATCH 2/2] add proper design

---
 src/components/OverviewCards.tsx | 63 ++++++++++++++++++++++++++++++++
 src/content/docs/aws/index.mdx   | 18 ++++++++-
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/src/components/OverviewCards.tsx b/src/components/OverviewCards.tsx
index 3cf35805..57e441df 100644
--- a/src/components/OverviewCards.tsx
+++ b/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>
+  );
 }; 
\ No newline at end of file
diff --git a/src/content/docs/aws/index.mdx b/src/content/docs/aws/index.mdx
index 9a26b529..ba8c30bb 100644
--- a/src/content/docs/aws/index.mdx
+++ b/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={[