Windows look update

src/components/Footer/Footer.tsx

@@ -8,9 +8,23 @@ export default function Footer() {
 
     return (
         <div className={style.container}>
-            <div className={style.info}>BREAKING</div>
-            <div className={style.marquee}>
-                <Marquee>{pasta}</Marquee>
+            <div className={style.taskbar}>
+                <div className={style.startButton}>
+                    <img className={style.startIcon} src="resources/weed.png" />
+                    Start
+                </div>
+                <span className={style.divider}></span>
+                <div className={style.windows}>
+                    <span className={style.window}>🕐 Timetable</span>
+                    <span className={style.window}>🧹 Flatastic</span>
+                    <span className={style.window}>🏠 HomeAssistant</span>
+                </div>
+            </div>
+            <div className={style.newsticker}>
+                <div className={style.info}>BREAKING</div>
+                <div className={style.marquee}>
+                    <Marquee>{pasta}</Marquee>
+                </div>
             </div>
         </div>
     );

src/components/Footer/style.module.css

@@ -1,17 +1,77 @@
 .container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 20px;
+}
+
+.taskbar {
+    font-weight: bold;
+    height: 35px;
+    display: flex;
+    flex-direction: row;
+    text-align: left;
+}
+
+.startButton {
+    display: inline-flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100px;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
+}
+
+.startIcon {
+    height: 30px;
+}
+
+.divider {
+    margin: auto 8px;
+    width: 4px;
+    height: 25px;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
+}
+
+.windows {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+}
+
+.window {
+    min-width: 150px;
+    padding-left: 10px;
+    display: inline-flex;
+    align-items: center;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
+}
+
+.newsticker {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
 }
 
 .info {
-  background-color: red;
-  color: white;
-  font-weight: bold;
-  padding: 5px;
+    background-color: red;
+    color: white;
+    font-weight: bold;
+    padding: 5px;
 }
 
 .marquee {
-
 }