diff --git a/Documentation/docs/How To/Background + image change.md b/Documentation/docs/How To/Background + image change.md
new file mode 100644
index 0000000..5f10009
--- /dev/null
+++ b/Documentation/docs/How To/Background + image change.md
@@ -0,0 +1,23 @@
+# How to Generate and Replace Backgrounds Using Haky
+
+In this tutorial, we'll guide you through the process of generating a custom background using the Haky tool (hay.app), replacing an existing background image, and updating references in your code. Follow these steps to create and implement your new background effectively.
+
+[](https://youtu.be/PjULTUBBt_s)
+
+## 1. Introduction to Haky
+
+Haky is a powerful background generator tool available at hay.app. This tool allows you to create customized backgrounds with ease.
+
+## 2. Generating a Background
+
+To get started with Haky, follow these steps:
+
+1. Open the Haky application at hay.app.
+2. Input your desired primary color.
+ 
+3. Hit the generate button to create your background.
+ 
+4. Adjust the dimensions to 19 by 6.
+ 
+5. Optionally, you can add a gradient to your background based on your preference.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Business Analyst Sample.md b/Documentation/docs/How To/Business Analyst Sample.md
new file mode 100644
index 0000000..48d5bac
--- /dev/null
+++ b/Documentation/docs/How To/Business Analyst Sample.md
@@ -0,0 +1,16 @@
+# How to Create a Simple Login Flow for IL Loal
+
+Creating a secure and user-friendly login flow is essential for any application. In this guide, we'll walk you through the steps to set up a basic login flow for IL loal, including email and password authentication, alternative login options, and error handling.
+
+[](https://youtu.be/iQ2lWjIn5po)
+
+## Basic Login Flow
+
+To begin, we'll create a login form that requires an email address and a password. The email address should be validated to ensure it is in a proper format, which can be achieved using Regex.
+
+
+
+
+The password must adhere to Pocket Base's guidelines, which specify that it should be between 8 to 16 characters.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Email Setup.md b/Documentation/docs/How To/Email Setup.md
new file mode 100644
index 0000000..5e4c096
--- /dev/null
+++ b/Documentation/docs/How To/Email Setup.md
@@ -0,0 +1,17 @@
+# How to Set Up Emails Using MJML and HTML
+
+In this guide, we will walk you through the process of setting up your emails using MJML and HTML files. This step-by-step tutorial will help you configure and customize your first purchase and sign-up emails effectively.
+
+[](https://youtu.be/YfnQhNgiz8c)
+
+## Accessing the Email Directory
+
+To begin, navigate to the fast pocket directory. Here, you will find the first purchase email and the sign-up email.
+
+
+
+## Configuring Emails
+
+Our primary goal is to change the text in the HTML that will be sent out in these emails. These emails are triggered on the first sign-up and the first purchase. While you don't need to worry too much about configuring these initial emails, you can use the provided example to configure additional ones.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Fly Deploy.md b/Documentation/docs/How To/Fly Deploy.md
new file mode 100644
index 0000000..502bcab
--- /dev/null
+++ b/Documentation/docs/How To/Fly Deploy.md
@@ -0,0 +1,64 @@
+# How to Deploy a Self-Hosted Backend on fly.io
+
+Deploying your self-hosted backend on fly.io can be a quick and efficient process. This guide will walk you through the steps required to get your backend up and running, using the example of setting up a backend for Fast Pocket. Fly.io is a great platform for hosting backends because it allows you to set up your backend swiftly and efficiently.
+
+[](https://youtu.be/1rd9dm0ncUk)
+
+## Setting Up Secrets
+
+Before we begin deployment, it's crucial to set up a secret for our Stripe key, which has been previously generated. This ensures that our transactions are secure.
+
+1. **Set up the Stripe key**:
+ ```bash
+ fly secrets set STRIPE_SECRET_KEY=your_stripe_key
+ ```
+
+
+
+## Configuring the fly.toml File
+
+The `fly.toml` file contains all the configuration settings necessary for deploying to fly.io. Here are the key settings you need to modify:
+
+1. **App Name**: Change the app name to your desired name, e.g., `icon.camp`.
+2. **Primary Region**: Set the primary region to the closest region to where your app will be deployed. For example, if you want your app to be based in Australia, you might choose the region `syd` for Sydney.
+3. **Host**: Ensure the host is set to your app's name, e.g., `icon.camp.fly.dev`.
+4. **Port**: Maintain the same port used for PocketBase, which is `8090`.
+5. **Stripe Billing and Cancel URLs**: Set the URLs for Stripe billing and cancel actions. For instance:
+ - `STRIPE_BILLING_RETURN_URL`: `https://icon.camp/account`
+ - `STRIPE_CANCEL_URL`: `https://icon.camp/pricing`
+ - `STRIPE_SUCCESS_URL`: `https://icon.camp/account`
+6. **Mount Source and Destination**: Configure the source and destination for your fly.io volume. For example:
+ - `source`: `data_icon_camp`
+ - `destination`: `/app/bin/pb_data`
+
+
+
+## Deploying the Application
+
+To deploy your application, follow these steps:
+
+1. **Run the fly launch command**:
+ ```bash
+ fly launch --no-deploy
+ ```
+ This command initializes the deployment process.
+
+
+
+2. **Check for successful configuration**: Ensure the configuration is valid and matches the settings in your `fly.toml` file.
+
+3. **Attach a credit card if necessary**: If the deployment fails, it may be due to not having a credit card attached to your fly.io account.
+
+
+
+## Creating and Mounting Volumes
+
+Next, create and mount the necessary volumes for your application:
+
+1. **Create a volume**:
+ ```bash
+ fly volumes create data_icon_camp --size 3
+ ```
+ This command creates a 3GB volume for storing data.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Frontend to Backend.md b/Documentation/docs/How To/Frontend to Backend.md
new file mode 100644
index 0000000..e37d039
--- /dev/null
+++ b/Documentation/docs/How To/Frontend to Backend.md
@@ -0,0 +1,22 @@
+# How to Deploy and Style Your Application
+
+Deploying and styling your application can seem daunting, but with a clear step-by-step process, it becomes much more manageable. This guide will walk you through the steps to disconnect from Vercel, connect to a new repository, set up environment variables, create a new deployment, and finally, make changes to style your application.
+
+[](https://youtu.be/UTz5pDUicEc)
+
+## Step 1: Disconnect from Vercel
+To start, you need to disconnect your current setup from Vercel. This ensures that you can connect to the new repository without any conflicts.
+
+
+Navigate to your Vercel project settings and locate the "Connected Git Repository" section. Click the "Disconnect" button next to your current repository to disconnect it.
+
+## Step 2: Connect to the New Repository
+Next, connect your application to the new repository. This will be your core repository for launching the application.
+
+
+In the same "Connected Git Repository" section, search for and select your new repository. Click "Connect" to establish the connection.
+
+## Step 3: Set Up Environment Variables
+Before proceeding, ensure that all required environment variables are set up. This includes variables for tools like PostHog and any other necessary configurations.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Pocketbase.md b/Documentation/docs/How To/Pocketbase.md
new file mode 100644
index 0000000..7c81fd1
--- /dev/null
+++ b/Documentation/docs/How To/Pocketbase.md
@@ -0,0 +1,14 @@
+# How to Integrate Stripe with Pocket Base Using Fly.io
+
+In this tutorial, we will walk you through the steps to integrate Stripe with Pocket Base using Fly.io. This integration will ensure that your products automatically synchronize with Pocket Base whenever there are updates or new events in Stripe.
+
+[](https://www.youtube.com/watch?v=Q0yRtC9jr_M "Video Title")
+
+
+## Setting Up Web Hook Endpoint
+
+First, we need to set up a web hook endpoint in Pocket Base. Follow these steps:
+
+1. Navigate to your instance of Pocket Base on Fly.io. 
+2. Click on "Add Endpoint" to create a new endpoint. 
+3. Name your endpoint. In this example, we will call it "Stripe Endpoint" or "Fast Pocket Stripe Endpoint". 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Posthog Analytics.md b/Documentation/docs/How To/Posthog Analytics.md
new file mode 100644
index 0000000..4483163
--- /dev/null
+++ b/Documentation/docs/How To/Posthog Analytics.md
@@ -0,0 +1,18 @@
+# How to Connect Your Backend to Vercel with PostHog and Google Analytics
+
+In this tutorial, we will guide you through the process of connecting your backend to a Vercel instance, integrating PostHog for product analytics, and setting up Google Analytics. These steps are crucial for tracking user interactions and gaining insights into your application's performance.
+
+[](https://youtu.be/20-sBCbvEEA)
+
+## Setting Up PostHog
+
+First, we need to set up PostHog, which is a powerful product analytics tool.
+
+1. **Navigate to PostHog**: Go to [posthog.com](https://posthog.com) and click on "Get Started".
+ 
+
+2. **Create an Account**: Use a temporary email to create an account. This is useful if you do not plan to keep the account permanently.
+ 
+
+3. **Verify Email Address**: PostHog will send a verification email. Click the link in the email to verify your address.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Components.md b/Documentation/docs/How To/SC Components.md
new file mode 100644
index 0000000..1271f48
--- /dev/null
+++ b/Documentation/docs/How To/SC Components.md
@@ -0,0 +1,20 @@
+# Getting Started with Fast Pocket: Customizing Your Site
+
+Fast Pocket is a powerful tool that allows you to quickly set up and customize your website. This tutorial will guide you through the initial steps to get your site up and running, focusing on customization and component integration.
+
+[](https://youtu.be/af3NjGQ_4qg)
+
+## Customizing Your Site
+
+One of the first tasks when starting with Fast Pocket is customizing your site. Customization is essential to ensure that your site meets your specific needs and aesthetic preferences.
+
+All the components you will need are located in one place and are set up with light and dark mode theming. This setup ensures that your site can easily switch between themes. The components are aligned with Daisy UI, making it straightforward to style them using Tailwind classes.
+
+
+
+
+## Using Example Components
+
+Fast Pocket provides several example components that you can use as a starting point. You can simply copy the code of these components and paste it into your actual project. These components are designed to work out of the box, saving you time and effort.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Fonts.md b/Documentation/docs/How To/SC Fonts.md
new file mode 100644
index 0000000..8afb513
--- /dev/null
+++ b/Documentation/docs/How To/SC Fonts.md
@@ -0,0 +1,69 @@
+# How to Set Up a Font in Fast NPocket Using Tailwind
+
+Setting up a font in Fast NPocket involves configuring the Tailwind CSS framework and updating the layout files. This guide will walk you through the process step-by-step.
+
+[](https://youtu.be/QrXrqNnSBM4)
+
+## Choosing a Font
+
+To begin, visit [Google Fonts](https://fonts.google.com) to select a font that suits your project. Keep in mind that not all fonts are available in the Next library, so you might need to experiment to find one that works.
+
+
+
+## Setting Up Tailwind Config
+
+Once you've chosen your font, you'll need to define it in the Tailwind config file. For example, you might choose Roboto as your heading font and Indie Flower as your body font. The configuration would look like this:
+
+```javascript
+const roboto = Roboto({
+ variable: "--heading-font",
+ weight: "500",
+ subsets: ["latin"],
+});
+
+const indieFlower = Indie_Flower({
+ variable: "--body-font",
+ weight: "400",
+ subsets: ["latin"],
+});
+```
+
+
+
+## Updating the Layout File
+
+If you decide to swap fonts, this can be easily done in the layout file. For instance, if you want to change the body font to Roboto and the heading font to Indie Flower, you can update the variables accordingly:
+
+```javascript
+export default async function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const isUserLoggedIn = await isAuthenticated(cookies());
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
+```
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Gitea.md b/Documentation/docs/How To/SC Gitea.md
new file mode 100644
index 0000000..74f1462
--- /dev/null
+++ b/Documentation/docs/How To/SC Gitea.md
@@ -0,0 +1,13 @@
+# How to Set Up Fonts in FastPocket Using Tailwind
+
+Setting up fonts in FastPocket can be a straightforward process if you follow a few key steps. This guide will walk you through how to configure fonts using the Tailwind config file and layout file, with a focus on using Google Fonts.
+
+[](https://youtu.be/azfwE-tf3UY)
+
+## Choosing a Font
+
+To start, you'll need to choose a font from Google Fonts. Visit [fonts.google.com](https://fonts.google.com) to browse the available fonts. You might want to select a font that is trending, new, or simply one that appeals to your design needs. Note that not all fonts may be available immediately.
+
+
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Mailersend.md b/Documentation/docs/How To/SC Mailersend.md
new file mode 100644
index 0000000..dc9b4be
--- /dev/null
+++ b/Documentation/docs/How To/SC Mailersend.md
@@ -0,0 +1,23 @@
+# How to Set Up Your Mail for Sending Emails
+
+Setting up your mail system is essential for sending out emails efficiently. This guide will walk you through the process of registering at mail send, setting up your domain, and configuring your SMTP server.
+
+[](https://youtu.be/gKs2PiAto8o)
+
+## Step 1: Registering and Setting Up Domain
+
+First, you need to register at mail send. This will enable you to send out emails. For demonstration purposes, we will list our company as "fast pocket" and use a temporary email. Skip the introduction and proceed to add your domain.
+
+
+
+## Step 2: Domain Management
+
+Next, go to your domain management. You can either log in or create an account. Note that your domain might be hosted differently depending on your provider. For this demonstration, we are using "pkon."
+
+
+
+## Step 3: Adding the Domain
+
+Add your domain to the system. If you have already set up some of this, you might have screenshots or records saved.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Pocketbase.md b/Documentation/docs/How To/SC Pocketbase.md
new file mode 100644
index 0000000..ffd8b92
--- /dev/null
+++ b/Documentation/docs/How To/SC Pocketbase.md
@@ -0,0 +1,19 @@
+# How To Use Pocket Base for Your App Development in 2024
+
+When building an app in 2024, one of the best backend solutions you can use is Pocket Base. This article will guide you through the benefits of Pocket Base, how to get started, and the best practices for hosting and deploying your application.
+
+[](https://youtu.be/rCP2Ujka15I)
+
+## Introduction to Pocket Base
+
+Pocket Base is an all-in-one backend solution that simplifies the process of building and managing your app's backend. It offers features like authentication, mailing, routes, CRUD API, and extensibility through hooks. The all-in-one nature of Pocket Base means you have everything you need to run a proper backend setup in one place, making it a highly recommended option for developers. 
+
+## Ease of Use and Documentation
+
+One of the standout features of Pocket Base is its ease of use, especially for beginners. When you first start using Pocket Base, the documentation makes it incredibly easy to find out how to use various features. The documentation is comprehensive and user-friendly, making it easy to find information on how to use various features. As you explore the docs, you'll see detailed routes, authentication methods, and data search capabilities. 
+
+## Key Features of Pocket Base
+
+Pocket Base comes with several out-of-the-box features that make it a powerful tool for app developers:
+
+- **User Authentication**: Easily set up authentication with providers like Google and Microsoft. Pocket Base includes user authentication out of the box, so you can hook up various identity providers and get them working seamlessly. 
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC SEO.md b/Documentation/docs/How To/SC SEO.md
new file mode 100644
index 0000000..e869123
--- /dev/null
+++ b/Documentation/docs/How To/SC SEO.md
@@ -0,0 +1,16 @@
+# How to Update SEO and Metadata for Your Website
+
+Ensuring your website's SEO and metadata are up-to-date is crucial for maintaining a high ranking on search engines like Google. This guide will walk you through the steps to update your main page, URLs, metadata for your apps page, blog section, and set up your sitemap.
+
+[](https://youtu.be/yLSNyYjGFUQ)
+
+## Updating the Main Page
+
+First, identify the main page of your website that needs updating. Make sure that the title reflects your current branding. In this example, we are updating from "Fast Pocket" to "Icon Camp."
+
+1. **Update the Main Page Title**
+ - Change the title to "Icon Camp."
+ - Remove any outdated elements from the page.
+
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Your App.md b/Documentation/docs/How To/SC Your App.md
new file mode 100644
index 0000000..ddac674
--- /dev/null
+++ b/Documentation/docs/How To/SC Your App.md
@@ -0,0 +1,26 @@
+# How to Build an App with Authenticated Routes
+
+Building an app can seem daunting, but with the right steps, you can create a functional and secure application. In this guide, we will walk you through the process of building an app using authenticated routes.
+
+[](https://youtu.be/rVzkkfgKDHQ)
+
+## Introduction to the App Building Process
+
+In this tutorial, we will cover the essential steps to build an app, focusing on creating authenticated routes for secure access. Authenticated routes ensure that only logged-in users can access certain parts of the app.
+
+## Signing In and Accessing the App
+
+To get started, you need to sign in to your account. Once you are signed in, you will have access to the app. This is crucial as the app is set up to be accessible only through authenticated routes.
+
+
+
+## Creating an Authenticated Route
+
+1. **Navigate to the Authenticated Section**: Go to the authenticated section in your app's settings.
+ 
+
+2. **Add the App**: Add your app to the authenticated route list.
+ 
+
+3. **Assign the Route to Logged-in Users**: In the navigation settings, assign the route to be accessible only if the user is logged in.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Stripe Branding Setup.md b/Documentation/docs/How To/Stripe Branding Setup.md
new file mode 100644
index 0000000..98ff58d
--- /dev/null
+++ b/Documentation/docs/How To/Stripe Branding Setup.md
@@ -0,0 +1,20 @@
+# How to Adjust Checkout Settings and Branding
+
+In this guide, we'll walk you through the process of adjusting your checkout settings and customizing the branding to match your business's aesthetic. Follow these steps to ensure your checkout process is both functional and visually appealing.
+
+[](https://youtu.be/OzWxLTXSHwM)
+
+## Step 1: Activate Settings
+
+First, ensure that all necessary settings are activated.
+
+## Step 2: Adjust Settings
+
+To adjust the settings, follow these steps:
+
+1. Go to "View More Products".
+ 
+2. Search for "Checkout".
+ 
+3. Navigate to "Settings" > "Payment" > "Checkout and Payment Links".
+ 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Stripe Manual Add.md b/Documentation/docs/How To/Stripe Manual Add.md
new file mode 100644
index 0000000..1a26a3b
--- /dev/null
+++ b/Documentation/docs/How To/Stripe Manual Add.md
@@ -0,0 +1,19 @@
+# How to Manually Add a One-Time Payment Product
+
+In this guide, we will walk you through the process of manually adding a one-time payment product. This is particularly useful for situations where you don't want to automate payments. Follow these steps to create and verify your product.
+
+[](https://youtu.be/9kuSfvf6hQA)
+
+## Creating a One-Time Payment Product
+
+First, navigate to the product creation section in your platform. Here, we will manually add a new product.
+
+
+
+1. **Enter Product Name**: Start by naming your product. In this example, we will call it "Launch Offer".
+
+
+
+2. **Set Payment Type**: Specify that this product is a one-time payment, which will be used to get started with the service.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Stripe Restricted.md b/Documentation/docs/How To/Stripe Restricted.md
new file mode 100644
index 0000000..36e2b4b
--- /dev/null
+++ b/Documentation/docs/How To/Stripe Restricted.md
@@ -0,0 +1,40 @@
+# How to Create and Configure a Restricted API Key for Fast Pocket
+
+Creating a restricted API key is crucial for ensuring the security and proper functionality of Fast Pocket. This guide will walk you through the steps to create a new restricted API key and configure it with the necessary permissions.
+
+[](https://youtu.be/3N2jtjBVxc8)
+
+## Accessing the Developer Portal
+
+To begin, navigate to the developer's portal. This is where you will create a new API key specifically for your Fast Pocket project.
+
+
+
+## Creating a New Restricted API Key
+
+Once you're in the developer's portal, follow these steps to create a new API key:
+
+1. Click on the option to create a new API key.
+2. Name the new API key. For example, you can name it `fast_pocket_test_demo_one`.
+
+
+
+## Assigning Permissions
+
+After naming your API key, you need to assign the appropriate permissions. It's important to ensure that the key has write permissions for most sections to maintain connectivity with Stripe.
+
+1. Assign write permissions to all necessary sections.
+2. Ensure that sections which don't require write access are left without it.
+
+
+
+The reason for assigning these permissions is to ensure that Fast Pocket can connect to Stripe without any issues. If you don't assign the correct permissions, you may encounter connectivity problems.
+
+## Troubleshooting Tips
+
+If you encounter any issues with Fast Pocket, make sure to check the following:
+
+1. Verify that you have created a restricted API key.
+2. Ensure that the API key has the correct permissions.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Stripe Setup.md b/Documentation/docs/How To/Stripe Setup.md
new file mode 100644
index 0000000..fdc646c
--- /dev/null
+++ b/Documentation/docs/How To/Stripe Setup.md
@@ -0,0 +1,21 @@
+# How to Set Up Stripe for Fast Pocket Lance
+
+Setting up Stripe is an essential step to ensure smooth transactions for your Fast Pocket Lance operations. This guide will walk you through the process of creating and activating your Stripe account, configuring necessary details, and understanding the different modes of operation.
+
+[](https://youtu.be/wgI5SzOYQMw)
+
+## Creating a Stripe Account
+
+To get started with Stripe, follow these steps:
+
+1. Open a new tab in your browser and search for Stripe. 
+2. Click on the sign-up button on the Stripe homepage. 
+3. Enter your email address, full name, country, and create a password. 
+4. Click on the "Create Account" button to finalize the creation of your Stripe account.
+
+## Activating Your Stripe Account
+
+Once your account is created, you need to activate it:
+
+1. Click on the "Activate Account" button. 
+2. Enter the type of company and business structure you are using. 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Stripe fixtures.md b/Documentation/docs/How To/Stripe fixtures.md
new file mode 100644
index 0000000..0d40b55
--- /dev/null
+++ b/Documentation/docs/How To/Stripe fixtures.md
@@ -0,0 +1,27 @@
+# How to Set Up Stripe for Product Management
+
+In this guide, we'll walk you through setting up Stripe to manage your products. We'll cover installing the Stripe CLI, creating products, configuring product fixtures, and switching between test and live modes.
+
+[](https://youtu.be/jUsVcpAc7nE)
+
+
+## Setting Up the Stripe CLI
+
+First, we need to install the Stripe CLI. This tool allows you to manage your Stripe account directly from the command line.
+
+1. **Install the Stripe CLI**
+ - Run the following command to install the Stripe CLI using Brew:
+ ```bash
+ brew install stripe/stripe-cli/stripe
+ ```
+ 
+
+2. **Log In to Stripe**
+ - After installation, log in to Stripe by running:
+ ```bash
+ stripe login
+ ```
+ - This command will generate a page for you to authenticate in your browser.
+ 
+ - Allow access to complete the login process.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Theme Change.md b/Documentation/docs/How To/Theme Change.md
new file mode 100644
index 0000000..27373db
--- /dev/null
+++ b/Documentation/docs/How To/Theme Change.md
@@ -0,0 +1,29 @@
+# How to Style Your Fast Pocket App
+
+In this tutorial, we'll walk you through the process of styling your Fast Pocket app, from running the app to updating the color scheme and background. By the end of this guide, you'll have a visually appealing app that aligns with your brand.
+
+[](https://youtu.be/PGr17lU5Sbg)
+
+## Running the App
+
+First, switch to the front end of your project. To run the app, use the following command:
+
+```bash
+npm run dev
+```
+
+This will load up your Fast Pocket app.
+
+
+
+## Updating Package.json
+
+Next, we need to update the `package.json` file to reflect our new project name, "icon.camp". Open `package.json` and change the name field to "icon.camp". After making this change, restart the app to see the new name in effect.
+
+
+
+## Generating a Color Scheme
+
+To create a cohesive color scheme, we'll use the Daisy UI theme generator. Navigate to the Daisy UI theme generator and randomize the colors until you find a primary and secondary color that suits your brand.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/domain.md b/Documentation/docs/How To/domain.md
new file mode 100644
index 0000000..3853251
--- /dev/null
+++ b/Documentation/docs/How To/domain.md
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/logo.md b/Documentation/docs/How To/logo.md
new file mode 100644
index 0000000..9a73527
--- /dev/null
+++ b/Documentation/docs/How To/logo.md
@@ -0,0 +1,34 @@
+# How to Design a Logo: A Step-by-Step Guide
+
+Creating a logo is a crucial step in building your brand's identity. In this tutorial, we will walk you through the process of designing a logo from start to finish, using a template and various tools to create a professional and cohesive design.
+
+[](http://www.youtube.com/watch?v=V5QmEymvv-I "Video Title")
+
+
+## Introduction to Logo Design
+Logo design involves creating a visual symbol that represents your business and becomes a key part of your brand identity. Before starting any logo design, it's essential to have a structured approach. This tutorial will guide you through the steps to create a logo that effectively represents your brand.
+
+## Starting with a Template
+The first step in designing a logo is to start with a template. Templates provide a structured format that can save time and ensure consistency. You can find the template under the Fast Pocket Docs. Simply copy and paste the format from there.
+
+
+
+## Template Breakdown
+The template includes several key components:
+
+- **Combination Mark**: An icon plus text.
+- **Word Mark**: Text only.
+- **Icon**: Icon only.
+- **Color Palette**: A set of primary and secondary colors.
+
+
+
+## Choosing an Icon
+Selecting the right icon is crucial. You can use tools like SVG repo or Fluent Icons to find icons. For this tutorial, we'll use Fluent Icons to find a tent icon.
+
+
+
+## Modifying the Icon
+Once you've selected an icon, you may need to resize and adjust it. Expand the frame to fit the icon and ensure it maintains its aspect ratio. Combine outlined and filled icons to create a unique look.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row I/Background + image change.md b/Documentation/docs/NEW/Row I/Background + image change.md
new file mode 100644
index 0000000..bc698a6
--- /dev/null
+++ b/Documentation/docs/NEW/Row I/Background + image change.md
@@ -0,0 +1,41 @@
+
+Nenhum selecionado
+
+Pular para o conteúdo
+Como usar o Gmail com leitores de tela
+2 de 8.520
+Fastpocket
+Caixa de entrada
+
+Cathy Mae Zamora
+Anexos
+8 de jul. de 2024, 21:24 (há 2 dias)
+para mim
+
+https://docs.google.com/document/d/1mzhQV8T4ghapNDZmNUYnfisRO2phf7chyaQTX_3C0Qs/edit?usp=sharing
+
+ 23 anexos
+ • Anexos verificados pelo Gmail
+# How to Generate and Replace Backgrounds Using Haky
+
+In this tutorial, we'll guide you through the process of generating a custom background using the Haky tool (hay.app), replacing an existing background image, and updating references in your code. Follow these steps to create and implement your new background effectively.
+
+[](https://youtu.be/PjULTUBBt_s)
+
+## 1. Introduction to Haky
+
+Haky is a powerful background generator tool available at hay.app. This tool allows you to create customized backgrounds with ease.
+
+## 2. Generating a Background
+
+To get started with Haky, follow these steps:
+
+1. Open the Haky application at hay.app.
+2. Input your desired primary color.
+ 
+3. Hit the generate button to create your background.
+ 
+4. Adjust the dimensions to 19 by 6.
+ 
+5. Optionally, you can add a gradient to your background based on your preference.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row I/Business Analyst Sample.md b/Documentation/docs/NEW/Row I/Business Analyst Sample.md
new file mode 100644
index 0000000..9cbcf0a
--- /dev/null
+++ b/Documentation/docs/NEW/Row I/Business Analyst Sample.md
@@ -0,0 +1,36 @@
+
+Nenhum selecionado
+
+Pular para o conteúdo
+Como usar o Gmail com leitores de tela
+2 de 8.520
+Fastpocket
+Caixa de entrada
+
+Cathy Mae Zamora
+Anexos
+8 de jul. de 2024, 21:24 (há 2 dias)
+para mim
+
+https://docs.google.com/document/d/1mzhQV8T4ghapNDZmNUYnfisRO2phf7chyaQTX_3C0Qs/edit?usp=sharing
+
+ 23 anexos
+ • Anexos verificados pelo Gmail
+# How to Create a Simple Login Flow for IL Loal
+
+Creating a secure and user-friendly login flow is essential for any application. In this guide, we'll walk you through the steps to set up a basic login flow for IL loal, including email and password authentication, alternative login options, and error handling.
+
+[](https://youtu.be/iQ2lWjIn5po)
+
+## Basic Login Flow
+
+To begin, we'll create a login form that requires an email address and a password. The email address should be validated to ensure it is in a proper format, which can be achieved using Regex.
+
+
+
+
+The password must adhere to Pocket Base's guidelines, which specify that it should be between 8 to 16 characters.
+
+](https://youtu.be/YfnQhNgiz8c)
+
+## Accessing the Email Directory
+
+To begin, navigate to the fast pocket directory. Here, you will find the first purchase email and the sign-up email.
+
+
+
+### Example Text Update
+
+```mjml
+
+ Thanks for purchasing from Icon Camp!
+
+```
+
+## Hosting the Icon File
+
+Unfortunately, you might not have the icon file hosted yet. We will cover how to host your icon file. This will be discussed in more detail in another video.
+
+
+
+## Conclusion
+
+In summary, you can edit the text in the MJML file and copy it across to the HTML file to update it. This tutorial has provided a high-level overview of setting up and customizing your emails. For further details on hosting the icon file, please refer to our next video.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row I/Fly Deploy.md b/Documentation/docs/NEW/Row I/Fly Deploy.md
new file mode 100644
index 0000000..20d030a
--- /dev/null
+++ b/Documentation/docs/NEW/Row I/Fly Deploy.md
@@ -0,0 +1,64 @@
+# How to Deploy a Self-Hosted Backend on fly.io
+
+Deploying your self-hosted backend on fly.io can be a quick and efficient process. This guide will walk you through the steps required to get your backend up and running, using the example of setting up a backend for Fast Pocket. Fly.io is a great platform for hosting backends because it allows you to set up your backend swiftly and efficiently.
+
+[](https://youtu.be/1rd9dm0ncUk)
+
+## Setting Up Secrets
+
+Before we begin deployment, it's crucial to set up a secret for our Stripe key, which has been previously generated. This ensures that our transactions are secure.
+
+1. **Set up the Stripe key**:
+ ```bash
+ fly secrets set STRIPE_SECRET_KEY=your_stripe_key
+ ```
+
+
+
+## Configuring the fly.toml File
+
+The `fly.toml` file contains all the configuration settings necessary for deploying to fly.io. Here are the key settings you need to modify:
+
+1. **App Name**: Change the app name to your desired name, e.g., `icon.camp`.
+2. **Primary Region**: Set the primary region to the closest region to where your app will be deployed. For example, if you want your app to be based in Australia, you might choose the region `syd` for Sydney.
+3. **Host**: Ensure the host is set to your app's name, e.g., `icon.camp.fly.dev`.
+4. **Port**: Maintain the same port used for PocketBase, which is `8090`.
+5. **Stripe Billing and Cancel URLs**: Set the URLs for Stripe billing and cancel actions. For instance:
+ - `STRIPE_BILLING_RETURN_URL`: `https://icon.camp/account`
+ - `STRIPE_CANCEL_URL`: `https://icon.camp/pricing`
+ - `STRIPE_SUCCESS_URL`: `https://icon.camp/account`
+6. **Mount Source and Destination**: Configure the source and destination for your fly.io volume. For example:
+ - `source`: `data_icon_camp`
+ - `destination`: `/app/bin/pb_data`
+
+
+
+## Deploying the Application
+
+To deploy your application, follow these steps:
+
+1. **Run the fly launch command**:
+ ```bash
+ fly launch --no-deploy
+ ```
+ This command initializes the deployment process.
+
+
+
+2. **Check for successful configuration**: Ensure the configuration is valid and matches the settings in your `fly.toml` file.
+
+3. **Attach a credit card if necessary**: If the deployment fails, it may be due to not having a credit card attached to your fly.io account.
+
+
+
+## Creating and Mounting Volumes
+
+Next, create and mount the necessary volumes for your application:
+
+1. **Create a volume**:
+ ```bash
+ fly volumes create data_icon_camp --size 3
+ ```
+ This command creates a 3GB volume for storing data.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row I/domain.md b/Documentation/docs/NEW/Row I/domain.md
new file mode 100644
index 0000000..3853251
--- /dev/null
+++ b/Documentation/docs/NEW/Row I/domain.md
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row II/Frontend to Backend.md b/Documentation/docs/NEW/Row II/Frontend to Backend.md
new file mode 100644
index 0000000..e37d039
--- /dev/null
+++ b/Documentation/docs/NEW/Row II/Frontend to Backend.md
@@ -0,0 +1,22 @@
+# How to Deploy and Style Your Application
+
+Deploying and styling your application can seem daunting, but with a clear step-by-step process, it becomes much more manageable. This guide will walk you through the steps to disconnect from Vercel, connect to a new repository, set up environment variables, create a new deployment, and finally, make changes to style your application.
+
+[](https://youtu.be/UTz5pDUicEc)
+
+## Step 1: Disconnect from Vercel
+To start, you need to disconnect your current setup from Vercel. This ensures that you can connect to the new repository without any conflicts.
+
+
+Navigate to your Vercel project settings and locate the "Connected Git Repository" section. Click the "Disconnect" button next to your current repository to disconnect it.
+
+## Step 2: Connect to the New Repository
+Next, connect your application to the new repository. This will be your core repository for launching the application.
+
+
+In the same "Connected Git Repository" section, search for and select your new repository. Click "Connect" to establish the connection.
+
+## Step 3: Set Up Environment Variables
+Before proceeding, ensure that all required environment variables are set up. This includes variables for tools like PostHog and any other necessary configurations.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row II/Pocketbase.md b/Documentation/docs/NEW/Row II/Pocketbase.md
new file mode 100644
index 0000000..2035c75
--- /dev/null
+++ b/Documentation/docs/NEW/Row II/Pocketbase.md
@@ -0,0 +1,34 @@
+
+Nenhum selecionado
+
+Pular para o conteúdo
+Como usar o Gmail com leitores de tela
+2 de 8.520
+Fastpocket
+Caixa de entrada
+
+Cathy Mae Zamora
+Anexos
+8 de jul. de 2024, 21:24 (há 2 dias)
+para mim
+
+https://docs.google.com/document/d/1mzhQV8T4ghapNDZmNUYnfisRO2phf7chyaQTX_3C0Qs/edit?usp=sharing
+
+ 23 anexos
+ • Anexos verificados pelo Gmail
+# How to Integrate Stripe with Pocket Base Using Fly.io
+
+In this tutorial, we will walk you through the steps to integrate Stripe with Pocket Base using Fly.io. This integration will ensure that your products automatically synchronize with Pocket Base whenever there are updates or new events in Stripe.
+
+[](https://www.youtube.com/watch?v=Q0yRtC9jr_M "Video Title")
+
+
+## Setting Up Web Hook Endpoint
+
+First, we need to set up a web hook endpoint in Pocket Base. Follow these steps:
+
+1. Navigate to your instance of Pocket Base on Fly.io. 
+2. Click on "Add Endpoint" to create a new endpoint. 
+3. Name your endpoint. In this example, we will call it "Stripe Endpoint" or "Fast Pocket Stripe Endpoint". 
+4. Select all relevant events that you want to track. Fast Pocket will only pick up the relevant ones. 
+5. Click on "Add Endpoint" to finalize the creation. 
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row II/Posthog Analytics.md b/Documentation/docs/NEW/Row II/Posthog Analytics.md
new file mode 100644
index 0000000..4483163
--- /dev/null
+++ b/Documentation/docs/NEW/Row II/Posthog Analytics.md
@@ -0,0 +1,18 @@
+# How to Connect Your Backend to Vercel with PostHog and Google Analytics
+
+In this tutorial, we will guide you through the process of connecting your backend to a Vercel instance, integrating PostHog for product analytics, and setting up Google Analytics. These steps are crucial for tracking user interactions and gaining insights into your application's performance.
+
+[](https://youtu.be/20-sBCbvEEA)
+
+## Setting Up PostHog
+
+First, we need to set up PostHog, which is a powerful product analytics tool.
+
+1. **Navigate to PostHog**: Go to [posthog.com](https://posthog.com) and click on "Get Started".
+ 
+
+2. **Create an Account**: Use a temporary email to create an account. This is useful if you do not plan to keep the account permanently.
+ 
+
+3. **Verify Email Address**: PostHog will send a verification email. Click the link in the email to verify your address.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row II/SC Components.md b/Documentation/docs/NEW/Row II/SC Components.md
new file mode 100644
index 0000000..c192268
--- /dev/null
+++ b/Documentation/docs/NEW/Row II/SC Components.md
@@ -0,0 +1,38 @@
+
+Nenhum selecionado
+
+Pular para o conteúdo
+Como usar o Gmail com leitores de tela
+2 de 8.520
+Fastpocket
+Caixa de entrada
+
+Cathy Mae Zamora
+Anexos
+8 de jul. de 2024, 21:24 (há 2 dias)
+para mim
+
+https://docs.google.com/document/d/1mzhQV8T4ghapNDZmNUYnfisRO2phf7chyaQTX_3C0Qs/edit?usp=sharing
+
+ 23 anexos
+ • Anexos verificados pelo Gmail
+# Getting Started with Fast Pocket: Customizing Your Site
+
+Fast Pocket is a powerful tool that allows you to quickly set up and customize your website. This tutorial will guide you through the initial steps to get your site up and running, focusing on customization and component integration.
+
+[](https://youtu.be/af3NjGQ_4qg)
+
+## Customizing Your Site
+
+One of the first tasks when starting with Fast Pocket is customizing your site. Customization is essential to ensure that your site meets your specific needs and aesthetic preferences.
+
+All the components you will need are located in one place and are set up with light and dark mode theming. This setup ensures that your site can easily switch between themes. The components are aligned with Daisy UI, making it straightforward to style them using Tailwind classes.
+
+
+
+
+## Using Example Components
+
+Fast Pocket provides several example components that you can use as a starting point. You can simply copy the code of these components and paste it into your actual project. These components are designed to work out of the box, saving you time and effort.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row II/logo.md b/Documentation/docs/NEW/Row II/logo.md
new file mode 100644
index 0000000..2cf7f88
--- /dev/null
+++ b/Documentation/docs/NEW/Row II/logo.md
@@ -0,0 +1,52 @@
+
+Nenhum selecionado
+
+Pular para o conteúdo
+Como usar o Gmail com leitores de tela
+2 de 8.520
+Fastpocket
+Caixa de entrada
+
+Cathy Mae Zamora
+Anexos
+8 de jul. de 2024, 21:24 (há 2 dias)
+para mim
+
+https://docs.google.com/document/d/1mzhQV8T4ghapNDZmNUYnfisRO2phf7chyaQTX_3C0Qs/edit?usp=sharing
+
+ 23 anexos
+ • Anexos verificados pelo Gmail
+# How to Design a Logo: A Step-by-Step Guide
+
+Creating a logo is a crucial step in building your brand's identity. In this tutorial, we will walk you through the process of designing a logo from start to finish, using a template and various tools to create a professional and cohesive design.
+
+[](http://www.youtube.com/watch?v=V5QmEymvv-I "Video Title")
+
+
+## Introduction to Logo Design
+Logo design involves creating a visual symbol that represents your business and becomes a key part of your brand identity. Before starting any logo design, it's essential to have a structured approach. This tutorial will guide you through the steps to create a logo that effectively represents your brand.
+
+## Starting with a Template
+The first step in designing a logo is to start with a template. Templates provide a structured format that can save time and ensure consistency. You can find the template under the Fast Pocket Docs. Simply copy and paste the format from there.
+
+
+
+## Template Breakdown
+The template includes several key components:
+
+- **Combination Mark**: An icon plus text.
+- **Word Mark**: Text only.
+- **Icon**: Icon only.
+- **Color Palette**: A set of primary and secondary colors.
+
+
+
+## Choosing an Icon
+Selecting the right icon is crucial. You can use tools like SVG repo or Fluent Icons to find icons. For this tutorial, we'll use Fluent Icons to find a tent icon.
+
+
+
+## Modifying the Icon
+Once you've selected an icon, you may need to resize and adjust it. Expand the frame to fit the icon and ensure it maintains its aspect ratio. Combine outlined and filled icons to create a unique look.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row III/SC Fonts.md b/Documentation/docs/NEW/Row III/SC Fonts.md
new file mode 100644
index 0000000..8afb513
--- /dev/null
+++ b/Documentation/docs/NEW/Row III/SC Fonts.md
@@ -0,0 +1,69 @@
+# How to Set Up a Font in Fast NPocket Using Tailwind
+
+Setting up a font in Fast NPocket involves configuring the Tailwind CSS framework and updating the layout files. This guide will walk you through the process step-by-step.
+
+[](https://youtu.be/QrXrqNnSBM4)
+
+## Choosing a Font
+
+To begin, visit [Google Fonts](https://fonts.google.com) to select a font that suits your project. Keep in mind that not all fonts are available in the Next library, so you might need to experiment to find one that works.
+
+
+
+## Setting Up Tailwind Config
+
+Once you've chosen your font, you'll need to define it in the Tailwind config file. For example, you might choose Roboto as your heading font and Indie Flower as your body font. The configuration would look like this:
+
+```javascript
+const roboto = Roboto({
+ variable: "--heading-font",
+ weight: "500",
+ subsets: ["latin"],
+});
+
+const indieFlower = Indie_Flower({
+ variable: "--body-font",
+ weight: "400",
+ subsets: ["latin"],
+});
+```
+
+
+
+## Updating the Layout File
+
+If you decide to swap fonts, this can be easily done in the layout file. For instance, if you want to change the body font to Roboto and the heading font to Indie Flower, you can update the variables accordingly:
+
+```javascript
+export default async function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const isUserLoggedIn = await isAuthenticated(cookies());
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
+```
+
+
\ No newline at end of file
diff --git a/Documentation/docs/NEW/Row III/SC Gitea.md b/Documentation/docs/NEW/Row III/SC Gitea.md
new file mode 100644
index 0000000..d1a321d
--- /dev/null
+++ b/Documentation/docs/NEW/Row III/SC Gitea.md
@@ -0,0 +1,99 @@
+# How to Set Up Fonts in FastPocket Using Tailwind
+
+Setting up fonts in FastPocket can be a straightforward process if you follow a few key steps. This guide will walk you through how to configure fonts using the Tailwind config file and layout file, with a focus on using Google Fonts.
+
+[](https://youtu.be/azfwE-tf3UY)
+
+## Choosing a Font
+
+To start, you'll need to choose a font from Google Fonts. Visit [fonts.google.com](https://fonts.google.com) to browse the available fonts. You might want to select a font that is trending, new, or simply one that appeals to your design needs. Note that not all fonts may be available immediately.
+
+
+
+
+
+## Setting Variables in Tailwind Config
+
+Once you've selected your font, you need to set the font variables in the Tailwind config file. For example, you might choose Roboto for your heading font and Indie Flower for your body font.
+
+```javascript
+module.exports = {
+ theme: {
+ extend: {
+ fontFamily: {
+ heading: ['Roboto', 'sans-serif'],
+ body: ['Indie Flower', 'cursive'],
+ },
+ },
+ },
+}
+```
+
+
+
+## Swapping Fonts
+
+If you decide to swap the fonts for body and heading, you can do so easily. For instance, if you want Roboto as your body font and Indie Flower as your heading font, update the Tailwind config accordingly.
+
+```javascript
+module.exports = {
+ theme: {
+ extend: {
+ fontFamily: {
+ heading: ['Indie Flower', 'cursive'],
+ body: ['Roboto', 'sans-serif'],
+ },
+ },
+ },
+}
+```
+
+
+
+
+## Accessing Fonts by Font Family
+
+In your layout file, you can access the fonts by their font family. For example, if you have set up Roboto as your body font, you can use it like this:
+
+```html
+
+
+