docs: Create Welcome Page on Storybook

.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
   stories: [
+    '../stories/*.mdx',
     '../stories/**/*.mdx',
     '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
@@ -12,6 +13,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/manager-api',
   ],
   framework: {
     name: '@storybook/nextjs',

.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+  sidebar: {
+    showRoots: true,
+    collapsedRoots: ['about', 'technical-planning-documents'],
+  },
+});

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react';
 import '../app/globals.css';
+import '../stories/styles.css';
 
 const preview: Preview = {
   parameters: {
@@ -9,13 +10,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#09090B' },
-        { name: 'light', value: '#fff' },
-      ],
-    },
+    layout: 'centered',
   },
 };
 

package.json

@@ -26,14 +26,15 @@
     "clsx": "^2.1.0",
     "geist": "^1.2.2",
     "immer": "^10.1.1",
-    "lucide-react": "^0.312.0",
+    "lucide-react": "^0.447.0",
     "next": "^14.1.1",
     "node-appwrite": "^13.0.0",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.51.3",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.3.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",