From 2ccd2b685e9c1cf34448fcdc853212d2e3af9f0d Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Wed, 8 Jul 2026 16:42:01 +0200
Subject: [PATCH 01/13] refactor: expose BaseLayout scroll container

---
 webapp/src/components/containers/BaseLayout.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/containers/BaseLayout.vue b/webapp/src/components/containers/BaseLayout.vue
index 7649ae8cb..83bb952ca 100644
--- a/webapp/src/components/containers/BaseLayout.vue
+++ b/webapp/src/components/containers/BaseLayout.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="base-container" class="flex flex-col h-full w-full overflow-y-auto">
+  <div
+    id="base-container"
+    ref="baseContainer"
+    class="flex flex-col h-full w-full overflow-y-auto"
+  >
     <main class="m-4 md:m-8 grow">
       <slot />
     </main>
@@ -33,3 +37,10 @@
     </footer>
   </div>
 </template>
+
+<script lang="ts" setup>
+import { provide, useTemplateRef } from "vue";
+
+const baseContainer = useTemplateRef<HTMLElement>("baseContainer");
+provide("scrollContainer", baseContainer);
+</script>

From c15ef452097757ba02c8007ef2e275c335e85c2d Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Wed, 8 Jul 2026 16:43:16 +0200
Subject: [PATCH 02/13] feat: add scroll button to homepage

---
 webapp/src/components/pages/HomePage.vue      | 28 +++++++++++++++++++
 .../src/components/simple/ScrollIndicator.vue | 22 +++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 webapp/src/components/simple/ScrollIndicator.vue

diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index 9b9d425b0..62b6df429 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -291,10 +291,20 @@
         </div>
       </div>
     </div>
+
+    <!-- End of content -->
+    <div ref="bottomSentinel" class="h-px"></div>
+
+    <!-- Scroll indicator -->
+    <div v-if="showScrollIndicator" class="flex justify-center">
+      <ScrollIndicator />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, useTemplateRef } from "vue";
+
 import DiscoGIF from "@/assets/gif/DiscoGIF.vue";
 import DiscoLogo from "@/assets/logos/DiscoLogo.vue";
 import TensorflowLogo from "@/assets/logos/TensorflowLogo.vue";
@@ -313,6 +323,24 @@ import DISCOllaborative from "../simple/DISCOllaborative.vue";
 import DISCO from "../simple/DISCO.vue";
 import EPFL from "@/assets/logos/EPFL.vue";
 import DiscoParticlesIcon from "@/assets/svg/DiscoParticlesIcon.vue";
+import ScrollIndicator from "../simple/ScrollIndicator.vue";
 
 const themeStore = useThemeStore();
+
+// Scroll indicator. Disappears when scrolling to the bottom of the page.
+const bottomSentinel = useTemplateRef<HTMLElement>("bottomSentinel");
+const showScrollIndicator = ref(true);
+let observer: IntersectionObserver;
+
+onMounted(() => {
+  if (!bottomSentinel.value) return;
+  observer = new IntersectionObserver(([entry]) => {
+    showScrollIndicator.value = !entry.isIntersecting;
+  });
+  observer.observe(bottomSentinel.value);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
 </script>
diff --git a/webapp/src/components/simple/ScrollIndicator.vue b/webapp/src/components/simple/ScrollIndicator.vue
new file mode 100644
index 000000000..2d755ea6b
--- /dev/null
+++ b/webapp/src/components/simple/ScrollIndicator.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="fixed flex flex-col items-center bottom-2 py-2 text-lg text-white bg-disco-cyan font-disco rounded-full duration-200 hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
+    @click="scrollDown"
+  >
+    <i class="fa-solid fa-chevron-down animate-bounce" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, type Ref } from "vue";
+
+// Inject scrollContainer from BaseLayout
+const scrollContainer = inject<Ref<HTMLElement | null>>("scrollContainer");
+
+function scrollDown() {
+  scrollContainer?.value?.scrollBy({
+    top: window.innerHeight,
+    behavior: "smooth",
+  });
+}
+</script>

From 2322376b3af1ff2d1e68c0188cc1a0ee5f339ca7 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Thu, 9 Jul 2026 10:57:03 +0200
Subject: [PATCH 03/13] feat: scroll indicator fixed on the page

---
 webapp/src/components/pages/HomePage.vue      | 30 ++-----------------
 .../src/components/simple/ScrollIndicator.vue |  2 +-
 2 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index 62b6df429..abb33bb51 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -36,6 +36,9 @@
       <div class="flex justify-center">
         <CTAButton> Start training </CTAButton>
       </div>
+      <div class="flex justify-center">
+        <ScrollIndicator />
+      </div>
     </div>
 
     <!-- 2nd screen -->
@@ -291,20 +294,10 @@
         </div>
       </div>
     </div>
-
-    <!-- End of content -->
-    <div ref="bottomSentinel" class="h-px"></div>
-
-    <!-- Scroll indicator -->
-    <div v-if="showScrollIndicator" class="flex justify-center">
-      <ScrollIndicator />
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, useTemplateRef } from "vue";
-
 import DiscoGIF from "@/assets/gif/DiscoGIF.vue";
 import DiscoLogo from "@/assets/logos/DiscoLogo.vue";
 import TensorflowLogo from "@/assets/logos/TensorflowLogo.vue";
