From 5954789abb2749488bf0055e98d2b77d0b885056 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 24 Aug 2022 23:23:02 +0200
Subject: [PATCH] feat(frontend): App landing page (#486)

* feat(frontend): App landing page

* feat(frontend): Add link to documentation + adapt styles
---
 .../landing/FlowGettingStarted.svelte         |  95 +++++++++++++
 .../components/landing/FlowLandingBox.svelte  |  71 ++++++++++
 .../landing/RessourceGettingStarted.svelte    |  51 +++++++
 .../lib/components/landing/ScriptBox.svelte   |  84 ++++++++++++
 .../landing/ScriptGettingStarted.svelte       |  93 +++++++++++++
 frontend/src/routes/__layout@root.svelte      |   7 +
 frontend/src/routes/index.svelte              | 126 +++++++++++++++++-
 7 files changed, 520 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/components/landing/FlowGettingStarted.svelte
 create mode 100644 frontend/src/lib/components/landing/FlowLandingBox.svelte
 create mode 100644 frontend/src/lib/components/landing/RessourceGettingStarted.svelte
 create mode 100644 frontend/src/lib/components/landing/ScriptBox.svelte
 create mode 100644 frontend/src/lib/components/landing/ScriptGettingStarted.svelte

diff --git a/frontend/src/lib/components/landing/FlowGettingStarted.svelte b/frontend/src/lib/components/landing/FlowGettingStarted.svelte
new file mode 100644
index 0000000000..05bfa4ffca
--- /dev/null
+++ b/frontend/src/lib/components/landing/FlowGettingStarted.svelte
@@ -0,0 +1,95 @@
+<script>
+	import { goto } from '$app/navigation'
+</script>
+
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
+	<div class="flex items-center">
+		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+			<svg
+				class="w-6 h-6 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+				/>
+			</svg>
+			Getting started
+		</h3>
+	</div>
+	<div class="mt-2 mb-4 text-sm text-gray-700 ">
+		Flows allow you to streamline complex processes and operations by chaining simple steps
+		together. Each Flow is composed of one or more steps. Create a new flow or find inspiration on
+		the Hub!
+	</div>
+	<div class="flex space-x-2">
+		<button
+			type="button"
+			on:click={() => goto('flows/add')}
+			class="inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+			Create flow
+		</button>
+		<button
+			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/flows')}
+			type="button"
+			class="inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+			Flow documentation
+		</button>
+		<button
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center "
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+			on:click={() => goto('https://hub.windmill.dev/')}
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+				/>
+			</svg>
+			Explore community flows on WindmillHub
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/landing/FlowLandingBox.svelte b/frontend/src/lib/components/landing/FlowLandingBox.svelte
new file mode 100644
index 0000000000..58c30f6089
--- /dev/null
+++ b/frontend/src/lib/components/landing/FlowLandingBox.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import type { Flow } from '$lib/gen'
+
+	export let flow: Flow
+</script>
+
+<div
+	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between"
+>
+	<div class="font-bold">{flow.summary}</div>
+
+	<div class="inline-flex justify-between w-full h-16">
+		<div class="text-xs">{flow.path}</div>
+	</div>
+
+	<div
+		class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full bottom-4 right-4 flex-wrap"
+	>
+		<button
+			on:click={() => goto(`/flows/edit/${flow.path}?step=2`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+				/>
+			</svg>
+			Edit
+		</button>
+
+		<button
+			on:click={() => goto(`/flows/run/${flow.path}`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			Run
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/landing/RessourceGettingStarted.svelte b/frontend/src/lib/components/landing/RessourceGettingStarted.svelte
new file mode 100644
index 0000000000..914eb4f767
--- /dev/null
+++ b/frontend/src/lib/components/landing/RessourceGettingStarted.svelte
@@ -0,0 +1,51 @@
+<script>
+	import { goto } from '$app/navigation'
+</script>
+
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
+	<div class="flex items-center">
+		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+			<svg
+				class="w-6 h-6 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+				/>
+			</svg>
+			Getting started
+		</h3>
+	</div>
+	<div class="mt-2 mb-4 text-sm text-gray-700 dark:text-gray-300">
+		Connect to apps like Slack, Google Drive or Airtable using OAuth.
+	</div>
+	<div class="flex">
+		<button
+			on:click={() => goto('resources')}
+			type="button"
+			class="inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center  dark:bg-gray-600 dark:hover:bg-gray-500 dark:focus:ring-gray-600"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+				/>
+			</svg>
+			Connect an API
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/landing/ScriptBox.svelte b/frontend/src/lib/components/landing/ScriptBox.svelte
new file mode 100644
index 0000000000..50a98a9601
--- /dev/null
+++ b/frontend/src/lib/components/landing/ScriptBox.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import type { Script } from '$lib/gen'
+
+	import { truncateHash } from '$lib/utils'
+
+	export let script: Script
+</script>
+
+<div
+	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between"
+>
+	<div class="font-bold">{script.summary}</div>
+
+	<div class="inline-flex justify-between w-full">
+		<div class="text-xs">{script.path}</div>
+
+		<span class="bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ">
+			{truncateHash(script.hash)}
+		</span>
+	</div>
+	<div class="inline-flex space-x-1 w-full">
+		<span class="bg-blue-100 text-blue-800 text-xs font-semibold  px-2.5 py-0.5 rounded ">
+			{String(script.language).toUpperCase()}
+		</span>
+		{#if script.is_trigger}
+			<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">
+				TRIGGER
+			</span>
+		{/if}
+	</div>
+	<div class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full">
+		<button
+			on:click={() => goto(`/scripts/edit/${script.hash}?step=2`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+				/>
+			</svg>
+			Edit
+		</button>
+
+		<button
+			on:click={() => goto(`/scripts/run/${script.hash}`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			Run
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/landing/ScriptGettingStarted.svelte b/frontend/src/lib/components/landing/ScriptGettingStarted.svelte
new file mode 100644
index 0000000000..912b2ef16e
--- /dev/null
+++ b/frontend/src/lib/components/landing/ScriptGettingStarted.svelte
@@ -0,0 +1,93 @@
+<script>
+	import { goto } from '$app/navigation'
+</script>
+
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
+	<div class="flex items-center">
+		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+			<svg
+				class="w-6 h-6 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+				/>
+			</svg>
+			Getting started
+		</h3>
+	</div>
+	<div class="mt-2 mb-4 text-sm text-gray-700 ">
+		Create a new script or find inspiration on the Hub!
+	</div>
+	<div class="inline-flex space-x-2 flex-wrap">
+		<button
+			on:click={() => goto('scripts/add')}
+			type="button"
+			class="inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+			Create script
+		</button>
+		<button
+			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/scripts')}
+			type="button"
+			class="inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+			Script documentation
+		</button>
+		<button
+			on:click={() => goto('https://hub.windmill.dev/')}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+				/>
+			</svg>
+			Explore community scripts on WindmillHub
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/routes/__layout@root.svelte b/frontend/src/routes/__layout@root.svelte
index aa108d2dce..68e5414479 100644
--- a/frontend/src/routes/__layout@root.svelte
+++ b/frontend/src/routes/__layout@root.svelte
@@ -14,6 +14,7 @@
 		faCrown,
 		faCubes,
 		faEye,
+		faHome,
 		faPlay,
 		faRobot,
 		faScroll,
@@ -213,6 +214,12 @@
 		</ul>
 		<div class="grow h-full" />
 		<ul class="flex flex-col {isCollapsed ? 'items-center' : 'px-6'} ">
+			<li>
+				<a href="/" class="menu-link text-sm font-medium items-center ">
+					<Icon class="text-white" data={faHome} scale={0.9} />
+					<span class=" pl-2 {isCollapsed ? 'hidden' : ''}">Home</span>
+				</a>
+			</li>
 			<li>
 				<a href="/scripts" class="menu-link text-sm font-medium items-center ">
 					<Icon class="text-white" data={faScroll} scale={0.9} />
diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte
index b93804abbf..13ac497de0 100644
--- a/frontend/src/routes/index.svelte
+++ b/frontend/src/routes/index.svelte
@@ -1,17 +1,129 @@
 <script lang="ts">
-	import { goto } from '$app/navigation'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import { workspaceStore } from '$lib/stores'
+	import FlowGettingStarted from '$lib/components/landing/FlowGettingStarted.svelte'
+	import FlowLandingBox from '$lib/components/landing/FlowLandingBox.svelte'
+	import RessourceGettingStarted from '$lib/components/landing/RessourceGettingStarted.svelte'
+	import ScriptBox from '$lib/components/landing/ScriptBox.svelte'
+	import ScriptGettingStarted from '$lib/components/landing/ScriptGettingStarted.svelte'
+	import { FlowService, Script, ScriptService, type Flow } from '$lib/gen'
+	import { userStore, workspaceStore } from '$lib/stores'
 
-	$workspaceStore = localStorage.getItem('workspace') ?? undefined
+	let scripts: Script[] = []
 
-	if ($workspaceStore) {
-		goto('/scripts')
+	let flows: Flow[] = []
+
+	async function loadScripts() {
+		scripts = await ScriptService.listScripts({
+			workspace: $workspaceStore!,
+			perPage: 3
+		})
 	}
+	async function loadFlows() {
+		flows = await FlowService.listFlows({
+			workspace: $workspaceStore!,
+			perPage: 3
+		})
+	}
+
+	$: {
+		if ($userStore) {
+			loadScripts()
+			loadFlows()
+		}
+	}
+
+	const ressources = []
 </script>
 
 <CenteredPage>
-	<div class="py-6">
-		<h1>Welcome to windmill.dev !</h1>
+	<div class="space-y-12 mx-8 my-16">
+		<h1 class="text-xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl">
+			Welcome to Windmill!
+		</h1>
+		<div>
+			<h2
+				class="mb-4 text-lg font-extrabold tracking-tight leading-none text-gray-900 md:text-2xl border-b py-2"
+			>
+				<span class="text-transparent bg-clip-text bg-gradient-to-r to-blue-500 from-blue-600">
+					Scripts
+				</span>
+			</h2>
+			<ScriptGettingStarted />
+
+			<div class="mt-6 mb-2 text-md font-bold text-gray-900 ">Latest scripts:</div>
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-4">
+				{#each scripts as script}
+					<ScriptBox {script} />
+				{/each}
+				<a
+					href="/scripts"
+					class="text-sm font-extrabold text-gray-700 hover:underline inline-flex items-center"
+				>
+					All scripts
+					<svg
+						class="w-4 h-4 ml-2"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 8l4 4m0 0l-4 4m4-4H3"
+						/>
+					</svg>
+				</a>
+			</div>
+		</div>
+		<div>
+			<h2
+				class="mb-4 text-lg font-extrabold tracking-tight leading-none text-gray-900 md:text-2xl border-b py-2 "
+			>
+				<span class="text-transparent bg-clip-text bg-gradient-to-r to-blue-500 from-blue-600">
+					Flows
+				</span>
+			</h2>
+			<FlowGettingStarted />
+			<div class="mt-6 mb-2 text-md font-bold text-gray-900 ">Latest flows:</div>
+
+			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-4">
+				{#each flows as flow}
+					<FlowLandingBox {flow} />
+				{/each}
+				<a
+					href="/flows"
+					class="text-sm font-extrabold text-gray-700 hover:underline inline-flex items-center"
+				>
+					All flows
+					<svg
+						class="w-4 h-4 ml-2"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 8l4 4m0 0l-4 4m4-4H3"
+						/>
+					</svg>
+				</a>
+			</div>
+		</div>
+		<div>
+			<h2
+				class="mb-4 text-lg font-extrabold tracking-tight leading-none text-gray-900 md:text-2xl border-b py-2 "
+			>
+				<span class="text-transparent bg-clip-text bg-gradient-to-r to-blue-500 from-blue-600">
+					Ressources
+				</span>
+			</h2>
+
+			{#if ressources.length === 0}
+				<RessourceGettingStarted />
+			{/if}
+		</div>
 	</div>
 </CenteredPage>