From b166f54344ccca094288d7b0a5bd3aa613b1fa26 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 2 Nov 2022 15:55:00 +0700
Subject: [PATCH] latin america basic tier

---
 .../src/v2/view/pricing/PricingPage.tsx       | 191 +++++++++++++++++-
 1 file changed, 190 insertions(+), 1 deletion(-)

diff --git a/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx b/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx
index 72afba2032..08c90a1129 100644
--- a/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx
+++ b/packages/fakeyou/src/v2/view/pricing/PricingPage.tsx
@@ -21,7 +21,8 @@ function PricingPage(props: Props) {
       </div>
       <div className="container mt-3 mb-5">
         <div className="row gx-3 gy-4">
-          <div className="col-12 col-sm-6 col-lg-3">
+          {/* Starter Tier */}
+          {/* <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.starter.tier}
@@ -102,7 +103,87 @@ function PricingPage(props: Props) {
                 })}
               </ul>
             </div>
+          </div> */}
+
+          {/* Basic Tier */}
+          <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.basic.tier}
+              </h2>
+              <Link to="/" className="btn btn-primary w-100 fs-6">
+                Buy {FYP.basic.tier}
+              </Link>
+              <h2 className="display-5 fw-bold text-center my-5">
+                ${FYP.basic.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.basic.tts.title}</li>
+                {FYP.basic.tts.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.basic.vcweb.title}</li>
+                {FYP.basic.vcweb.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.basic.vcapp.title}</li>
+                {FYP.basic.vcapp.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.basic.w2l.title}</li>
+                {FYP.basic.w2l.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+                <li className="fw-semibold">{FYP.basic.priority.title}</li>
+                {FYP.basic.priority.features.map((e: any) => {
+                  return (
+                    <li key={e}>
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        className="text-red me-3"
+                      />
+                      {e}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
           </div>
+
+          {/* Plus Tier */}
           <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>
@@ -177,6 +258,8 @@ function PricingPage(props: Props) {
               </ul>
             </div>
           </div>
+
+          {/* Pro Tier */}
           <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>
@@ -263,6 +346,8 @@ function PricingPage(props: Props) {
               </ul>
             </div>
           </div>
+
+          {/* Elite Tier */}
           <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">
@@ -364,6 +449,110 @@ function PricingPage(props: Props) {
             </div>
           </div>
         </div>
+
+        <div className="w-100 mt-4">
+          <div className="rounded panel p-4 h-100">
+            <div className="d-flex w-100">
+              <h2 className="my-2 fw-bold mb-4 flex-grow-1">
+                {FYP.starter.tier}
+              </h2>
+
+              <h2 className="display-6 fw-bold text-right">
+                ${FYP.starter.price}
+                <span className="fs-5 opacity-75 fw-normal"> /month</span>
+              </h2>
+            </div>
+
+            <Link to="/" className="btn btn-secondary w-100 fs-6">
+              Use for free
+            </Link>
+
+            <div className="row mt-5">
+              <div className="col-4 d-flex flex-column gap-3">
+                <ul className="pricing-list d-flex flex-column gap-2">
+                  <li className="fw-semibold">{FYP.starter.tts.title}</li>
+                  {FYP.starter.tts.features.map((e: any) => {
+                    return (
+                      <li key={e}>
+                        <FontAwesomeIcon
+                          icon={faCheck}
+                          className="text-red me-3"
+                        />
+                        {e}
+                      </li>
+                    );
+                  })}
+                </ul>
+                <ul className="pricing-list d-flex flex-column gap-2">
+                  <li className="fw-semibold">{FYP.starter.vcweb.title}</li>
+                  {FYP.starter.vcweb.features.map((e: any) => {
+                    return (
+                      <li key={e}>
+                        <FontAwesomeIcon
+                          icon={faCheck}
+                          className="text-red me-3"
+                        />
+                        {e}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+              <div className="col-4 d-flex flex-column gap-3">
+                <ul className="pricing-list d-flex flex-column gap-2">
+                  <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={faCheck}
+                          className="text-red me-3"
+                        />
+                        {e}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+              <div className="col-4 d-flex flex-column gap-3">
+                <ul className="pricing-list d-flex flex-column gap-2">
+                  <li className="fw-semibold">{FYP.starter.w2l.title}</li>
+                  {FYP.starter.w2l.features.map((e: any) => {
+                    return (
+                      <li key={e}>
+                        <FontAwesomeIcon
+                          icon={faCheck}
+                          className="text-red me-3"
+                        />
+                        {e}
+                      </li>
+                    );
+                  })}
+                </ul>
+                <ul className="pricing-list d-flex flex-column gap-2">
+                  <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>
+        </div>
       </div>
     </div>
   );