Polish on conf site (#1390)

* Colocate location, reorder content

* fix mobile layout

* main page polish, mobile layout fix

* fix faq/speak

* button style

* fix buttons

* fix icons

Author: leebyron

src/components/Conf/About/index.tsx

@@ -14,44 +14,44 @@ const list = [
 const whyAttend = [
   {
     title: (
-      <p>
+      <span>
         <span className="font-bold">Learn</span> about the latest developments
         in GraphQL and related technologies, including GraphQL Core and beyond.
-      </p>
+      </span>
     ),
   },
   {
     title: (
-      <p>
+      <span>
         <span className="font-bold">Discover</span> best practices and
         real-world use cases through engaging presentations and panel
         discussions.
-      </p>
+      </span>
     ),
   },
   {
     title: (
-      <p>
+      <span>
         <span className="font-bold">Connect</span> with leading companies that
         are using GraphQL to transform their businesses and industries.
-      </p>
+      </span>
     ),
   },
   {
     title: (
-      <p>
+      <span>
         <span className="font-bold">Build</span> your skills and deepen your
         understanding of GraphQL through workshops, tutorials, and code labs.
-      </p>
+      </span>
     ),
   },
   {
     title: (
-      <p>
+      <span>
         <span className="font-bold">Network</span> with a diverse and vibrant
         community of professionals who are passionate about GraphQL and its
         potential.
-      </p>
+      </span>
     ),
   },
 ]

src/components/Conf/Button/index.tsx

@@ -10,24 +10,17 @@ interface Props {
 
 const ButtonConf = ({ text, href, target, className, onWhiteBg }: Props) => {
   return (
-    <button
+    <a
       className={
-        `transition ease-in-out no-underline inline-flex text-center ${
-          onWhiteBg ? "bg-[#0e031c]" : "bg-white"
-        } border-0 py-2 px-6 focus:outline-none hover:drop-shadow-md hover:scale-105 rounded text-lg ` +
-        (className ?? "")
+        `block cursor-pointer transition ease-in-out no-underline inline-flex text-center border-0 py-2 px-6 no-underline hover:no-underline focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base font-medium whitespace-nowrap ${
+          onWhiteBg ? "bg-[#B48EF1] text-white" : "bg-white text-black"
+        } ${className ?? ""}`
       }
+      href={href}
+      target={target}
     >
-      <a
-        className={`text-sm sm:text-base font-medium whitespace-nowrap cursor-pointer ${
-          onWhiteBg ? "text-white" : "text-black"
-        } no-underline hover:no-underline`}
-        href={href}
-        target={target}
-      >
-        {text}
-      </a>
-    </button>
+      {text}
+    </a>
   )
 }
 

src/components/Conf/Footer/index.tsx

@@ -3,21 +3,22 @@ import SocialIcons from "../SocialIcons"
 
 const links = [
   [
-    { text: "GraphQLConf", href: "/conf/" },
+    { text: "Attend", href: "/conf/#attend" },
     { text: "Speakers", href: "/conf/#speakers" },
     { text: "Schedule", href: "/conf/#schedule" },
     { text: "Location", href: "/conf/#location" },
   ],
   [
-    { text: "Register", href: "/conf/#register" },
     { text: "Speak", href: "/conf/speak/" },
     { text: "Sponsor", href: "/conf/sponsor/" },
+    { text: "FAQ", href: "/conf/faq/" },
+    { text: "Contact Us", href: "/conf/faq/#contact" },
   ],
   [
-    { text: "FAQ", href: "/conf/faq/" },
+    { text: "GraphQL", href: "/" },
+    { text: "GraphQL Foundation", href: "/foundation/" },
     { text: "Code of Conduct", href: "/conf/faq/#codeofconduct" },
     { text: "Diversity & Inclusion", href: "/conf/faq/#dni" },
-    { text: "Contact Us", href: "/conf/faq/#contact" },
   ],
 ]
 

src/components/Conf/Header/index.tsx

@@ -2,35 +2,26 @@ import React from "react"
 import ButtonConf from "../Button"
 
 interface LinkItem {
-  section: string
   text: string
   href: string
   noMobile?: boolean
 }
 
 const links: LinkItem[] = [
-  {
-    section: "Register",
-    text: "Register",
-    href: "/conf/#register",
-  },
-  { section: "Speak", text: "Speak", href: "/conf/speak/" },
-  {
-    section: "Sponsor",
-    text: "Sponsor",
-    href: "/conf/sponsor/",
-  },
-  { section: "FAQ", text: "FAQ", href: "/conf/faq/" },
+  { text: "Attend", href: "/conf/#attend" },
+  { text: "Speak", href: "/conf/speak/" },
+  { text: "Sponsor", href: "/conf/sponsor/" },
+  { text: "FAQ", href: "/conf/faq/" },
 ]
 
 const HeaderConf = () => {
   return (
     <header className="bg-[#0E031C] gap-2 shadow-lg px-5 h-[70px]">
-      <div className="container flex items-center h-full gap-5">
-        <a href="/conf/" className="shrink-0">
+      <div className="container flex items-center h-full gap-5 max-sm:justify-center">
+        <a href="/conf/" className="shrink-0 max-sm:hidden">
           <img
             src="/img/conf/graphql-conf-logo-simple.svg"
-            className="max-md:w-24"
+            className="mt-[5px] mr-2 max-md:w-24"
           />
         </a>
         {links.map(link => (
@@ -43,7 +34,7 @@ const HeaderConf = () => {
           </a>
         ))}
         <ButtonConf
-          text="Register Now!"
+          text="Buy a Ticket!"
           href="https://cvent.me/4zbxz9"
           target="_blank"
           className="ml-auto max-sm:hidden"

src/components/Conf/Pricing/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { CheckCircledIcon } from "@radix-ui/react-icons"
+import ButtonConf from "../Button"
 
 interface Pricing {
   title: string
@@ -48,14 +49,12 @@ const includes = [
 
 const PricingConf = () => {
   return (
-    <div id="register">
+    <div id="attend">
       <div className="bg-[#0E031C] container mt-10 mb-6">
         <div className="flex flex-col text-center w-full">
-          <h1 className="text-4xl text-white font-bold">
-            Pricing &amp; Registration
-          </h1>
+          <h1 className="text-4xl text-white font-bold">Attend</h1>
         </div>
-        <div className="max-w-[80ch] mx-auto">
+        <div className="mx-auto">
           <div className="flex max-md:flex-wrap gap-8 mt-8">
             {pricing.map((pricing, i) => (
               <a
@@ -78,12 +77,19 @@ const PricingConf = () => {
               </a>
             ))}
           </div>
+          <div className="my-8 flex justify-center">
+            <ButtonConf
+              text="Buy a Ticket!"
+              href="https://cvent.me/4zbxz9"
+              target="_blank"
+            />
+          </div>
           <div className="w-full">
             <div className="mx-auto flex flex-col items-center text-center">
               <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-2">
                 What's included?
               </h3>
-              <div className="grid grid-cols-2 w-[fit-content]">
+              <div className="md:grid md:grid-cols-2 w-[fit-content]">
                 {includes.map((include, i) => (
                   <div
                     key={i}

src/components/Conf/SF/index.tsx

@@ -40,9 +40,9 @@ const images: Image[] = [
 ]
 const SFConf = () => {
   return (
-    <div className="bg-white pb-10 pt-8">
-      <h1 className="text-4xl text-center mb-5 text-[#0E031C] font-bold pb-6">
-        About San Francisco
+    <div className="pb-10 pt-8">
+      <h1 className="text-4xl text-white text-center mb-5 text-[#0E031C] font-bold pb-6">
+        About San Francisco Bay Area
       </h1>
       <div className="flex flex-wrap w-full justify-center">
         {images.map((image, i) => (

src/components/Conf/Schedule/index.tsx

@@ -29,12 +29,12 @@ const ScheduleGlanceConf = () => {
           <div className="mx-auto w-full grid grid-rows-1 md:grid-cols-3 justify-center gap-8 mb-5">
             {Days.map((day, i) => (
               <div key={i}>
-                <div className="h-full mx-auto w-64 p-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
+                <div className="h-full mx-auto w-64 px-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
                   <div className="p-4">
                     <p className="text-2xl text-center text-white font-bold mb-2">
                       {day.date}
                     </p>
-                    <ul className="list-disc pl-6 marker:text-[#B48EF1]">
+                    <ul className="list-disc pl-0 marker:text-[#B48EF1]">
                       {day.list.map((item, i) => (
                         <li key={i} className="text-white mb-2">
                           {item}

src/components/Conf/Section/index.tsx

@@ -10,7 +10,7 @@ interface Props {
 const SectionConf = ({ id, title, children }: Props): JSX.Element => (
   <div key={id} id={id}>
     <h2>
-      <a href={`#${id}`}>{title}</a>
+      <a href={`#${id}`} className="no-underline">{title}</a>
     </h2>
     {children}
   </div>

src/components/Conf/Speakers/index.tsx

@@ -63,7 +63,7 @@ const SpeakersConf = () => {
                     className="shrink-0 rounded-full h-36 w-36 object-cover object-center"
                   />
                   <div className="bg-[#55ACEF] h-8 w-8 flex items-center justify-center rounded-full absolute bottom-0 right-0">
-                    <a href={speaker.twitter} target="_blank">
+                    <a href={speaker.twitter} target="_blank" className="h-[20px]">
                       <TwitterLogoIcon className="text-white h-5 w-5" />
                     </a>
                   </div>

src/components/Conf/Venue/index.tsx

@@ -6,36 +6,46 @@ import { ReactComponent as ParkingIcon } from "../../../../static/img/conf/parki
 const VenueConf = () => {
   return (
     <div id="location">
-      <h1 className="text-4xl text-white font-bold mt-8 mb-6 mx-auto text-center">
+      <h1 className="text-4xl text-white font-bold mb-8 mx-auto text-center">
         Location &amp; Venue
       </h1>
+      <div className="container">
+        <p className="max-w-prose mx-auto text-white">
+          GraphQLConf 2023 is hosted in the San Francisco Bay Area, where
+          GraphQL was first created. It's hosted at the{" "}
+          <a
+            href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
+            target="_blank"
+            className="font-bold"
+          >
+            Hyatt Regency SFO
+          </a>{" "}
+          hotel in Burlingame, CA.
+        </p>
+        <img
+          src="/img/conf/sf-hotel-image.png"
+          className="object-cover w-[300px] h-[180px] md:w-[500px] md:h-[300px] rounded-xl my-8 block mx-auto"
+        />
+      </div>
       <div className="container flex flex-wrap">
         <div className="sm:w-full grid grid-rows-1 md:grid-cols-2 gap-20">
           <div>
             <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
-              Hotel Information
+              Venue Information
             </h3>
-            <p className="leading-relaxed mb-3 text-white text-base">
-              Please note, rooms will most likely sell out in advance of the
-              room block close dates listed below. We encourage you to book
-              early to secure a room at the conference rate
-              <br />
-              <br />
-              <span className="font-bold">Important:</span> The Linux Foundation
-              will never reach out to attendees by phone to make hotel
-              reservations for our conferences. Please be advised that the most
-              secure way to book in our discounted room block is by using the
-              direct booking link provided below or by calling the hotel
-              directly. If you receive a phone call or email from someone
-              claiming to be with The Linux Foundation or the hotel and they
-              attempt to sell you a hotel room, please email us at{" "}
+            <p>
               <a
+                target="_blank"
                 className="font-bold text-[#B48EF1]"
-                href="mailto:housing@linuxfoundation.org"
+                href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
               >
-                housing@linuxfoundation.org
+                Hyatt Regency SFO
+              </a>
+            </p>
+            <p>
+              <a target="_blank" href="https://goo.gl/maps/czbwwNL28YYYpw8W8">
+                1333 Old Bayshore Hwy Burlingame, CA 94010
               </a>
-              .
             </p>
             <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
               Welcome to all
@@ -67,38 +77,34 @@ const VenueConf = () => {
           </div>
           <div>
             <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
-              Venue Information
+              Hotel Information
             </h3>
-            <p className="max-w-prose mx-auto text-white">
-              GraphQLConf 2023 is hosted in the San Francisco Bay Area, where
-              GraphQL was first created, at the{" "}
-              <a
-                href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
-                target="_blank"
-                className="font-bold"
-              >
-                Hyatt Regency SFO
-              </a>
-              .
+            <p className="leading-relaxed mb-3 text-white text-base">
+              Please note, rooms will most likely sell out in advance of the
+              room block close dates listed below. We encourage you to book
+              early to secure a room at the conference rate
               <br />
               <br />
+              <span className="font-bold">Important:</span> The Linux Foundation
+              will never reach out to attendees by phone to make hotel
+              reservations for our conferences. Please be advised that the most
+              secure way to book in our discounted room block is by using the
+              direct booking link provided below or by calling the hotel
+              directly. If you receive a phone call or email from someone
+              claiming to be with The Linux Foundation or the hotel and they
+              attempt to sell you a hotel room, please email us at{" "}
               <a
-                target="_blank"
                 className="font-bold text-[#B48EF1]"
-                href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
+                href="mailto:housing@linuxfoundation.org"
               >
-                HYATT REGENCY SAN FRANCISCO AIRPORT
+                housing@linuxfoundation.org
               </a>
-              <p>1333 Old Bayshore Hwy Burlingame, CA 94010</p>
-              <img
-                src="/img/conf/sf-hotel-image.png"
-                className="object-cover w-[500px] h-[300px] rounded-xl mt-8"
-              />
+              .
             </p>
           </div>
         </div>
       </div>
-      <div className="container flex max-lg:flex-col w-full gap-14 pt-16 pb-24">
+      <div className="container flex max-lg:flex-col w-full gap-14 pt-16">
         {[
           {
             title: "Public Transportation",

src/pages/conf/faq.tsx

@@ -685,9 +685,9 @@ export default () => {
       <div className="bg-white">
         <div className="prose lg:prose-lg mx-auto py-10 max-sm:px-4">
           <h1>GraphQLConf FAQ</h1>
-          <ul className="flex flex-wrap">
+          <ul className="md:columns-2 max-lg:p-0 max-lg:m-0 list-none">
             {faq.map(q => (
-              <li key={q.id} className="flex-[50%]">
+              <li key={q.id} className="md:mt-0 md:mb-2">
                 <a href={`#${q.id}`}>{q.title}</a>
               </li>
             ))}