Merge pull request #4 from clutch-creator/chore/change-Basics-to-Guid…

…es-and-remove-content

changed Basiscs to Guides

docs/pages/_meta.json

@@ -1,13 +1,8 @@
 {
-  "-- Clutch Intro": {
+  "index": "Getting Started",
+  "-- Guides": {
     "type": "separator",
-    "title": "Clutch Intro"
+    "title": "Guides"
   },
-  "index": "Introduction",
-  "-- Basics": {
-    "type": "separator",
-    "title": "Basics"
-  },
-  "bar": "Application bar",
-  "canvas": "Canvas and Frames"
+  "comingSoon": "Coming Soon"
 }

docs/pages/comingSoon.mdx

@@ -0,0 +1,2 @@
+## Sorry for the mess
+The team is working hard on new documentation. Join our community and remember to start us on GitHub to keep up with the latest news!

docs/pages/index.mdx

@@ -1,26 +1,61 @@
-# Welcome to Clutch
+Welcome to Clutch, the Next site builder! This guide will take you from downloading the tool to publishing your first high-performant website.
 
-## What is Clutch?
+Remember to star our GitHub repo https://github.com/clutch-creator/clutch \
+Join us on Discord [https://discord.gg/whfbTHMaW2](https://discord.gg/7xAQBJqR) \
+GitHub Docs https://github.com/clutch-creator/clutch/tree/main/docs
 
-Clutch is an innovative website builder that combines the power of NextJS with a visual interface, enabling you to go from prototype to production in record time. With Clutch, you can design websites by visualizing components as blocks rather than lines of code, which saves you time and effort.
+## Installation:
 
-Clutch's componentization approach allows you to reuse the same features throughout your project, eliminating the need to rebuild them from scratch. This not only saves time but also helps maintain consistency and ensures that your website has a cohesive look and feel.
+1. Download the latest version of the application here https://desktop.clutch.io/. 
+2. Then create your account.
 
-In addition to its visual interface, Clutch offers the option to code when necessary, allowing you to connect your website to a backend and perform database operations as needed. This means that even though you're using a visual builder, you're not limited to drag-and-drop components.
+You are now ready to build your first high-performant website.
+## Quick Start Guide:
 
-Clutch allows you to seamlessly integrate your website with your preferred backend technology, such as Supabase, Prismic, Node.js, Python, Ruby on Rails, or any other backend system. This makes it easy to build complex web applications with advanced functionality while maintaining the benefits of a visual website builder.
 
-With Clutch, you have the freedom to choose the level of control you want over your website development process. Whether you prefer a visual approach or want to dive into the code, Clutch has you covered. Say goodbye to the hassle of coding and hello to the ease of Clutch. Build beautiful, responsive websites in a fraction of the time it takes with traditional web development methods. With Clutch, you can bring your ideas to life quickly and easily, no matter your skill level.
 
-<br />
-<iframe
-  width="100%"
-  height="500"
-  src="https://www.youtube.com/embed/-S69PFH-aJE"
-  title="YouTube video player"
-  frameBorder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-  allowFullScreen
-></iframe>
+### Creating a project
 
-With Clutch, you can build various web-based projects such as portfolios, e-commerce sites, marketplaces, landing pages, dashboards, customer relations managers, and design systems. Clutch is responsive and works with any backend.
+1. Select the Minimal template from the templates section in the left-hand column to create a new project.
+2. Once you have a new project open, it's time to add some content to your website.
+3. Select the "Home /" page in the pages section.
+4. Select the content section of the page in the composition panel (this is where we want to add per-page content).
+5. Select the Text component from the toolbar.
+6. Now change the properties of your text component using the properties panel. Set your tag to an h1 and change the text to your preferred text.
+
+You have now created your first header text.
+
+### Adding additional pages
+
+1. Select the plus sign(+) next to the pages section. This will create a new site page. You will want to change the default path from "/page" to one that will better fit your needs, for example, "/contact."
+2. Add some header text to the contact page as you added it to the home page.
+
+Now that your site has two pages, add a navigation bar to navigate between them. 
+
+### Adding navigation
+
+1. Select the home page and then click on the layout section of the home page. Any components added to the layout will be available to all sub-routes. Placing the navigation will make it available on the contact page or any other sub-routes you add.
+2. Add a block to the layout above the children slot so that the navigation appears above the content.
+3. Add two links to the block (link components are in the toolbar).
+4. Each link will have a nested text component that you can change to match your page routes, for example, home and contact.
+5. On the link component itself, you will need to specify the href property to the page that you want that link to navigate to, for example, "/" and "/contact."
+
+You now have created a way to navigate between your pages. Select the play button in the toolbar to interact with the links on the page.
+
+### Styling the Navigation bar
+
+1. Select the block component that has the navigation links.
+2. Then using the container properties, set the direction to row (->), justify-content to end,
+3. Next, add a gap by selecting the token icon from the gap property and choosing the space 8 (2rem).
+4. You can add some padding by selecting the token picker in padding and choosing space 4 (1rem).
+5. If you want to change the color of all the links, you can add a rule by selecting the plus button (+) in the styles section of the block.
+6. Now change the rule to the letter "a." This will allow you to target and add styles to any of the links ("a" for anchor HTML tag) in the block.
+7. Add a color property to the rule you created and add your own RGB, Hex, or HSV, or you can use the token picker to select from one of the color values from the theme.
+
+### Adding page title, description, and other meta tags
+
+1. 
+
+## Publishing
+
+You are now ready to make your first publication. Select the publish tab in the toolbox at the bottom of the app. Create a destination (+). Give your destination a name (Staging, Production, MySite, etc.). Select Clutch Hosting for your type. Then select the Create Destination button. Once your destination has been created, you can hit publish!