Add background strips per section

Author: hasparus

src/app/conf/2025/components/hero/index.tsx

@@ -11,9 +11,8 @@ import blurBean from "./blur-bean-cropped.webp"
 import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
-  // gql-conf-navbar-strip dark:before:bg-[#000]/40 dark:before:bg-[#000]/40
   return (
-    <article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 dark:before:bg-[#000]/40">
+    <article className="gql-conf-navbar-strip before:dark:bg-blk/40 relative isolate flex flex-col justify-center bg-pri-base text-neu-0 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900">
       <article className="relative">
         <Stripes />
         <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
@@ -43,7 +42,7 @@ export function Hero() {
           </div>
         </div>
       </article>
-      <div className="bg-[#000]">
+      <div className="bg-blk">
         <Image
           src={heroPhoto}
           width={1920}

src/app/conf/2025/components/navbar.tsx

@@ -1,12 +1,6 @@
 "use client"
 
-import {
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from "react"
+import { ReactElement, useCallback, useEffect, useState } from "react"
 import NextLink from "next/link"
 import { clsx } from "clsx"
 import { usePathname } from "next/navigation"

src/app/conf/2025/page.tsx

@@ -22,23 +22,23 @@ export default function Page() {
   return (
     <main className="gql-all-anchors-focusable antialiased">
       <Hero />
-      <div className="gql-conf-container text-neu-900">
+      <div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/40">
         <RegisterToday className="md:mb-8 md:mt-24" />
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
       </div>
-      <GetYourTicket />
-      <div className="gql-conf-container text-neu-900">
+      <div className="gql-conf-navbar-strip before:bg-white/40 before:dark:bg-pri-dark/[0.45]">
+        <GetYourTicket />
+      </div>
+      <div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/50">
         <RegisterSection />
         <Sponsors heading="Thanks to our 2024 sponsors!" />
         <CallForProposals />
-      </div>
-      <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
-        <Sponsor />
-        <Register />
-        <Venue />
-      </div>
-      <div className="gql-conf-container text-neu-900">
+        <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
+          <Sponsor />
+          <Register />
+          <Venue />
+        </div>
         <FAQ />
       </div>
     </main>

src/globals.css

@@ -518,7 +518,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 .gql-conf-navbar-strip {
-  @apply relative before:sticky before:top-0 before:z-[9] before:-mt-[var(--navbar-h)] before:block before:h-[var(--navbar-h)] before:w-full before:content-[''];
+  @apply relative [contain:paint] before:sticky before:top-0 before:z-[9] before:-mt-[var(--navbar-h)] before:block before:h-[var(--navbar-h)] before:w-full before:content-[''];
 }
 
 :root {

tailwind.config.ts

@@ -55,6 +55,8 @@ const config: Config = {
         "neu-700": "hsl(var(--color-neu-700) / <alpha-value>)",
         "neu-800": "hsl(var(--color-neu-800) / <alpha-value>)",
         "neu-900": "hsl(var(--color-neu-900) / <alpha-value>)",
+
+        blk: "#000",
         // #endregion new design system colors
       },
       backgroundImage: {