@@ -326,21 +319,4 @@ import DiscoParticlesIcon from "@/assets/svg/DiscoParticlesIcon.vue";
 import ScrollIndicator from "../simple/ScrollIndicator.vue";
 
 const themeStore = useThemeStore();
-
-// Scroll indicator. Disappears when scrolling to the bottom of the page.
-const bottomSentinel = useTemplateRef<HTMLElement>("bottomSentinel");
-const showScrollIndicator = ref(true);
-let observer: IntersectionObserver;
-
-onMounted(() => {
-  if (!bottomSentinel.value) return;
-  observer = new IntersectionObserver(([entry]) => {
-    showScrollIndicator.value = !entry.isIntersecting;
-  });
-  observer.observe(bottomSentinel.value);
-});
-
-onBeforeUnmount(() => {
-  observer?.disconnect();
-});
 </script>
diff --git a/webapp/src/components/simple/ScrollIndicator.vue b/webapp/src/components/simple/ScrollIndicator.vue
index 2d755ea6b..939abad64 100644
--- a/webapp/src/components/simple/ScrollIndicator.vue
+++ b/webapp/src/components/simple/ScrollIndicator.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed flex flex-col items-center bottom-2 py-2 text-lg text-white bg-disco-cyan font-disco rounded-full duration-200 hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
+    class="flex flex-col items-center py-2 px-2 text-disco bg-disco font-disco rounded-full duration-200 hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
     @click="scrollDown"
   >
     <i class="fa-solid fa-chevron-down animate-bounce" />

From 8dd5d250945c34c46735a855ccd1920910dbc26b Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Thu, 9 Jul 2026 16:54:57 +0200
Subject: [PATCH 04/13] fix: panes size on homepage, make tailwind code uniform

---
 webapp/src/components/pages/HomePage.vue | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index abb33bb51..15c13e219 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="lg:mx-8">
     <!-- First screen -->
-    <div
-      class="mb-40 lg:mb-0 h-dvh gap-16 lg:gap-0 flex flex-col justify-around pb-12"
-    >
+    <div class="h-dvh flex flex-col justify-around">
       <!-- Disco logo -->
       <div class="flex flex-col justify-center items-center space-y-4">
         <div
@@ -43,7 +41,7 @@
 
     <!-- 2nd screen -->
     <div
-      class="mb-40 lg:mb-0 lg:h-dvh flex flex-col lg:flex-row gap-16 justify-center items-center"
+      class="h-dvh flex flex-col lg:flex-row gap-16 justify-center items-center"
     >
       <div class="flex flex-col justify-center text-center items-center">
         <span
@@ -63,7 +61,7 @@
       />
     </div>
     <!-- 3nd screen -->
-    <div class="mb-40 lg:pb-40 lg:mb-0 lg:h-dvh flex flex-col justify-center">
+    <div class="h-dvh flex flex-col justify-center">
       <div class="flex flex-col items-around justify-start w-full">
         <div class="mb-8 lg:mb-20 w-full text-center lg:text-center">
           <span
@@ -128,7 +126,7 @@
       </div>
     </div>
     <!-- 4th screen -->
-    <div class="mb-40 lg:mb-0 lg:h-dvh flex flex-col justify-center gap-16">
+    <div class="h-dvh flex flex-col justify-center gap-16">
       <div class="flex flex-col gap-4 items-center text-center">
         <span
           class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
@@ -169,9 +167,7 @@
     </div>
 
     <!-- 5th screen -->
-    <div
-      class="mb-40 lg:mb-0 lg:h-dvh flex flex-col gap-16 justify-center items-center"
-    >
+    <div class="h-dvh flex flex-col gap-16 justify-center items-center">
       <div class="w-full flex flex-col justify-center text-center items-center">
         <span
           class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
@@ -204,10 +200,8 @@
       </div>
     </div>
     <!-- 6th screen -->
-    <div class="lg:h-dvh flex flex-col gap-16 justify-start items-center">
-      <div
-        class="w-full flex flex-col justify-center text-center items-center lg:items-start lg:text-left"
-      >
+    <div class="h-dvh flex flex-col gap-16 justify-center items-center">
+      <div class="w-full flex flex-col justify-center text-center items-center">
         <span
           class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
         >
@@ -265,7 +259,7 @@
     </div>
     <!-- 7th screen -->
     <div
-      class="mt-32 lg:mt-0 mb-32 w-full grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
+      class="h-dvh flex flex-col lg:flex-row gap-16 justify-center items-center"
     >
       <div class="flex justify-center">
         <DiscoParticlesIcon class="w-full max-w-[200px] lg:max-w-[400px]" />

