From 75491f75d9708ae5a3b2876d2dd44ef1699e0d46 Mon Sep 17 00:00:00 2001 From: Vedant Damedhar Date: Fri, 10 Jan 2025 14:50:28 +0530 Subject: [PATCH 1/2] fix: align 'Get Tickets' section and improve design --- pages/index.js | 270 +++++++++++++++++++++++++------------------------ 1 file changed, 138 insertions(+), 132 deletions(-) diff --git a/pages/index.js b/pages/index.js index 78c8de64..e225cd3c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -28,14 +28,14 @@ export default function Home() { } }); const list = speakers[0].lists.filter((obj, index) => { - return index === speakers[0].lists.findIndex(o => obj.name=== o.name); + return index === speakers[0].lists.findIndex(o => obj.name === o.name); }); - speakers[0].lists =[...list]; - + speakers[0].lists = [...list]; + useEffect(() => { setCity(speakers[0]); setSpeakersList(speakers[0].lists); - },[]); + }, []); return (
@@ -49,148 +49,154 @@ export default function Home() {
-
-
-
-
-
Speakers
-
-
- - Meet The Speakers - -
- - Discover the inspiring voices shaping our event, each bringing unique insights and expertise to the forefront of their respective fields. - -
-
-
- {isTablet ? ( -
- +
+
+
+
+
Speakers
+
- ) : ( -
-
- {speakers.map((speaker) => { - return ( -
{ - setCity(speaker); - setSpeakersList(speaker.lists); - }} - > - -
- ); - })} + +
+ ); + })} +
-
- )} -
+ )} +
-
- {typeof speakersList === 'string' ? ( -
-
- - {city.city} Speakers To Be Announced Soon - Stay Tuned! - +
+ {typeof speakersList === 'string' ? ( +
+
+ + {city.city} Speakers To Be Announced Soon - Stay Tuned! + +
-
- ) : Object.keys(speakersList).length > 0 ? ( -
- {speakersList.map((speaker, i) => { - return ( - - ); - })} -
- ) : ( -
-
- - {city.city} Speakers Coming Soon - Stay Tuned! - - - We are actively accepting speaker applications, and you - can start your journey by clicking the button below. Join - us on stage and share your valuable insights with our - enthusiastic audience! - - - - - - + ) : Object.keys(speakersList).length > 0 ? ( +
+ {speakersList.map((speaker, i) => { + return ( + + ); + })}
+ ) : ( +
+
+ + {city.city} Speakers Coming Soon - Stay Tuned! + + + We are actively accepting speaker applications, and you + can start your journey by clicking the button below. Join + us on stage and share your valuable insights with our + enthusiastic audience! + + + + + + +
+
+ )} +
+
+
+
+
Tickets
+
+
+
+
+

+ Get Tickets +

+

+ Experience the Future of Asynchronous Communication: Get Tickets for the
AsyncAPI Conference on Tour! +

+
+
- )} +
+
+
+ {cities.map((city) => { + if (city.ended === false) { + return + } + })}
-
-
Tickets
-
-
- - Get Tickets - -
- - Experience the Future of Asynchronous Communication: Get Tickets for the AsyncAPI Conference on Tour! - -
-
- {cities.map((city) => { - if(city.ended === false){ - return - } - })}
-
-
-
- +
- +
); From 42feaabf17dd55e7351629a739a0b92707ab5619 Mon Sep 17 00:00:00 2001 From: Vedant Damedhar Date: Fri, 10 Jan 2025 20:16:18 +0530 Subject: [PATCH 2/2] feat: Add hover animations to 'Join the AsyncAPI Conf in Paris' button --- components/announcement.js | 8 +++-- styles/globals.css | 73 +++++++++++++++++++++++++++++++++++++- 2 files changed, 77 insertions(+), 4 deletions(-) diff --git a/components/announcement.js b/components/announcement.js index ebf7f57f..33a9cce5 100644 --- a/components/announcement.js +++ b/components/announcement.js @@ -4,7 +4,9 @@ import Link from 'next/link'; export default function Announcement() { return ( -
Join the AsyncAPI Conf in Paris!
+
+ Join the AsyncAPI Conf in Paris! +
- ) -} + ); +} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 4b9c83b3..9ace8f3e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -225,4 +225,75 @@ mix-blend-mode: lighten; .hoverEffect:hover { transform: scale(1.1); /* Scale the image by 10% on hover */ -} \ No newline at end of file +} + +.announcement { + background: linear-gradient(to right, #8b5cf6, #ec4899); + color: white; + padding: 0.3rem 0.6rem; + text-align: center; + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.5rem; + cursor: pointer; + transition: all 0.3s ease-in-out; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transform: scale(1); + max-width: 200px; + margin: 0 auto; + position: relative; + overflow: hidden; +} + +.announcement::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 300%; + height: 300%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%); + transform: translate(-50%, -50%) scale(0); + transition: transform 0.5s ease-in-out; + pointer-events: none; +} + +.announcement:hover { + background: linear-gradient(to right, #ec4899, #8b5cf6); + transform: scale(1.05); + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.5); +} + +.announcement:hover::before { + transform: translate(-50%, -50%) scale(1); +} + +.announcement span { + display: inline-block; + transition: transform 0.3s ease-in-out; +} + +.announcement:hover span { + transform: scale(1.1); +} + +@media (min-width: 768px) { + .announcement { + padding: 0.4rem 0.7rem; + max-width: 220px; + } +} + +@media (min-width: 1024px) { + .announcement { + padding: 0.5rem 0.8rem; + max-width: 240px; + } +} + +@media (min-width: 1280px) { + .announcement { + padding: 0.6rem 1rem; + max-width: 260px; + } +}