TodoMVC for micro frontends image positions

src/components/Footer.astro

@@ -1,7 +1,7 @@
 ---
 ---
 
-<footer class="text-sm h-fit mt-4 pb-4 leading-snug">
+<footer class="text-sm h-fit mt-4 pb-4 mb-12 leading-snug">
   <div class="divider"></div>
   <img
     src="images/neulandLogo.png"

src/components/content/TodoMVC.astro

@@ -0,0 +1,101 @@
+---
+---
+
+<section class="mb-8 c-background todomvc">
+  <div class="max-w-6xl mx-auto px-6 py-10 sm:px-8">
+    <div class="image">
+      <img src="images/screen1.svg" typeof="foaf:Image" />
+      <img src="images/screen2.svg" typeof="foaf:Image" />
+      <img src="images/screen3.svg" typeof="foaf:Image" />
+    </div>
+    <div class="text">
+      <h3
+        class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden"
+      >
+        TodoMVC for Micro Frontends
+      </h3>
+      <div>
+        <p class="mb-5">
+          A micro frontends architecture can be built in many ways. Custom
+          crafted and tailored to your organization's specific needs or by
+          following the rules of a specific micro frontends meta-framework. The
+          final result is also affected by the technologies you choose and
+          whether you want to render your application on the server and/or
+          client. Making good choices is not always easy. Being able to look at
+          real-world code and examples helps everyone involved to get a good
+          understanding of your decisions and their implications. The Tractor
+          Store aims to be to micro frontends what TodoMVC was to the advent of
+          JavaScript Frameworks in the late 2000s: An awesome collection of
+          different implementations for the same application. A valuable
+          learning resource for people new to this topic and also a good basis
+          for advanced discussions.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .todomvc > div {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+  }
+
+  .image {
+    @media (max-width: 999px) {
+      grid-column: 1 / -1;
+      grid-template-columns: repeat(7, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+    }
+    @media (min-width: 1000px) {
+      grid-column: 1 / 7;
+      grid-template-columns: repeat(6, 1fr);
+      grid-template-rows: repeat(7, 1fr);
+    }
+    display: grid;
+  }
+
+  .image img:nth-child(1) {
+    @media (max-width: 999px) {
+      grid-column: 1 / 4;
+      grid-row: 1 / span 2;
+    }
+    @media (min-width: 1000px) {
+      grid-column: 1 / 5;
+      grid-row: 1 / span 3;
+    }
+  }
+
+  .image img:nth-child(2) {
+    @media (max-width: 999px) {
+      grid-column: 5 / 8;
+      grid-row: 1 / span 2;
+    }
+    @media (min-width: 1000px) {
+      grid-column: 2 / 6;
+      grid-row: 3 / span 3;
+    }
+  }
+
+  .image img:nth-child(3) {
+    @media (max-width: 999px) {
+      grid-column: 3 / 6;
+      grid-row: 2 / span 2;
+    }
+    @media (min-width: 1000px) {
+      grid-column: 3 / 7;
+      grid-row: 5 / span 3;
+    }
+  }
+
+  .text {
+    @media (max-width: 999px) {
+      grid-column: 1 / -1;
+    }
+    @media (min-width: 1000px) {
+      grid-column: 8 / -1;
+    }
+    align-self: center;
+  }
+</style>

src/layouts/ContentLayout.astro

@@ -63,7 +63,7 @@ const formattedDate = new Date(date).toLocaleDateString("en-us", {
           "header"
           "main"
           "footer";
-        grid-template-rows: 5rem minmax(0, 1fr) 5rem;
+        grid-template-rows: auto minmax(0, 1fr) auto;
         grid-template-columns: minmax(0, 1fr);
       }
       main {

src/layouts/PageLayout.astro

@@ -41,7 +41,7 @@ import Footer from "../components/Footer.astro";
           "header"
           "main"
           "footer";
-        grid-template-rows: auto minmax(0, 1fr) 5rem;
+        grid-template-rows: auto minmax(0, 1fr) auto;
         grid-template-columns: minmax(0, 1fr);
       }
       main {

src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
 import PageMeta from "../components/PageMeta.astro";
 import PageLayout from "../layouts/PageLayout.astro";
-import Intro from "../components/Intro.astro";
+import Intro from "../components/content/Hero.astro";
 import Implementations from "../components/content/Implementations.astro";
-import Info from "../components/Info.astro";
+import TodoMVC from "../components/content/TodoMVC.astro";
 import Similarities from "../components/content/Similarities.astro";
 import UseCases from "../components/content/UseCases.astro";
 import { SITE_TITLE } from "../config";
@@ -17,7 +17,7 @@ import TechnologicalChallenges from "../components/content/TechnologicalChalleng
   <Fragment slot="main">
     <Intro />
     <Implementations />
-    <Info />
+    <TodoMVC />
     <Similarities />
     <TechnologicalChallenges />
     <BigPicture />