From 49e9be91bfeed36d6a2d64326d0713df17417e05 Mon Sep 17 00:00:00 2001
From: Fabricius Seifert <fabricius.seifert@neuland-bfi.de>
Date: Mon, 10 Jun 2024 14:20:49 +0200
Subject: [PATCH] Hero graphic

---
 public/images/hero.svg     |  48 +++++++++++++++
 src/components/Info.astro  |   2 +-
 src/components/Intro.astro | 120 ++++++++++++++++++++-----------------
 3 files changed, 115 insertions(+), 55 deletions(-)
 create mode 100644 public/images/hero.svg

diff --git a/public/images/hero.svg b/public/images/hero.svg
new file mode 100644
index 0000000..ff07bc2
--- /dev/null
+++ b/public/images/hero.svg
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="542" height="515" fill="none">
+  <path fill="url(#a)"
+    d="M406.079 477.765 6.989 354.205l127.657-40.311 393.861 124.298a18.975 18.975 0 0 1 9.629 6.931c.013.013.025.039.038.051.293.408.574.828.829 1.262.077.114.14.242.204.356.191.332.383.676.548 1.02.077.152.154.318.23.484.153.318.293.637.421.968.076.178.14.369.204.548.115.318.217.637.319.968.064.191.115.382.166.586.089.331.165.663.229.994.038.191.089.395.115.586.064.37.115.726.153 1.096.025.165.051.344.064.509.051.548.076 1.096.076 1.644v4.701a17.207 17.207 0 0 1-12.051 16.423l-117.914 37.19-1.543-30.705 3.456-1.083a16.684 16.684 0 0 0-7.601-4.981v.025Z" />
+  <path fill="#fff"
+    d="M409.191 514.344c4.451 0 8.06-3.619 8.06-8.078v-11.301c0-7.81-5.012-14.626-12.46-16.971L13.187 354.575a8.835 8.835 0 0 0-2.691-.421c-4.885 0-8.864 3.975-8.864 8.868v10.868c0 7.415 4.757 13.887 11.822 16.117L406.73 513.949a8.042 8.042 0 0 0 2.448.382l.013.013Z" />
+  <path fill="#EBEEE2"
+    d="M10.508 354.791c-4.527 0-8.225 3.695-8.225 8.231v10.868a16.195 16.195 0 0 0 11.375 15.505l393.276 123.942a7.57 7.57 0 0 0 2.257.357c4.094 0 7.422-3.338 7.422-7.441v-11.301c0-7.529-4.821-14.104-12.013-16.372L12.995 355.161a8.376 8.376 0 0 0-2.5-.382m.013-1.262c.944 0 1.913.14 2.883.446l391.604 123.42c7.677 2.421 12.906 9.543 12.906 17.582v11.301c0 4.956-4.068 8.715-8.697 8.715a8.76 8.76 0 0 1-2.64-.408L13.288 390.631A17.536 17.536 0 0 1 1.02 373.902v-10.867c0-5.415 4.438-9.505 9.501-9.505l-.013-.013Z" />
+  <path fill="url(#b)"
+    d="M112.086 69.909 9.156 37.687l115.16-36.324a29.31 29.31 0 0 1 17.599-.012l94.129 29.469a18.121 18.121 0 0 1 12.664 16.83c0 .102.013.204.013.319l.153 259.325a20.493 20.493 0 0 1-14.335 19.544l-116.217 36.655-5.369-285.838 7.371-2.332a18.053 18.053 0 0 0-8.238-5.402v-.013Z" />
+  <path fill="#fff"
+    d="M115.554 363.264c4.732 0 8.583-3.848 8.583-8.587V87.669c0-7.95-5.101-14.894-12.676-17.29L10.917 38.67a7.17 7.17 0 0 0-2.194-.345c-3.992 0-7.244 3.249-7.244 7.25v268.829c0 7.95 5.102 14.894 12.677 17.289l98.81 31.164a8.71 8.71 0 0 0 2.601.408h-.013Z" />
+  <path fill="#EBEEE2"
+    d="M8.71 38.961c-3.647 0-6.606 2.969-6.606 6.613v268.829c0 7.67 4.923 14.372 12.243 16.678l98.81 31.164a7.852 7.852 0 0 0 2.41.369c4.374 0 7.945-3.567 7.945-7.95V87.669c0-7.67-4.922-14.371-12.243-16.678L10.725 39.28a6.777 6.777 0 0 0-2.002-.319m-.013-1.274c.79 0 1.594.115 2.385.37L111.64 69.768a18.756 18.756 0 0 1 13.123 17.901v267.008c0 5.249-4.298 9.224-9.22 9.224-.919 0-1.862-.14-2.793-.433l-98.81-31.164A18.756 18.756 0 0 1 .816 314.403V45.573c0-4.484 3.673-7.886 7.882-7.886h.012Z" />
+  <path fill="url(#c)"
+    d="M257.992 115.877 155.063 83.656l115.146-36.324a29.31 29.31 0 0 1 17.599-.013l94.13 29.47a18.123 18.123 0 0 1 12.664 16.83c0 .102.012.204.012.319l.153 259.325a20.493 20.493 0 0 1-14.334 19.544l-116.218 36.655-5.369-285.839 7.372-2.331a18.053 18.053 0 0 0-8.239-5.402l.013-.013Z" />
+  <path fill="#fff"
+    d="M261.461 409.233c4.731 0 8.583-3.861 8.583-8.588v-267.02c0-7.95-5.102-14.894-12.69-17.289L156.81 84.624a7.172 7.172 0 0 0-2.193-.344c-3.992 0-7.244 3.249-7.244 7.25v268.829c0 7.95 5.101 14.894 12.689 17.289l98.81 31.164a8.653 8.653 0 0 0 2.602.408l-.013.013Z" />
+  <path fill="#EBEEE2"
+    d="M154.617 84.917c-3.648 0-6.606 2.969-6.606 6.612v268.83c0 7.67 4.922 14.372 12.242 16.678l98.81 31.164a7.884 7.884 0 0 0 2.411.369c4.374 0 7.945-3.567 7.945-7.95V133.625c0-7.67-4.923-14.372-12.243-16.678L156.632 85.236a6.779 6.779 0 0 0-2.003-.319m-.012-1.274c.79 0 1.594.115 2.384.37l100.545 31.711a18.757 18.757 0 0 1 13.122 17.901v267.008c0 5.249-4.297 9.224-9.22 9.224-.918 0-1.862-.14-2.793-.433l-98.81-31.164a18.757 18.757 0 0 1-13.122-17.901V91.542c0-4.484 3.672-7.886 7.881-7.886l.013-.013Z" />
+  <path fill="url(#d)"
+    d="m405.212 161.935-102.929-32.221L417.429 93.39a29.31 29.31 0 0 1 17.599-.013l94.13 29.457a18.117 18.117 0 0 1 12.663 16.817c0 .102.026.204.026.319L542 399.295a20.493 20.493 0 0 1-14.334 19.544l-116.218 36.655-5.369-285.838 7.371-2.332a18.05 18.05 0 0 0-8.238-5.402v.013Z" />
+  <path fill="#fff"
+    d="M408.681 455.29c4.731 0 8.582-3.847 8.582-8.587V179.695c0-7.95-5.101-14.894-12.676-17.289l-100.544-31.712a7.183 7.183 0 0 0-2.194-.344c-3.991 0-7.243 3.249-7.243 7.25v268.83c0 7.95 5.101 14.894 12.689 17.289l98.81 31.164a8.741 8.741 0 0 0 2.601.407h-.025Z" />
+  <path fill="#EBEEE2"
+    d="M301.824 130.975c-3.647 0-6.606 2.968-6.606 6.612v268.83c0 7.67 4.922 14.371 12.243 16.677l98.809 31.164c.791.255 1.607.37 2.411.37 4.374 0 7.945-3.568 7.945-7.95V179.67c0-7.67-4.923-14.372-12.243-16.678l-100.544-31.711a6.77 6.77 0 0 0-2.002-.319m-.013-1.261a7.75 7.75 0 0 1 2.385.369l100.544 31.712a18.757 18.757 0 0 1 13.123 17.901V446.69c0 5.25-4.298 9.225-9.221 9.225a9.314 9.314 0 0 1-2.793-.434l-98.809-31.163a18.757 18.757 0 0 1-13.123-17.901V137.6c0-4.485 3.673-7.887 7.881-7.887l.013-.012Z" />
+  <defs>
+    <linearGradient id="a" x1="320.405" x2="234.408" y1="545.291" y2="280.388"
+      gradientUnits="userSpaceOnUse">
+      <stop offset=".07" />
+      <stop offset=".13" stop-color="#EB5B59" />
+    </linearGradient>
+    <linearGradient id="b" x1="222.96" x2="116.568" y1="330.571" y2="2.82"
+      gradientUnits="userSpaceOnUse">
+      <stop offset=".74" />
+      <stop offset=".8" stop-color="#EB5B59" />
+    </linearGradient>
+    <linearGradient id="c" x1="368.879" x2="262.474" y1="376.54" y2="48.775"
+      gradientUnits="userSpaceOnUse">
+      <stop offset=".74" />
+      <stop offset=".8" stop-color="#EB5B59" />
+    </linearGradient>
+    <linearGradient id="d" x1="516.086" x2="409.694" y1="422.598" y2="94.833"
+      gradientUnits="userSpaceOnUse">
+      <stop offset=".74" />
+      <stop offset=".8" stop-color="#EB5B59" />
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/components/Info.astro b/src/components/Info.astro
index 6922c58..f9b46ab 100644
--- a/src/components/Info.astro
+++ b/src/components/Info.astro
@@ -3,7 +3,7 @@
 
 <section class="mb-8 c-background">
   <div class="max-w-6xl mx-auto px-6 sm:px-8 md:flex items-center">
