Merge pull request #137 from PrivateAIM/133-improve-landing-page

133 improve landing page
PrivateAIM · Jan 7, 2025 · e946889 · e946889
2 parents 6e3a218 + d2589dd
commit e946889
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 43 deletions.
diff --git a/app.vue b/app.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+import MenuHeader from "~/components/header/MenuHeader.vue";
+import Footer from "~/components/Footer.vue";
+</script>
+
 <template>
   <Toast position="top-right" />
   <NuxtLoadingIndicator />
@@ -7,4 +12,3 @@
   </NuxtLayout>
   <Footer />
 </template>
-<script setup lang="ts"></script>
diff --git a/assets/img/hospital_learning.webp b/assets/img/hospital_learning.webp
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -12,7 +12,7 @@
             <i class="pi pi-github" style="padding-right: 5px"></i>Submit an
             Issue</a
           >
-          - © 2024
+          - © 2025
           <a href="https://privateaim.de/">PrivateAim</a>
         </div>
         <div class="copyright"></div>

diff --git a/components/KeycloakAuth.vue b/components/KeycloakAuth.vue
diff --git a/components/login/AvatarButton.vue → components/header/AvatarButton.vue b/components/login/AvatarButton.vue → components/header/AvatarButton.vue
diff --git a/components/MenuHeader.vue → components/header/MenuHeader.vue b/components/MenuHeader.vue → components/header/MenuHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import AvatarButton from "~/components/login/AvatarButton.vue";
+import AvatarButton from "~/components/header/AvatarButton.vue";
 const { loggedIn } = useOidcAuth();
 
 const items = ref([

diff --git a/components/landing/KeycloakAuth.vue b/components/landing/KeycloakAuth.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const { loggedIn, login } = useOidcAuth();
+</script>
+
+<template>
+  <div class="keycloak-login-btn landing-btn">
+    <!--    <div class="login-welcome" v-if="loggedIn">-->
+    <!--      <span class="login-welcome-msg"-->
+    <!--        >Welcome <b>{{ user.userName || "Friend" }}</b-->
+    <!--        >!</span-->
+    <!--      >-->
+    <!--      <Button @click="logout()" severity="warning" outlined>Logout</Button>-->
+    <!--    </div>-->
+    <div v-if="!loggedIn">
+      <Button @click="login()" severity="success" outlined
+        >Login with Keycloak</Button
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login-welcome {
+  display: flex;
+  flex-direction: row;
+  justify-content: safe center;
+  align-items: center;
+  margin-top: 2em;
+  font-size: 1.1em;
+}
+
+.login-welcome-msg {
+  margin-right: 2em;
+}
+</style>
diff --git a/components/landing/LandingButtons.vue b/components/landing/LandingButtons.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import KeycloakAuth from "~/components/landing/KeycloakAuth.vue";
+
+const { loggedIn } = useOidcAuth();
+</script>
+
+<template>
+  <div class="landing-buttons">
+    <div class="login-or-learn-container" v-if="!loggedIn">
+      <KeycloakAuth />
+      <div class="learn-more-btn landing-btn">
+        <NuxtLink
+          to="https://privateaim.de/de/index.html"
+          target="_blank"
+          rel="noopener"
+        >
+          <Button label="privateaim" severity="contrast" outlined
+            >Learn More</Button
+          >
+        </NuxtLink>
+      </div>
+    </div>
+    <div class="get-started-container" v-else>
+      <h2 style="text-align: center">What would you like to do today?</h2>
+      <div class="get-started-btns">
+        <a class="get-started-btn" href="/projects">
+          <i class="pi pi-objects-column get-started-btn-icon" />
+          <p>Review projects and their statuses</p>
+        </a>
+        <a class="get-started-btn" href="/analyses">
+          <i class="pi pi-lightbulb get-started-btn-icon" />
+          <p>Inspect individual analyses</p>
+        </a>
+        <a class="get-started-btn" href="/data-stores/create">
+          <i class="pi pi-hammer get-started-btn-icon" />
+          <p>Create a data store for a project</p>
+        </a>
+        <a class="get-started-btn" href="/data-stores">
+          <i class="pi pi-wrench get-started-btn-icon" />
+          <p>Manage the active data stores</p>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login-or-learn-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.landing-btn {
+  margin: 1em;
+}
+
+.get-started-container {
+  margin-top: 5em;
+}
+
+.get-started-btns {
+  display: flex;
+  flex-direction: row;
+  justify-content: safe center;
+  margin: auto;
+}
+
+.get-started-btn {
+  width: 40%;
+  border: solid 2px rgba(gray, 0.2);
+  background: none;
+  text-decoration: none;
+  text-align: center;
+  color: deepskyblue;
+  padding: 0.4em;
+}
+
+.get-started-btn:hover {
+  border-bottom: solid 2px yellow;
+  margin-bottom: -2px;
+  background-color: black;
+}
+
+.get-started-btn:not(:last-child) {
+  border-right: solid 1px rgba(gray, 0.2);
+}
+
+.get-started-btn:not(:first-child) {
+  border-left: solid 1px rgba(gray, 0.2);
+}
+
+.get-started-btn-icon {
+  margin: 0.3em;
+  font-size: 3em;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,16 +1,28 @@
 <script setup lang="ts">
-import KeycloakAuth from "~/components/KeycloakAuth.vue";
+import LandingButtons from "~/components/landing/LandingButtons.vue";
 </script>
 
 <template>
   <div id="home" class="row">
     <div class="col-6 welcome">
-      <h1>FLAME Node UI</h1>
-      <KeycloakAuth />
+      <div class="welcome-text">
+        <h1><span style="color: orangered">FLAME</span> Node UI</h1>
+        <h2 style="margin-block-start: 0">
+          A federated learning platform dedicated to preserving
+          <span style="color: blueviolet">privacy</span> and
+          <span style="color: blueviolet">security</span>
+        </h2>
+        <p>
+          Contribute to the Medical Informatics Initiative (MII) by becoming
+          part of a federated network focused on improving healthcare, while
+          maintaining full control of who has access to your data.
+        </p>
+      </div>
+      <div class="landing-btns"><LandingButtons /></div>
     </div>
-    <div class="col-6">
+    <div class="col-6 landing-img">
       <img
-        src="../assets/img/hospital_network.jpg"
+        src="@/assets/img/hospital_network.jpg"
         alt="Hospital Network"
         class="pimg networkImg"
       />
@@ -21,25 +33,26 @@ import KeycloakAuth from "~/components/KeycloakAuth.vue";
 <style lang="scss">
 #home {
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
 }
 
 .welcome {
   margin: 20px;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  width: 40%;
 }
 
 .pimg {
-  height: 650px;
-  float: right;
-  display: flex;
+  height: 35em;
 }
 
-.row {
+.landing-img {
+  align-items: end;
   display: flex;
+  float: right;
+  margin: 1em;
 }
 
 .p-tabview-header {

diff --git a/pages/test.vue b/pages/test.vue