docs: Add Storybook documentation landing page

.storybook/YourTheme.ts

@@ -0,0 +1,41 @@
+// .storybook/YourTheme.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://www.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,8 @@
+// .storybook/manager.ts
+
+import { addons } from '@storybook/manager-api';
+import yourTheme from './YourTheme';
+
+addons.setConfig({
+    theme: yourTheme
+});

.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: [
@@ -65,7 +69,7 @@ export const preview: Preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
-                order: ['Get Started', 'Essentials', 'Components', 'Form Elements']
+                order: ['Welcome', 'Essentials', 'Components', 'Form Elements']
             }
         }
     }