Skip to content

Commit 6a20ccc

Browse files
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]>
1 parent c8deb22 commit 6a20ccc

File tree

2 files changed

+37
-29
lines changed

2 files changed

+37
-29
lines changed

app/2024/page.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export default function HomePage() {
2020
height="315"
2121
src="https://www.youtube.com/embed/CaxkWrZcdQU?si=HS54xGq4b-k5gCCc&amp;controls=0"
2222
title="YouTube video player"
23-
frameborder="0"
23+
frameBorder="0"
2424
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
25-
allowfullscreen
25+
allowFullScreen
2626
></iframe>
2727
</div>
2828
{/* <KeyNotes /> */}

components/banner.jsx

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,43 @@ export default function Banner() {
99
return (
1010
<>
1111
{isShowed ? (
12-
<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">
13-
<div className="container flex items-center justify-between">
14-
<p>
15-
🎉 <span className="font-bold">Big Announcement!</span> 🌍 PyCon
16-
Uganda to Host PyCon Africa 2026 !
17-
</p>
18-
<div className="flex flex-row items-center space-x-4">
19-
<span className="text-blue-400">
20-
<Link
21-
href="https://twitter.com/pyconafrica/status/1784915709513892285?t=OKuV23QLnKtH4ulO2G2XZA&s=19"
22-
target="_blank"
23-
className="underline"
24-
>
25-
Read More
26-
</Link>
27-
</span>
28-
<button
29-
className="rounded-full text-gray-900 hover:bg-gray-800 hover:text-white focus:bg-gray-800 focus:text-white"
30-
size="icon"
31-
variant="ghost"
32-
onClick={() => setIsShowed(false)}
33-
>
34-
<Cross2Icon className="h-4 w-4" />
35-
<span className="sr-only">Dismiss</span>
36-
</button>
37-
</div>
12+
<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">
13+
<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">
14+
<div
15+
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-yellow-500 via-black to-red-500 opacity-30"
16+
style={{
17+
clipPath:
18+
"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%)",
19+
}}
20+
/>
21+
</div>
22+
<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">
23+
<div
24+
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-red-500 via-black to-yellow-500 opacity-30"
25+
style={{
26+
clipPath:
27+
"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%)",
28+
}}
29+
/>
30+
</div>
31+
<p>
32+
🎉 <span className="font-bold">Big Announcement!</span> 🌍 PyCon Uganda to Host PyCon Africa 2026!
33+
<Link
34+
href="https://twitter.com/pyconafrica/status/1784915709513892285?t=OKuV23QLnKtH4ulO2G2XZA&s=19"
35+
target="_blank"
36+
className="whitespace-nowrap font-bold underline text-blue-600 ml-8"
37+
>
38+
Read More
39+
</Link>
40+
</p>
41+
<div className="flex flex-1 justify-end">
42+
<button type="button" className="-m-3 p-3 focus-visible:outline-offset-[-4px]" onClick={() => setIsShowed(false)}>
43+
<span className="sr-only">Dismiss</span>
44+
<Cross2Icon className="h-5 w-5 text-gray-900" aria-hidden="true" />
45+
</button>
3846
</div>
3947
</div>
4048
) : null}
4149
</>
4250
);
43-
}
51+
}

0 commit comments

Comments
 (0)