feat: add IFRC Go UI storybook introduction

packages/go-ui-storybook/src/stories/Introduction.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+import pkg from '@togglecorp/fujs/package.json';
+
+<Meta title="Introduction" />
+
+<h1 className="title">
+  IFRC Go UI
+</h1>
+
+<img src="/go-logo.svg" alt="IFRC Go logo" className="ifrc-logo" />
+
+<h3 className="overview">
+  Overview
+</h3>
+<div className="text-body">
+The IFRC Go UI library is a React-based component library developed by the International Federation of Red Cross and Red Crescent Societies (IFRC). This open-source library is designed for ease of use and customization, making it an invaluable resource for anyone in the IFRC network to create consistent and user-friendly web applications. Each component is designed to be consistent, customizable and performant.
+
+The design system aims to streamline the design and development process, providing guidance for both design and development tasks.
+</div>
+
+<br />
+<br />
+
+##  Links
+[Github repository](https://github.com/IFRCGo/go-web-app/tree/develop/packages/ui)
+
+[@ifrc-go/ui npm package](https://www.npmjs.com/package/@ifrc-go/ui)
+
+---
+Reach out to the Go team on [Github](https://github.com/IFRCGo/)

packages/go-ui-storybook/src/stories/index.css

@@ -39,3 +39,26 @@
         box-shadow: var(--go-ui-box-shadow-md);
     }
 }
+
+.title > p {
+    font-size: var(--go-ui-font-size-4xl);
+    padding-bottom: var(--go-ui-spacing-2xl);
+    color: var(--go-ui-color-primary-red);
+}
+
+.ifrc-logo {
+    display: block;
+    margin: auto;
+    width: 50%;
+    padding-bottom: var(--go-ui-spacing-2xl);
+}
+
+.overview > p {
+    padding-top: var(--go-ui-spacing-md);
+    padding-bottom: var(--go-ui-spacing-md);
+    font-size: var(--go-ui-font-size-3xl);
+}
+
+.text-body > p {
+    font-size: var(--go-ui-font-size-lg);
+}