From 22d29b1d52aa70b97f2a4f6bae6a6d8c0c1d8d11 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Fri, 7 Aug 2026 11:43:26 +0200
Subject: [PATCH]

---
 .../01_reusable-components-2/src/App.jsx      |  6 +-
 .../src/components/headers/HeaderMain.jsx     |  4 +-
 .../src/components/icons/LogoDonkey.jsx       | 80 +++++++++++++++++++
 .../src/components/logos/LogoMain.jsx         | 13 +++
 .../src/styles/03_base/_theme.scss            |  6 +-
 .../src/styles/05_modules/_index.scss         |  2 +-
 6 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 05_react/unterricht/tag40/01_reusable-components-2/src/components/icons/LogoDonkey.jsx
 create mode 100644 05_react/unterricht/tag40/01_reusable-components-2/src/components/logos/LogoMain.jsx

diff --git a/05_react/unterricht/tag40/01_reusable-components-2/src/App.jsx b/05_react/unterricht/tag40/01_reusable-components-2/src/App.jsx
index 6c88042..07c07b2 100644
--- a/05_react/unterricht/tag40/01_reusable-components-2/src/App.jsx
+++ b/05_react/unterricht/tag40/01_reusable-components-2/src/App.jsx
@@ -10,11 +10,7 @@ function App(props) {
       <main>
         <div className="container py-5">
           <h2>Site</h2>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, delectus debitis. A, nostrum dolores
-            aspernatur earum asperiores illum libero ab quasi unde distinctio nobis amet rem eveniet fuga! Nulla,
-            architecto!
-          </p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, delectus debitis.</p>
         </div>
       </main>
       <FooterMain />
diff --git a/05_react/unterricht/tag40/01_reusable-components-2/src/components/headers/HeaderMain.jsx b/05_react/unterricht/tag40/01_reusable-components-2/src/components/headers/HeaderMain.jsx
index f99ae1c..d32e406 100644
--- a/05_react/unterricht/tag40/01_reusable-components-2/src/components/headers/HeaderMain.jsx
+++ b/05_react/unterricht/tag40/01_reusable-components-2/src/components/headers/HeaderMain.jsx
@@ -1,10 +1,12 @@
+import LogoMain from '../logos/LogoMain';
+
 const HeaderMain = (props) => {
   // const { } = props;
 
   return (
     <header className="m-header-main header-main">
       <div className="content-box">
-        <h2>Logo</h2>
+        <LogoMain />
       </div>
     </header>
   );
diff --git a/05_react/unterricht/tag40/01_reusable-components-2/src/components/icons/LogoDonkey.jsx b/05_react/unterricht/tag40/01_reusable-components-2/src/components/icons/LogoDonkey.jsx
new file mode 100644
index 0000000..958a172
--- /dev/null
+++ b/05_react/unterricht/tag40/01_reusable-components-2/src/components/icons/LogoDonkey.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+const LogoDonkey = (props) => {
+  // const { } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      style={{
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        strokeLinejoin: 'round',
+        strokeMiterlimit: 2,
+      }}
+      viewBox="0 0 1613 1368">
+      <path
+        d="M1491.62 327.703c50.16-40.587 102.72-79.59 152.92-119.915l-25.83 280.393L1461.89 715c14.13 25.352 28.4 50.63 42.79 75.833 5.58 9.811 16.21 29.934 22.19 38.472-4.44 12.976-9.02 32.269-12.49 45.932l-33.12-.193c3.55-14.063 6.95-28.165 10.18-42.304-8.76-17.153-21.11-36.176-30.99-53.029-5.27-8.992-17.1-29.803-23.27-36.492-5.21-5.651-23.43-19.396-30.32-24.839l-57.69-45.595c-9.02-7.18-23.36-18.108-31.52-25.854a3790 3790 0 0 0 79.9 34.883c10.82 4.622 27.38 12.342 38.08 16.103 11.12-19.408 23.79-39.093 35.55-58.188l64.26-104.009c9.99-16.077 25.62-40.018 34.46-56.068 3.52-6.393 6.85-48.185 8.06-58.166 4.69-38.407 9.87-76.754 15.52-115.031-20.57 15.48-42.75 34.32-62.95 50.66-18.78 53.505-36.43 113.033-54.33 167.501l-28.49 86.565c-4.56 13.838-11.14 31.944-14.88 45.685l-1.29-5.393c2.3-10.028 3.74-20.126 5.56-30.234 16.33-90.641 31.56-181.542 49.86-271.809 1.47-7.288 2.87-14.507 4.66-21.727M916.43 207.704c44.769 33.604 88.1 69.829 132.46 104.027 6.86 5.295 14.41 11.109 20.87 16.827a6833 6833 0 0 1 41.74 223.08l12.21 71.991c1.13 6.395 4.09 25.45 5.79 30.617l-2.29.656-63.2-193.832-20.79-65.178c-3.86-12.199-8.24-27.736-13-39.169l-63.257-50.854c6.888 39.565 10.198 84.11 16.308 124.043 1.165 7.613 4.172 40.455 5.943 45.546 3.798 10.923 22.236 37.244 29.376 48.97l107.15 173.74a4677 4677 0 0 0 108.25-47.008l2.24 1.925-76.43 60.434c-10.13 7.985-28.28 21.239-36.65 30.226-3.2 3.426-15.5 24.819-18.4 29.725a5288 5288 0 0 0-35.02 59.795c3.1 12.683 7.7 29.414 10 41.938l-33.81-.262c-3.44-14.753-7.06-31.255-11.25-45.689 20.64-37.132 45.28-77.527 64.58-114.41l-98.43-141.667-35.592-51.293c-7.431-10.735-15.662-21.282-21.692-32.877-3.951-7.596-24.618-247.999-27.106-281.301M1219.69 1043.31c-2.79 11.8-4.44 28.03-5.98 40.2a2515 2515 0 0 1-7.3 53.97c7.43-7.73 15.18-16.75 22.37-24.81 2.7 1.21 2.96 1.43 5.42 3.19a4097 4097 0 0 1-29.29 58.56c-3.39 6.68-6.69 13.57-10.19 20.18-8.9 16.79-13.05 34.84-18.29 53.06-7.31 25.95-14.78 51.86-22.41 77.72 29.16 31.72 57.06 65.29 86.41 96.65l79.84.12c29.14-32.13 58.08-64.46 86.8-96.96-7.36-24.61-14.47-49.3-21.32-74.06-2.95-10.48-8.92-33.48-12.97-42.64-16.66-37.69-39.38-75.63-56.08-113.18 12.72 14.11 25.24 28.4 37.55 42.88-1.84-24.97-8.32-69.86-12.78-94.57 22.96 27.5 22.08 32.06 32.81 65.94l26.31 85.23c2.35-12.28 6.53-25.88 9.7-38.07 7.2-27.71 15.04-55.22 22.13-82.97 12.56-3.77 25.18-7.36 37.85-10.78-8.99 41.63-24.44 87.16-34.93 128.96-4.2 16.7-13.62 43.59-15.3 60.63-.36 3.71 6.94 28.11 8.48 33.53l13.08 47.36c-28.13 31.05-55.29 63.24-83.3 94.42-7.69 8.55-15.67 17.5-22.76 26.53l-110.06-.33-64.65-73.47c-11.64-13.15-31.3-34.1-41.59-47.75l22.85-81.08c-11.31-42.62-23.52-84.52-35.15-127.01-5.25-19.17-11.95-42.36-15.92-61.67 12.36 4.1 24.88 7.67 37.55 10.69 9.64 40.03 21.73 80.74 31.86 121.14l25.5-82.82c4.34-13.98 9.5-32.1 15.2-45.17 1.37-3.13 15.62-20.04 18.56-23.62"
+        style={{ fill: '#191718', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="m964.12 882.509 239.67-.074c13.59 20.302 31.54 50.85 45.26 69.391-8.47 20.506-15.69 44.657-26.34 63.724-1.18 2.1-8.52 9.15-10.59 11.14-10.43 10.51-20.99 20.9-31.66 31.16-8.75 1.53-41.47 8.39-48.68 6.63-26.22-6.38-55.05-14.85-81.11-21.95-19.01-36.57-41.53-80.543-61.641-116.025a1284 1284 0 0 0-25.205-4.923c-.019-12.682-.298-26.499.296-39.073M1363.24 882.527c50.58-.964 101.17.756 151.75.291 27.29-.25 54.56-.202 81.85.189.15 12.787.18 25.576.08 38.365-8.5 1.772-17.12 3.762-25.61 5.634-15.98 33.554-39.64 74.894-57.39 108.124l-3.86 7.48c-25.69 7.76-54.32 15.66-80.31 21.45-6.66 1.49-41.79-3.49-47.46-7.01-13.08-8.13-30.93-29.46-43.47-40.05-10.32-20.237-18.51-44.265-26.57-65.342 13.31-21.086 29.21-46.841 43.74-67.508 1.43-2.037 4.48-1.524 7.25-1.623M1105.1 451.694c18.65 19.331 38.41 42.116 56.52 62.25l83.17 91.532c23.27.452 47.86.066 71.21.081 13.24-15.514 29.43-32.381 43.32-47.742l95.45-105.291-28.59 95.591c-2.89 9.652-11.85 41.969-15.48 48.649-9.2 16.895-24.99 39.914-35.95 56.324 8.15-30.165 17.07-59.243 25.78-89.16-23.07 24.539-46.59 50.88-69.56 75.834-12.26-1.991-44.55-9.279-54.75-8.337-9.51.88-35.49 6.248-46.2 8.138-21.8-22.92-42.44-47.348-64.73-70.362l-1.9 4.379c7.01 20.276 17.9 58.239 22.78 78.745-6.83-10.254-32.61-46.3-35.76-55.657-15.21-45.196-32.08-99.555-45.31-144.974"
+        style={{ fill: '#191718', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1163.39 573.58c-.53-1.911-2.27-6.066-1.77-7.836.39-1.389 3.52 3.22 3.67 3.457z"
+        style={{ fill: '#e5e4e3', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="m1228.3 712.716-51.05 109.261c10.51 14.694 21.42 28.793 31.75 43.736 10.45 8.923 17.47 28.514-.82 3.377-8.3.314-53.46 1.157-59.01-.748-18.66-9.899-41.78-24.482-60.51-35.383 10.48-6.333 29.32-15.479 38.23-21.915 9.55-6.911 27.61-25.515 36.82-34.538a6925 6925 0 0 0 64.59-63.79"
+        style={{ fill: '#191718', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1209 865.713c10.45 8.923 17.47 28.514-.82 3.377-8.3.314-53.46 1.157-59.01-.748 9.58-.81 56.02 2.035 59.83-2.629"
+        style={{ fill: '#343233', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1333.39 713.392c22.08 20.842 44.52 43.333 66.07 64.859 25.77 25.757 39.27 38.47 72.66 54.093-12.27 7.382-52.54 29.822-61.32 36.806-13.27.161-46.06 1.235-58.06.042-.51-1.27-.85-2.124-1.46-3.355a4142 4142 0 0 1 32.59-43.676c-16.83-35.749-34.59-72.692-50.48-108.769M1239.83 891.5c31.61-.635 66.23.218 98.01.513-9.84 14.657-19.23 29.851-28.96 44.645-3.97.074-14.65-9.322-24.74-10.04-13.74-.978-21.17 2.842-31.7 10.948-10.02-13.53-20.57-31.242-30.18-45.719zM1202.02 1241.87c.19-.83.17-1.41.78-1.89 1.93-.29 1.21 8.99 1.18 10.29l1.52 33.97c15.15 16.78 30.48 33.39 46.01 49.82 1.19 7.9 5.49 22.85 7.63 31.1-22.5-13.88-55.83-38.68-78.2-54.25 6.63-23.33 14.42-45.89 21.08-69.04"
+        style={{ fill: '#191718', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1202.02 1241.87c.19-.83.17-1.41.78-1.89 1.93-.29 1.21 8.99 1.18 10.29-.65-2.95-1.14-5.47-1.96-8.4"
+        style={{ fill: '#828080', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1356.86 1249.9c-.02-1.64-.45-9.44.8-10.31 1.4.25 1.71 3.54 1.97 4.76 7.02 22.26 13.86 43.81 19.96 66.33-24.57 18.49-53.29 37.07-78.72 55.08 3.26-10.11 6.52-21.35 8.5-31.79 14.28-14.97 33.11-34.63 46.26-50.24.44-10.07 1.44-24.06 1.23-33.83"
+        style={{ fill: '#191718', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1356.86 1249.9c-.02-1.64-.45-9.44.8-10.31 1.4.25 1.71 3.54 1.97 4.76-2.27.24-2.13 3.36-2.77 5.55"
+        style={{ fill: '#696667', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1228.78 1112.67c5.63-6.04 10.48-12.13 16.38-18.33l-10.96 21.52c-2.46-1.76-2.72-1.98-5.42-3.19M1351.28 865.837c.61 1.231.95 2.085 1.46 3.355-2.65 2.491-8.35 11.377-9.77 11.688-6.67 1.463 7.44-14.177 8.31-15.043"
+        style={{ fill: '#343233', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1432.83 656.866c-.22.65-1.41 5.326-2.33 5.299-1.11-1.466.64-8.806 1.04-10.692zM1129.5 654.246c.23 1.147 1.57 6.673.48 7.453-1.55-.204-2.46-5.482-2.77-6.797z"
+        style={{ fill: '#696667', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+      <path
+        d="M1233.99 651.16c4.95-2.98 8.72-3.172 2.24 1.925z"
+        style={{ fill: '#343233', fillRule: 'nonzero' }}
+        transform="translate(-506 -152)"
+      />
+    </svg>
+  );
+};
+export default LogoDonkey;
diff --git a/05_react/unterricht/tag40/01_reusable-components-2/src/components/logos/LogoMain.jsx b/05_react/unterricht/tag40/01_reusable-components-2/src/components/logos/LogoMain.jsx
new file mode 100644
index 0000000..d74f500
--- /dev/null
+++ b/05_react/unterricht/tag40/01_reusable-components-2/src/components/logos/LogoMain.jsx
@@ -0,0 +1,13 @@
+import LogoDonkey from '../icons/LogoDonkey';
+
+const LogoMain = (props) => {
+  // const { } = props;
+
+  return (
+    <figure className="m-logo-main logo-main">
+      <LogoDonkey />
+      <figcaption>IA - JS Course</figcaption>
+    </figure>
+  );
+};
+export default LogoMain;
diff --git a/05_react/unterricht/tag40/01_reusable-components-2/src/styles/03_base/_theme.scss b/05_react/unterricht/tag40/01_reusable-components-2/src/styles/03_base/_theme.scss
index b2db8ea..a892494 100644
--- a/05_react/unterricht/tag40/01_reusable-components-2/src/styles/03_base/_theme.scss
+++ b/05_react/unterricht/tag40/01_reusable-components-2/src/styles/03_base/_theme.scss
@@ -6,7 +6,8 @@ html {
 }
 
 html,
-body {
+body,
+#root {
   height: 100%;
   padding: 0;
   margin: 0;
@@ -17,7 +18,8 @@ body {
 }
 
 // Sticky footer
-body {
+body,
+#root {
   display: flex;
   flex-direction: column;
 }
diff --git a/05_react/unterricht/tag40/01_reusable-components-2/src/styles/05_modules/_index.scss b/05_react/unterricht/tag40/01_reusable-components-2/src/styles/05_modules/_index.scss
index 3d489bd..b336e44 100644
--- a/05_react/unterricht/tag40/01_reusable-components-2/src/styles/05_modules/_index.scss
+++ b/05_react/unterricht/tag40/01_reusable-components-2/src/styles/05_modules/_index.scss
@@ -2,6 +2,6 @@
 @import 'footer-main';
 @import 'header-main';
 @import 'inputAmount';
-// @import 'logo-main';
+@import 'logo-main';
 // @import 'menu-main';
 // @import 'product-manager';