From acd3f84a3e562e2b9fb3990a6b52e62ddceb7478 Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@protocol.ai>
Date: Tue, 24 Oct 2023 19:15:08 +0100
Subject: [PATCH] feat: tweaks to plans to make more lovely

- some renaming
- readme update for env
- .gitignore for env
- out of band tweaks to stipe config to add logo, brand colors, and fix a wrong product description

License: MIT
Signed-off-by: Oli Evans <oli@protocol.ai>
---
 .gitignore                                     |  2 ++
 README.md                                      |  4 +++-
 src/app/plans/page.tsx                         | 16 ++++++++++------
 src/components/{Plans.tsx => PricingTable.tsx} |  4 ++--
 4 files changed, 17 insertions(+), 9 deletions(-)
 rename src/components/{Plans.tsx => PricingTable.tsx} (86%)

diff --git a/.gitignore b/.gitignore
index 8f322f0..1dface6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp
diff --git a/README.md b/README.md
index c921c55..1b7b7b8 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Upload files & manage your spaces from your browser.
 
 To use the production site visit https://console.web3.storage
 
-To contribute and customize console, run the development server:
+To contribute and customize console, copy `.env.tpl` to `.env` and run the development server:
 
 ```bash
 pnpm dev
@@ -17,3 +17,5 @@ pnpm dev
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+<p style="text-align:center;padding-top:2rem">⁂</p>
diff --git a/src/app/plans/page.tsx b/src/app/plans/page.tsx
index f63f862..c38162e 100644
--- a/src/app/plans/page.tsx
+++ b/src/app/plans/page.tsx
@@ -1,11 +1,15 @@
-import Plans from '@/components/Plans'
-export default function PlansComponent () {
+import PricingTable from '@/components/PricingTable'
+
+export default function Plans () {
   return (
-    <div className='flex flex-col items-center'>
-      <h1 className='text-4xl'>Plans</h1>
+    <div className='py-8 flex flex-col items-center'>
+      <h1 className='text-2xl font-mono mb-8 font-bold'>Plans</h1>
+      <p className='mb-4'>Pick the price plan that works for you.</p>
+      <p><b>Starter</b> is <u>free</u> for up to 5GiB.</p>
+      <p><b>Lite</b> and <b>Business</b> plans unlock lower cost per GiB.</p>
       <div className='w-full overflow-x-scroll'>
-        <Plans />
+        <PricingTable />
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/Plans.tsx b/src/components/PricingTable.tsx
similarity index 86%
rename from src/components/Plans.tsx
rename to src/components/PricingTable.tsx
index 87c71ce..5f8e37f 100644
--- a/src/components/Plans.tsx
+++ b/src/components/PricingTable.tsx
@@ -1,7 +1,7 @@
 import { createElement } from 'react'
 import Script from 'next/script'
 
-export default function Plans({className=''}) {
+export default function StripePricingTable({className=''}) {
   return (
     <>
       <Script async src="https://js.stripe.com/v3/pricing-table.js" />
@@ -12,4 +12,4 @@ export default function Plans({className=''}) {
       }, '')}
     </>
   )
-}
\ No newline at end of file
+}