docs: add Storybook documentation landing page (#334)

* feat(landing): add landing page for Storybook

* docs(landing): finish the landing page integration

* docs(theme): theme storybook with our branding

* refactor(landingpage): mr review modifs part 1

* refactor(landing): wrap landing page mdx in unstyled component

---------

Co-authored-by: Ján Hamara <[email protected]>

Author: 2 people

.storybook/FreenowTheme.ts

@@ -0,0 +1,41 @@
+// .storybook/FreenowTheme.ts
+import { create } from '@storybook/theming/create';
+import logo from '../public/assets/freenow-logo.svg';
+
+export default create({
+    base: 'light',
+
+    // Typography
+    fontBase: '"YOURNOWSans-Medium", "Open Sans", sans-serif',
+    fontCode: 'monospace',
+
+    brandTitle: 'FREENOW',
+    brandUrl: 'https://wave.free-now.com/',
+    brandImage: logo,
+    brandTarget: '_self',
+
+    //
+    colorPrimary: '#CA0928',
+    colorSecondary: '#585C6D',
+
+    // UI
+    appBg: '#ffffff',
+    appContentBg: '#ffffff',
+    appBorderColor: '#585C6D',
+    appBorderRadius: 4,
+
+    // Text colors
+    textColor: '#10162F',
+    textInverseColor: '#ffffff',
+
+    // Toolbar default and active colors
+    barTextColor: '#9E9E9E',
+    barSelectedColor: '#585C6D',
+    barBg: '#ffffff',
+
+    // Form colors
+    inputBg: '#ffffff',
+    inputBorder: '#10162F',
+    inputTextColor: '#10162F',
+    inputBorderRadius: 2
+});

.storybook/manager.ts

@@ -0,0 +1,7 @@
+// .storybook/manager.ts
+import { addons } from '@storybook/manager-api';
+import FreenowTheme from './FreenowTheme';
+
+addons.setConfig({
+    theme: FreenowTheme
+});

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
 
 export const preview: Preview = {
     parameters: {
@@ -11,6 +12,9 @@ export const preview: Preview = {
                 date: /Date$/
             }
         },
+        docs: {
+            theme: themes.light
+        },
         backgrounds: {
             default: 'light',
             values: [
@@ -64,8 +68,7 @@ export const preview: Preview = {
         },
         options: {
             storySort: {
-                method: 'alphabetical',
-                order: ['Get Started', 'Essentials', 'Components', 'Form Elements']
+                order: ['Welcome', 'Essentials', 'Components', 'Form Elements']
             }
         }
     }