feat: adiciona nova seção

src/components/layout/Section.astro

@@ -0,0 +1,16 @@
+---
+import Container from './Container.astro';
+
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<section class="mb-8">
+  <Container>
+    <h2 class="font-bold text-3xl mb-4">{title}</h2>
+    <slot />
+  </Container>
+</section>

src/components/pages/home/HowItWorks.astro

@@ -0,0 +1,28 @@
+---
+import Section from "../../layout/Section.astro";
+---
+
+<Section title="Como funciona?">
+  <div class="flex flex-row justify-between">
+    <div class="flex flex-col gap-4 max-w-[70ch]">
+      <p class="text-xl">
+        Os alunos participantes recebem acesso à plataforma de aprendizado
+        online
+        <b>RedHat Academy</b>, com uma <b>trilha de cursos pré-selecionada</b>,
+        contando ainda com certificações.
+      </p>
+      <p class="text-xl">
+        Uma vez concluída a etapa de capacitação, o aluno participará no
+        desenvolvimento de <b>mini-projetos</b> e <b>atividades práticas</b> junto
+        ao time de Guardians.
+      </p>
+    </div>
+    <div class="flex flex-col justify-center items-center max-w-96 w-full">
+      <img
+        src="/iniciativa-devops/img/rh-academy-logo.png"
+        alt=""
+        class="w-full"
+      />
+    </div>
+  </div>
+</Section>

src/pages/index.astro

@@ -1,8 +1,10 @@
 ---
 import Landing from "../components/pages/Landing.astro";
 import Layout from "../layouts/Layout.astro";
+import HowItWorks from "../components/pages/home/HowItWorks.astro";
 ---
 
 <Layout title="Iniciativa DevOps - Home">
   <Landing />
+  <HowItWorks />
 </Layout>