chore: show subscription benefits clearly

Author: mu29

packages/docs/src/PlanGroup/PlanGroup.tsx

@@ -11,8 +11,8 @@ export const PlanGroup: FC = () => (
         price="$0"
         interval=" / mo"
         features={[
-          { label: '1 Live Page' },
-          { label: '1 Editor Seat' },
+          { label: '1 Page' },
+          { label: '1 Member' },
           { label: 'Unlimited Bandwidth' },
           { label: 'Unlimited Page Views' },
         ]}
@@ -23,8 +23,8 @@ export const PlanGroup: FC = () => (
         price="$29"
         interval=" / mo + usage"
         features={[
-          { label: '30 Live Pages', caption: '+ then $1 per page' },
-          { label: '3 Editor Seats', caption: '+ then $5 per seat' },
+          { label: '30 Pages', caption: '+ then $1 per page' },
+          { label: '3 Members', caption: '+ then $5 per member' },
           { label: 'Unlimited Bandwidth' },
           { label: 'Unlimited Page Views' },
           { label: 'Real-time Collaboration', planned: true },
@@ -38,8 +38,8 @@ export const PlanGroup: FC = () => (
         price="$99"
         interval=" / mo + usage"
         features={[
-          { label: '100 Live Pages', caption: '+ then $1 per page' },
-          { label: 'Unlimited Editor Seats' },
+          { label: '100 Pages', caption: '+ then $1 per page' },
+          { label: 'Unlimited Members' },
           { label: 'Unlimited Bandwidth' },
           { label: 'Unlimited Page Views' },
           { label: 'Real-time Collaboration', planned: true },

packages/docs/src/PriceCalculator/PriceCalculator.tsx

@@ -23,23 +23,23 @@ const PAGES = [
   '750',
   '1,000+',
 ];
-const SEATS = ['1', '2', '3', '4', '5', '10', '15', '20', '25', '30', '40', '50', '75', '100+'];
+const MEMBERS = ['1', '2', '3', '4', '5', '10', '15', '20', '25', '30', '40', '50', '75', '100+'];
 
 const PAGES_PRICE = 1;
-const SEATS_PRICE = 5;
+const MEMBERS_PRICE = 5;
 
 export const PriceCalculator: FC = () => {
   const [pages, setPages] = useState(0);
-  const [seats, setSeats] = useState(0);
+  const [members, setMembers] = useState(0);
 
   const pagesProgress = (pages / (PAGES.length - 1)) * 100;
-  const seatsProgress = (seats / (SEATS.length - 1)) * 100;
+  const membersProgress = (members / (MEMBERS.length - 1)) * 100;
 
   const effectivePages = parseInt(PAGES[pages].replace(/\D/g, ''), 10);
-  const effectiveSeats = parseInt(SEATS[seats].replace(/\D/g, ''), 10);
+  const effectiveSeats = parseInt(MEMBERS[members].replace(/\D/g, ''), 10);
 
   const proPrice =
-    29 + Math.max((effectivePages - 30) * PAGES_PRICE, 0) + Math.max((effectiveSeats - 3) * SEATS_PRICE, 0);
+    29 + Math.max((effectivePages - 30) * PAGES_PRICE, 0) + Math.max((effectiveSeats - 3) * MEMBERS_PRICE, 0);
   const businessPrice = 99 + Math.max((effectivePages - 100) * PAGES_PRICE, 0);
 
   const price = effectivePages <= 1 && effectiveSeats <= 1 ? 0 : Math.min(proPrice, businessPrice);
@@ -50,7 +50,7 @@ export const PriceCalculator: FC = () => {
       <div className={styles.calculators}>
         <div className={styles.calculator}>
           <div className={styles.header}>
-            <p className={styles.title}>Live Pages</p>
+            <p className={styles.title}>Pages</p>
             <p className={styles.usage}>
               {PAGES[pages]} page{pages > 0 ? 's' : ''}
             </p>
@@ -73,24 +73,24 @@ export const PriceCalculator: FC = () => {
         <div className={styles.divider} />
         <div className={styles.calculator}>
           <div className={styles.header}>
-            <p className={styles.title}>Editor seats</p>
+            <p className={styles.title}>Members</p>
             <p className={styles.usage}>
-              {SEATS[seats]} seat{seats > 0 ? 's' : ''}
+              {MEMBERS[members]} member{members > 0 ? 's' : ''}
             </p>
           </div>
           <input
             type="range"
             step={1}
             min={0}
-            max={SEATS.length - 1}
-            value={seats}
+            max={MEMBERS.length - 1}
+            value={members}
             className={styles.rangeInput}
-            onChange={e => setSeats(Number(e.target.value))}
-            style={{ '--progress': `${seatsProgress}%` } as React.CSSProperties}
+            onChange={e => setMembers(Number(e.target.value))}
+            style={{ '--progress': `${membersProgress}%` } as React.CSSProperties}
           />
           <div className={styles.indicatorGroup}>
-            <p className={styles.indicator}>{SEATS[0]} seats</p>
-            <p className={styles.indicator}>{SEATS[SEATS.length - 1]} seats</p>
+            <p className={styles.indicator}>{MEMBERS[0]} members</p>
+            <p className={styles.indicator}>{MEMBERS[MEMBERS.length - 1]} members</p>
           </div>
         </div>
       </div>