add nvflare day banner, auto hide highlights (NVIDIA#2829)

web/src/components/hero.astro

@@ -3,10 +3,8 @@ import NvidiaLogo from '../images/nvidia_eye.png'
 import NvflareAnimation from '../images/nvflare_graphic_animation.mp4'
 ---
 <div class="bg-white">
-  <div
-    class="relative isolate overflow-hidden bg-black">
-    <div
-      class="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-12">
+  <div class="relative isolate overflow-hidden bg-black">
+    <div class="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-12">
       <div class="px-6 lg:px-0 lg:pt-4">
         <div class="mx-auto max-w-2xl">
           <div class="max-w-lg">

web/src/components/tutorials.astro

@@ -493,9 +493,9 @@ const tag_list = [
         <div class="bg-gray-50 max-w-5xl mx-auto mt-4 rounded-md">
 
           <!-- Highlights Accordion -->
-          <div 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">
+          <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="true" aria-controls="highlights-glide">
+              <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"/>
@@ -608,6 +608,9 @@ const tag_list = [
       }
     };
   });
+
+  const highlightsGlide = document.getElementById('highlights-glide');
+  highlightsGlide?.classList.add('hidden');
 </script>
 
 

web/src/pages/index.astro

@@ -5,10 +5,29 @@ import Code from "@components/code.astro";
 import GettingStarted from "@components/gettingStarted.astro";
 import LearnMore from "@components/learnMore.astro";
 import Overview from "@components/overview.astro"
+import NvidiaLogo from '../images/nvidia_eye.png';
 ---
 
 <Layout title="">
   <div>
+    <div id="marketing-banner" tabindex="-1" class="fixed z-[100] flex flex-col md:flex-row justify-between w-[calc(100%-2rem)] p-4 -translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-lg lg:max-w-7xl left-1/2 top-6 dark:bg-gray-700 dark:border-gray-600">
+      <div class="flex flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0">
+          <a href="https://flowbite.com/" class="flex items-center mb-2 border-gray-200 md:pe-4 md:me-4 md:border-e md:mb-0 dark:border-gray-600">
+              <img class="flex items-center h-6 me-2" src={NvidiaLogo.src} alt="NVIDIA logo">
+              <span class="self-center text-lg font-semibold whitespace-nowrap dark:text-white">NVIDIA FLARE DAY 2024: Exploring Real-world Examples of Federated Learning</span>
+          </a>
+          <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">September 18, 2024 8:00am-12:30pm (PT)</p>
+      </div>
+      <div class="flex items-center flex-shrink-0">
+          <a href="https://nvidiaflareday.splashthat.com/" class="px-5 py-2 me-2 text-xs font-medium text-white bg-nvidia rounded-lg hover:bg-green-500 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Register Now</a>
+          <button data-dismiss-target="#marketing-banner" type="button" class="flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white">
+              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+              </svg>
+              <span class="sr-only">Close banner</span>
+          </button>
+      </div>
+    </div>
     <Hero />
     <GettingStarted />
     <Code />