docs(docs): add introduction document

apps/docs/pages/_meta.tsx

@@ -1,14 +1,10 @@
 export default {
   index: "Introduction",
   installation: "Installation",
-  about: {
-    title: "About",
-    type: "page",
-  },
   contact: {
     title: "Contact ↗",
     type: "page",
-    href: "https://twitter.com/shuding_",
+    href: "https://twitter.com/senkanoktay",
     newWindow: true,
   },
 };

apps/docs/pages/index.mdx

@@ -1,11 +1,15 @@
-# Introduction
-
-Welcome to Nextra! This is a basic docs template. You can use it as a starting point for your own project :)
+# Monicon: Universal Icon Library
 
-## What is Nextra?
+Monicon is an easy-to-use icon library that makes adding icons to your projects simple. It works with popular frameworks like React, React Native, Next.js, Vue, Nuxt, Svelte and more. It's provides 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome.
 
-A **simple**, **powerful** and **flexible** site generation framework with everything you love from Next.js.
+## Why Use Monicon?
 
-## Documentation
+- **Huge Icon Library**: Get access to over 200,000 icons from famous sets like Material Design, Feather, and Font Awesome.
+- **Works with Modern Tools**: Monicon supports tools like Vite, Webpack, Rollup, and others, so it's ready for any project.
+- **Fast and Efficient**: Monicon loads icons quickly to keep your project running smoothly. No flickering or lagging.
+- **Easy to Use**: Works with React, Vue, Svelte, Next.js, and other popular frameworks, making icon integration simple. You can discover icons on the [Icones](https://icones.js.org/) website.
+- **Customizable**: You can easily change the size, color, and other features of the icons to fit your design.
+- **Collaboration**: Monicon helps you collaborate with designers to speed up the design process and get better results. [Iconify Figma Plugin](https://www.figma.com/community/plugin/735098390272716381/iconify) allows you to use icons directly in Figma.
+- **Free and Open Source**: Monicon is free to use and open source, so you can use it in any project without restrictions.
 
-The documentation is available at [https://nextra.site](https://nextra.site).
+No matter which framework you use, Monicon makes adding and managing icons easy. Check out the documentation to see how Monicon can help improve your next project with great-looking icons!

apps/docs/theme.config.tsx

@@ -1,7 +1,27 @@
 import React from "react";
-import { DocsThemeConfig } from "nextra-theme-docs";
+import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
+import { useRouter } from "next/router";
 
 const config: DocsThemeConfig = {
+  head() {
+    const config = useConfig();
+    const { route } = useRouter();
+
+    const description =
+      config.frontMatter.description ||
+      "Monicon is a icon library for Modern Frameworks";
+
+    const title = config.title + (route === "/" ? "" : " - Monicon");
+
+    return (
+      <>
+        <title>{title}</title>
+        <meta property="og:title" content={title} />
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+      </>
+    );
+  },
   logo: <span>Monicon</span>,
   project: {
     link: "https://github.com/oktaysenkan/monicon",