feat(index): added Discord card

astro.config.mjs

@@ -114,7 +114,7 @@ export default defineConfig({
       components: {
         Footer: './src/components/AdatomicFooter.astro',
       },
-      customCss: ['./src/tailwind.css'],
+      customCss: ['./src/tailwind.css', './src/custom.css'],
       defaultLocale: 'root',
       locales: {
         root: {

src/content/docs/index.mdx

@@ -16,18 +16,26 @@ hero:
       icon: github
 ---
 
-import { Card, CardGrid } from '@astrojs/starlight/components';
+import { Card, CardGrid } from '@astrojs/starlight/components'
 
 ## Next steps
 
 <CardGrid stagger>
-	<Card title="Install grlx with our Getting Started" icon="laptop">
+  <Card title="Install grlx with our Getting Started" icon="laptop">
-		Check out our [Getting Started](/getting-started) started page on how to install `grlx`
+    Check out our [Getting Started](/getting-started) started page on how to
-	</Card>
+    install grlx
-	<Card title="Learn about ingredient components" icon="setting">
+  </Card>
-		Check out our [ingredients](/ingredients/overview) to learn more about how to configure your fleet
+  <Card title="Learn about ingredient components" icon="setting">
-	</Card>
+    Check out our [ingredients](/ingredients/overview) to learn more about how
-	<Card title="Read the docs" icon="open-book">
+    to configure your fleet
-		Learn more in [the grlx Docs](/getting-started)
+  </Card>
-	</Card>
+  <Card title="Read the docs" icon="open-book" class="open-book">
+    Learn more in [the grlx Docs](/getting-started)
+  </Card>
+  <div class="discord-bg">
+    <Card title="Join our Discord" icon="discord" class="discord">
+      Join our [Discord](https://discord.gg/RNsZ3KWjXm) for learning more about
+      grlx
+    </Card>
+  </div>
 </CardGrid>

src/custom.css

@@ -0,0 +1,5 @@
+.discord-bg .card .icon{
+  background-color: #7289da;
+  --sl-card-border: #454FBF !important;
+}
+