adding callouts

Hubs-Foundation · Dec 22, 2023 · 6dcc841 · 6dcc841
1 parent 2447a18
commit 6dcc841
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}`;