From d774be93732f7483d0af42fb941ddaeeaf8de1e5 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 11:52:28 +0200
Subject: [PATCH 05/13] build: add `cn` dependency

---
 pnpm-lock.yaml      | 8 ++++++++
 webapp/package.json | 1 +
 2 files changed, 9 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f62d4dea1..74f3cafc0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -562,6 +562,9 @@ importers:
       pinia-plugin-persistedstate-2:
         specifier: 2.0.32
         version: 2.0.32(pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)))
+      tailwind-cn:
+        specifier: 1.0.3
+        version: 1.0.3
       tippy.js:
         specifier: 6.3.7
         version: 6.3.7
@@ -4284,6 +4287,9 @@ packages:
     resolution: {integrity: sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==}
     engines: {node: '>=8.0.0'}
 
+  tailwind-cn@1.0.3:
+    resolution: {integrity: sha512-GgqNt0SvajbakZmSPFq1xeqTN2v49k9BG1ZJnl0pn3f1aMXyp6IPMKP0SKEfvo5U2WU/6wcDO2Jmt4H1P5ZGYQ==}
+
   tailwindcss@4.3.1:
     resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==}
 
@@ -8558,6 +8564,8 @@ snapshots:
       typical: 5.2.0
       wordwrapjs: 4.0.1
 
+  tailwind-cn@1.0.3: {}
+
   tailwindcss@4.3.1: {}
 
   tapable@2.3.3: {}
diff --git a/webapp/package.json b/webapp/package.json
index 2945ad5c8..a4e767f1d 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -22,6 +22,7 @@
     "immutable": "catalog:",
     "pinia": "3.0.4",
     "pinia-plugin-persistedstate-2": "2.0.32",
+    "tailwind-cn": "1.0.3",
     "tippy.js": "6.3.7",
     "vee-validate": "5.0.0-beta.0",
     "vue": "3.5.34",

From a4935767722c9843c527673953f2cb1a0e9b3deb Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 11:52:47 +0200
Subject: [PATCH 06/13] refactor: homepage tailwind cleanup

---
 webapp/src/assets/logos/AriadneLabsLogo.vue |   2 +
 webapp/src/assets/logos/EPFL.vue            |   2 +
 webapp/src/components/pages/HomePage.vue    | 312 +++++++-------------
 3 files changed, 117 insertions(+), 199 deletions(-)

diff --git a/webapp/src/assets/logos/AriadneLabsLogo.vue b/webapp/src/assets/logos/AriadneLabsLogo.vue
index 2e12a8eea..775bf0d49 100644
--- a/webapp/src/assets/logos/AriadneLabsLogo.vue
+++ b/webapp/src/assets/logos/AriadneLabsLogo.vue
@@ -1,5 +1,7 @@
 <template>
   <svg
+    width="100%"
+    height="100%"
     preserveAspectRatio="xMidYMid meet"
     data-bbox="35.22 28.28 319.76 143.36"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/webapp/src/assets/logos/EPFL.vue b/webapp/src/assets/logos/EPFL.vue
index 90abe61e8..e00fa2155 100644
--- a/webapp/src/assets/logos/EPFL.vue
+++ b/webapp/src/assets/logos/EPFL.vue
@@ -1,5 +1,7 @@
 <template>
   <svg
+    width="100%"
+    height="100%"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index 15c13e219..9230cf998 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -1,56 +1,44 @@
 <template>
-  <div class="lg:mx-8">
+  <div>
     <!-- First screen -->
-    <div class="h-dvh flex flex-col justify-around">
+    <div :class="paneTw">
       <!-- Disco logo -->
-      <div class="flex flex-col justify-center items-center space-y-4">
-        <div
-          class="mx-auto w-full h-full min-w-[250px] max-w-[640px] max-h-[264px]"
-        >
+      <div>
+        <div>
           <DiscoLogo v-if="themeStore.current == 'dark'" />
-          <DiscoGIF v-else class="pb-4" />
+          <DiscoGIF v-else class="pb-8" />
         </div>
-        <div class="text-center">
-          <span class="font-disco text-xl md:text-3xl lg:text-4xl">
-            <span class="font-disco text-disco-cyan font-bold">DIS</span
-            >tributed
-            <span class="font-disco text-disco-blue font-bold">CO</span
-            >llaborative Learning
-          </span>
+        <div class="text-center font-disco text-xl md:text-3xl lg:text-4xl">
+          <span class="text-disco-cyan font-bold">DIS</span>tributed
+          <span class="text-disco-blue font-bold">CO</span>llaborative Learning
         </div>
       </div>
-      <div class="text-center lg:text-center mt-12">
-        <p
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
+      <div class="text-center">
+        <p :class="headingTw">
           Train AI Models Together.<br />
           Keep Data Private.
         </p>
-        <p class="text-base lg:text-lg mt-3">
+        <p class="lg:text-lg">
           Build and train AI models without sharing any data.<br />
           Machine Learning directly in your browser.
         </p>
       </div>
