docs: improve documentation aesthetics (#1647)

* feat: add branding assets

* docs: override sidebar styles

* feat: override sidebar and shadow styles

* feat: disable backgrounds and grids

* feat: add favicon.ico to assets

* fix: README update

* feat: add badges to readme

* docs(README): update README details

* fix code editor font color issue

* Create tame-pens-explain.md

* docs: add temporary intro page

* fix: remove documentation link

* docs: move README items

* docs: simplify links

* docs: grammar

* docs: typos, add RFCs and API Decisions

* fix: docs li line-height

* feat: add API decisions

* docs: fix grammar

Co-authored-by: Nitin Kumar <[email protected]>

* docs: fix grammar

Co-authored-by: Nitin Kumar <[email protected]>

* fix: resolve comments

---------

Co-authored-by: Nitin Kumar <[email protected]>

.changeset/tame-pens-explain.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+docs: improve documentation aesthetics

README.md

@@ -1,39 +1,41 @@
-<h1 align="center">
-  Blade
-</h1>
+<br/>
 <p align="center">
-  <a href="https://github.com/styled-components/styled-components">
-    <img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e" alt="Blade is styled with styled-components" />
-  </a>
-  <a href="https://github.com/facebook/jest">
-    <img src="https://jestjs.io/img/jest-badge.svg" alt="Blade is tested with jest" />
-  </a>
-  <a href="https://github.com/razorpay/blade/blob/master/LICENSE.md">
-    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Blade is released under the MIT license." />
-  </a>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./branding/blade-original-dark-mode.min.svg">
+  <source media="(prefers-color-scheme: light)" srcset="./branding/blade-original.min.svg">
+  <img width="450px" alt="Blade Design System Logo" src="./branding/blade-original.min.svg">
+</picture>
 </p>
 
+<br/>
+
 <p align="center">
-   The Design System that powers Razorpay
-<p align="center">
+  <a href="https://npmjs.org/package/@razorpay/blade"><img alt="Blade Latest Version" src="https://img.shields.io/github/package-json/v/razorpay/blade?style=for-the-badge&labelColor=322&logo=npm&label=@razorpay/Blade&color=darkred&filename=packages%2Fblade%2Fpackage.json"></a> &nbsp;<a href="https://blade.razorpay.com/"><img alt="Documentation blade.razorpay.com" src="https://img.shields.io/badge/Documentation-blade.razorpay.com-0648EF?style=for-the-badge&labelColor=0012AD&logo=readthedocs&logoColor=eee"/></a> &nbsp;<a href="https://github.com/razorpay/blade/tree/master/CONTRIBUTING.md"><img alt="Discord Join Chat" src="https://img.shields.io/badge/Contributions-Open-333333?style=for-the-badge&logo=github&logoColor=ffffff&labelColor=111111"/></a></p>
+
+<h1 aria-hidden="true"></h1>
 
-### [`@razorpay/blade`](https://github.com/razorpay/blade/tree/master/packages/blade)
+<br/>
 
-This package is under active development.
+Blade is the Design System that powers [Razorpay](https://razorpay.com/). 
 
-- [Documentation](https://master--61c19ee8d3d282003ac1d81c.chromatic.com)
-- [Installation Guide](https://master--61c19ee8d3d282003ac1d81c.chromatic.com/?path=/docs/guides-installation--page)
-- [Contributing guidelines](https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md)
+## 🔗 Links
 
----
+- [Docs](https://blade.razorpay.com)
+- [Installation](https://blade.razorpay.com/?path=/docs/guides-installation--page)
+- [@razorpay/blade-old](https://github.com/razorpay/blade-old) (Deprecated, Private)
 
-> **Note**
->
-> The blade-old package has been moved to it's own repo.
-> [github.com/razorpay/blade-old](https://github.com/razorpay/blade-old) (Only accessible to Razorpay employees)
->
-> It is under **maintenance** and it won't have any major releases.
+## ✨ Features
+- Cross-Platform (Works Natively on [React Web](https://blade.razorpay.com/?path=/docs/guides-installation--page#%EF%B8%8F-installation) and [React Native](https://blade.razorpay.com/?path=/docs/guides-installation--page#react-native-projects))
+- [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--page)
+- [CSS Variables for non-React Projects](https://blade.razorpay.com/?path=/docs/tokens-css-variables--page)
+- [Accessible](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#manual-testing)
+- Documented [RFCs](https://github.com/razorpay/blade/tree/docs/make-docs-pretty/rfcs) and [API Decisions](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Alert/_decisions/decisions.md)
 
 ## 📝 License
 
 Licensed under the [MIT License](https://github.com/razorpay/blade/blob/master/LICENSE.md).
+
+<h1 aria-hidden="true"></h1>
+
+<p align="center">Interested in working with us? Checkout our <a href="https://razorpay.com/jobs">Jobs Page</a> for open roles 🤗</p>
+