conf page feedback - 2 (#1893)

* feat: use href tel for phone numbers

* fix: hotel website links to open in new tab

* feat: use <time> tag

* feat: use <address> tag

* remove the translate animation

* fix: hero dates & address responsiveness

* fix: hero styles

* fix: finally fix breakpoint issues for sponsor logos

Author: saihaj

src/app/conf/2025/faq.tsx

@@ -67,7 +67,7 @@ export function FAQ() {
               className="group border-b border-dashed border-white/10"
             >
               <summary className="flex cursor-pointer list-none items-center justify-start gap-2 py-6 text-left focus:outline-none">
-                <ArrowRight className="size-5 shrink-0 transition-transform duration-200 group-open:rotate-90 group-hover:translate-x-1" />
+                <ArrowRight className="size-5 shrink-0 transition-transform duration-200 group-open:rotate-90" />
                 <span className="select-none text-lg">{faq.question}</span>
               </summary>
               <p

src/app/conf/2025/page.tsx

@@ -22,19 +22,19 @@ function Hero() {
     <section className="conf-hero-2025 relative">
       <div className="flex h-full flex-col justify-center py-16 md:py-28">
         <div className="flex flex-col items-center justify-center">
-          <h1
-            style={{
-              fontSize: "min(calc(10px + 80vw / 12), 150px)",
-              fontWeight: "bold",
-              fontFamily: rubik.style.fontFamily,
-            }}
-          >
+          <h1 className="text-center text-5xl font-bold md:text-7xl">
             GraphQLConf <span className="font-light">2025</span>
           </h1>
           <HostedByGraphQLFoundation className="mb-6 h-8 w-full shrink-0 self-start lg:h-10" />
-          <span className={`${rubik.className} text-xl font-medium`}>
-            September 08 - 10, 2025 | Amsterdam, Netherlands
-          </span>
+          <div className="flex flex-col justify-center text-xl font-medium md:flex-row md:gap-2">
+            <div className="flex items-center gap-1">
+              <time dateTime="2025-09-08">September 08</time>
+              <span>-</span>
+              <time dateTime="2025-09-10">10, 2025</time>
+            </div>
+            <span className="hidden md:block">|</span>
+            <address className="not-italic">Amsterdam, Netherlands</address>
+          </div>
         </div>
       </div>
       <div

src/app/conf/2025/past-sponsors.tsx

@@ -61,7 +61,12 @@ function List({
   linkClassName?: string
 }) {
   return (
-    <div className={clsx("flex gap-6 max-lg:flex-col", className)}>
+    <div
+      className={clsx(
+        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+        className,
+      )}
+    >
       {items.map(({ link, icon, name }, i) => (
         <a
           key={i}

src/app/conf/2025/venue.tsx

@@ -9,20 +9,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: +31 20 519 1200",
+    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>`,
   },
   {
     name: "Inntel Hotels Amsterdam Landmark",
     link: "https://www.inntelhotelsamsterdamlandmark.nl/",
-    description:
-      "VOC-kade 600\n1018 LG Amsterdam, Netherlands\n Phone: +31 20 227 2550",
+    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>`,
   },
   {
     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: +31 20 530 0800",
+    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>`,
   },
 ]
 
@@ -54,11 +51,11 @@ export function Venue() {
       <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>
-          <p>
+          <address className="not-italic">
             <strong>Pakhuis De Zwijger</strong>
             <br /> Piet Heinkade 179, 1019 HC <br />
             Amsterdam, Netherlands
-          </p>
+          </address>
           <div className="flex flex-col gap-2">
             <h3 className="mt-4 text-xl font-semibold">
               How to get to the venue?
@@ -83,18 +80,23 @@ export function Venue() {
           </p>
           <div className="mt-10 flex flex-col gap-4">
             {HOTELS.map(hotel => (
-              <div key={hotel.name}>
+              <address className="not-italic" key={hotel.name}>
                 <strong>
                   <a
                     className="flex items-center gap-1 hover:underline"
+                    target="_blank"
+                    rel="noreferrer"
                     href={hotel.link}
                   >
                     {hotel.name}
                     <ExternalLink size={14} />
                   </a>
                 </strong>
-                <p className="whitespace-pre-wrap">{hotel.description}</p>
-              </div>
+                <span
+                  className="whitespace-pre-wrap"
+                  dangerouslySetInnerHTML={{ __html: hotel.description }}
+                />
+              </address>
             ))}
           </div>
         </div>