From 2447a18f2aa81a0d3fe9d290cb95df3800e5cdc3 Mon Sep 17 00:00:00 2001
From: Nick Grato <nickgrato@ngrato-27545.local>
Date: Thu, 21 Dec 2023 10:37:19 -0800
Subject: [PATCH 1/4] fixing callouts

---
 .../plans/plan-cards/BasePlanCard.module.scss |  3 ++
 .../modules/plans/plan-cards/BasePlanCard.tsx |  2 +-
 .../plans/plan-cards/BusinessPlanCard.tsx     |  7 +--
 .../plans/plan-cards/PersonalPlanCard.tsx     |  3 +-
 .../plans/plan-cards/ProfessionalPlanCard.tsx |  3 +-
 client/components/modules/plans/plan.const.ts | 50 ++++++++++++++-----
 client/styles/core/variables.scss             |  2 +
 7 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/client/components/modules/plans/plan-cards/BasePlanCard.module.scss b/client/components/modules/plans/plan-cards/BasePlanCard.module.scss
index d3baf897..dfea2d89 100644
--- a/client/components/modules/plans/plan-cards/BasePlanCard.module.scss
+++ b/client/components/modules/plans/plan-cards/BasePlanCard.module.scss
@@ -38,6 +38,9 @@
   &_rainbow {
     background: $gradient-rainbow;
   }