-    <div class="md:basis-1/2 relative aspect-[1.1]">
+    <div class="md:basis-1/2 relative aspect-[1]">
       <img
         src="images/screen1.svg"
         typeof="foaf:Image"
diff --git a/src/components/Intro.astro b/src/components/Intro.astro
index 11d9f50..d704ef5 100644
--- a/src/components/Intro.astro
+++ b/src/components/Intro.astro
@@ -1,27 +1,15 @@
 ---
 ---
 
-<section class="mb-20">
-  <div class="mb-6">
-    <!--<h1
-      class="font-bold text-text-heading text-center text-4xl md:text-5xl pt-4"
+<section class="mb-20 intro">
+  <div class="text">
+    <h1
+      class="pt-4 mb-10 m-auto font-bold text-text-heading text-3xl md:text-4xl"
     >
-      <span
-        class="
-            bg-gradient-to-b bg-no-repeat bg-bottom bg-[length:100%_50%]
-            from-orange-200 to-orange-500 dark:from-primary-blue dark:to-primary-blue
-        "
-      >
-       The Tractor Store
-      </span>
-    </h1>-->
-    <h1 class="pt-4 m-auto font-bold text-text-heading text-3xl md:text-4xl">
       <span data-annotate="underline">
-        a non-trivial micro frontends example project
+        a non-trivial<br /> micro frontends<br /> example project
       </span>
     </h1>
