fixes for conference page

src/assets/css/_css/index.less

@@ -15,7 +15,6 @@ div.index {
     color: #fff;
     text-align: center;
     max-width: none;
-    margin-top: 30px;
 
     & > a {
       color: white;

src/components/Conf/About/index.tsx

@@ -2,27 +2,13 @@ import { CheckCircledIcon } from "@radix-ui/react-icons"
 import React from "react"
 
 const list = [
-  {
-    title: "Cloud Engineering",
-  },
-  {
-    title: "Software Development",
-  },
-  {
-    title: "Platform Engineering",
-  },
-  {
-    title: "Data Engineering",
-  },
-  {
-    title: "Technology Architecture",
-  },
-  {
-    title: "Data Architecture",
-  },
-  {
-    title: "Product Management",
-  },
+  { title: "Cloud Engineering" },
+  { title: "Software Development" },
+  { title: "Platform Engineering" },
+  { title: "Data Engineering" },
+  { title: "Technology Architecture" },
+  { title: "Data Architecture" },
+  { title: "Product Management" },
 ]
 
 const whyAttend = [
@@ -35,31 +21,48 @@ const whyAttend = [
     ),
   },
   {
-    title: <p>
-      <span className="font-bold">Discover</span> best practices and real-world use cases through engaging presentations and panel discussions.
-    </p>
+    title: (
+      <p>
+        <span className="font-bold">Discover</span> best practices and
+        real-world use cases through engaging presentations and panel
+        discussions.
+      </p>
+    ),
   },
   {
-    title:
-      <p><span className="font-bold">Connect</span> with leading companies that are using GraphQL to transform their businesses and industries.</p>,
+    title: (
+      <p>
+        <span className="font-bold">Connect</span> with leading companies that
+        are using GraphQL to transform their businesses and industries.
+      </p>
+    ),
   },
   {
-    title:
+    title: (
       <p>
-        <span className="font-bold">Build</span> your skills and deepen your understanding of GraphQL through workshops, tutorials, and code labs.
-      </p>,
+        <span className="font-bold">Build</span> your skills and deepen your
+        understanding of GraphQL through workshops, tutorials, and code labs.
+      </p>
+    ),
   },
   {
-    title:
-      <p><span className="font-bold">Network</span> with a diverse and vibrant community of professionals who are passionate about GraphQL and its potential.</p>,
+    title: (
+      <p>
+        <span className="font-bold">Network</span> with a diverse and vibrant
+        community of professionals who are passionate about GraphQL and its
+        potential.
+      </p>
+    ),
   },
 ]
 
 const AboutSection = () => {
   return (
-    <div className="w-full bg-white flex items-center align-center py-10">
-      <div className="mx-auto w-3/4">
-        <h1 className="text-center text-4xl text-[#0E031C] font-bold mt-10">About</h1>
+    <div className="bg-white py-10">
+      <div className="container">
+        <h1 className="text-center text-4xl text-[#0E031C] font-bold mt-10">
+          About
+        </h1>
         <h3 className="text-center text-sm mt-4 mb-10">
           GRAPHQLCONF | SEP 19 – 21
         </h3>

src/components/Conf/Footer/index.tsx

@@ -24,7 +24,7 @@ const links = [
 const FooterConf = () => {
   return (
     <footer className="text-gray-600 bg-[#0E031C]">
-      <div className="container px-5 py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+      <div className="container py-24 flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 shrink-0 md:mx-0 mx-auto text-center md:text-left">
           <a
             href="/conf/"
@@ -53,7 +53,7 @@ const FooterConf = () => {
         </div>
       </div>
       <div>
-        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+        <div className="container py-4 flex flex-wrap flex-col sm:flex-row">
           <p className="text-white text-sm text-center sm:text-left">
             Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
             All rights reserved.

src/components/Conf/Header/index.tsx

@@ -26,7 +26,7 @@ const links: LinkItem[] = [
 const HeaderConf = () => {
   return (
     <header className="bg-[#0E031C] gap-2 shadow-lg px-5 h-[70px]">
-      <div className="container mx-auto flex items-center h-full gap-5">
+      <div className="container flex items-center h-full gap-5">
         <a href="/conf/" className="shrink-0">
           <img
             src="/img/conf/graphql-conf-logo-simple.svg"

src/components/Conf/Pricing/index.tsx

@@ -49,34 +49,33 @@ const includes = [
 const PricingConf = () => {
   return (
     <div id="register">
-      <div className="bg-[#0E031C] w-full mt-10 mb-6">
+      <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>
         </div>
         <div className="max-w-[80ch] mx-auto">
-          <div className="mx-auto w-full grid grid-rows-1 md:grid-cols-3 justify-center text-center gap-8 mt-8">
+          <div className="flex max-md:flex-wrap gap-8 mt-8">
             {pricing.map((pricing, i) => (
-              <div key={i}>
-                <a
-                  href="https://cvent.me/4zbxz9"
-                  target="_blank"
-                  className="block mx-auto w-64 p-6 overflow-hidden bg-[#251C39] shadow-xl rounded-2xl focus:outline-none hover:drop-shadow-lg hover:scale-[102%] hover:no-underline focus:no-underline transition ease-in-out"
-                >
-                  <div>
-                    <div className="text-center text-3xl text-white font-bold mb-2">
-                      {pricing.title}
-                    </div>
-                    <div className="text-white text-center text-sm">
-                      {pricing.date}
-                    </div>
-                    <div className="text-[#B48EF1] mt-4 p-4 rounded-full text-center text-4xl text-white font-extrabold">
-                      {pricing.price}
-                    </div>
+              <a
+                key={i}
+                href="https://cvent.me/4zbxz9"
+                target="_blank"
+                className="block mx-auto w-64 p-6 overflow-hidden bg-[#251C39] shadow-xl rounded-2xl focus:outline-none hover:drop-shadow-lg hover:scale-[102%] hover:no-underline focus:no-underline transition ease-in-out"
+              >
+                <div>
+                  <div className="text-center text-3xl text-white font-bold mb-2">
+                    {pricing.title}
                   </div>
-                </a>
-              </div>
+                  <div className="text-white text-center text-sm">
+                    {pricing.date}
+                  </div>
+                  <div className="text-[#B48EF1] mt-4 p-4 rounded-full text-center text-4xl font-extrabold">
+                    {pricing.price}
+                  </div>
+                </div>
+              </a>
             ))}
           </div>
           <div className="w-full">
@@ -95,7 +94,9 @@ const PricingConf = () => {
                       height={20}
                       width={20}
                     />
-                    <p className="leading-relaxed text-base md:text-md">{include.title}</p>
+                    <p className="leading-relaxed text-base md:text-md">
+                      {include.title}
+                    </p>
                   </div>
                 ))}
               </div>

src/components/Conf/SF/index.tsx

@@ -1,12 +1,13 @@
 import React from "react"
-import { AspectRatio } from '../../aspect-ratio'
+import { AspectRatio } from "../../aspect-ratio"
 
 interface Image {
   src: string
   name: string
   description: string
   link: string
 }
+
 const images: Image[] = [
   {
     src: "https://events.linuxfoundation.org/wp-content/uploads/2022/12/San-Francisco-Golden-Gate-Bridge-unsplash.jpg",
@@ -43,12 +44,10 @@ const SFConf = () => {
       <h1 className="text-4xl text-center mb-5 text-[#0E031C] font-bold pb-6">
         About San Francisco
       </h1>
-      <div className="flex flex-wrap w-full justify-center">
-        {images.map((image, i) => (
-          <div key={i} className="lg:w-1/5 sm:w-full mx-5 mb-5">
-            <div className="max-w-sm">
-              <AspectRatio title={image.name} src={image.src} href={image.link} />
-            </div>
+      <div className="container flex max-xl:flex-wrap justify-center gap-10 ">
+        {images.map(image => (
+          <div key={image.name} className="max-w-sm w-full">
+            <AspectRatio title={image.name} src={image.src} href={image.link} />
           </div>
         ))}
       </div>

src/components/Conf/Schedule/index.tsx

@@ -21,14 +21,14 @@ const Days: Day[] = [
 const ScheduleGlanceConf = () => {
   return (
     <div id="schedule">
-      <div className="bg-[#0E031C] max-w-[80ch] mt-20 mb-6 mx-auto">
+      <div className="bg-[#0E031C] mt-20 mb-6 container">
         <div className="text-center mx-auto text-white">
           <h1 className="text-4xl text-white font-bold mb-8">Schedule</h1>
         </div>
-        <div className="grid grid-rows-1 md:grid-cols-3 justify-center gap-8 mb-5">
+        <div className="flex max-md:flex-wrap justify-center gap-8 mb-5">
           {Days.map((day, i) => (
             <div key={i}>
-              <div className="h-full w-64 p-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
+              <div className="h-full p-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}

src/components/Conf/SocialIcons/index.tsx

@@ -1,64 +1,35 @@
 import React from "react"
+import { ReactComponent as GitHubIcon } from "../../../../static/img/logos/github.svg"
+import { ReactComponent as DiscordIcon } from "../../../../static/img/logos/discord.svg"
+import { ReactComponent as TwitterIcon } from "../../../../static/img/logos/twitter.svg"
 
 const SocialIcons = () => {
   return (
     <>
-    <a
+      <a
         className="ml-5 mt-3 text-white cursor-pointer"
         href="https://github.com/graphql"
         target="_blank"
       >
-        {/* Github */}
-        <svg
-          fill="currentColor"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="0"
-          className="w-5 h-5"
-          viewBox="0 0 24 24"
-        >
-          <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z" />
-        </svg>
+        <GitHubIcon className="h-5 w-auto" />
       </a>
       <a
         className="ml-5 mt-3 text-white cursor-pointer"
-        href="https://discord.graphql.org/"
+        href="https://discord.graphql.org"
         target="_blank"
       >
-        {/* Discord */}
-        <svg
-          fill="currentColor"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="0"
-          className="w-5 h-5"
-          viewBox="0 0 24 24"
-        >
-          <path d="M19.98,5.69c-1.68-1.34-4.08-1.71-5.12-1.82h-0.04c-0.16,0-0.31,0.09-0.36,0.24c-0.09,0.23,0.05,0.48,0.28,0.52 c1.17,0.24,2.52,0.66,3.75,1.43c0.25,0.15,0.31,0.49,0.11,0.72c-0.16,0.18-0.43,0.2-0.64,0.08C15.56,5.38,12.58,5.3,12,5.3 S8.44,5.38,6.04,6.86C5.83,6.98,5.56,6.96,5.4,6.78C5.2,6.55,5.26,6.21,5.51,6.06c1.23-0.77,2.58-1.19,3.75-1.43 c0.23-0.04,0.37-0.29,0.28-0.52c-0.05-0.15-0.2-0.24-0.36-0.24H9.14C8.1,3.98,5.7,4.35,4.02,5.69C3.04,6.6,1.09,11.83,1,16.46 c0,0.31,0.08,0.62,0.26,0.87c1.17,1.65,3.71,2.64,5.63,2.78c0.29,0.02,0.57-0.11,0.74-0.35c0.01,0,0.01-0.01,0.02-0.02 c0.35-0.48,0.14-1.16-0.42-1.37c-1.6-0.59-2.42-1.29-2.47-1.34c-0.2-0.18-0.22-0.48-0.05-0.68c0.18-0.2,0.48-0.22,0.68-0.04 c0.03,0.02,2.25,1.91,6.61,1.91s6.58-1.89,6.61-1.91c0.2-0.18,0.5-0.16,0.68,0.04c0.17,0.2,0.15,0.5-0.05,0.68 c-0.05,0.05-0.87,0.75-2.47,1.34c-0.56,0.21-0.77,0.89-0.42,1.37c0.01,0.01,0.01,0.02,0.02,0.02c0.17,0.24,0.45,0.37,0.74,0.35 c1.92-0.14,4.46-1.13,5.63-2.78c0.18-0.25,0.26-0.56,0.26-0.87C22.91,11.83,20.96,6.6,19.98,5.69z M8.89,14.87 c-0.92,0-1.67-0.86-1.67-1.91c0-1.06,0.75-1.92,1.67-1.92c0.93,0,1.67,0.86,1.67,1.92C10.56,14.01,9.82,14.87,8.89,14.87z M15.11,14.87c-0.93,0-1.67-0.86-1.67-1.91c0-1.06,0.74-1.92,1.67-1.92c0.92,0,1.67,0.86,1.67,1.92 C16.78,14.01,16.03,14.87,15.11,14.87z" />
-        </svg>
+        <DiscordIcon className="h-5 w-auto" />
       </a>
       <a
         className="ml-5 mt-3 text-white cursor-pointer"
         href="https://twitter.com/graphql"
         target="_blank"
       >
-        {/* Twitter */}
-        <svg
-          fill="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          className="w-5 h-5"
-          viewBox="0 0 24 24"
-        >
-          <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
-        </svg>
+        <TwitterIcon className="h-5 w-auto" />
       </a>
       <a
         className="ml-5 mt-3 text-white cursor-pointer"
-        href="https://www.linkedin.com/company/graphql-foundation/"
+        href="https://linkedin.com/company/graphql-foundation"
         target="_blank"
       >
         {/* LinkedIn */}
@@ -75,12 +46,12 @@ const SocialIcons = () => {
             stroke="none"
             d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
           />
-          <circle cx="4" cy="4" r="2" stroke="none"/>
+          <circle cx="4" cy="4" r="2" stroke="none" />
         </svg>
       </a>
       <a
         className="ml-5 mt-3 text-white cursor-pointer"
-        href="https://www.youtube.com/@GraphQLFoundation"
+        href="https://youtube.com/@GraphQLFoundation"
         target="_blank"
       >
         {/* YouTube */}
@@ -100,7 +71,7 @@ const SocialIcons = () => {
       </a>
       <a
         className="ml-5 mt-3 text-white cursor-pointer"
-        href="https://www.facebook.com/groups/graphql.community/"
+        href="https://facebook.com/groups/graphql.community"
         target="_blank"
       >
         {/* Facebook */}
@@ -112,7 +83,7 @@ const SocialIcons = () => {
           className="w-5 h-5"
           viewBox="0 0 24 24"
         >
-          <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
+          <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
         </svg>
       </a>
     </>

src/components/Conf/Speakers/index.tsx

@@ -52,33 +52,27 @@ const SpeakersConf = () => {
         <div className="text-center mx-auto text-white">
           <h1 className="text-4xl text-white font-bold my-4">Speakers</h1>
         </div>
-        <div className="flex justify-center items-center md:items-start flex-col md:flex-row flex-wrap gap-0 md:gap-4">
+        <div className="flex justify-center items-start flex-wrap">
           {speakers.map((speaker, i) => (
             <div key={i} className="p-4 w-[220px]">
               <div className="h-full flex flex-col items-center text-center">
                 <div className="relative">
                   <img
                     alt={speaker.name}
-                    className="shrink-0 rounded-full h-36 w-36 object-cover object-center"
                     src={speaker.image}
+                    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">
-                      <TwitterLogoIcon
-                        className="text-white"
-                        width={20}
-                        height={20}
-                      />
+                      <TwitterLogoIcon className="text-white h-5 w-5" />
                     </a>
                   </div>
                 </div>
-                <div className="w-full">
-                  <div className="text-lg text-white font-bold mt-3">
-                    {speaker.name}
-                  </div>
-                  <div className="text-gray-400 text-sm my-2">
-                    {speaker.title}
-                  </div>
+                <div className="text-lg text-white font-bold mt-3">
+                  {speaker.name}
+                </div>
+                <div className="text-gray-400 text-sm my-2">
+                  {speaker.title}
                 </div>
               </div>
             </div>