Stately 2.0 landing page (#266)

* init

* WIP

* WIP

* WIP

* Move to components dir

* WIP

* some ts fixes

* fix headlessui import

* fix preview build

* fix ssr

* Fix pricing page and add crisp chat bot

* make logo link relative

* add head data

* test removing full url

* revert

* remove old landing page css

* Minor improvements

* Improve accessibility on landing page (#260)

* Add alt text and alt text placeholders for accessibility

* Make HRs into LIs with aria-role=none to hide from assistive tech

* Make nested lists into nested ULs and LIs

* Make example box list more semantic to improve accessibility

* Use semantic heading levels and finish alt text for accessibility

* Add first pass images to landing page (#262)

* Replace example image with new UI and room readings machine

* Add initial pass at event schema image

* Add initial pass image for generate flow

* More image updates

* Add design and simulate image

* Improve crop on image

* More rounded img corners to match browser style and auto height imgs

* Auto height on all content images

* Add VSCode image

* fix ssr

* Fix pricing page and add crisp chat bot

* make logo link relative

* add head data

* test removing full url

* revert

* Finish adding first pass images

* Add initial height and width to images to improve browser perf

* remove old landing page css

* add rounding

---------

Co-authored-by: Anders Bech Mellson <[email protected]>

---------

Co-authored-by: Anders Bech Mellson <[email protected]>

* Add new open graph image to fit landing page design

* Update meta description to match new subtitle

* Images WIP

* Update some Sky wording

* New images and asset section

* fixes and additions

* image changes

* Fix docusaurus plugins

* Last fixes

---------

Co-authored-by: Anders Bech Mellson <[email protected]>
Co-authored-by: Nick <[email protected]>
Co-authored-by: Laura Kalbag <[email protected]>

Author: 4 people

docusaurus.config.js

@@ -11,8 +11,8 @@ const config = {
   url: 'https://stately.ai',
   baseUrl: '/',
   baseUrlIssueBanner: false,
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'throw',
+  onBrokenLinks: 'warn',
+  onBrokenMarkdownLinks: 'warn',
   favicon: 'icon.svg',
   staticDirectories: ['static'],
 
@@ -138,6 +138,17 @@ const config = {
         },
       },
     ],
+    async function tailwindPlugin(context, options) {
+      return {
+        name: 'docusaurus-tailwindcss',
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require('tailwindcss'));
+          postcssOptions.plugins.push(require('autoprefixer'));
+          return postcssOptions;
+        },
+      };
+    },
   ],
 
   themeConfig:

package.json

@@ -6,6 +6,7 @@
     "docusaurus": "docusaurus",
     "remark:once": "yarn remark --quiet --frail docs/**/* versioned_docs/**/*",
     "remark:watch": "yarn remark --quiet --frail --watch docs/**/* versioned_docs/**/*",
+    "dev": "docusaurus start",
     "start": "concurrently \"yarn remark:watch\" \"yarn typecheck:watch\" \"docusaurus start\"",
     "check-links": "yarn remark:once && yarn typecheck",
     "build": "docusaurus build",
@@ -32,18 +33,23 @@
     "@docusaurus/plugin-client-redirects": "^2.4.3",
     "@docusaurus/preset-classic": "^2.4.3",
     "@docusaurus/remark-plugin-npm2yarn": "^2.4.3",
+    "@headlessui/react": "^1.7.17",
     "@mdx-js/react": "^1.6.22",
     "@microsoft/api-extractor": "^7.35.1",
     "@xstate/inspect": "^0.8.0",
     "@xstate/machine-extractor": "^0.9.2",
     "@xstate/react": "^3.2.2",
+    "autoprefixer": "^10.4.16",
     "clsx": "^1.2.1",
     "docusaurus-plugin-api-extractor": "^2.0.4",
-    "lucide-react": "^0.129.0",
+    "headlessui": "^0.0.0",
+    "lucide-react": "^0.284.0",
     "mdx-embed": "^1.1.2",
+    "postcss": "^8.4.31",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwindcss": "^3.3.3",
     "typecheck": "^0.1.2",
     "xstate": "^4.37.2"
   },

src/components/HomepageFeatures/index.tsx

@@ -48,7 +48,7 @@ function Feature({title, Svg, description}: FeatureItem) {
         <Svg className={styles.featureSvg} role="img" />
       </div>
       <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
+        <h2>{title}</h2>
         <p>{description}</p>
       </div>
     </div>