-  </div>
-  <div>
     <p>
       The Tractor Store is a template to experiment with micro frontend
       architecture. Goal is to create a real world application where developers
@@ -31,47 +19,71 @@
       </span>
     </p>
   </div>
-  <script type="module">
-    import { annotate } from "https://unpkg.com/rough-notation?module";
-    const observer = new IntersectionObserver(handleIntersection, {
-      threshold: [1],
-    });
+  <img
+    class="image"
+    src="/images/hero.svg"
+    alt="illustration of a micro frontend setup consisting of three vertical boxes on one horiziontal box"
+  />
+</section>
 
-    Array.from(document.querySelectorAll("[data-annotate]")).forEach(
-      (element) => {
-        observer.observe(element);
-      }
-    );
+<style>
+  .intro {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+  }
+
+  .text {
+    grid-column: 1 / 7;
+  }
+
+  .image {
+    grid-column: 8 / -1;
+    filter: drop-shadow(-30px -10px 100px rgba(255, 90, 85, 0.33));
+    transform: translateZ(0);
+  }
+</style>
 
-    function handleIntersection(entries, observer) {
-      entries.forEach((entry) => {
-        const element = entry.target;
-        if (entry.isIntersecting) {
-          showAnnotation(element);
-        }
-      });
+<script type="module">
+  import { annotate } from "https://unpkg.com/rough-notation?module";
+  const observer = new IntersectionObserver(handleIntersection, {
+    threshold: [1],
+  });
+
+  Array.from(document.querySelectorAll("[data-annotate]")).forEach(
+    (element) => {
+      observer.observe(element);
     }
+  );
 
-    function showAnnotation(element) {
-      const type = element.getAttribute("data-annotate");
-      if (!type) {
-        return;
-      }
-      let color = "#ffde54";
-      if (document.documentElement.classList.contains("dark")) {
-        color = "#FF5A55";
+  function handleIntersection(entries, observer) {
+    entries.forEach((entry) => {
+      const element = entry.target;
+      if (entry.isIntersecting) {
+        showAnnotation(element);
       }
-      annotate(element, {
-        type,
-        color,
-        iterations: 2,
-        multiline: true,
-        animationDuration: 3000,
-        animationDelay: 5000,
-      }).show();
-      element.removeAttribute("data-annotate");
+    });
+  }
+
+  function showAnnotation(element) {
+    const type = element.getAttribute("data-annotate");
+    if (!type) {
+      return;
+    }
+    let color = "#ffde54";
+    if (document.documentElement.classList.contains("dark")) {
+      color = "#FF5A55";
     }
+    annotate(element, {
+      type,
+      color,
+      iterations: 2,
+      multiline: true,
+      animationDuration: 3000,
+      animationDelay: 5000,
+    }).show();
+    element.removeAttribute("data-annotate");
+  }
 
-    // TODO: add dark mode colors
-  </script>
-</section>
+  // TODO: add dark mode colors
+</script>