-      <div class="flex justify-center">
+      <div>
         <CTAButton> Start training </CTAButton>
       </div>
-      <div class="flex justify-center">
+      <div>
         <ScrollIndicator />
       </div>
     </div>
 
     <!-- 2nd screen -->
-    <div
-      class="h-dvh flex flex-col lg:flex-row gap-16 justify-center items-center"
-    >
-      <div class="flex flex-col justify-center text-center items-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
+    <div :class="cn(paneTw, 'lg:flex-row')">
+      <div class="flex flex-col text-center">
+        <span :class="headingTw">
           Training in the privacy<br />
           of your browser.
         </span>
-        <span class="text-base lg:text-lg mt-4">
+        <span class="lg:text-lg mt-2">
           Disco runs fully in your browser.<br />
           No need to install anything.<br />
           No need to code anything.
@@ -60,223 +48,145 @@
         class="w-2/5 h-2/5 min-w-[250px] drop-shadow-[0_5px_5px_rgba(0,0,0,0.25)]"
       />
     </div>
+
     <!-- 3nd screen -->
-    <div class="h-dvh flex flex-col justify-center">
-      <div class="flex flex-col items-around justify-start w-full">
-        <div class="mb-8 lg:mb-20 w-full text-center lg:text-center">
-          <span
-            class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-          >
-            3 steps.
-          </span>
+    <div :class="paneTw">
+      <div>
+        <span :class="headingTw"> 3 steps. </span>
+      </div>
+      <div
+        :class="
+          cn(
+            bigTextTw,
+            'flex flex-col lg:flex-row gap-8 items-center text-center',
+          )
+        "
+      >
+        <div>
+          <span> Connect your data </span>
+          <img
+            :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/connect_${themeStore.current}.gif`"
+            class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px] mx-auto"
+          />
         </div>
-        <div
-          class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8 place-items-start"
-        >
-          <div
-            class="flex flex-col justify-center items-center text-center w-full"
-          >
+        <div>
+          <span>
+            Join the
             <span
-              class="text-2xl font-bold text-heading-light dark:text-heading-dark"
+              v-tippy="{
+                content:
+                  'This is how we call collaborative training sessions in DISCO.',
+                placement: 'top',
+              }"
+              class="underline hover:cursor-pointer"
             >
-              Connect your data
+              <DISCOllaborative />
             </span>
-            <img
-              :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/connect_${themeStore.current}.gif`"
-              class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px]"
-            />
-          </div>
-          <div
-            class="flex flex-col justify-center items-center text-center w-full"
-          >
-            <span
-              class="text-2xl font-bold text-heading-light dark:text-heading-dark"
-            >
-              Join the
-              <span
-                v-tippy="{
-                  content:
-                    'This is how we call collaborative training sessions in DISCO.',
-                  placement: 'top',
-                }"
-                class="underline hover:cursor-pointer"
-              >
-                <DISCOllaborative />
-              </span>
-            </span>
-            <img
-              :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/join_${themeStore.current}.gif`"
-              class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px]"
-            />
-          </div>
-          <div
-            class="flex flex-col justify-center items-center text-center w-full"
-          >
-            <span
-              class="text-2xl font-bold text-heading-light dark:text-heading-dark"
-            >
-              Use the model
-            </span>
-            <img
-              :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/use_${themeStore.current}.gif`"
-              class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px]"
-            />
-          </div>
+          </span>
+          <img
+            :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/join_${themeStore.current}.gif`"
+            class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px] mx-auto"
+          />
+        </div>
+        <div>
+          <span> Use the model </span>
+          <img
+            :src="`https://storage.googleapis.com/deai-313515.appspot.com/gifs/homepage/use_${themeStore.current}.gif`"
+            class="w-[150px] h-[150px] lg:w-[300px] lg:h-[300px] mx-auto"
+          />
         </div>
       </div>
     </div>
     <!-- 4th screen -->
-    <div class="h-dvh flex flex-col justify-center gap-16">
-      <div class="flex flex-col gap-4 items-center text-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Your data, your rules.
-        </span>
-        <span class="text-base lg:text-lg">
+    <div :class="paneTw">
+      <div class="flex flex-col gap-4 text-center">
+        <span :class="headingTw"> Your data, your rules. </span>
+        <span class="lg:text-lg">
           <b>Your data is never shared and never leaves your device.</b><br />
           Choose the privacy mechanisms. You set your privacy level.
         </span>
       </div>
-      <div
-        class="grid grid-cols-1 lg:grid-cols-2 gap-8 place-items-center pb-20"
-      >
-        <div class="flex flex-col items-center">
-          <span class="text-center text-2xl font-bold">
-            Federated Learning
-          </span>
-          <span class="text-center text-base lg:text-lg">
+      <div class="flex flex-col lg:flex-row gap-8">
+        <div class="flex flex-col items-center text-center">
+          <span :class="bigTextTw"> Federated Learning </span>
+          <span class="lg:text-lg">
             More efficient, orchestrated by on a central server
           </span>
           <FederatedGIF
