feat: plan gate styles (#40)

<img width="1624" alt="Screenshot 2023-11-10 at 16 38 50"
src="https://github.com/web3-storage/console/assets/152863/8aff8e6b-8b3e-4a50-a973-3de41814e67b">

src/components/PlanGate.tsx

@@ -4,6 +4,7 @@ import { ReactNode, useEffect, useState } from 'react'
 import { useKeyring, Plan } from '@w3ui/react-keyring';
 import StripePricingTable from './PricingTable';
 import DefaultLoader from './Loader';
+import { Web3StorageLogo, Web3StorageLogoIcon } from '@/brand';
 
 export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
   const [error, setError] = useState<any>()
@@ -33,17 +34,22 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
   if (!plan?.product) {
     return (
       <div className="flex flex-col justify-center items-center h-screen">
-        <div className="text-gray-200 text-center">
-          <h1 className="my-4 text-lg">Welcome {account}!</h1>
-          <p>
-            To get started with w3up you&apos;ll need to sign up for a subscription. If you choose
-            the free plan we won&apos;t charge your credit card, but we do need a card on file
-            before we will store your bits.
-          </p>
-          <p>
-            Pick a plan below and complete the Stripe signup flow to get started!
-          </p>
-          <StripePricingTable />
+        <div className='my-4'><Web3StorageLogo /></div>
+        <div className="max-w-screen-lg text-zinc-950 text-center bg-white/20 rounded-lg px-1 py-1">
+          <div className='px-6 py-6 lg:px-24'>
+            <h1 className="my-4 font-bold">Welcome {account}!</h1>
+            <p className='my-4'>
+              To get started with w3up you&apos;ll need to sign up for a subscription. If you choose
+              the free plan we won&apos;t charge your credit card, but we do need a card on file
+              before we will store your bits.
+            </p>
+            <p className='my-4'>
+              Pick a plan below and complete the Stripe signup flow to get started!
+            </p>
+          </div>
+          <div className='rounded-lg overflow-hidden'>
+            <StripePricingTable />
+          </div>
         </div>
       </div>
     )