first tutorial

docs/intro.md

@@ -2,46 +2,52 @@
 sidebar_position: 1
 ---
 
-# Tutorial Intro
+import Highlight from '@site/src/components/Highlight';
+import Showcase from '@site/src/components/Showcase';
 
-Let's discover **Piper in less than 5 minutes**.
+# Piper in Action
 
-## Getting Started
+Let's build your first AI pipeline **in less than 5 minutes** 
 
-Get started by **creating a new site**.
+Just in 5 minutes using `Chat GPT` and `Flux` you will create unique AI pipeline for generating **Picture of the Day!**
 
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+`Chat GPT` will retrieve latest world news and prepare prompt for `Flux`
 
-### What you'll need
+`Flux` will generate 4 images what describe current day.
 
-- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+## Getting Started
 
-## Generate a new site
+Before make sure you have Piper set up in one of the following ways:
 
-Generate a new Docusaurus site using the **classic template**.
+* [Self-hosted Piper](https://github.com/orgs/My-Piper/repositories) at your server
+* [Piper Cloud](https://app.piper.my/en/signup) <Highlight color="#25c2a0">optimal</Highlight>
+* Piper at your laptop <Highlight color="silver">soon</Highlight>
 
-The classic template will automatically be added to your project after you run the command:
+## Creating a project
 
-```bash
-npm init docusaurus@latest my-website classic
-```
+At application menu go `Pipelines` &rarr; `Create`
 
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+<Showcase>
+![Create project in Piper](./img/create_project.webp)
+</Showcase>
 
-The command also installs all necessary dependencies you need to run Docusaurus.
+In `Design` section rename project to `Picture of the Day`
 
-## Start your site
+<Showcase>
+![Create project in Piper](./img/rename_project.jpg)
+</Showcase>
 
-Run the development server:
+Back to `Pipeline` section. 
 
-```bash
-cd my-website
-npm run start
-```
+## Adding nodes
 
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+Add node `Ask Chat GPT` into the canvas.
 
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+Press at node and put question for Chat GPT:
+
+```
+Chat GPT, please:
+1. Retrieve latest world news to today.
+2. Prepare prompt for Flux to generate picture - Picture of the Day.
+```
 
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

i18n/en/docusaurus-plugin-content-pages/index.tsx

@@ -21,7 +21,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Piper Tutorial - 5min
+            Create First Pipeline
           </Link>
         </div>
       </div>

src/components/Highlight.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+ const Highlight = ({children, color}) => (
+    <span
+      style={{
+        backgroundColor: color,
+        borderRadius: '2px',
+        color: '#fff',
+        padding: '0.2rem',
+      }}>
+      {children}
+    </span>
+);
+
+export default Highlight

src/components/Showcase.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+ const Showcase = ({children}) => (
+    <div
+      style={{
+        margin: '20px 0',
+        overflow: 'hidden',
+        borderRadius: '5px',
+        backgroundColor: 'silver',
+        width: '90%'
+      }}>
+      {children}
+    </div>
+);
+
+export default Showcase

src/components/index.tsx

@@ -0,0 +1 @@
+export * from "./Highlight"