-            class="w-full md:w-2/3 lg:w-full mt-4 rounded-lg bg-slate-50 border-slate-300 border-4"
+            class="w-full md:w-2/3 lg:w-full rounded-lg bg-slate-50 border-slate-300 border-4"
           />
         </div>
-        <div class="flex flex-col items-center">
-          <span class="text-center text-2xl font-bold">
-            Decentralized Learning
-          </span>
-          <span class="text-center text-base lg:text-lg">
-            More secure, peer-to-peer technology
-          </span>
+        <div class="flex flex-col items-center text-center">
+          <span :class="bigTextTw"> Decentralized Learning </span>
+          <span class="lg:text-lg"> More secure, peer-to-peer technology </span>
           <DecentralizedGIF
-            class="w-full md:w-2/3 lg:w-full mt-4 rounded-lg bg-slate-50 border-slate-300 border-4"
+            class="w-full md:w-2/3 lg:w-full rounded-lg bg-slate-50 border-slate-300 border-4"
           />
         </div>
       </div>
     </div>
 
     <!-- 5th screen -->
-    <div class="h-dvh flex flex-col gap-16 justify-center items-center">
-      <div class="w-full flex flex-col justify-center text-center items-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Design your own AI model.
-        </span>
-        <span class="text-base lg:text-lg mt-4 w-full lg:w-2/5 max-w-[500px]">
+    <div :class="paneTw">
+      <div class="flex flex-col text-center items-center gap-2">
+        <span :class="headingTw"> Design your own AI model. </span>
+        <span class="lg:text-lg max-lg:max-w-[500px] lg:w-2/5">
           Disco supports a wide array of deep learning architectures and tasks
           from image classification to training Transformers model.
         </span>
       </div>
-      <div
-        class="grid grid-cols-1 lg:grid-cols-3 place-items-center gap-4 gap-y-8"
-      >
-        <span
-          class="text-3xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Powered by
-        </span>
-        <a
-          class="flex justify-center"
-          href="https://www.tensorflow.org/js"
-          target="_blank"
-        >
-          <TensorflowLogo class="w-2/3 min-w-[50px]" />
+      <div class="flex flex-col lg:flex-row items-center justify-center gap-8">
+        <span :class="bigTextTw"> Powered by </span>
+        <a href="https://www.tensorflow.org/js" target="_blank">
+          <TensorflowLogo class="w-2/3 min-w-[50px] mx-auto" />
         </a>
-        <a class="flex justify-center" href="https://onnx.ai/" target="_blank">
-          <ONNXLogo class="w-4/5 min-w-[50px]" />
+        <a href="https://onnx.ai/" target="_blank">
+          <ONNXLogo class="w-4/5 min-w-[50px] mx-auto" />
         </a>
       </div>
     </div>
     <!-- 6th screen -->
-    <div class="h-dvh flex flex-col gap-16 justify-center items-center">
-      <div class="w-full flex flex-col justify-center text-center items-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Free and open source.
-        </span>
-        <span class="text-base lg:text-lg mt-4 w-full lg:w-2/5 max-w-[500px]">
+    <div :class="cn(paneTw, '[&_svg]:size-50 gap-2')">
+      <div class="flex flex-col text-center gap-2 mb-8">
+        <span :class="headingTw"> Free and open source. </span>
+        <span class="lg:text-lg max-lg:max-w-[500px]">
           Disco is a non-profit academic initiative. <br />
           Open-source and free to use.
         </span>
       </div>
-      <div class="flex flex-col gap-y-8 text-center items-center">
-        <span
-          class="text-3xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          A joint project of
-        </span>
-        <div class="w-3/4 grid grid-cols-2 place-items-center">
-          <a
-            class="flex justify-center"
-            href="https://www.epfl.ch/labs/mlo/"
-            target="_blank"
-          >
-            <MLOLogo class="w-3/4" />
-          </a>
-          <a
-            class="flex justify-center ml-4"
-            href="https://www.light-laboratory.org/"
-            target="_blank"
-          >
-            <LightLogo class="w-3/4" />
-          </a>
-        </div>
-        <span
-          class="mt-4 text-3xl font-bold text-heading-light dark:text-heading-dark"
-        >
-          Supported by
-        </span>
-        <div class="w-3/4 grid grid-cols-2 place-items-center">
-          <a
-            class="flex justify-center ml-4"
-            href="https://www.epfl.ch/en/"
-            target="_blank"
-          >
-            <EPFL class="w-3/4" />
-          </a>
-          <a
-            class="flex justify-center ml-4"
-            href="https://www.ariadnelabs.org/"
-            target="_blank"
-          >
-            <AriadneLabsLogo class="w-full" />
-          </a>
-        </div>
+      <span :class="bigTextTw"> A joint project of </span>
+      <div class="flex flex-row items-center gap-8">
+        <a href="https://www.epfl.ch/labs/mlo/" target="_blank">
+          <MLOLogo />
+        </a>
+        <a href="https://www.light-laboratory.org/" target="_blank">
+          <LightLogo />
+        </a>
+      </div>
+      <span :class="bigTextTw"> Supported by </span>
+      <div class="flex flex-row items-center gap-8">
+        <a href="https://www.epfl.ch/en/" target="_blank">
+          <EPFL />
+        </a>
+        <a href="https://www.ariadnelabs.org/" target="_blank">
+          <AriadneLabsLogo />
+        </a>
       </div>
     </div>
     <!-- 7th screen -->
