From e2e6eb4fb017b721e57ad2756cf1ad92b38afbca Mon Sep 17 00:00:00 2001
From: Sergiu Waxmann <47978446+sergiuwaxmann@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:42:25 +0300
Subject: [PATCH] Docs banner for https://ultralytics.com/yolo-vision (#16338)

Co-authored-by: Muhammad Rizwan Munawar <muhammadrizwanmunawar123@gmail.com>
---
 docs/overrides/main.html             |  62 ++++++++-------
 docs/overrides/stylesheets/style.css | 109 +++++++++++++++++++++------
 2 files changed, 122 insertions(+), 49 deletions(-)

diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index 48827689c1..18305746f0 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -1,30 +1,38 @@
 <!--Ultralytics YOLO 🚀, AGPL-3.0 license-->
 
-{% extends "base.html" %}
-
-{% block announce %}
-<a
-  href="https://github.com/ultralytics/ultralytics/releases/tag/v8.2.0"
-  target="_blank"
-  class="banner-wrapper"
->
-  <img
-    src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb78d08408c438e54a6f2f_yolov82_release.avif"
-    loading="lazy"
-    alt="Ultralytics YOLOv8.2 Release"
-    class="banner-content desktop"
-  />
-  <img
-    src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb7a122db51139d6c0b4a8_yolov82_release_mobile.avif"
-    loading="lazy"
-    alt="Ultralytics YOLOv8.2 Release Mobile"
-    class="banner-content mobile"
-  />
-  <img
-    src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66cb779fc2ff285f3efceea1_arrow_effects.avif"
-    loading="lazy"
-    alt="Ultralytics YOLOv8.2 Release Arrow"
-    class="banner-arrow"
-  />
-</a>
+{% extends "base.html" %} {% block announce %}
+<div class="banner-wrapper">
+  <div class="banner-content-wrapper">
+    <p>YOLO Vision 2024 is here!</p>
+    <div class="banner-info-wrapper">
+      <img
+        src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cfc78245ffa51d6f0_w_yv24.svg"
+        loading="lazy"
+        width="20"
+        height="20"
+        alt="YOLO Vision 24"
+      />
+      <p>September 27, 2024</p>
+    </div>
+    <div class="banner-info-wrapper">
+      <img
+        src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cdfbd25e409560ed8_l_yv24.svg"
+        loading="lazy"
+        width="20"
+        height="20"
+        alt="YOLO Vision 24"
+      />
+      <p>Free hybrid event</p>
+    </div>
+  </div>
+  <div class="banner-button-wrapper">
+    <div class="banner-button-wrapper large">
+      <button
+        onclick="window.open('https://www.ultralytics.com/events/yolovision', '_blank')"
+      >
+        Register now
+      </button>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/docs/overrides/stylesheets/style.css b/docs/overrides/stylesheets/style.css
index 352ab3d522..a9a89d9013 100644
--- a/docs/overrides/stylesheets/style.css
+++ b/docs/overrides/stylesheets/style.css
@@ -51,7 +51,7 @@ div.highlight {
 
 /* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
 .md-banner {
-  background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/6627a0cab2de939ad35939ed_banner_82.webp);
+  background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a211bf6831d112fd6ce3_banner_yv24.avif);
   background-size: cover;
   background-position: center;
 }
@@ -61,44 +61,109 @@ div.highlight {
   margin-bottom: 0 !important;
 }
 
-.banner-wrapper {
+.banner-wrapper,
+.banner-wrapper > .banner-content-wrapper,
+.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
   display: flex;
-  justify-content: center;
   align-items: center;
+}
+
+.banner-wrapper,
+.banner-wrapper > .banner-content-wrapper {
+  flex-direction: column;
+}
+
+.banner-wrapper {
+  justify-content: space-between;
+  gap: 16px;
+
+  padding: 16px;
+}
+
+.banner-wrapper > .banner-content-wrapper,
+.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
+  justify-content: center;
+}
+
+.banner-wrapper > .banner-content-wrapper {
+  gap: 8px;
+}
+
+.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
+  gap: 4px;
+}
 
-  height: 64px;
+.banner-wrapper > .banner-content-wrapper > p,
+.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
+  margin: 0;
+}
+
+.banner-wrapper > .banner-content-wrapper > p {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p,
+.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
+  font-size: 14px;
+}
+
+.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
+  color: #f3f3f3;
+}
 
-  overflow: hidden;
+.banner-wrapper > .banner-button-wrapper,
+.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper,
+.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
+  border-radius: 100px;
 }
 
-.banner-content {
-  max-height: 64px;
+.banner-wrapper > .banner-button-wrapper,
+.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper {
+  padding: 2px;
+
+  background-color: rgba(222, 255, 56, 0.2);
 }
 
-.banner-content.desktop {
-  display: none;
+.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper.large {
+  padding: 4px;
 }
 
-.banner-arrow {
-  display: none;
-  max-height: 80px;
-  margin-left: -16px;
-  transition: transform ease-in-out 0.5s;
+.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
+  cursor: pointer;
+
+  min-width: 132px;
+  padding: 10px;
+
+  font-weight: 500;
+  color: #111f68;
+
+  background-color: rgb(222, 255, 56);
 }
 
-.banner-wrapper:hover > .banner-arrow {
-  transform: translateX(8px);
+.banner-wrapper
+  > .banner-button-wrapper
+  > .banner-button-wrapper
+  > button:hover {
+  background-color: rgba(222, 255, 56, 0.85);
 }
 
 @media screen and (min-width: 768px) {
-  .banner-content.mobile {
-    display: none;
+  .banner-wrapper,
+  .banner-wrapper > .banner-content-wrapper {
+    flex-direction: row;
   }
-  .banner-content.desktop {
-    display: revert;
+
+  .banner-wrapper {
+    gap: 32px;
+
+    padding: 12px;
   }
-  .banner-arrow {
-    display: revert;
+
+  .banner-wrapper > .banner-content-wrapper {
+    gap: 24px;
+
+    margin: 0 auto;
   }
 }
 /* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */