From 5739309790c723acf392cdcc37c418b333ddb15a Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Fri, 23 Oct 2026 13:07:02 +0200
Subject: [PATCH]

---
 .../tag35/01_reusable-components/src/App.jsx  | 24 +++---
 .../src/components/footers/FooterMain.jsx     | 78 +++++++++++++++++++
 .../src/styles/03_base/_theme.scss            | 22 +++++-
 .../src/styles/05_modules/_footerMain.scss    | 45 +++++++++++
 .../src/styles/05_modules/_index.scss         |  1 +
 06_react/unterricht/tag35/meeting.md          |  6 ++
 6 files changed, 165 insertions(+), 11 deletions(-)
 create mode 100644 06_react/unterricht/tag35/01_reusable-components/src/components/footers/FooterMain.jsx
 create mode 100644 06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_footerMain.scss
 create mode 100644 06_react/unterricht/tag35/meeting.md

diff --git a/06_react/unterricht/tag35/01_reusable-components/src/App.jsx b/06_react/unterricht/tag35/01_reusable-components/src/App.jsx
index b835297..2154ac3 100644
--- a/06_react/unterricht/tag35/01_reusable-components/src/App.jsx
+++ b/06_react/unterricht/tag35/01_reusable-components/src/App.jsx
@@ -1,4 +1,5 @@
 import Button from './components/buttons/Button';
+import FooterMain from './components/footers/FooterMain';
 import HeaderMain from './components/headers/HeaderMain';
 import InputAmount from './components/inputs/InputAmount';
 
@@ -8,17 +9,20 @@ function App(props) {
   return (
     <>
       <HeaderMain />
-      <div className="container py-5">
-        <h2>Reusable Components</h2>
+      <main id="main">
+        <div className="container py-5">
+          <h2>Reusable Components</h2>
 
-        <InputAmount />
-        <hr />
-        <Button variant="primary">New Styled Button</Button>
-        <br />
-        <Button variant="dark">Button 2</Button>
-        <br />
-        <Button>Button 3</Button>
-      </div>
+          <InputAmount />
+          <hr />
+          <Button variant="primary">New Styled Button</Button>
+          <br />
+          <Button variant="dark">Button 2</Button>
+          <br />
+          <Button>Button 3</Button>
+        </div>
+      </main>
+      <FooterMain />
     </>
   );
 }
diff --git a/06_react/unterricht/tag35/01_reusable-components/src/components/footers/FooterMain.jsx b/06_react/unterricht/tag35/01_reusable-components/src/components/footers/FooterMain.jsx
new file mode 100644
index 0000000..5006bda
--- /dev/null
+++ b/06_react/unterricht/tag35/01_reusable-components/src/components/footers/FooterMain.jsx
@@ -0,0 +1,78 @@
+const FooterMain = (props) => {
+  // const { } = props;
+
+  return (
+    <footer className="m-footer-main footer-main">
+      <div className="container">
+        <div className="row">
+          <div className="col-12 col-md-4">
+            <div className="mb-3">
+              <h3>Address</h3>
+              <address>
+                John Wick
+                <br />
+                Musterstr. 33
+                <br />
+                5555 Frankfurt
+                <br />
+                Germany
+              </address>
+            </div>
+          </div>
+          <div className="col-12 col-md-4">
+            <div className="mb-3">
+              <h3>Links</h3>
+              {/* nav.menu-footer>ul.list>li*2>a[href="#"]{Link $} */}
+              <nav className="menu-footer">
+                <ul className="list">
+                  <li>
+                    <a href="#">Link 1</a>
+                  </li>
+                  <li>
+                    <a href="#">Link 2</a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div className="col-12 col-md-4">
+            <div className="mb-3">
+              <h3>Socials</h3>
+              {/* nav.menu-social>ul.list>li*5>a[href="#"]>span{Link $} */}
+              <nav className="menu-social">
+                <ul className="list">
+                  <li>
+                    <a href="#">
+                      <span>X (Twitter)</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Instagram</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Medium</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Twitch</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Youtube</span>
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default FooterMain;
diff --git a/06_react/unterricht/tag35/01_reusable-components/src/styles/03_base/_theme.scss b/06_react/unterricht/tag35/01_reusable-components/src/styles/03_base/_theme.scss
index 1c7e05a..26b9863 100644
--- a/06_react/unterricht/tag35/01_reusable-components/src/styles/03_base/_theme.scss
+++ b/06_react/unterricht/tag35/01_reusable-components/src/styles/03_base/_theme.scss
@@ -7,9 +7,29 @@ html {
 }
 
 html,
-body {
+body,
+#root,
+#app {
   height: 100%;
 }
+// Sticky Footer
+body,
+#root,
+#app {
+  display: flex;
+  flex-direction: column;
+}
+
+main,
+#main {
+  flex: 1 0 auto;
+}
+
+body > footer,
+.footer-main {
+  flex-shrink: 0;
+}
+// sticky end
 
 body {
   margin: 0;
diff --git a/06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_footerMain.scss b/06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_footerMain.scss
new file mode 100644
index 0000000..fd73f7c
--- /dev/null
+++ b/06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_footerMain.scss
@@ -0,0 +1,45 @@
+@use '../03_base/colors' as *;
+
+.footer-main {
+  background-color: $color-black;
+  background: $linear-gradient-dark;
+  padding: 3rem 0;
+  [class^='col'] {
+    color: $color-white;
+    a {
+      color: $color-white;
+    }
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 1.5rem;
+      color: $color-2;
+      padding: 0.5rem 0;
+      margin-bottom: 1rem;
+      letter-spacing: 2px;
+    }
+  }
+  // Mobile First
+  .row {
+    flex-direction: column;
+    > div {
+      &:nth-child(1) {
+        order: 3;
+      }
+      &:nth-child(2) {
+        order: 2;
+      }
+      &:nth-child(3) {
+        order: 1;
+      }
+    }
+  }
+  @media (min-width: 992px) {
+    // @include media-breakpoint-up(md) {
+    .row {
+      flex-direction: row;
+    }
+  }
+}
diff --git a/06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_index.scss b/06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_index.scss
index 594a29d..484b0de 100644
--- a/06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_index.scss
+++ b/06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_index.scss
@@ -1,5 +1,6 @@
 @forward 'button';
 // @forward 'chuck-norris-joke';
+@forward 'footerMain';
 @forward 'header-main';
 @forward 'input-amount';
 @forward 'logo-main';
diff --git a/06_react/unterricht/tag35/meeting.md b/06_react/unterricht/tag35/meeting.md
new file mode 100644
index 0000000..bf53583
--- /dev/null
+++ b/06_react/unterricht/tag35/meeting.md
@@ -0,0 +1,6 @@
+# Meeting Fr. 23.10.2026
+
+- [ ] Benjamin 14:20 - 14:30
+- [ ] Christian 14:30 - 14:40
+- [ ] Florian 14:40 - 14:50
+- [ ] Stefan 14:50 - 15:00
\ No newline at end of file