jb/docs/getting started revamp (#24550)

## Summary & Motivation
Adding some light polish to the getting started page



https://github.com/user-attachments/assets/20de003a-59e5-4478-8577-f43cd933998f


## How I Tested These Changes

## Changelog
NOCHANGELOG

- [ ] `NEW` _(added new feature or capability)_
- [ ] `BUGFIX` _(fixed a bug)_
- [x] `DOCS` _(added or updated documentation)_

docs/docs-beta/docs/intro.md

@@ -6,37 +6,46 @@ displayed_sidebar: 'docs'
 ---
 
 import { Card, CardGroup } from '@site/src/components/Cards';
+import ThemedImage from '@theme/ThemedImage';
 
 # Welcome to Dagster
 
 Dagster is a data orchestrator built for data engineers, with integrated lineage, observability, a declarative programming model and best-in-class testability.
 
 <CodeExample filePath="getting-started/hello-world.py" language="python" />
+<ThemedImage
+  alt="Docusaurus themed image"
+  style={{width:'100%', height: 'auto'}}
+  sources={{
+    light: './img/getting-started/lineage-light.jpg',
+    dark: './img/getting-started/lineage-dark.jpg',
+  }}
+/>
 
 ## Get started
 
 <CardGroup cols={3}>
-  <Card title="Quickstart" href="/getting-started/quickstart">
+  <Card title="Quickstart" href="/getting-started/quickstart" imagePath="./img/getting-started/icon-start.svg">
       Build your first Dagster pipeline in our Quickstart tutorial.
   </Card>
-  <Card title="Thinking in Assets"  href="/concepts/assets/thinking-in-assets">
+  <Card title="Thinking in Assets"  href="/concepts/assets/thinking-in-assets" imagePath="./img/getting-started/icon-assets.svg">
     New to Dagster? Learn about how thinking in assets can help you manage your data better.
   </Card>
-  <Card title="Dagster Plus" href="/dagster-plus/whats-dagster-plus">
+  <Card title="Dagster Plus" href="/dagster-plus/whats-dagster-plus" imagePath="./img/getting-started/icon-plus.svg">
     Learn about Dagster Plus, our managed offering that includes a hosted Dagster instance and many more features.
   </Card>
 </CardGroup>
 
 ## Join the Dagster community
 
 <CardGroup cols={3}>
-  <Card title="Slack" href="https://dagster.io/slack">
+  <Card title="Slack" href="https://dagster.io/slack" imagePath="./img/getting-started/icon-slack.svg">
     Join our Slack community to talk with other Dagster users, use our AI-powered chatbot, and get help with Dagster.
   </Card>
-  <Card title="GitHub" href="https://github.com/dagster-io/dagster">
+  <Card title="GitHub" href="https://github.com/dagster-io/dagster" imagePath="./img/getting-started/icon-github.svg">
     Star our GitHub repository and follow our development through GitHub Discussions.
   </Card>
-  <Card title="Youtube" href="https://www.youtube.com/@dagsterio">
+  <Card title="Youtube" href="https://www.youtube.com/@dagsterio" imagePath="./img/getting-started/icon-youtube.svg">
     Watch our latest videos on YouTube.
   </Card>
 </CardGroup>

docs/docs-beta/src/components/Cards.tsx

@@ -3,15 +3,27 @@ import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
 interface CardProps {
   title: string;
-  icon: string;
+  imagePath?: string;
   href: string;
   children: React.ReactNode;
 }
 
-const Card: React.FC<CardProps> = ({title, icon, href, children}) => (
+const Card: React.FC<CardProps> = ({title, imagePath, href, children}) => (
   <Link to={href} className="card">
+    {imagePath && (
+      <img
+        style={{
+          marginBottom: '6px',
+          background: 'var(--theme-color-background-default)',
+          transition: 'background 0.5s',
+        }}
+        src={`${imagePath}`}
+        alt={title}
+        width="56"
+        height="56"
+      />
+    )}
     <Heading as="h3">{title}</Heading>
-    <i className={`icon-${icon}`}></i>
     <p>{children}</p>
   </Link>
 );

docs/docs-beta/src/styles/custom.scss

@@ -266,15 +266,13 @@ a.pyobject {
     display: inline-block;
     height: 1.25rem;
     width: 1.25rem;
-    transform: rotate(90deg);
     transition: transform var(--ifm-transition-fast) linear;
   }
 }
 
 .menu__list-item-collapsible {
   .menu__caret:before {
     background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem;
-    transform: rotate(0);
   }
 
   &[aria-expanded='true'] {
@@ -555,24 +553,30 @@ dd code {
   gap: 1rem;
   margin-bottom: 2rem;
 
-  &.cols-2 { grid-template-columns: repeat(2, 1fr); }
-  &.cols-3 { grid-template-columns: repeat(3, 1fr); }
-  &.cols-4 { grid-template-columns: repeat(4, 1fr); }
+  &.cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  &.cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  &.cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
 
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
   }
 }
 
 .card {
-  display: block; 
+  display: block;
   background-color: var(--theme-color-background-light);
   border: 1px solid var(--theme-color-keyline);
   border-radius: 8px;
   padding: 1.5rem;
   transition: all 0.3s ease;
-  text-decoration: none; 
-  color: inherit; 
+  text-decoration: none;
+  color: inherit;
 
   &:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -613,7 +617,6 @@ dd code {
   }
 }
 
-
 /**
  * api docs: inline flag
  *
@@ -634,7 +637,6 @@ span {
   &.flag-info {
     background-color: var(--theme-color-background-cyan);
     color: var(--theme-color-text-cyan);
-
   }
 
   &.flag-danger {
@@ -646,11 +648,10 @@ span {
     background-color: var(--theme-color-background-yellow);
     color: var(--theme-color-text-yellow);
   }
-
 }
 
 /* Ability to hide sidebar items (e.g. index.md) */
 /* https://docusaurus.canny.io/feature-requests/p/hiding-parts-of-docs-in-autogenerated-sidebar */
 .hidden {
-    display: none !important;
+  display: none !important;
 }