apply fixes

fix button

Author: dimaMachina

src/components/Conf/About/index.tsx

@@ -115,7 +115,7 @@ const AboutSection = () => {
             </p>
           </div>
         </div>
-        <h1 className="text-center text-4xl text-[#0E031C] font-bold mt-8 mb-8">
+        <h1 className="text-center text-4xl text-[#0E031C] font-bold my-8">
           Why Attend?
         </h1>
         <div className="w-full md:w-1/2 mx-auto">
@@ -125,7 +125,7 @@ const AboutSection = () => {
           </p>
           <ul role="list" className="mt-8 space-y-4">
             {whyAttend.map((item, index) => (
-              <li key={index} className="flex gap-2 ">
+              <li key={index} className="flex gap-2">
                 <CheckCircledIcon
                   className="text-[#B48EF1]"
                   height={30}

src/components/Conf/Button/index.tsx

@@ -1,24 +1,27 @@
-import React from "react"
+import React, { ReactElement, ReactNode } from "react"
+import { clsx } from "clsx"
 
-interface Props {
-  text: React.ReactNode
+interface ButtonProps {
+  children: ReactNode
   className?: string
   href?: string
-  target?: string
-  onWhiteBg?: boolean
 }
 
-const ButtonConf = ({ text, href, target, className, onWhiteBg }: Props) => {
+function ButtonConf({ href, className, children }: ButtonProps): ReactElement {
   return (
     <a
-      className={
-        `block cursor-pointer transition ease-in-out no-underline inline-flex text-center w-[fit-content] 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 ?? ""}`
-      }
+      className={clsx(
+        "cursor-pointer transition ease-in-out no-underline inline-flex text-center w-[fit-content] 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 whitespace-nowrap",
+        "bg-[--rhodamine] text-white",
+        className
+      )}
       href={href}
-      target={target}
+      {...(href?.startsWith("https://") && {
+        target: "_blank",
+        rel: "noreferrer",
+      })}
     >
-      {text}
+      {children}
     </a>
   )
 }

src/components/Conf/Header/index.tsx

@@ -34,11 +34,11 @@ const HeaderConf = () => {
           </a>
         ))}
         <ButtonConf
-          text="Buy a Ticket!"
           href="https://cvent.me/4zbxz9"
-          target="_blank"
           className="ml-auto max-sm:hidden"
-        />
+        >
+          Buy a Ticket!
+        </ButtonConf>
       </div>
     </header>
   )

src/components/Conf/Pricing/index.tsx

@@ -78,11 +78,9 @@ const PricingConf = () => {
             ))}
           </div>
           <div className="my-8 flex justify-center">
-            <ButtonConf
-              text="Buy a Ticket!"
-              href="https://cvent.me/4zbxz9"
-              target="_blank"
-            />
+            <ButtonConf href="https://cvent.me/4zbxz9">
+              Buy a Ticket!
+            </ButtonConf>
           </div>
           <div className="w-full">
             <div className="mx-auto flex flex-col items-center text-center">

src/components/Conf/SF/index.tsx

@@ -41,19 +41,13 @@ const images: Image[] = [
 const SFConf = () => {
   return (
     <div className="pb-10 pt-8">
-      <h1 className="text-4xl text-white text-center mb-5 text-[#0E031C] font-bold pb-6">
+      <h1 className="text-4xl text-white text-center mb-5 font-bold pb-6">
         About San Francisco Bay Area
       </h1>
-      <div className="flex flex-wrap w-full justify-center">
-        {images.map((image, i) => (
-          <div key={i} className="w-full lg:w-1/5 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/Speakers/index.tsx

@@ -89,9 +89,10 @@ const SpeakersConf = () => {
           <div className="my-8">
             <ButtonConf
               className="mx-auto"
-              text="Submit to Speak"
               href="/conf/speak/"
-            />
+            >
+              Submit to Speak
+            </ButtonConf>
           </div>
         </div>
       </div>

src/components/Conf/Venue/index.tsx

@@ -47,6 +47,18 @@ const VenueConf = () => {
                 1333 Old Bayshore Hwy Burlingame, CA 94010
               </a>
             </p>
+            <div className="text-white">
+              <b>Dates with Availability</b>: September 18, 19, 20, 21, 2023
+              <br />
+              <b>Room Rates Start From</b>: $179.00
+              <br />
+              <b>Room Block Closes</b>: September 4, 2023
+              <br />
+              <i>
+                (Please note, the rate is valid until the cut-off date or the
+                room block is full)
+              </i>
+            </div>
             <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
               Welcome to all
             </h3>
@@ -74,7 +86,16 @@ const VenueConf = () => {
               </a>{" "}
               policy.
             </p>
+            <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">Alternate lodging options</h3>
+            <a
+              href="https://www.ihg.com/holidayinnexpress/hotels/us/en/burlingame/urlbh/hoteldetail"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Holiday Inn Express San Francisco Airport South, and IHG Hotel
+            </a>
           </div>
+
           <div>
             <h3 className="sm:text-2xl text-xl font-medium text-white mt-6 mb-4">
               Hotel Information
@@ -140,15 +161,19 @@ const VenueConf = () => {
             icon: AroundIcon,
             content: (
               <div>
-                <a href="https://flysfo.com">
+                <a href="https://flysfo.com" target="_blank" rel="noreferrer">
                   San Francisco International Airport (SFO)
                 </a>
                 <p>
                   Drive time from venue: 7 mins.
                   <br />
                   Distance from venue: 3.1 miles.
                 </p>
-                <a href="https://www.google.com/maps/dir/San+Francisco+International+Airport+(SFO),+San+Francisco,+CA/Hyatt+Regency+San+Francisco+Airport,+1333+Old+Bayshore+Hwy,+Burlingame,+CA+94010/@37.6056719,-122.3979086,14z/am=t/data=!4m14!4m13!1m5!1m1!1s0x808f778c55555555:0xa4f25c571acded3f!2m2!1d-122.3789554!2d37.6213129!1m5!1m1!1s0x808f762dd36adc25:0x66d848e8e05f3445!2m2!1d-122.3651261!2d37.5938725!3e0?shorturl=1">
+                <a
+                  href="https://www.google.com/maps/dir/San+Francisco+International+Airport+(SFO),+San+Francisco,+CA/Hyatt+Regency+San+Francisco+Airport,+1333+Old+Bayshore+Hwy,+Burlingame,+CA+94010/@37.6056719,-122.3979086,14z/am=t/data=!4m14!4m13!1m5!1m1!1s0x808f778c55555555:0xa4f25c571acded3f!2m2!1d-122.3789554!2d37.6213129!1m5!1m1!1s0x808f762dd36adc25:0x66d848e8e05f3445!2m2!1d-122.3651261!2d37.5938725!3e0?shorturl=1"
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   Driving Directions from SFO to Venue
                 </a>
               </div>
@@ -159,7 +184,13 @@ const VenueConf = () => {
             icon: ParkingIcon,
             content: (
               <div>
-                <a>The Hyatt Regency SFO offers self-parking.</a>
+                <a
+                  href="https://www.hyatt.com/en-US/hotel/california/hyatt-regency-san-francisco-airport/sfobu"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  The Hyatt Regency SFO offers self-parking.
+                </a>
                 <p className="font-bold">Self-Parking:</p>
                 <p>
                   0-1 hour: $12

src/pages/conf/faq.tsx

@@ -650,12 +650,9 @@ const faq: Array<{ id: string; title: string; contents: ReactNode }> = [
           <li>Application Deadline — Friday, July 21, 2023 11:59 PM PST</li>
           <li>Notifications — Week of August 7, 2023</li>
         </ul>
-        <ButtonConf
-          onWhiteBg
-          text="Apply for a Scholarship"
-          href="https://forms.gle/PwgWSTJ872Pce9XW6"
-          target="_blank"
-        />
+        <ButtonConf href="https://forms.gle/PwgWSTJ872Pce9XW6">
+          Apply for a Scholarship
+        </ButtonConf>
       </>
     ),
   },

src/pages/conf/index.tsx

@@ -37,8 +37,8 @@ export default () => {
                 </div>
               </div>
               <div className="flex justify-center gap-4 flex-row">
-                <ButtonConf text="Join as a Sponsor" href="/conf/sponsor/" />
-                <ButtonConf text="Submit to Speak" href="/conf/speak/" />
+                <ButtonConf href="/conf/sponsor/">Join as a Sponsor</ButtonConf>
+                <ButtonConf href="/conf/speak/">Submit to Speak</ButtonConf>
               </div>
             </div>
           </div>

src/pages/conf/speak.tsx

@@ -297,12 +297,9 @@ export default () => {
               </a>
               .
             </p>
-            <ButtonConf
-              onWhiteBg
-              text="Submit a Proposal"
-              href="https://sessionize.com/graphqlconf2023/"
-              target="_blank"
-            />
+            <ButtonConf href="https://sessionize.com/graphqlconf2023/">
+              Submit a Proposal
+            </ButtonConf>
           </section>
           <ul className="md:columns-2 max-lg:p-0 max-lg:m-0 list-none">
             {cfp.map(q => (

src/pages/conf/sponsor.tsx

@@ -13,28 +13,25 @@ export default () => {
         <div className="container flex py-16 items-center justify-center flex-col">
           <div className="flex flex-col items-center w-full">
             <div className="sm:text-3xl text-2xl mb-8 text-white text-center leading-relaxed">
-              <span className="block lg:inline">
-                Sponsor GraphQLConf 2023
-              </span>
+              <span className="block lg:inline">Sponsor GraphQLConf 2023</span>
             </div>
             <div className="flex justify-center items-center gap-4 flex-col sm:flex-row">
-              <ButtonConf
-                text="Explore Sponsorship"
-                target="_blank"
-                href="https://events.linuxfoundation.org/wp-content/uploads/2023/03/sponsor_GraphQLConf_2023_032423.pdf"
-              />
-              <ButtonConf
-                text="Contact Us"
-                target="_blank"
-                href="mailto:graphqlconf@graphql.org?subject=Sponsorships"
-              />
+              <ButtonConf href="https://events.linuxfoundation.org/wp-content/uploads/2023/03/sponsor_GraphQLConf_2023_032423.pdf">
+                Explore Sponsorship
+              </ButtonConf>
+              <ButtonConf href="mailto:graphqlconf@graphql.org?subject=Sponsorships">
+                Contact Us
+              </ButtonConf>
             </div>
           </div>
           <div className="mx-auto max-w-prose mt-8">
             <div className="text-black h-full bg-gray-100 bg-opacity-75 p-8 rounded-lg overflow-hidden relative">
               <p>
                 Contact us at{" "}
-                <a className="font-medium" href="mailto:graphqlconf@graphql.org">
+                <a
+                  className="font-medium"
+                  href="mailto:graphqlconf@graphql.org"
+                >
                   graphqlconf@graphql.org
                 </a>{" "}
                 to reserve your sponsorship, ask questions or talk about