Add initial documentation

docs/charts/introduction.mdx

@@ -1,9 +1,34 @@
 # Charts
 
+Charts are powerful visual representations of data that help us understand patterns, trends, and relationships. In this library, we provide a variety of chart components that you can use to display data in different formats.
+
 import { Card } from '@/ui/components/Card';
-import { chartDataMedium } from "@/docs/charts/_lib/data";
+import { chartDataMedium, radarDataMedium } from "@/docs/charts/_lib/data";
+import { AreaChart } from '@/ui/charts/AreaChart';
 import { BarChart } from '@/ui/charts/BarChart';
+import { LinePlot } from '@/ui/charts/LinePlot';
+import { PieChart } from '@/ui/charts/PieChart';
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full'>
+  <Card className='w-full aspect-square'>
+    <AreaChart data={chartDataMedium} isAnimationActive={false} />
+  </Card>
+
+  <Card className='w-full aspect-square'>
+    <BarChart data={chartDataMedium} isAnimationActive={false} />
+  </Card>
+
+  <Card className='w-full aspect-square'>
+    <LinePlot data={chartDataMedium} isAnimationActive={false} />
+  </Card>
+
+  <Card className='w-full aspect-square'>
+    <PieChart data={chartDataMedium} isAnimationActive={false} />
+  </Card>
+
+  <Card className='w-full aspect-square'>
+    <RadarChart data={radarDataMedium} domain={[0, 150]} isAnimationActive={false} />
+  </Card>
+</div>
 
-<Card className="h-64 w-96">
-  <BarChart data={chartDataMedium} isAnimationActive={false} />
-</Card>

docs/components/introduction.mdx

@@ -1,15 +1,5 @@
 # Introduction
 
-import {Button} from '@/ui/components/Button';
-import { FileTrigger } from "react-aria-components"
-import { ItalicIcon } from "lucide-react"
-import { ToggleButton } from '@/ui/components/ToggleButton';
-import {GridList, GridListItem} from '@/ui/components/GridList';
-import { MoreHorizontalIcon } from "lucide-react"
-import { MenuTrigger } from 'react-aria-components';
-import { Popover } from '@/ui/components/Popover';
-import { Menu, MenuItem, MenuSeparator } from '@/ui/components/Menu';
+WindCraft is a collection of components based on React Aria Components and Tailwind. These components are designed to be highly accessible and customizable, making it easier for developers to build user interfaces.
 
-<div className='flex flex-wrap gap-2 w-full max-w-md'>
-  <Button variant="primary">Primary</Button>
-</div>
+The styling of WindCraft components is inspired by Shadcn/ui, but it has been adapted to align with the design principles of PlatformPlatform. This ensures a consistent and cohesive look and feel across your application.

docs/templates/introduction.mdx

@@ -1,8 +1,14 @@
 # Introduction
 
+This is a collection of templates that can be used to build a user interface. Each template is a composition of components that are designed to work together to provide a specific user interface.
+
+We have a few templates that are ready to use and are part of [PlatformPlatform](https://github.com/platformplatform/PlatformPlatform) already!
+
+## Example
+
 import {Card} from '@/ui/components/Card';
 import {VerifyCodeForm} from '@/ui/templates/VerifyCodeForm';
 
-<Card>
+<Card className='w-full'>
   <VerifyCodeForm />
 </Card>

docs/templates/user-management/account-registration-form.mdx

@@ -1,5 +1,7 @@
 # AccountRegistrationForm
 
+The `AccountRegistrationForm` template is used to render a form that allows users to register for an account.
+
 import { Card } from '@/ui/components/Card';
 import { AccountRegistrationForm } from '@/ui/templates/AccountRegistrationForm';