Update old sections to new typography styles

Author: hasparus

src/app/conf/2025/page.tsx

@@ -31,10 +31,8 @@ export default function Page() {
         <RegisterSection />
         <Sponsors heading="Thanks to our 2024 sponsors!" />
         <CallForProposals />
-        <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 />
-          <Venue />
-        </div>
+        <Sponsor />
+        <Venue />
         <FAQ />
       </div>
     </main>

src/app/conf/2025/sponsorship.tsx

@@ -1,10 +1,11 @@
 import { InfoGrid } from "../_components/info-grid"
+import { Button } from "../_design-system/button"
 
 export function Sponsor() {
   return (
-    <section id="sponsors">
+    <section id="sponsors" className="gql-conf-section">
       <InfoGrid
-        title="Why Sponsor?"
+        title="Become a Sponsor"
         subtitle="Connect with the global GraphQL community and showcase your brand to industry leaders and decision-makers."
         listItems={[
           {
@@ -40,14 +41,13 @@ export function Sponsor() {
       />
 
       <div className="mt-8 flex justify-center">
-        <a
+        <Button
           href="https://events.linuxfoundation.org/sponsor-GraphQLConf-25?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=sponsor_section"
           target="_blank"
           rel="noreferrer"
-          className="bg-primary/85 px-20 py-4 text-center text-3xl font-semibold transition-colors hover:bg-primary/100 md:px-28"
         >
           Download Prospectus
-        </a>
+        </Button>
       </div>
     </section>
   )

src/app/conf/2025/venue.tsx

@@ -10,17 +10,17 @@ const HOTELS = [
   {
     name: "Mövenpick Hotel Amsterdam City Centre",
     link: "https://movenpick.accor.com/en/europe/netherlands/amsterdam/hotel-amsterdam.html?utm_source=google&utm_medium=local&utm_campaign=hotel-MHR-Amsterdam-city-center&y_source=1_MTUzNjI2OTgtNzE1LWxvY2F0aW9uLndlYnNpdGU%3D",
-    description: `Piet Heinkade 11\n1019 BR Amsterdam, Netherlands\nPhone: <a class="hover:text-primary underline" href="tel:+31 20 519 1200">+31 20 519 1200</a>`,
+    description: `Piet Heinkade 11\n1019 BR Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 519 1200">+31 20 519 1200</a>`,
   },
   {
     name: "Inntel Hotels Amsterdam Landmark",
     link: "https://www.inntelhotelsamsterdamlandmark.nl/",
-    description: `VOC-kade 600\n1018 LG Amsterdam, Netherlands\n Phone: <a class="hover:text-primary underline" href="tel:+31 20 227 2550">+31 20 227 2550</a>`,
+    description: `VOC-kade 600\n1018 LG Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 227 2550">+31 20 227 2550</a>`,
   },
   {
     name: "DoubleTree by Hilton Amsterdam Central Station",
     link: "https://www.hilton.com/en/hotels/amscsdi-doubletree-amsterdam-centraal-station/?SEO_id=GMB-EMEA-DI-AMSCSDI",
-    description: `Oosterdoksstraat 4 \n1011 DK Amsterdam, Netherlands\nPhone: <a class="hover:text-primary underline" href="tel:+31 20 530 0800">+31 20 530 0800</a>`,
+    description: `Oosterdoksstraat 4 \n1011 DK Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 530 0800">+31 20 530 0800</a>`,
   },
 ]
 
@@ -29,53 +29,50 @@ const HOW_TO_GET_TO_VENUE = [
     title: "Public Transportation",
     description:
       'Take tram 26 from Amsterdam Central Station to the "Kattenburgerstraat" stop. The venue is in front of the tram stop.',
-    icon: <BusFront size={20} />,
+    icon: <BusFront size={16} />,
   },
   {
     title: "Airport Information",
     description:
       "Amsterdam Airport Schiphol is about 20 km from the venue. Take a direct train to Amsterdam Central Station, then follow the public transportation instructions.",
-    icon: <TicketsPlane size={20} />,
+    icon: <TicketsPlane size={16} />,
   },
   {
     title: "Parking at venue",
-    description: `Limited parking is available at the venue. We recommend using public transportation when possible. Learn more about parking at <a class="hover:text-primary underline" href="https://dezwijger.nl/about-us-en/contact" target="_blank">Pakhuis de Zwijger</a>. If you require an accessible parking spot, park at Vriesseveem 4 or Withoedenveem 16 where you can park if you have a Disability Parking Card.`,
-    icon: <SquareParking size={20} />,
+    description: `Limited parking is available at the venue. We recommend using public transportation when possible. Learn more about parking at <a class="typography-link" href="https://dezwijger.nl/about-us-en/contact" target="_blank">Pakhuis de Zwijger</a>. If you require an accessible parking spot, park at Vriesseveem 4 or Withoedenveem 16 where you can park if you have a Disability Parking Card.`,
+    icon: <SquareParking size={16} />,
   },
 ]
 
 export function Venue() {
   return (
-    <section>
-      <h1 className="mb-4 text-5xl font-bold">Venue</h1>
+    <section className="gql-conf-section">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-3xl">Conference</h2>
+        <div className="typography-body-md">
+          <h2 className="mb-4 typography-h2">Venue</h2>
           <address className="not-italic">
-            <strong>
-              <Link
-                className="underline hover:text-primary"
-                target="_blank"
-                href="https://dezwijger.nl/"
-              >
-                Pakhuis De Zwijger
-              </Link>
-            </strong>
+            <Link
+              className="typography-link"
+              target="_blank"
+              href="https://dezwijger.nl/"
+            >
+              Pakhuis De Zwijger
+            </Link>
             <br /> Piet Heinkade 179, 1019 HC <br />
             Amsterdam, Netherlands
           </address>
-          <div className="flex flex-col gap-2">
-            <h3 className="mt-4 text-xl font-semibold">
+          <div className="mt-6 flex flex-col gap-4">
+            <h3 className="mb-4 typography-body-lg">
               How to get to the venue?
             </h3>
             {HOW_TO_GET_TO_VENUE.map(({ title, description, icon }) => (
               <div key={title}>
                 <div className="flex flex-row items-center gap-4">
-                  {icon}
-                  <h5 className="text-lg">{title}</h5>
+                  <div className="bg-neu-100 p-1">{icon}</div>
+                  <h5 className="text-neu-800 typography-body-md">{title}</h5>
                 </div>
                 <p
-                  className="ml-9 max-w-96"
+                  className="ml-9 max-w-lg text-pretty pl-1 typography-body-sm"
                   dangerouslySetInnerHTML={{
                     __html: description,
                   }}
@@ -86,15 +83,15 @@ export function Venue() {
         </div>
 
         <div>
-          <h2 className="text-3xl">Hotel Information</h2>
-          <p className="mt-2">
+          <h2 className="mb-4 typography-h2">Hotel Information</h2>
+          <p className="typography-body-md">
             The Linux Foundation has not contracted rooms at these properties
             and cannot guarantee rates or availability.
           </p>
           <div className="mt-10 flex flex-col gap-4">
             {HOTELS.map(hotel => (
               <address className="not-italic" key={hotel.name}>
-                <strong>
+                <strong className="font-normal typography-body-md">
                   <a
                     className="flex items-center gap-1 hover:underline"
                     target="_blank"
@@ -106,7 +103,7 @@ export function Venue() {
                   </a>
                 </strong>
                 <span
-                  className="whitespace-pre-wrap"
+                  className="whitespace-pre-wrap typography-body-sm"
                   dangerouslySetInnerHTML={{ __html: hotel.description }}
                 />
               </address>

src/app/conf/_components/info-grid.tsx

@@ -14,8 +14,8 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
   id,
 }) => (
   <section id={id}>
-    <h1 className="mb-4 text-5xl font-bold text-white">{title}</h1>
-    <p className="mb-8 text-lg font-normal text-white">{subtitle}</p>
+    <h1 className="mb-4 typography-h2">{title}</h1>
+    <p className="mb-8 typography-body-lg">{subtitle}</p>
 
     {/* Horizontal Scrollable Grid */}
     <div
@@ -25,13 +25,10 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       className="scroll-snap-x flex snap-mandatory gap-6 overflow-x-auto lg:grid lg:grid-cols-3 lg:overflow-visible"
     >
       {listItems.map(({ title, description }, index) => (
-        <div
-          key={index}
-          className="lg-w[80%] w-[70%] flex-shrink-0 snap-start border border-primary p-6 text-white shadow-lg lg:w-full lg:max-w-sm"
-        >
-          <h2 className="mb-2 text-2xl font-bold">{title}</h2>
+        <div key={index} className="border border-neu-400 p-3">
+          <h2 className="mb-2 typography-body-lg">{title}</h2>
           <p
-            className="text-base [&>a]:underline [&>a]:hover:text-primary"
+            className="typography-body-md [&_a]:typography-link"
             dangerouslySetInnerHTML={{ __html: description }}
           ></p>
         </div>