Conf pages color fixes and structure adjustments

src/components/Conf/About/index.tsx

@@ -60,7 +60,7 @@ const AboutSection = () => {
   return (
     <div className="bg-white py-10">
       <div className="container">
-        <h1 className="text-center text-4xl text-[#0E031C] font-bold mt-10">
+        <h1 className="text-center text-4xl text-[#171E26] font-bold mt-10">
           About
         </h1>
         <h3 className="text-center text-sm mt-4 mb-10">
@@ -99,7 +99,7 @@ const AboutSection = () => {
               {list.map((item, index) => (
                 <li key={index} className="flex gap-2 items-center">
                   <CheckCircledIcon
-                    className="text-[#B48EF1]"
+                    className="text-[--rhodamine]"
                     height={20}
                     width={20}
                   />
@@ -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-[#171E26] font-bold my-8">
           Why Attend?
         </h1>
         <div className="w-full md:w-1/2 mx-auto">
@@ -125,9 +125,9 @@ 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]"
+                  className="text-[--rhodamine]"
                   height={30}
                   width={40}
                 />

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 font-medium",
+        className
+      )}
       href={href}
-      target={target}
+      {...(href?.startsWith("https://") && {
+        target: "_blank",
+        rel: "noreferrer",
+      })}
     >
-      {text}
+      {children}
     </a>
   )
 }

src/components/Conf/Footer/index.tsx

@@ -24,7 +24,7 @@ const links = [
 
 const FooterConf = () => {
   return (
-    <footer className="text-gray-600 bg-[#0E031C]">
+    <footer className="text-gray-600 bg-[#171E26]">
       <div className="container px-5 md:py-24 mx-auto flex md:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 shrink-0 md:mx-0 text-left">
           <a

src/components/Conf/Header/index.tsx

@@ -16,7 +16,7 @@ const links: LinkItem[] = [
 
 const HeaderConf = () => {
   return (
-    <header className="bg-[#0E031C] gap-2 shadow-lg px-5 h-[70px]">
+    <header className="bg-[#171E26] gap-2 shadow-lg px-5 h-[70px]">
       <div className="container flex items-center h-full gap-5 max-sm:justify-center">
         <a href="/conf/" className="shrink-0 max-sm:hidden">
           <img
@@ -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

@@ -50,18 +50,18 @@ const includes = [
 const PricingConf = () => {
   return (
     <div id="attend">
-      <div className="bg-[#0E031C] container mt-10 mb-6">
+      <div className="bg-[#171E26] container mt-10 mb-6">
         <div className="flex flex-col text-center w-full">
           <h1 className="text-4xl text-white font-bold">Attend</h1>
         </div>
-        <div className="mx-auto">
-          <div className="flex max-md:flex-wrap gap-8 mt-8">
+        <div className="mx-auto max-w-[80ch]">
+          <div className="w-full grid grid-rows-1 md:grid-cols-3 gap-8 mt-8">
             {pricing.map((pricing, i) => (
               <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"
+                className="block mx-auto w-64 p-6 overflow-hidden bg-[#2E343C] 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">
@@ -70,19 +70,17 @@ const PricingConf = () => {
                   <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">
+                  <div className="text-[--rhodamine] mt-4 p-4 rounded-full text-center text-4xl font-extrabold">
                     {pricing.price}
                   </div>
                 </div>
               </a>
             ))}
           </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">
@@ -93,10 +91,10 @@ const PricingConf = () => {
                 {includes.map((include, i) => (
                   <div
                     key={i}
-                    className="flex mx-4 my-2 text-white items-center gap-4"
+                    className="flex mx-4 text-white items-center gap-4"
                   >
                     <CheckCircledIcon
-                      className="text-[#B48EF1]"
+                      className="text-[--rhodamine]"
                       height={20}
                       width={20}
                     />
@@ -111,15 +109,15 @@ const PricingConf = () => {
               </h3>
               <p className="text-white">
                 Apply for a{" "}
-                <a className="text-[#B48EF1]" href="/conf/faq/#visas">
+                <a href="/conf/faq/#visas">
                   Visa
                 </a>{" "}
                 or{" "}
-                <a className="text-[#B48EF1]" href="/conf/faq/#scholarships">
+                <a  href="/conf/faq/#scholarships">
                   Scholarship
                 </a>{" "}
                 or find more help in our{" "}
-                <a className="text-[#B48EF1]" href="/conf/faq/">
+                <a  href="/conf/faq/">
                   FAQ
                 </a>
                 .

src/components/Conf/SF/index.tsx

@@ -40,20 +40,14 @@ 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">
+    <div className="pb-10">
+      <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/Schedule/index.tsx

@@ -21,20 +21,20 @@ const Days: Day[] = [
 const ScheduleGlanceConf = () => {
   return (
     <div id="schedule">
-      <div className="bg-[#0E031C] w-full mt-10 mb-6">
+      <div className="bg-[#171E26] w-full mt-10 mb-6">
         <div className="text-center mx-auto text-white">
           <h1 className="text-4xl text-white font-bold mb-8">Schedule</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 gap-8 mb-5">
             {Days.map((day, i) => (
               <div key={i}>
-                <div className="h-full mx-auto w-64 px-4 overflow-hidden bg-[#251C39] shadow-lg rounded-2xl">
+                <div className="h-full mx-auto w-64 px-4 overflow-hidden bg-[#2E343C] 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-0 marker:text-[#B48EF1]">
+                    <ul className="list-disc pl-0 marker:text-[--rhodamine]">
                       {day.list.map((item, i) => (
                         <li key={i} className="text-white mb-2">
                           {item}

src/components/Conf/Seo/index.tsx

@@ -33,7 +33,7 @@ export default function SeoConf(props: {
       <meta name="twitter:title" content={twitterTitle} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={image} />
-      <body className="bg-[#0E031C]" />
+      <body className="bg-[#171E26]" />
     </>
   )
 }

src/components/Conf/Speakers/index.tsx

@@ -48,7 +48,7 @@ const speakers: Speaker[] = [
 const SpeakersConf = () => {
   return (
     <div id="speakers" className="-mt-16 pt-16">
-      <div className="bg-[#0E031C] w-full mt-8">
+      <div className="bg-[#171E26] w-full mt-8">
         <div className="text-center mx-auto text-white">
           <h1 className="text-4xl text-white font-bold my-4">Speakers</h1>
         </div>
@@ -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>