-    <div
-      class="h-dvh flex flex-col lg:flex-row gap-16 justify-center items-center"
-    >
-      <div class="flex justify-center">
-        <DiscoParticlesIcon class="w-full max-w-[200px] lg:max-w-[400px]" />
+    <div :class="cn(paneTw, 'lg:flex-row')">
+      <div>
+        <DiscoParticlesIcon class="max-w-[200px] lg:max-w-[400px]" />
       </div>
-      <div class="flex flex-col items-center lg:items-start gap-2 text-center">
-        <span
-          class="font-disco text-4xl lg:text-5xl font-bold text-heading-light dark:text-heading-dark"
-        >
+      <div class="flex flex-col gap-2 text-center">
+        <span :class="headingTw">
           <!-- Call-to-action heading -->
           Join the <DISCO />
         </span>
-        <span
-          class="text-center lg:text-left w-full max-w-[500px] text-base lg:text-lg"
-        >
+        <span class="lg:text-lg">
           Start training your AI models privately today.
         </span>
-        <div class="mt-4 flex flex-wrap justify-center gap-x-4">
+        <div class="flex flex-row justify-center gap-4">
           <CTAButton> Get started </CTAButton>
           <a
             href="mailto:discolab@listes.epfl.ch"
@@ -311,6 +221,10 @@ import DISCO from "../simple/DISCO.vue";
 import EPFL from "@/assets/logos/EPFL.vue";
 import DiscoParticlesIcon from "@/assets/svg/DiscoParticlesIcon.vue";
 import ScrollIndicator from "../simple/ScrollIndicator.vue";
+import { cn } from "tailwind-cn";
 
 const themeStore = useThemeStore();
+const paneTw = "h-dvh flex flex-col justify-center gap-16 items-center";
+const headingTw = "font-disco font-bold text-4xl lg:text-5xl";
+const bigTextTw = "font-bold text-3xl";
 </script>

From 6e7db7dc1c66cfbee78df425eea6e846accaaaa2 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 15:02:34 +0200
Subject: [PATCH 07/13] build: remove cn dep

---
 pnpm-lock.yaml      | 8 --------
 webapp/package.json | 1 -
 2 files changed, 9 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74f3cafc0..f62d4dea1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -562,9 +562,6 @@ importers:
       pinia-plugin-persistedstate-2:
         specifier: 2.0.32
         version: 2.0.32(pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)))
-      tailwind-cn:
-        specifier: 1.0.3
-        version: 1.0.3
       tippy.js:
         specifier: 6.3.7
         version: 6.3.7
@@ -4287,9 +4284,6 @@ packages:
     resolution: {integrity: sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==}
     engines: {node: '>=8.0.0'}
 
-  tailwind-cn@1.0.3:
-    resolution: {integrity: sha512-GgqNt0SvajbakZmSPFq1xeqTN2v49k9BG1ZJnl0pn3f1aMXyp6IPMKP0SKEfvo5U2WU/6wcDO2Jmt4H1P5ZGYQ==}
-
   tailwindcss@4.3.1:
     resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==}
 
@@ -8564,8 +8558,6 @@ snapshots:
       typical: 5.2.0
       wordwrapjs: 4.0.1
 
-  tailwind-cn@1.0.3: {}
-
   tailwindcss@4.3.1: {}
 
   tapable@2.3.3: {}
diff --git a/webapp/package.json b/webapp/package.json
index a4e767f1d..2945ad5c8 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -22,7 +22,6 @@
     "immutable": "catalog:",
     "pinia": "3.0.4",
     "pinia-plugin-persistedstate-2": "2.0.32",
-    "tailwind-cn": "1.0.3",
     "tippy.js": "6.3.7",
     "vee-validate": "5.0.0-beta.0",
     "vue": "3.5.34",

From 40b3bc4673ca5bd485e8d8981c290a5f74da0b0f Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 15:02:58 +0200
Subject: [PATCH 08/13] fix: more uniform scrolling

---
 webapp/src/components/simple/ScrollIndicator.vue | 14 ++------------
 webapp/src/utils.ts                              | 10 ++++++++++
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/webapp/src/components/simple/ScrollIndicator.vue b/webapp/src/components/simple/ScrollIndicator.vue
index 939abad64..e272552d8 100644
--- a/webapp/src/components/simple/ScrollIndicator.vue
+++ b/webapp/src/components/simple/ScrollIndicator.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col items-center py-2 px-2 text-disco bg-disco font-disco rounded-full duration-200 hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
+    class="flex flex-col items-center py-2 px-2 text-disco bg-disco font-disco rounded-full duration-200 hover:text-disco-cyan hover:scale-150 cursor-pointer"
     @click="scrollDown"
   >
     <i class="fa-solid fa-chevron-down animate-bounce" />
