added piral, picard and youtube

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1718477711529
+		"lastUpdateCheck": 1721731441251
 	}
 }

src/components/Presentation.astro

@@ -1,33 +1,51 @@
 ---
+import presentation from "../../public/images/presentation.webp";
+import Image from "astro/components/Image.astro";
 ---
 
-<section class="mb-8">
-  <div class="max-w-6xl mx-auto px-6 sm:px-8 md:flex items-center">
-    <div class="md:basis-1/2 md:pl-6">
+<section class="mt-8 pt-5">
+  <div class="max-w-6xl mx-auto px-6 sm:px-0 md:flex">
+    <div class="md:basis-1/2">
       <h3
-          class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden"
+        class="font-bold text-text-heading text-2xl md:text-3xl pb-2 w-fit overflow-hidden"
       >
-        Presentation
+        Watch the Presentation
       </h3>
-       <p class="mb-5">
-          Learn even more about micro frontends from
-           <a
-            class="bg-clip-text text-neuland"
-            href={"https://speakerdeck.com/naltatis/tractor-store-2-dot-0"}
-            target="_blank"
-            >
-            this presentation</a><br>
-          first shown at the Micro Frontends Conference 2024
-        </p>
+      <p class="mb-5 me-8">
+        Learn more about the ideas behind the Tractor Store 2.0 by watching
+        <a
+          class="bg-clip-text text-neuland"
+          href="https://www.youtube.com/watch?v=12TN7Zq7VxM&t=132s"
+          target="_blank"
+        >
+          Michael's presentation</a
+        > at the <a
+          href="https://conference.microfrontends.cloud/2024"
+          target="_blank">Micro Frontends Conference 2024</a
+        >. Slides are available on <a
+          class="bg-clip-text text-neuland"
+          href="https://speakerdeck.com/naltatis/tractor-store-2-dot-0"
+          target="_blank">Speaker Deck</a
+        >.
+      </p>
     </div>
     <div class="md:basis-1/2 place-content-center">
-      <img
-          src="images/presentation.svg"
-          typeof="foaf:Image"
-          class="lg:size-72 size-52 m-auto"
-      />
+      <a
+        href="https://www.youtube.com/watch?v=12TN7Zq7VxM&t=132s"
+        target="_blank"
+      >
+        <Image
+          src={presentation}
+          alt="Micro Frontends Conference 2024"
+          class="presentation"
+        />
+      </a>
     </div>
   </div>
 </section>
 
-<style></style>
+<style>
+  .presentation {
+    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.15);
+  }
+</style>

src/components/content/Implementations.astro

@@ -2,6 +2,7 @@
 import MFExample from "../MFExample.astro";
 import html from "./../../../public/images/tech/html.svg";
 import preact from "./../../../public/images/tech/preact.svg";
+import react from "./../../../public/images/tech/react.svg";
 import question from "./../../../public/images/tech/question.svg";
 ---
 
@@ -21,7 +22,7 @@ import question from "./../../../public/images/tech/question.svg";
   <div class="examples">
     <MFExample
       title="Blueprint"
-      rendering="Vanilla, no frameworks"
+      rendering="vanilla, no frameworks"
       lib1={html}
       lib2={html}
       lib3={html}
@@ -34,7 +35,7 @@ import question from "./../../../public/images/tech/question.svg";
 
     <MFExample
       title="Preact"
-      rendering="Universal Rendering"
+      rendering="universal rendering"
       lib1={preact}
       lib2={preact}
       lib3={preact}
@@ -44,6 +45,32 @@ import question from "./../../../public/images/tech/question.svg";
       githubUrl="https://github.com/neuland/tractor-store-preact"
     />
 
+    <MFExample
+      title="Piral & React"
+      rendering="SPA, app shell"
+      lib1={react}
+      lib2={react}
+      lib3={react}
+      integration="Piral"
+      author="smapiot"
+      authorUrl="https://smapiot.com/"
+      githubUrl="https://github.com/piral-samples/tractor-v2"
+      liveUrl="https://tractor-v2.samples.piral.cloud"
+    />
+
+    <MFExample
+      title="Picard.js & Preact"
+      rendering="SPA, Native Federation"
+      lib1={preact}
+      lib2={preact}
+      lib3={preact}
+      integration="Picard.js"
+      author="smapiot"
+      authorUrl="https://smapiot.com/"
+      githubUrl="https://github.com/picardjs/picard/tree/develop/examples/13-spa-tractor-v2-full"
+      liveUrl="https://picard-tractor.munichjs.org"
+    />
+
     <MFExample
       title="Your Implementation ..."
       rendering="[description]"

src/pages/index.astro

@@ -23,7 +23,7 @@ import Presentation from "../components/Presentation.astro";
     <TechnologicalChallenges />
     <BigPicture />
     <UseCases />
-    <Presentation />
     <Contribute />
+    <Presentation />
   </Fragment>
 </PageLayout>