add boilerplate docs

.prettierignore

@@ -1 +1,2 @@
-documentation
+documentation
+boilerplate

boilerplate/404.mdx

@@ -0,0 +1,15 @@
+---
+title: Speedy Boilerplate - 404 Page
+description: Learn how to use Speedy Boilerplate 404 page.
+navigation: []
+github: 404
+next: deploy
+---
+
+# Speedy Boilerplate - 404 Page
+
+This page is used to show an error message if the user tries to access a page that does not exist. The 404 page is located in the <Code>app/not-found.tsx</Code> file.
+
+Below you can see a preview of the 404 page.
+
+<Image src="/boilerplate/404-page.png" alt="404" width={1280} height={1280} className="border border-gray-200 w-full h-auto rounded-lg" />

boilerplate/analytics.mdx

@@ -0,0 +1,102 @@
+---
+title: Speedy Boilerplate - Analytics
+description: Learn how to setup Speedy Boilerplate Analytics with Google Analytics.
+navigation:
+  ["setting-up-google-analytics", "setting-up-google-tag-manager", "summary"]
+github: analytics
+next: header
+
+---
+
+# Analytics - Speedy Boilerplate
+
+The Speedy Boilerplate includes a built-in analytics feature, allowing you to effortlessly track your website traffic and user behavior using Google Analytics. Here's how you can set it up:
+
+<br />
+<br />
+
+<DocsTitle href="setting-up-google-analytics">
+## Setting Up Google Analytics
+</DocsTitle>
+
+1: **Get Your Google Analytics ID**:
+
+<ul className="ml-8 list-disc">
+  <li>
+    If you don't have a Google Analytics account, you can create one for free at [analytics.google.com](https://analytics.google.com).
+  </li>
+  <li>
+    After setting up your account and creating a property for your website, you'll be provided with a Google Analytics ID (typically in the format <Code>UA-XXXXXXXXX-X</Code>).
+  </li>
+</ul>
+
+<br />
+
+
+2: **Add Your Google Analytics ID**:
+
+<ul className="ml-8 list-disc">
+  <li>
+    Open the <Code>.env</Code> file in the root directory of your project.
+  </li>
+  <li>
+    Add your Google Analytics ID by setting the <Code>NEXT_PUBLIC_GOOGLE_ANALYTICS_ID</Code> environment variable:
+  </li>
+</ul>
+
+```env
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=<your-google-analytics-id>
+```
+
+<br/>
+
+That's it! Google Analytics is now set up and will start tracking your website's traffic and user behavior.
+
+---
+
+<DocsTitle href="setting-up-google-tag-manager">
+## Setting Up Google Tag Manager (Optional)
+</DocsTitle>
+
+If you prefer using Google Tag Manager, you can also integrate it into the Speedy Boilerplate. Here's how:
+
+1: **Get Your Google Tag Manager ID**:
+
+<ul className="ml-8 list-disc">
+  <li>
+    If you don't have a Google Tag Manager account, you can create one for free at <Link href="https://tagmanager.google.com" target="_blank">tagmanager.google.com</Link>.
+  </li>
+  <li>
+    After setting up your account and creating a container for your website, you'll be provided with a Google Tag Manager ID (typically in the format <Code>GTM-XXXXXXX</Code>).
+  </li>
+</ul>
+
+<br/>
+
+2: **Add Your Google Tag Manager ID**:
+
+<ul className="ml-8 list-disc">
+  <li>
+    Open the <Code>.env</Code> file in the root directory of your project.
+  </li>
+  <li>
+    Add your Google Tag Manager ID by setting the <Code>NEXT_PUBLIC_GOOGLE_TAG_ID</Code> environment variable:
+  </li>
+</ul>
+
+```env
+NEXT_PUBLIC_GOOGLE_TAG_ID=<your-google-tag-manage-id>
+```
+
+<br/>
+
+By following these simple steps, you'll have Google Tag Manager set up and ready to manage tags on your website.
+
+---
+
+<DocsTitle href="summary">
+## Summary
+</DocsTitle>
+
+With the Speedy Boilerplate, integrating Google Analytics and Google Tag Manager is straightforward. Just add the respective IDs to your <Code>.env</Code> file, and you'll gain valuable insights into your website's traffic and user behavior.
+If you need further assistance, feel free to consult the official documentation for [Google Analytics](https://support.google.com/analytics/answer/1008015) and [Google Tag Manager](https://support.google.com/tagmanager/answer/6102821). Happy tracking!

boilerplate/auth.mdx

@@ -0,0 +1,15 @@
+---
+title: Speedy Boilerplate - Auth Page
+description: Learn how to use Speedy Boilerplate Auth page.
+navigation: []
+github: auth
+next: error
+---
+
+# Speedy Boilerplate - Auth Page
+
+The home page is the first page that the user uses to sign up or sign in to your website. The auth page is located in the <Code>app/auth/page.tsx</Code> file.
+
+The auth page contains the authentication method for Google and Magic Link, below you can see a preview of the auth page.
+
+<Image src="/boilerplate/auth-page.png" alt="auth-page" width={1280} height={1280} className="border border-gray-200 w-full h-auto rounded-lg" />

boilerplate/authentication.mdx

@@ -0,0 +1,67 @@
+---
+title: Speedy Boilerplate - Authentication
+description: Learn how to setup and use Speedy Boilerplate authentication with Supabase Auth.
+navigation:
+  ["google-auth", "magic-link"]
+github: authentication
+next: payments
+---
+
+# Speedy Boilerplate - Authentication
+
+We used Supabase auth as authentication method for the boilerplate, in this section we will guide you on how to setup the Google Auth and Magic Link based on Supabase, Google OAuth and Resend.
+
+<br />
+<br />
+
+<DocsTitle href="google-auth">
+## Google Auth
+</DocsTitle>
+
+Google Auth is a popular authentication method, it allows users to sign in with their Google account to your application simply connecting their Google account to your application, this is a great way to increase the user experience and make it easier for users to sign in.
+
+To setup authentication with Google + Supabase follow the steps below:
+
+1: Go to the [Google Developers Console](https://console.cloud.google.com). If you don't have an account, you can create a new account and setup a new project.
+
+2: Then go to the <Code>APIs & Services</Code> to setup the OAuth Consent Screen and OAuth Client ID.
+
+3: Then go to the <Code>OAuth Consent Screen</Code> and fill in the required fields.
+
+4: Once you've setup the OAuth Consent Screen, go to the <Code>Credentials</Code> click on <Code>Create Credentials</Code> and select <Code>OAuth client ID</Code>.
+
+5: Then select the application type to <Code>Web Application</Code>.
+<ul className="ml-8 list-disc">
+  <li>
+    Add a name for the OAuth client ID.
+  </li>
+  <li>
+    Click on the <Code>Add URI</Code> button on the <Code>Authorized JavaScript Origins</Code> and add the <Code>{`http://localhost:3000`}</Code> and your Supabase Project URL.
+  </li>
+  <li>
+    Then go to the Supabase Dashboard -> Authentication -> Providers and click on the <Code>Google</Code>. There you will find the <Code>Callback URL (for OAuth)</Code> copy that URL and go back to the Google Developer Console and paste it to the <Code>Authorized Redirect URIs</Code> in the Google Developers Console.
+  </li>
+  <li>
+    Then click on the **Create** button.
+  </li>
+</ul>
+
+6: Then go to back to the Supabase Dashboard -> Authentication -> Providers and click on the **Google**, enable it and Copy/Paste the **Client ID** and **Client Secret** from the Google Developers Console to the Supabase Google Auth and save it.
+
+<br />
+
+Great job! You have successfully setup the Google Auth with Supabase, now let's move to the next step to setup the Magic Link based on Supabase and Resend.
+
+---
+
+<DocsTitle href="magic-link">
+## Magic Link
+</DocsTitle>
+
+Magic Link is a great way to authenticate users without the need of a password, it allows users to sign in with their email address and receive a magic link on their inbox to sign in to your application effortlessly. This is a great way to increase the user experience and make it easier for users to sign in.
+
+To setup authentication with Magic Link you need to have a Supabase account that is already setup and a Resend account, in this part we will guide you on how to create a Resend account and integrate it with Supabase for sending Magic Link Authentication.
+
+1: Go to the [Resend Sign Up](https://resend.com/signup) page and create a new account. You can use Email and Password, Google or GitHub to sign up.
+
+2: Once your account is created, sign in and go to the Resend Dashboard to integrate it with Supabase. For integrating Resend with Supabase you can follow the [Resend + Supabase](https://resend.com/blog/how-to-configure-supabase-to-send-emails-from-your-domain) guide writted by Resend team. The guide also contains a video tutorial on how to setup Resend with Supabase which is very helpful.

boilerplate/blog.mdx

@@ -0,0 +1,48 @@
+---
+title: Speedy Boilerplate - Blog
+description: Learn how to use Speedy Boilerplate Blog Component.
+navigation: ["blog-1", "blog-2"]
+github: blog
+next: google-auth-button
+---
+
+# Speedy Boilerplate - Blog
+
+The blog component is a section that displays the blog posts. It's an important part of a website where you can share your thoughts, ideas, and knowledge with your audience.
+
+<br />
+<br />
+
+<DocsTitle href="blog-1">
+## Blog 1
+</DocsTitle>
+
+The component is located in the <Code>components/blog/blog-1.tsx</Code> file and below is the code snippet of how to use the blog component.
+
+<CodePreview noPadding component={<Image src="/boilerplate/blog.png" alt="blog" width={1024} height={1024} className="w-full" />}>
+```tsx
+import { Blog1 } from "@/components";
+
+export default function Page() {
+  return <Blog1 />
+}
+```
+</CodePreview>
+
+---
+
+<DocsTitle href="blog-2">
+## Blog 2
+</DocsTitle>
+
+The component is located in the <Code>components/blog/blog-2.tsx</Code> file and below is the code snippet of how to use the blog component.
+
+<CodePreview noPadding component={<Image src="/boilerplate/blog-2.png" alt="blog" width={1024} height={1024} className="w-full" />}>
+```tsx
+import { Blog2 } from "@/components";
+
+export default function Page() {
+  return <Blog2 />
+}
+```
+</CodePreview>

boilerplate/cta.mdx

@@ -0,0 +1,23 @@
+---
+title: Speedy Boilerplate - CTA
+description: Learn how to use Speedy Boilerplate CTA Component.
+navigation: []
+github: cta
+next: testimonial
+---
+
+# Speedy Boilerplate - CTA
+
+The cta component is used to display the call to action for subscribing or buying the product on the website. The cta component is located in the <Code>components/cta.tsx</Code> file and below is the code snippet of how to use the cta component.
+
+<br />
+
+<CodePreview noPadding component={<Image src="/boilerplate/cta.png" alt="cta" width={1024} height={1024} className="w-full" />}>
+```tsx
+import { Cta } from "@/components";
+
+export default function Page() {
+  return <Cta />
+}
+```
+</CodePreview>

boilerplate/customer-support.mdx

@@ -0,0 +1,53 @@
+---
+title: Speedy Boilerplate - Customers Support
+description: Learn how to setup and use Speedy Boilerplate customers support with GaliChat.
+navigation:
+  ["setup-galichat"]
+github: customer-support
+next: seo
+---
+
+# Speedy Boilerplate - Customers Support
+
+We used GaliChat for the customers support in the boilerplate, GaliChat is a AI support assistant that you can use to provide support to your customers.
+
+<br />
+<br />
+
+<DocsTitle href="setup-galichat">
+## Setup GaliChat
+</DocsTitle>
+
+To setup and configure GaliChat, follow the steps below:
+
+1: Sigup for GaliChat at <Link href="https://galichat.com/signup" target="_blank" className="text-blue-500 underline">{`www.galichat.com/signup`}</Link>, you can use the login with Google button or enter your email and password to create an account.
+
+2: After logging in, you will be redirected to the My Chatbots page where you can create a new chatbot or manage existing ones. Press on the <Code>Create Chatbot</Code> button to create a new chatbot.
+
+You can give the chatbot one of the options:
+
+<ul className="ml-8 list-disc">
+  <li>
+    The link of your website and the chatbot will crawl it to get the information OR you can add links manually.
+  </li>
+  <li>
+    You can upload multiple files like PDFs, Docs, Txts, etc. and the chatbot will read them.
+  </li>
+  <li>
+    You can write the information manually as simple text.
+  </li>
+</ul>
+
+3: Once you have created the chatbot, you can use the <Code>View Chatbot</Code> on the left side to see how chatbot will look on your website.
+
+4: Once you are satisfied with the chatbot, you can use the <Code>Embeded on site</Code> on the left side to add the chatbot to your website. From there you can copy the <Code>chat-hash</Code> and paste it to <Code>NEXT_PUBLIC_GALICHAT_HASH</Code> on the <Code>.env</Code> file.
+
+```env
+NEXT_PUBLIC_GALICHAT_HASH=<your-galichat-hash>
+```
+
+<br />
+
+**Now you can see the chatbot live on your website and start testing it to see how it works and response to your questions**.
+
+For more information about GaliChat use the link [GaliChat Guide](https://www.galichat.com/getting-started).