@@ -8,15 +8,5 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, type Ref } from "vue";
-
-// Inject scrollContainer from BaseLayout
-const scrollContainer = inject<Ref<HTMLElement | null>>("scrollContainer");
-
-function scrollDown() {
-  scrollContainer?.value?.scrollBy({
-    top: window.innerHeight,
-    behavior: "smooth",
-  });
-}
+import { scrollDown } from "@/utils";
 </script>
diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts
index 6aa08726e..8ab8b3ac7 100644
--- a/webapp/src/utils.ts
+++ b/webapp/src/utils.ts
@@ -8,3 +8,13 @@ export function scrollToTop() {
     appElement.scrollTop = 0;
   }
 }
+
+export function scrollDown() {
+  const appElement = document.getElementById("base-container");
+  if (appElement !== null) {
+    appElement.scrollBy({
+      top: window.innerHeight,
+      behavior: "smooth",
+    });
+  }
+}

From 1bd374dd05e3d10f58dd53a8b75eff168afacc36 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 15:03:17 +0200
Subject: [PATCH 09/13] feat: implement feedback

---
 webapp/src/components/pages/HomePage.vue | 43 ++++++++++++------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index 9230cf998..afee37dc1 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -18,7 +18,7 @@
           Train AI Models Together.<br />
           Keep Data Private.
         </p>
-        <p class="lg:text-lg">
+        <p class="lg:text-lg mt-4">
           Build and train AI models without sharing any data.<br />
           Machine Learning directly in your browser.
         </p>
@@ -32,13 +32,13 @@
     </div>
 
     <!-- 2nd screen -->
-    <div :class="cn(paneTw, 'lg:flex-row')">
+    <div class="lg:flex-row" :class="paneTw">
       <div class="flex flex-col text-center">
         <span :class="headingTw">
           Training in the privacy<br />
           of your browser.
         </span>
-        <span class="lg:text-lg mt-2">
+        <span class="lg:text-lg mt-4">
           Disco runs fully in your browser.<br />
           No need to install anything.<br />
           No need to code anything.
@@ -55,12 +55,8 @@
         <span :class="headingTw"> 3 steps. </span>
       </div>
       <div
-        :class="
-          cn(
-            bigTextTw,
-            'flex flex-col lg:flex-row gap-8 items-center text-center',
-          )
-        "
+        class="flex flex-col lg:flex-row gap-8 items-center text-center"
+        :class="subHeadingTw"
       >
         <div>
           <span> Connect your data </span>
@@ -99,7 +95,7 @@
     </div>
     <!-- 4th screen -->
     <div :class="paneTw">
-      <div class="flex flex-col gap-4 text-center">
+      <div class="flex flex-col self-start gap-4">
         <span :class="headingTw"> Your data, your rules. </span>
         <span class="lg:text-lg">
           <b>Your data is never shared and never leaves your device.</b><br />
@@ -108,7 +104,7 @@
       </div>
       <div class="flex flex-col lg:flex-row gap-8">
         <div class="flex flex-col items-center text-center">
-          <span :class="bigTextTw"> Federated Learning </span>
+          <span :class="subHeadingTw"> Federated Learning </span>
           <span class="lg:text-lg">
             More efficient, orchestrated by on a central server
           </span>
@@ -117,7 +113,7 @@
           />
         </div>
         <div class="flex flex-col items-center text-center">
-          <span :class="bigTextTw"> Decentralized Learning </span>
+          <span :class="subHeadingTw"> Decentralized Learning </span>
           <span class="lg:text-lg"> More secure, peer-to-peer technology </span>
           <DecentralizedGIF
             class="w-full md:w-2/3 lg:w-full rounded-lg bg-slate-50 border-slate-300 border-4"
@@ -136,7 +132,7 @@
         </span>
       </div>
       <div class="flex flex-col lg:flex-row items-center justify-center gap-8">
-        <span :class="bigTextTw"> Powered by </span>
+        <span :class="subHeadingTw"> Powered by </span>
         <a href="https://www.tensorflow.org/js" target="_blank">
           <TensorflowLogo class="w-2/3 min-w-[50px] mx-auto" />
         </a>
@@ -146,15 +142,18 @@
       </div>
     </div>
     <!-- 6th screen -->
-    <div :class="cn(paneTw, '[&_svg]:size-50 gap-2')">
-      <div class="flex flex-col text-center gap-2 mb-8">
+    <div
+      :class="paneTw"
+      class="[&_svg]:size-25 md:[&_svg]:size-35 lg:[&_svg]:size-50 gap-2"
+    >
+      <div class="flex flex-col self-start gap-2 mb-8">
         <span :class="headingTw"> Free and open source. </span>
         <span class="lg:text-lg max-lg:max-w-[500px]">
           Disco is a non-profit academic initiative. <br />
           Open-source and free to use.
         </span>
       </div>
