docs: Improve docs landing page

docs/docusaurus.config.js

@@ -7,7 +7,6 @@ const darkCodeTheme = require('prism-react-renderer/themes/nightOwl');
 /** @type {import('@docusaurus/types').Config} */
 const config = {
     title: 'Vendure Docs',
-    tagline: 'For preview only. Actual docs at https://docs.vendure.io',
     favicon: 'img/logo.webp',
 
     // Set the production url of your site here
@@ -88,6 +87,11 @@ const config = {
                         position: 'left',
                         label: 'Reference',
                     },
+                    {
+                        href: 'https://vendure.io',
+                        label: 'vendure.io',
+                        position: 'right',
+                    },
                     {
                         href: 'https://github.com/vendure-ecommerce/vendure',
                         label: 'GitHub',
@@ -102,6 +106,19 @@ const config = {
             },
             footer: {
                 links: [
+                    {
+                        title: 'Resources',
+                        items: [
+                            {
+                                label: 'vendure.io',
+                                href: 'https://www.vendure.io',
+                            },
+                            {
+                                label: 'GitHub',
+                                href: 'https://github.com/vendure-ecommerce/vendure',
+                            },
+                        ],
+                    },
                     {
                         title: 'Community',
                         items: [
@@ -113,6 +130,10 @@ const config = {
                                 label: 'Twitter',
                                 href: 'https://twitter.com/vendure_io',
                             },
+                            {
+                                label: 'YouTube',
+                                href: 'https://www.youtube.com/@vendure_io',
+                            },
                         ],
                     },
                 ],

docs/src/components/Playground/index.tsx

@@ -4,6 +4,7 @@ export default function Playground(props: {
     document: string;
     api: 'shop' | 'admin';
     server: 'readonlydemo' | 'demo';
+    minHeight?: string;
 }) {
     const urlEncoded = encodeURIComponent(props.document.trim());
     return (
@@ -11,7 +12,7 @@ export default function Playground(props: {
             loading="lazy"
             style={{
                 width: '100%',
-                minHeight: '500px',
+                minHeight: props.minHeight ?? '500px',
                 borderRadius: '8px',
             }}
             src={`https://${props.server ?? 'readonlydemo'}.vendure.io/${props.api}-api?query=${urlEncoded}`}

docs/src/css/overrides.css

@@ -33,13 +33,14 @@ body {
     background-color: var(--ifm-background-color);
 }
 
+.navbar {
+    backdrop-filter: blur(20px);
+}
+
 @media screen and (min-width: 996px) {
     .docs-wrapper article:not(.col) {
         margin-left: 32px;
     }
-    .navbar {
-        backdrop-filter: blur(20px);
-    }
 }
 
 

docs/src/pages/index.module.css

@@ -4,20 +4,41 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+    padding: 4rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.tagline {
+    font-size: 2rem;
+    text-align: center;
+}
+
+.description {
+    margin: 1rem 0;
+    font-size: 1.3rem;
+    max-width: 600px;
+    text-align: center;
+    opacity: 0.8;
 }
 
 @media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+    .heroBanner {
+        padding: 2rem;
+    }
+    .ctaButtons {
+        flex-direction: column;
+        gap: 24px;
+    }
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.ctaButtons {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    max-width: 800px;
+    margin: auto;
+    padding-bottom: 4rem;
 }
+