docs: design update

Author: dosco

package-lock.json

@@ -1,37 +1,41 @@
 import starlight from '@astrojs/starlight';
 import { defineConfig } from 'astro/config';
 
+import tailwind from "@astrojs/tailwind";
+
 // https://astro.build/config
 export default defineConfig({
-    base: '/ax/',
-	integrations: [
-		starlight({
-            customCss: ["./src/styles/custom.css", "@fontsource/roboto"],
-
-			title: 'Ax',
-			social: {
-				github: 'https://github.com/ax-llm/ax',
-                twitter: 'https://twitter.com/dosco',
-                discord: 'https://discord.gg/DSHg3dU7dW',
-			},
-			sidebar: [
-                {
-					label: 'Start Here',
-					items: [
-						{ label: 'Quick Start', link: '/start/quick/' },
-                        { label: 'Supported LLMs', link: '/start/llms' },
-                        { label: 'About Ax', link: '/start/about' },
-					],
-				},
-                { 
-                    label: 'Guides',
-                    autogenerate: { directory: 'guides' },
-				},
-             	{ 
-                    label: 'API Docs',
-                    autogenerate: { directory: 'apidocs' },
-				},
-			],
-		}),
-	],
-});
+  base: '/ax/',
+  integrations: [starlight({
+    customCss: ["./src/styles/custom.css", "@fontsource/roboto"],
+    title: 'Ax',
+    social: {
+      github: 'https://github.com/ax-llm/ax',
+      twitter: 'https://twitter.com/dosco',
+      discord: 'https://discord.gg/DSHg3dU7dW'
+    },
+    sidebar: [{
+      label: 'Start Here',
+      items: [{
+        label: 'Quick Start',
+        link: '/start/quick/'
+      }, {
+        label: 'Supported LLMs',
+        link: '/start/llms'
+      }, {
+        label: 'About Ax',
+        link: '/start/about'
+      }]
+    }, {
+      label: 'Guides',
+      autogenerate: {
+        directory: 'guides'
+      }
+    }, {
+      label: 'API Docs',
+      autogenerate: {
+        directory: 'apidocs'
+      }
+    }]
+  }), tailwind()]
+});

src/docs/astro.config.mjs

@@ -11,9 +11,11 @@
   "dependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/starlight": "^0.24.5",
+    "@astrojs/tailwind": "^5.1.0",
     "@fontsource/roboto": "^5.0.13",
     "astro": "^4.10.2",
-    "sharp": "^0.32.5"
+    "sharp": "^0.32.5",
+    "tailwindcss": "^3.4.4"
   },
   "private": "true"
 }

src/docs/package.json

@@ -15,3 +15,4 @@ hero:
       link: https://github.com/ax-llm/ax
       icon: external
 ---
+

src/docs/public/mattress.png

@@ -0,0 +1,26 @@
+---
+// import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { Icon } from '@astrojs/starlight/components';
+
+---
+
+<div class="bg-black h-screen bg-[url('mattress2.png')] bg-cover">
+    <div class="space-y-5 relative top-[200px] w-full lg:w-7/12 p-0 lg:p-4">
+        <div class="border-t border-b p-4 font-bold text-white text-9xl lg:text-8xl">
+            Ax, An AI framework for those building the future
+        </div>
+        <div class="flex flex-col lg:flex-row items-start lg:items-center gap-6 font-mono text-8xl lg:text-2xl p-4">
+            <a href="start/quick/" class="flex items-center justify-between gap-3 py-3 px-4 rounded-full bg-amber-500 hover:bg-amber-400 text-white">
+                Quick Start <Icon name="right-caret"/>
+            </a>
+            <a href="https://github.com/ax-llm/ax" class="flex items-center justify-between gap-3 py-3 px-4 rounded-full border bg-white/80 hover:bg-white text-black">
+                <div class="flex items-center gap-2"><Icon name="github" />Code</div>
+                <Icon name="right-caret"/>
+            </a>
+            <!-- <a href="https://github.com/ax-llm/ax" class="gap-2 text-4xl py-2 px-4 rounded-full bg-white text-white w-[300px]">
+                <Icon name="github" size="3rem" />
+            </a> -->
+        </div>
+    </div>
+    
+</div>

src/docs/public/mattress1.png

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}