-      <span :class="bigTextTw"> A joint project of </span>
+      <span :class="subHeadingTw"> A joint project of </span>
       <div class="flex flex-row items-center gap-8">
         <a href="https://www.epfl.ch/labs/mlo/" target="_blank">
           <MLOLogo />
@@ -163,7 +162,7 @@
           <LightLogo />
         </a>
       </div>
-      <span :class="bigTextTw"> Supported by </span>
+      <span :class="subHeadingTw"> Supported by </span>
       <div class="flex flex-row items-center gap-8">
         <a href="https://www.epfl.ch/en/" target="_blank">
           <EPFL />
@@ -174,7 +173,7 @@
       </div>
     </div>
     <!-- 7th screen -->
-    <div :class="cn(paneTw, 'lg:flex-row')">
+    <div :class="paneTw" class="lg:flex-row">
       <div>
         <DiscoParticlesIcon class="max-w-[200px] lg:max-w-[400px]" />
       </div>
@@ -221,10 +220,10 @@ import DISCO from "../simple/DISCO.vue";
 import EPFL from "@/assets/logos/EPFL.vue";
 import DiscoParticlesIcon from "@/assets/svg/DiscoParticlesIcon.vue";
 import ScrollIndicator from "../simple/ScrollIndicator.vue";
-import { cn } from "tailwind-cn";
 
 const themeStore = useThemeStore();
-const paneTw = "h-dvh flex flex-col justify-center gap-16 items-center";
-const headingTw = "font-disco font-bold text-4xl lg:text-5xl";
-const bigTextTw = "font-bold text-3xl";
+const paneTw =
+  "min-h-dvh flex flex-col justify-center gap-16 items-center py-8";
+const headingTw = "font-disco font-bold text-3xl md:text-4xl lg:text-5xl";
+const subHeadingTw = "font-bold text-xl md:text-2xl lg:text-3xl";
 </script>

From 7ba6a357da6847702fcc313449c97b91799de34b Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 15:30:28 +0200
Subject: [PATCH 10/13] fix: spacing around lab logos

---
 webapp/src/components/pages/HomePage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index afee37dc1..7ed3ef9d4 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -143,10 +143,10 @@
     </div>
     <!-- 6th screen -->
     <div
-      :class="paneTw"
       class="[&_svg]:size-25 md:[&_svg]:size-35 lg:[&_svg]:size-50 gap-2"
+      :class="paneTw"
     >
-      <div class="flex flex-col self-start gap-2 mb-8">
+      <div class="flex flex-col self-start gap-2 mb-16">
         <span :class="headingTw"> Free and open source. </span>
         <span class="lg:text-lg max-lg:max-w-[500px]">
           Disco is a non-profit academic initiative. <br />

From a6404196ba16e69cda10a18110bcceb315182c0f Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Mon, 13 Jul 2026 13:41:04 +0200
Subject: [PATCH 11/13] fix: homepage screen 6 spacing

---
 webapp/src/components/pages/HomePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index 7ed3ef9d4..7bd66a963 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -143,8 +143,8 @@
     </div>
     <!-- 6th screen -->
     <div
-      class="[&_svg]:size-25 md:[&_svg]:size-35 lg:[&_svg]:size-50 gap-2"
       :class="paneTw"
+      class="[&_svg]:size-25 md:[&_svg]:size-35 lg:[&_svg]:size-50 !gap-2"
     >
       <div class="flex flex-col self-start gap-2 mb-16">
         <span :class="headingTw"> Free and open source. </span>

From 6ec64cf0b9395efa638d54f703167c594b791d03 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Mon, 13 Jul 2026 14:26:53 +0200
Subject: [PATCH 12/13] ci: try preventing too recent pnpm version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 70dc0c24d..b60a289c1 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
   "devEngines": {
     "packageManager": {
       "name": "pnpm",
-      "version": ">=11.0.0 <12.0.0",
+      "version": ">=11.0.0 <11.12.0",
       "onFail": "download"
     }
   }

From c11f3f1bb0951b17712d3d7aefe22da9e925928e Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Mon, 13 Jul 2026 14:49:55 +0200
Subject: [PATCH 13/13] fix: homepage last screen spacing

---
 webapp/src/components/pages/HomePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/pages/HomePage.vue b/webapp/src/components/pages/HomePage.vue
index 7bd66a963..f5119b5f4 100644
--- a/webapp/src/components/pages/HomePage.vue
+++ b/webapp/src/components/pages/HomePage.vue
@@ -185,7 +185,7 @@
         <span class="lg:text-lg">
           Start training your AI models privately today.
         </span>
-        <div class="flex flex-row justify-center gap-4">
+        <div class="flex flex-row justify-center gap-4 mt-4">
           <CTAButton> Get started </CTAButton>
           <a
             href="mailto:discolab@listes.epfl.ch"