From 9c0cb013f088800f04520bae41b428d774051256 Mon Sep 17 00:00:00 2001
From: Sean Yang <seany314@gmail.com>
Date: Mon, 7 Oct 2024 17:19:25 -0700
Subject: [PATCH] enhance web responsive design for mobile

---
 web/src/components/gettingStarted.astro |  16 +-
 web/src/components/hero.astro           |  10 +-
 web/src/components/series.astro         |   4 +-
 web/src/components/tutorials.astro      | 261 +++++-------------------
 web/src/pages/flareDay.astro            |   4 +-
 5 files changed, 70 insertions(+), 225 deletions(-)

diff --git a/web/src/components/gettingStarted.astro b/web/src/components/gettingStarted.astro
index 632c7b7854..150b4c1bf4 100644
--- a/web/src/components/gettingStarted.astro
+++ b/web/src/components/gettingStarted.astro
@@ -111,7 +111,7 @@ const series = [
 
     <!-- FLARE Walkthrough: CIFAR-10 / End-to-End: Kaplan-Meier -->
     <div class="mt-5 mb-2 border-b border-gray-200 dark:border-gray-700">
-      <ul class="flex flex-wrap -mb-px text-xl font-medium text-center place-content-center space-x-24" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-nvidia hover:text-nvidia dark:text-nvidia-light dark:hover:text-nvidia-light border-nvidia dark:border-nvidia-light" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-transparent hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
+      <ul class="flex flex-wrap -mb-px text-xl font-medium text-center place-content-center lg:space-x-24" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-nvidia hover:text-nvidia dark:text-nvidia-light dark:hover:text-nvidia-light border-nvidia dark:border-nvidia-light" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-transparent hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
           <li class="me-2" role="presentation">
             <button class="inline-block p-4 border-b-2 rounded-t-lg font-bold hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="walkthrough-tab" data-tabs-target="#series0" type="button" role="tab" aria-controls="settings" aria-selected="false">Walkthrough: CIFAR-10</button>
           </li>
@@ -124,7 +124,7 @@ const series = [
     {
       series.map((item, index) => (
         <div id={"series" + index}>
-          <div class="glide px-20 py-8 bg-gray-50 bg-opacity-60 rounded-3xl" role="tabpanel">
+          <div class="glide px-8 lg:px-20 py-8 bg-gray-50 bg-opacity-60 rounded-3xl" role="tabpanel">
             <div class="glide__track" data-glide-el="track">
               <ul class="glide__slides">
                 {
@@ -175,11 +175,9 @@ const series = [
               </div>
               <!-- Right Carousel Arrow -->
               <button class="glide__arrow glide__arrow--right right-0 shadow-none border-none" data-glide-dir=">">
-                <div class="h-14 w-14 flex justify-center items-center">
-                  <svg class="stroke-gray-400 hover:stroke-nvidia w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m9 5 7 7-7 7"/>
-                  </svg>
-                </div>
+                <svg class="stroke-gray-400 hover:stroke-nvidia w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m9 5 7 7-7 7"/>
+                </svg>
               </button>
             </div>
           </div>
@@ -189,7 +187,7 @@ const series = [
             {
               item.map((card) => (
                 <div id={"series" + index + card.id + "-video"} class="mt-20 flex flex-wrap place-content-center hidden">
-                  <video class="h-3/4 w-3/4" controls="controls">
+                  <video class="lg:h-3/4 lg:w-3/4" controls="controls">
                     <source src={card.video} type="video/mp4">
                   </video>
                 </div>
@@ -217,7 +215,7 @@ const series = [
     startAt: 0,
     perView: 3,
     gap: 32,
-    peek: {before: 0, after: 45},
+    peek: {before: 0, after: 48},
     dragThreshold: true,
     breakpoints: {
       1280: {
diff --git a/web/src/components/hero.astro b/web/src/components/hero.astro
index 4a848ec009..0cb16a0408 100644
--- a/web/src/components/hero.astro
+++ b/web/src/components/hero.astro
@@ -78,22 +78,22 @@ const base_url = import.meta.env.BASE_URL;
               enables platform developers to build a secure, privacy-preserving
               offering for a distributed multi-party collaboration.
             </p>
-            <div class="mt-10 mb-10 flex items-center gap-x-4">
+            <div class="mt-10 mb-10 items-center space-x-1">
               <a
                 href="https://nvflare.readthedocs.io/en/main/index.html"
-                class="rounded-md bg-nvidia px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
+                class="inline-flex rounded-md bg-nvidia px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
                 >Documentation</a
               >
               <a
                 href="catalog"
-                class="rounded-md bg-clear ring-inset ring-2 ring-gray-300 px-3.5 py-2.5 text-sm font-semibold text-gray-200 shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
+                class="inline-flex whitespace-nowrap rounded-md bg-clear ring-inset ring-2 ring-gray-300 px-3.5 py-2.5 text-sm font-semibold text-gray-200 shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nvidia"
                 >Tutorial Catalog</a
               >
               <a
                 href=`https://github.com/NVIDIA/NVFlare/tree/${gh_branch}`
-                class="text-sm font-semibold leading-6 text-gray-200 hover:text-neutral-100"
+                class="inline-flex text-sm font-semibold leading-6 text-gray-200 hover:text-neutral-100 py-2.5 align-middle"
                 >
-                <span id="default-message" class="inline-flex px-3.5 py-2.5">
+                <span id="default-message" class="inline-flex py-2.5">
                 <svg class="invert w-6 h-6 text-black dark:text-white mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                   <path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/>
                 </svg>
diff --git a/web/src/components/series.astro b/web/src/components/series.astro
index f325eafa6d..8ef0ec90a4 100644
--- a/web/src/components/series.astro
+++ b/web/src/components/series.astro
@@ -322,7 +322,7 @@ const series_list = [
     <div class="mt-20 max-w-[1500px] mx-auto py-4 text-left flex flex-col md:flex-row">
 
       <!-- Series Glider -->
-      <div id="series-glide" class="w-[400px] glide px-2 pb-8 rounded-3xl mt-12">
+      <div id="series-glide" class="lg:w-[400px] glide px-2 lg:pb-8 rounded-3xl mt-12">
 
         <div class="glide__track" data-glide-el="track">
           <ul id="series-slides" class="glide__slides">
@@ -369,7 +369,7 @@ const series_list = [
       {series_list.map((series, series_index) => (
         <div id={"series"+series.id+"-content"} class="hidden">
             {series.subseries_list.map((subseries, index) => (
-              <div id={"subseries-content"+subseries.id} class="flex flex-col m-auto p-auto w-[925px] mt-12">
+              <div id={"subseries-content"+subseries.id} class="flex flex-col m-auto p-auto lg:w-[925px] lg:mt-12">
                 <div class="flex overflow-x-auto pb-4 hide-scroll-bar">
                   <div class="flex flex-nowrap ml-4 ">
                     {
diff --git a/web/src/components/tutorials.astro b/web/src/components/tutorials.astro
index 1434fcf348..efc67e1d61 100644
--- a/web/src/components/tutorials.astro
+++ b/web/src/components/tutorials.astro
@@ -5,40 +5,6 @@ import ClickTracker from './clickTracker.astro';
 const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
 const base_url = import.meta.env.BASE_URL;
 
-const highlights = [
-  {
-    title: "LLM Tuning via HuggingFace SFT Trainer",
-    tags: ["adv.", "algorithm", "huggingface", "llm"],
-    description: "Example for using NVIDIA FLARE with a HuggingFace trainer for LLM tuning tasks.",
-    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/llm_hf`
-  },
-  {
-    title: "Survival Analysis with Federated Kaplan-Meier",
-    tags: ["int.", "algorithm", "healthcare", "client-api", "model-controller", "he", "analytics"],
-    description:
-      "Kaplan-Meier survival analysis in federated setting without and with secure features via time-binning and Homomorphic Encryption (HE).",
-    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/kaplan-meier-he`,
-  },
-  {
-    title: "Real-world Federated Learning with CIFAR-10",
-    tags: ["int.", "algorithm", "poc", "pytorch", "learner", "dl", "he"],
-    description: "Provisioning secure workspace and running FedAvg with streaming of TensorBoard metrics to the server during training and homomorphic encryption.",
-    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/cifar10/cifar10-real-world/README.md`
-  },
-  {
-    title: "Financial Application with Federated XGBoost Methods",
-    tags: ["adv.", "algorithm", "xgboost", "finance"],
-    description: "Example using XGBoost in vertical and horizontal approaches to train a federated model to perform fraud detection with a finance dataset.",
-    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/finance`
-  },
-  {
-    title: "Parameter Efficient Fine Turning",
-    tags: ["adv.", "algorithm", "nemo", "llm"],
-    description: "Example utilizing NeMo's PEFT methods to adapt a LLM to a downstream task.",
-    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/integration/nemo/examples/peft`
-  },
-]
-
 const tutorials = [
   {
     title: "Intro to the FL Simulator",
@@ -192,7 +158,7 @@ const tutorials = [
   {
     title: "Hello FedAvg",
     tags: ["beg.", "algorithm", "pytorch", "model-controller"],
-    description: "Example using the FedAvg workflow to implement Federated Averaging.",
+    description: "Example using the FedAvg workflow to implement Federated Averaging with early stopping, model selection, and saving and loading to show flexibility of Model Controller API.",
     link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/hello-world/hello-fedavg/README.md`
   },
   {
@@ -233,7 +199,7 @@ const tutorials = [
   },
   {
     title: "Real-world Federated Learning with CIFAR-10",
-    tags: ["int.", "algorithm", "poc", "pytorch", "learner", "dl", "he"],
+    tags: ["int.", "algorithm", "poc", "pytorch", "learner", "dl", "he", "highlight"],
     description: "Provisioning secure workspace and running FedAvg with streaming of TensorBoard metrics to the server during training and homomorphic encryption.",
     link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/cifar10/cifar10-real-world/README.md`
   },
@@ -246,7 +212,7 @@ const tutorials = [
   },
   {
     title: "Survival Analysis with Federated Kaplan-Meier",
-    tags: ["int.", "algorithm", "healthcare", "client-api", "model-controller", "he", "analytics"],
+    tags: ["int.", "algorithm", "healthcare", "client-api", "model-controller", "he", "analytics", "highlight"],
     description:
       "Kaplan-Meier survival analysis in federated setting without and with secure features via time-binning and Homomorphic Encryption (HE).",
     link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/kaplan-meier-he`,
@@ -350,7 +316,7 @@ const tutorials = [
   },
   {
     title: "Parameter Efficient Fine Turning",
-    tags: ["adv.", "algorithm", "nemo", "llm"],
+    tags: ["adv.", "algorithm", "nemo", "llm", "highlight"],
     description: "Example utilizing NeMo's PEFT methods to adapt a LLM to a downstream task.",
     link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/integration/nemo/examples/peft`
   },
@@ -368,7 +334,7 @@ const tutorials = [
   },
   {
     title: "LLM Tuning via HuggingFace SFT Trainer",
-    tags: ["adv.", "algorithm", "huggingface", "llm"],
+    tags: ["adv.", "algorithm", "huggingface", "llm", "highlight"],
     description: "Example for using NVIDIA FLARE with a HuggingFace trainer for LLM tuning tasks.",
     link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/llm_hf`
   },
@@ -402,12 +368,6 @@ const tutorials = [
     description: "Show to generate hierarchical statistics for data that can be represented as Pandas Data Frame.",
     link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/federated-statistics/hierarchical_stats`
   },
-  {
-    title: "FedAvg Early Stopping",
-    tags: ["int.", "algorithm", "model-controller", "pytorch"],
-    description: "Demonstrate flexibility of the ModelController API, and show how to write a Federated Averaging workflow with early stopping, model selection, and saving and loading.",
-    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/hello-world/hello-fedavg`
-  },
   {
     title: "TensorFlow Algorithms and Examples",
     tags: ["adv.", "algorithm",  "model-controller", "tensorflow"],
@@ -468,10 +428,17 @@ const tutorials = [
     description: "Present new ways to measure and visualize potential data leakage in FL.",
     link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/research/quantifying-data-leakage`
   },
+  {
+    title: "Secure Federated XGBoost with Homomorphic Encryption",
+    tags: ["adv.", "algorithm", "xgboost", "he", "highlight"],
+    description:
+      "Federated secure training with XGBoost using homomorphic encryption.",
+    link: `https://github.com/NVIDIA/NVFlare/tree/${gh_branch}/examples/advanced/xgboost_secure`,
+  },
 ]
 
 const level = ["beg.", "int.", "adv."];
-const tutorial_category = ["algorithm", "tools", "deployment", "research"]
+const tutorial_category = ["algorithm", "tools", "deployment", "research", "highlight"]
 const flare_api = ["client-api", "model-controller", "learner"];
 const framework = ["pytorch", "tensorflow", "lightning", "xgboost", "sklearn", "numpy", "nemo", "monai", "huggingface"];
 const application_type = ["ml", "dl", "llm", "analytics"];
@@ -534,8 +501,7 @@ const tag_list = [
       </h2>
       <p class="text-lg mt-4 text-slate-600 w-3/4 m-auto">
         Explore our extensive catalog of tutorials of NVIDIA FLARE features and examples for various applications.
-        Use the tags to filter by categories such as level, applications, frameworks, etc.
-        or search for keywords.
+        Use the tags to filter by categories or search for keywords.
 
         To read more, visit our
         <a class="text-nvidia" href="https://nvflare.readthedocs.io/en/main/index.html">documentation</a> and
@@ -545,175 +511,56 @@ const tag_list = [
 
     <div class="mx-auto max-w-[1600px] py-4 text-left inline-flex">
 
-      <div class="flex-column h-fit border-r border-transparent w-52 mr-12">
-        <!-- Search Bar -->
-        <form class="flex mb-4">
-          <label for="search-bar" class="sr-only">Search</label>
-            <div class="relative w-full">
-              <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 stroke-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
-              </svg>
-              <input type="text" id="search-bar" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-nvidia focus:border-nvidia block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search keyword..." />
-          </div>
-        </form>
-        <!-- Filter Categories -->
-        <div id="filter-categories" class="ml-2 place-content-center" data-accordion="open" data-active-classes="bg-white dark:bg-gray-500 text-gray-500 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
-            {
-              tag_list.map((category) => (
-                <div>
-                  <h2 id={category.name} class="">
-                    <button type="button" class="flex items-center justify-between mr-4 py-2 font-medium rtl:text-right text-gray-900 border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3" data-accordion-target={"#" + category.id} aria-expanded="true" aria-controls={category.id}>
-                      <span>{category.name}</span>
-                      <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
-                      </svg>
-                    </button>
-                  </h2>
-                  <div id={category.id} class="hidden flex flex-wrap gap-x-1 w-40" aria-labelledby={category.name}>
-                    {category.list.map((tag) => (
-                      <ul>
-                        <input type="checkbox" id={tag} value="" class="check hidden peer" required=""/>
-                        <label for={tag} class="inline-flex rounded-full peer-checked:bg-green-50 px-2.5 py-0.5 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-600/20 peer-checked:ring-green-600/20 text-gray-500 bg-white border-1 border-transparent rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-nvidia hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-green-700 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
-                          {tag}
-                        </label>
-                      </ul>
-                    ))}
-                  </div>
-                </div>
-              ))
-            }
-        </div>
-      </div>
-
-      <!-- Tutorial Cards -->
-      <div class="bg-white">
+      <div class="flex flex-col md:flex-row justify-center">
+        <div class="w-52 min-w-52 border-r border-transparent mr-12">
 
-        <!-- Highlights -->
-        <div class="bg-gray-50 max-w-5xl mx-auto mt-4 rounded-md">
-
-          <!-- Highlights Accordion -->
-          <div id="highlights-accordion" data-accordion="open" data-active-classes="dark:bg-gray-500 text-gray-500 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
-            <h2 class="">
-              <button type="button" class="flex items-center justify-between mr-4 py-2 font-medium rtl:text-right text-gray-900 border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3" data-accordion-target="#highlights-glide" aria-expanded="false" aria-controls="highlights-glide">
-                <span class="ms-4 mt-1">Highlights</span>
-                <svg class="w-6 h-6 text-gray-800 dark:text-white stroke-nvidia" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                  <path stroke-width="2" d="M11.083 5.104c.35-.8 1.485-.8 1.834 0l1.752 4.022a1 1 0 0 0 .84.597l4.463.342c.9.069 1.255 1.2.556 1.771l-3.33 2.723a1 1 0 0 0-.337 1.016l1.03 4.119c.214.858-.71 1.552-1.474 1.106l-3.913-2.281a1 1 0 0 0-1.008 0L7.583 20.8c-.764.446-1.688-.248-1.474-1.106l1.03-4.119A1 1 0 0 0 6.8 14.56l-3.33-2.723c-.698-.571-.342-1.702.557-1.771l4.462-.342a1 1 0 0 0 .84-.597l1.753-4.022Z"/>
-                </svg>
-                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
+          <!-- Search Bar -->
+          <form class="mb-4">
+            <label for="search-bar" class="sr-only">Search</label>
+              <div class="relative w-full">
+                <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 stroke-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                 </svg>
-              </button>
-            </h2>
-          </div>
-
-          <!-- Highlights Carousel -->
-          <div id="highlights-glide" class="glide ps-12 pr-12 px-2 pb-8 bg-gray-50 rounded-3xl">
-            <div class="glide__track" data-glide-el="track">
-              <ul id="highlights-slides" class="glide__slides">
-                {
-                  highlights.map((tutorial) => (
-                    <li class="slider__frame glide__slide w- mb-4 p-4 transition-shadow ease-in-out" role="presentation">
-                      <div class="flex flex-col gap-1 divide-gray-200 rounded-lg bg-white shadow-md h-80">
-                        <div>
-                          <h3 class="font-semibold text-md px-4 pt-2 text-lg">
-                            {tutorial.title}
-                          </h3>
-                          <div class="px-4 gap-x-2 flex-wrap items-center">
-                            {tutorial.tags.map((tag) => (
-                              <div class="inline-flex rounded-full bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
-                                {tag}
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                        <div class="flex-grow overflow-y-auto px-4">
-                          <p class="text-slate-500 mt-2 leading-relaxed">
-                            {tutorial.description}
-                          </p>
-                        </div>
-                        <div class="h-14 flex-shrink-0 flex justify-center items-center border-t border-gray-200">
-                          <a href={tutorial.link} target="_blank" rel="noopener noreferrer" class="rounded-bl-lg border border-transparent py-2 px-4 text-sm font-semibold text-gray-900">
-                            Go to Tutorial
-                          </a>
-                        </div>
-                      </div>
-                    </li>
-                  ))}
-              </ul>
-            </div>
-            <div class="glide__arrows" data-glide-el="controls">
-              <!-- Left Carousel Arrow -->
-              <button class="glide__arrow glide__arrow--left left-0 shadow-none border-none" data-glide-dir="<">
-                <svg class="stroke-gray-400 hover:stroke-nvidia w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m15 19-7-7 7-7"/>
-                </svg>
-              </button>
-              <!-- Carousel Bullets -->
-              <div id="highlights-bullets" class="glide__bullets" data-glide-el="controls[nav]">
-                {
-                  highlights.map((item, index) => (
-                    <button class="glide__bullet h-3 w-3 bg-gray-200 ring-1 ring-gray-200 shadow-none" data-glide-dir={"="+index}></button>
-                  ))
-                }
-              </div>
-              <!-- Right Carousel Arrow -->
-              <button class="glide__arrow glide__arrow--right right-0 shadow-none border-none" data-glide-dir=">">
-                <div class="h-14 w-14 flex justify-center items-center">
-                  <svg class="stroke-gray-400 hover:stroke-nvidia w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m9 5 7 7-7 7"/>
-                  </svg>
-                </div>
-              </button>
+                <input type="text" id="search-bar" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-nvidia focus:border-nvidia block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search keyword..." />
             </div>
+          </form>
+          <!-- Filter Categories -->
+          <div id="filter-categories" class="ml-2 place-content-center" data-accordion="open" data-active-classes="bg-white dark:bg-gray-500 text-gray-500 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
+              {
+                tag_list.map((category) => (
+                  <div class="">
+                    <h2 id={category.name} class="">
+                      <button type="button" class="flex items-center justify-between mr-4 py-2 font-medium rtl:text-right text-gray-900 border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3" data-accordion-target={"#" + category.id} aria-expanded="true" aria-controls={category.id}>
+                        <span>{category.name}</span>
+                        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
+                        </svg>
+                      </button>
+                    </h2>
+                    <div id={category.id} class="hidden flex flex-wrap gap-x-1 w-40" aria-labelledby={category.name}>
+                      {category.list.map((tag) => (
+                        <ul>
+                          <input type="checkbox" id={tag} value="" class="check hidden peer" required=""/>
+                          <label for={tag} class="inline-flex rounded-full peer-checked:bg-green-50 px-2.5 py-0.5 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-600/20 peer-checked:ring-green-600/20 text-gray-500 bg-white border-1 border-transparent rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-nvidia hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-green-700 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
+                            {tag}
+                          </label>
+                        </ul>
+                      ))}
+                    </div>
+                  </div>
+                ))
+              }
           </div>
         </div>
-        <!-- Tutorials wrapper -->
-        <div id="tutorials-wrapper" class="max-w-5xl mx-auto grid sm:grid-cols-2 md:grid-cols-3 mt-16 gap-16"></div>
+        <!-- Tutorial Cards -->
+        <div id="tutorials-wrapper" class="lg:max-w-5xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 mt-4"></div>
+
       </div>
     </div>
   </div>
 </div>
 
-<script src="@glidejs/glide/dist/glide.min.js"></script>
-
-<script>
-  import Glide from '@glidejs/glide';
-
-  const config = {
-    type: 'carousel',
-    animationDuration: 1500,
-    autoplay: 7000,
-    perView: 3,
-    gap: 32,
-    dragThreshold: false,
-    breakpoints: {
-      1280: {
-        perView: 2,
-      },
-      1024: {
-        perView: 1,
-      },
-    },
-  };
-  var glide = new Glide(document.getElementById('highlights-glide'), config).mount();
-
-  glide.on('move.after', function(event) {
-    var bullets = document.getElementById('highlights-bullets');
-    for (const bullet of bullets!.children) {
-      if (bullet.classList.contains('glide__bullet--active')) {
-        bullet.classList.replace("bg-gray-200", "bg-white");
-      } else {
-        bullet.classList.replace("bg-white", "bg-gray-200");
-      }
-    };
-  });
-
-  const highlightsGlide = document.getElementById('highlights-glide');
-  highlightsGlide?.classList.add('hidden');
-</script>
-
-
-<script define:vars={{highlights, tutorials, tag_list, GoogleColab}} is:inline>
+<script define:vars={{tutorials, tag_list, GoogleColab}} is:inline>
 
   const checkboxes = document.querySelectorAll('.check');
   const filtersContainer = document.getElementById('filter-categories');
diff --git a/web/src/pages/flareDay.astro b/web/src/pages/flareDay.astro
index bae2093286..7e3ce765ed 100644
--- a/web/src/pages/flareDay.astro
+++ b/web/src/pages/flareDay.astro
@@ -282,9 +282,9 @@ const talks = [
               <h3 class="text-xl text-gray-600 mb-4">{talk.subtitle}</h3>
               <p class="text-gray-700 mb-6 text-left indent-8">{talk.description}</p>
               
-              <div class="speakers flex flex-row gap-16 mb-6 justify-center">
+              <div class="speakers flex flex-col md:flex-row lg:gap-16 mb-6 justify-center">
                 {talk.speakers.map(speaker => (
-                  <div class="speaker bg-white rounded-lg p-4 text-center w-1/3">
+                  <div class="speaker bg-white rounded-lg p-4 text-center lg:w-1/3">
                     <div class="w-28 h-28 mx-auto rounded-full overflow-hidden mb-4">
                         <img src={speaker.headshot} alt={`Headshot of ${speaker.name}`} class="object-cover w-full h-full" />
                     </div>