Refactoring using Diataxis

Makefile

@@ -29,6 +29,6 @@ clean: ## Cleanup
 .PHONY: check
 check: check-hugo ## Check requirements
 
-.PHONY: website-serve
-website-serve: ## Launch website
+.PHONY: serve
+serve: ## Launch website
 	@hugo server

content/en/_index.md

@@ -1,7 +1,6 @@
 ---
 title: Portefaix
-description: >-
-  bla bla bla
+description: The Portefaix website
 show_banner: true
 ---
 
@@ -32,6 +31,16 @@ show_banner: true
 An Open Source project to deploy applications from the Kubernetes ecosystem in different Cloud Providers.
 {{% /blocks/lead %}}
 
+{{% blocks/section color="white" %}}
+{.h1 .text-center}
+<div class="col">
+	<h2 class="text-center pb-3">Cloud Native Applications</h2>
+	<p class="text-center showcase">
+		<img alt="Cloud Native Applications" width="1500" src="/img/about/portefaix-landscape.png" />
+	</p>
+</div>
+{{% /blocks/section %}}
+
 
 {{% blocks/section color="dark" type="row" %}}
 {{% blocks/feature icon="fas fa-wrench" title="Infrastructure As Code" url="./docs/started/getting-started/#installing-portefaix-on-a-public-cloud" %}}
@@ -58,12 +67,12 @@ Open Source components for monitoring, logging and tracing.
 <div class="col">
 	<h2 class="text-center pb-3">Cloud Providers</h2>
 	<p class="text-center showcase">
-		<a href="https://cloud.google.com/"><img alt="Google Cloud" width="100" src="google-cloud.svg" /></a>
-		<a href="https://aws.amazon.com/"><img alt="AWS" width="100" src="aws.svg" /></a>
-		<a href="https://azure.microsoft.com/"><img alt="Azure" width="100" src="azure-icon.svg" /></a>
-		<a href="https://www.scaleway.com/"><img alt="altavr" width="100" src="scaleway-icon.svg" /></a>
-		<a href="https://www.digitalocean.com/"><img alt="Embark Studios" width="100" src="digitalocean-icon.svg" /></a>
-		<a href="https://www.alibabacloud.com/"><img alt="accelbyte" width="100" src="alibabacloud-icon.svg" /></a>
+		<a href="https://cloud.google.com/"><img alt="Google Cloud" width="100" src="/img/cloud/google-cloud.svg" /></a>
+		<a href="https://aws.amazon.com/"><img alt="AWS" width="100" src="/img/cloud/aws.svg" /></a>
+		<a href="https://azure.microsoft.com/"><img alt="Azure" width="100" src="/img/cloud/azure-icon.svg" /></a>
+		<a href="https://www.scaleway.com/"><img alt="altavr" width="100" src="/img/cloud/scaleway-icon.svg" /></a>
+		<a href="https://www.digitalocean.com/"><img alt="Embark Studios" width="100" src="/img/cloud/digitalocean-icon.svg" /></a>
+		<a href="https://www.alibabacloud.com/"><img alt="accelbyte" width="100" src="/img/cloud/alibabacloud-icon.svg" /></a>
 	</p>
 </div>
 {{% /blocks/section %}}

content/en/docs/_index.md

@@ -1,6 +1,34 @@
 ---
-title: Docs
-menu: { main: { weight: 40 } }
-cascade:
-  type: docs
----
+type: docs
+title: "Portefaix Documentation"
+linkTitle: "Home"
+description: ""
+weight: 1
+no_list: true
+---
+
+Welcome to the Portefaix documentation! Here you'll find everything you need to know about Portefaix, from getting started to advanced topics.
+
+<!-- {{% alert color="primary" %}}
+{{< image src="portefaix-logo.svg" alt="Portefaix logo" width="400px" >}} <br /><br />
+Portefaix is a project to ...
+[**Learn more**](https://portefaix.xyz/)
+{{% /alert %}} -->
+
+{{< cardpane >}}
+  {{< card header="**🎓 Tutorials**" footer="[**View available tutorials →**]({{< ref tutorials >}})" >}}
+  Visit the tutorials for guided learning paths to try out Portefaix and pick up the main concepts.
+  {{< /card >}}
+{{< /cardpane >}}
+
+{{< cardpane >}}
+  {{< card header="**📘 How-to guides**" footer="[**Visit how-to guides →**]({{< ref guides >}})" >}}
+  Check out the how-to guides for step-by-step instructions on how to use Portefaix and its features.
+  {{< /card >}}
+{{< /cardpane >}}
+
+{{< cardpane >}}
+  {{< card header="**🧾 Reference**" footer="[**Visit reference material →**]({{< ref reference >}})" >}}
+  Refer to detailed information on Portefaix resources, repositories, FAQs, and more.
+  {{< /card >}}
+{{< /cardpane >}}