From d2cba825ec0451b547d2b09be279f2d98b752ae5 Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Mon, 2 Mar 2026 16:46:25 +0800
Subject: [PATCH] done users page layout

---
 frontend/src/app/home/page.jsx          | 59 ++++++++++++++-
 frontend/src/app/home/styles.module.css | 98 +++++++++++++++++++++++++
 2 files changed, 156 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/home/page.jsx b/frontend/src/app/home/page.jsx
index ef59498..630aeb6 100644
--- a/frontend/src/app/home/page.jsx
+++ b/frontend/src/app/home/page.jsx
@@ -1,7 +1,64 @@
 import React from "react";
+import userDashboardStyle from "./styles.module.css";
 
 const HomePage = () => {
-  return <div></div>;
+  return (
+    // Main
+    <div className={userDashboardStyle.mainWrapper}>
+      <div className={userDashboardStyle.mainContainer}>
+        <div className={userDashboardStyle.userDashContainer}>
+          {/* User Name */}
+          <div className={userDashboardStyle.userNameContainer}>
+            {/* Name and Welcome Msg */}
+            <div className={userDashboardStyle.nameSection}>
+              {/* Weather */}
+              <div className={userDashboardStyle.weather}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path
+                    d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
+                    stroke="white"
+                    strokeWidth={1.5}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
+                    stroke="white"
+                    strokeWidth={1.5}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+                <p>
+                  Friday, Feb 23
+                  <span className={userDashboardStyle.ordinal}>rd</span>
+                </p>
+              </div>
+              {/* Name */}
+              <div className={userDashboardStyle.name}>
+                <p className={userDashboardStyle.welcomeGreet}>Hi, Grills!</p>
+                <p className={userDashboardStyle.welcomeMsg}>
+                  Welcome to the ISAAC IDP!
+                </p>
+              </div>
+            </div>
+            {/* Logo */}
+            <div className={userDashboardStyle.logoSection}></div>
+          </div>
+          {/* Link */}
+          <div></div>
+          {/* Extra Space */}
+          <div></div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default HomePage;
diff --git a/frontend/src/app/home/styles.module.css b/frontend/src/app/home/styles.module.css
index e69de29..4eb61f5 100644
--- a/frontend/src/app/home/styles.module.css
+++ b/frontend/src/app/home/styles.module.css
@@ -0,0 +1,98 @@
+.mainWrapper {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.mainContainer {
+  display: flex;
+  padding: 36px;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+  background: color(display-p3 0.098 0.102 0.1373);
+}
+.userDashContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+  background: color(display-p3 0.098 0.102 0.1373);
+}
+.userNameContainer {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #21232f;
+  background: color(display-p3 0.1294 0.1373 0.1804);
+}
+.nameSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+}
+.logoSection {
+  display: flex;
+  padding-right: 16px;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  align-self: stretch;
+}
+.weather {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
+.weather > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.18px;
+}
+
+.ordinal {
+  font-size: 0.6em;
+  vertical-align: super;
+}
+.name {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 48px;
+  align-self: stretch;
+}
+.welcomeGreet {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.24px;
+}
+.welcomeMsg {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.4px;
+}