feat(homepage): -react-simple-pie documentation

apps/homepage/src/content/docs/getting-started/react-simple-pie.mdx

@@ -2,7 +2,15 @@
 title: Installation
 description: How to install react-simple-pie npm package
 ---
-import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Aside, Code, Tabs, TabItem } from '@astrojs/starlight/components';
+
+`react-simple-pie` creates simple svg pie and doughnut charts for infographics like graphs and others in react applications.
+
+<Aside>
+  If you are going to use simple diagram in not react project, please use [simple-pie](/getting-started/simple-pie).
+</Aside>
+
+## Installation
 
 <Tabs>
   <TabItem label="npm" icon="seti:npm">
@@ -15,3 +23,47 @@ import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
     <Code code="yarn add react-simple-pie" lang="bash" />
   </TabItem>
 </Tabs>
+
+## Usage
+
+```js
+import React from 'react';
+import {SimplePie, SimpleDoughnut} from "react-simple-pie"
+
+export default function YourComponent() {
+  return (
+    <section>
+      <div style={{width: 200, height: 200}}>
+        <SimpleDoughnut values={[1, 2, 1, 2]} />
+      </div>
+      <div style={{width: 200, height: 200}}>
+        <SimpleDoughnut values={[1, 1, 1]} borderWidth={4} borderColor="green" />
+      </div>
+    </section>
+  );
+}
+```
+
+<Aside type="tip">
+  The svg `height` and `width` are `100%`, so it trys to extend itself to available space.
+  Thus, you should have wrapper with dimensions for your simple-pie diagram.
+</Aside>
+
+## Interface
+
+```ts
+export type TPieProps = {
+  values: number[];
+  palette?: string[];
+  borderColor?: string;
+  borderWidth?: number;
+};
+
+export type TDoughnutProps = TPieProps & {
+  innerRadius?: number; // 0..1 - percent from outer radius
+};
+```
+
+## Examples
+
+TBD