From 6bcdd7b210db199311fe211140009fa30905ef77 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 2 Nov 2022 15:09:52 +0700
Subject: [PATCH] pricing update

---
 packages/fakeyou/src/data/PriceTiers.js       | 221 ++++--
 .../src/v2/view/pricing/PricingPage.tsx       | 697 ++++++++----------
 2 files changed, 490 insertions(+), 428 deletions(-)

diff --git a/packages/fakeyou/src/data/PriceTiers.js b/packages/fakeyou/src/data/PriceTiers.js
index 6ec704ada7..2dfbf74017 100644
--- a/packages/fakeyou/src/data/PriceTiers.js
+++ b/packages/fakeyou/src/data/PriceTiers.js
@@ -1,71 +1,176 @@
 const FAKEYOU_PRICES = {
-  free: {
-    tier: "free",
+  //Starter Tier
+  starter: {
+    tier: "Starter",
     price: 0,
-    features: {
-      "Extended Audio": false,
-      mp3: false,
-      "Priority Processing": false,
-      "Commercial Voices": false,
+    tts: {
+      title: "TTS",
+      features: ["Unlimited generation", "Up to 12 seconds audio"],
+    },
+    vcweb: {
+      title: "VC Web",
+      features: ["Up to 12 seconds audio"],
+    },
+    vcapp: {
+      title: "VC App",
+      features: [
+        "5 model downloads",
+        "Up to 12 secs prerecorded",
+        "Up to 2 mins realtime",
+      ],
+    },
+    w2l: {
+      title: "Wav2Lip",
+      features: ["Up to 12 seconds video"],
+    },
+    priority: {
+      title: "Processing Priority",
+      features: ["Level 1"],
     },
   },
-  plus: {
-    tier: "plus",
-    price: 7,
-    features: {
-      "Extended Audio": true,
-      mp3: false,
-      "Priority Processing": false,
-      "Commercial Voices": false,
-    },
-  },
-  pro: {
-    tier: "pro",
-    price: 15,
-    features: {
-      "Extended Audio": true,
-      mp3: true,
-      "Priority Processing": true,
-      "Commercial Voices": true,
-    },
-  },
-  elite: {
-    tier: "elite",
-    price: 25,
-    features: {
-      "Extended Audio": true,
-      mp3: true,
-      "Priority Processing": true,
-      "Commercial Voices": true,
-    },
-  },
-};
 
-const STORYTELLER_PRICES = {
-  free: {
-    tier: "free",
-    price: 0,
-    features: {
-      "Priority Processing": false,
-      "Stream Labs": false,
-    },
-  },
+  //Basic Tier
   basic: {
-    tier: "basic",
-    price: 5,
-    features: {
-      "Priority Processing": false,
-      "Stream Labs": false,
+    tier: "Basic",
+    price: 3,
+    tts: {
+      title: "TTS",
+      features: ["Unlimited generation", "Up to 20 seconds audio"],
+    },
+    vcweb: {
+      title: "VC Web",
+      features: ["Up to 20 seconds audio", "Push to play"],
+    },
+    vcapp: {
+      title: "VC App",
+      features: [
+        "7 model downloads",
+        "Up to 20 secs prerecorded",
+        "Up to 5 mins realtime",
+      ],
+    },
+    w2l: {
+      title: "Wav2Lip",
+      features: ["Up to 30 seconds video"],
+    },
+    priority: {
+      title: "Processing Priority",
+      features: ["Level 10"],
     },
   },
+
+  //Plus Tier
+  plus: {
+    tier: "Plus",
+    price: 7,
+    tts: {
+      title: "TTS",
+      features: ["Unlimited generation", "Up to 30 seconds audio"],
+    },
+    vcweb: {
+      title: "VC Web",
+      features: ["Up to 30 seconds audio", "Push to play"],
+    },
+    vcapp: {
+      title: "VC App",
+      features: [
+        "10 model downloads",
+        "Up to 30 secs prerecorded",
+        "Up to 7 mins realtime",
+      ],
+    },
+    w2l: {
+      title: "Wav2Lip",
+      features: ["Up to 1 minute video"],
+    },
+    priority: {
+      title: "Processing Priority",
+      features: ["Level 20"],
+    },
+  },
+
+  //Pro Tier
   pro: {
-    tier: "premium",
-    price: 50,
-    features: {
-      "Priority Processing": true,
-      "Stream Labs": true,
+    tier: "Pro",
+    price: 15,
+    tts: {
+      title: "TTS",
+      features: [
+        "Unlimited generation",
+        "Up to 1 minute audio",
+        "Generate MP3 file",
+        "Upload private models",
+      ],
+    },
+    vcweb: {
+      title: "VC Web",
+      features: ["Up to 30 seconds audio", "Push to play", "Generate MP3 file"],
+    },
+    vcapp: {
+      title: "VC App",
+      features: [
+        "20 model downloads",
+        "Up to 5 mins prerecorded",
+        "Up to 15 mins realtime",
+      ],
+    },
+    w2l: {
+      title: "Wav2Lip",
+      features: ["Up to 2 minutes video"],
+    },
+    priority: {
+      title: "Processing Priority",
+      features: ["Level 30"],
+    },
+    api: {
+      title: "API Access",
+      features: ["Full API access"],
+    },
+  },
+
+  //Elite Tier
+  elite: {
+    tier: "Elite",
+    price: 25,
+    tts: {
+      title: "TTS",
+      features: [
+        "Unlimited generation",
+        "Up to 5 minutes audio",
+        "Generate MP3 file",
+        "Upload private models",
+        "Share private models",
+      ],
+    },
+    vcweb: {
+      title: "VC Web",
+      features: ["Up to 7 minutes audio", "Push to play", "Generate MP3 file"],
+    },
+    vcapp: {
+      title: "VC App",
+      features: [
+        "Unlimited models",
+        "Unlimited prerecorded",
+        "Unlimited realtime",
+      ],
+    },
+    w2l: {
+      title: "Wav2Lip",
+      features: ["Up to 2 minutes video"],
+    },
+    priority: {
+      title: "Processing Priority",
+      features: ["Level 40"],
+    },
+    api: {
+      title: "API Access",
+      features: ["Full API access"],
+    },
+    commercial: {
+      title: "Commercial Voices",
+      features: ["FakeYou commercial voices"],
     },
   },
 };
 
-export { FAKEYOU_PRICES, STORYTELLER_PRICES };
+export { FAKEYOU_PRICES };
diff --git a/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx b/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx
index 61a9a8f4c1..72afba2032 100644
--- a/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx
+++ b/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx
@@ -1,16 +1,9 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "react-router-dom";
-import {
-  faCheckCircle as TRUE,
-  faTimesCircle as FALSE,
-  faCheck,
-} from "@fortawesome/free-solid-svg-icons";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import {
-  FAKEYOU_PRICES as FYP,
-  STORYTELLER_PRICES as STP,
-} from "@storyteller/fakeyou/src/data/PriceTiers";
+import { FAKEYOU_PRICES as FYP } from "@storyteller/fakeyou/src/data/PriceTiers";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -18,45 +11,6 @@ interface Props {
 }
 
 function PricingPage(props: Props) {
-  function capitalize(word: string) {
-    return word.charAt(0).toUpperCase() + word.slice(1);
-  }
-
-  const [FY_TIERS, ST_TIERS] = [Object.keys(FYP), Object.keys(STP)];
-
-  const [FY_FEATURES, ST_FEATURES] = [
-    Object.keys(FYP.free.features),
-    Object.keys(STP.free.features),
-  ];
-
-  let current_tiers: string[], current_features: string[], current_list: any;
-
-  const site = window.location.hostname;
-
-  switch (site) {
-    case "fakeyou":
-      [current_tiers, current_features, current_list] = [
-        FY_TIERS,
-        FY_FEATURES,
-        FYP,
-      ];
-      break;
-    case "storyteller":
-      [current_tiers, current_features, current_list] = [
-        ST_TIERS,
-        ST_FEATURES,
-        STP,
-      ];
-      break;
-    default:
-      [current_tiers, current_features, current_list] = [
-        FY_TIERS,
-        FY_FEATURES,
-        FYP,
-      ];
-      break;
-  }
-
   return (
     <div>
       <div className="container py-5 text-center">
@@ -65,347 +19,350 @@ function PricingPage(props: Props) {
           Some kind of description here, idk haven't thought of it.
         </p>
       </div>
-      <div className="container mt-3">
+      <div className="container mt-3 mb-5">
         <div className="row gx-3 gy-4">
           <div className="col-12 col-sm-6 col-lg-3">
             <div className="rounded panel p-4 h-100">
-              <h2 className="text-center my-2 fw-bold mb-4">Starter</h2>
+              <h2 className="text-center my-2 fw-bold mb-4">
+                {FYP.starter.tier}
+              </h2>
               <Link to="/" className="btn btn-secondary w-100 fs-6">
                 Use for free
               </Link>
               <h2 className="display-5 fw-bold text-center my-5">
-                ${current_list.free.price}
+                ${FYP.starter.price}
                 <span className="fs-5 opacity-75 fw-normal"> /month</span>
               </h2>
               <ul className="pricing-list d-flex flex-column gap-2">
-                <li className="fw-semibold">TTS</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Unlimited generation
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 12 seconds audio
-                </li>
-                <li className="fw-semibold">VC Web</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 12 seconds audio
-                </li>
-                <li className="fw-semibold">
-                  VC App <span className="small-text">(registered users)</span>
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />5
-                  model downloads
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 12 secs prerecorded
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 2 mins realtime
-                </li>
-                <li className="fw-semibold">Wav2Lip</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 12 seconds video
-                </li>
-                <li className="fw-semibold">Processing Priority</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="me-3" />
-                  Level 0
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Level 1 <span className="small-text">(registered users)</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="col-12 col-sm-6 col-lg-3">
-            <div className="rounded panel p-4 panel-border h-100">
-              <h2 className="text-center my-2 fw-bold mb-4">Plus</h2>
-              <Link to="/" className="btn btn-primary w-100 fs-6">
-                Buy Plus
-              </Link>
-              <h2 className="display-5 fw-bold text-center my-5">
-                ${current_list.plus.price}
-                <span className="fs-5 opacity-75 fw-normal"> /month</span>
-              </h2>
-              <ul className="pricing-list d-flex flex-column gap-2">
-                <li className="fw-semibold">TTS</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Unlimited generation
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 30 seconds audio
-                </li>
-                <li className="fw-semibold">VC Web</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 30 seconds audio
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Push to play
-                </li>
-                <li className="fw-semibold">VC App</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  10 model downloads
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 30 secs prerecorded
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 7 mins realtime
-                </li>
-                <li className="fw-semibold">Wav2Lip</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 1 minute video
-                </li>
-                <li className="fw-semibold">Processing Priority</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Level 20
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="col-12 col-sm-6 col-lg-3">
-            <div className="rounded panel p-4 h-100">
-              <h2 className="text-center my-2 fw-bold mb-4">Pro</h2>
-              <Link to="/" className="btn btn-primary w-100 fs-6">
-                Buy Pro
-              </Link>
-              <h2 className="display-5 fw-bold text-center my-5">
-                ${current_list.pro.price}
-                <span className="fs-5 opacity-75 fw-normal"> /month</span>
-              </h2>
-              <ul className="pricing-list d-flex flex-column gap-2">
-                <li className="fw-semibold">TTS</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Unlimited generation
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 1 minute audio
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Generate MP3 file
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Upload private models
-                </li>
-                <li className="fw-semibold">VC Web</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 2 minutes audio
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Push to play
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Generate MP3 file
-                </li>
-                <li className="fw-semibold">VC App</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  20 model downloads
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 5 mins prerecorded
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 15 mins realtime
-                </li>
-                <li className="fw-semibold">Wav2Lip</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 2 minutes video
-                </li>
-                <li className="fw-semibold">Processing Priority</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Level 30
-                </li>
-                <li className="fw-semibold">API Access</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Full API access
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="col-12 col-sm-6 col-lg-3">
-            <div className="rounded panel p-4 h-100">
-              <h2 className="text-center my-2 fw-bold mb-4">Elite</h2>
-              <Link to="/" className="btn btn-primary w-100 fs-6">
-                Buy Elite
-              </Link>
-              <h2 className="display-5 fw-bold text-center my-5">
-                ${current_list.elite.price}
-                <span className="fs-5 opacity-75 fw-normal"> /month</span>
-              </h2>
-              <ul className="pricing-list d-flex flex-column gap-2">
-                <li className="fw-semibold">TTS</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Unlimited generation
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 5 minutes audio
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Generate MP3 file
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Upload private models
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Share private models
-                </li>
-                <li className="fw-semibold">VC Web</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 7 minutes audio
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Push to play
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Generate MP3 file
-                </li>
-                <li className="fw-semibold">VC App</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Unlimited models
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Unlimited prerecorded
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Unlimited realtime
-                </li>
-                <li className="fw-semibold">Wav2Lip</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Up to 5 minutes video
-                </li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Turn off watermark
-                </li>
-                <li className="fw-semibold">Processing Priority</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Level 40
-                </li>
-                <li className="fw-semibold">API Access</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  Full API access
-                </li>
-                <li className="fw-semibold">Commercial Voices</li>
-                <li>
-                  <FontAwesomeIcon icon={faCheck} className="text-red me-3" />
-                  FakeYou commercial voices
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="container-panel mt-5 py-5">
-        <div className="panel p-4">
-          <table className="table">
-            <thead>
-              <tr>
-                <th className="">Feature List</th>
-
-                {current_tiers.map((e) => {
+                <li className="fw-semibold">{FYP.starter.tts.title}</li>
+                {FYP.starter.tts.features.map((e: any) => {
                   return (
-                    <th key={e} className="">
-                      {capitalize(e)}
-                    </th>
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
                   );
                 })}
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td className="has-text-weight-bold">Price</td>
-                <td>${current_list.free.price}/month</td>
-                <td>${current_list.plus.price}/month</td>
-                <td>${current_list.pro.price}/month</td>
-              </tr>
-
-              {current_features.map((e, i) => {
-                return (
-                  <tr key={i}>
-                    <td>{e}</td>
-
-                    <td>
+                <li className="fw-semibold">{FYP.starter.vcweb.title}</li>
+                {FYP.starter.vcweb.features.map((e: any) => {
+                  return (
+                    <li key={e}>
                       <FontAwesomeIcon
-                        icon={current_list.free.features[e] ? TRUE : FALSE}
-                        className={`fa-2x ${
-                          current_list.free.features[e]
-                            ? "has-text-success"
-                            : "has-text-danger"
-                        }`}
+                        icon={faCheck}
+                        className="text-red me-3"
                       />
-                    </td>
-
-                    <td>
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">
+                  {FYP.starter.vcapp.title}{" "}
+                  <span className="small-text">(registered users)</span>
+                </li>
+                {FYP.starter.vcapp.features.map((e: any) => {
+                  return (
+                    <li key={e}>
                       <FontAwesomeIcon
-                        icon={current_list.plus.features[e] ? TRUE : FALSE}
-                        className={`fa-2x ${
-                          current_list.plus.features[e]
-                            ? "has-text-success"
-                            : "has-text-danger"
-                        }`}
+                        icon={faCheck}
+                        className="text-red me-3"
                       />
-                    </td>
-
-                    <td>
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.starter.w2l.title}</li>
+                {FYP.starter.w2l.features.map((e: any) => {
+                  return (
+                    <li key={e}>
                       <FontAwesomeIcon
-                        icon={current_list.pro.features[e] ? TRUE : FALSE}
-                        className={`fa-2x ${
-                          current_list.pro.features[e]
-                            ? "has-text-success"
-                            : "has-text-danger"
-                        }`}
+                        icon={faCheck}
+                        className="text-red me-3"
                       />
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">
+                  {FYP.starter.priority.title}{" "}
+                  <span className="small-text">(registered users)</span>
+                </li>
+                {FYP.starter.priority.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+          <div className="col-12 col-sm-6 col-lg-3">
+            <div className="rounded panel p-4 h-100">
+              <h2 className="text-center my-2 fw-bold mb-4">{FYP.plus.tier}</h2>
+              <Link to="/" className="btn btn-primary w-100 fs-6">
+                Buy {FYP.plus.tier}
+              </Link>
+              <h2 className="display-5 fw-bold text-center my-5">
+                ${FYP.plus.price}
+                <span className="fs-5 opacity-75 fw-normal"> /month</span>
+              </h2>
+              <ul className="pricing-list d-flex flex-column gap-2">
+                <li className="fw-semibold">{FYP.plus.tts.title}</li>
+                {FYP.plus.tts.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.plus.vcweb.title}</li>
+                {FYP.plus.vcweb.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.plus.vcapp.title}</li>
+                {FYP.plus.vcapp.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.plus.w2l.title}</li>
+                {FYP.plus.w2l.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.plus.priority.title}</li>
+                {FYP.plus.priority.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+          <div className="col-12 col-sm-6 col-lg-3">
+            <div className="rounded panel p-4 h-100">
+              <h2 className="text-center my-2 fw-bold mb-4">{FYP.pro.tier}</h2>
+              <Link to="/" className="btn btn-primary w-100 fs-6">
+                Buy {FYP.pro.tier}
+              </Link>
+              <h2 className="display-5 fw-bold text-center my-5">
+                ${FYP.pro.price}
+                <span className="fs-5 opacity-75 fw-normal"> /month</span>
+              </h2>
+              <ul className="pricing-list d-flex flex-column gap-2">
+                <li className="fw-semibold">{FYP.pro.tts.title}</li>
+                {FYP.pro.tts.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.pro.vcweb.title}</li>
+                {FYP.pro.vcweb.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.pro.vcapp.title}</li>
+                {FYP.pro.vcapp.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.pro.w2l.title}</li>
+                {FYP.pro.w2l.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.pro.priority.title}</li>
+                {FYP.pro.priority.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.pro.api.title}</li>
+                {FYP.pro.api.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+          <div className="col-12 col-sm-6 col-lg-3">
+            <div className="rounded panel p-4 h-100">
+              <h2 className="text-center my-2 fw-bold mb-4">
+                {FYP.elite.tier}
+              </h2>
+              <Link to="/" className="btn btn-primary w-100 fs-6">
+                Buy {FYP.elite.tier}
+              </Link>
+              <h2 className="display-5 fw-bold text-center my-5">
+                ${FYP.elite.price}
+                <span className="fs-5 opacity-75 fw-normal"> /month</span>
+              </h2>
+              <ul className="pricing-list d-flex flex-column gap-2">
+                <li className="fw-semibold">{FYP.elite.tts.title}</li>
+                {FYP.elite.tts.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.elite.vcweb.title}</li>
+                {FYP.elite.vcweb.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.elite.vcapp.title}</li>
+                {FYP.elite.vcapp.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.elite.w2l.title}</li>
+                {FYP.elite.w2l.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.elite.priority.title}</li>
+                {FYP.elite.priority.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.elite.api.title}</li>
+                {FYP.elite.api.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.elite.commercial.title}</li>
+                {FYP.elite.commercial.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
     </div>