From b4bf22ccbc33f848bab9efe6b8764d60aafa8c4d Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Thu, 6 Nov 2025 13:08:12 -0500 Subject: [PATCH 1/8] html foundation --- .../CommunityEvents/CommunityEvents.astro | 21 +++++++++++++++++++ .../CommunityEvents/styles.module.css | 14 +++++++++++++ src/pages/index.astro | 3 +++ 3 files changed, 38 insertions(+) create mode 100644 src/components/CommunityEvents/CommunityEvents.astro create mode 100644 src/components/CommunityEvents/styles.module.css diff --git a/src/components/CommunityEvents/CommunityEvents.astro b/src/components/CommunityEvents/CommunityEvents.astro new file mode 100644 index 00000000000..0575200680f --- /dev/null +++ b/src/components/CommunityEvents/CommunityEvents.astro @@ -0,0 +1,21 @@ +--- +import { SvgArrowRight2, Typography } from "@chainlink/blocks" +import styles from "./styles.module.css" +--- + +
+
+ + Community Events + + + + + +
+
diff --git a/src/components/CommunityEvents/styles.module.css b/src/components/CommunityEvents/styles.module.css new file mode 100644 index 00000000000..61b151d449c --- /dev/null +++ b/src/components/CommunityEvents/styles.module.css @@ -0,0 +1,14 @@ +.sectionHeader { + display: flex; + gap: var(--space-4x); + align-items: end; +} +.arrow { + padding: 10px; + border: 1px solid var(--border); + height: fit-content; + cursor: default; + &:hover { + border: 1px solid var(--foreground); + } +} diff --git a/src/pages/index.astro b/src/pages/index.astro index 52e505921c5..f3f570e77a2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -7,6 +7,7 @@ import * as CONFIG from "../config" import Demos from "~/components/Demos.astro" import { Typography } from "@chainlink/blocks" import LandingHero from "~/components/LandingHero/LandingHero.astro" +import CommunityEvents from "~/components/CommunityEvents/CommunityEvents.astro" const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` --- @@ -22,6 +23,8 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl + +

Recommended reading

We think you'd love to explore

From 59820994e38d5a7f2256fdaede750ac18582fdaf Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Thu, 6 Nov 2025 14:46:57 -0500 Subject: [PATCH 2/8] finish --- .../CommunityEvents/CommunityEvents.astro | 93 ++++++++++++++- .../CommunityEvents.module.css | 98 ++++++++++++++++ .../CommunityEvents/EventCard.astro | 41 +++++++ .../CommunityEvents/EventCard.module.css | 97 ++++++++++++++++ .../CommunityEvents/ImageGallery.astro | 48 ++++++++ .../CommunityEvents/ImageGallery.module.css | 109 ++++++++++++++++++ src/components/CommunityEvents/fetchEvents.ts | 53 +++++++++ .../CommunityEvents/styles.module.css | 14 --- src/components/CommunityEvents/types.ts | 18 +++ src/pages/index.astro | 13 ++- 10 files changed, 565 insertions(+), 19 deletions(-) create mode 100644 src/components/CommunityEvents/CommunityEvents.module.css create mode 100644 src/components/CommunityEvents/EventCard.astro create mode 100644 src/components/CommunityEvents/EventCard.module.css create mode 100644 src/components/CommunityEvents/ImageGallery.astro create mode 100644 src/components/CommunityEvents/ImageGallery.module.css create mode 100644 src/components/CommunityEvents/fetchEvents.ts delete mode 100644 src/components/CommunityEvents/styles.module.css create mode 100644 src/components/CommunityEvents/types.ts diff --git a/src/components/CommunityEvents/CommunityEvents.astro b/src/components/CommunityEvents/CommunityEvents.astro index 0575200680f..7334cc2aefa 100644 --- a/src/components/CommunityEvents/CommunityEvents.astro +++ b/src/components/CommunityEvents/CommunityEvents.astro @@ -1,9 +1,85 @@ --- import { SvgArrowRight2, Typography } from "@chainlink/blocks" -import styles from "./styles.module.css" +import EventCard from "./EventCard.astro" +import ImageGallery from "./ImageGallery.astro" +import type { GalleryImage } from "./types" +import { fetchEventsFromRSS } from "./fetchEvents" +import styles from "./CommunityEvents.module.css" + +// Community event gallery images +const galleryImages: GalleryImage[] = [ + { + id: "1", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd59_home-community-5.webp", + alt: "Chainlink community event", + }, + { + id: "2", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd55_home-community-2.webp", + alt: "Chainlink community event", + }, + { + id: "3", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd30_home-community-4.webp", + alt: "Chainlink community event", + }, + { + id: "4", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd46_home-community-11.webp", + alt: "Chainlink community event", + }, + { + id: "5", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd51_home-community-3.webp", + alt: "Chainlink community event", + }, + { + id: "6", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd42_home-community-10.webp", + alt: "Chainlink community event", + }, + { + id: "7", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd24_community-photo-12.webp", + alt: "Chainlink community event", + }, + { + id: "8", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd2b_community-photo-10.webp", + alt: "Chainlink community event", + }, + { + id: "9", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd4c_community-photo-24.webp", + alt: "Chainlink community event", + }, + { + id: "10", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd3d_community-photo-22.webp", + alt: "Chainlink community event", + }, + { + id: "11", + imageUrl: + "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd36_community-photo-30.webp", + alt: "Chainlink community event", + }, +] + +const events = await fetchEventsFromRSS() --- -
+
- +
+
+
+
+ {events.map((event) => )} +
+
+ +
+ +
+
diff --git a/src/components/CommunityEvents/CommunityEvents.module.css b/src/components/CommunityEvents/CommunityEvents.module.css new file mode 100644 index 00000000000..b51832b4c43 --- /dev/null +++ b/src/components/CommunityEvents/CommunityEvents.module.css @@ -0,0 +1,98 @@ +.wrapper { + margin: 86px 0; +} +.component { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + grid-auto-columns: 1fr; + align-items: center; + gap: 33px; + width: 100%; +} + +.contentLeft { + justify-self: end; + width: 100%; + max-width: calc(var(--fullwidth-max-width) / 2); + padding-left: var(--space-10x); +} + +.contentRight { + display: flex; + align-items: center; + overflow: hidden; +} + +.sectionHeader { + display: flex; + gap: var(--space-4x); + align-items: end; + max-width: var(--fullwidth-max-width); + margin-bottom: var(--space-8x); + margin-left: auto; + margin-right: auto; + padding: 0 var(--space-10x); +} + +.arrow { + padding: 10px; + border: 1px solid var(--border); + height: fit-content; + cursor: pointer; + transition: border-color 0.2s ease; +} + +.arrow:hover { + border: 1px solid var(--foreground); +} + +.eventListWrapper { + width: 100%; + max-width: 40rem; +} + +.eventList { + display: flex; + flex-direction: column; + gap: var(--space-4x); +} + +/* Tablet */ +@media (max-width: 1024px) { + .component { + grid-template-columns: 1fr; + gap: var(--space-8x); + } + + .contentRight { + margin-left: 0; + width: 100%; + } + + .contentLeft { + max-width: 100%; + } +} + +/* Mobile */ +@media (max-width: 768px) { + .component { + gap: var(--space-6x); + } + + .sectionHeader { + margin-bottom: var(--space-6x); + + & > h2 { + font-size: 28px; + } + } + + .eventList { + gap: var(--space-3x); + } + .wrapper { + margin: 36px 0; + } +} diff --git a/src/components/CommunityEvents/EventCard.astro b/src/components/CommunityEvents/EventCard.astro new file mode 100644 index 00000000000..cdbeb5f9710 --- /dev/null +++ b/src/components/CommunityEvents/EventCard.astro @@ -0,0 +1,41 @@ +--- +import { Typography } from "@chainlink/blocks" +import type { CommunityEvent } from "./types" +import styles from "./EventCard.module.css" + +interface Props { + event: CommunityEvent +} + +const { event } = Astro.props +--- + + +
+ {event.month} + {event.day} +
+
+
+
+ {`${event.country} +
+ {event.location} +
+
+ + {event.title} + +
+ + + +
+
+
+ diff --git a/src/components/CommunityEvents/EventCard.module.css b/src/components/CommunityEvents/EventCard.module.css new file mode 100644 index 00000000000..0204b0e8953 --- /dev/null +++ b/src/components/CommunityEvents/EventCard.module.css @@ -0,0 +1,97 @@ +.eventCardLink { + display: flex; + align-items: center; + gap: var(--space-4x); + padding: var(--space-4x); + border-radius: 0.5rem; + text-decoration: none; + transition: all 0.3s ease; + background-color: var(--background); +} + +.eventCardLink:hover .eventCardH { + color: var(--brand) !important; +} + +.eventCardLink:hover .linkArr { + opacity: 1 !important; + transform: translate(4px, -4px); +} + +.eventDate { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-2x) var(--space-5x); + flex-shrink: 0; + border: 1px solid var(--border); + background-color: var(--muted); +} + +.eventCardDesc { + display: flex; + flex-direction: column; + gap: var(--space-2x); + flex: 1; + min-width: 0; +} + +.eventCardCountry { + display: flex; + align-items: center; + gap: var(--space-2x); +} + +.eventCardFlag { + width: 16px; + max-width: 16px; + height: 16px; + border-radius: 100%; + overflow: hidden; + flex-shrink: 0; + position: relative; +} + +.coverImg { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.eventCardCountryName { + text-transform: uppercase; + color: var(--gray-600); +} + +.eventCardHWrap { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-3x); +} + +.linkArr { + opacity: 0; + transition: all 0.3s ease; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.linkArr svg { + display: block; +} + +@media (max-width: 768px) { + .eventCardLink { + gap: var(--space-3x); + padding: var(--space-3x); + } + + .linkArr { + opacity: 1; + } +} diff --git a/src/components/CommunityEvents/ImageGallery.astro b/src/components/CommunityEvents/ImageGallery.astro new file mode 100644 index 00000000000..268d6d560ff --- /dev/null +++ b/src/components/CommunityEvents/ImageGallery.astro @@ -0,0 +1,48 @@ +--- +import type { GalleryImage } from "./types" +import styles from "./ImageGallery.module.css" + +interface Props { + images: GalleryImage[] +} + +const { images } = Astro.props + +// Split images into two rows for the gallery +const topRowImages = images.slice(0, Math.ceil(images.length / 2)) +const bottomRowImages = images.slice(Math.ceil(images.length / 2)) + +// Duplicate images for seamless infinite scroll +const topRowDuplicated = [...topRowImages, ...topRowImages] +const bottomRowDuplicated = [...bottomRowImages, ...bottomRowImages] +--- + +
+
+ +
+
+ { + topRowDuplicated.map((image) => ( +
+ {image.alt} +
+ )) + } +
+
+ + +
+
+ { + bottomRowDuplicated.map((image) => ( +
+ {image.alt} +
+ )) + } +
+
+
+
diff --git a/src/components/CommunityEvents/ImageGallery.module.css b/src/components/CommunityEvents/ImageGallery.module.css new file mode 100644 index 00000000000..c10eb701de2 --- /dev/null +++ b/src/components/CommunityEvents/ImageGallery.module.css @@ -0,0 +1,109 @@ +.contentImageWrapper { + justify-content: flex-start; + width: 100%; + display: flex; + position: relative; +} + +.imagesLayout { + grid-row-gap: 1rem; + grid-template-rows: auto; + grid-template-columns: 1fr; + grid-auto-columns: 1fr; + display: grid; + width: 100%; +} + +.imageListTop { + grid-column-gap: 1rem; + grid-row-gap: 1rem; + grid-template-rows: auto; + grid-template-columns: 1fr 1fr; + grid-auto-columns: 1fr; + align-self: center; + width: 100%; + display: grid; + overflow: hidden; +} + +.imageListBottom { + grid-column-gap: 1rem; + grid-row-gap: 1rem; + grid-template-rows: auto; + grid-template-columns: 1fr 1fr; + grid-auto-columns: 1fr; + width: 100%; + display: grid; + overflow: hidden; +} + +.imageList { + grid-column-gap: 1rem; + grid-row-gap: 1rem; + grid-template-rows: auto; + grid-template-columns: auto; + grid-auto-columns: auto; + grid-auto-flow: column; + width: fit-content; + display: grid; +} + +.imageListTop .imageList { + animation: scrollLeft 60s linear infinite; + transform: translate3d(0%, 0px, 0px); +} + +.imageListBottom .imageList { + animation: scrollRight 60s linear infinite; + transform: translate3d(-50%, 0px, 0px); +} + +.imageWrapper { + width: 16rem; + padding-top: 75%; + position: relative; + border-radius: 0.5rem; + overflow: hidden; +} + +.image { + object-fit: cover; + border-radius: 0.5rem; + width: 100%; + height: 100%; + position: absolute; + inset: 0%; +} + +@keyframes scrollLeft { + 0% { + transform: translate3d(0%, 0px, 0px); + } + 100% { + transform: translate3d(-50%, 0px, 0px); + } +} + +@keyframes scrollRight { + 0% { + transform: translate3d(-50%, 0px, 0px); + } + 100% { + transform: translate3d(0%, 0px, 0px); + } +} + +/* Pause animation on hover for better UX */ +.contentImageWrapper:hover .imageList { + animation-play-state: paused; +} + +@media (max-width: 1024px) { + .imageWrapper { + width: 12rem; + } + + .contentImageWrapper { + padding: 0 var(--space-10x); + } +} diff --git a/src/components/CommunityEvents/fetchEvents.ts b/src/components/CommunityEvents/fetchEvents.ts new file mode 100644 index 00000000000..3845c2890c6 --- /dev/null +++ b/src/components/CommunityEvents/fetchEvents.ts @@ -0,0 +1,53 @@ +import type { CommunityEvent } from "./types" + +// Fetch events from Webflow RSS feed +export const fetchEventsFromRSS = async (): Promise => { + try { + const response = await fetch("https://chain.link/events-coll/rss.xml") + const xml = await response.text() + + // Parse RSS XML manually (lightweight approach without xml2js dependency) + const items = xml.match(/[\s\S]*?<\/item>/g) || [] + const now = new Date() + now.setHours(0, 0, 0, 0) // Set to start of today to include today's events + + const events = items + .map((item, index) => { + const title = item.match(/(.*?)<\/title>/)?.[1] || "" + const pubDate = item.match(/<pubDate>(.*?)<\/pubDate>/)?.[1] || "" + const description = item.match(/<description>(.*?)<\/description>/)?.[1] || "" + const mediaContent = item.match(/<media:content url="(.*?)"/)?.[1] || "" + + // Parse description: "Nov 12, 2025 - | Meetup | Bhopal | https://luma.com/cl_bhopal01" + const descParts = description.split("|").map((s) => s.trim()) + const location = descParts[2] || "Virtual" + const eventUrl = descParts[3] || "" + + // Parse date + const dateObj = new Date(pubDate) + const month = dateObj.toLocaleDateString("en-US", { month: "short" }) + const day = dateObj.getDate().toString() + + return { + id: index.toString(), + title: title.replace(/&/g, "&"), + date: dateObj.toISOString(), + month, + day, + location, + country: location, + flagUrl: mediaContent, + eventUrl, + backgroundColor: "rgb(12, 22, 44)", + } + }) + .filter((event) => new Date(event.date) >= now) // Filter out past events + .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) // Sort ascending (closest first) + .slice(0, 3) // Only take the first 3 events + + return events + } catch (error) { + console.error("Error fetching events:", error) + return [] + } +} diff --git a/src/components/CommunityEvents/styles.module.css b/src/components/CommunityEvents/styles.module.css deleted file mode 100644 index 61b151d449c..00000000000 --- a/src/components/CommunityEvents/styles.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.sectionHeader { - display: flex; - gap: var(--space-4x); - align-items: end; -} -.arrow { - padding: 10px; - border: 1px solid var(--border); - height: fit-content; - cursor: default; - &:hover { - border: 1px solid var(--foreground); - } -} diff --git a/src/components/CommunityEvents/types.ts b/src/components/CommunityEvents/types.ts new file mode 100644 index 00000000000..ab6910a200d --- /dev/null +++ b/src/components/CommunityEvents/types.ts @@ -0,0 +1,18 @@ +export interface CommunityEvent { + id: string + title: string + date: string // ISO date string + month: string + day: string + location: string + country: string + flagUrl: string + eventUrl: string + backgroundColor?: string +} + +export interface GalleryImage { + id: string + imageUrl: string + alt: string +} diff --git a/src/pages/index.astro b/src/pages/index.astro index f3f570e77a2..8aba79a3fe7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -22,9 +22,11 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl <Demos /> <TechnicalStandards /> + </div> - <CommunityEvents /> + <CommunityEvents /> + <div class="wrapper"> <div class="recommended"> <h4>Recommended reading</h4> <h2>We think you'd love to explore</h2> @@ -145,11 +147,12 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl .wrapper { display: flex; flex-direction: column; - gap: 82px; max-width: var(--fullwidth-max-width); padding: 0 var(--space-10x); + gap: 36px; } + /*800px*/ @media (min-width: 50em) { .hero { max-width: var(--fullwidth-max-width); @@ -189,7 +192,13 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl line-height: var(--space-6x); margin-bottom: var(--space-2x); } + + .wrapper { + gap: 82px; + } } + + /* 992px */ @media (min-width: 62em) { .hero { max-width: min(1200px, calc(100% - 2 * var(--space-16x))); From 334c179f136ab9be206088408e37386554c40e7a Mon Sep 17 00:00:00 2001 From: Tyrel Chambers <tychambers3@gmail.com> Date: Thu, 6 Nov 2025 14:48:48 -0500 Subject: [PATCH 3/8] Update CommunityEvents.module.css --- src/components/CommunityEvents/CommunityEvents.module.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/CommunityEvents/CommunityEvents.module.css b/src/components/CommunityEvents/CommunityEvents.module.css index b51832b4c43..9d00f0b537d 100644 --- a/src/components/CommunityEvents/CommunityEvents.module.css +++ b/src/components/CommunityEvents/CommunityEvents.module.css @@ -47,11 +47,6 @@ border: 1px solid var(--foreground); } -.eventListWrapper { - width: 100%; - max-width: 40rem; -} - .eventList { display: flex; flex-direction: column; From ec5204f8600eecbb99cee9c40be650f0077099f0 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers <tychambers3@gmail.com> Date: Thu, 6 Nov 2025 14:52:04 -0500 Subject: [PATCH 4/8] Update CommunityEvents.astro --- src/components/CommunityEvents/CommunityEvents.astro | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/CommunityEvents/CommunityEvents.astro b/src/components/CommunityEvents/CommunityEvents.astro index 7334cc2aefa..f5764dfb805 100644 --- a/src/components/CommunityEvents/CommunityEvents.astro +++ b/src/components/CommunityEvents/CommunityEvents.astro @@ -8,6 +8,7 @@ import styles from "./CommunityEvents.module.css" // Community event gallery images const galleryImages: GalleryImage[] = [ + // Top row - scrolls left { id: "1", imageUrl: @@ -44,6 +45,7 @@ const galleryImages: GalleryImage[] = [ "https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd42_home-community-10.webp", alt: "Chainlink community event", }, + // Bottom row - scrolls right { id: "7", imageUrl: From 653e46cfe483465d9fcb6f97f2244cde41e597af Mon Sep 17 00:00:00 2001 From: Tyrel Chambers <tychambers3@gmail.com> Date: Thu, 6 Nov 2025 15:18:02 -0500 Subject: [PATCH 5/8] update styling --- .../CommunityEvents.module.css | 14 +--- .../CommunityEvents/EventCard.astro | 13 +--- .../CommunityEvents/EventCard.module.css | 19 +---- .../CommunityEvents/ImageGallery.astro | 46 +++++------- .../CommunityEvents/ImageGallery.module.css | 75 +++++-------------- 5 files changed, 45 insertions(+), 122 deletions(-) diff --git a/src/components/CommunityEvents/CommunityEvents.module.css b/src/components/CommunityEvents/CommunityEvents.module.css index 9d00f0b537d..9c576da7d94 100644 --- a/src/components/CommunityEvents/CommunityEvents.module.css +++ b/src/components/CommunityEvents/CommunityEvents.module.css @@ -50,19 +50,19 @@ .eventList { display: flex; flex-direction: column; - gap: var(--space-4x); + gap: var(--space-6x); } /* Tablet */ @media (max-width: 1024px) { .component { grid-template-columns: 1fr; - gap: var(--space-8x); } .contentRight { margin-left: 0; width: 100%; + padding: 0 var(--space-10x); } .contentLeft { @@ -72,21 +72,15 @@ /* Mobile */ @media (max-width: 768px) { - .component { - gap: var(--space-6x); - } - .sectionHeader { margin-bottom: var(--space-6x); - + margin-left: unset; + margin-right: unset; & > h2 { font-size: 28px; } } - .eventList { - gap: var(--space-3x); - } .wrapper { margin: 36px 0; } diff --git a/src/components/CommunityEvents/EventCard.astro b/src/components/CommunityEvents/EventCard.astro index cdbeb5f9710..4bf52bef5a0 100644 --- a/src/components/CommunityEvents/EventCard.astro +++ b/src/components/CommunityEvents/EventCard.astro @@ -1,5 +1,5 @@ --- -import { Typography } from "@chainlink/blocks" +import { SvgArrowRight2, Typography } from "@chainlink/blocks" import type { CommunityEvent } from "./types" import styles from "./EventCard.module.css" @@ -26,16 +26,7 @@ const { event } = Astro.props <Typography variant="body-semi-l" className={styles.eventCardH}> {event.title} </Typography> - <div class={styles.linkArr}> - <svg xmlns="http://www.w3.org/2000/svg" display="block" width="16" height="16" viewBox="0 0 16 16" fill="none"> - <path - d="M11.2996 4.69952L4.69996 11.2992M11.2996 4.69952L11.2996 10.3564M11.2996 4.69952L5.64276 4.69952" - stroke="var(--chainlink-blue)" - stroke-width="1.6" - stroke-linecap="round" - stroke-linejoin="round"></path> - </svg> - </div> + <img src="/assets/icons/upper-right-arrow.svg" alt="arrow" class={styles.linkArr} /> </div> </div> </a> diff --git a/src/components/CommunityEvents/EventCard.module.css b/src/components/CommunityEvents/EventCard.module.css index 0204b0e8953..4613acc0971 100644 --- a/src/components/CommunityEvents/EventCard.module.css +++ b/src/components/CommunityEvents/EventCard.module.css @@ -2,7 +2,6 @@ display: flex; align-items: center; gap: var(--space-4x); - padding: var(--space-4x); border-radius: 0.5rem; text-decoration: none; transition: all 0.3s ease; @@ -15,7 +14,6 @@ .eventCardLink:hover .linkArr { opacity: 1 !important; - transform: translate(4px, -4px); } .eventDate { @@ -67,31 +65,16 @@ .eventCardHWrap { display: flex; - align-items: flex-start; - justify-content: space-between; + align-items: baseline; gap: var(--space-3x); } .linkArr { opacity: 0; - transition: all 0.3s ease; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; -} - -.linkArr svg { - display: block; } @media (max-width: 768px) { .eventCardLink { gap: var(--space-3x); - padding: var(--space-3x); - } - - .linkArr { - opacity: 1; } } diff --git a/src/components/CommunityEvents/ImageGallery.astro b/src/components/CommunityEvents/ImageGallery.astro index 268d6d560ff..20c0f26e5ee 100644 --- a/src/components/CommunityEvents/ImageGallery.astro +++ b/src/components/CommunityEvents/ImageGallery.astro @@ -17,32 +17,26 @@ const topRowDuplicated = [...topRowImages, ...topRowImages] const bottomRowDuplicated = [...bottomRowImages, ...bottomRowImages] --- -<div class={styles.contentImageWrapper}> - <div class={styles.imagesLayout}> - <!-- Top row - scrolls left --> - <div class={styles.imageListTop}> - <div class={styles.imageList}> - { - topRowDuplicated.map((image) => ( - <div class={styles.imageWrapper}> - <img src={image.imageUrl} alt={image.alt} loading="lazy" class={styles.image} /> - </div> - )) - } - </div> - </div> +<div class={styles.gallery}> + <!-- Top row - scrolls left --> + <div class={styles.row}> + { + topRowDuplicated.map((image) => ( + <div class={styles.imageWrapper}> + <img src={image.imageUrl} alt={image.alt} loading="lazy" class={styles.image} /> + </div> + )) + } + </div> - <!-- Bottom row - scrolls right --> - <div class={styles.imageListBottom}> - <div class={styles.imageList}> - { - bottomRowDuplicated.map((image) => ( - <div class={styles.imageWrapper}> - <img src={image.imageUrl} alt={image.alt} loading="lazy" class={styles.image} /> - </div> - )) - } - </div> - </div> + <!-- Bottom row - scrolls right --> + <div class={`${styles.row} ${styles.rowReverse}`}> + { + bottomRowDuplicated.map((image) => ( + <div class={styles.imageWrapper}> + <img src={image.imageUrl} alt={image.alt} loading="lazy" class={styles.image} /> + </div> + )) + } </div> </div> diff --git a/src/components/CommunityEvents/ImageGallery.module.css b/src/components/CommunityEvents/ImageGallery.module.css index c10eb701de2..edc1af53337 100644 --- a/src/components/CommunityEvents/ImageGallery.module.css +++ b/src/components/CommunityEvents/ImageGallery.module.css @@ -1,69 +1,29 @@ -.contentImageWrapper { - justify-content: flex-start; +.gallery { width: 100%; display: flex; - position: relative; -} - -.imagesLayout { - grid-row-gap: 1rem; - grid-template-rows: auto; - grid-template-columns: 1fr; - grid-auto-columns: 1fr; - display: grid; - width: 100%; -} - -.imageListTop { - grid-column-gap: 1rem; - grid-row-gap: 1rem; - grid-template-rows: auto; - grid-template-columns: 1fr 1fr; - grid-auto-columns: 1fr; - align-self: center; - width: 100%; - display: grid; - overflow: hidden; -} - -.imageListBottom { - grid-column-gap: 1rem; - grid-row-gap: 1rem; - grid-template-rows: auto; - grid-template-columns: 1fr 1fr; - grid-auto-columns: 1fr; - width: 100%; - display: grid; + flex-direction: column; + gap: var(--space-5x); overflow: hidden; } -.imageList { - grid-column-gap: 1rem; - grid-row-gap: 1rem; - grid-template-rows: auto; - grid-template-columns: auto; - grid-auto-columns: auto; - grid-auto-flow: column; - width: fit-content; - display: grid; -} - -.imageListTop .imageList { - animation: scrollLeft 60s linear infinite; - transform: translate3d(0%, 0px, 0px); +.row { + display: flex; + gap: var(--space-5x); + animation: scrollLeft 30s linear infinite; + flex-shrink: 0; } -.imageListBottom .imageList { - animation: scrollRight 60s linear infinite; - transform: translate3d(-50%, 0px, 0px); +.rowReverse { + animation: scrollRight 30s linear infinite; } .imageWrapper { width: 16rem; - padding-top: 75%; - position: relative; + height: 12rem; + flex-shrink: 0; border-radius: 0.5rem; overflow: hidden; + position: relative; } .image { @@ -72,7 +32,7 @@ width: 100%; height: 100%; position: absolute; - inset: 0%; + inset: 0; } @keyframes scrollLeft { @@ -93,17 +53,18 @@ } } -/* Pause animation on hover for better UX */ -.contentImageWrapper:hover .imageList { +/* Pause animation on hover */ +.gallery:hover .row { animation-play-state: paused; } @media (max-width: 1024px) { .imageWrapper { width: 12rem; + height: 9rem; } - .contentImageWrapper { + .gallery { padding: 0 var(--space-10x); } } From 80be58a016aae6c028eca3a7f7f919578bf10be1 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers <tychambers3@gmail.com> Date: Thu, 6 Nov 2025 15:21:34 -0500 Subject: [PATCH 6/8] Update fetchEvents.ts --- src/components/CommunityEvents/fetchEvents.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CommunityEvents/fetchEvents.ts b/src/components/CommunityEvents/fetchEvents.ts index 3845c2890c6..09ee45fbbef 100644 --- a/src/components/CommunityEvents/fetchEvents.ts +++ b/src/components/CommunityEvents/fetchEvents.ts @@ -1,4 +1,4 @@ -import type { CommunityEvent } from "./types" +import type { CommunityEvent } from "./types.ts" // Fetch events from Webflow RSS feed export const fetchEventsFromRSS = async (): Promise<CommunityEvent[]> => { From 1e595bb8c12c357c41b0c2d267b3e3b62b60995b Mon Sep 17 00:00:00 2001 From: Tyrel Chambers <tychambers3@gmail.com> Date: Mon, 10 Nov 2025 12:08:16 -0500 Subject: [PATCH 7/8] Update CommunityEvents.astro --- src/components/CommunityEvents/CommunityEvents.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CommunityEvents/CommunityEvents.astro b/src/components/CommunityEvents/CommunityEvents.astro index f5764dfb805..2d31b6a0945 100644 --- a/src/components/CommunityEvents/CommunityEvents.astro +++ b/src/components/CommunityEvents/CommunityEvents.astro @@ -92,7 +92,7 @@ const events = await fetchEventsFromRSS() Community Events </Typography> - <a href="https://dev.chain.link/events" class={styles.arrow}> + <a href="https://chain.link/community/events" class={styles.arrow}> <SvgArrowRight2 height={12} width={12} /> </a> </header> From 1c271f8c4bfb405c71916c28ad73b0ff978410e1 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers <tychambers3@gmail.com> Date: Mon, 10 Nov 2025 15:33:07 -0500 Subject: [PATCH 8/8] Update CommunityEvents.module.css --- src/components/CommunityEvents/CommunityEvents.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CommunityEvents/CommunityEvents.module.css b/src/components/CommunityEvents/CommunityEvents.module.css index 9c576da7d94..562ac07105c 100644 --- a/src/components/CommunityEvents/CommunityEvents.module.css +++ b/src/components/CommunityEvents/CommunityEvents.module.css @@ -56,13 +56,13 @@ /* Tablet */ @media (max-width: 1024px) { .component { - grid-template-columns: 1fr; + display: flex; + flex-direction: column-reverse; } .contentRight { margin-left: 0; width: 100%; - padding: 0 var(--space-10x); } .contentLeft {