Start implementation new design

8 files changed, 88 insertions, 16 deletions

diff --git a/ufund-ui/public/jf.png b/ufund-ui/public/jf.png
new file mode 100644
index 0000000..bbf95d5
--- /dev/null
+++ b/ufund-ui/public/jf.png
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 17bbed7..5596cf8 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -8,23 +8,38 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: light-dark(#d3d3d3, black) solid 1px;
-    padding: 0 10px;
-    background-color: light-dark(#f5f5f5, #2e2e2e);
+    /*border-bottom: light-dark(#d3d3d3, black) solid 1px;*/
+    padding: 15px 20px;
+    /*background-color: light-dark(#f5f5f5, #2e2e2e);*/
+    z-index: 2;
 
     h1 {
         padding: 0;
         margin: 0;
-
+        font-weight: 500;
+        /*text-decoration: none;*/
+        text-transform: uppercase;
+        font-size: 16pt;
+        letter-spacing: .5px;
     }
 
     div {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: 20px;
     }
 
+    /*div:has(a:hover) a {*/
+    /*    color: light-dark(black, rgba(255, 255, 255, 0.5));*/
+    /*}*/
+
     a {
         color: light-dark(black, white);
+        text-decoration: none;
+    }
+
+    a:hover {
+        /*color: light-dark(black, white)*/
+        text-decoration: underline;
     }
 }
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index 3058117..b0ee329 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,14 +1,14 @@
 <div id="header">
-    <span>
+    <div>
         <a routerLink="/">
             <h1>Jelly Solutions</h1>
         </a>
-    </span>
+    </div>
     <div>
         <a routerLink="/dashboard">Dashboard</a>
         <a routerLink="/cupboard">Cupboard</a>
         <a routerLink="/basket">Basket</a>
-        <span>{{currentUser$ | async}}</span>
+<!--        <span>{{currentUser$ | async}}</span>-->
         <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
         <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
     </div>
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index 5f65225..16f3140 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -5,3 +5,33 @@
     align-items: center;
     justify-content: center;
 }
+
+#hero {
+    display: flex;
+    /*flex-direction: column;*/
+    /*align-items: start;*/
+    /*justify-content: center;*/
+}
+
+h1 {
+    font-size: 50px;
+    max-width: 1200px;
+}
+
+#jf {
+    /*position: absolute;*/
+}
+
+#right {
+    max-width: 500px;
+    max-height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*z-index: -0.5;*/
+}
+
+#left {
+    max-width: 500px;
+    z-index: 1;
+}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index b2eed0b..7a7ff96 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,2 +1,10 @@
-<h1>Helping fund coral reef and marine life conservation</h1>
-<button routerLink="/cupboard">View needs</button>
+<div id="hero">
+    <div id="left">
+        <h1>Helping fund coral reef and marine life conservation</h1>
+        <p>View our online cupboard holding all needs related to sea life preservation</p>
+        <button class="button2" routerLink="/cupboard">View needs</button>
+    </div>
+    <div id="right">
+        <img id="jf" src="jf.png" height="1024" width="1024"/>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 4bfcbb8..b56b4eb 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -3,7 +3,11 @@
     align-items: center;
     justify-content: center;
     height: 100%;
-    background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");
+    /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/
+    background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg");
+    background-blend-mode: darken;
+    margin-top: -66px
+
 }
 
 #box {
@@ -18,7 +22,7 @@
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
-    border-color: white;
+    border-color: rgb(140, 140, 255);
 }
 
 .border {
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index 0517d5e..34fe4b0 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -6,6 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
 </head>
 <body>
   <app-root></app-root>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index bad2232..49b478e 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -11,11 +11,12 @@
 html, body {
     margin: 0;
     height: 100%;
-    background-color: light-dark(white, #242424);
+    background-color: light-dark(white, #000715);
 }
 
 body {
-    font-family: sans-serif;
+    font-family: Inter, sans-serif;
+    font-optical-sizing: auto;
 }
 
 input {
@@ -33,8 +34,8 @@ input {
 
 button, .button {
     font-size: 14pt;
-    padding: 6px 10px;
-    border-radius: 5px;
+    padding: 6px 16px;
+    border-radius: 9999px;
     border-style: none;
     background-color: light-dark(#ebebeb, #3a3a3a);
 
@@ -42,3 +43,13 @@ button, .button {
         background-color: light-dark(#e1e1e1, #444444);
     }
 }
+
+.button2 {
+    text-transform: uppercase;
+    border: 1px solid #5cdbff;
+    padding: 10px 25px;
+    font-size: 12pt;
+    font-weight: 600;
+    background-color: transparent;
+    text-shadow: #5cdbff 0 0 50px;
+}