diff --git a/src/assets/css/style.less b/src/assets/css/style.less index 9077762b6b..be1162c85a 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -9,3 +9,4 @@ @import "_css/faq.less"; @import "_css/foundation.less"; @import "_css/brand.less"; + diff --git a/src/components/Conf/Pricing/index.tsx b/src/components/Conf/Pricing/index.tsx index 413d4a75e3..130da086ef 100644 --- a/src/components/Conf/Pricing/index.tsx +++ b/src/components/Conf/Pricing/index.tsx @@ -6,6 +6,7 @@ interface Pricing { title: string date: string price: string + dateIsExpired: Date } const pricing: Pricing[] = [ @@ -13,20 +14,23 @@ const pricing: Pricing[] = [ title: "Early Bird", date: "Through May 31, 2023", price: "$599", + dateIsExpired: new Date("2023-06-01"), }, { title: "Standard", date: "Jun 1 - Sep 4, 2023", price: "$799", + dateIsExpired: new Date("2023-09-05"), }, { title: "Late/Onsite", date: "Sep 5 Through Event", price: "$899", + dateIsExpired: new Date("2023-10-01"), }, ] -const includes = [ +const includes: { title: string }[] = [ { title: "All conference content", }, @@ -47,9 +51,55 @@ const includes = [ }, ] -const PricingConf = () => { +const PricingConf: React.FC = () => { + const today = new Date() + + const isExpired = (expiredDate: Date): boolean => expiredDate < today + + const renderPriceCard = (pricing: Pricing, index: number) => { + const expired = isExpired(pricing.dateIsExpired) + + const cardStyles = `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` + const expiredCardStyles = `block mx-auto w-64 p-6 overflow-hidden bg-[#474c52] shadow-xl rounded-2xl focus:outline-none hover:drop-shadow-lg hover:scale-[102%] hover:no-underline focus:no-underline transition ease-in-out cursor-not-allowed` + + return ( + + {expired && ( +
+
+ Expired +
+
+ )} +
+ {pricing.title} +
+
{pricing.date}
+
+ {pricing.price} +
+
+ ) + } + return ( - // Invisible padding so anchor links align to the header menu
@@ -57,26 +107,7 @@ const PricingConf = () => {
- {pricing.map((pricing, i) => ( - -
-
- {pricing.title} -
-
- {pricing.date} -
-
- {pricing.price} -
-
-
- ))} + {pricing.map(renderPriceCard)}
diff --git a/src/pages/conf/faq.tsx b/src/pages/conf/faq.tsx index be2c06f572..12c187bb48 100644 --- a/src/pages/conf/faq.tsx +++ b/src/pages/conf/faq.tsx @@ -657,6 +657,16 @@ const faq: Array<{ id: string; title: string; contents: ReactNode }> = [ {" "} and a member of our PR team will be in touch.

+ +

Group Discounts

+

+ If you have a group of 5 or more people, you can receive a 10% + discount on all passes. All pass types must be the same, and all + registrations must be processed under one group registration and must + be paid with the same credit card. To create a group, select “Add + Another Person” to your registration. When 5 or more people are added + the 10% discount will be automatically applied. +

), },