done users page layout

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;