mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
fix: light mode colors
This commit is contained in:
Alaister Young committed
1 parent
1dd18e36aa
commit
bbb991a7fe
3 files changed
+9319
-146
No files matched your search
@@ -41,8 +41,8 @@
|
||||
"title": "Database space",
|
||||
"tiers": {
|
||||
"free": "Up to 500 MB",
|
||||
"pro": "Up to 8 GB",
|
||||
"enterprise": "$0.125 per GB"
|
||||
"pro": "8 GB included, then $0.125 per GB",
|
||||
"enterprise": "∞"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -68,8 +68,8 @@
|
||||
"tooltip": "Good news, only download operations are counted towards the limit",
|
||||
"tiers": {
|
||||
"free": "Up to 2GB",
|
||||
"pro": "Up to 50GB",
|
||||
"enterprise": "$0.09 per GB"
|
||||
"pro": "50GB included, then $0.09 per GB",
|
||||
"enterprise": "∞"
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -83,7 +83,7 @@
|
||||
"tiers": {
|
||||
"free": "10,000 Users",
|
||||
"pro": "100,000 Users",
|
||||
"enterprise": "Unlimited"
|
||||
"enterprise": "∞"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -136,8 +136,8 @@
|
||||
"title": "Storage total",
|
||||
"tiers": {
|
||||
"free": "Up to 1 GB",
|
||||
"pro": "Up to 100 GB",
|
||||
"enterprise": "$0.021 per GB"
|
||||
"pro": "100 GB included, then $0.021 per GB",
|
||||
"enterprise": "∞"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -145,8 +145,8 @@
|
||||
"tooltip": "Good news, only download operations are counted towards the limit",
|
||||
"tiers": {
|
||||
"free": "Up to 2 GB",
|
||||
"pro": "Up to 200 GB",
|
||||
"enterprise": "$0.09 per GB"
|
||||
"pro": "200 GB included, then $0.09 per GB",
|
||||
"enterprise": "∞"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Generated
+9161
-14
File diff suppressed because it is too large.
Load diff
+149
-123
@@ -1,18 +1,15 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
|
||||
import DefaultLayout from '~/components/Layouts/Default'
|
||||
import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/PricingTableRow'
|
||||
import { Accordion, Badge, Button, Divider, IconCheck, Space, Typography } from '@supabase/ui'
|
||||
|
||||
import pricing from '~/data/Pricing.json'
|
||||
import pricingFaq from '~/data/PricingFAQ.json'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import CTABanner from '~/components/CTABanner'
|
||||
|
||||
import { Accordion, Button, IconCheck, Typography } from '@supabase/ui'
|
||||
import Solutions from 'data/Solutions.json'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import React from 'react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import CTABanner from '~/components/CTABanner'
|
||||
import DefaultLayout from '~/components/Layouts/Default'
|
||||
import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/PricingTableRow'
|
||||
import pricing from '~/data/Pricing.json'
|
||||
import pricingFaq from '~/data/PricingFAQ.json'
|
||||
|
||||
export default function IndexPage() {
|
||||
const router = useRouter()
|
||||
@@ -29,43 +26,58 @@ export default function IndexPage() {
|
||||
warning: 'Limit of 2 free projects per user',
|
||||
description: 'Perfect for hobby projects and experiments.',
|
||||
features: [
|
||||
'10K authenticated users',
|
||||
'10K Authenticated Users',
|
||||
'500MB Database',
|
||||
'1GB Storage',
|
||||
'25 Realtime connections',
|
||||
'1 day backup',
|
||||
'Standard support',
|
||||
'25 Realtime Connections',
|
||||
'1 Day Backup',
|
||||
'Standard Support',
|
||||
],
|
||||
scale: 'Anything more than the above you must upgrade',
|
||||
shutdown: 'Free projects are shutdown after 7 days of inactivity.',
|
||||
},
|
||||
{
|
||||
name: 'Pay As You Go',
|
||||
name: 'Pro',
|
||||
href: '#',
|
||||
priceMonthly: 25,
|
||||
warning: '+ usage costs',
|
||||
description: 'Everything you need to scale your project into production.',
|
||||
features: [
|
||||
'100K authenticated users',
|
||||
'100K Authenticated Users',
|
||||
'8GB Database',
|
||||
'50GB Storage',
|
||||
'Unlimited Realtime connections',
|
||||
'7 days backup',
|
||||
'High priority support',
|
||||
'Unlimited Realtime Connections',
|
||||
'7 Days Backup',
|
||||
'High Priority Support',
|
||||
],
|
||||
scale: 'Additional fees apply for usage and storage beyond the limits above.',
|
||||
shutdown: '',
|
||||
},
|
||||
// {
|
||||
// name: 'Enterprise',
|
||||
// href: '#',
|
||||
// description: 'Tailored to your business needs.',
|
||||
// features: [
|
||||
// '∞ authenticated users',
|
||||
// '∞ GB Database',
|
||||
// '∞ GB Storage',
|
||||
// 'Unlimited Realtime connections',
|
||||
// 'Backups never deleted',
|
||||
// 'Enterprise support',
|
||||
// ],
|
||||
// scale: 'Additional fees apply for usage and storage beyond the limits above.',
|
||||
// shutdown: '',
|
||||
// },
|
||||
]
|
||||
|
||||
const allPlans = [
|
||||
'Custom SMTP server',
|
||||
'0Auth Providers',
|
||||
'OAuth Providers',
|
||||
'Dedicated project instance',
|
||||
'Unlimited API requests',
|
||||
]
|
||||
const MobileHeaders = ({
|
||||
title,
|
||||
// title,
|
||||
description,
|
||||
priceDescription,
|
||||
price,
|
||||
@@ -108,74 +120,77 @@ export default function IndexPage() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="bg-gray-800">
|
||||
<div className="pt-12 sm:pt-16 lg:pt-24">
|
||||
<div className="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
|
||||
<div className="shadow-lg">
|
||||
<div className="py-12 bg-scale-100 lg:py-24">
|
||||
<div className="px-4 mx-auto text-center max-w-7xl sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto space-y-2 lg:max-w-none">
|
||||
<h2 className="text-lg leading-6 font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Pricing
|
||||
</h2>
|
||||
<p className="text-3xl text-white sm:text-4xl lg:text-5xl">
|
||||
<h2 className="text-3xl text-scale-1200 sm:text-4xl lg:text-5xl">
|
||||
Predictable pricing, no surprises
|
||||
</p>
|
||||
<p className="text-xl text-gray-300">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum sequi unde
|
||||
repudiandae natus.
|
||||
</h2>
|
||||
<p className="text-xl text-scale-1100">
|
||||
Start building for free, then scale to millions of users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 pb-12 bg-gray-50 dark:bg-gray-700 sm:mt-12 sm:pb-16 lg:mt-16 lg:pb-24">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 h-3/4 bg-gray-800" />
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="flex flex-col pb-12 bg-scale-100 sm:pb-16 lg:pb-24">
|
||||
<div className="relative pt-8">
|
||||
<div className="absolute inset-0 shadow-sm bg-scale-200 h-3/4" />
|
||||
|
||||
<div className="relative z-10 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div className="max-w-md mx-auto space-y-4 lg:max-w-5xl lg:grid lg:grid-cols-2 lg:gap-5 lg:space-y-0">
|
||||
{tiers.map((tier) => (
|
||||
<div
|
||||
key={tier.name}
|
||||
className="flex flex-col rounded-lg shadow-lg overflow-hidden border dark:border-dark"
|
||||
className="flex flex-col overflow-hidden rounded-lg shadow-lg"
|
||||
>
|
||||
<div className="px-10 bg-white dark:bg-gray-700 pt-8 h-64">
|
||||
<div className="h-64 px-10 pt-8 bg-white dark:bg-scale-700">
|
||||
<h3
|
||||
className="inline-flex rounded-full text-sm font-normal tracking-wide lg:text-xl mb-2 dark:text-gray-200"
|
||||
className="inline-flex mb-2 text-sm font-normal tracking-wide rounded-full lg:text-xl text-scale-1200"
|
||||
id="tier-standard"
|
||||
>
|
||||
{tier.name}
|
||||
</h3>
|
||||
<div className="flex items-baseline text-6xl font-extrabold dark:text-white">
|
||||
${tier.priceMonthly}
|
||||
<span className="ml-1 text-2xl font-medium text-gray-500">/mo</span>
|
||||
<div className="flex items-baseline text-6xl font-extrabold text-scale-1200">
|
||||
{tier.priceMonthly !== undefined ? (
|
||||
<>
|
||||
<span>${tier.priceMonthly}</span>
|
||||
<span className="ml-1 text-2xl font-medium text-scale-900">/mo</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Contact Us</span>
|
||||
)}
|
||||
</div>
|
||||
{tier.warning && (
|
||||
<span className="mt-4 text-xs bg-brand-100 bg-opacity-30 text-brand-900 dark:text-brand-600 relative rounded-md px-2 py-1">
|
||||
<span className="relative inline-flex px-2 py-1 mt-2 text-xs rounded-md bg-brand-300 bg-opacity-30 text-brand-1000">
|
||||
{tier.warning}
|
||||
</span>
|
||||
)}
|
||||
<p className="mt-4 text-lg text-gray-500">{tier.description}</p>
|
||||
<p className="mt-4 text-lg text-scale-1100">{tier.description}</p>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-between px-6 pt-6 pb-8 bg-gray-50 dark:bg-gray-700 border-t dark:border-dark space-y-6 sm:p-10 sm:pt-6">
|
||||
|
||||
<div className="flex flex-col justify-between flex-1 px-6 pt-6 pb-8 space-y-6 border-t bg-scale-100 dark:border-dark sm:p-10 sm:pt-6">
|
||||
<div>
|
||||
<p className="text-gray-400 dark:text-gray-300">Included for free:</p>
|
||||
<ul role="list" className="divide-y dark:divide-gray-600">
|
||||
<p className="text-scale-900">Included with plan:</p>
|
||||
<ul role="list" className="divide-y">
|
||||
{tier.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start py-2 items-center">
|
||||
<div className="h-6 w-6 bg-brand-600 bg-opacity-30 rounded-full flex items-center justify-center">
|
||||
<li key={feature} className="flex items-center py-2">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-brand-600 bg-opacity-30">
|
||||
<IconCheck
|
||||
className="h-4 w-4 text-green-500"
|
||||
className="w-4 h-4 text-green-800"
|
||||
aria-hidden="true"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</div>
|
||||
<p className="ml-3 text-lg text-gray-700 dark:text-gray-100 mb-0">
|
||||
{feature}
|
||||
</p>
|
||||
<p className="mb-0 ml-3 text-lg text-scale-1100">{feature}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">{tier.scale}</p>
|
||||
<p className="text-xs text-gray-500">{tier.shutdown}</p>
|
||||
<p className="text-xs text-scale-900">{tier.scale}</p>
|
||||
<p className="text-xs text-scale-900">{tier.shutdown}</p>
|
||||
</div>
|
||||
<a href={tier.href}>
|
||||
<Button block size="large">
|
||||
@@ -189,41 +204,51 @@ export default function IndexPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
All plans include:
|
||||
<ul role="list">
|
||||
{allPlans.map((feature) => (
|
||||
<li key={feature} className="flex items-start mb-1">
|
||||
<div className="flex-shrink-0">
|
||||
<IconCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
|
||||
</div>
|
||||
<p className="ml-3 text-lg text-gray-700 dark:text-gray-100 mb-0">{feature}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex justify-start w-full max-w-5xl px-6 mx-auto mt-8 overflow-hidden lg:px-0">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-scale-900">All plans include:</span>
|
||||
<ul role="list" className="divide-y">
|
||||
{allPlans.map((feature) => (
|
||||
<li key={feature} className="flex items-center py-2">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-brand-600 bg-opacity-30">
|
||||
<IconCheck
|
||||
className="w-4 h-4 text-green-800"
|
||||
aria-hidden="true"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</div>
|
||||
<p className="mb-0 ml-3 text-lg text-scale-1100">{feature}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 lg:mt-5">
|
||||
|
||||
<div className="relative px-4 mx-auto mt-12 max-w-7xl sm:px-6 lg:px-8">
|
||||
<div className="max-w-md mx-auto lg:max-w-5xl">
|
||||
<div className="rounded-lg bg-gray-100 border dark:border-dark dark:bg-gray-700 px-6 py-8 sm:p-10 lg:flex lg:items-center">
|
||||
<div className="px-6 py-8 border rounded-lg shadow-lg border-brand-500 bg-scale-100 sm:p-10 lg:flex lg:items-center">
|
||||
<div className="flex-1">
|
||||
<div>
|
||||
<h3 className="inline-flex px-4 py-1 rounded-full text-sm font-semibold tracking-wide uppercase bg-white text-gray-800">
|
||||
<h3 className="inline-flex px-4 py-1 text-sm font-semibold tracking-wide uppercase rounded-full bg-brand-600 bg-opacity-30 text-brand-1100">
|
||||
Enterprise
|
||||
</h3>
|
||||
</div>
|
||||
<div className="mt-4 text-lg text-gray-600">
|
||||
Get full access to all of standard license features for solo projects that make
|
||||
less than $20k gross revenue for{' '}
|
||||
<span className="font-semibold text-gray-900">$29</span>.
|
||||
<div className="mt-4 text-lg text-scale-1100">
|
||||
Get a custom plan, tailor made for your company's needs. Scale to millions of
|
||||
users with enterprise grade features.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-md shadow lg:mt-0 lg:ml-10 lg:flex-shrink-0">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50"
|
||||
<Link
|
||||
href="mailto:support@supabase.io"
|
||||
as="mailto:support@supabase.io"
|
||||
passHref={true}
|
||||
>
|
||||
Contact us for Pricing
|
||||
</a>
|
||||
<Button as="a" size="large" type="outline" className="w-full">
|
||||
Contact Us for Pricing
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,11 +256,11 @@ export default function IndexPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800">
|
||||
<div className="container mx-auto px-6 lg:px-16 xl:px-20 relative md:pt-24 lg:pt-24 py-16">
|
||||
<div className="bg-white dark:bg-scale-800">
|
||||
<div className="container relative px-6 py-16 mx-auto lg:px-16 xl:px-20 md:pt-24 lg:pt-24">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl">Compare plans</h2>
|
||||
<p className="text-lg mb-16">
|
||||
<p className="mb-16 text-lg">
|
||||
Start with a hobby project, collaborate with a team, and scale to millions of users.
|
||||
</p>
|
||||
</div>
|
||||
@@ -244,12 +269,12 @@ export default function IndexPage() {
|
||||
<div className="lg:hidden">
|
||||
{/* Free - Mobile */}
|
||||
<div className="px-4">
|
||||
<h2 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Free</h2>
|
||||
<h2 className="text-lg font-medium leading-6 text-scale-900 dark:text-white">Free</h2>
|
||||
<p className="mt-4">
|
||||
<span className="text-4xl font-normal text-gray-900 dark:text-white">$0</span>
|
||||
<span className="text-4xl font-normal text-scale-900 dark:text-white">$0</span>
|
||||
<Typography.Text type="secondary">/project /month</Typography.Text>
|
||||
</p>
|
||||
<p className="my-4 text-sm text-gray-500">
|
||||
<p className="my-4 text-sm text-scale-500">
|
||||
Perfect for hobby projects and experiments.
|
||||
</p>
|
||||
<Link href="https://app.supabase.io" as="https://app.supabase.io">
|
||||
@@ -260,7 +285,7 @@ export default function IndexPage() {
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="container mx-auto px-6 lg:px-16 xl:px-20 relative pt-24 md:pt-24 lg:pt-24">
|
||||
<div className="container relative px-6 pt-24 mx-auto lg:px-16 xl:px-20 md:pt-24 lg:pt-24">
|
||||
<div className="text-center">
|
||||
<h1 className="h1">Predictable pricing, no surprises</h1>
|
||||
<p className="p">
|
||||
@@ -270,7 +295,7 @@ export default function IndexPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto px-0 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24">
|
||||
<div className="container relative px-0 py-16 mx-auto lg:px-16 xl:px-20 sm:py-18 md:py-24 lg:py-24">
|
||||
{/* <!-- xs to lg --> */}
|
||||
|
||||
<div className=" lg:hidden">
|
||||
@@ -305,7 +330,7 @@ export default function IndexPage() {
|
||||
<MobileHeaders
|
||||
tier="Pro"
|
||||
price={'25'}
|
||||
priceDescription={'/project /month'}
|
||||
priceDescription={'/project /month + usage costs'}
|
||||
description={'Everything you need to scale your project into production'}
|
||||
/>
|
||||
|
||||
@@ -329,8 +354,8 @@ export default function IndexPage() {
|
||||
|
||||
{/* Enterprise - Mobile */}
|
||||
<MobileHeaders
|
||||
tier="Pay as you go"
|
||||
price={'25'}
|
||||
tier="Enterprise"
|
||||
price={'Contact Us'}
|
||||
priceDescription={'/project /month plus usage costs'}
|
||||
description={'Designated support team, account manager and technical specialist'}
|
||||
/>
|
||||
@@ -372,7 +397,7 @@ export default function IndexPage() {
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
className="relative pb-4 px-6 text-sm font-normal text-scale-900 text-left"
|
||||
className="relative px-6 pb-4 text-sm font-normal text-left text-scale-900"
|
||||
scope="col"
|
||||
>
|
||||
<span className="sr-only">Feature by</span>
|
||||
@@ -384,7 +409,7 @@ export default function IndexPage() {
|
||||
</th>
|
||||
|
||||
<th
|
||||
className="w-1/4 pb-4 px-6 text-sm text-left font-normal text-scale-1200"
|
||||
className="w-1/4 px-6 pb-4 text-sm font-normal text-left text-scale-1200"
|
||||
scope="col"
|
||||
>
|
||||
<span>Free</span>
|
||||
@@ -395,7 +420,7 @@ export default function IndexPage() {
|
||||
</th>
|
||||
|
||||
<th
|
||||
className="w-1/4 pb-4 px-6 text-sm leading-6 font-normal text-scale-1200 text-left"
|
||||
className="w-1/4 px-6 pb-4 text-sm font-normal leading-6 text-left text-scale-1200"
|
||||
scope="col"
|
||||
>
|
||||
<span>Pro</span>
|
||||
@@ -406,10 +431,10 @@ export default function IndexPage() {
|
||||
</th>
|
||||
|
||||
<th
|
||||
className="w-1/4 pb-4 px-6 text-sm leading-6 font-normal text-scale-1200 text-left"
|
||||
className="w-1/4 px-6 pb-4 text-sm font-normal leading-6 text-left text-scale-1200"
|
||||
scope="col"
|
||||
>
|
||||
<span>Pay as you go</span>
|
||||
<span>Enterprise</span>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 h-0.25 w-full bg-scale-200 dark:bg-scale-300"
|
||||
style={{ height: '1px' }}
|
||||
@@ -417,64 +442,64 @@ export default function IndexPage() {
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="border-scale-700 dark:border-scale-400 divide-y divide-scale-700 dark:divide-scale-400">
|
||||
<tbody className="divide-y border-scale-700 dark:border-scale-400 divide-scale-700 dark:divide-scale-400">
|
||||
<tr className="divide-x divide-scale-700 dark:divide-scale-400">
|
||||
<th
|
||||
className="py-8 px-6 text-sm font-medium text-scale-900 dark:text-white text-left align-top"
|
||||
className="px-6 py-8 text-sm font-medium text-left align-top text-scale-900 dark:text-white"
|
||||
scope="row"
|
||||
>
|
||||
Pricing
|
||||
</th>
|
||||
|
||||
<td className="h-full py-8 px-6 align-top">
|
||||
<div className="relative h-full table">
|
||||
<td className="h-full px-6 py-8 align-top">
|
||||
<div className="relative table h-full">
|
||||
<span className="h1 text-scale-1200">$0</span>
|
||||
<p className="p"> /project /month</p>
|
||||
|
||||
<p className="p text-sm">Perfect for hobby projects and experiments</p>
|
||||
<p className="text-sm p">Perfect for hobby projects and experiments</p>
|
||||
|
||||
<Link href="https://app.supabase.io" as="https://app.supabase.io">
|
||||
<a>
|
||||
<Button size="medium" type="default">
|
||||
Get started
|
||||
Get Started
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="h-full py-8 px-6 align-top">
|
||||
<div className="relative h-full table">
|
||||
<td className="h-full px-6 py-8 align-top">
|
||||
<div className="relative table h-full">
|
||||
<span className="h1 text-scale-1200">$25</span>
|
||||
<p className="p"> /project /month</p>
|
||||
<p className="p"> /project /month + usage costs</p>
|
||||
|
||||
<p className="p text-sm">
|
||||
<p className="text-sm p">
|
||||
Everything you need to scale your project into production
|
||||
</p>
|
||||
|
||||
<Link href="https://app.supabase.io" as="https://app.supabase.io">
|
||||
<a>
|
||||
<Button size="medium" type="default">
|
||||
Get started
|
||||
Get Started
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="h-full py-8 px-6 align-top">
|
||||
<div className="relative h-full table">
|
||||
<span className="h1 text-scale-1200">$25</span>
|
||||
<p className="p"> /project /month plus usage costs</p>
|
||||
<td className="h-full px-6 py-8 align-top">
|
||||
<div className="relative table h-full">
|
||||
<span className="h1 text-scale-1200">Contact Us</span>
|
||||
<p className="p">for a quote</p>
|
||||
|
||||
<p className="p text-sm">
|
||||
<p className="text-sm p">
|
||||
Designated support team, account manager and technical specialist
|
||||
</p>
|
||||
|
||||
<Link href="https://app.supabase.io" as="https://app.supabase.io">
|
||||
<Link href="mailto:support@supabase.io" as="mailto:support@supabase.io">
|
||||
<a>
|
||||
<Button size="medium" type="default">
|
||||
Get started
|
||||
Contact Us
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
@@ -498,12 +523,12 @@ export default function IndexPage() {
|
||||
<PricingTableRowDesktop category={pricing.support} />
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t border-gray-200 dark:border-gray-600">
|
||||
<tr className="border-t border-scale-200 dark:border-scale-600">
|
||||
<th className="sr-only" scope="row">
|
||||
Choose your plan
|
||||
</th>
|
||||
|
||||
<td className="pt-5 px-6">
|
||||
<td className="px-6 pt-5">
|
||||
<Link href="https://app.supabase.io" as="https://app.supabase.io">
|
||||
<a>
|
||||
<Button size="medium" type="default" block>
|
||||
@@ -513,7 +538,7 @@ export default function IndexPage() {
|
||||
</Link>
|
||||
</td>
|
||||
|
||||
<td className="pt-5 px-6">
|
||||
<td className="px-6 pt-5">
|
||||
<Link href="https://app.supabase.io" as="https://app.supabase.io">
|
||||
<a>
|
||||
<Button size="medium" type="default" block>
|
||||
@@ -523,7 +548,7 @@ export default function IndexPage() {
|
||||
</Link>
|
||||
</td>
|
||||
|
||||
<td className="pt-5 px-6">
|
||||
<td className="px-6 pt-5">
|
||||
<Link href="mailto:support@supabase.io" as="mailto:support@supabase.io">
|
||||
<a>
|
||||
<Button size="medium" type="default" block>
|
||||
@@ -539,9 +564,9 @@ export default function IndexPage() {
|
||||
</div>
|
||||
|
||||
<div className="border-t dark:border-scale-600">
|
||||
<div className="container mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24">
|
||||
<div className="container relative px-6 py-16 mx-auto lg:px-16 xl:px-20 sm:py-18 md:py-24 lg:py-24">
|
||||
<h2 className="h3">Frequently asked questions</h2>
|
||||
<p className="p max-w-sm mb-4 text-base">
|
||||
<p className="max-w-sm mb-4 text-base p">
|
||||
Can't find the answer to your question, ask someone in the community either on
|
||||
our Discord or GitHub.
|
||||
</p>
|
||||
@@ -560,6 +585,7 @@ export default function IndexPage() {
|
||||
</a>
|
||||
</Link>
|
||||
<div className="mt-16">
|
||||
{/* @ts-ignore */}
|
||||
<Accordion type="bordered">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-y-10 gap-x-10">
|
||||
{pricingFaq.map((faq, i) => {
|
||||
@@ -570,7 +596,7 @@ export default function IndexPage() {
|
||||
type="bordered"
|
||||
openBehaviour="multiple"
|
||||
size="medium"
|
||||
className=" text-scale-900 dark:text-white"
|
||||
className="text-scale-900 dark:text-white"
|
||||
>
|
||||
<Accordion.Item header={faq.question} id={`faq--${i.toString()}`}>
|
||||
<ReactMarkdown>{faq.answer}</ReactMarkdown>
|
||||
|
||||
Reference in new issue
Block a user