features

neuland · Jun 10, 2024 · ef162c3 · ef162c3
1 parent 9a5c251
commit ef162c3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/public/images/header_footer.webp b/public/images/header_footer.webp
diff --git a/public/images/recommendations.webp b/public/images/recommendations.webp
diff --git a/public/images/walkthrough.webp b/public/images/walkthrough.webp
diff --git a/src/components/UseCases.astro b/src/components/UseCases.astro
@@ -2,29 +2,47 @@
 ---
 
 <div class="mb-8">
-  <h3 class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden" data-annotate="underline">
-    Micro Frontend Use-Cases
+  <h3 class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-6 w-fit overflow-hidden">
+    Features
   </h3>
 
+  <div class="mt-2 md:flex items-center">
+    <div class="basis-2/3">
+      <img src="images/walkthrough.webp" alt="project visualisation" width="500"/>
+    </div>
+    <div class="basis-1/3 md:pl-4">
+      <p class="md:text-left md:pr-4">
+        <strong class="block">Complete User Journey</strong>
+        Homepage, category, stores,<br/>
+        product detail, cart, checkout<br/>
+        and thank you page are included.
+      </p>
+    </div>
+  </div>
+
   <div class="mt-2 md:flex md:flex-row-reverse items-center">
     <div class="basis-2/3">
-      <img src="images/techStack.png" alt="possible tech stack visualisation" typeof="foaf:Image" />
+      <img src="images/header_footer.webp" alt="possible tech stack visualisation" width="500"/>
     </div>
     <div class="basis-1/3">
       <p class="md:text-right md:pr-4">
-        <strong>Mini Cart Micro Frontend</strong>
-        Lives in the header and updates when the cart content changes ...
+        <strong class="block">Header &amp; Footer</strong>
+        Owned by Team Explore.<br/>
+        The same across all pages.<br/>
+        Except for the checkout page.
       </p>
     </div>
   </div>
+
   <div class="mt-2 md:flex items-center">
     <div class="basis-2/3">
-      <img src="images/projectBoundaries.png" alt="project visualisation" typeof="foaf:Image" />
+      <img src="images/recommendations.webp" alt="recommendations" width="500"/>
     </div>
     <div class="basis-1/3 md:pl-4">
-      <p class="md:text-right md:pr-4">
-        <strong>Mini Cart Micro Frontend</strong>
-        Lives in the header and updates when the cart content changes ...
+      <p class="md:text-left md:pr-4">
+        <strong class="block">Cross-Team Interactions</strong>
+        Product color changes.<br/>
+        Recommendations must update.
       </p>
     </div>
   </div>