From c57bbf6b9114a833df642cb2196720b36d671297 Mon Sep 17 00:00:00 2001
From: samshara <sameerai2736@gmail.com>
Date: Fri, 7 Jun 2024 10:38:56 +0545
Subject: [PATCH] feat: add IFRC Go UI storybook introduction

---
 .../src/stories/Introduction.mdx              | 30 +++++++++++++++++++
 .../go-ui-storybook/src/stories/index.css     | 23 ++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 packages/go-ui-storybook/src/stories/Introduction.mdx

diff --git a/packages/go-ui-storybook/src/stories/Introduction.mdx b/packages/go-ui-storybook/src/stories/Introduction.mdx
new file mode 100644
index 0000000000..1e878fabe6
--- /dev/null
+++ b/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/)
diff --git a/packages/go-ui-storybook/src/stories/index.css b/packages/go-ui-storybook/src/stories/index.css
index 95dbf920ac..505b767fd2 100644
--- a/packages/go-ui-storybook/src/stories/index.css
+++ b/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);
+}