From 043924ce8bea365cd99d646dc82ffac41851d72c Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Fri, 1 Apr 2022 13:10:28 +0200
Subject: [PATCH] fix mobile copy issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• this page needs refactoring, we have duplicate content/values scattered around
---
 www/pages/pricing/index.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/www/pages/pricing/index.tsx b/www/pages/pricing/index.tsx
index a7b2c77020b..a37bbc23e03 100644
--- a/www/pages/pricing/index.tsx
+++ b/www/pages/pricing/index.tsx
@@ -92,24 +92,29 @@ export default function IndexPage() {
     price,
     tier,
     showDollarSign = true,
+    from = false,
   }: {
     description: string
     priceDescription: string
     price: string
     tier: string
     showDollarSign?: boolean
+    from?: boolean
   }) => {
     return (
       <div className="px-4 mt-8">
         <h2 className="text-base font-normal text-scale-1200">{tier}</h2>
-        <span className="h1">
-          {showDollarSign && '$'}
-          {price}
-        </span>
-        <p className="p">{priceDescription}</p>
+        <div className="flex gap-2 items-baseline">
+          {from && <span className="text-base text-scale-1200">From</span>}
+          <span className="h1">
+            {showDollarSign && '$'}
+            {price}
+          </span>
+          <p className="p">{priceDescription}</p>
+        </div>
         <p className="p">{description}</p>
         <Link href="https://app.supabase.io" passHref>
-          <Button as="a" type="default" size="medium" block>
+          <Button as="a" size="medium" block>
             Get started
           </Button>
         </Link>
@@ -312,7 +317,7 @@ export default function IndexPage() {
               <MobileHeaders
                 tier="Free"
                 price={'0'}
-                priceDescription={'/project/month'}
+                priceDescription={'/mo'}
                 description={'Perfect for hobby projects and experiments'}
               />
 
@@ -350,8 +355,9 @@ export default function IndexPage() {
               {/* Pro - Mobile  */}
               <MobileHeaders
                 tier="Pro"
+                from={true}
                 price={'25'}
-                priceDescription={'/project/month + usage costs'}
+                priceDescription={'/mo + additional use'}
                 description={'Everything you need to scale your project into production'}
               />
               <PricingTableRowMobile