banner

Author: corwintines

public/content/community/events/index.md

@@ -13,6 +13,8 @@ hideEditButton: true
 
 This is a non-exhaustive list maintained by our community. Know of an upcoming Ethereum event to add to this list? [Please add it](https://github.com/ethereum/ethereum-org-website/blob/dev/src/data/community-events.json)!
 
+<EventsOrganizerBanner className="mt-16" />
+
 ## Ethereum meetups {#meetups}
 
 Don't see an event that works for you? Try joining a meetup. Meetups are smaller events held by groups of Ethereum enthusiasts - a chance for people interested in Ethereum to get together, talk about Ethereum, and learn about recent developments.

public/content/community/events/organizing/index.md

@@ -32,7 +32,7 @@ If you realize that many of these elements are missing, don’t worry — buildi
 * **Collaborate with existing tech communities.** If there are developer groups, startup ecosystems, or blockchain meetups already established, partner with them to introduce Ethereum topics and expand your reach.  
 * **Share educational content** about Ethereum’s potential.  
 * **Reach out to global communities.** Connect with established Ethereum groups and projects worldwide for support, mentorship, and potential collaboration. Ethereum communities across the globe have at least one thing in common: They are all eager to help.  
-* **Try and secure funding** — whether from local web3 companies or through some grants programme such as [ESP](https://esp.ethereum.foundation/). 
+* **Try and secure funding** — whether from local web3 companies or through some grants program such as [ESP](https://esp.ethereum.foundation/). 
 
 ### **If yes, how to maintain and grow it**
 

src/components/Banners/EventsOrganizerBanner.tsx

@@ -0,0 +1,59 @@
+import { cn } from "@/lib/utils/cn"
+
+import { Image } from "../Image"
+import { ButtonLink } from "../ui/buttons/Button"
+import { Flex, Stack } from "../ui/flex"
+
+import PeopleLearning from "@/public/images/people-learning.png"
+
+// TODO: refactor to use CalloutBanner component
+function EventsOrganizerBanner({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <aside
+      className={cn(
+        "flex flex-col rounded md:flex-row",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20",
+        className
+      )}
+      {...props}
+    >
+      <Flex
+        className={cn(
+          "relative flex-[1_1_50%]",
+          "justify-center md:justify-end",
+          "items-end",
+          "md:min-h-auto min-h-[200px]",
+          "px-8 md:px-0"
+        )}
+      >
+        <Image
+          className="absolute max-h-[120%] w-full object-contain"
+          src={PeopleLearning}
+          alt="People learning about Ethereum"
+        />
+        <div className="w-full border-b border-[#D3C5F1] md:hidden" />
+      </Flex>
+      <Stack
+        className={cn("flex-[1_1_50%]", "gap-8 py-8 ps-8", "pe-8 lg:pe-0")}
+      >
+        <Stack className="px-2">
+          <h2>Planning an Ethereum event?</h2>
+          <p className="text-lg text-body">
+            Check out the Ethereum event guide built by the community, for the
+            community.
+          </p>
+        </Stack>
+        <div>
+          <ButtonLink href="/community/events/organizing">
+            Read the guide
+          </ButtonLink>
+        </div>
+      </Stack>
+    </aside>
+  )
+}
+
+export default EventsOrganizerBanner

src/layouts/Static.tsx

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from "react"
 import type { ChildOnlyProp, Lang } from "@/lib/types"
 import type { MdPageContent, StaticFrontmatter } from "@/lib/interfaces"
 
+import EventsOrganizerBanner from "@/components/Banners/EventsOrganizerBanner"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import Callout from "@/components/Callout"
 import Contributors from "@/components/Contributors"
@@ -60,6 +61,7 @@ export const staticComponents = {
   Callout,
   Contributors,
   EnergyConsumptionChart,
+  EventsOrganizerBanner,
   GlossaryDefinition,
   GlossaryTooltip,
   Link,