diff --git a/frontend/public/images/gradientnormal.png b/frontend/public/images/gradientnormal.png new file mode 100644 index 0000000..a8ba71d Binary files /dev/null and b/frontend/public/images/gradientnormal.png differ diff --git a/frontend/src/app/home/page.jsx b/frontend/src/app/home/page.jsx index 630aeb6..06d4253 100644 --- a/frontend/src/app/home/page.jsx +++ b/frontend/src/app/home/page.jsx @@ -49,10 +49,47 @@ const HomePage = () => { {/* Logo */} -
+
+
+
{/* Link */} -
+
+
+
+ + + + + +

Connected to https://isaac.dev.onecoopbank.com

+
+
+
{/* Extra Space */}
diff --git a/frontend/src/app/home/styles.module.css b/frontend/src/app/home/styles.module.css index 4eb61f5..f4d21e5 100644 --- a/frontend/src/app/home/styles.module.css +++ b/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; +}