+  &_tree {
+    background: $gradient-tree;
+  }
 }
 
 .title {
diff --git a/client/components/modules/plans/plan-cards/BasePlanCard.tsx b/client/components/modules/plans/plan-cards/BasePlanCard.tsx
index 30add00e..8f1c135c 100644
--- a/client/components/modules/plans/plan-cards/BasePlanCard.tsx
+++ b/client/components/modules/plans/plan-cards/BasePlanCard.tsx
@@ -63,7 +63,7 @@ type BasePlanCardPropsT = {
   showDisclaimer?: boolean;
   confirmButton: ReactNode;
   footerClassProp?: string;
-  color: 'silver' | 'warm' | 'rainbow';
+  color: 'silver' | 'warm' | 'rainbow' | 'tree';
   isSoldOut?: boolean;
 };
 
diff --git a/client/components/modules/plans/plan-cards/BusinessPlanCard.tsx b/client/components/modules/plans/plan-cards/BusinessPlanCard.tsx
index bd355cee..5cf433e8 100644
--- a/client/components/modules/plans/plan-cards/BusinessPlanCard.tsx
+++ b/client/components/modules/plans/plan-cards/BusinessPlanCard.tsx
@@ -14,7 +14,7 @@ type BusinessPlanCardPropsT = {
 
 const BusinessPlanCard = ({ billingPeriod }: BusinessPlanCardPropsT) => {
   const { regionCode } = useSelector(selectRegion);
-  const { planPrice, planUrl, taxDescription, currencySymbol } =
+  const { planPrice, planUrl, taxDescription, currencySymbol, currencyAbbrev } =
     getPricePageData(regionCode, PlansE.BUSINESS, billingPeriod);
 
   /**
@@ -27,11 +27,12 @@ const BusinessPlanCard = ({ billingPeriod }: BusinessPlanCardPropsT) => {
   return (
     <BasePlanCard
       plan={PlansE.BUSINESS}
-      title="Professional"
-      color="rainbow"
+      title="Business"
+      color="tree"
       price={
         <Price
           price={`${currencySymbol}${planPrice}`}
+          currencyAbbrev={currencyAbbrev}
           billingPeriod={`per ${
             billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month'
           }`}
diff --git a/client/components/modules/plans/plan-cards/PersonalPlanCard.tsx b/client/components/modules/plans/plan-cards/PersonalPlanCard.tsx
index 4d229dc0..bd8d8c55 100644
--- a/client/components/modules/plans/plan-cards/PersonalPlanCard.tsx
+++ b/client/components/modules/plans/plan-cards/PersonalPlanCard.tsx
@@ -13,7 +13,7 @@ type PersonalPlanCardPropsT = {
 
 const PersonalPlanCard = ({ billingPeriod }: PersonalPlanCardPropsT) => {
   const { regionCode } = useSelector(selectRegion);
-  const { planPrice, planUrl, taxDescription, currencySymbol } =
+  const { planPrice, planUrl, taxDescription, currencySymbol, currencyAbbrev } =
     getPricePageData(regionCode, PlansE.PERSONAL, billingPeriod);
 
   /**
@@ -34,6 +34,7 @@ const PersonalPlanCard = ({ billingPeriod }: PersonalPlanCardPropsT) => {
           billingPeriod={`per ${
             billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month'
           }`}
+          currencyAbbrev={currencyAbbrev}
         />
       }
       infoCopyList={PERSONAL_COPY}
diff --git a/client/components/modules/plans/plan-cards/ProfessionalPlanCard.tsx b/client/components/modules/plans/plan-cards/ProfessionalPlanCard.tsx
index 47c6dc85..50b27111 100644
--- a/client/components/modules/plans/plan-cards/ProfessionalPlanCard.tsx
+++ b/client/components/modules/plans/plan-cards/ProfessionalPlanCard.tsx
@@ -16,7 +16,7 @@ const ProfessionalPlanCard = ({
   billingPeriod,
 }: ProfessionalPlanCardPropsT) => {
   const { regionCode } = useSelector(selectRegion);
-  const { planPrice, planUrl, taxDescription, currencySymbol } =
+  const { planPrice, planUrl, taxDescription, currencySymbol, currencyAbbrev } =
     getPricePageData(regionCode, PlansE.PROFESSIONAL, billingPeriod);
 
   /**
@@ -34,6 +34,7 @@ const ProfessionalPlanCard = ({
       price={
         <Price
           price={`${currencySymbol}${planPrice}`}
+          currencyAbbrev={currencyAbbrev}
           billingPeriod={`per ${
             billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month'
           }`}
diff --git a/client/components/modules/plans/plan.const.ts b/client/components/modules/plans/plan.const.ts
index ea40fa2c..ff368b22 100644
--- a/client/components/modules/plans/plan.const.ts
+++ b/client/components/modules/plans/plan.const.ts
@@ -13,10 +13,25 @@ export const STARTER_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '500MB Asset storage',
+    label: '500MB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
+  {
+    label: 'Publish scenes',
+    description: '',
+    icon: null,
+  },
+  {
+    label: 'Manage avatars, scenes, and identities',
+    description: '',
+    icon: null,
+  },
+  {
+    label: 'Support emails answered weekly',
+    description: '',
+    icon: null,
+  },
 ];
 
 export const PERSONAL_COPY: PlanInfoCopyT[] = [
@@ -26,12 +41,12 @@ export const PERSONAL_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '2GB Asset storage',
+    label: '2GB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
   {
-    label: 'Customize your Hub’s subdomain',
+    label: 'Everything in Starter, plus',
     description: '',
     icon: null,
   },
@@ -41,7 +56,13 @@ export const PERSONAL_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: 'Customize the color scheme of your tools and loading screens',
+    label: 'Customize your Hub’s color scheme',
+    description: '',
+    icon: null,
+  },
+
+  {
+    label: 'Customize your subdomain',
     description: '',
     icon: null,
   },
@@ -54,27 +75,32 @@ export const PROFESSIONAL_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '25GB Asset storage',
+    label: '25GB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
   {
-    label: 'Connect a custom domain to your Hub',
+    label: 'Everything in Personal, plus',
     description: '',
     icon: null,
   },
   {
-    label: 'Add your own logos',
+    label: 'Connect a fully custom domain',
+    description: '',
+    icon: null,
+  },
+  {
+    label: 'Deploy a custom version of the Hubs code base',
     description: '',
     icon: null,
   },
   {
-    label: 'Customize the color scheme of your tools and loading screens',
+    label: 'Support emails answered within 24 business hours',
     description: '',
     icon: null,
   },
   {
-    label: 'Fully control your Hub with access to Mozilla’s codebase',
+    label: '30 minutes of synchronous support per month',
     description: '',
     icon: null,
   },
@@ -87,12 +113,12 @@ export const BUSINESS_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '200GB Asset storage',
+    label: '200GB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
   {
-    label: 'Everything in Professional',
+    label: 'Everything in Professional, plus',
     description: '',
     icon: null,
   },
@@ -102,7 +128,7 @@ export const BUSINESS_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '90 minutes of synchronous support per month',
+    label: '60 minutes of synchronous support per month',
     description: '',
     icon: null,
   },
diff --git a/client/styles/core/variables.scss b/client/styles/core/variables.scss
index 34f126ac..5f142966 100644
--- a/client/styles/core/variables.scss
+++ b/client/styles/core/variables.scss
@@ -148,6 +148,8 @@ $gradient-rainbow: linear-gradient(
   #a67878 104.75%
 );
 
+$gradient-tree: linear-gradient(107.97deg, #3bb783 36.82%, #72f1bc 100%);
+
 // ---- Utility Colors  ---------------------
 $white: #ffffff;
 $off-white: #ddd;

From 6dcc841391d898122d1384305ae95b60611418c7 Mon Sep 17 00:00:00 2001
From: Nick Grato <nickgrato@ngrato-27545.local>
Date: Fri, 22 Dec 2023 14:29:41 -0800
Subject: [PATCH 2/4] adding callouts

---
 .../BasePlanCard/BasePlanCard.module.scss     |  9 ++++--
 .../Subscribe/BasePlanCard/BasePlanCard.tsx   |  2 +-
 .../components/shared/Subscribe/Subscribe.tsx |  7 +++--
 .../components/shared/Subscribe/plan.const.ts | 29 ++++++++++++-------
 marketing/styles/core/variables.scss          |  1 +
 marketing/util/utilities.ts                   | 10 +++++--
 6 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.module.scss b/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.module.scss
index 2b49ab8b..2eee973e 100644
--- a/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.module.scss
+++ b/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.module.scss
@@ -31,15 +31,18 @@
 }
 
 .highlight {
+  &_silver {
+    background: $color-background-subtle-callout;
+  }
   &_warm {
     background: $gradient-warm;
   }
-  &_cool {
-    background: $gradient-cool;
-  }
   &_rainbow {
     background: $gradient-rainbow;
   }
+  &_tree {
+    background: $gradient-tree;
+  }
 }
 
 .price {
diff --git a/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.tsx b/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.tsx
index 123f12d4..07e5dc3c 100644
--- a/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.tsx
+++ b/marketing/components/shared/Subscribe/BasePlanCard/BasePlanCard.tsx
@@ -58,7 +58,7 @@ type BasePlanCardPropsT = {
   additionalContent?: ReactNode;
   confirmButton: ReactNode;
   footerClassProp?: string;
-  color: 'cool' | 'warm' | 'rainbow';
+  color: 'silver' | 'warm' | 'rainbow' | 'tree';
   features?: FeaturesT | null;
 };
 
diff --git a/marketing/components/shared/Subscribe/Subscribe.tsx b/marketing/components/shared/Subscribe/Subscribe.tsx
index 88b7c4ea..37e9c84f 100644
--- a/marketing/components/shared/Subscribe/Subscribe.tsx
+++ b/marketing/components/shared/Subscribe/Subscribe.tsx
@@ -156,9 +156,10 @@ const Subscribe = ({ classProp = '' }: SubscribePropsT) => {
                   classProp={styles.plan_1}
                   title={STARTER_COPY.title}
                   subtitle={STARTER_COPY.subtitle}
-                  color="warm"
+                  color="silver"
                   price={<Price price="Free" />}
                   valueProps={STARTER_COPY.valueProps}
+                  features={STARTER_COPY.features}
                   additionalContent={
                     <Status icon="warning" message={STARTER_COPY.status} />
                   }
@@ -180,7 +181,7 @@ const Subscribe = ({ classProp = '' }: SubscribePropsT) => {
                   classProp={styles.plan_2}
                   title={PERSONAL_COPY.title}
                   subtitle={PERSONAL_COPY.subtitle}
-                  color="cool"
+                  color="warm"
                   price={
                     <Price
                       price={`${personalPlanData.currencySymbol}${personalPlanData.planPrice}`}
@@ -249,7 +250,7 @@ const Subscribe = ({ classProp = '' }: SubscribePropsT) => {
                   classProp={styles.plan_3}
                   title={BUSINESS_COPY.title}
                   subtitle={BUSINESS_COPY.subtitle}
-                  color="rainbow"
+                  color="tree"
                   price={
                     <Price
                       price={`${businessPlanData.currencySymbol}${businessPlanData.planPrice}`}
diff --git a/marketing/components/shared/Subscribe/plan.const.ts b/marketing/components/shared/Subscribe/plan.const.ts
index fb9f3347..39655a3c 100644
--- a/marketing/components/shared/Subscribe/plan.const.ts
+++ b/marketing/components/shared/Subscribe/plan.const.ts
@@ -22,7 +22,7 @@ export type PlanInfoCopyT = {
 export const STARTER_COPY: PlanInfoCopyT = {
   title: 'Starter',
   subtitle:
-    'Kickstart your XR journey with a personal, private Hub — perfect for newcomers.',
+    'Kickstart your XR journey with a free private Hub — perfect for newcomers.',
   valueProps: [
     {
       label: '10 guest capacity',
@@ -35,14 +35,21 @@ export const STARTER_COPY: PlanInfoCopyT = {
       icon: 'space',
     },
   ],
-  features: null,
+  features: {
+    title: '',
+    values: [
+      'Publish scenes',
+      'Manage avatars, scenes, and identities',
+      'Support emails answered weekly',
+    ],
+  },
   status: 'Sleep after 12 hours of inactivity',
 };
 
 export const PERSONAL_COPY: PlanInfoCopyT = {
   title: 'Personal',
   subtitle:
-    'Design a personal, private Hub — ideal for creatives and tinkering innovators.',
+    'Fill your Hub with engaging content — ideal for creatives and tinkering innovators.',
   valueProps: [
     {
       label: '20 guest capacity',
@@ -56,11 +63,11 @@ export const PERSONAL_COPY: PlanInfoCopyT = {
     },
   ],
   features: {
-    title: '',
+    title: 'Everything in Starter, plus:',
     values: [
       'Add your own logos',
-      'Customize the color scheme of your tools and loading screens',
-      `Customize your Hub's subdomain`,
+      'Customize your Hub’s color scheme',
+      'Customize your subdomain',
     ],
   },
   status: 'Sleep after 72 hours of inactivity',
@@ -69,7 +76,7 @@ export const PERSONAL_COPY: PlanInfoCopyT = {
 export const PROFESSIONAL_COPY: PlanInfoCopyT = {
   title: 'Professional',
   subtitle:
-    'Advanced customization for educators and teams who want increased engagement.',
+    'Craft detailed  experiences that boost engagement with advanced features.',
   valueProps: [
     {
       label: '50 guest capacity',
@@ -85,8 +92,10 @@ export const PROFESSIONAL_COPY: PlanInfoCopyT = {
   features: {
     title: 'Everything in Personal, plus:',
     values: [
-      'Connect a custom domain to your Hub',
-      'Fully control your Hub by adding custom code',
+      'Connect a fully custom domain',
+      'Deploy a custom version of the Hubs code base',
+      'Support emails answered within 24 business hours',
+      '30 minutes of synchronous support per month',
     ],
   },
   status: 'Always on — no sleeping',
@@ -112,7 +121,7 @@ export const BUSINESS_COPY: PlanInfoCopyT = {
     title: 'Everything in Personal, plus:',
     values: [
       'Support emails answered within 12 business hours',
-      '90 minutes of synchronous support per month',
+      '60 minutes of synchronous support per month',
       '60 minutes of assisted Hubs Cloud data migration',
     ],
   },
diff --git a/marketing/styles/core/variables.scss b/marketing/styles/core/variables.scss
index 981c9846..b095f1f5 100644
--- a/marketing/styles/core/variables.scss
+++ b/marketing/styles/core/variables.scss
@@ -141,6 +141,7 @@ $gradient-rainbow: linear-gradient(
   #a67878 104.75%
 );
 $gradient-cool: linear-gradient(90deg, #6ae1d9 0%, #9898ff 100%);
+$gradient-tree: linear-gradient(107.97deg, #3bb783 36.82%, #72f1bc 100%);
 
 // ---- Accent Colors ---------------------
 $teal: #23a2b3;
diff --git a/marketing/util/utilities.ts b/marketing/util/utilities.ts
index 875f552d..e5666892 100644
--- a/marketing/util/utilities.ts
+++ b/marketing/util/utilities.ts
@@ -28,8 +28,14 @@ export const getPricePageData = (
 ): PricePageDataT => {
   const PersonalProdId = 'prod_Mo4tS8uH9y3Mj5';
   const ProfessionalProdId = 'prod_OGWdlewqBfGPy0';
-  const prodID = plan === PlansE.PERSONAL ? PersonalProdId : ProfessionalProdId;
-  const BASE_URL = `https://subscriptions.firefox.com/checkout/${prodID}`;
+  const BusinessProdId = 'prod_Mo4tS8uH9y3Mj5';
+  const ProductIds = {
+    [PlansE.PERSONAL]: PersonalProdId,
+    [PlansE.PROFESSIONAL]: ProfessionalProdId,
+    [PlansE.BUSINESS]: BusinessProdId,
+  };
+
+  const BASE_URL = `https://subscriptions.firefox.com/checkout/${ProductIds[plan]}`;
 
   // If not accepted region or no region default to US plan
   let planUrl = `${BASE_URL}?plan=${PLAN_ID_MAP.US[plan][billingPeriod].planId}`;

From 13acd25e1b6bf057bf895740a9fe1c0afded395d Mon Sep 17 00:00:00 2001
From: Nick Grato <nickgrato@ngrato-27545.local>
Date: Mon, 8 Jan 2024 10:51:01 -0800
Subject: [PATCH 3/4] changing the business monthly plan id's

---
 client/components/modules/plans/plan.const.ts | 130 +++++++++---------
 .../components/shared/Subscribe/plan.const.ts | 128 ++++++++---------
 2 files changed, 129 insertions(+), 129 deletions(-)

diff --git a/client/components/modules/plans/plan.const.ts b/client/components/modules/plans/plan.const.ts
index ff368b22..946c9775 100644
--- a/client/components/modules/plans/plan.const.ts
+++ b/client/components/modules/plans/plan.const.ts
@@ -169,8 +169,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'price_1NMDjKJNcmPzuWtR6fRWNH6A',
-        price: 479.0,
+        planId: 'price_1OPt6YJNcmPzuWtRcrp2Mb9B',
+        price: 499.0,
       },
       yearly: {
         planId: 'price_1NMDjuJNcmPzuWtRkGqRNg0e',
@@ -208,8 +208,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'price_1NME5XJNcmPzuWtRpnVLPt1A',
-        price: 479.0,
+        planId: 'price_1OPt5gJNcmPzuWtRf1Kjf4GB',
+        price: 499.0,
       },
       yearly: {
         planId: 'price_1NME60JNcmPzuWtR2jjTY7pD',
@@ -247,7 +247,7 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
+        planId: 'price_1OQDFlJNcmPzuWtRlmsBACh1',
         price: 499.0,
       },
       yearly: {
@@ -286,8 +286,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OQDFlJNcmPzuWtRlmsBACh1',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -325,8 +325,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt7oJNcmPzuWtRXZdMSTPs',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -364,8 +364,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt81JNcmPzuWtRFfsYpiVb',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -403,8 +403,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt8TJNcmPzuWtRkXcNnBGD',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -442,8 +442,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt8eJNcmPzuWtRnXBwLKx2',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -481,8 +481,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt8rJNcmPzuWtRdri04UM7',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -520,8 +520,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt91JNcmPzuWtRsGuIDfMg',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -559,8 +559,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt9EJNcmPzuWtR7gAFZY6Y',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -598,8 +598,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt9TJNcmPzuWtRbFP6bOSm',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -637,8 +637,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt9mJNcmPzuWtR46DRFKxv',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -677,8 +677,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtA8JNcmPzuWtRHR9MyMJW',
+        price: 792.37,
       },
       yearly: {
         planId: 'TODO',
@@ -716,8 +716,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtASJNcmPzuWtRIiYb4aw0',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -755,8 +755,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtAnJNcmPzuWtRqY7iJ9f5',
+        price: 4997.03,
       },
       yearly: {
         planId: 'TODO',
@@ -794,8 +794,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBCJNcmPzuWtR0TgZ8k42',
+        price: 2323.09,
       },
       yearly: {
         planId: 'TODO',
@@ -833,8 +833,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBRJNcmPzuWtRnmZi4znV',
+        price: 660.7,
       },
       yearly: {
         planId: 'TODO',
@@ -872,8 +872,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBfJNcmPzuWtRru5onIy4',
+        price: 1964.76,
       },
       yearly: {
         planId: 'TODO',
@@ -911,8 +911,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBsJNcmPzuWtRlDJ1QhSU',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -950,8 +950,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCAJNcmPzuWtRlfD9wLST',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -989,8 +989,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCQJNcmPzuWtRgLzRGbbI',
+        price: 3377.77,
       },
       yearly: {
         planId: 'TODO',
@@ -1028,8 +1028,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCjJNcmPzuWtRb1o28lVb',
+        price: 11136.46,
       },
       yearly: {
         planId: 'TODO',
@@ -1067,8 +1067,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCyJNcmPzuWtRzuFuTH79',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1106,8 +1106,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtDDJNcmPzuWtRnom1cmfz',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1145,8 +1145,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtDPJNcmPzuWtRENG5wfAm',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1184,8 +1184,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtDvJNcmPzuWtRI3ZuXzZV',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1223,8 +1223,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtE8JNcmPzuWtRVZjGmkpG',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1262,8 +1262,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtEUJNcmPzuWtRGvwz5oOa',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1301,8 +1301,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtEdJNcmPzuWtREGeSeGji',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1340,8 +1340,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtEnJNcmPzuWtRUbfdgTtK',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1379,8 +1379,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtF1JNcmPzuWtR70Z7aCVX',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
@@ -1418,8 +1418,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtFDJNcmPzuWtRfkRlHx1G',
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',
diff --git a/marketing/components/shared/Subscribe/plan.const.ts b/marketing/components/shared/Subscribe/plan.const.ts
index 39655a3c..febdf217 100644
--- a/marketing/components/shared/Subscribe/plan.const.ts
+++ b/marketing/components/shared/Subscribe/plan.const.ts
@@ -158,8 +158,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 479.0,
+        planId: 'price_1OPt6YJNcmPzuWtRcrp2Mb9B',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -197,7 +197,7 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
+        planId: 'price_1OPt5gJNcmPzuWtRf1Kjf4GB',
         price: 479.0,
       },
       annual: {
@@ -236,7 +236,7 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
+        planId: 'price_1OQDFlJNcmPzuWtRlmsBACh1',
         price: 499.0,
       },
       annual: {
@@ -275,8 +275,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OQDFlJNcmPzuWtRlmsBACh1',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -314,8 +314,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt7oJNcmPzuWtRXZdMSTPs',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -353,8 +353,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt81JNcmPzuWtRFfsYpiVb',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -392,8 +392,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt8TJNcmPzuWtRkXcNnBGD',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -431,8 +431,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt8eJNcmPzuWtRnXBwLKx2',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -470,8 +470,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt8rJNcmPzuWtRdri04UM7',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -509,8 +509,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt91JNcmPzuWtRsGuIDfMg',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -548,8 +548,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt9EJNcmPzuWtR7gAFZY6Y',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -587,8 +587,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt9TJNcmPzuWtRbFP6bOSm',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -626,8 +626,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPt9mJNcmPzuWtR46DRFKxv',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -666,8 +666,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtA8JNcmPzuWtRHR9MyMJW',
+        price: 792.37,
       },
       annual: {
         planId: 'TODO',
@@ -705,8 +705,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtASJNcmPzuWtRIiYb4aw0',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -744,8 +744,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtAnJNcmPzuWtRqY7iJ9f5',
+        price: 4997.03,
       },
       annual: {
         planId: 'TODO',
@@ -783,8 +783,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBCJNcmPzuWtR0TgZ8k42',
+        price: 2323.09,
       },
       annual: {
         planId: 'TODO',
@@ -822,8 +822,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBRJNcmPzuWtRnmZi4znV',
+        price: 660.7,
       },
       annual: {
         planId: 'TODO',
@@ -861,8 +861,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBfJNcmPzuWtRru5onIy4',
+        price: 1964.76,
       },
       annual: {
         planId: 'TODO',
@@ -900,8 +900,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtBsJNcmPzuWtRlDJ1QhSU',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -939,8 +939,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCAJNcmPzuWtRlfD9wLST',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -978,8 +978,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCQJNcmPzuWtRgLzRGbbI',
+        price: 3377.77,
       },
       annual: {
         planId: 'TODO',
@@ -1017,8 +1017,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCjJNcmPzuWtRb1o28lVb',
+        price: 11136.46,
       },
       annual: {
         planId: 'TODO',
@@ -1056,8 +1056,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtCyJNcmPzuWtRzuFuTH79',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1095,8 +1095,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtDDJNcmPzuWtRnom1cmfz',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1134,8 +1134,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtDPJNcmPzuWtRENG5wfAm',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1173,8 +1173,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtDvJNcmPzuWtRI3ZuXzZV',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1212,8 +1212,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtE8JNcmPzuWtRVZjGmkpG',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1251,8 +1251,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtEUJNcmPzuWtRGvwz5oOa',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1290,8 +1290,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtEdJNcmPzuWtREGeSeGji',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1329,8 +1329,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtEnJNcmPzuWtRUbfdgTtK',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1368,8 +1368,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtF1JNcmPzuWtR70Z7aCVX',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',
@@ -1407,8 +1407,8 @@ export const PLAN_ID_MAP = {
     },
     business: {
       monthly: {
-        planId: 'TODO',
-        price: 400.22,
+        planId: 'price_1OPtFDJNcmPzuWtRfkRlHx1G',
+        price: 499.0,
       },
       annual: {
         planId: 'TODO',

From 0b21611e04ac8bba2212827cf8833ab847930488 Mon Sep 17 00:00:00 2001
From: Nick Grato <nickgrato@ngrato-27545.local>
Date: Wed, 28 Feb 2024 15:12:17 -0800
Subject: [PATCH 4/4] adding banner

---
 .../navigation/MainNav/MainNav.module.scss    | 36 +++++++++++++++++++
 .../components/navigation/MainNav/MainNav.tsx | 27 +++++++++++++-
 client/styles/ui/page.scss                    |  2 +-
 .../navigation/MainNav/MainNav.module.scss    |  2 ++
 .../components/navigation/MainNav/MainNav.tsx | 36 +++++++++++--------
 marketing/styles/globals.scss                 |  2 +-
 6 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/client/components/navigation/MainNav/MainNav.module.scss b/client/components/navigation/MainNav/MainNav.module.scss
index 3fdb5236..9f19915b 100644
--- a/client/components/navigation/MainNav/MainNav.module.scss
+++ b/client/components/navigation/MainNav/MainNav.module.scss
@@ -98,3 +98,39 @@ button.exit_button {
     line-height: 20px;
   }
 }
+
+.marquee {
+  &_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 15px;
+    @include mobile-down {
+      padding: 20px;
+    }
+  }
+
+  & section {
+    @include mobile-down {
+      display: inline-block;
+      padding-left: 100%;
+      animation: marquee 20s linear infinite;
+    }
+  }
+
+  @include mobile-down {
+    white-space: nowrap;
+    overflow: hidden;
+    position: absolute;
+    width: 100vw;
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
diff --git a/client/components/navigation/MainNav/MainNav.tsx b/client/components/navigation/MainNav/MainNav.tsx
index 4787408b..cdf48e2c 100644
--- a/client/components/navigation/MainNav/MainNav.tsx
+++ b/client/components/navigation/MainNav/MainNav.tsx
@@ -104,7 +104,32 @@ const MainNav = ({
    */
   return (
     <nav className={`${styles.main_nav} ${classProp}`}>
-      <div className={styles.banner_gradient} />
+      <div className={styles.banner_gradient}>
+        <div className={styles.marquee_container}>
+          <div className={styles.marquee}>
+            <section className={styles.banner_text}>
+              <div className="flex-align-center">
+                <div>
+                  <Icon name="info" classProp="mr-10 mt-3" />
+                </div>
+                <p className="body-sm-bold ">
+                  Important Notice: Mozilla Hubs will shut down on May 31, 2024.
+                  For more information about the shutdown and how you can
+                  support Hubs' life beyond Mozilla, please read{' '}
+                  <a
+                    target="_blank"
+                    href="https://hubs.mozilla.com/labs/sunset/"
+                    className="primary-link"
+                  >
+                    this article
+                  </a>
+                  .
+                </p>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
 
       <div className={styles.main_nav_wrapper}>
         <div className={styles.main_nav_container}>
diff --git a/client/styles/ui/page.scss b/client/styles/ui/page.scss
index a82c20af..942af10a 100644
--- a/client/styles/ui/page.scss
+++ b/client/styles/ui/page.scss
@@ -6,6 +6,6 @@
   flex-direction: column;
   min-height: 100vh;
   background: $gradient-rainbow;
-  padding-top: 88px;
+  padding-top: 160px;
   margin: 0;
 }
diff --git a/marketing/components/navigation/MainNav/MainNav.module.scss b/marketing/components/navigation/MainNav/MainNav.module.scss
index 929bc267..a7b7e325 100644
--- a/marketing/components/navigation/MainNav/MainNav.module.scss
+++ b/marketing/components/navigation/MainNav/MainNav.module.scss
@@ -103,6 +103,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 15px;
+
     @include mobile-down {
       padding: 20px;
     }
diff --git a/marketing/components/navigation/MainNav/MainNav.tsx b/marketing/components/navigation/MainNav/MainNav.tsx
index f6365862..fa59ce8d 100644
--- a/marketing/components/navigation/MainNav/MainNav.tsx
+++ b/marketing/components/navigation/MainNav/MainNav.tsx
@@ -32,22 +32,30 @@ const MainNav = ({
   return (
     <nav className={`${styles.main_nav} ${classProp}`}>
       <div className={styles.banner_gradient}>
-        {navData?.bannerText && (
-          <div className={styles.marquee_container}>
-            <div className={styles.marquee}>
-              <section className={styles.banner_text}>
-                <div className="flex-align-center">
-                  <div>
-                    <Icon name={navData.bannerIcon} classProp="mr-10 mt-3" />
-                  </div>
-                  <p className="body-sm-bold flex-align-center">
-                    {navData?.bannerText}
-                  </p>
+        <div className={styles.marquee_container}>
+          <div className={styles.marquee}>
+            <section className={styles.banner_text}>
+              <div className="flex-align-center">
+                <div>
+                  <Icon name="info" classProp="mr-10 mt-3" />
                 </div>
-              </section>
-            </div>
+                <p className="body-sm-bold ">
+                  Important Notice: Mozilla Hubs will shut down on May 31, 2024.
+                  For more information about the shutdown and how you can
+                  support Hubs' life beyond Mozilla, please read{' '}
+                  <a
+                    target="_blank"
+                    href="https://hubs.mozilla.com/labs/sunset/"
+                    className="primary-link"
+                  >
+                    this article
+                  </a>
+                  .
+                </p>
+              </div>
+            </section>
           </div>
-        )}
+        </div>
       </div>
 
       <div className={styles.main_nav_wrapper}>
diff --git a/marketing/styles/globals.scss b/marketing/styles/globals.scss
index 1479d00c..2e4c3875 100644
--- a/marketing/styles/globals.scss
+++ b/marketing/styles/globals.scss
@@ -40,5 +40,5 @@ p {
   flex: 1;
   flex-direction: column;
   min-height: 100vh;
-  margin: 90px 0 0 0;
+  margin: 180px 0 0 0;
 }