Redo the Hero stripes in CSS

Author: hasparus

src/app/conf/2025/components/hero/blur-bean-cropped.webp

@@ -4,28 +4,25 @@ import { CalendarIcon } from "../../pixelarticons/calendar-icon"
 import { PinIcon } from "../../pixelarticons/pin-icon"
 import { GET_TICKETS_LINK } from "../../links"
 import { Button } from "../../../_design-system/button"
-import linesPng from "./lines.png"
 import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg"
+import heroPhoto from "./hero-photo.jpeg"
+import blurBean from "./blur-bean-cropped.webp"
+
+// - the background is made of even and odd stripes every 12px and a mask
+// - i can have two divs with repeating background image and a mask
 
 export function Hero() {
   return (
-    <section className="bg-pri-base dark:bg-pri-darker text-neu-0 dark:text-neu-900 isolate flex flex-col justify-center">
-      <div className="relative flex flex-col gap-12 p-4 pt-6 md:gap-12 md:bg-left md:px-24 xl:pb-16 xl:pt-24">
-        <div
-          className="pointer-events-none absolute inset-0 max-md:rotate-180 md:bg-left"
-          style={{
-            // todo: consider recreating this in CSS, so we can animate
-            backgroundImage: `url(http://github.com/%3Cspan%20class=pl-s1%3E%3Cspan%20class=pl-kos%3E$%7B%3C/span%3E%3Cspan%20class=pl-s1%3ElinesPng%3C/span%3E%3Cspan%20class=pl-kos%3E.%3C/span%3E%3Cspan%20class=pl-c1%3Esrc%3C/span%3E%3Cspan%20class=pl-kos%3E%7D%3C/span%3E%3C/span%3E)`,
-            backgroundSize: "cover",
-          }}
-        />
-        <div className="z-10 flex gap-10 max-md:flex-col md:justify-between">
-          <h1 className="typography-d1 flex flex-wrap gap-2">
+    <section className="isolate flex flex-col justify-center bg-pri-base text-neu-0 dark:bg-pri-darker dark:text-neu-900">
+      <div className="relative mx-auto flex w-[90rem] max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 md:gap-12 md:bg-left md:px-24 xl:pb-16 xl:pt-24">
+        <Stripes />
+        <div className="flex gap-10 max-md:flex-col md:justify-between">
+          <h1 className="flex flex-wrap gap-2 typography-d1">
             <span>GraphQLConf</span>
             <span className="text-sec-base">2025</span>
           </h1>
           <div className="flex h-min items-center gap-4">
-            <span className="typography-body-sm whitespace-pre">hosted by</span>
+            <span className="whitespace-pre typography-body-sm">hosted by</span>
             <img
               src={graphqlFoundationWordmarkSvg.src}
               alt="GraphQL Foundation"
@@ -42,6 +39,15 @@ export function Hero() {
           </Button>
         </div>
       </div>
+      <div className="bg-[#000]">
+        <Image
+          src={heroPhoto}
+          width={1920}
+          height={560}
+          alt="five speakers at GraphQLConf 2024"
+          className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
+        />
+      </div>
     </section>
   )
 }
@@ -57,10 +63,60 @@ function DateAndLocation() {
       </div>
       <div className="flex items-center gap-2">
         <PinIcon className="size-6" />
-        <address className="typography-body-md not-italic">
+        <address className="not-italic typography-body-md">
           Amsterdam, Netherlands
         </address>
       </div>
     </div>
   )
 }
+
+function Stripes() {
+  const maskEven =
+    "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
+  const maskOdd =
+    "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
+
+  // TODO: dark mode:
+  // background: linear-gradient(180deg, var(--Primary-Dark, #990069) 0%, #660046 100%);
+  // ^ the same one as with base
+  // background: linear-gradient(180deg, #990069 0%, var(--Primary-Dark, #990069) 100%);
+  // ^ the same one as with light
+
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] -z-10"
+      // todo: animate opacity up after the image is loaded
+      style={{
+        maskImage: `url(http://github.com/%3Cspan%20class=pl-s1%3E%3Cspan%20class=pl-kos%3E$%7B%3C/span%3E%3Cspan%20class=pl-s1%3EblurBean%3C/span%3E%3Cspan%20class=pl-kos%3E.%3C/span%3E%3Cspan%20class=pl-c1%3Esrc%3C/span%3E%3Cspan%20class=pl-kos%3E%7D%3C/span%3E%3C/span%3E)`,
+        WebkitMaskImage: `url(http://github.com/%3Cspan%20class=pl-s1%3E%3Cspan%20class=pl-kos%3E$%7B%3C/span%3E%3Cspan%20class=pl-s1%3EblurBean%3C/span%3E%3Cspan%20class=pl-kos%3E.%3C/span%3E%3Cspan%20class=pl-c1%3Esrc%3C/span%3E%3Cspan%20class=pl-kos%3E%7D%3C/span%3E%3C/span%3E)`,
+        maskSize: "100%",
+        WebkitMaskSize: "100%",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskPosition: "center",
+        WebkitMaskPosition: "center",
+      }}
+    >
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "linear-gradient(180deg, hsl(var(--color-pri-light)) 0%, hsl(319deg, 100%, 90%, 0.4) 100%)",
+          maskImage: maskEven,
+          WebkitMaskImage: maskEven,
+        }}
+      />
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "linear-gradient(180deg, hsl(319deg, 100%, 90%, 0.2) 0%, hsl(var(--color-pri-base)) 100%)",
+          maskImage: maskOdd,
+          WebkitMaskImage: maskOdd,
+        }}
+      />
+    </div>
+  )
+}