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

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp

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>

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>
   )
-}
+}

src/components/Plans.tsx → 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=''}) {
       }, '')}
     </>
   )
-}
+}