done home page

frontend/src/app/home/page.jsx

@@ -49,10 +49,47 @@ const HomePage = () => {
               </div>
             </div>
             {/* Logo */}
-            <div className={userDashboardStyle.logoSection}></div>
+            <div className={userDashboardStyle.logoSection}>
+              <div className={userDashboardStyle.gradientGlass}></div>
+            </div>
           </div>
           {/* Link */}
-          <div></div>
+          <div className={userDashboardStyle.linkMainContainer}>
+            <div className={userDashboardStyle.linkContainer}>
+              <div className={userDashboardStyle.link}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path
+                    d="M9 15L15 9"
+                    stroke="#969AF9"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M11 6.00031L11.463 5.46431C12.4008 4.52663 13.6727 3.99991 14.9989 4C16.325 4.00009 17.5968 4.527 18.5345 5.46481C19.4722 6.40261 19.9989 7.6745 19.9988 9.00066C19.9987 10.3268 19.4718 11.5986 18.534 12.5363L18 13.0003"
+                    stroke="#969AF9"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M13.0001 18L12.6031 18.534C11.6544 19.4722 10.3739 19.9984 9.03964 19.9984C7.70535 19.9984 6.42489 19.4722 5.47614 18.534C5.0085 18.0716 4.63724 17.521 4.38385 16.9141C4.13047 16.3073 4 15.6561 4 14.9985C4 14.3408 4.13047 13.6897 4.38385 13.0829C4.63724 12.476 5.0085 11.9254 5.47614 11.463L6.00014 11"
+                    stroke="#969AF9"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+                <p>Connected to https://isaac.dev.onecoopbank.com</p>
+              </div>
+            </div>
+          </div>
           {/* Extra Space */}
           <div></div>
         </div>

frontend/src/app/home/styles.module.css

@@ -31,6 +31,8 @@
   border-radius: 8px;
   background: #21232f;
   background: color(display-p3 0.1294 0.1373 0.1804);
+  position: relative;
+  overflow: hidden;
 }
 .nameSection {
   display: flex;
@@ -46,6 +48,16 @@
   justify-content: flex-end;
   align-items: center;
   align-self: stretch;
+  position: absolute;
+  right: 0;
+}
+.gradientGlass {
+  width: 210px;
+  height: 339px;
+  /* aspect-ratio: 75/75; */
+  background: url(/images/gradientnormal.png) rgba(211, 211, 211, 0) 50% / cover
+    no-repeat;
+  transform: translate(-15px, -60px);
 }
 .weather {
   display: flex;
@@ -96,3 +108,38 @@
   line-height: normal;
   letter-spacing: 0.4px;
 }
+
+.linkMainContainer {
+  display: flex;
+  padding: 54px 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.linkContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+}
+.link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.link > p {
+  color: #959aff;
+  color: color(display-p3 0.5892 0.6031 0.9766);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.18px;
+  width: 463px;
+}