Disable CFP CTA, add DevSprints CTA, fix tickets sold out issue (#154)

Co-authored-by: Rajat.Rajdeep <[email protected]>

Author: RajatRajdeep

components/HeroBanner.js

@@ -5,6 +5,7 @@ import calendar from "../public/images/icons/calendar.png";
 import logo from "../public/images/logos/logo.png";
 import calendarData from "../data/calendar.yml";
 import Button from "./button";
+import Tooltip from "./tooltip";
 
 const HeroBanner = () => {
   return (
@@ -35,20 +36,31 @@ const HeroBanner = () => {
                   <Button
                     buttonClassName="custom-button submit-btn register-btn-extra-padding"
                     anchorClassName="text-decoration-none"
-                    buttonLabel="Call For Proposal"
-                    buttonHyperLink="https://in.pycon.org/cfp/pycon-india-2023/proposals/"
+                    buttonLabel="BoFs and Posters"
+                    buttonHyperLink="https://in.pycon.org/cfp/bofs-and-posters-2023/proposals/"
                   />
                 </div>
               </div>
               <div className="row register-btn justify-content-center">
                 <div className="col-md-6 col-8 pt-3">
                   <Button
-                    buttonClassName="custom-button light-yellow-btn register-btn-extra-padding"
-                    anchorClassName="text-decoration-none"
-                    buttonLabel="BoFs and Posters"
-                    buttonHyperLink="https://in.pycon.org/cfp/bofs-and-posters-2023/proposals/"
+                    buttonClassName="custom-button submit-btn register-btn-extra-padding"
+                    anchorClassName="text-decoration-none text-light"
+                    buttonLabel="Call For DevSprints"
+                    buttonHyperLink="https://in.pycon.org/cfp/devsprint-2023/proposals/"
                   />
                 </div>
+                <div className="col-md-6 col-8 pt-3">
+                  <Tooltip text="CFP closed for Talks and Workshops">
+                    <Button
+                      buttonClassName="custom-button grey-btn register-btn-extra-padding"
+                      anchorClassName="text-decoration-none"
+                      buttonLabel="Call For Proposal"
+                      buttonHyperLink="https://in.pycon.org/cfp/pycon-india-2023/proposals/"
+                      disabled={true}
+                    />
+                  </Tooltip>
+                </div>
               </div>
               <h2 className="pt-5 mb-4 date-text text-center">
                 29 Sept - 02 Oct
@@ -84,7 +96,7 @@ const HeroBanner = () => {
           </div>
         </div>
       </div>
-    </section>
+    </section >
   );
 };
 

components/pricetable.js

@@ -18,7 +18,7 @@ const TicketsPriceTable = () => {
           id: ticket.ticket_id,
           name: ticket.ticket_name,
           price: ticket.minimum_price || ticket.ticket_price,
-          soldOut: ticket.sold_out,
+          soldOut: !(ticket.remaining_count > 0),
           description: ticket.description,
         }));
         setTickets(extractedTickets);

components/tooltip.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+
+const Tooltip = ({ text, children }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+
+    const handleMouseEnter = () => {
+        setShowTooltip(true);
+    };
+
+    const handleMouseLeave = () => {
+        setShowTooltip(false);
+    };
+
+    return (
+        <div className="custom-tooltip-container" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+            {children}
+            {showTooltip && <div className="custom-tooltip">{text}</div>}
+        </div>
+    );
+};
+
+export default Tooltip;

styles/css/style.css

@@ -248,6 +248,7 @@ button a {
 .grey-btn {
   color: white;
   background-color: grey;
+  width: 100%;
 }
 
 .green-btn:hover {
@@ -269,6 +270,25 @@ button a {
   opacity: 0.8;
 }
 
+.custom-tooltip-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.custom-tooltip {
+  position: absolute;
+  top: 101%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  z-index: 1;
+}
+
 .date-text {
   text-shadow: 2px 2px #eac141 !important;
 }