Fix: Banner design inconsistencies (#132)

This PR addresses design inconsistencies in the announcement banner on different screen breakpoints. Here's a summary of the changes: **Fixes:** Resolved design inconsistencies of the banner component. **AddOns:** Added a background to the banner to simulate the Uganda flag & PyConUg theme colors (Black, Yellow, Red) These changes aim to enhance the visual appeal of the website by providing a more catchy announcement banner. Please review and provide feed back. Thanks --------- Co-authored-by: HassanBahati <[email protected]>
PyconUg · May 20, 2024 · 6a20ccc · 6a20ccc
1 parent c8deb22
commit 6a20ccc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git a/app/2024/page.js b/app/2024/page.js
@@ -20,9 +20,9 @@ export default function HomePage() {
           height="315"
           src="https://www.youtube.com/embed/CaxkWrZcdQU?si=HS54xGq4b-k5gCCc&amp;controls=0"
           title="YouTube video player"
-          frameborder="0"
+          frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowfullscreen
+          allowFullScreen
         ></iframe>
       </div>
       {/* <KeyNotes /> */}

diff --git a/components/banner.jsx b/components/banner.jsx
@@ -9,35 +9,43 @@ export default function Banner() {
   return (
     <>
       {isShowed ? (
-        <div className="bg-gray-200 md:py-4 lg:px-24 md:px-16 px-6 py-2 text-center text-sm text-gray-900">
-          <div className="container flex items-center justify-between">
-            <p>
-              🎉 <span className="font-bold">Big Announcement!</span> 🌍 PyCon
-              Uganda to Host PyCon Africa 2026 !
-            </p>
-            <div className="flex flex-row items-center space-x-4">
-              <span className="text-blue-400">
-                <Link
-                  href="https://twitter.com/pyconafrica/status/1784915709513892285?t=OKuV23QLnKtH4ulO2G2XZA&s=19"
-                  target="_blank"
-                  className="underline"
-                >
-                  Read More
-                </Link>
-              </span>
-              <button
-                className="rounded-full text-gray-900 hover:bg-gray-800 hover:text-white focus:bg-gray-800 focus:text-white"
-                size="icon"
-                variant="ghost"
-                onClick={() => setIsShowed(false)}
-              >
-                <Cross2Icon className="h-4 w-4" />
-                <span className="sr-only">Dismiss</span>
-              </button>
-            </div>
+        <div className="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+          <div className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
+            <div
+              className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-yellow-500 via-black to-red-500 opacity-30"
+              style={{
+                clipPath:
+                  "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
+              }}
+            />
+          </div>
+          <div className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
+            <div
+              className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-red-500 via-black to-yellow-500 opacity-30"
+              style={{
+                clipPath:
+                  "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
+              }}
+            />
+          </div>
+          <p>
+            🎉 <span className="font-bold">Big Announcement!</span> 🌍 PyCon Uganda to Host PyCon Africa 2026!
+            <Link
+              href="https://twitter.com/pyconafrica/status/1784915709513892285?t=OKuV23QLnKtH4ulO2G2XZA&s=19"
+              target="_blank"
+              className="whitespace-nowrap font-bold underline text-blue-600 ml-8"
+            >
+              Read More
+            </Link>
+          </p>
+          <div className="flex flex-1 justify-end">
+            <button type="button" className="-m-3 p-3 focus-visible:outline-offset-[-4px]" onClick={() => setIsShowed(false)}>
+              <span className="sr-only">Dismiss</span>
+              <Cross2Icon className="h-5 w-5 text-gray-900" aria-hidden="true" />
+            </button>
           </div>
         </div>
       ) : null}
     </>
   );
-}
+}