Dashboard with cards

src/App.tsx

@@ -1,14 +1,11 @@
 import "@/App.css";
-import Flatastic from "@/components/Flatastic/Flatastic";
-import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
-import Timetable from "@/components/Timetable/Timetable";
+
+import Dashboard from "@/components/Dashboard/Dashboard";
 
 function App() {
     return (
         <>
-            <Timetable />
-            <Flatastic />
-            <HomeAssistant />
+            <Dashboard />
         </>
     );
 }

src/components/Dashboard/Dashboard.tsx

@@ -0,0 +1,25 @@
+import Flatastic from "@/components/Flatastic/Flatastic";
+import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
+import Timetable from "@/components/Timetable/Timetable";
+
+import style from "./style.module.css";
+
+export default function Dashboard() {
+    return (
+        <div className={style.dashboard}>
+            <div className={style.cardWrapper}>
+                <div className={style.card}>
+                    <Timetable />
+                </div>
+                <div className={style.card}>
+                    <Flatastic />
+                </div>
+                <div className={style.card}>
+                    <HomeAssistant />
+                </div>
+            </div>
+
+            <div className={style.footer}></div>
+        </div>
+    );
+}

src/components/Dashboard/style.module.css

@@ -0,0 +1,18 @@
+.dashboard {
+
+}
+
+.cardWrapper {
+}
+
+.card {
+  border-radius: 10px;
+  padding: 1px 100px 30px 100px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(220, 220, 220, 0.4);
+  box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
+}
+
+.footer {
+  background-color: red;
+}

src/components/DepartureList/DepartureList.tsx

@@ -58,11 +58,13 @@ export default function DepartureList(props: {
 
     return (
         <div className={style.container}>
-            <h2>{name} Departures</h2>
+            <div className={style.heading}>
+                <h2>{name}</h2>
+            </div>
             <div className={style.departureLists}>
-            {departureTables(left)}
-            {departureTables(right)}
-        </div>
+                {departureTables(left)}
+                {departureTables(right)}
+            </div>
         </div>
     );
 }

src/components/DepartureList/style.module.css

@@ -1,7 +1,12 @@
 .container {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
+    border: 1px solid rgba(220, 220, 220, 0.4);
+    box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
+    border-radius: 10px;
+    padding: 0 10px 10px 10px;
+    margin-bottom: 20px;
 }
 
 .departureLists {
@@ -9,4 +14,9 @@
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    gap: 120px;
+}
+
+.heading {
+    text-align: left;
 }

src/components/Timetable/Timetable.tsx

@@ -19,7 +19,7 @@ export default function Timetable() {
 
     return (
         <div className={style.wrapper}>
-            <h1>Timetable</h1>
+            <h1>Timetable 🚉</h1>
             <DepartureList departures={pStreet.departureList} name="P-Street" />
             <DepartureList departures={hStreet.departureList} name="H-Street" />
         </div>

src/components/Timetable/style.module.css

@@ -1,5 +0,0 @@
-.wrapper {
-    border-radius: 10px;
-    padding: 1px 100px 30px 100px;
-    box-shadow: 5px 5px 10px #aeaeae;
-}

src/components/TimetableRow/style.module.css

@@ -8,7 +8,6 @@ td {
 
 .departureTime {
     font-weight: 600;
-    /* background-color: rgba(180, 180, 180, 0.1); */
 }
 
 .lineNumber {