revamp the tutorials UI for the Developer Hub (#648)

Co-authored-by: Osama M <osama.muhammad@localstack.cloud>

Author: HarshCasper

assets/scss/_styles_project.scss

@@ -517,6 +517,12 @@ table tfoot {
   }
 }
 
+.reading-time-in-card{
+  .reading-time{
+    margin-bottom: 0;
+  }
+}
+
 .td-content .code-container {
   .code-copy-button {
     position: absolute;

content/en/getting-started/_index.md

@@ -16,9 +16,9 @@ With LocalStack, you can run your AWS applications or Lambdas entirely on your l
 
 Whether you are testing complex CDK applications or Terraform configurations, or just beginning to learn about AWS services, LocalStack helps speed up and simplify your testing and development workflow.
 
-LocalStack supports a growing number of [AWS services]({{< ref "aws" >}}), like AWS [Lambda]({{< ref "user-guide/aws/lambda" >}}), [S3]({{< ref "s3" >}}), DynamoDB, [Kinesis]({{< ref "kinesis" >}}), [SQS]({{< ref "sqs" >}}), SNS, and more!
+LocalStack supports a growing number of [AWS services]({{< ref "aws" >}}), like AWS [Lambda]({{< ref "user-guide/aws/lambda" >}}), [S3]({{< ref "user-guide/aws/s3" >}}), DynamoDB, [Kinesis]({{< ref "kinesis" >}}), [SQS]({{< ref "sqs" >}}), SNS, and more!
 [LocalStack Pro](https://localstack.cloud/pricing) supports additional APIs and advanced features to make your cloud development experience a breeze!
 
 You can find a comprehensive list of supported APIs on our [Feature Coverage]({{< ref "feature-coverage" >}}) page.
 
-LocalStack also provides additional features to make your life as a cloud developer easier! Check out LocalStack's [Cloud Developer Tools]({{< ref "user-guide/tools" >}}).
+LocalStack also provides additional features to make your life as a cloud developer easier! Check out LocalStack's [Cloud Developer Tools]({{< ref "user-guide/tools" >}}).

content/en/getting-started/glossary.md

@@ -13,7 +13,7 @@ hide_readingtime: true
 
 | Term                                                                      | Definition |
 |---------------------------------------------------------------------------| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Cloud Pods]({{< ref "cloud-pods" >}})                                    | Advanced persistence mechanism that allows to take a snapshot of the state of your LocalStack instance, as well as easily share the application state to enable collaborative debugging.                                                                                                        |
+| [Cloud Pods]({{< ref "user-guide/tools/cloud-pods" >}})                                    | Advanced persistence mechanism that allows to take a snapshot of the state of your LocalStack instance, as well as easily share the application state to enable collaborative debugging.                                                                                                        |
 | [Diagnostics Endpoint]({{< ref "help-and-support" >}})                    | The endpoint on the running LocalStack Container that prints diagnostic data about LocalStack to assist with debugging and troubleshooting.                                                                                                                                                     |
 | [Edge Port]({{< ref "endpoint-url" >}})                                   | The HTTP port LocalStack listens on for any type of request (e.g. from AWS SDKs). The default port is 4566.                                                                                                                                                                                     |
 | [External Service Ports]({{< ref "external-ports" >}})                    | The ports reserved for infrastructure that is started as part of a managed service like database server, Redis cluster, and are exposed through the LocalStack Container.                                                                                                                       |

content/en/overview/_index.html

@@ -92,7 +92,7 @@ <h5 class="card-title"><i class="fa fa-book"></i> Featured guides and articles</
           <div class="card-text">
             <ul>
               <li><a href="{{< ref "api-key" >}}">How do I get started with a LocalStack API key?</a></li>
-              <li><a href="{{< ref "cloud-pods" >}}">What are Local Cloud Pods and how do I use them?</a></li>
+              <li><a href="{{< ref "user-guide/tools/cloud-pods" >}}">What are Local Cloud Pods and how do I use them?</a></li>
               <li><a href="{{< ref "lambda-tools" >}}">How LocalStack improves your Lambda developer experience</a></li>
               <li><a href="{{< ref "feature-coverage" >}}">Which AWS services does LocalStack support?</a></li>
               <li><a href="{{< ref "user-guide/integrations/serverless-framework" >}}">How do I use the Serverless Framework with LocalStack?</a></li>

content/en/references/init-hooks.md

@@ -107,7 +107,7 @@ which returns either `true` or `false`.
 ## Usage example
 
 A common use case for init hooks is pre-seeding LocalStack with custom state.
-If you have more complex state, [Cloud Pods]({{< ref `cloud-pods` >}}) may be a good option to look into!
+If you have more complex state, [Cloud Pods]({{< ref `user-guide/tools/cloud-pods` >}}) may be a good option to look into!
 But for simple state, for example if you want to have a certain S3 bucket or DynamoDB table created when starting LocalStack, init hooks can be very useful.
 
 To execute aws cli commands when LocalStack becomes ready,

content/en/references/persistence-mechanism.md

@@ -16,7 +16,7 @@ LocalStack has two distinct persistence mechanisms
 * **Cloud Pods**: a way to store, distribute, inspect, and version snapshots.
 
 This document is concerned with snapshot-based persistence.
-To learn more about cloud pods and their use cases, please refer to our documentation on [**Cloud pods**]({{< ref "cloud-pods">}}).
+To learn more about cloud pods and their use cases, please refer to our documentation on [**Cloud pods**]({{< ref "user-guide/tools/cloud-pods">}}).
 
 ## Snapshot-based persistence
 

content/en/tutorials/ecs-ecr-container-app/ecs-ecr-container-app-featured-image.png

@@ -5,6 +5,24 @@ weight: 6
 description: >
   Set up an NGINX web server via Elastic Container Service (ECS) and Elastic Container Registry (ECR) to serve a static website using LocalStack. Learn how you can use CloudFormation templates to declaratively define, create, and deploy your architecture locally with LocalStack's `awslocal` CLI.
 type: tutorials
+teaser: ""
+services:
+- ecs
+- ecr
+platform:
+- docker
+deployment:
+- cloudformation
+- awscli
+tags:
+- Docker
+- ECS
+- ECR
+- Fargate
+- CloudFormation
+- NGINX
+pro: true
+leadimage: "ecs-ecr-container-app-featured-image.png"
 ---
 
 [Amazon Elastic Container Service (ECS)](https://aws.amazon.com/ecs/) is a fully-managed container orchestration service that simplifies the deployment, management, and scaling of Docker containers on AWS. With support for two [launch types](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/launch_types.html), EC2 and Fargate, ECS allows you to run containers on your cluster of EC2 instances or have AWS manage your underlying infrastructure with Fargate. The Fargate launch type provides a serverless-like experience for running containers, allowing you to focus on your applications instead of infrastructure.
@@ -32,13 +50,13 @@ ENV foo=bar
 
 The `Dockerfile` uses the official `nginx` image from Docker Hub, which allows us to serve the default index page. Before building our Docker image, we need to start LocalStack and create an ECR repository to push our Docker image. To start LocalStack with the `LOCALSTACK_API_KEY` environment variable, run the following command:
 
-{{< command >}} 
+{{< command >}}
 $ LOCALSTACK_API_KEY=<your-api-key> localstack start -d
 {{< / command >}}
 
 Next, we will create an ECR repository to push our Docker image. We will use the `awslocal` CLI to create the repository.
 
-{{< command >}} 
+{{< command >}}
 $ awslocal ecr create-repository --repository-name <REPOSITORY_NAME>
 {{< / command >}}
 
@@ -65,7 +83,7 @@ Replace `<REPOSITORY_NAME>` with your desired repository name. The output of thi
 
 Copy the `repositoryUri` value from the output and replace `<REPOSITORY_URI>` in the following command:
 
-{{< command >}} 
+{{< command >}}
 $ docker build -t <REPOSITORY_URI> .
 {{< / command >}}
 
@@ -79,7 +97,7 @@ After a few seconds, the Docker image will be pushed to the local ECR repository
 
 ## Creating the local ECS infrastructure
 
-LocalStack enables the deployment of ECS task definitions, services, and tasks, allowing us to deploy our ECR containers via the ECS Fargate launch type, which uses the local Docker engine to deploy containers locally. To create the necessary ECS infrastructure on our local machine before deploying our NGINX web server, we will use a CloudFormation template. 
+LocalStack enables the deployment of ECS task definitions, services, and tasks, allowing us to deploy our ECR containers via the ECS Fargate launch type, which uses the local Docker engine to deploy containers locally. To create the necessary ECS infrastructure on our local machine before deploying our NGINX web server, we will use a CloudFormation template.
 
 You can create a new file named `ecs.infra.yml` inside a new `templates` directory, using a [publicly available CloudFormation template as a starting point](https://github.com/awslabs/aws-cloudformation-templates/blob/master/aws/services/ECS/FargateLaunchType/clusters/public-vpc.yml). To begin, we'll add the `Mappings` section and configure the subnet mask values, which define the range of internal IP addresses that can be assigned.
 
@@ -542,7 +560,7 @@ $ awslocal ecs describe-tasks --cluster <CLUSTER_ARN> --tasks <TASK_ARN> | jq -r
 Earlier, we configured the application to run on port `45139`, in our `HostPort` parameter. Let us now access the application endpoint. Run the following command to get the public IP address of the host:
 
 {{< command >}}
-$ curl localhost:45139 
+$ curl localhost:45139
 {{< /command >}}
 
 Alternatively, in the address bar of your web browser, you can navigate to [`localhost:45139`](https://localhost:45139/). You should see the default index page of the NGINX web server.

content/en/tutorials/ecs-ecr-container-app/index.md

@@ -5,11 +5,28 @@ weight: 3
 description: >
   Learn how to configure Elastic Load Balancing (ELB) Application Load Balancers and set up Node.js Lambda functions as targets. This tutorial demonstrates how to forward requests to the target group for your Lambda function using the Serverless Framework and the `serverless-localstack` plugin to effortlessly deploy and manage your infrastructure locally with LocalStack.
 type: tutorials
+teaser: ""
+services:
+- elb
+- lmb
+platform:
+- javascript
+deployment:
+- serverless
+tags:
+- Elastic Load Balancing
+- Lambda
+- Serverless Framework
+- Node.js
+- JavaScript
+- serverless-localstack plugin
+pro: true
+leadimage: "elb-load-balancing-featured-image.png"
 ---
 
 [Elastic Load Balancer (ELB)](https://aws.amazon.com/elasticloadbalancing/) is a service that distributes incoming application traffic across multiple targets, such as EC2 instances, containers, IP addresses, and Lambda functions. ELBs can be physical hardware or virtual software components. They accept incoming traffic and distribute it across multiple targets in one or more Availability Zones. Using ELB, you can quickly scale your load balancer to accommodate changes in traffic over time, ensuring optimal performance for your application and workloads running on the AWS infrastructure.
 
-ELB provides three types of load balancers: [Application Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/introduction.html), [Network Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/network/introduction.html), [Classic Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/gateway/introduction.html), and [Application Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/introduction.html). 
+ELB provides three types of load balancers: [Application Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/introduction.html), [Network Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/network/introduction.html), [Classic Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/gateway/introduction.html), and [Application Load Balancer](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/introduction.html).
 
 In this tutorial we focus on the Application Load Balancer (ALB), which operates at the Application layer of the OSI model and is specifically designed for load balancing HTTP and HTTPS traffic for web applications. ALB works at the request level, allowing advanced load-balancing features for HTTP and HTTPS requests. It also enables you to register Lambda functions as targets. You can configure a listener rule that forwards requests to a target group for your Lambda function, triggering its execution to process the request.
 

content/en/tutorials/elb-load-balancing/elb-load-balancing-featured-image.png

@@ -5,6 +5,27 @@ weight: 3
 description: >
   Build a Java Spring Boot application to configure Simple Email Service (SES) to send messages using AWS Java SDK in LocalStack. Learn how to configure Simple Queue Service (SQS) & Simple Notification Service (SNS) using CloudFormation templates deployed locally.
 type: tutorials
+teaser: ""
+services:
+- ses
+- sqs
+- sns
+- clf
+platform:
+- java
+deployment:
+- aws-java-sdk
+- cloudFormation
+tags:
+- Java
+- Spring Boot
+- AWS Java SDK
+- Simple Email Service
+- Simple Queue Service
+- Simple Notification Service
+- CloudFormation
+pro: true
+leadimage: "java-notification-app-featured-image.png"
 ---
 
 Java is a popular platform for cloud applications that use Amazon Web Services.
@@ -626,6 +647,6 @@ You can also navigate to the MailHog via the user-interface: [`localhost:8025`](
 In this tutorial, we have demonstrated, how you can:
 
 - Use CloudFormation to provision infrastructure for SNS & SQS subscriptions on LocalStack
-- Use the AWS Java SDK and Spring Boot to build an application that sends SQS and SES messages. 
+- Use the AWS Java SDK and Spring Boot to build an application that sends SQS and SES messages.
 
 Using [LocalStack Pro](https://app.localstack.cloud), you can use our Web user interface to view the email messages sent by SES. The code for this tutorial can be found in our [LocalStack Pro samples over GitHub](https://github.com/localstack/localstack-pro-samples/tree/master/java-notification-app).

content/en/tutorials/elb-load-balancing/index.md

@@ -5,6 +5,22 @@ weight: 2
 description: >
   Learn how to create and deploy Lambda functions using container images in LocalStack. This tutorial guides you through packaging your code and dependencies into a Docker image, creating a local Elastic Container Registry (ECR) in LocalStack, and deploying the Lambda container image.
 type: tutorials
+teaser: ""
+services:
+- ecr
+- lmb
+platform:
+- python
+deployment:
+- awscli
+tags:
+- Lambda
+- ECR
+- Docker
+- Container
+- Container Image
+pro: true
+leadimage: "lambda-ecr-container-images-featured-image.png"
 ---
 
 [Lambda](https://aws.amazon.com/lambda/) is a powerful serverless compute system that enables you to break down your application into smaller, independent functions. These functions can be deployed as individual units within the AWS ecosystem. Lambda offers seamless integration with various AWS services and supports multiple programming languages for different runtime environments. To deploy Lambda functions programmatically, you have two options: [uploading a ZIP file containing your code and dependencies](https://docs.aws.amazon.com/lambda/latest/dg/configuration-function-zip.html) or [packaging your code in a container image](https://docs.aws.amazon.com/lambda/latest/dg/gettingstarted-images.html) and deploying it through Elastic Container Registry (ECR).