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;
+}