Style What to Expect section nicely

Author: hasparus

src/app/conf/2025/components/register-today/index.tsx

@@ -14,7 +14,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
   return (
     <section
       className={clsx(
-        "flex gap-10 px-4 max-lg:flex-col-reverse lg:px-12 xl:gap-x-24 xl:px-24",
+        "flex gap-10 px-4 py-8 max-lg:flex-col-reverse lg:px-12 xl:gap-x-24 xl:px-24",
         className,
       )}
     >
@@ -28,10 +28,10 @@ export function RegisterToday({ className }: RegisterTodayProps) {
       />
       <div className="flex flex-col justify-between">
         <div>
-          <h2 className="typography-h2 text-neu-900">
+          <h2 className="text-neu-900 typography-h2">
             Let's celebrate 10 years of GraphQL together
           </h2>
-          <p className="typography-h3 text-neu-800 mt-6 md:mt-10">
+          <p className="mt-6 text-neu-800 typography-h3 md:mt-10">
             Join three transformative days of expert insights and innovation to
             shape the next decade of APIs!
           </p>

src/app/conf/2025/components/what-to-expect.tsx

@@ -8,16 +8,31 @@ export default function WhatToExpectSection({
   ...rest
 }: WhatToExpectSectionProps) {
   return (
-    <section className={clsx("text-neu-900", className)} {...rest}>
-      <h1>What to expect</h1>
-      <dl className="uppercase [text-box:trim_cap]">
-        <li className="p-6">
-          <span className="text-[72px]">3</span> days
-        </li>
-        <li className="p-6">23 speakers</li>
-        <li className="p-6">36 panels & workshops</li>
-        <li className="p-6">1 unique venue</li>
+    <section
+      className={clsx(
+        "flex gap-6 px-4 py-8 text-neu-900 max-md:flex-col lg:px-12 xl:gap-x-24 xl:px-24",
+        className,
+      )}
+      {...rest}
+    >
+      <h3 className="typography-h2 md:flex-1">What to expect</h3>
+      <dl className="flex flex-col gap-6 uppercase md:flex-1">
+        <ListItem number="3" text="days" />
+        <ListItem number="23" text="speakers" />
+        <ListItem number="36" text="panels & workshops" />
+        <ListItem number="1" text="unique venue" />
       </dl>
     </section>
   )
 }
+
+function ListItem({ number, text }: { number: string; text: string }) {
+  return (
+    <li className="list-none bg-gradient-to-r from-[#CDF27E] p-6 dark:from-[#507501]">
+      <span className="inline-block w-[87px] text-[72px]/none [text-box:trim-both_cap_alphabetic]">
+        {number}
+      </span>{" "}
+      <span className="ml-10 inline-block typography-menu">{text}</span>
+    </li>
+  )
+}

src/app/conf/2025/page.tsx

@@ -35,9 +35,9 @@ export default function Page() {
   return (
     <main>
       <Hero />
-      <div className="mx-auto max-w-[90rem]">
-        <RegisterToday className="mt-8 md:mb-16 md:mt-24" />
-        <WhatToExpectSection className="mt-8" />
+      <div className="gql-conf-container mx-auto">
+        <RegisterToday className="md:mb-8 md:mt-24" />
+        <WhatToExpectSection className="md:mb-8 md:mt-24" />
       </div>
       <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32">
         <Intro />