Root readme (#9)

* docs: root readme

* docs: remove screenshot

* docs: move assets to .github/

* Move in examples repositories (#13)

* docs: move in example repositories

* docs: update link to react-native example

Author: 3v0k4

.github/assets/logo-dark.svg

@@ -0,0 +1,42 @@
+<p align="center">
+  <a href="https://magicbell.com">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/logo-light.svg">
+      <source media="(prefers-color-scheme: light)" srcset="./.github/assets/logo-dark.svg">
+      <img alt="MagicBell" src="./.github/assets/logo-dark.svg" width="300" height="60" style="max-width: 100%;">
+    </picture>
+  </a>
+</p>
+
+<p align="center">
+  Modern Notification System with API & UI components for multi-channel delivery - in-app, email, push, Slack & more!
+</p>
+
+---
+
+## SDKs
+
+Apart from our [REST](https://www.magicbell.com/docs/rest-api/overview) and [GraphQL](https://www.magicbell.com/docs/graphql-api/overview) API, we offer API wrappers in several programming languages:
+
+- [JavaScript/TypeScript](https://github.com/magicbell-io/magicbell-js)
+- [Ruby](https://github.com/magicbell-io/magicbell-ruby)
+- [iOS](https://github.com/magicbell-io/magicbell-swift)
+- [Android](https://github.com/magicbell-io/magicbell-android)
+
+## Documentation
+
+Read the full documentation and guides on [magicbell.com](https://magicbell.com/).
+
+Contribute in [/docs](./docs).
+
+## Examples
+
+Check out the example repositories that show how to use MagicBell in [/examples](./examples).
+
+## Community
+
+Discuss MagicBell on [GitHub Discussions](https://github.com/magicbell-io/public/discussions).
+
+##  OpenAPI specifications
+
+Check the OpenAPI specifications for the MagicBell REST API in [/openapi](./openapi).

.github/assets/logo-light.svg

@@ -43,7 +43,7 @@ PushNotification.configure({
 ```
 
 If you face any issues while configuring the library, please feel free to shoot us a note, we will be happy to help.
-You might also find it helpful to read the [full React Native example](https://github.com/magicbell-io/react-native-notifications-example) we created.
+You might also find it helpful to read the [full React Native example](https://github.com/magicbell-io/public/examples/react-native-notifications-example) we created.
 
 This is a sample payload MagicBell will push to your app:
 

README.md

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public

docs/docs/react-native/implement-mobile-push-notifications.mdx

@@ -0,0 +1,12 @@
+# MagicBell Gatsby example
+
+This repo shows how to use the `@magicbell/react-headless` package to render notifications in a Gatsby application.
+
+## Quick start
+
+Navigate into the site’s directory and start it up.
+
+```shell
+cd magicbell-gatsby-example/
+npm run develop
+```

examples/gatsby-example/.gitignore

@@ -0,0 +1,7 @@
+import * as React from "react";
+import Layout from "./src/components/Layout";
+import "./src/styles/global.css";
+
+export const wrapPageElement = ({ element, props }) => (
+  <Layout {...props}>{element}</Layout>
+);

examples/gatsby-example/README.md

@@ -0,0 +1,7 @@
+module.exports = {
+  siteMetadata: {
+    title: `MagicBell Gatsby Example`,
+    siteUrl: `https://www.yourdomain.tld`,
+  },
+  plugins: ["gatsby-plugin-postcss"],
+};

examples/gatsby-example/gatsby-browser.jsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import Layout from "./src/components/Layout";
+
+export const onRenderBody = ({ setBodyAttributes }, pluginOptions) => {
+  setBodyAttributes({
+    className: "h-full",
+  });
+};
+
+export const wrapPageElement = ({ element, props }) => (
+  <Layout {...props}>{element}</Layout>
+);