feat: price plans (#6)

![price plans](https://github.com/web3-storage/www/assets/58871/62879562-5aa9-4a37-ad64-c50e22fcd337) get the pricing page to minimally shipable content and less noisy than the exiting one --------- Signed-off-by: Oli Evans <[email protected]>
storacha · Nov 13, 2023 · cefc492 · cefc492
1 parent 484e0c1
commit cefc492
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 14 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image'
 import ImageIconCluster from '@/../public/images/index/cluster-1.png'
-import { Web3StorageLogo } from '@/components/brand'
 import { W3UPClientExample } from '@/components/code'
 import { NavLink, ButtonLink, Header } from '@/components/nav'
 
@@ -31,12 +30,12 @@ export default function HomePage () {
       </section>
       <section className='bg-zinc-950 text-white pt-20 pb-20 leading-loose md:one-corn'>
         <div className='max-w-6xl mx-auto lg:flex px-3 gap-8'>
-          <div className='md:w-1/2'>
+          <div className='lg:w-1/2'>
             <h2 className='font-bold text-2xl pb-8'>Connecting the web of data</h2>
             <p>Eliminate silos with web3.storage. Using IPFS and other decentralized protocols, create a true data layer that connects you, your users, and the Web, regardless of where content is stored - client-side, in the cloud, or elsewhere.</p>
             <p className='pt-4'>Sounds hard? It isn&apos;t. Our client libraries are super easy-to-use, abstracting the complexity of these decentralized protocols. And our hosted object storage provides best-in-class IPFS write and read performance and competitive pricing to web2 solutions, giving you the ability to write innovative applications without compromise.</p>
           </div>
-          <div className='md:w-1/2'>
+          <div className='pt-8 lg:pt-0 lg:w-1/2'>
             <W3UPClientExample />
           </div>
         </div>

diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
@@ -1,4 +1,6 @@
-import { Header } from "@/components/nav"
+import Tick from '@/../public/images/pricing/circle-check.svg'
+import { ButtonLink, Header } from "@/components/nav"
+import Image from 'next/image'
 import { Metadata } from "next"
 import fs from 'node:fs/promises'
 import path from 'node:path'
@@ -34,6 +36,48 @@ function LogoCard ({src}: {src: string}) {
   )
 }
 
+type PlanCardProps = {
+  name: string
+  price: string
+  storage: string
+  egress?: string
+  storageExcess: string
+  egressExcess?: string
+  banner?: string
+}
+
+function PlanCard ({ name, price, storage, egress = storage, storageExcess, egressExcess = storageExcess, banner }: PlanCardProps) {
+  return (
+    <div className=' bg-white/30 rounded-lg shadow-md border-white/10 overflow-hidden'>
+      {banner ? <p className="bg-grad-2 text-white font-bold px-3 py-2">{banner}</p> : null}
+      <div className="px-6 py-8 md:px-4 lg:px-6">
+        <h2 className="font-semibold text-3xl flex">
+          <span className="flex-auto">{name}</span>
+          <span className="font-bold">{price}<span className="text-zinc-500 font-normal">/mo</span></span>
+        </h2>
+        <div className="flex items-start pt-8">
+          <Image src={Tick} alt='yep' className='pt-1'/>
+          <div className='pl-4'>
+            <p className="font-semibold text-lg">{storage} storage</p>
+            <p className="text-sm">Additional at {storageExcess} per month</p>
+          </div>
+        </div>
+        <div className="flex items-start pt-4">
+          <Image src={Tick} alt='yep' className='pt-1'/>
+          <div className='pl-4'>
+            <p className="font-semibold text-lg">{egress} egress per month</p>
+            <p className="text-sm">Additional at {egressExcess} per month</p>
+          </div>
+        </div>
+        <p className="text-2xl font-bold text-center pt-16 pb-6">{storage}</p>
+        <p className='text-center'>
+          <ButtonLink href='https://console.web3.storage'>Get started</ButtonLink>
+        </p>
+      </div>
+    </div>
+  )
+}
+
 export default async function PricingPage () {
   const logos = await findLogoUrls()
   return (
@@ -44,21 +88,33 @@ export default async function PricingPage () {
           <h1 className="font-bold text-4xl text-zinc-900">As much as you need, verifiably</h1>
           <p className="pt-12 max-w-3xl text-xl text-zinc-900">web3.storage is designed for scale and simplicity. Utilize our elastic, hosted data platform that integrates decentralized data and authentication protocols. No need to worry about performance or reliability.</p>
         </section>
+        <section className='max-w-6xl mx-auto pt-20 md:pt-28 px-3 pb-20'>
+          <div className="md:flex text-zinc-950 gap-3 lg:gap-7 items-end">
+            <div className='md:w-1/3'>
+              <PlanCard name='Free' price='$0' storage='5GB' storageExcess='$0.15/GB' />
+            </div>
+            <div className='md:w-1/3 pt-8 md:pt-0'>
+              <PlanCard name='Lite' price='$10' storage='100GB' storageExcess='$0.05/GB' />
+            </div>
+            <div className='md:w-1/3 pt-8 md:pt-0'>
+              <PlanCard name='Business' price='$100' storage='2TB' storageExcess='$0.03/GB' banner='Cheapest per GB' />
+            </div>
+          </div>
+          {/* <div className='mt-8 bg-white/30 rounded-lg shadow-md border-white/10 overflow-hidden text-zinc-950'>
+            <div className="px-6 py-8">
+              <h2 className="font-semibold text-3xl">Custom</h2>
+              <p className='pt-4'>
+                Looking for way more? Anticipate having a complex integration? Just tell us more about what you're building and we can figure it out.
+              </p>
+            </div>
+          </div> */}
+        </section>
         <section>
           <div className="max-w-6xl mx-auto pt-12 px-3">
             <h2 className="font-semibold text-xl text-zinc-950/40">TRUSTED BY</h2>
           </div>
           <Logos urls={logos} />
         </section>
-        {/* <section className='max-w-6xl mx-auto pt-20 md:pt-28 px-3'>
-          <div className="flex">
-            <div className='w-1/3 bg-zinc-200/60 rounded-md'>
-              Free
-            </div>
-            <div className='w-1/3'>Lite</div>
-            <div className='w-1/3'>Pro</div>
-          </div>
-        </section> */}
       </div>
     </div>
   )

diff --git a/src/components/code.tsx b/src/components/code.tsx
@@ -28,7 +28,7 @@ export async function SyntaxHighlight ({code, theme = 'dracula-soft', lang = 'ja
 
 export function CodeSample (props: {code: string, theme?: Theme, lang?: Lang}) {
   return (
-    <div className='border-8 border-zinc-300/10 rounded-md p-4 pl-2 text-md'>
+    <div className='border-8 border-zinc-300/10 rounded-md p-4 pl-2 overflow-auto text-sm/relaxed sm:text-base/loose'>
       <SyntaxHighlight {...props} />
     </div>
   )

diff --git a/src/globals.css b/src/globals.css
@@ -9,6 +9,9 @@
     background-size: 400% 400%;
     animation: bgPosDrift 60s ease infinite;
   }
+  .bg-grad-2 {
+    background: linear-gradient(269deg, #0AB2AA 0%, #4622FC 53.4%, #FF00C4 108.59%);
+  }
   .text-grad {
     background: linear-gradient(92deg, #B507DC 0.82%, #2F0FDB 26.77%);
     background-clip: text;