implement the welcome page (#22)

* get the base done

* add proper design

Author: HarshCasper

src/components/OverviewCards.tsx

@@ -0,0 +1,97 @@
+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>
+  );
+};
+
+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.md

@@ -0,0 +1,68 @@
+---
+title: Welcome to LocalStack Docs
+description: Get started with LocalStack Docs.
+template: doc
+sidebar:
+    label: Welcome
+    order: 1
+---
+
+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={[
+    {
+      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
+/>