docs: update introduction

stories/0.Introduction.mdx

@@ -6,9 +6,9 @@ import { Translation } from "react-i18next";
 
 <div className="flex gap-lg">
   <div>
-    <img src="poster.png" height={72} />
+    <img src="poster.png" className="h-16" />
     <Subtitle>
-    <div style={{marginInlineStart:"5rem"}}>
+    <div style={{marginInlineStart:"5.25rem"}}>
       <Translation>
         {(t, { i18n }) => t("appDescription", "Default text")}
       </Translation>
@@ -20,6 +20,36 @@ import { Translation } from "react-i18next";
 
 <hr />
 
+[![Stars](https://img.shields.io/github/stars/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Stars")](https://github.com/adarshpastakia/react-fabric/stargazers)
+[![Forks](https://img.shields.io/github/forks/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Forks")](https://github.com/adarshpastakia/react-fabric/network/members)
+[![Issues](https://img.shields.io/github/issues/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Issues")](https://github.com/adarshpastakia/react-fabric/issues)
+[![Discussions](https://img.shields.io/github/discussions/adarshpastakia/react-fabric?style=social&logo=github&logoColor=blue "GitHub Discussions")](https://github.com/adarshpastakia/react-fabric/discussions)
+
+![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square&labelColor=333&logo=none)
+![node](https://img.shields.io/github/package-json/minNode/adarshpastakia/react-fabric?logo=node.js&logoColor=white&label=node&color=5FA04E)
+![Build](https://img.shields.io/github/actions/workflow/status/adarshpastakia/react-fabric/build.yml?style=flat-square&logo=github&labelColor=333&label=build)
+![npm](https://img.shields.io/npm/v/%40react-fabric%2Fcore?style=flat-square&logo=npm&labelColor=333&label=release&color=CB3837)
+
+![Deps](https://img.shields.io/librariesio/github/adarshpastakia/react-fabric?style=flat-square&logo=libraries.io&logoColor=fff&labelColor=333&label=dependencies)
+![Maintain](https://img.shields.io/codeclimate/maintainability/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=maintainability)
+![Coverage](https://img.shields.io/codeclimate/coverage/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=coverage)
+![Issues](https://img.shields.io/codeclimate/issues/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=issues)
+
+[![lerna](https://img.shields.io/badge/lerna-677ef8.svg?style=flat-square&labelColor=333&logo=lerna)](https://lerna.js.org/)
+[![yarn](https://img.shields.io/badge/yarn-2C8EBB.svg?style=flat-square&labelColor=333&logo=yarn)](https://yarnpkg.com/)
+[![react](https://img.shields.io/badge/react-61DAFB.svg?style=flat-square&labelColor=333&logo=react)](http://reactjs.org/)
+[![ts](https://img.shields.io/badge/typescript-3178C6.svg?style=flat-square&labelColor=333&logo=typescript)](https://typescriptlang.org/)
+[![emotion](https://img.shields.io/badge/tailwindcss-06B6D4.svg?style=flat-square&labelColor=333&logo=tailwindcss)](https://tailwindcss.com/)
+[![prettier](https://img.shields.io/badge/prettier-EA4C89.svg?style=flat-square&labelColor=333&logo=prettier)](https://prettier.io/)
+[![codeclimate](https://img.shields.io/badge/code%20climate-272425.svg?style=flat-square&labelColor=333&logo=code%20climate)](http://codeclimate.com/)
+
+<div className="inline-flex gap-2 flex-nowrap items-center rounded py-1 px-2 outline">
+  <img src="chrome.png" className="h-8" />
+  <span className="text-lg">≥ 121</span>
+</div>
+
+<hr />
+
 Built using Tailwind and pure CSS, using CSS variables and the `color-mix` function which makes theming in css relatively easy.
 
 A complete UI framework that provides a comprehensive suite of tools for building interactive and visually appealing applications. Here's an overview of the key features and components it includes: