feat: add initial docs

docs/.gitignore

@@ -0,0 +1,18 @@
+.DS_Store
+.next/
+node_modules/
+*.log
+dist/
+.turbo/
+out/
+# Theme styles
+packages/nextra-theme-*/style.css
+
+# Stork related
+*/**/public/*.st
+*/**/public/*.toml
+
+.vercel
+.idea/
+.eslintcache
+.env

docs/README.md

@@ -0,0 +1,3 @@
+# clutch-docs
+
+Clutch docs

docs/components/HeaderLogo.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+export const HeaderLogo = () => (
+  <svg
+    width="69,07"
+    height="16"
+    viewBox="0 0 216 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M134.769 41.6858C134.029 41.9251 133.173 42.0448 132.22 42.0448C128.833 42.0448 126.892 39.762 126.892 35.7769C126.892 33.9772 126.927 25.5638 126.941 21.5078L126.945 20.9803C126.949 19.9297 127.805 19.0742 128.851 19.0742H128.856L133.727 19.0831C133.975 19.0831 134.21 18.9856 134.388 18.8082C134.565 18.6309 134.667 18.3916 134.667 18.1345V15.1734C134.667 14.9207 134.569 14.6813 134.388 14.4996C134.21 14.3223 133.975 14.2248 133.727 14.2248H128.63C127.668 14.2248 126.887 13.4402 126.887 12.4738V3.51075C126.887 3.01428 126.488 2.6109 125.996 2.6109H125.132C124.764 2.6109 124.427 2.85027 124.294 3.20046C121.311 11.1972 112.915 14.7567 110.411 15.6565C110.038 15.7895 109.786 16.153 109.786 16.552V18.1123C109.786 18.6398 110.211 19.0653 110.73 19.0653H113.048C113.992 19.0653 114.764 19.8366 114.764 20.7897V37.98C114.764 40.6973 115.557 49.5584 125.753 49.5584C131.302 49.5584 134.928 45.4581 136.232 43.6982C136.533 43.2904 136.569 42.7363 136.325 42.2842C136.028 41.7478 135.367 41.4907 134.769 41.6858Z"
+      fill="var(--color-1, #fff)"
+    />
+    <path
+      d="M154.77 17.3765C158.338 17.3765 159.247 22.1018 159.544 23.6577C160.009 26.0691 162.039 27.625 164.721 27.625C168.077 27.625 170.329 25.5416 170.329 22.4387C170.329 16.02 161.219 13.6884 155.102 13.6884C143.856 13.6884 137.792 22.9396 137.792 31.6455C137.792 43.4367 146.808 49.6027 155.718 49.6027C163.83 49.6027 168.387 43.849 169.969 41.3755C170.302 40.8568 170.2 40.1609 169.735 39.7619C169.349 39.4295 168.804 39.3807 168.374 39.6378C167.234 40.3205 164.796 41.4686 161.281 41.4686C158.511 41.4686 149.472 40.5199 149.472 28.3032C149.477 25.7411 149.858 17.3765 154.77 17.3765Z"
+      fill="var(--color-1, #fff)"
+    />
+    <path
+      d="M39.2117 35.706C36.4589 37.8204 31.7026 40.0767 26.6004 40.0767C16.6843 40.0767 13.014 30.892 12.8854 23.0282C12.8234 19.1451 14.1931 11.4853 18.1383 7.47365C19.774 5.81136 21.6579 4.96914 23.7457 4.96914C23.7502 4.96914 23.7502 4.96914 23.7546 4.96914C26.1128 4.96914 28.8213 5.41685 28.8745 8.87441C28.8966 10.2131 28.5952 10.8514 28.3071 11.4631C28.0101 12.097 27.7264 12.6999 27.753 14.207C27.8017 17.3543 30.6032 19.881 34.012 19.881C34.0475 19.881 34.0874 19.881 34.1228 19.881C36.2506 19.8455 38.0148 19.1097 39.2338 17.7488C40.4395 16.4012 41.0601 14.504 41.0247 12.2655C40.9582 8.18733 37.4208 0.576261 24.5968 0.576261C24.4239 0.576261 24.2466 0.576259 24.0693 0.580692C17.5931 0.682645 11.5423 3.28911 7.02976 7.91249C2.38422 12.6733 -0.111431 19.1274 0.00382062 26.0913C0.238757 40.5997 9.16635 50.1878 22.1544 49.9972C35.1114 49.7889 39.3934 41.3888 41.2197 37.8027L41.4413 37.3683C41.7029 36.8629 41.6009 36.2423 41.1887 35.8301C40.6612 35.2937 39.8145 35.245 39.2117 35.706Z"
+      fill="var(--color-1, #fff)"
+    />
+    <path
+      d="M62.2488 46.5707C59.6866 45.8127 59.2699 43.2062 59.2566 43.0954L59.2478 43.0023C59.2478 41.3888 59.2699 3.4221 59.2832 2.67739C59.2965 1.87063 58.9641 1.10819 58.3657 0.59399C57.9135 0.208339 57.3506 0 56.7743 0C56.6413 0 56.5039 0.0132991 56.3709 0.035463L46.0337 1.60023C45.1649 1.75094 44.5266 2.54441 44.5266 3.48859C44.5266 4.29978 44.961 4.978 45.6126 5.2218C47.5453 5.95764 48.1215 7.81498 48.2501 8.36464L48.2678 8.51092V42.7629C48.2678 44.4385 46.8626 45.7949 44.3093 46.5751C44.0079 46.6682 43.7952 46.9741 43.7952 47.3242V48.8048C43.7952 49.2259 44.1143 49.5717 44.5088 49.5717H61.9429C62.5369 49.5717 63.0245 49.0575 63.0245 48.4236V47.67C63.0245 47.1602 62.7053 46.7081 62.2488 46.5707Z"
+      fill="var(--color-1, #fff)"
+    />
+    <path
+      d="M215.392 46.3801C213.043 45.5024 211.748 44.0883 211.748 42.4039V27.195C211.748 22.1505 210.259 13.6884 200.29 13.6884C195.684 13.6884 190.928 16.45 187.652 21.2507L187.226 21.8757C187.235 12.3231 187.244 3.07634 187.248 2.71285C187.266 1.90609 186.916 1.14365 186.295 0.629453C185.826 0.243802 185.24 0.035463 184.642 0.035463C184.5 0.035463 184.363 0.0487621 184.221 0.0709259L173.498 1.63569C172.598 1.78641 171.933 2.57987 171.933 3.52405C171.933 4.33525 172.385 5.01346 173.059 5.25727C175.067 5.9931 175.661 7.85043 175.799 8.4001L175.816 8.54639V42.7984C175.816 44.474 174.358 45.8304 171.707 46.6106C171.392 46.7037 171.175 47.0095 171.175 47.3597V48.8403C171.175 49.2614 171.508 49.6071 171.915 49.6071H190.001C190.617 49.6071 191.123 49.0929 191.123 48.459V47.7055C191.123 47.1957 190.79 46.7436 190.316 46.6061C187.656 45.8481 187.226 43.2417 187.213 43.1309L187.204 43.0378C187.204 42.3418 187.209 34.9391 187.213 26.6631C187.661 25.5106 190.072 19.9519 194.891 19.9519C198.22 19.9519 200.369 22.7135 200.369 26.9823V47.0716C200.369 48.4502 201.491 49.5717 202.87 49.5717H215.122C215.516 49.5717 215.84 49.2436 215.84 48.8403V47.0849C215.853 46.7657 215.667 46.4865 215.392 46.3801Z"
+      fill="var(--color-1, #fff)"
+    />
+    <path
+      d="M108.186 46.5574C106.373 46.5352 104.914 45.068 104.905 43.255V42.8073L104.981 16.3702C104.985 15.1246 103.974 14.1095 102.729 14.1095H90.6274C90.0068 14.1095 89.497 14.6104 89.497 15.2221V16.0777C89.497 16.4988 89.7718 16.88 90.1841 16.9819C92.9723 17.669 93.42 20.2755 93.4377 20.3819L93.4466 20.475L93.42 36.4551L93.3801 36.557C92.9457 37.6519 90.5343 43.1176 85.6981 43.1176C82.3691 43.1176 80.2192 41.1893 80.2192 37.0225V16.5431C80.2192 15.2 79.0977 14.1051 77.7191 14.1051H65.9368C65.2808 14.1051 64.7489 14.637 64.7489 15.293V16.5342C64.7489 16.8401 64.935 17.1149 65.2099 17.2169C67.5592 18.0724 68.8536 19.451 68.8536 21.0956V36.8186C68.8536 41.739 70.5558 49.9928 80.5251 49.9928C87.1033 49.9928 91.3854 44.9705 92.693 43.1973C92.8969 42.9225 93.3181 42.9491 93.4865 43.2505L95.9467 47.701C96.554 48.7959 97.7287 49.4786 99.0097 49.483L108.026 49.5052C108.505 49.5052 108.895 49.1195 108.895 48.6363V47.2622C108.882 46.8765 108.571 46.5618 108.186 46.5574Z"
+      fill="var(--color-1, #fff)"
+    />
+  </svg>
+);

docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

docs/next.config.js

@@ -0,0 +1,9 @@
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.tsx",
+});
+
+module.exports = withNextra();
+
+// If you have other Next.js configurations, you can pass them as the parameter:
+// module.exports = withNextra({ /* other next.js config */ })

docs/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "clutch-docs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@next/font": "^13.4.13",
+    "next": "^13.4.13",
+    "nextra": "^2.10.0",
+    "nextra-theme-docs": "^2.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.5.0",
+    "typescript": "5.1.6"
+  }
+}

docs/pages/_app.tsx

@@ -0,0 +1,14 @@
+import { Inter } from "@next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={inter.className}>
+      <Component {...pageProps} />
+    </main>
+  );
+}

docs/pages/_meta.json

@@ -0,0 +1,13 @@
+{
+  "-- Clutch Intro": {
+    "type": "separator",
+    "title": "Clutch Intro"
+  },
+  "index": "Introduction",
+  "-- Basics": {
+    "type": "separator",
+    "title": "Basics"
+  },
+  "bar": "Application bar",
+  "canvas": "Canvas and Frames"
+}

docs/pages/bar/_meta.json

@@ -0,0 +1,4 @@
+{
+  "primitives": "Primitives",
+  "library": "Library"
+}

docs/pages/bar/library.mdx

@@ -0,0 +1,13 @@
+# Library
+
+The Library in Clutch holds all of the components available for your project.
+Consuming or using a component from the Library creates an instance of that component in your composition tree.
+
+The Library displays your project components and any installed packages in your project.
+Each package will contain components that you can add to your composition.
+If you cannot find the component you are looking for, search for it in the [Marketplace](/basics/bar/primitives).
+
+To add a component to your composition, drag it from the Library onto your composition tree.
+You can also search for components by name and filter them by package or category.
+
+Utilizing the Library allows you to quickly build and manage your project's components, allowing for faster and more efficient development.

docs/pages/bar/primitives.mdx

@@ -0,0 +1,52 @@
+# Primitives
+
+Clutch provides a variety of primitive components that serve as the foundational building blocks for creating UI elements in your application.
+These primitives include components for displaying text, images, links, and logic structures like conditional statements and loops.
+You can customize these primitives with various properties and styles in the properties panel to create dynamic and visually appealing UI elements.
+Additionally, Clutch provides a [component library](/basics/bar/library) Clutch UI kit with a range of pre-built components optimized for the Clutch theme and offering additional functionality beyond the basic primitives.
+Overall, these primitives provide a flexible and powerful toolset for creating UI elements in your application.
+
+## Block
+
+The `Block` primitive component provides a basic container for your content. It can create sections, articles, headers, main content, footers, and more.
+The `Block` component is an essential building block to your application and can be customized to fit your needs.
+
+## Text
+
+The `Text` primitive component is used to render text on your web page. 
+The `Text` primitive can render text in various contexts, such as headings, paragraphs, or even as labels for form inputs.
+The tag property can be used to change the level of the heading or the type of text element being rendered.
+
+## Link
+
+The `Link` primitive component is used to create links on your website.
+
+To use the `Link` primitive component, drag and drop it where you need it in your composition tree.
+Then, use the properties control panel to set the `href`, `children`, and `styles` properties as needed.
+
+## Image
+
+The `Image` primitive component is used to display images on your web page.
+
+To use the `Image` primitive component, drag and drop it into place or place it in your composition tree.
+Then, use the properties control panel to set the `src`, `alt`, and `styles` properties as needed.
+
+The `Image` primitive component is built on top of the Next.js 13 `Image` component and provides several benefits for rendering images on your web page.
+
+* **Optimized image loading**: Automatically optimizes your images for faster loading times by generating multiple sizes and formats of each image and serving the appropriate one based on the device and screen size.
+* **Lazy loading**: Supports lazy loading, meaning images are only loaded when they appear on the screen. This can significantly improve the performance of your web page, especially on mobile devices with slower connections.
+* **Accessibility**: Provides built-in support for accessibility features like alt text and aria attributes, which are important for visually impaired users and screen readers.
+
+By using the `Image` primitive component in Clutch.io, you can take advantage of all of these benefits without needing to write additional code.
+Set the src and alt properties as needed, and the Image component will handle the rest.
+
+## Logic
+
+### If
+
+The `If` primitive component allows you to conditionally render its children based on a condition that can be set in the properties panel using a checkbox or writing code.
+
+### Loop
+
+The `Loop` primitive component allows you to render its children a specified number of times based on an array of items.
+Using the control panel, you can pass in your array of items and render the children dynamically or statically.

docs/pages/canvas.mdx

@@ -0,0 +1,16 @@
+# Canvas
+
+The Canvas is the central block of the tool.
+It will show all of the frames of the selected workspace if any exist.
+The canvas is where you will edit your frames and their components with the composition and properties panel.
+
+## Frames
+
+Frames in Clutch are [iframes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
+They are the entry points where your components will be loaded and rendered.
+When you draw or create a Frame, you are creating a reference to a screen size that you want to see your components render in.
+These sizes can range from mobile, tablet, and desktop to custom formats tailored to your desired deployment.
+
+Your frames serve as a way to build your project/ application/ components visually and see how those items will render in a published version—allowing you to make changes and adjustments on the fly to fit your design.
+
+![Frames](/frames.png)

docs/pages/index.mdx

@@ -0,0 +1,26 @@
+# Welcome to Clutch
+
+## What is Clutch?
+
+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.
+
+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.
+
+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.
+
+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>
+
+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.