feat: inkkit welcome page

Author: ink-victor

.storybook/preview.ts

@@ -26,6 +26,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: ["Welcome", "*"],
+      },
+    },
   },
   decorators: [
     withThemeByClassName<ReactRenderer>({

README.md

@@ -1,33 +1,53 @@
-# ink-kit
+<img src="src/images/banner.png" alt="Inkkit Banner" style="width: 100%; border-radius: 8px; margin-bottom: 2rem;" />
 
-Ink Kit
+# Inkkit
+
+Inkkit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components.
+
+## Features
+
+- 🎨 Customizable app layout templates
+- ✨ Magical animated components
+- 🎭 Vibrant themes
+- ⛓️ Onchain-focused development
+- 🚀 Efficient developer experience
+- 📱 Polished, engaging interfaces
 
 ## Install
 
 ```bash
 npm install @inkonchain/ink-kit
+# or
+pnpm install @inkonchain/ink-kit
 ```
 
 ## Usage
 
-To use the components, you can import them directly:
-
 ```tsx
-import { Button } from "@inkonchain/ink-kit";
-```
+// Import styles first at the root of your project (required)
+import "@inkonchain/ink-kit/style.css";
 
-To import the CSS, you can use the `style.css` export:
+// Import components as needed
+import { Button } from "@inkonchain/ink-kit";
 
-```tsx
-import "@inkonchain/ink-kit/style.css";
+function App() {
+  return (
+    <div>
+      <Button onClick={() => {}} size="md" variant="secondary">
+        Ship It
+      </Button>
+    </div>
+  );
+}
 ```
 
-Note: Ink-Kit styles should be imported first so that your own custom classes are taking precedence.
+Note: Inkkit classes are prefixed with `ink-` and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence.
 
-Ink Kit classes are prefixed with `ink-`.
+## Resources
 
-You can also use the CSS variables directly in your project instead of the tailwind classes.
+- **Documentation**: Browse components and examples on our [Storybook page](https://inkkit.inkonchain.com/)
+- **Contributing**: Open a PR right here on our [GitHub repository](https://github.com/inkonchain/ink-kit)
 
 ## WIP Notice
 
-This is a work in progress, we are working on it!
+This is a work in progress: we are constantly adding new components, improving the developer experience, and fixing bugs.

src/images/banner.webp

@@ -0,0 +1,66 @@
+import { Meta } from "@storybook/blocks";
+import Banner from "../images/banner.webp?base64";
+
+<Meta title="Welcome" />
+
+<img
+  src={Banner}
+  alt="Inkkit Banner"
+  style={{ width: "100%", marginBottom: "2rem", borderRadius: "8px" }}
+/>
+
+# Welcome to Inkkit
+
+Inkkit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components.
+
+## Install
+
+```bash
+npm install @inkonchain/ink-kit
+# or
+pnpm install @inkonchain/ink-kit
+```
+
+## Usage
+
+```tsx
+// Import styles first at the root of your project (required)
+import "@inkonchain/ink-kit/style.css";
+
+// Import components as needed
+import { Button } from "@inkonchain/ink-kit";
+
+function App() {
+  return (
+    <div>
+      <Button onClick={() => {}} size="md" variant="secondary">
+        Ship It
+      </Button>
+    </div>
+  );
+}
+```
+
+Note: Inkkit classes are prefixed with `ink-` and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence.
+
+## Key Features
+
+- 🎨 **Customizable app layout templates**
+- ✨ **Magical animated components**
+- 🎭 **Vibrant themes**
+- ⛓️ **Onchain-focused development**
+- 🚀 **Efficient developer experience**
+- 📱 **Polished, engaging interfaces**
+
+## Theming
+
+Complete theming guide coming soon.
+
+## Resources
+
+- **Documentation**: Browse components and examples in the sidebar
+- **Contributing**: Visit our [GitHub repository](https://github.com/inkonchain/ink-kit)
+
+## WIP Notice
+
+This is a work in progress: we are constantly adding new components, improving the developer experience, and fixing bugs.