diff --git a/apps/www/components/CodeBlock/CodeBlock.tsx b/apps/www/components/CodeBlock/CodeBlock.tsx index c6eab94235760..3d4a6c44c6da0 100644 --- a/apps/www/components/CodeBlock/CodeBlock.tsx +++ b/apps/www/components/CodeBlock/CodeBlock.tsx @@ -9,10 +9,11 @@ import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin' import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python' import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql' import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml' +import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json' import { Button, cn } from 'ui' import monokaiCustomTheme from './CodeBlock.utils' -export type LANG = 'js' | 'sql' | 'py' | 'bash' | 'ts' | 'tsx' | 'kotlin' | 'yaml' +export type LANG = 'js' | 'sql' | 'py' | 'bash' | 'ts' | 'tsx' | 'kotlin' | 'yaml' | 'json' export interface CodeBlockProps { lang: LANG startingLineNumber?: number @@ -62,6 +63,7 @@ function CodeBlock(props: CodeBlockProps) { SyntaxHighlighter.registerLanguage('bash', bash) SyntaxHighlighter.registerLanguage('kotlin', kotlin) SyntaxHighlighter.registerLanguage('yaml', yaml) + SyntaxHighlighter.registerLanguage('json', json) // const large = props.size === 'large' ? true : false const large = false diff --git a/apps/www/components/Enterprise/Security.tsx b/apps/www/components/Enterprise/Security.tsx index eb6f2f1a51c07..825ee023d5bdf 100644 --- a/apps/www/components/Enterprise/Security.tsx +++ b/apps/www/components/Enterprise/Security.tsx @@ -1,10 +1,10 @@ import React, { FC } from 'react' -import type { LucideIcon } from 'lucide-react' - import { TextLink } from 'ui' import SectionContainer from '~/components/Layouts/SectionContainer' -interface Props { +import type { LucideIcon } from 'lucide-react' + +export interface SecuritySectionProps { id: string label: string | JSX.Element heading: string | JSX.Element @@ -27,7 +27,7 @@ type FeatureProps = { heading: string } -const EnterpriseSecurity: FC = (props) => { +const EnterpriseSecurity: FC = (props) => { return ( {
-
-
+
+
{
-
-
+
+
{footerData.map((segment) => { return (
diff --git a/apps/www/components/Hero/HeroFrameworks.tsx b/apps/www/components/Hero/HeroFrameworks.tsx index 55cc6a5fc1f50..db7a2a87cfff6 100644 --- a/apps/www/components/Hero/HeroFrameworks.tsx +++ b/apps/www/components/Hero/HeroFrameworks.tsx @@ -13,56 +13,56 @@ type Framework = { docs: string } -const frameworks: Framework[] = [ +export const frameworks: Framework[] = [ { name: 'React', icon: 'M45.74 23.6983C45.2739 23.5379 44.7909 23.3861 44.2937 23.2426C44.3754 22.909 44.4504 22.5798 44.5171 22.2561C45.6119 16.9418 44.8961 12.6605 42.4518 11.2509C40.1079 9.89927 36.2748 11.3085 32.4035 14.6776C32.0313 15.0016 31.6579 15.3446 31.2848 15.704C31.0362 15.4662 30.7879 15.2364 30.5403 15.0165C26.4831 11.4141 22.4164 9.89599 19.9744 11.3097C17.6329 12.6652 16.9394 16.69 17.9249 21.7265C18.0201 22.2129 18.1313 22.7097 18.2571 23.2148C17.6816 23.3782 17.1259 23.5524 16.5943 23.7377C11.8376 25.3961 8.7998 27.9952 8.7998 30.6911C8.7998 33.4755 12.0609 36.2683 17.0153 37.9617C17.4063 38.0953 17.812 38.2217 18.2301 38.3416C18.0944 38.8879 17.9763 39.4232 17.8773 39.9454C16.9376 44.8944 17.6714 48.8242 20.0068 50.1711C22.4189 51.5622 26.4673 50.1324 30.4093 46.6865C30.7209 46.4141 31.0336 46.1253 31.3469 45.8225C31.7529 46.2135 32.1582 46.5835 32.5615 46.9306C36.3798 50.2164 40.151 51.5432 42.4842 50.1925C44.894 48.7975 45.6772 44.576 44.6604 39.4399C44.5828 39.0476 44.4924 38.6469 44.3909 38.239C44.6752 38.155 44.9543 38.0682 45.2265 37.978C50.3771 36.2715 53.7282 33.5127 53.7282 30.6911C53.7282 27.9854 50.5924 25.3688 45.74 23.6983ZM44.6228 36.1561C44.3772 36.2375 44.1251 36.3161 43.8682 36.3923C43.2996 34.5922 42.5322 32.6781 41.5931 30.7005C42.4893 28.7699 43.227 26.8803 43.7797 25.0919C44.2393 25.2249 44.6854 25.3651 45.1152 25.5132C49.2728 26.9444 51.8089 29.0605 51.8089 30.6911C51.8089 32.4279 49.07 34.6826 44.6228 36.1561ZM42.7776 39.8126C43.2272 42.0837 43.2914 44.1371 42.9936 45.7423C42.726 47.1847 42.1878 48.1463 41.5225 48.5315C40.1066 49.351 37.0787 48.2857 33.8132 45.4757C33.4388 45.1535 33.0618 44.8096 32.6835 44.4455C33.9495 43.061 35.2147 41.4514 36.4495 39.6638C38.6215 39.4711 40.6735 39.156 42.5344 38.7258C42.626 39.0955 42.7074 39.4581 42.7776 39.8126ZM24.1169 48.3898C22.7336 48.8784 21.6318 48.8924 20.9658 48.5084C19.5486 47.691 18.9594 44.5358 19.7631 40.3033C19.8551 39.8186 19.9647 39.3207 20.091 38.8118C21.9314 39.2187 23.9684 39.5116 26.1456 39.6881C27.3887 41.4373 28.6905 43.0452 30.0024 44.453C29.7157 44.7297 29.4302 44.9931 29.1463 45.2413C27.4032 46.7651 25.6564 47.8461 24.1169 48.3898ZM17.6361 36.1455C15.4453 35.3967 13.6361 34.4235 12.396 33.3616C11.2817 32.4073 10.7191 31.4599 10.7191 30.6911C10.7191 29.0551 13.1581 26.9684 17.226 25.5501C17.7196 25.378 18.2363 25.2158 18.7725 25.0635C19.3347 26.8923 20.0722 28.8043 20.9623 30.7378C20.0607 32.7 19.3128 34.6425 18.745 36.4927C18.3628 36.3829 17.9924 36.2672 17.6361 36.1455ZM19.8085 21.3579C18.9642 17.0428 19.5249 13.7876 20.936 12.9708C22.4391 12.1006 25.7628 13.3413 29.2659 16.4518C29.4898 16.6506 29.7146 16.8587 29.9401 17.074C28.6347 18.4756 27.3448 20.0714 26.1127 21.8103C23.9997 22.0061 21.977 22.3208 20.1174 22.742C20.0004 22.2717 19.8969 21.8097 19.8085 21.3579ZM39.1886 26.1433C38.744 25.3754 38.2876 24.6257 37.8223 23.8964C39.2558 24.0777 40.6293 24.3182 41.9191 24.6126C41.5318 25.8536 41.0492 27.1511 40.4811 28.4813C40.0735 27.7076 39.6425 26.9275 39.1886 26.1433ZM31.2854 18.4456C32.1707 19.4047 33.0573 20.4756 33.9293 21.6374C33.0506 21.5959 32.161 21.5743 31.264 21.5743C30.3755 21.5743 29.4925 21.5954 28.6192 21.6362C29.4921 20.4852 30.3863 19.4158 31.2854 18.4456ZM23.3317 26.1566C22.8876 26.9267 22.4645 27.7025 22.0634 28.4799C21.5045 27.1543 21.0263 25.8509 20.6357 24.5923C21.9176 24.3054 23.2846 24.0709 24.7089 23.8931C24.2371 24.6291 23.7769 25.3843 23.3317 26.1564V26.1566ZM24.75 37.626C23.2783 37.4618 21.8908 37.2394 20.6093 36.9604C21.0061 35.6793 21.4948 34.3481 22.0655 32.994C22.4677 33.7707 22.8925 34.5469 23.3393 35.3187H23.3393C23.7945 36.1049 24.266 36.875 24.75 37.626ZM31.3385 43.0719C30.4289 42.0904 29.5215 41.0047 28.6353 39.8368C29.4956 39.8706 30.3726 39.8879 31.264 39.8879C32.1798 39.8879 33.085 39.8672 33.9761 39.8276C33.1012 41.0164 32.2178 42.1038 31.3385 43.0719ZM40.4994 32.9249C41.0999 34.2937 41.6061 35.618 42.0081 36.8772C40.7054 37.1744 39.2989 37.4138 37.8171 37.5916C38.2835 36.8525 38.7439 36.0899 39.1963 35.3055C39.6539 34.5118 40.0885 33.717 40.4994 32.9249ZM37.5337 34.3466C36.8314 35.5643 36.1104 36.7268 35.3784 37.8241C34.0452 37.9194 32.6678 37.9685 31.264 37.9685C29.8659 37.9685 28.5058 37.9251 27.1962 37.8401C26.4347 36.7284 25.698 35.5625 25.0002 34.3571H25.0004C24.3044 33.155 23.6638 31.9427 23.0834 30.7372C23.6636 29.5289 24.3025 28.3152 24.9945 27.1152L24.9944 27.1155C25.6882 25.9123 26.4184 24.7521 27.1729 23.6473C28.509 23.5463 29.8792 23.4936 31.2639 23.4936H31.264C32.655 23.4936 34.0269 23.5467 35.3626 23.6486C36.1056 24.7453 36.8308 25.9017 37.5274 27.1051C38.2319 28.3219 38.879 29.5275 39.4642 30.7099C38.8808 31.9126 38.2351 33.1303 37.5337 34.3466ZM41.4931 12.9137C42.9976 13.7813 43.5826 17.2804 42.6374 21.8688C42.5771 22.1615 42.5092 22.4597 42.4354 22.762C40.5715 22.3319 38.5474 22.0118 36.4282 21.813C35.1937 20.055 33.9143 18.4567 32.6302 17.0731C32.9755 16.741 33.3202 16.4243 33.6636 16.1254C36.9805 13.2388 40.0806 12.0991 41.4931 12.9137ZM31.264 26.6791C33.4797 26.6791 35.276 28.4753 35.276 30.6911C35.276 32.9068 33.4797 34.703 31.264 34.703C29.0483 34.703 27.252 32.9068 27.252 30.6911C27.252 28.4753 29.0483 26.6791 31.264 26.6791Z', - docs: '/docs/guides/getting-started/quickstarts/reactjs', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/reactjs', }, { name: 'Next.js', icon: 'M42.3148 48.6796C38.9009 50.9525 34.8014 52.2771 30.3924 52.2771C18.4957 52.2771 8.85156 42.6329 8.85156 30.7362C8.85156 18.8395 18.4957 9.19531 30.3924 9.19531C42.2891 9.19531 51.9333 18.8395 51.9333 30.7362C51.9333 37.1564 49.1245 42.9207 44.6688 46.8671L39.5552 40.2803V21.8278H36.584V36.4531L25.2299 21.8278H21.4808V39.6473H24.4801V25.6368L42.3148 48.6796Z', - docs: '/docs/guides/getting-started/quickstarts/nextjs', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/nextjs', }, { name: 'RedwoodJS', icon: 'M21.7716 14.6475L31.2847 21.1184C31.4993 21.2609 31.7501 21.3389 32.0076 21.3434C32.2654 21.3415 32.5167 21.2633 32.7304 21.1184L42.2508 14.6257C42.6207 14.3618 42.8247 13.9218 42.7876 13.4678C42.7505 13.0139 42.4779 12.6131 42.0701 12.4131L32.5569 7.71949C32.1961 7.545 31.7757 7.545 31.4147 7.71949L21.9306 12.4131C21.5154 12.6141 21.2392 13.0227 21.2063 13.4841C21.1735 13.9455 21.3891 14.3893 21.7716 14.6475ZM35.2389 23.1497C35.2396 23.5789 35.4504 23.9801 35.8027 24.2233L43.4291 29.4176C43.9173 29.7529 44.5705 29.7111 45.0123 29.316L51.4098 23.614C51.6948 23.3601 51.8531 22.9925 51.8419 22.6102C51.8309 22.2279 51.6513 21.8702 51.3519 21.6335L45.2436 16.7658C44.7995 16.4143 44.1802 16.3908 43.711 16.7078L35.8027 22.0978C35.4566 22.3366 35.2466 22.7283 35.2389 23.1497ZM16.2704 30.2155C16.5786 30.4914 16.7371 30.8984 16.6969 31.311C16.6569 31.7258 16.4164 32.0946 16.0536 32.2975L11.4994 35.0179C11.0377 35.2929 10.4548 35.2533 10.0344 34.9183C9.61395 34.5834 9.44327 34.0226 9.60544 33.509L11.2898 28.2278C11.4219 27.8093 11.7568 27.4869 12.1789 27.3718C12.6007 27.2494 13.0555 27.3567 13.3789 27.6547L16.2704 30.2155ZM40.9712 30.7668L32.7377 25.1519C32.3001 24.8585 31.7295 24.8585 31.2919 25.1519L23.0582 30.7668C22.7308 30.9927 22.5234 31.3557 22.4945 31.7534C22.4731 32.154 22.6323 32.5428 22.9282 32.8126L31.1545 40.1468C31.3918 40.3577 31.6979 40.4738 32.0148 40.4732C32.3315 40.4731 32.6375 40.3571 32.875 40.1468L41.1014 32.8126C41.3981 32.544 41.5553 32.1535 41.5279 31.7534C41.5049 31.3557 41.2993 30.9912 40.9712 30.7668ZM19.0101 29.316L12.6199 23.614C12.3323 23.3537 12.1736 22.9795 12.1861 22.5911C12.1931 22.2083 12.3708 21.8488 12.6705 21.6118L18.7788 16.715C19.2259 16.3645 19.8465 16.3411 20.3185 16.657L28.2197 22.047C28.5863 22.2867 28.8075 22.696 28.8075 23.1352C28.8075 23.5743 28.5863 23.9837 28.2197 24.2233L20.6005 29.4175C20.1093 29.7514 19.4552 29.7097 19.0101 29.316ZM51.8218 37.5062L45.3158 33.625C44.8326 33.3349 44.2176 33.3937 43.7977 33.7702L35.8461 40.8432C35.5106 41.1418 35.3531 41.5933 35.4296 42.0366C35.5063 42.4798 35.8059 42.8518 36.2219 43.0196L47.2531 47.4738C47.4044 47.5365 47.5666 47.5686 47.7302 47.5681C48.2422 47.5697 48.7069 47.2683 48.9158 46.7991L52.335 39.1675C52.6132 38.5636 52.3917 37.8462 51.8218 37.5062ZM52.7253 28.2278L54.4097 33.509H54.3952C54.5198 33.904 54.449 34.3351 54.2047 34.669C53.9604 35.0031 53.572 35.2 53.159 35.1993C52.9275 35.2 52.7 35.1374 52.5013 35.018L47.9399 32.2975C47.5844 32.0904 47.3524 31.722 47.3182 31.311C47.2755 30.8981 47.4344 30.49 47.7447 30.2155L50.6362 27.6474C50.9629 27.3558 51.4143 27.2493 51.8362 27.3645C52.258 27.4846 52.5918 27.8088 52.7253 28.2278ZM28.5955 42.033C28.6733 41.5915 28.5174 41.1412 28.1835 40.8432L20.2318 33.7702C19.8119 33.3937 19.1969 33.3349 18.7138 33.625L12.2078 37.5062C11.6445 37.8477 11.4216 38.556 11.6873 39.1603L15.1138 46.7919C15.3977 47.4283 16.1316 47.7261 16.7764 47.4666L27.8004 43.0124C28.2165 42.846 28.5173 42.4755 28.5955 42.033ZM32.4991 44.2093L41.3472 47.7785C41.7799 47.963 42.0787 48.3684 42.128 48.8376C42.184 49.3127 41.9722 49.7795 41.5785 50.0491L32.7232 56.1791C32.511 56.3277 32.2591 56.4086 32.0003 56.4113C31.7418 56.4073 31.4903 56.3265 31.2774 56.1791L22.4294 50.0491C22.0343 49.7802 21.82 49.3139 21.8728 48.8376C21.9318 48.3636 22.2414 47.9586 22.6824 47.7785L31.5305 44.2093C31.8416 44.0856 32.188 44.0856 32.4991 44.2093Z', - docs: '/docs/guides/getting-started/quickstarts/redwoodjs', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/redwoodjs', }, { name: 'Flutter', icon: `M46.5067 10.3828L34.3509 10.3962L14.75 29.9971L20.7974 36.0519L26.1125 30.7666L46.5067 10.3828Z M34.6996 28.4653C34.5272 28.4573 34.3493 28.4491 34.2378 28.5965L23.7856 39.0471L29.7894 45.0142L29.7825 45.021L34.079 49.3212C34.1072 49.3462 34.1352 49.3741 34.1637 49.4026C34.2813 49.5201 34.4074 49.6462 34.5895 49.6055C36.5743 49.601 38.5591 49.6017 40.544 49.6025C42.529 49.6032 44.5142 49.604 46.4998 49.5995L35.9333 39.0234L46.4963 28.467L34.906 28.464C34.8415 28.4719 34.7711 28.4686 34.6996 28.4653Z`, - docs: '/docs/guides/getting-started/quickstarts/flutter', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/flutter', }, { name: 'Kotlin', icon: `M51.7395 51.7398H12.2598V12.2601H51.7395L31.591 31.7137L51.7395 51.7398Z`, - docs: '/docs/guides/getting-started/quickstarts/kotlin', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/kotlin', }, { name: 'Svelte', icon: 'M29.9094 11.2292C35.956 7.37668 44.3187 9.17299 48.553 15.2334H48.5532C50.5831 18.0746 51.3826 21.614 50.771 25.0519C50.4778 26.677 49.8581 28.2259 48.9493 29.6047C50.2752 32.1335 50.7201 35.0322 50.2136 37.8422C49.6086 41.2154 47.6106 44.1777 44.7096 46.0024L34.0903 52.7707C28.0445 56.623 19.6818 54.8274 15.4466 48.7665C13.4171 45.9251 12.6176 42.3859 13.2288 38.948C13.5223 37.3227 14.1422 35.7738 15.0512 34.3949C13.7247 31.8665 13.2794 28.9677 13.786 26.1577C14.3913 22.7845 16.3893 19.8223 19.29 17.9974L29.9094 11.2292ZM19.8146 45.9861C21.8311 48.8931 25.4469 50.2333 28.8709 49.343H28.8708C29.6345 49.139 30.3624 48.8192 31.0293 48.3946L41.6512 41.6252C43.396 40.5274 44.5979 38.7455 44.9622 36.7164C45.33 34.6483 44.8489 32.5192 43.6278 30.8101C41.6113 27.9032 37.9955 26.5629 34.5715 27.4531C33.8084 27.6571 33.081 27.9768 32.4147 28.4012L28.3617 30.9842C28.1601 31.1125 27.9401 31.2092 27.7093 31.271C26.6776 31.5384 25.5887 31.1342 24.9815 30.2584C24.614 29.7429 24.4693 29.1012 24.5801 28.4779C24.6899 27.8669 25.0519 27.3302 25.5774 26.9996L36.2002 20.2298C36.4017 20.1015 36.6218 20.0048 36.8526 19.9431C37.8838 19.6754 38.9725 20.0795 39.5793 20.9551C39.9039 21.4146 40.0556 21.974 40.0078 22.5345L39.9714 22.9285L40.3662 23.0484C41.8596 23.4989 43.265 24.2014 44.5218 25.1254L45.0657 25.5245L45.2658 24.9145C45.3729 24.59 45.4577 24.2586 45.5196 23.9225C45.8873 21.8544 45.4063 19.7254 44.1852 18.0162C42.1687 15.1093 38.553 13.7691 35.129 14.6593C34.3653 14.8633 33.6374 15.1832 32.9705 15.6077L22.3487 22.3777C20.6036 23.475 19.4016 25.2568 19.0376 27.2858C18.6699 29.3539 19.1509 31.4829 20.372 33.192C22.3885 36.099 26.0043 37.4392 29.4283 36.549C30.1914 36.345 30.9188 36.0256 31.5853 35.6017L35.6389 33.0177C35.8402 32.8895 36.06 32.7929 36.2905 32.7311C37.3221 32.4637 38.4111 32.868 39.0183 33.7438C39.3857 34.2592 39.5306 34.9007 39.4205 35.524C39.3102 36.1352 38.948 36.6718 38.4224 37.0028L27.7996 43.7722C27.5981 43.9006 27.378 43.9973 27.1471 44.059C26.116 44.3266 25.0273 43.9225 24.4204 43.0469C24.0955 42.5876 23.9438 42.0281 23.992 41.4675L24.0284 41.0735L23.6336 40.9537C22.1404 40.5032 20.7351 39.8011 19.4783 38.8776L18.934 38.4778L18.734 39.0878C18.6266 39.4122 18.5418 39.7437 18.4801 40.0798C18.1125 42.1479 18.5935 44.277 19.8146 45.9861Z', - docs: '/docs/guides/getting-started/quickstarts/sveltekit', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit', }, { name: 'SolidJS', icon: 'M26.7069 8.48157C39.8712 5.45973 56.8336 18.3919 56.8336 18.3919L51.0722 28.1073L50.9621 28.0856C51.0348 28.141 51.0722 28.1726 51.0722 28.1726C51.0681 28.1647 50.7083 27.8867 50.0561 27.4261C46.2099 24.7104 32.1917 15.6482 20.9454 18.2298C20.8906 18.2436 20.8351 18.2574 20.7793 18.2714C20.4417 18.3556 20.0905 18.4432 19.7867 18.5547C18.0673 19.116 16.7102 20.0163 15.7606 21.1271L15.7312 21.1213L20.5914 12.7706C20.6522 12.6724 20.7085 12.5694 20.7654 12.4654C20.8589 12.2942 20.9541 12.12 21.0742 11.9583C22.0076 10.5936 23.5204 9.45636 25.5481 8.8065C25.852 8.69497 26.2032 8.60737 26.5408 8.52316L26.5433 8.52253C26.5983 8.50882 26.6529 8.49519 26.7069 8.48157Z M19.46 32.0592L32.05 27.9448C35.8485 26.7049 40.3864 27.4446 43.8122 29.5562C43.7796 29.5338 44.8294 30.2289 44.9407 30.3542L49.7055 28.4801C49.3614 28.2446 48.0959 27.3256 47.6565 27.0394C45.8866 25.8866 43.3927 24.3844 40.4974 22.978C34.6564 20.1405 27.4046 17.8034 21.1853 19.2266L21.0193 19.2682C20.6776 19.3536 20.3877 19.4261 20.1399 19.5171L20.1225 19.5235L20.1048 19.5293C17.6631 20.3263 16.1341 21.8339 15.5155 23.5318C14.8997 25.2222 15.1285 27.2564 16.5089 29.2452C17.2625 30.3308 18.2761 31.2823 19.46 32.0592Z M41.5714 52.075L41.5772 52.087L41.5651 52.0849L41.5714 52.075Z M47.1224 40.0146L42.5493 48.2321C42.4667 46.8997 41.9832 45.5181 41.0622 44.1913C37.9723 39.7398 31.1166 37.5303 25.7414 39.2849L7.16602 45.3854L7.25332 45.1164L12.6666 35.3578L32.3681 28.9194C34.8201 28.119 37.6546 28.2128 40.2542 29.0469C42.8556 29.8816 45.136 31.4297 46.5284 33.4354C48.133 35.7496 48.1942 38.1212 47.1224 40.0146Z M9.07091 46.9944C8.63742 46.7131 8.24774 46.4532 7.90665 46.2212L26.0604 40.2592C28.5122 39.4591 31.3463 39.5529 33.9456 40.387C36.5471 41.2218 38.8277 42.77 40.2201 44.7759C41.6005 46.7647 41.8293 48.7989 41.2135 50.4893C40.5949 52.1872 39.0659 53.6948 36.6242 54.4918L36.6065 54.4976L36.5891 54.504C36.3413 54.595 36.0514 54.6675 35.7097 54.7529L35.5437 54.7946C29.3243 56.2177 22.0725 53.8806 16.231 51.047C13.3356 49.6424 10.8415 48.1431 9.07091 46.9944Z', - docs: '/docs/guides/getting-started/quickstarts/solidjs', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/solidjs', }, { name: 'Vue', icon: 'M43.0532 13.4531H50.1147L30.2756 47.8158L10.4365 13.4531H17.4978L30.2755 35.5845L43.0532 13.4531ZM42.1764 13.4531L30.2755 34.0659L18.3746 13.4531L25.6939 13.4531L30.2756 21.3888L34.8572 13.4531L42.1764 13.4531Z', - docs: '/docs/guides/getting-started/quickstarts/vue', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/vue', }, { name: 'Nuxt', icon: 'M32.5784 45.4741H50.2199C50.7802 45.4741 51.3307 45.3325 51.8159 45.0634C52.3012 44.7943 52.7041 44.4072 52.9842 43.9409C53.2642 43.4748 53.4115 42.946 53.4113 42.4078C53.4111 41.8696 53.2633 41.3409 52.9828 40.875L41.1352 21.164C40.8552 20.6979 40.4524 20.3109 39.9672 20.0418C39.4821 19.7727 38.9317 19.631 38.3715 19.631C37.8113 19.631 37.261 19.7727 36.7758 20.0418C36.2906 20.3109 35.8878 20.6979 35.6078 21.164L32.5784 26.2073L26.6555 16.3452C26.3753 15.8792 25.9723 15.4922 25.487 15.2232C25.0017 14.9541 24.4513 14.8125 23.8909 14.8125C23.3306 14.8125 22.7802 14.9541 22.2949 15.2232C21.8096 15.4922 21.4066 15.8792 21.1263 16.3452L6.38358 40.875C6.10311 41.3409 5.95532 41.8696 5.95508 42.4078C5.95483 42.946 6.10214 43.4748 6.38219 43.9409C6.66224 44.4072 7.06515 44.7943 7.5504 45.0634C8.03564 45.3325 8.58612 45.4741 9.14645 45.4741H20.2203C24.6079 45.4741 27.8436 43.6229 30.07 40.0113L38.3706 26.2073L47.0599 40.6619H35.4754L32.5784 45.4741ZM20.0398 40.657L12.3116 40.6553L23.8961 21.3836L29.6763 31.0195L25.8062 37.4599C24.3276 39.8032 22.6479 40.657 20.0398 40.657Z', - docs: '/docs/guides/getting-started/quickstarts/nuxtjs', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs', }, { name: 'Refine', icon: 'M31.7374 20.9337C32.7027 20.9337 33.6284 21.3132 34.311 21.9887C34.9936 22.6642 35.377 23.5803 35.377 24.5356V39.4661C35.377 40.4214 34.9936 41.3375 34.311 42.013C33.6284 42.6885 32.7027 43.068 31.7374 43.068C30.7721 43.068 29.8463 42.6885 29.1638 42.013C28.4812 41.3375 28.0978 40.4214 28.0978 39.4661V24.5356C28.0978 24.0626 28.1919 23.5942 28.3748 23.1572C28.5577 22.7203 28.8258 22.3232 29.1638 21.9887C29.5018 21.6543 29.903 21.3889 30.3446 21.2079C30.7861 21.0269 31.2594 20.9337 31.7374 20.9337ZM31.7371 27.1915C33.2665 27.1915 34.5063 25.9646 34.5063 24.451C34.5063 22.9375 33.2665 21.7106 31.7371 21.7106C30.2077 21.7106 28.9679 22.9375 28.9679 24.451C28.9679 25.9646 30.2077 27.1915 31.7371 27.1915Z M54.0424 32C54.0424 44.3777 44.0083 54.4118 31.6306 54.4118C19.2529 54.4118 9.21875 44.3777 9.21875 32C9.21875 19.6223 19.2529 9.58813 31.6306 9.58813C44.0083 9.58813 54.0424 19.6223 54.0424 32ZM31.7374 19.3933C30.36 19.3952 29.0396 19.9376 28.0659 20.9016C27.0921 21.8657 26.5444 23.1726 26.543 24.5356V39.4661C26.543 40.8294 27.0902 42.137 28.0644 43.101C29.0385 44.065 30.3597 44.6066 31.7374 44.6066C33.115 44.6066 34.4362 44.065 35.4104 43.101C36.3845 42.137 36.9318 40.8294 36.9318 39.4661V24.5356C36.9304 23.1726 36.3827 21.8657 35.4089 20.9016C34.4352 19.9376 33.1148 19.3952 31.7374 19.3933Z', - docs: '/docs/guides/getting-started/quickstarts/refine', + docs: 'https://supabase.com/docs/guides/getting-started/quickstarts/refine', }, ] diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx index 8ed1e8955abc2..31d9b68f06d20 100644 --- a/apps/www/components/Nav/MobileMenu.tsx +++ b/apps/www/components/Nav/MobileMenu.tsx @@ -97,11 +97,11 @@ const MobileMenu = ({ open, setOpen, menu }: Props) => { ) : menuItem.title === 'Developers' ? ( -
+
{menuItem.subMenu['navigation'].map((column: any) => (
{column.label !== 'Developers' && ( -
+ ) : menuItem.title === 'Solutions' ? ( +
+ {menuItem.subMenu['navigation'].map((column: any) => ( +
+ {column.label !== 'Solutions' && ( + + )} + {column.links.map((link: any) => ( + + ))} +
+ ))} +
) : null} ) diff --git a/apps/www/components/Nav/ProductDropdown.tsx b/apps/www/components/Nav/ProductDropdown.tsx index 4760f5bc86b5a..7a17acb5be7ed 100644 --- a/apps/www/components/Nav/ProductDropdown.tsx +++ b/apps/www/components/Nav/ProductDropdown.tsx @@ -9,11 +9,10 @@ import { TextLink } from 'ui' import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu' import MenuItem from './MenuItem' -import ComparisonsData from '~/data/Comparisons' -import SolutionsData from '~/data/Solutions' -import CustomersData from '~/data/CustomerStories' -import MainProductsData from '~/data/MainProducts' -import ProductModulesData from '~/data/ProductModules' +import ComparisonsData from 'data/Comparisons' +import CustomersData from 'data/CustomerStories' +import MainProductsData from 'data/MainProducts' +import ProductModulesData from 'data/ProductModules' const ProductDropdown = () => { const { basePath } = useRouter() @@ -178,23 +177,6 @@ const ProductDropdown = () => { ))}
-
-

- {SolutionsData.label} -

-
    - {SolutionsData.solutions.map((link) => ( -
  • - -
    • - ))} -
-
diff --git a/apps/www/components/Nav/SolutionsDropdown.tsx b/apps/www/components/Nav/SolutionsDropdown.tsx new file mode 100644 index 0000000000000..820bca189d234 --- /dev/null +++ b/apps/www/components/Nav/SolutionsDropdown.tsx @@ -0,0 +1,45 @@ +import { ChevronRight } from 'lucide-react' +import Link from 'next/link' + +import { navData as DevelopersData } from 'data/Solutions' + +type LinkProps = { + text: string + description?: string + url?: string + icon?: any + svg?: any +} + +const SolutionsDropdown = () => ( +
+
+ {DevelopersData['navigation'].map((column) => ( +
+ +
    + {column.links.map(({ icon: Icon, ...link }: LinkProps) => ( +
  • + + {Icon && } + {link.text} + + +
    • + ))} +
+
+ ))} +
+
+) + +export default SolutionsDropdown diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx index acf6ac95b1612..ad9daf0ca5976 100644 --- a/apps/www/components/Nav/index.tsx +++ b/apps/www/components/Nav/index.tsx @@ -25,7 +25,6 @@ import RightClickBrandLogo from './RightClickBrandLogo' import { useSendTelemetryEvent } from '~/lib/telemetry' import useDropdownMenu from './useDropdownMenu' import { AnnouncementBanner, AuthenticatedDropdownMenu } from 'ui-patterns' -import Announcement from '../LaunchWeek/7/LaunchSection/Announcement' interface Props { hideNavbar: boolean diff --git a/apps/www/components/Pricing/ComputePricingCalculator.tsx b/apps/www/components/Pricing/ComputePricingCalculator.tsx index 117acd1918ac2..f292b596f9fc8 100644 --- a/apps/www/components/Pricing/ComputePricingCalculator.tsx +++ b/apps/www/components/Pricing/ComputePricingCalculator.tsx @@ -30,7 +30,7 @@ const findIntanceValueByColumn = (instance: any, column: string) => const parsePrice = (price: string) => parseInt(price?.toString().replace('$', '').replace(',', '')) -const ComputePricingCalculator = () => { +const ComputePricingCalculator = ({ disableInteractivity }: { disableInteractivity?: boolean }) => { const computeInstances = pricingAddOn.database.rows const priceSteps = computeInstances.map((instance) => parsePrice(findIntanceValueByColumn(instance, 'pricing')) @@ -290,12 +290,13 @@ const ComputePricingCalculator = () => { type="outline" block icon={} - onClick={() => + onClick={() => { + if (disableInteractivity) return setActiveInstances([ ...activeInstances, { ...computeInstances[0], position: activeInstances.length }, ]) - } + }} className="w-full border-dashed text-foreground-light hover:text-foreground" > Add Project diff --git a/apps/www/components/Products/DatabaseVisual.tsx b/apps/www/components/Products/DatabaseVisual.tsx index d60daf4acdfcf..be666d0575079 100644 --- a/apps/www/components/Products/DatabaseVisual.tsx +++ b/apps/www/components/Products/DatabaseVisual.tsx @@ -5,16 +5,17 @@ import { cn } from 'ui' interface Props { className?: string + hasGlow?: boolean } -const DatabaseVisual: React.FC = ({ className }) => { +const DatabaseVisual: React.FC = ({ className, hasGlow = true }) => { const containerRef = useRef(null) const ref = useRef(null) const [gradientPos, setGradientPos] = useState({ x: 0, y: 0 }) const isSafari = isBrowser && detectBrowser() === 'Safari' const handleGlow = (event: any) => { - if (!ref.current || !containerRef.current) return null + if (!ref.current || !containerRef.current || !hasGlow) return null const containerRefElement = containerRef.current as HTMLDivElement @@ -59,7 +60,7 @@ const DatabaseVisual: React.FC = ({ className }) => { role="img" aria-label="Supabase Postgres database visual composition" > - + Supabase Postgres database = ({ className }) => { priority quality={100} sizes="100%" + draggable={false} className="hidden dark:block absolute antialiased inset-0 object-contain object-center z-0 w-full md:w-auto h-full transition-opacity group-hover:opacity-80" /> = ({ className }) => { fill priority quality={100} + draggable={false} sizes="100%" className="dark:hidden absolute antialiased inset-0 object-contain object-center z-0 w-full md:w-auto h-full transition-opacity group-hover:opacity-80" /> diff --git a/apps/www/components/Sections/APISection.tsx b/apps/www/components/Sections/APISection.tsx index 6ed8b6d8e60ea..892b7c7f07e0b 100644 --- a/apps/www/components/Sections/APISection.tsx +++ b/apps/www/components/Sections/APISection.tsx @@ -5,23 +5,25 @@ import Link from 'next/link' import { useState } from 'react' import { Swiper, SwiperSlide } from 'swiper/react' import { Button, Tabs } from 'ui' -import CodeBlock from '../CodeBlock/CodeBlock' +import CodeBlock, { LANG } from '../CodeBlock/CodeBlock' import { ArrowUpRight } from 'lucide-react' -interface Example { - lang: 'js' | 'py' | 'sql' +export interface APIExample { + lang: LANG title: string code: string } interface Props { size?: 'small' | 'large' - content: Example[] + content: APIExample[] title: string | React.ReactNode footer?: React.ReactNode text?: React.ReactNode autoHeight?: boolean documentation_link?: string + showLineNumbers?: boolean + ctaLabel?: string } function APISection(props: Props) { @@ -38,12 +40,12 @@ function APISection(props: Props) { return (
-

{props.title}

+

{props.title}

{props.text}
{props.documentation_link && ( )} @@ -56,7 +58,7 @@ function APISection(props: Props) { onChange={(id: string) => handleApiSwiperNavChange(Number(id))} > {props.content && - props.content.map((content: Example, i) => ( + props.content.map((content: APIExample, i) => ( @@ -75,9 +77,14 @@ function APISection(props: Props) { autoHeight={props.autoHeight ? props.autoHeight : false} > {props.content && - props.content.map((content: Example, i) => ( + props.content.map((content: APIExample, i) => ( - + {content.code} diff --git a/apps/www/components/Sections/ProductHeader2.tsx b/apps/www/components/Sections/ProductHeader2.tsx index 4c73b76503637..c59899c58eef0 100644 --- a/apps/www/components/Sections/ProductHeader2.tsx +++ b/apps/www/components/Sections/ProductHeader2.tsx @@ -15,13 +15,13 @@ interface Props { title?: string image?: React.ReactNode footer?: React.ReactNode - footerPosition?: 'bottom' | 'left' + footerPosition?: 'left' | 'bottom' | 'right' ctas?: CTA[] className?: string sectionContainerClassName?: string } -const ProductHeader = (props: Props) => ( +const ProductHeader = ({ footerPosition = 'left', ...props }: Props) => (
( )}
{props.ctas?.map((cta) => ( - ))}
- {props.footer && props.footerPosition === 'left' && ( + {props.footer && footerPosition === 'left' && (
{props.footer}
@@ -77,7 +83,7 @@ const ProductHeader = (props: Props) => ( {props.image}
)} - {props.footer && props.footerPosition !== 'left' && ( + {props.footer && footerPosition !== 'left' && (
{props.footer}
diff --git a/apps/www/components/Solutions/AIBuildersLogos.tsx b/apps/www/components/Solutions/AIBuildersLogos.tsx index 8cd7944d8dbf5..461902b21669a 100644 --- a/apps/www/components/Solutions/AIBuildersLogos.tsx +++ b/apps/www/components/Solutions/AIBuildersLogos.tsx @@ -53,7 +53,6 @@ const EnterpriseLogos: React.FC = ({ className }) => { 'flex lg:grid grid-cols-2 xl:flex flex-nowrap gap-4 md:gap-8 lg:gap-4 2xl:gap-8', className )} - suppressHydrationWarning > {logos.map((logo) => ( = ({ className }) => { h-10 !min-h-10 md:h-10 md:!min-h-10 lg:h-7 lg:!min-h-7 - 2xl:h-12 2xl:!min-h-12 + 2xl:h-10 2xl:!min-h-10 " draggable={false} /> diff --git a/apps/www/components/Solutions/DeveloperExperienceSection.tsx b/apps/www/components/Solutions/DeveloperExperienceSection.tsx index d74aa6e349168..1c5a4a3fff106 100644 --- a/apps/www/components/Solutions/DeveloperExperienceSection.tsx +++ b/apps/www/components/Solutions/DeveloperExperienceSection.tsx @@ -17,7 +17,7 @@ interface Feature { alignLeft?: boolean } -interface Props { +export interface DXSectionProps { id: string title: string | React.ReactNode subheading: string @@ -25,7 +25,13 @@ interface Props { className?: string } -const DeveloperExperienceSection = ({ id, title, subheading, features, className }: Props) => { +const DeveloperExperienceSection = ({ + id, + title, + subheading, + features, + className, +}: DXSectionProps) => { return (
diff --git a/apps/www/components/Solutions/FeatureGrid.tsx b/apps/www/components/Solutions/FeatureGrid.tsx index 0006501e10d42..927113f680995 100644 --- a/apps/www/components/Solutions/FeatureGrid.tsx +++ b/apps/www/components/Solutions/FeatureGrid.tsx @@ -11,13 +11,13 @@ interface Feature { className?: string } -interface Props { +export interface FeatureGridProps { id: string features: Feature[] className?: string } -const FeatureGrid = ({ id, features, className }: Props) => { +const FeatureGrid = ({ id, features, className }: FeatureGridProps) => { return (
= (props) => { return ( -
+
{props.label}

{props.heading}

+ {props.subheading &&

{props.subheading}

}
    { + return ( + + {subheading}

    ]} + footer={[ +
    + {frameworks?.map((framework) => ( + + ))} +
    , + ]} + documentation_link={documentationLink} + ctaLabel={ctaLabel} + /> +     + ) +} + +const FrameworkLink = ({ + framework, + className, +}: { + framework: FrameworkLinkProps + className?: string +}) => { + const isXs = useBreakpoint(640) + + return ( + +
    + {typeof framework.icon === 'string' ? ( + + + + ) : ( + framework.icon + )} +
    + + {framework.name} + + + ) +} + +export default MPCSection diff --git a/apps/www/components/Solutions/PlatformSection.tsx b/apps/www/components/Solutions/PlatformSection.tsx index d184cb1935301..ca30a873a17a9 100644 --- a/apps/www/components/Solutions/PlatformSection.tsx +++ b/apps/www/components/Solutions/PlatformSection.tsx @@ -8,7 +8,7 @@ interface Feature { subheading: string | React.ReactNode highlights?: string | React.ReactNode url?: string - icon?: string + icon?: string | React.ReactNode image?: any className?: string onClick?: any @@ -16,7 +16,7 @@ interface Feature { isDatabase?: boolean } -interface Props { +export interface PlatformSectionProps { id?: string title: string | React.ReactNode subheading: string @@ -24,7 +24,7 @@ interface Props { className?: string } -const PlatformSection = ({ title, subheading, features, id, className }: Props) => { +const PlatformSection = ({ title, subheading, features, id, className }: PlatformSectionProps) => { return (
    @@ -69,28 +69,31 @@ const FeatureCard = ({ feature }: { feature: Feature }) => { )} >
    - {feature.icon && ( - - - - )} + {feature.icon && + (typeof feature.icon === 'string' ? ( + + + + ) : ( + feature.icon + ))}

    {feature.title}

    -

    {feature.subheading}

    +

    {feature.subheading}

    {feature.highlights && ( = (props) => ( diff --git a/apps/www/components/Solutions/ResultsSection.tsx b/apps/www/components/Solutions/ResultsSection.tsx index 7eff82f453ce4..f7f8c52a489c6 100644 --- a/apps/www/components/Solutions/ResultsSection.tsx +++ b/apps/www/components/Solutions/ResultsSection.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react' import { cn, Badge } from 'ui' import SectionContainer from '~/components/Layouts/SectionContainer' -interface Props { +export interface ResultsSectionProps { id: string heading: string | JSX.Element subheading: string | JSX.Element @@ -14,7 +14,7 @@ type Highlight = { subheading: string } -const ResultsSection: FC = (props) => { +const ResultsSection: FC = (props) => { return (
    diff --git a/apps/www/components/Solutions/TwoColumnsSection.tsx b/apps/www/components/Solutions/TwoColumnsSection.tsx new file mode 100644 index 0000000000000..4731b2f3a9fb5 --- /dev/null +++ b/apps/www/components/Solutions/TwoColumnsSection.tsx @@ -0,0 +1,113 @@ +import React, { useState } from 'react' +import Link from 'next/link' +import { ArrowUpRight, Check, Copy } from 'lucide-react' +import { Button, cn, TextLink, Tooltip, TooltipContent, TooltipTrigger } from 'ui' +import SectionContainer from 'components/Layouts/SectionContainer' + +interface AIPrompt { + id: string + title: string + code: string + language: string + docsUrl?: string + copyable?: boolean +} + +export interface TwoColumnsSectionProps { + heading: string | React.ReactNode + subheading?: string + id?: string + docsUrl?: string + className?: string + aiPrompts: AIPrompt[] + leftFooter?: React.ReactNode + headingRight?: string | React.ReactNode +} + +const CodeSnippet = ({ prompt }: { prompt: AIPrompt }) => { + const [text, setText] = useState('copy') + + function updateCopyStatus() { + if (text === 'copy') { + setText(() => 'copied') + setTimeout(() => { + setText(() => 'copy') + }, 1000) + } + } + + return ( +
    +
    +

    {prompt.title}

    + {prompt.docsUrl && ( + + + + )} +
    +
    + {prompt.copyable && ( + + + + + Copy to clipboard + + )} + 
    +          {prompt.code}
+
    +
    +
    + ) +} + +const TwoColumnsSection = ({ + heading, + subheading, + docsUrl, + id, + className, + aiPrompts, + leftFooter, + headingRight, +}: TwoColumnsSectionProps) => { + return ( + +
    +
    +

    {heading}

    + {subheading &&

    {subheading}

    } + {leftFooter && leftFooter} +
    + +
    + {headingRight &&

    {headingRight}

    } +
    + {aiPrompts.map((prompt) => ( + + ))} +
    + + {docsUrl && ( +
    + +
    + )} +
    +
    +     + ) +} + +export default TwoColumnsSection diff --git a/apps/www/components/Solutions/Videos.tsx b/apps/www/components/Solutions/Videos.tsx index d56ffbb69a6bd..8ab98a0b2b5e8 100644 --- a/apps/www/components/Solutions/Videos.tsx +++ b/apps/www/components/Solutions/Videos.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react' import SectionContainer from '~/components/Layouts/SectionContainer' import Panel from '../Panel' -import type { Testimonials } from '~/data/solutions/solutions.types' +import type { Testimonials } from '~/data/solutions/solutions.utils' export type Story = { url: string diff --git a/apps/www/components/SolutionsStickyNav.tsx b/apps/www/components/SolutionsStickyNav.tsx new file mode 100644 index 0000000000000..252daeb4a5e7c --- /dev/null +++ b/apps/www/components/SolutionsStickyNav.tsx @@ -0,0 +1,116 @@ +import React from 'react' +import { ChevronDown } from 'lucide-react' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { + Button, + cn, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from 'ui' + +import SectionContainer from 'components/Layouts/SectionContainer' +import { SolutionTypes, skillBasedSolutions, useCaseSolutions } from 'data/Solutions' + +interface Props { + activeItem: SolutionTypes + className?: string + type?: 'skill-based' | 'use-case' +} + +function SolutionsStickyNav({ type, activeItem, className }: Props) { + const router = useRouter() + const solutions = + type === 'skill-based' ? skillBasedSolutions.solutions : useCaseSolutions.solutions + const items = solutions.map((solution: any) => ({ + id: solution.id, + name: solution.text, + href: solution.url, + icon: solution.icon, + })) + + const activeSolution = items.find((item) => item.id === activeItem) + + return ( + <> +
    + +
    +
    + + ) +} + +export default SolutionsStickyNav diff --git a/apps/www/components/TwitterSocialSection.tsx b/apps/www/components/TwitterSocialSection.tsx index c0bd413191157..43b3b8d48d445 100644 --- a/apps/www/components/TwitterSocialSection.tsx +++ b/apps/www/components/TwitterSocialSection.tsx @@ -1,61 +1,26 @@ -import Link from 'next/link' -import { MessageCircle } from 'lucide-react' -import { Button } from 'ui' import SectionContainer from './Layouts/SectionContainer' import TwitterSocialProof from './Sections/TwitterSocialProof' import TwitterSocialProofMobile from './Sections/TwitterSocialProofMobile' -import Tweets from '~/data/tweets/Tweets.json' -import { useSendTelemetryEvent } from '~/lib/telemetry' - -const TwitterSocialSection = () => { - const tweets = Tweets.slice(0, 18) - const sendTelemetryEvent = useSendTelemetryEvent() - - return ( - <> - -

    Join the community

    -

    - Discover what our community has to say about their Supabase experience. -

    -
    - - -
    -     - - - - - - ) +export interface TwitterSocialSectionProps { + heading: string + subheading: string + ctas: React.ReactNode + tweets: any[] } +const TwitterSocialSection = (props: TwitterSocialSectionProps) => ( + <> + +

    {props.heading}

    +

    {props.subheading}

    + {props.ctas &&
    {props.ctas}
    } +     + + + + + +) + export default TwitterSocialSection diff --git a/apps/www/data/Footer.ts b/apps/www/data/Footer.ts index 6c7eb08610eef..562befb811da7 100644 --- a/apps/www/data/Footer.ts +++ b/apps/www/data/Footer.ts @@ -1,4 +1,5 @@ import { PrivacySettings } from 'ui-patterns/PrivacySettings' +import { skillBasedSolutions, useCaseSolutions } from 'data/Solutions' const footerData = [ { @@ -40,19 +41,28 @@ const footerData = [ text: 'Launch Week', url: '/launch-week', }, - { - text: 'AI Builders', - url: '/solutions/ai-builders', - }, - { - text: 'Switch from Neon', - url: '/solutions/switch-from-neon', - }, + ], + }, + { + title: 'Solutions', + links: [ + ...skillBasedSolutions.solutions.map((solution) => ({ + text: solution.text, + url: solution.url, + })), + ...useCaseSolutions.solutions.map((solution) => ({ + text: solution.text, + url: solution.url, + })), ], }, { title: 'Resources', links: [ + { + text: 'Blog', + url: '/blog', + }, { text: 'Support', url: '/support', @@ -70,11 +80,11 @@ const footerData = [ url: '/partners/integrations', }, { - text: 'Brand Assets / Logos', + text: 'Brand Assets', url: '/brand-assets', }, { - text: 'Security and Compliance', + text: 'Security & Compliance', url: '/security', }, { @@ -106,6 +116,10 @@ const footerData = [ text: 'Changelog', url: '/changelog', }, + { + text: 'Careers', + url: '/careers', + }, { text: 'Contributing', url: 'https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md', @@ -131,26 +145,10 @@ const footerData = [ { title: 'Company', links: [ - { - text: 'Blog', - url: '/blog', - }, - { - text: 'Customer Stories', - url: '/customers', - }, - { - text: 'Careers', - url: '/careers', - }, { text: 'Company', url: '/company', }, - { - text: 'Events & Webinars', - url: '/events', - }, { text: 'General Availability', url: '/ga', diff --git a/apps/www/data/Solutions.tsx b/apps/www/data/Solutions.tsx index 49c1fb4210005..12feb6fab5c83 100644 --- a/apps/www/data/Solutions.tsx +++ b/apps/www/data/Solutions.tsx @@ -1,17 +1,142 @@ -export const data = { +import { + ArrowLeftRight, + BotIcon, + Building2Icon, + Code2Icon, + PointerIcon, + PuzzleIcon, + TrendingUpIcon, +} from 'lucide-react' + +export type SolutionTypes = Solutions[keyof Solutions] + +export enum Solutions { + aiBuilders = 'ai-builders', + noCode = 'no-code', + beginners = 'beginners', + developers = 'developers', + postgresDevs = 'postgres-developers', + neon = 'neon', + startups = 'startups', + enterprise = 'enterprise', +} + +export const skillBasedSolutions = { label: 'Solutions', solutions: [ { + id: Solutions.aiBuilders, text: 'AI Builders', description: '', url: '/solutions/ai-builders', + icon: BotIcon, }, { - text: 'Switch from Neon', + id: Solutions.noCode, + text: 'No Code', + description: '', + url: '/solutions/no-code', + icon: PointerIcon, + }, + { + id: Solutions.beginners, + text: 'Beginners', + description: '', + url: '/solutions/beginners', + icon: PuzzleIcon, + }, + { + id: Solutions.developers, + text: 'Developers', + description: '', + url: '/solutions/developers', + icon: Code2Icon, + }, + { + id: Solutions.postgresDevs, + text: 'Postgres Devs', + description: '', + url: '/solutions/postgres-developers', + icon: (props: any) => ( + + + + + + + ), + }, + ], +} + +export const useCaseSolutions = { + label: 'Solutions', + solutions: [ + { + id: Solutions.neon, + text: 'Switch From Neon', description: '', url: '/solutions/switch-from-neon', + icon: ArrowLeftRight, + }, + { + id: Solutions.startups, + text: 'Startups', + description: '', + url: '/solutions/startups', + icon: TrendingUpIcon, + }, + { + id: Solutions.enterprise, + text: 'Enterprise', + description: '', + url: '/solutions/enterprise', + icon: Building2Icon, }, ], } -export default data +export const navData = { + navigation: [ + { + label: 'Skill Level', + links: [ + ...skillBasedSolutions.solutions.map((solution) => ({ + text: solution.text, + url: solution.url, + icon: solution.icon, + })), + ], + }, + { + label: "Who it's for", + links: [ + ...useCaseSolutions.solutions.map((solution) => ({ + text: solution.text, + url: solution.url, + icon: solution.icon, + })), + ], + }, + ], +} diff --git a/apps/www/data/company-stats.ts b/apps/www/data/company-stats.ts new file mode 100644 index 0000000000000..38d0b852dc519 --- /dev/null +++ b/apps/www/data/company-stats.ts @@ -0,0 +1,4 @@ +export const companyStats = { + databasesManaged: '6,500,000+', + databasesLaunchedDaily: '35,000+', +} diff --git a/apps/www/data/enterprise.tsx b/apps/www/data/enterprise.tsx index bae966bdf2bfc..c1453958d41d6 100644 --- a/apps/www/data/enterprise.tsx +++ b/apps/www/data/enterprise.tsx @@ -16,7 +16,8 @@ import { Users, UserX, } from 'lucide-react' -import RequestADemoForm from '../components/Forms/RequestADemoForm' +import RequestADemoForm from 'components/Forms/RequestADemoForm' +import { companyStats } from 'data/company-stats' export default { metadata: { @@ -139,11 +140,11 @@ export default { highlights: [ { heading: 'Databases managed', - subheading: '1,000,000+', + subheading: companyStats.databasesManaged, }, { heading: 'Databases launched daily', - subheading: '3,500+', + subheading: companyStats.databasesLaunchedDaily, }, ], }, diff --git a/apps/www/data/ga.tsx b/apps/www/data/ga.tsx index 7b501adcf0b5e..016bda3d1e34c 100644 --- a/apps/www/data/ga.tsx +++ b/apps/www/data/ga.tsx @@ -1,12 +1,12 @@ import { KeyIcon, RewindIcon, ShieldCheckIcon, UserGroupIcon } from '@heroicons/react/outline' import { Activity } from 'lucide-react' import { IconDiscord, IconGitHubSolid, IconTwitterX, IconYoutubeSolid } from 'ui' +import { companyStats } from 'data/company-stats' export const data = (isDark: boolean) => ({ hero: { title: <>We are moving to General Availability, publishedAt: '15 April 2024', - // publishedAt: null, sections: [ { title: 'General Availability', link: '#ga' }, { title: 'Open Source & Community', link: '#open-source' }, @@ -20,11 +20,11 @@ export const data = (isDark: boolean) => ({ highlightsSection: { highlights: [ { - number: '1,000,000+', + number: companyStats.databasesManaged, text: 'databases managed', }, { - number: '2,500+', + number: companyStats.databasesLaunchedDaily, text: 'databases launched daily', }, { diff --git a/apps/www/data/home/content.tsx b/apps/www/data/home/content.tsx index 91b022596cca9..6d04e75a4d5c8 100644 --- a/apps/www/data/home/content.tsx +++ b/apps/www/data/home/content.tsx @@ -1,163 +1,210 @@ -import MainProducts from '~/data/MainProducts' -import VideoWithHighlights from '~/components/VideoWithHighlights' +import { MessageCircle } from 'lucide-react' +import Link from 'next/link' +import { Button } from 'ui' +import VideoWithHighlights from 'components/VideoWithHighlights' import ProductModules from '../ProductModules' +import { useSendTelemetryEvent } from 'lib/telemetry' -export default { - heroSection: { - heading: ( - <> - - Build in a weekend - - - Scale to millions - - - ), - subheading: ( - <> - Supabase is the Postgres development platform.
    - Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, - Realtime subscriptions, Storage, and Vector embeddings. - - ), - image: '/images/index/gradient-bg.png', - cta: { - label: 'Start your project', - link: 'https://app.supabase.com', - }, - secondaryCta: { - label: 'Documentation', - link: '/docs', - }, - }, - productsSection: { - products: { - ...MainProducts, - vector: ProductModules.vector, - 'data-api': { - name: 'Data APIs', - icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', - description: ( - <> - Instant ready-to-use Restful APIs. - - ), - description_short: 'Instant ready-to-use Restful APIs.', - label: '', - url: 'https://supabase.com/docs/guides/api', - }, - }, - }, - dashboardFeatures: { - title: ( - <> - Stay productive and manage your app -
    without leaving the dashboard - - ), - tabs: [ - { - label: 'Table Editor', - panel: ({ isDark }: { isDark: boolean }) => ( - - ), - highlights: [ - { - label: 'Full CRUD', - link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js', - }, - { - label: 'Materialized Views', - link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js#materialized-views', - }, - { - label: 'Foreign Tables', - link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js#joining-tables-with-foreign-keys', - }, - { label: 'Partitioned Tables', link: '/docs/guides/database/partitions' }, - { label: 'Easy as a spreadsheet', link: '/docs/guides/database/overview#table-view' }, - ], +import Tweets from 'data/tweets/Tweets.json' +import MainProducts from 'data/MainProducts' + +export default () => { + const sendTelemetryEvent = useSendTelemetryEvent() + + return { + heroSection: { + heading: ( + <> + + Build in a weekend + + + Scale to millions + + + ), + subheading: ( + <> + Supabase is the Postgres development platform.
    + Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, + Realtime subscriptions, Storage, and Vector embeddings. + + ), + image: '/images/index/gradient-bg.png', + cta: { + label: 'Start your project', + link: 'https://app.supabase.com', }, - { - label: 'SQL Editor', - panel: ({ isDark }: { isDark: boolean }) => ( - - ), - highlights: [ - { label: 'AI SQL Editor', link: '/docs/guides/database/overview#the-sql-editor' }, - { - label: 'Row Level Security', - link: '/docs/guides/database/postgres/row-level-security', - }, - { - label: 'Save time using Templates', - link: '/docs/guides/database/overview#the-sql-editor', - }, - { - label: 'Save and reuse Queries', - link: '/docs/guides/database/overview#the-sql-editor', - }, - ], + secondaryCta: { + label: 'Documentation', + link: '/docs', }, - { - label: 'RLS Policies', - panel: ({ isDark }: { isDark: boolean }) => ( - - ), - highlights: [ - { label: 'Email Logins', link: '/docs/guides/auth/auth-email-passwordless' }, - { - label: 'Magic Links', - link: '/docs/guides/auth/auth-email-passwordless?queryGroups=language&language=js#with-magic-link', - }, - { - label: '20+ Third-party Logins', - link: '/docs/guides/auth/social-login#set-up-a-social-provider-with-supabase-auth', - }, - { - label: 'Custom Access Policies via RLS', - link: '/docs/guides/database/postgres/row-level-security', - }, - { - label: 'Password Recovery', - link: '/docs/guides/auth/passwords?queryGroups=language&language=js#resetting-a-password', - }, - ], + }, + productsSection: { + products: { + ...MainProducts, + vector: ProductModules.vector, + 'data-api': { + name: 'Data APIs', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + description: ( + <> + Instant ready-to-use Restful APIs. + + ), + description_short: 'Instant ready-to-use Restful APIs.', + label: '', + url: 'https://supabase.com/docs/guides/api', + }, }, - ], - }, + }, + dashboardFeatures: { + title: ( + <> + Stay productive and manage your app +
    without leaving the dashboard + + ), + tabs: [ + { + label: 'Table Editor', + panel: ({ isDark }: { isDark: boolean }) => ( + + ), + highlights: [ + { + label: 'Full CRUD', + link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js', + }, + { + label: 'Materialized Views', + link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js#materialized-views', + }, + { + label: 'Foreign Tables', + link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js#joining-tables-with-foreign-keys', + }, + { label: 'Partitioned Tables', link: '/docs/guides/database/partitions' }, + { label: 'Easy as a spreadsheet', link: '/docs/guides/database/overview#table-view' }, + ], + }, + { + label: 'SQL Editor', + panel: ({ isDark }: { isDark: boolean }) => ( + + ), + highlights: [ + { label: 'AI SQL Editor', link: '/docs/guides/database/overview#the-sql-editor' }, + { + label: 'Row Level Security', + link: '/docs/guides/database/postgres/row-level-security', + }, + { + label: 'Save time using Templates', + link: '/docs/guides/database/overview#the-sql-editor', + }, + { + label: 'Save and reuse Queries', + link: '/docs/guides/database/overview#the-sql-editor', + }, + ], + }, + { + label: 'RLS Policies', + panel: ({ isDark }: { isDark: boolean }) => ( + + ), + highlights: [ + { label: 'Email Logins', link: '/docs/guides/auth/auth-email-passwordless' }, + { + label: 'Magic Links', + link: '/docs/guides/auth/auth-email-passwordless?queryGroups=language&language=js#with-magic-link', + }, + { + label: '20+ Third-party Logins', + link: '/docs/guides/auth/social-login#set-up-a-social-provider-with-supabase-auth', + }, + { + label: 'Custom Access Policies via RLS', + link: '/docs/guides/database/postgres/row-level-security', + }, + { + label: 'Password Recovery', + link: '/docs/guides/auth/passwords?queryGroups=language&language=js#resetting-a-password', + }, + ], + }, + ], + }, + twitterSocialSection: { + heading: 'Join the community', + subheading: 'Discover what our community has to say about their Supabase experience.', + ctas: ( + <> + + + + ), + tweets: Tweets.slice(0, 18), + }, + } } diff --git a/apps/www/data/nav.tsx b/apps/www/data/nav.tsx index ae2b8489f9ed7..a59af321916d0 100644 --- a/apps/www/data/nav.tsx +++ b/apps/www/data/nav.tsx @@ -1,8 +1,10 @@ -import DevelopersDropdown from '~/components/Nav/DevelopersDropdown' -import ProductDropdown from '~/components/Nav/ProductDropdown' +import DevelopersDropdown from 'components/Nav/DevelopersDropdown' +import ProductDropdown from 'components/Nav/ProductDropdown' +import SolutionsDropdown from 'components/Nav/SolutionsDropdown' import { data as DevelopersData } from 'data/Developers' -import MainProductsData from '~/data/MainProducts' +import MainProductsData from 'data/MainProducts' +import { navData as SolutionsData } from 'data/Solutions' export const getMenu = () => ({ primaryNav: [ @@ -21,8 +23,11 @@ export const getMenu = () => ({ subMenu: DevelopersData, }, { - title: 'Enterprise', - url: '/enterprise', + title: 'Solutions', + hasDropdown: true, + dropdown: , + dropdownContainerClassName: 'rounded-xl', + subMenu: SolutionsData, }, { title: 'Pricing', diff --git a/apps/www/data/solutions/ai-builders.tsx b/apps/www/data/solutions/ai-builders.tsx index f574021de0d5d..e9d7e93081fdd 100644 --- a/apps/www/data/solutions/ai-builders.tsx +++ b/apps/www/data/solutions/ai-builders.tsx @@ -1,13 +1,28 @@ import { Timer } from 'lucide-react' import { CubeIcon } from '@heroicons/react/outline' import { Image } from 'ui' -import { AIData } from './solutions.types' +import type { + CTASection, + FeaturesSection, + HeroSection, + Metadata, + Quotes, + Testimonials, +} from './solutions.utils' -const data: AIData = { +const data: { + metadata: Metadata + heroSection: HeroSection + quotes: Quotes + why: FeaturesSection + features: FeaturesSection + testimonials: Testimonials + 'cta-section': CTASection +} = { metadata: { metaTitle: 'Supabase for AI Builders', metaDescription: - 'Leading enterprises use Supabase to build faster, better, and more scalable products.', + 'Supabase gives your users an integrated and scalable backend that lets them focus on building without worrying about infrastructure.', }, heroSection: { id: 'hero', diff --git a/apps/www/data/solutions/beginners.tsx b/apps/www/data/solutions/beginners.tsx new file mode 100644 index 0000000000000..01325ba5c9ac2 --- /dev/null +++ b/apps/www/data/solutions/beginners.tsx @@ -0,0 +1,683 @@ +import dynamic from 'next/dynamic' +import Link from 'next/link' +import { Check, Sparkles, Timer } from 'lucide-react' +import { CubeIcon } from '@heroicons/react/outline' +import { Button, cn, Image } from 'ui' + +import MainProducts from '../MainProducts' +import { frameworks } from 'components/Hero/HeroFrameworks' + +import type { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection' +import type { PlatformSectionProps } from 'components/Solutions/PlatformSection' +import type { TwitterSocialSectionProps } from 'components/TwitterSocialSection' +import { + FrameworkLink, + getEditors, + type FeaturesSection, + type HeroSection, + type Metadata, +} from './solutions.utils' +import type { MPCSectionProps } from 'components/Solutions/MPCSection' + +import { PRODUCT_SHORTNAMES } from 'shared-data/products' +import { tweets } from 'shared-data' +import { useBreakpoint } from 'common' +import { useSendTelemetryEvent } from 'lib/telemetry' + +const AuthVisual = dynamic(() => import('components/Products/AuthVisual')) +const ComputePricingCalculator = dynamic( + () => import('components/Pricing/ComputePricingCalculator') +) +const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual')) +const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual')) + +const data: () => { + metadata: Metadata + heroSection: HeroSection + why: FeaturesSection + platform: PlatformSectionProps + twitterSocialSection: TwitterSocialSectionProps + platformStarterSection: TwoColumnsSectionProps + mcp: MPCSectionProps +} = () => { + const isXs = useBreakpoint(640) + const editors = getEditors(isXs) + const sendTelemetryEvent = useSendTelemetryEvent() + + return { + metadata: { + metaTitle: 'Supabase for Beginners', + metaDescription: + 'Supabase gives you the tools to easily manage databases, authentication, and backend infrastructure so you can build faster.', + }, + heroSection: { + id: 'hero', + title: 'Supabase for Beginner Developers', + h1: ( + <> + Build in a weekend + Scale to millions + + ), + subheader: [ + <> + Learning to build a full-stack application is exciting. Supabase gives you the tools, + documentation, and community that makes managing databases, authentication, and backend + infrastructure a lot less overwhelming. Ship faster and learn by doing with Supabase. + , + ], + image: ( + Supabase for Beginners + ), + ctas: [ + { + label: 'Start your project', + href: 'https://supabase.com/dashboard', + type: 'primary' as any, + onClick: () => + sendTelemetryEvent({ + action: 'start_project_button_clicked', + properties: { buttonLocation: 'Solutions: Beginners page hero' }, + }), + }, + ], + }, + why: { + id: 'why-supabase', + label: '', + heading: ( + <> + Why developers of all skill levels choose + Supabase + + ), + subheading: + 'Supabase is the Postgres development platform that powers a new generation of developer tools. Give your users an integrated, scalable backend that lets them focus on building without worrying about infrastructure.', + features: [ + { + id: 'get-to-market-faster', + icon: Timer, + heading: 'Instant backend', + subheading: + 'Deploy a database in seconds. Choose your front-end framework and platform. Start coding and learning. With Supabase, batteries are always included.', + }, + { + id: 'the-tools-you-need-at-a-great-price', + icon: CubeIcon, + heading: 'Everything you need to learn and build', + subheading: + 'Supabase offers a fully integrated suite of tools including authentication, storage, edge functions, real-time subscriptions, and vector search. Use one or all.', + }, + { + id: 'scalable-and-dependable', + icon: (props: any) => ( + + + + + ), + heading: 'Scalable and dependable', + subheading: + 'Supabase is just Postgres, the world’s most popular and dependable database. When you’re ready to grow, Supabase will be there for you.', + }, + ], + }, + platform: { + id: 'postgres-platform', + title: ( + <> + Supabase helps you build + + ), + subheading: + 'Supabase includes everything you need to create the perfect app for your brand, business, or just for fun.', + className: cn( + '[&_div.grid]:sm:divide-x [&_div.grid]:divide-y', + '[&_div.grid>div:nth-child(2n+2)]:sm:!border-l-0', + '[&_div.grid>div:nth-child(2n+2)]:lg:!border-l', + '[&_div.grid>div:nth-child(3n+3)]:lg:!border-l-0', + '[&_div.grid>div:nth-child(2)]:lg:!border-t-0' + ), + features: [ + { + id: 'database', + title: 'Database', + isDatabase: true, + icon: MainProducts[PRODUCT_SHORTNAMES.DATABASE].icon, + subheading: ( + <> + A fully managed database that’s simple +
    for creators and{' '} + trusted by enterprises. + + ), + className: 'sm:col-span-2 flex-col lg:flex-row px-4 lg:pr-0', + image: ( +
    +
    + + + + + + + + + {[ + { name: 'Jon Meyers', pub: 'All', active: false }, + { name: 'Chris Martin', pub: 'All', active: true }, + { name: 'Amy Quek', pub: 'No', active: false }, + { name: 'Riccardo Bussetti', pub: 'No', active: false }, + { name: 'Beng Eu', pub: 'All', active: false }, + { name: 'Tyler Hillery', pub: 'All', active: false }, + ].map((row) => ( + + + + + ))} + +
    + NAME + + PUBLICATION +
    {row.name}{row.pub}
    +
    +
    +
    + ), + highlights: ( +
      +
    • + 100% portable +
      • +
    • + Built-in Auth with RLS +
      • +
    • + Easy to extend +
      • +
    + ), + }, + { + id: 'apis', + title: 'Auto-generated APIs', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + Learn SQL when you’re ready. In the meantime, + Supabase generates automatic APIs to make coding a lot easier. + + ), + image: ( + Auto Generated APIs + ), + }, + { + id: 'rbac', + title: 'Role-Based Access Control', + icon: 'M17.6874 22.888V20.3886C17.6874 17.5888 15.4178 15.3192 12.618 15.3192C9.8182 15.3192 7.54852 17.5888 7.54852 20.3886V22.888M21.5531 11.5235C21.8189 14.1669 20.9393 16.9038 18.9141 18.9289C18.5359 19.3072 18.1328 19.6455 17.7101 19.9438M20.8038 8.70448C20.3598 7.71036 19.7299 6.77911 18.9141 5.96334C15.3338 2.38299 9.52889 2.38299 5.94855 5.96334C4.17501 7.73687 3.28 10.0562 3.26352 12.3807M24.0875 13.1161L23.2046 12.2332C22.3264 11.355 20.9026 11.355 20.0244 12.2332L19.1415 13.1161M0.875198 10.9503L1.75809 11.8331C2.63629 12.7113 4.06012 12.7113 4.93832 11.8331L5.82121 10.9503M7.49904 20.4919C5.77226 19.4557 4.37848 17.8555 3.62143 15.8584M15.6799 12.1942C15.6799 13.9201 14.2808 15.3192 12.5549 15.3192C10.829 15.3192 9.42993 13.9201 9.42993 12.1942C9.42993 10.4683 10.829 9.06917 12.5549 9.06917C14.2808 9.06917 15.6799 10.4683 15.6799 12.1942Z', + subheading: <>Secure your data properly., + image: ( + Role Based Access Control diagram + ), + }, + { + id: 'authentication', + title: 'Authentication', + icon: MainProducts[PRODUCT_SHORTNAMES.AUTHENTICATION].icon, + subheading: ( + <> + Let your users{' '} + login with email, Google, Apple, GitHub, and + more. Secure and trusted. + + ), + image: , + }, + { + id: 'storage', + title: 'Storage', + icon: MainProducts[PRODUCT_SHORTNAMES.STORAGE].icon, + subheading: ( + <> + Affordable and fast, for all the videos and + images you need in your app. + + ), + image: ( + Storage + ), + }, + { + id: 'realtime', + title: 'Realtime', + icon: MainProducts[PRODUCT_SHORTNAMES.REALTIME].icon, + subheading: ( + <> + Build immersive{' '} + multi-player, collaborative experiences. + + ), + image: ( + + ), + }, + { + id: 'vectors', + title: 'AI Ready', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + When you’re ready to explore vectors and{' '} + the power of AI, Supabase is there with + industry-standard tools to guide you. + + ), + image: ( + Vector embeddings + ), + }, + { + id: 'edge-functions', + title: 'Edge Functions', + icon: MainProducts[PRODUCT_SHORTNAMES.FUNCTIONS].icon, + subheading: <>Custom backend logic when you want to dive into code., + image: , + }, + { + id: 'foreign-data-wrappers', + title: 'Foreign Data Wrappers', + icon: 'M10.2805 18.2121C11.2419 18.6711 12.3325 18.8932 13.4711 18.8084C15.2257 18.6776 16.7596 17.843 17.8169 16.6015M8.21496 8.36469C9.27117 7.14237 10.7928 6.322 12.5311 6.19248C13.7196 6.10392 14.8558 6.34979 15.8474 6.85054M17.8169 16.6015L20.5242 19.3223C22.1857 17.5141 23.1562 15.1497 23.1562 12.5005C23.1562 6.89135 18.6091 2.34424 13 2.34424C10.9595 2.34424 9.16199 2.87659 7.57035 3.91232C8.35717 3.56865 9.22613 3.37801 10.1396 3.37801C12.6236 3.37801 14.7783 4.78762 15.8474 6.85054M17.8169 16.6015V16.6015C16.277 15.059 16.3448 12.5527 16.5387 10.3817C16.5557 10.191 16.5644 9.99794 16.5644 9.80282C16.5644 8.73844 16.3056 7.73451 15.8474 6.85054M13 22.6567C7.39086 22.6567 2.84375 18.1096 2.84375 12.5005C2.84375 9.84123 3.8026 7.48969 5.4753 5.67921L8.21496 8.42354V8.42354C9.76942 9.98064 9.69844 12.5133 9.51947 14.7062C9.50526 14.8803 9.49802 15.0564 9.49802 15.2341C9.49802 18.7705 12.3648 21.6373 15.9012 21.6373C16.8116 21.6373 17.6776 21.4473 18.4618 21.1048C16.8609 22.1588 15.06 22.6567 13 22.6567Z', + subheading: ( + <> + Pull data from{' '} + Stripe, Google Sheets, Airtable, HubSpot, and + more, as if they were part of Supabase natively. + + ), + image: ( + Foreign Data Wrappers + ), + }, + { + id: 'deployment', + title: 'Instant and secure deployment', + icon: 'M12.5 1.5625C6.45939 1.5625 1.5625 6.45939 1.5625 12.5C1.5625 18.5406 6.45939 23.4375 12.5 23.4375C18.5406 23.4375 23.4375 18.5406 23.4375 12.5C23.4375 9.90692 22.5351 7.52461 21.0273 5.64995L11.6145 15.0627L9.61957 13.0677M12.6068 5.82237C8.92939 5.82237 5.94826 8.80351 5.94826 12.4809C5.94826 16.1583 8.92939 19.1395 12.6068 19.1395C16.2842 19.1395 19.2654 16.1583 19.2654 12.4809C19.2654 11.1095 18.8507 9.83483 18.14 8.77557', + subheading: ( + <> + No need to set up servers, manage DevOps, or + tweak security settings. + + ), + image: ( + <> + background grid +
    + Postgres slonik elephant + + ), + }, + { + id: 'pricing', + title: 'Pricing for builders', + icon: ( + + + + + + ), + subheading: ( + <> + A generous free tier, plus fair, flexible + pricing when you’re ready to scale. + + ), + image: ( +
    +
    + +
    +
    + ), + }, + ], + }, + twitterSocialSection: { + heading: 'Fun projects built with Supabase', + subheading: 'Discover what our community has to say about their Supabase experience.', + ctas: ( + <> + + + + ), + tweets: tweets.slice(0, 18), + }, + platformStarterSection: { + id: 'platform-starter', + heading: ( + <> + Choose your platform to start building in + seconds + + ), + headingRight: ( + <> + Or, start with Supabase AI Prompts{' '} + + + ), + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts', + leftFooter: ( +
    + {frameworks.map((framework) => ( + + ))} +
    + ), + aiPrompts: [ + { + id: 'auth-setup', + title: 'Bootstrap Next.js app with Supabase Auth', + code: `1. Install @supabase/supabase-js and @supabase/ssr packages. +2. Set up environment variables. +3. Write two utility functions with \u0060createClient\u0060 functions to create a browser client and a server client. +4. Hook up middleware to refresh auth tokens +`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/nextjs-supabase-auth', + }, + { + id: 'edge-functions', + title: 'Writing Supabase Edge Functions', + code: `1. Try to use Web APIs and Deno’s core APIs instead of external dependencies (eg: use fetch instead of Axios, use WebSockets API instead of node-ws) +2. If you are reusing utility methods between Edge Functions, add them to 'supabase/functions/_shared' and import using a relative path. Do NOT have cross dependencies between Edge Functions. +3. Do NOT use bare specifiers when importing dependecnies. If you need to use an external dependency, make sure it's prefixed with either 'npm:' or 'jsr:'. For example, '@supabase/supabase-js' should be written as 'npm:@supabase/supabase-js'. +4. For external imports, always define a version. For example, 'npm:@express' should be written as 'npm:express@4.18.2'. +5. For external dependencies, importing via 'npm:' and 'jsr:' is preferred. Minimize the use of imports from @'deno.land/x' , 'esm.sh' and @'unpkg.com' . If you have a package from one of those CDNs, you can replace the CDN hostname with 'npm:' specifier. +`, + language: 'markdown', + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts/edge-functions', + }, + { + id: 'declarative-db-schema', + title: 'Declarative Database Schema', + code: `Mandatory Instructions for Supabase Declarative Schema Management +## 1. **Exclusive Use of Declarative Schema** +-**All database schema modifications must be defined within '.sql' files located in the 'supabase/schemas/' directory.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/declarative-database-schema', + }, + { + id: 'rls-policies', + title: 'Create RLS policies', + code: `You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate a policy with the constraints given by the user. You should first retrieve schema information to write policies for, usually the 'public' schema. +The output should use the following instructions: + +- The generated SQL must be valid SQL.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/database-rls-policies', + }, + ], + }, + mcp: { + id: 'mcp', + heading: ( +
    + Supabase MCP server works seamlessly with{' '} + your favorite AI code editor +
    + ), + ctaLabel: 'Connect your AI tools', + documentationLink: '/docs/guides/getting-started/mcp', + frameworks: editors, + apiExamples: [ + { + lang: 'json', + title: 'macOS', + code: `{ +"mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows', + code: `{ +"mcpServers": { + "supabase": { + "command": "cmd", + "args": [ + "/c", + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows (WSL)', + code: `{ +"mcpServers": { + "supabase": { + "command": "wsl", + "args": [ + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Linux', + code: `{ + "mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } + } +}`, + }, + ], + }, + } +} + +export default data diff --git a/apps/www/data/solutions/developers.tsx b/apps/www/data/solutions/developers.tsx new file mode 100644 index 0000000000000..3a806b4cb6f70 --- /dev/null +++ b/apps/www/data/solutions/developers.tsx @@ -0,0 +1,1009 @@ +import dynamic from 'next/dynamic' +import { + Check, + ClipboardCheck, + FolderLock, + HeartPulse, + InfoIcon, + Lightbulb, + List, + Lock, + ShieldAlert, + ShieldCheck, + Sparkles, + Timer, + Users, + UserX, +} from 'lucide-react' +import { CubeIcon } from '@heroicons/react/outline' +import { Image } from 'ui' + +import MainProducts from '../MainProducts' +import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection' +import RealtimeLogs from 'components/Products/Functions/RealtimeLogs' +import { frameworks } from 'components/Hero/HeroFrameworks' + +import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection' +import type { ResultsSectionProps } from 'components/Solutions/ResultsSection' +import type { PlatformSectionProps } from 'components/Solutions/PlatformSection' +import { + FrameworkLink, + type FrameworkLinkProps, + type FeaturesSection, + type HeroSection, + type Metadata, +} from './solutions.utils' +import type { FeatureGridProps } from 'components/Solutions/FeatureGrid' +import type { SecuritySectionProps } from 'components/Enterprise/Security' +import type { MPCSectionProps } from 'components/Solutions/MPCSection' + +import { PRODUCT_SHORTNAMES } from 'shared-data/products' +import { useBreakpoint } from 'common' +import { useSendTelemetryEvent } from 'lib/telemetry' +import { companyStats } from 'data/company-stats' + +const AuthVisual = dynamic(() => import('components/Products/AuthVisual')) +const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual')) +const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual')) + +const data: () => { + metadata: Metadata + heroSection: HeroSection + why: FeaturesSection + platform: PlatformSectionProps + developerExperience: DXSectionProps + resultsSection: ResultsSectionProps + featureGrid: FeatureGridProps + securitySection: SecuritySectionProps + platformStarterSection: TwoColumnsSectionProps + mcp: MPCSectionProps +} = () => { + const sendTelemetryEvent = useSendTelemetryEvent() + const isXs = useBreakpoint(640) + const editors = getEditors(isXs) + + return { + metadata: { + metaTitle: 'Supabase for Developers', + metaDescription: 'Build fast. Scale easily. Trust your tech stack.', + }, + heroSection: { + id: 'hero', + title: 'Supabase for Developers', + h1: ( + <> + Build fast. Scale easily. + Trust your stack. + + ), + subheader: [ + <> + Supabase is the Postgres development platform that includes a developer experience + designed for speed, an integrated suite of backend services, and a scalable, trusted + foundation for building powerful applications. + , + ], + image: ( + Supabase for Developers + ), + ctas: [ + { + label: 'Start your project', + href: 'https://supabase.com/dashboard', + type: 'primary' as any, + onClick: () => + sendTelemetryEvent({ + action: 'start_project_button_clicked', + properties: { buttonLocation: 'Solutions: Developers page hero' }, + }), + }, + { + label: 'Request a demo', + href: 'https://supabase.com/contact/sales', + type: 'default' as any, + onClick: () => + sendTelemetryEvent({ + action: 'request_demo_button_clicked', + properties: { buttonLocation: 'Solutions: Developers page hero' }, + }), + }, + ], + }, + why: { + id: 'why-supabase', + label: '', + heading: ( + <> + Why developers choose Supabase + + ), + subheading: + 'Supabase helps you build and get to market faster and more cost-effectively using a composable platform of application services built on Postgres. Supabase scales as your business grows.', + features: [ + { + id: 'easy-to-use', + icon: Timer, + heading: 'Easy to use', + subheading: + 'Spin up a Postgres database in seconds, manage your backend with an intuitive dashboard, and integrate with any framework. No complex setup required.', + }, + { + id: 'development-platform', + icon: CubeIcon, + heading: 'Complete development platform', + subheading: + 'Supabase offers a fully integrated suite of tools including authentication, storage, edge functions, real-time subscriptions, and vector search. Developers don’t have to stitch together multiple services. Use one or all.', + }, + { + id: 'scalable-and-dependable', + icon: (props: any) => ( + + + + + ), + heading: 'Scalable and dependable', + subheading: + 'Built on Postgres, Supabase provides enterprise-grade performance, high availability, and the flexibility to grow without vendor lock-in.', + }, + ], + }, + platform: { + id: 'postgres-platform', + title: ( + <> + Supabase helps you build + + ), + subheading: + 'Supabase includes everything you need to create the perfect app for your brand, business, or just for fun.', + features: [ + { + id: 'database', + title: 'Database', + isDatabase: true, + icon: MainProducts[PRODUCT_SHORTNAMES.DATABASE].icon, + subheading: ( + <> + A fully managed Postgres database. +
    No forks: 100% pure Postgres. + + ), + className: 'lg:col-span-2 flex-col lg:flex-row px-4 lg:pr-0', + image: ( +
    +
    + + + + + + + + + {[ + { name: 'Jon Meyers', pub: 'All', active: false }, + { name: 'Chris Martin', pub: 'All', active: true }, + { name: 'Amy Quek', pub: 'No', active: false }, + { name: 'Riccardo Bussetti', pub: 'No', active: false }, + { name: 'Beng Eu', pub: 'All', active: false }, + { name: 'Tyler Hillery', pub: 'All', active: false }, + ].map((row) => ( + + + + + ))} + +
    + NAME + + PUBLICATION +
    {row.name}{row.pub}
    +
    +
    +
    + ), + highlights: ( +
      +
    • + 100% portable +
      • +
    • + Built-in Auth with RLS +
      • +
    • + Easy to extend +
      • +
    + ), + }, + { + id: 'authentication', + title: 'Authentication', + icon: MainProducts[PRODUCT_SHORTNAMES.AUTHENTICATION].icon, + subheading: ( + <> + Secure authentication with email/password, + magic links, OAuth (Google, GitHub, Twitter, etc.), SAML, SSO, and phone/SMS OTP. + + ), + className: '!border-l-0 sm:!border-l sm:!border-t-0', + image: , + }, + { + id: 'rbac', + title: 'Role-Based Access Control', + icon: 'M17.6874 22.888V20.3886C17.6874 17.5888 15.4178 15.3192 12.618 15.3192C9.8182 15.3192 7.54852 17.5888 7.54852 20.3886V22.888M21.5531 11.5235C21.8189 14.1669 20.9393 16.9038 18.9141 18.9289C18.5359 19.3072 18.1328 19.6455 17.7101 19.9438M20.8038 8.70448C20.3598 7.71036 19.7299 6.77911 18.9141 5.96334C15.3338 2.38299 9.52889 2.38299 5.94855 5.96334C4.17501 7.73687 3.28 10.0562 3.26352 12.3807M24.0875 13.1161L23.2046 12.2332C22.3264 11.355 20.9026 11.355 20.0244 12.2332L19.1415 13.1161M0.875198 10.9503L1.75809 11.8331C2.63629 12.7113 4.06012 12.7113 4.93832 11.8331L5.82121 10.9503M7.49904 20.4919C5.77226 19.4557 4.37848 17.8555 3.62143 15.8584M15.6799 12.1942C15.6799 13.9201 14.2808 15.3192 12.5549 15.3192C10.829 15.3192 9.42993 13.9201 9.42993 12.1942C9.42993 10.4683 10.829 9.06917 12.5549 9.06917C14.2808 9.06917 15.6799 10.4683 15.6799 12.1942Z', + subheading: <>Secure your data properly., + className: '!border-l-0', + image: ( + Role Based Access Control diagram + ), + }, + { + id: 'realtime', + title: 'Realtime', + icon: MainProducts[PRODUCT_SHORTNAMES.REALTIME].icon, + subheading: ( + <> + Postgres replication enables{' '} + live sync functionality for collaborative + applications. + + ), + className: '!border-l-0 sm:!border-l', + image: ( + + ), + }, + { + id: 'storage', + title: 'Storage', + icon: MainProducts[PRODUCT_SHORTNAMES.STORAGE].icon, + subheading: ( + <> + Scalable S3-compatible object storage for + managing files, images, and videos. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Storage + ), + }, + { + id: 'edge-functions', + title: 'Edge Functions', + icon: MainProducts[PRODUCT_SHORTNAMES.FUNCTIONS].icon, + subheading: ( + <> + Serverless functions powered by Deno, + deployed globally for low-latency execution. + + ), + className: '!border-l-0 sm:!border-l lg:!border-l-0', + image: , + }, + { + id: 'vectors', + title: 'Vectors', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + pgvector extension + for AI/ML applications, enabling fast semantic search and embedding storage. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Vector embeddings + ), + }, + { + id: 'row-level-security', + title: 'Row Level Security', + icon: '', + subheading: ( + <> + Granular access control policies to secure + data at the row level. + + ), + image: ( + Row Level Security + ), + }, + ], + }, + developerExperience: { + id: 'developer-experience', + className: '[&_h2]:!max-w-sm', + title: ( + <> + Build faster with Supabase + + ), + subheading: 'Features that help developers move quickly and focus.', + features: [ + { + id: 'ai-assistant', + title: 'AI Assistant', + icon: 'M11.8949 2.39344C12.5051 1.78324 13.4944 1.78324 14.1046 2.39344L22.9106 11.1994C23.5208 11.8096 23.5208 12.7989 22.9106 13.4091L14.1046 22.2151C13.4944 22.8253 12.5051 22.8253 11.8949 22.2151L3.08892 13.4091C2.47872 12.7989 2.47872 11.8096 3.08892 11.1994L11.8949 2.39344Z M16.5408 12.3043C16.5408 14.2597 14.9556 15.8449 13.0002 15.8449C11.0448 15.8449 9.45961 14.2597 9.45961 12.3043C9.45961 10.3489 11.0448 8.76371 13.0002 8.76371C14.9556 8.76371 16.5408 10.3489 16.5408 12.3043Z', + subheading: ( + <> + A single panel that persists across the Supabase Dashboard and maintains{' '} + context across AI prompts. + + ), + image: ( +
    +
    + + + +
    +

    AI Assistant

    + +
    +
    +
    +

    Entity: Auth

    +

    Schema:

    +

    + Issue: We have detected that you have enabled the email provider with an expiry + time of more than an hour. It is recommended to set this value to less th... +

    +
    +
    + ), + }, + { + id: 'mcp-server', + title: 'MCP Server', + icon: 'M19 5L22 2M2 22L5 19M7.5 13.5L10 11M10.5 16.5L13 14M6.3 20.3C6.52297 20.5237 6.78791 20.7013 7.07963 20.8224C7.37136 20.9435 7.68413 21.0059 8 21.0059C8.31587 21.0059 8.62864 20.9435 8.92036 20.8224C9.21209 20.7013 9.47703 20.5237 9.7 20.3L12 18L6 12L3.7 14.3C3.47626 14.523 3.29873 14.7879 3.17759 15.0796C3.05646 15.3714 2.99411 15.6841 2.99411 16C2.99411 16.3159 3.05646 16.6286 3.17759 16.9204C3.29873 17.2121 3.47626 17.477 3.7 17.7L6.3 20.3ZM12 6L18 12L20.3 9.7C20.5237 9.47703 20.7013 9.21209 20.8224 8.92036C20.9435 8.62864 21.0059 8.31587 21.0059 8C21.0059 7.68413 20.9435 7.37136 20.8224 7.07963C20.7013 6.78791 20.5237 6.52297 20.3 6.3L17.7 3.7C17.477 3.47626 17.2121 3.29873 16.9204 3.17759C16.6286 3.05646 16.3159 2.99411 16 2.99411C15.6841 2.99411 15.3714 3.05646 15.0796 3.17759C14.7879 3.29873 14.523 3.47626 14.3 3.7L12 6Z', + subheading: ( + <> + Connect your favorite AI tools such as Cursor + or Claude directly with Supabase. + + ), + image: ( + Vector embeddings + ), + }, + { + id: 'auto-generated-apis', + title: 'Auto-generated APIs', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + Learn SQL when you're ready. In the meantime, + Supabase generates automatic APIs to make coding a lot easier. + + ), + image: ( + Auto Generated APIs + ), + }, + { + id: 'foreign-data-wrappers', + title: 'Foreign Data Wrappers', + icon: 'M10.2805 18.2121C11.2419 18.6711 12.3325 18.8932 13.4711 18.8084C15.2257 18.6776 16.7596 17.843 17.8169 16.6015M8.21496 8.36469C9.27117 7.14237 10.7928 6.322 12.5311 6.19248C13.7196 6.10392 14.8558 6.34979 15.8474 6.85054M17.8169 16.6015L20.5242 19.3223C22.1857 17.5141 23.1562 15.1497 23.1562 12.5005C23.1562 6.89135 18.6091 2.34424 13 2.34424C10.9595 2.34424 9.16199 2.87659 7.57035 3.91232C8.35717 3.56865 9.22613 3.37801 10.1396 3.37801C12.6236 3.37801 14.7783 4.78762 15.8474 6.85054M17.8169 16.6015V16.6015C16.277 15.059 16.3448 12.5527 16.5387 10.3817C16.5557 10.191 16.5644 9.99794 16.5644 9.80282C16.5644 8.73844 16.3056 7.73451 15.8474 6.85054M13 22.6567C7.39086 22.6567 2.84375 18.1096 2.84375 12.5005C2.84375 9.84123 3.8026 7.48969 5.4753 5.67921L8.21496 8.42354V8.42354C9.76942 9.98064 9.69844 12.5133 9.51947 14.7062C9.50526 14.8803 9.49802 15.0564 9.49802 15.2341C9.49802 18.7705 12.3648 21.6373 15.9012 21.6373C16.8116 21.6373 17.6776 21.4473 18.4618 21.1048C16.8609 22.1588 15.06 22.6567 13 22.6567Z', + subheading: ( + <> + Connect Supabase to Redshift, BigQuery, MySQL + , and external APIs for seamless integrations. + + ), + image: ( + Foreign Data Wrappers + ), + }, + { + id: 'instant-deployment', + title: 'Instant and secure deployment', + icon: 'M12.5 1.5625C6.45939 1.5625 1.5625 6.45939 1.5625 12.5C1.5625 18.5406 6.45939 23.4375 12.5 23.4375C18.5406 23.4375 23.4375 18.5406 23.4375 12.5C23.4375 9.90692 22.5351 7.52461 21.0273 5.64995L11.6145 15.0627L9.61957 13.0677M12.6068 5.82237C8.92939 5.82237 5.94826 8.80351 5.94826 12.4809C5.94826 16.1583 8.92939 19.1395 12.6068 19.1395C16.2842 19.1395 19.2654 16.1583 19.2654 12.4809C19.2654 11.1095 18.8507 9.83483 18.14 8.77557', + subheading: ( + <> + No need to set up servers, manage DevOps, or + tweak security settings. + + ), + + image: ( + <> + background grid +
    + Postgres slonik elephant + + ), + }, + { + id: 'observability', + title: 'Observability', + icon: 'M11.1404 7.66537C11.1404 5.18146 13.1541 3.16785 15.638 3.16785H17.3775C19.8614 3.16785 21.875 5.18146 21.875 7.66537V17.3776C21.875 19.8615 19.8614 21.8751 17.3775 21.8751H15.638C13.1541 21.8751 11.1404 19.8615 11.1404 17.3776V7.66537Z M3.125 14.7821C3.125 13.4015 4.24419 12.2823 5.62477 12.2823C7.00536 12.2823 8.12454 13.4015 8.12454 14.7821V19.3754C8.12454 20.7559 7.00536 21.8751 5.62477 21.8751C4.24419 21.8751 3.125 20.7559 3.125 19.3754V14.7821Z M3.125 5.58522C3.125 4.20463 4.24419 3.08545 5.62477 3.08545C7.00536 3.08545 8.12454 4.20463 8.12454 5.58522V6.95164C8.12454 8.33223 7.00536 9.45142 5.62477 9.45142C4.24419 9.45142 3.125 8.33223 3.125 6.95164V5.58522Z', + subheading: ( + <> + Built-in logs, query performance tools, and security insights for{' '} + easy debugging. + + ), + image: ( + + ), + }, + ], + }, + resultsSection: { + id: 'results', + heading: ( + <> + Top performance, +
    + at any scale + + ), + subheading: + "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.", + highlights: [ + { + heading: 'databases managed', + subheading: companyStats.databasesManaged, + }, + { + heading: 'databases launched daily', + subheading: companyStats.databasesLaunchedDaily, + }, + ], + }, + featureGrid: { + id: 'database-features', + features: [ + { + id: 'postgres-core', + title: 'Postgres at its core', + description: ( + <> + ACID-compliant, battle-tested database{' '} + trusted by enterprises and startups. + + ), + icon: 'M13.2689 14.9229C14.04 16.494 15.6379 17.4892 17.3881 17.4893H22.0892C22.4726 17.4893 22.7843 17.8003 22.7845 18.1836C22.7845 18.5671 22.4728 18.8789 22.0892 18.8789H20.1664C20.1564 21.0605 18.171 22.4853 16.0052 22.4854C14.044 22.4854 12.4009 21.1292 11.9603 19.3037L11.9213 19.126L11.9086 18.9854C11.9116 18.6624 12.1408 18.3748 12.4701 18.3105C12.7994 18.2463 13.1203 18.4265 13.2445 18.7246L13.2845 18.8594L13.3412 19.0947C13.6746 20.251 14.742 21.0967 16.0052 21.0967C17.6551 21.0966 18.7655 20.0649 18.7758 18.8789H17.3881C15.108 18.8788 13.0263 17.5811 12.0218 15.5342L13.2689 14.9229ZM18.7767 15.6787V11.4639C18.7766 8.09738 16.0476 5.36816 12.681 5.36816H11.7269C11.7032 5.36816 11.6797 5.36364 11.6566 5.36133H7.15564C6.5783 5.36133 6.05835 5.69927 5.82068 6.21777L5.77673 6.32422L4.26404 10.4443C4.03486 11.0686 4.21563 11.7696 4.71814 12.2051L5.75622 13.1045L5.93298 13.2754C6.32193 13.694 6.54138 14.2468 6.54138 14.8242V16.4775L6.5531 16.7227C6.67574 17.9298 7.69544 18.8721 8.93493 18.8721C9.2213 18.8721 9.45986 18.6685 9.51501 18.3984L9.52771 18.2793V10.9121C9.52772 9.33737 10.1566 7.82755 11.2748 6.71875L11.3842 6.63086C11.6543 6.45411 12.0199 6.48475 12.2562 6.72266C12.5263 6.995 12.5247 7.43503 12.2523 7.70508L12.097 7.86816C11.3396 8.69814 10.9164 9.78304 10.9164 10.9121V18.2793L10.9056 18.4814C10.8044 19.4807 9.96094 20.2607 8.93493 20.2607C6.91113 20.2607 5.25814 18.6714 5.15661 16.6729L5.15173 16.4775V14.8242C5.15173 14.5993 5.06693 14.3838 4.9154 14.2207L4.84607 14.1543L3.80798 13.2549C2.86934 12.4414 2.53223 11.1318 2.96033 9.96582L4.47302 5.84473L4.55798 5.63867C5.02039 4.62971 6.03224 3.97266 7.15564 3.97266H11.8246V3.97949H12.681C16.8146 3.97949 20.1662 7.33032 20.1664 11.4639V15.6787C20.1664 16.0622 19.8546 16.373 19.4711 16.373C19.0877 16.3728 18.7767 16.0621 18.7767 15.6787ZM12.3392 14.6055C12.6835 14.4365 13.1 14.5785 13.2689 14.9229L12.0218 15.5342C11.8532 15.1901 11.9953 14.7745 12.3392 14.6055Z M14.4779 10.7135C14.4779 11.1278 14.8137 11.4635 15.2279 11.4635C15.6421 11.4635 15.9779 11.1278 15.9779 10.7135C15.9779 10.2993 15.6421 9.96354 15.2279 9.96354C14.8137 9.96354 14.4779 10.2993 14.4779 10.7135Z', + iconNoStroke: true, + }, + { + id: 'scaling', + title: 'Horizontal & Vertical Scaling', + description: ( + <> + Scale compute and storage independently, including support for{' '} + read replicas. + + ), + icon: 'M14.2847 11.1404V7.8447C14.2847 5.36078 12.2711 3.34717 9.7872 3.34717H7.84476C5.36084 3.34717 3.34723 5.36078 3.34723 7.8447V9.78714C3.34723 12.2711 5.36084 14.2847 7.84476 14.2847H11.1253M8.63752 8.65306L18.4524 18.468M19.1282 14.068V16.5986C19.1282 17.8405 18.1214 18.8474 16.8794 18.8474H14.2847M15.6573 22.0972H17.5997C20.0836 22.0972 22.0972 20.0836 22.0972 17.5996V15.6572C22.0972 13.1733 20.0836 11.1597 17.5997 11.1597H15.6573C13.1733 11.1597 11.1597 13.1733 11.1597 15.6572V17.5996C11.1597 20.0836 13.1733 22.0972 15.6573 22.0972Z', + }, + { + id: 'multi-region', + title: 'Multi-region Deployments', + description: ( + <> + Deploy databases across multiple regions for{' '} + global availability. + + ), + icon: 'M8.48462 3.05339C6.79298 3.58819 5.33457 4.64831 4.30037 6.0436C3.4029 7.25444 2.82613 8.71636 2.69516 10.306H6.77142C6.83771 8.01994 7.22916 5.93809 7.84745 4.36313C8.03485 3.88578 8.24723 3.44433 8.48462 3.05339ZM10.9999 1.27832C7.79633 1.27832 4.95467 2.82842 3.18457 5.21656C1.98658 6.83284 1.2778 8.83471 1.2778 11.0001C1.2778 13.1781 1.99476 15.1906 3.20527 16.8117C4.97675 19.1842 7.80877 20.7225 10.9999 20.7225C14.191 20.7225 17.023 19.1841 18.7944 16.8117C20.005 15.1906 20.722 13.1781 20.722 11.0001C20.722 8.83471 20.0132 6.83284 18.8152 5.21656L18.7944 5.18864C17.0229 2.81635 14.1909 1.27832 10.9999 1.27832ZM10.9999 2.66721C10.768 2.66721 10.4732 2.78413 10.1294 3.15462C9.78466 3.52602 9.44227 4.10142 9.14028 4.87067C8.596 6.2571 8.22699 8.16013 8.16092 10.306H13.8389C13.7728 8.16013 13.4038 6.2571 12.8595 4.87067C12.5575 4.10142 12.2151 3.52602 11.8704 3.15462C11.5265 2.78413 11.2318 2.66721 10.9999 2.66721ZM15.2284 10.306C15.1621 8.01994 14.7706 5.93809 14.1523 4.36313C13.9649 3.88578 13.7525 3.44433 13.5152 3.05339C15.1971 3.58512 16.6485 4.63618 17.6816 6.01966L17.6994 6.0436C18.5969 7.25443 19.1737 8.71636 19.3046 10.306H15.2284ZM13.8389 11.6949H8.16092C8.22699 13.8407 8.596 15.7437 9.14028 17.1301C9.44227 17.8994 9.78466 18.4748 10.1294 18.8462C10.4732 19.2167 10.768 19.3336 10.9999 19.3336C11.2318 19.3336 11.5265 19.2167 11.8704 18.8462C12.2151 18.4748 12.5575 17.8994 12.8595 17.1301C13.4038 15.7437 13.7728 13.8407 13.8389 11.6949ZM13.5152 18.9473C13.7526 18.5564 13.965 18.115 14.1523 17.6377C14.7706 16.0627 15.1621 13.9809 15.2284 11.6949H19.3046C19.1727 13.2947 18.5892 14.7653 17.6816 15.9807C16.6485 17.3643 15.1971 18.4155 13.5152 18.9473ZM8.48458 18.9474C8.24721 18.5564 8.03484 18.115 7.84745 17.6377C7.22916 16.0627 6.83771 13.9809 6.77142 11.6949H2.6952C2.82712 13.2947 3.41061 14.7653 4.31815 15.9808C5.35126 17.3644 6.80264 18.4156 8.48458 18.9474Z', + iconNoStroke: true, + }, + { + id: 'high-availability', + title: 'High Availability Architecture', + description: ( + <> + Enterprise plans offer{' '} + automatic failover and redundancy for + mission-critical applications. + + ), + icon: 'M16.3046 3.24514C15.3004 2.91279 14.2268 2.73291 13.1111 2.73291C7.50197 2.73291 2.95486 7.28002 2.95486 12.8892C2.95486 18.4983 7.50197 23.0454 13.1111 23.0454C18.7203 23.0454 23.2674 18.4983 23.2674 12.8892C23.2674 10.5703 22.4902 8.4329 21.1822 6.72328L12.2253 15.5572L10.2303 13.5622M13.2175 6.31682C9.54013 6.31682 6.55899 9.29795 6.55899 12.4809C6.55899 16.1583 9.54013 19.1395 13.2175 19.1395C16.895 19.1395 19.8761 16.1583 19.8761 12.4809C19.8761 11.1095 19.4615 9.83483 18.7507 8.77557', + }, + { + id: 'pitr', + title: 'Point-in-Time Recovery', + description: ( + <> + Restore your database to any point in time{' '} + for disaster recovery. + + ), + icon: 'M3.3784 13.3407C3.1413 10.4689 4.12132 7.51558 6.31845 5.31845C10.2847 1.35219 16.7153 1.35219 20.6816 5.31845C24.6478 9.28471 24.6478 15.7153 20.6816 19.6816C16.7153 23.6478 10.2847 23.6478 6.31845 19.6816C5.3819 18.745 4.6665 17.671 4.17224 16.5246M0.706939 11.443L2.28117 13.0172C2.89137 13.6274 3.88069 13.6274 4.49088 13.0172L6.06512 11.443M10.761 17.5453L16.0995 17.5453C16.9625 17.5453 17.662 16.8458 17.662 15.9828V15.7328C17.662 14.8699 16.9625 14.1703 16.0995 14.1703L10.761 14.1703C9.89806 14.1703 9.1985 14.8699 9.1985 15.7328L9.1985 15.9828C9.1985 16.8458 9.89806 17.5453 10.761 17.5453ZM11.1648 14.1711L15.6537 14.1711C16.5167 14.1711 17.2162 13.4716 17.2162 12.6086L17.2162 12.3586C17.2162 11.4956 16.5167 10.7961 15.6537 10.7961L11.1648 10.7961C10.3019 10.7961 9.60234 11.4956 9.60234 12.3586L9.60234 12.6086C9.60234 13.4716 10.3019 14.1711 11.1648 14.1711ZM10.7606 10.7963L16.0991 10.7963C16.9621 10.7963 17.6616 10.0967 17.6616 9.2338V8.98375C17.6616 8.1208 16.9621 7.42125 16.0991 7.42125L10.7606 7.42125C9.89765 7.42125 9.19809 8.12081 9.19809 8.98375L9.19809 9.2338C9.19809 10.0967 9.89765 10.7963 10.7606 10.7963Z', + }, + { + id: 'backups', + title: 'Automatic Backups', + description: ( + <> + Daily backups with retention policies for + added security. + + ), + icon: 'M22.375 5.7085C22.375 7.43439 18.1777 8.8335 13 8.8335C7.82233 8.8335 3.625 7.43439 3.625 5.7085M22.375 5.7085C22.375 3.98261 18.1777 2.5835 13 2.5835C7.82233 2.5835 3.625 3.98261 3.625 5.7085M22.375 5.7085V10.1877M3.625 5.7085L3.625 20.2918C3.62434 20.9675 4.28075 21.6251 5.49583 22.166C6.71091 22.7069 8.41919 23.1019 10.3646 23.2918M3.625 13.0002C3.6235 13.5826 4.11036 14.1536 5.03066 14.6487C5.95095 15.1438 7.26805 15.5434 8.83334 15.8022M13 13.0002V17.1668M13 17.1668H17.1667M13 17.1668L15.1771 14.9897C16.0833 14.0835 17.3438 13.521 18.7292 13.521C19.9724 13.521 21.1647 14.0149 22.0437 14.8939C22.9228 15.773 23.4167 16.9653 23.4167 18.2085C23.4167 19.3016 23.0727 20.3671 22.4336 21.2539C21.7944 22.1407 20.8924 22.8039 19.8554 23.1496C18.8183 23.4952 17.6988 23.5059 16.6554 23.1799C15.612 22.854 14.6975 22.208 14.0417 21.3335', + }, + ], + }, + securitySection: { + id: 'security', + label: 'Security', + heading: 'Trusted for medical records, missions to the moon, and everything in between', + subheading: + "Keep your data secure with SOC 2, HIPAA, and GDPR compliance. Your customers' data is encrypted at rest and in transit, with built-in tools for monitoring and managing security threats.", + features: [ + { + icon: ShieldCheck, + heading: 'SOC 2 Type II certified', + }, + { + icon: HeartPulse, + heading: 'HIPAA compliance', + }, + { + icon: ShieldAlert, + heading: 'DDoS Protection', + }, + { + icon: Lock, + heading: 'Multi-factor Authentication', + }, + { + icon: ClipboardCheck, + heading: 'Vulnerability Management', + }, + { + icon: Users, + heading: 'Role-based access control', + }, + { + icon: List, + heading: 'Database Audit Logs', + }, + { + icon: Lightbulb, + heading: 'Security Advisors', + }, + { + icon: FolderLock, + heading: 'Encrypted Storage', + }, + { + icon: UserX, + heading: 'Network restrictions', + }, + ], + cta: { + label: 'Learn about security', + url: '/security', + }, + }, + platformStarterSection: { + id: 'platform-starter', + heading: ( + <> + Choose your platform to start building in + seconds + + ), + headingRight: ( + <> + Or, start with Supabase AI Prompts{' '} + + + ), + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts', + leftFooter: ( +
    + {frameworks.map((framework) => ( + + ))} +
    + ), + aiPrompts: [ + { + id: 'auth-setup', + title: 'Bootstrap Next.js app with Supabase Auth', + description: + '## Overview of implementing Supabase Auth SSR\n1. Install @supabase/supabase-js and...', + code: `1. Install @supabase/supabase-js and @supabase/ssr packages. +2. Set up environment variables. +3. Write two utility functions with \u0060createClient\u0060 functions to create a browser client and a server client. +4. Hook up middleware to refresh auth tokens +`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/nextjs-supabase-auth', + }, + { + id: 'edge-functions', + title: 'Writing Supabase Edge Functions', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `1. Try to use Web APIs and Deno’s core APIs instead of external dependencies (eg: use fetch instead of Axios, use WebSockets API instead of node-ws) +2. If you are reusing utility methods between Edge Functions, add them to 'supabase/functions/_shared' and import using a relative path. Do NOT have cross dependencies between Edge Functions. +3. Do NOT use bare specifiers when importing dependecnies. If you need to use an external dependency, make sure it's prefixed with either 'npm:' or 'jsr:'. For example, '@supabase/supabase-js' should be written as 'npm:@supabase/supabase-js'. +4. For external imports, always define a version. For example, 'npm:@express' should be written as 'npm:express@4.18.2'. +5. For external dependencies, importing via 'npm:' and 'jsr:' is preferred. Minimize the use of imports from @'deno.land/x' , 'esm.sh' and @'unpkg.com' . If you have a package from one of those CDNs, you can replace the CDN hostname with 'npm:' specifier. +`, + language: 'markdown', + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts/edge-functions', + }, + { + id: 'declarative-db-schema', + title: 'Declarative Database Schema', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `Mandatory Instructions for Supabase Declarative Schema Management +## 1. **Exclusive Use of Declarative Schema** +-**All database schema modifications must be defined within '.sql' files located in the 'supabase/schemas/' directory.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/declarative-database-schema', + }, + { + id: 'rls-policies', + title: 'Create RLS policies', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate a policy with the constraints given by the user. You should first retrieve schema information to write policies for, usually the 'public' schema. +The output should use the following instructions: + +- The generated SQL must be valid SQL.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/database-rls-policies', + }, + ], + }, + mcp: { + id: 'mcp', + heading: ( +
    + Supabase MCP server works seamlessly with{' '} + your favorite AI code editor +
    + ), + ctaLabel: 'Connect your AI tools', + documentationLink: '/docs/guides/getting-started/mcp', + frameworks: editors, + apiExamples: [ + { + lang: 'json', + title: 'macOS', + code: `{ +"mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows', + code: `{ +"mcpServers": { + "supabase": { + "command": "cmd", + "args": [ + "/c", + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows (WSL)', + code: `{ +"mcpServers": { + "supabase": { + "command": "wsl", + "args": [ + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Linux', + code: `{ + "mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } + } +}`, + }, + ], + }, + } +} + +export const getEditors: (isXs: boolean) => FrameworkLinkProps[] = (isXs) => [ + { + name: 'Cursor', + icon: ( + + + + + + + + + + + + + + + + + + + ), + docs: '/docs/guides/getting-started/mcp#cursor', + }, + { + name: 'Visual Studio Code (Copilot)', + icon: 'M50.1467 13.5721C50.2105 13.572 50.2743 13.5724 50.3382 13.576C50.3414 13.5762 50.3447 13.5768 50.3479 13.577C50.4258 13.5816 50.5036 13.5892 50.5813 13.5995C50.5895 13.6006 50.5976 13.6022 50.6057 13.6034C50.9388 13.6498 51.2689 13.7462 51.5833 13.8983L62.4924 19.1756C63.5692 19.6966 64.2777 20.757 64.3596 21.9442C64.3653 22.0231 64.3684 22.1026 64.3684 22.1825V22.3104C64.3684 22.301 64.3676 22.2914 64.3674 22.2821V57.8417C64.3675 57.834 64.3684 57.8259 64.3684 57.8182V57.9461C64.3684 57.9598 64.3666 57.9736 64.3665 57.9872C64.354 59.2535 63.6289 60.4044 62.4924 60.954L51.5833 66.2303C51.194 66.4187 50.7811 66.5227 50.3674 66.5497C50.3525 66.5507 50.3375 66.5518 50.3225 66.5526C50.2401 66.5568 50.1577 66.5585 50.0755 66.5565C49.6814 66.5509 49.2901 66.476 48.9221 66.3319C48.5051 66.1688 48.1177 65.918 47.7874 65.5858L26.9163 46.4471L17.8372 53.3749C17.4137 53.6981 16.9059 53.8466 16.4055 53.8241H16.3743C15.8739 53.8018 15.3809 53.6085 14.9876 53.2489L12.0706 50.5809C11.1081 49.7012 11.1073 48.1798 12.0686 47.2987L19.9573 40.0643L12.0676 32.8299C11.1064 31.9489 11.108 30.4273 12.0706 29.5477L14.9876 26.8797C15.3809 26.5201 15.8739 26.3269 16.3743 26.3045H16.594C17.032 26.3224 17.4668 26.4713 17.8372 26.7538L26.9163 33.6815L47.7874 14.5428C47.9113 14.4183 48.0433 14.3052 48.1819 14.204C48.7277 13.8051 49.3759 13.5895 50.0354 13.5721H50.0715C50.0966 13.5716 50.1217 13.5721 50.1467 13.5721ZM35.2825 40.0643L51.0969 52.1307V27.9969L35.2825 40.0643Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, + { + name: 'Claude', + icon: 'M22.1027 49.8962L33.9052 43.2734L34.1027 42.6962L33.9052 42.3772H33.328L31.3534 42.2557L24.609 42.0734L18.7609 41.8304L13.0951 41.5266L11.6673 41.2228L10.3306 39.4608L10.4673 38.5797L11.6673 37.7747L13.3837 37.9266L17.1812 38.1848L22.8774 38.5797L27.009 38.8228L33.1306 39.4608H34.1027L34.2394 39.0658L33.9052 38.8228L33.647 38.5797L27.7534 34.5848L21.3736 30.362L18.0318 27.9316L16.2242 26.7013L15.3128 25.5468L14.9179 23.0253L16.5584 21.2177L18.7609 21.3696L19.323 21.5215L21.5559 23.238L26.3255 26.9291L32.5534 31.5165L33.4647 32.276L33.8293 32.0177L33.8749 31.8354L33.4647 31.1519L30.0774 25.0304L26.4622 18.8025L24.8521 16.2203L24.4268 14.6709C24.2749 14.0329 24.1685 13.5013 24.1685 12.8481L26.0369 10.3114L27.0698 9.97722L29.5609 10.3114L30.609 11.2228L32.1584 14.762L34.6647 20.3367L38.5534 27.9165L39.6926 30.1646L40.3002 32.2456L40.528 32.8835H40.923V32.519L41.242 28.2506L41.8344 23.0101L42.4116 16.2658L42.609 14.3671L43.5508 12.0886L45.4192 10.8582L46.8774 11.557L48.0774 13.2734L47.9103 14.3823L47.1964 19.0152L45.7989 26.276L44.8875 31.1367H45.4192L46.0268 30.5291L48.4875 27.2633L52.6192 22.0987L54.442 20.0481L56.5685 17.7848L57.9356 16.7063H60.5179L62.4166 19.5316L61.566 22.4481L58.9078 25.8203L56.7052 28.676L53.5458 32.9291L51.5711 36.3316L51.7534 36.6051L52.2242 36.5595L59.3635 35.0405L63.2217 34.3418L67.8242 33.5519L69.9053 34.5241L70.1331 35.5114L69.3128 37.5316L64.3913 38.7468L58.6192 39.9013L50.0217 41.9367L49.9154 42.0127L50.0369 42.1646L53.9103 42.5291L55.566 42.6203H59.6217L67.1711 43.1823L69.1458 44.4886L70.3306 46.0835L70.1331 47.2987L67.0951 48.8481L62.9939 47.876L53.4242 45.5975L50.1432 44.7772H49.6875V45.0506L52.4217 47.7241L57.4344 52.2506L63.7078 58.0835L64.0268 59.5266L63.2217 60.6658L62.3711 60.5443L56.8571 56.3975L54.7306 54.5291L49.9154 50.4734H49.5964V50.8987L50.7052 52.5241L56.5685 61.3342L56.8723 64.038L56.447 64.919L54.928 65.4506L53.2571 65.1468L49.8242 60.3316L46.285 54.9089L43.4293 50.0481L43.0799 50.2456L41.3939 68.3975L40.604 69.3241L38.7812 70.0228L37.2622 68.8684L36.4571 67L37.2622 63.3089L38.2344 58.4937L39.0242 54.6658L39.7382 49.9114L40.1635 48.3316L40.1331 48.2253L39.7837 48.2709L36.1989 53.1924L30.7458 60.5595L26.4318 65.1772L25.3989 65.5873L23.6065 64.6608L23.7736 63.0051L24.7761 61.5316L30.7458 53.9367L34.3458 49.2279L36.6698 46.5089L36.6546 46.1139H36.5179L20.6597 56.4127L17.8344 56.7772L16.6192 55.638L16.7711 53.7696L17.3483 53.162L22.1179 49.881L22.1027 49.8962Z', + docs: '/docs/guides/getting-started/mcp#claude-code', + }, + { + name: 'Windsurf', + icon: 'M70.1801 22.6639H69.6084C66.5989 22.6592 64.1571 25.0966 64.1571 28.1059V40.2765C64.1571 42.7069 62.1485 44.6756 59.7579 44.6756C58.3377 44.6756 56.9197 43.9607 56.0785 42.7608L43.6475 25.0076C42.6163 23.5334 40.9384 22.6545 39.1219 22.6545C36.2885 22.6545 33.7386 25.0638 33.7386 28.0379V40.2788C33.7386 42.7092 31.7465 44.6779 29.3395 44.6779C27.9146 44.6779 26.499 43.9631 25.6576 42.7631L11.748 22.8983C11.434 22.4506 10.7285 22.6709 10.7285 23.2193V33.8338C10.7285 34.3705 10.8926 34.8908 11.1996 35.3314L24.8866 54.8798C25.6952 56.0352 26.8881 56.893 28.2638 57.2047C31.7066 57.9876 34.8752 55.3369 34.8752 51.9596V39.7258C34.8752 37.2954 36.844 35.3267 39.2742 35.3267H39.2812C40.7462 35.3267 42.1196 36.0415 42.9609 37.2414L55.3916 54.9924C56.4251 56.4688 58.0166 57.3455 59.9149 57.3455C62.8116 57.3455 65.2935 54.9336 65.2935 51.962V39.7234C65.2935 37.293 67.2622 35.3243 69.6927 35.3243H70.1777C70.4825 35.3243 70.7285 35.0783 70.7285 34.7736V23.2123C70.7285 22.9076 70.4825 22.6615 70.1777 22.6615L70.1801 22.6639Z', + docs: '/docs/guides/getting-started/mcp#windsurf', + }, + { + name: 'Cline', + icon: 'M40.6646 10C42.5072 10 44.2747 10.7322 45.5776 12.0352C46.8803 13.338 47.6118 15.1049 47.6118 16.9473C47.6118 18.0072 47.3683 19.0415 46.9146 19.9775H53.1167C59.9917 19.9775 65.5669 25.5779 65.5669 32.4854V36.6523L69.1919 43.8926C69.3687 44.2454 69.4603 44.6347 69.4595 45.0293C69.4586 45.424 69.3654 45.813 69.187 46.165L65.5669 53.3252V57.4951C65.5668 64.4001 59.9917 70 53.1167 70H28.2144C21.337 69.9998 15.7652 64.4 15.7651 57.4951V53.3252L12.065 46.1875C11.8788 45.8299 11.7811 45.4325 11.7798 45.0293C11.7786 44.6263 11.8734 44.2288 12.0571 43.8701L15.7622 36.6523V32.4854C15.7622 25.5779 21.3374 19.9775 28.2124 19.9775H34.4146C33.9609 19.0416 33.7173 18.0071 33.7173 16.9473C33.7174 15.1048 34.4496 13.338 35.7525 12.0352C37.0553 10.7323 38.8221 10.0001 40.6646 10ZM49.5073 34C47.9996 34 46.553 34.5989 45.4868 35.665C44.4209 36.7311 43.8219 38.1771 43.8218 39.6846V49.79C43.8218 51.2976 44.4209 52.7435 45.4868 53.8096C46.553 54.8757 47.9996 55.4746 49.5073 55.4746C51.015 55.4746 52.4608 54.8757 53.5269 53.8096C54.593 52.7434 55.1919 51.2978 55.1919 49.79V39.6846C55.1918 38.9379 55.0451 38.1986 54.7593 37.5088C54.4734 36.8189 54.054 36.192 53.5259 35.6641C52.9978 35.1362 52.3711 34.7172 51.6812 34.4316C50.9912 34.1461 50.2541 33.9997 49.5073 34ZM31.1919 34C29.6843 34.0001 28.2385 34.599 27.1724 35.665C26.1063 36.7311 25.5075 38.177 25.5073 39.6846V49.79C25.5385 51.2768 26.1509 52.692 27.2134 53.7324C28.2759 54.7729 29.7038 55.3555 31.1909 55.3555C32.678 55.3555 34.106 54.7729 35.1685 53.7324C36.2309 52.692 36.8433 51.2768 36.8745 49.79V39.6846C36.8744 38.1774 36.276 36.732 35.2105 35.666C34.1449 34.5999 32.6992 34.0007 31.1919 34Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, +] + +export default data diff --git a/apps/www/data/solutions/neon.tsx b/apps/www/data/solutions/neon.tsx index af84a876ca781..51f8926ba17dc 100644 --- a/apps/www/data/solutions/neon.tsx +++ b/apps/www/data/solutions/neon.tsx @@ -1,4 +1,5 @@ import { cn, Image } from 'ui' +import dynamic from 'next/dynamic' import { CubeIcon } from '@heroicons/react/outline' import { ArrowRight, @@ -17,14 +18,15 @@ import { Check, InfoIcon, } from 'lucide-react' -import AuthVisual from '~/components/Products/AuthVisual' -import FunctionsVisual from '~/components/Products/FunctionsVisual' -import RealtimeVisual from '~/components/Products/RealtimeVisual' -import RealtimeLogs from '~/components/Products/Functions/RealtimeLogs' -import DataAPIsVisual from '~/components/Products/DataAPIsVisual' +import RealtimeLogs from 'components/Products/Functions/RealtimeLogs' -import MainProducts from '~/data/MainProducts' +import MainProducts from 'data/MainProducts' import { PRODUCT_SHORTNAMES } from 'shared-data/products' +import { companyStats } from 'data/company-stats' + +const AuthVisual = dynamic(() => import('components/Products/AuthVisual')) +const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual')) +const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual')) const data = { metadata: { @@ -547,11 +549,11 @@ const data = { highlights: [ { heading: 'databases managed', - subheading: '1,000,000+', + subheading: companyStats.databasesManaged, }, { heading: 'databases launched daily', - subheading: '2,500+', + subheading: companyStats.databasesLaunchedDaily, }, ], }, diff --git a/apps/www/data/solutions/no-code.tsx b/apps/www/data/solutions/no-code.tsx new file mode 100644 index 0000000000000..2026578a5bb8d --- /dev/null +++ b/apps/www/data/solutions/no-code.tsx @@ -0,0 +1,459 @@ +import dynamic from 'next/dynamic' +import { Check, PointerIcon, TrendingUp, ZapIcon } from 'lucide-react' +import { cn, Image } from 'ui' + +import MainProducts from '../MainProducts' + +import type { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection' +import type { PlatformSectionProps } from 'components/Solutions/PlatformSection' +import type { FeaturesSection, HeroSection, Metadata } from './solutions.utils' +import type { Quotes } from './solutions.utils' + +import { PRODUCT_SHORTNAMES } from 'shared-data/products' +import { useSendTelemetryEvent } from 'lib/telemetry' + +const AuthVisual = dynamic(() => import('components/Products/AuthVisual')) +const ComputePricingCalculator = dynamic( + () => import('components/Pricing/ComputePricingCalculator') +) +const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual')) +const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual')) +const AIBuildersLogos = dynamic(() => import('components/Solutions/AIBuildersLogos')) + +const data: () => { + metadata: Metadata + heroSection: HeroSection + quotes: Quotes + why: FeaturesSection + platform: PlatformSectionProps + platformStarterSection: TwoColumnsSectionProps +} = () => { + const sendTelemetryEvent = useSendTelemetryEvent() + + return { + metadata: { + metaTitle: 'Supabase for building Apps', + metaDescription: 'Your app, your vision. Supabase powers the rest.', + }, + heroSection: { + id: 'hero', + title: 'Supabase for building Apps', + h1: ( + <> + Your app, your vision. + Supabase powers the rest. + + ), + subheader: [ + <> + You don’t need to be a developer to build something incredible. Supabase provides a + complete backend that’s easy to use with your favorite app builder tools. When you’re + ready to scale, Supabase is there to scale with you.
    + Build in a weekend, scale to millions. + , + ], + image: ( + Supabase for No Coders + ), + ctas: [ + { + label: 'Start your project', + href: 'https://supabase.com/dashboard', + type: 'primary' as any, + onClick: () => + sendTelemetryEvent({ + action: 'start_project_button_clicked', + properties: { buttonLocation: 'Solutions: No Code page hero' }, + }), + }, + ], + }, + quotes: { + id: 'quotes', + items: [ + { + icon: '/images/logos/publicity/lovable.svg', + avatar: '/images/avatars/anton-osika.jpg', + author: 'Anton Osika', + authorTitle: 'Lovable - CEO', + quote: ( + <> + We chose Supabase because it's{' '} + extremely user friendly and{' '} + + covers all the needs to build full-stack applications + + . + + ), + }, + { + icon: '/images/logos/publicity/bolt.svg', + avatar: '/images/avatars/eric-simons.jpg', + author: 'Eric Simmons', + authorTitle: 'Bolt.new - CEO', + quote: ( + <> + Supabase is awesome. Supabase is the{' '} + key database integration that we + have...because it’s the{' '} + + best product in the world for storing and retrieving data + + . + + ), + }, + { + icon: '/images/logos/publicity/v0.svg', + avatar: '/images/avatars/guillermo-rauch.jpg', + author: 'Guillermo Rauch', + authorTitle: 'Vercel (v0) - CEO', + quote: ( + <> + v0 integrates with Supabase seamlessly. If + you ask v0 to generate an application and it needs Supabase,{' '} + + you’ll be prompted to create a Supabase account right there in the application + + . + + ), + }, + ], + }, + why: { + id: 'why-supabase', + label: '', + heading: ( + <> + Why no-code app builders choose Supabase + + ), + subheading: + 'Keep your focus where it belongs: building great monetizable apps for your business or hobby. Supabase handles everything else: no servers to manage, no database to configure, no security settings to tweak. Just point, click, and build.', + features: [ + { + id: 'easy-to-use', + icon: ZapIcon, + heading: 'Easy to use', + subheading: + 'Supabase is easy to use and set up. Instantly deploy a database for free, and affordably scale as you grow.', + }, + { + id: 'point-and-click-backend', + icon: PointerIcon, + heading: 'Point and click backend', + subheading: + 'Supabase includes everything you need for a great app: user logins, storage, edge functions, real-time subscriptions, and vector search. Use one or all.', + }, + { + id: 'scalable', + icon: TrendingUp, + heading: 'Scales when you need it', + subheading: + 'Supabase is just Postgres, with all the performance, high availability, and flexibility you need when your app goes viral and hits it big.', + }, + ], + }, + platform: { + id: 'postgres-platform', + title: ( + <> + Supabase is the Back-End for Everyone + + ), + subheading: + 'Supabase includes everything you need to create the perfect app for your brand, business, or just for fun.', + className: cn( + '[&_div.grid]:sm:divide-x [&_div.grid]:divide-y', + '[&_div.grid>div:nth-child(2n+1)]:sm:!border-l-0', + '[&_div.grid>div:nth-child(2n+2)]:sm:!border-l', + '[&_div.grid>div:nth-child(2n+2)]:lg:!border-l', + '[&_div.grid>div:nth-child(3n+3)]:lg:!border-l-0', + '[&_div.grid>div:nth-child(2n+3)]:lg:!border-l', + '[&_div.grid>div:nth-child(2)]:lg:!border-t-0' + ), + features: [ + { + id: 'database', + title: 'Database', + isDatabase: true, + icon: MainProducts[PRODUCT_SHORTNAMES.DATABASE].icon, + subheading: ( + <> + A fully managed database that’s simple for creators and{' '} + trusted by enterprises. + + ), + className: 'lg:col-span-2 flex-col lg:flex-row px-4 lg:pr-0', + image: ( +
    +
    + + + + + + + + + {[ + { name: 'Jon Meyers', pub: 'All', active: false }, + { name: 'Chris Martin', pub: 'All', active: true }, + { name: 'Amy Quek', pub: 'No', active: false }, + { name: 'Riccardo Bussetti', pub: 'No', active: false }, + { name: 'Beng Eu', pub: 'All', active: false }, + { name: 'Tyler Hillery', pub: 'All', active: false }, + ].map((row) => ( + + + + + ))} + +
    + NAME + + PUBLICATION +
    {row.name}{row.pub}
    +
    +
    +
    + ), + highlights: ( +
      +
    • + 100% portable +
      • +
    • + Built-in Auth with RLS +
      • +
    • + Easy to extend +
      • +
    + ), + }, + { + id: 'authentication', + title: 'Authentication', + icon: MainProducts[PRODUCT_SHORTNAMES.AUTHENTICATION].icon, + subheading: ( + <> + Let your users{' '} + + login with email, Google, Apple, GitHub, and more + + . Secure and trusted. + + ), + className: '!border-l-0 sm:!border-l sm:!border-t-0', + image: , + }, + { + id: 'realtime', + title: 'Realtime', + icon: MainProducts[PRODUCT_SHORTNAMES.REALTIME].icon, + subheading: ( + <> + Build immersive{' '} + multi-player, collaborative experiences. + + ), + className: '!border-l-0 sm:!border-l', + image: ( + + ), + }, + { + id: 'edge-functions', + title: 'Edge Functions', + icon: MainProducts[PRODUCT_SHORTNAMES.FUNCTIONS].icon, + subheading: <>Custom backend logic when you want to dive into code., + className: '!border-l-0 sm:!border-l lg:!border-l-0', + image: , + }, + { + id: 'storage', + title: 'Storage', + icon: MainProducts[PRODUCT_SHORTNAMES.STORAGE].icon, + subheading: ( + <> + Affordable and fast, for all the videos and + images you need in your app. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Storage + ), + }, + { + id: 'vectors', + title: 'AI Ready', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + When you’re ready to explore vectors and{' '} + the power of AI, Supabase is there with + industry-standard tools to guide you. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Vector embeddings + ), + }, + { + id: 'pricing', + title: 'Pricing for builders', + className: 'sm:col-span-2 flex-col', + icon: ( + + + + + + ), + subheading: ( + <> + A generous free tier, plus fair, flexible + pricing when you’re ready to scale. + + ), + image: ( +
    +
    + +
    +
    + ), + }, + ], + }, + platformStarterSection: { + id: 'platform-starter', + heading: Start building in seconds, + subheading: 'Choose your platform to get started:', + leftFooter: ( + + ), + className: + 'lg:mb-24 [&>div.grid]:lg:grid-cols-5 [&_.col-left]:lg:col-span-2 [&_.col-right]:lg:col-span-3', + aiPrompts: [ + { + id: 'internal-crm', + title: 'Internal CRM for High-Touch Client Services', + code: `Build an internal CRM that tracks interactions with clients in a service business (e.g. agency, law firm, consultancy). Include a client directory with contact info and tags, a timeline of interactions (calls, meetings, emails), and a task management feature per client. Add a pipeline view for sales or project stages. Use Supabase Auth for role-based access and row-level security to restrict views by user.`, + language: 'markdown', + copyable: true, + }, + { + id: 'customer-feedback', + title: 'Customer Feedback Collection and Tagging System', + code: `Create a tool to collect and tag customer feedback from multiple sources like support tickets, surveys, and interviews. Allow team members to log new feedback with sentiment, category, and product area. Summarize trends in charts (e.g. top requests, most common bugs). Use Supabase as the backend with triggers to notify product owners when thresholds are met. Optional: add AI-powered tagging for fast triage.`, + language: 'markdown', + copyable: true, + }, + { + id: 'onboarding-portal', + title: 'Automated Onboarding Portal for New Hires', + code: `Build a customizable portal for onboarding new employees in a remote company. Show personalized checklists by role, with links to key docs, Slack channels, and tool logins. Let managers monitor completion status. Include a welcome board where coworkers can leave greetings. Use Supabase to manage checklists, users, and messages. Add role-based views for HR vs. employee.`, + language: 'markdown', + copyable: true, + }, + { + id: 'recurring-revenue', + title: 'Recurring Revenue Dashboard for Indie SaaS', + code: `Create a financial dashboard for indie founders to track recurring revenue. Include metrics like MRR, ARR, churn, and LTV. Add charts for monthly trends. Let users manually enter Stripe or PayPal data, or auto-sync via webhook. Use Supabase to store data with per-user access control. Configure Slack integration for daily digests.`, + language: 'markdown', + copyable: true, + }, + { + id: 'custom-client-portal', + title: 'Custom Client Portal for Freelancers', + code: `Build a secure portal where freelancers can share files, invoices, and project updates with clients. Each client should log in and only see their own dashboard. Include a file upload section, embedded payment buttons, and a timeline of status updates. Use Supabase for data storage and row-level security.`, + language: 'markdown', + copyable: true, + }, + { + id: 'compliance-tracker', + title: 'Compliance Tracker for Early-Stage Startups', + code: `Create a dashboard for startups to track legal, security, and HR compliance tasks. Let users define tasks, assign owners, set due dates, and upload supporting documents. Group tasks by category (e.g. Security, Legal) and show progress bars. Use Supabase for storing task data and documents.`, + language: 'markdown', + copyable: true, + }, + ], + }, + } +} + +export default data diff --git a/apps/www/data/solutions/postgres-developers.tsx b/apps/www/data/solutions/postgres-developers.tsx new file mode 100644 index 0000000000000..a69cda9215373 --- /dev/null +++ b/apps/www/data/solutions/postgres-developers.tsx @@ -0,0 +1,1118 @@ +import { useState } from 'react' +import dynamic from 'next/dynamic' +import { + Check, + ClipboardCheck, + FolderLock, + HeartPulse, + InfoIcon, + Lightbulb, + List, + Lock, + ShieldAlert, + ShieldCheck, + Sparkles, + Timer, + Users, + UserX, +} from 'lucide-react' +import { CubeIcon } from '@heroicons/react/outline' +import { cn, Image, Input_Shadcn_, Switch } from 'ui' + +import MainProducts from '../MainProducts' +import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection' +import { frameworks } from 'components/Hero/HeroFrameworks' +import Logos from 'components/logos' + +import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection' +import type { ResultsSectionProps } from 'components/Solutions/ResultsSection' +import type { PlatformSectionProps } from 'components/Solutions/PlatformSection' +import { + FrameworkLink, + type FeaturesSection, + type FrameworkLinkProps, + type HeroSection, + type Metadata, +} from './solutions.utils' +import type { FeatureGridProps } from 'components/Solutions/FeatureGrid' +import type { SecuritySectionProps } from 'components/Enterprise/Security' +import type { MPCSectionProps } from 'components/Solutions/MPCSection' + +import { PRODUCT_SHORTNAMES } from 'shared-data/products' +import { useBreakpoint } from 'common' +import { useSendTelemetryEvent } from 'lib/telemetry' +import { companyStats } from 'data/company-stats' + +const AuthVisual = dynamic(() => import('components/Products/AuthVisual')) +const DatabaseVisual = dynamic(() => import('components/Products/DatabaseVisual')) +const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual')) +const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual')) +const RealtimeLogs = dynamic(() => import('components/Products/Functions/RealtimeLogs')) + +const data: () => { + metadata: Metadata + heroSection: HeroSection + why: FeaturesSection + platform: PlatformSectionProps + developerExperience: DXSectionProps + resultsSection: ResultsSectionProps + featureGrid: FeatureGridProps + securitySection: SecuritySectionProps + platformStarterSection: TwoColumnsSectionProps + mcp: MPCSectionProps +} = () => { + const isXs = useBreakpoint(640) + const editors = getEditors(isXs) + const sendTelemetryEvent = useSendTelemetryEvent() + + return { + metadata: { + metaTitle: 'Supabase for Postgres Developers', + metaDescription: 'Get started in seconds with a complete Postgres development platform', + }, + heroSection: { + id: 'hero', + title: 'Supabase for Postgres Developers', + h1: <>Get started in seconds with a complete Postgres development platform, + subheader: [ + <> + Supabase is the open-source Postgres development platform. It includes a developer + experience designed for speed, an integrated suite of backend services, and a scalable, + trusted foundation for building powerful applications. But if all you want is Postgres, + Supabase is that, too. + , + ], + footer: , + image: ( + + ), + ctas: [ + { + label: 'Start your project', + href: 'https://supabase.com/dashboard', + type: 'primary' as any, + onClick: () => + sendTelemetryEvent({ + action: 'start_project_button_clicked', + properties: { buttonLocation: 'Solutions: Postgres Developers page hero' }, + }), + }, + { + label: 'Request a demo', + href: 'https://supabase.com/contact/sales', + type: 'default' as any, + onClick: () => + sendTelemetryEvent({ + action: 'request_demo_button_clicked', + properties: { buttonLocation: 'Solutions: Postgres Developers page hero' }, + }), + }, + ], + }, + why: { + id: 'why-supabase', + label: '', + heading: ( + <> + Why Postrges developers choose Supabase + + ), + subheading: + 'Supabase provides full access to Postgres. Use additional components, or just use the database. No proprietary tooling, no vendor lock-in. Supabase is Postgres the way you want it.', + features: [ + { + id: 'full-postgres', + icon: (props: any) => ( + + + + + ), + heading: 'Full Postgres', + subheading: + 'Connect to Supabase via sql, pgAdmin, or any standard Postgres client. Use native Postgres extensions. Employ Row-Level Security, not a bolt-on permission system.', + }, + { + id: 'development-platform', + icon: CubeIcon, + heading: 'Complete development platform', + subheading: + 'Supabase offers a fully integrated suite of tools including authentication, storage, edge functions, real-time subscriptions, and vector search. Developers don’t have to stitch together multiple services. Use one or all.', + }, + { + id: 'scalable-and-dependable', + icon: Timer, + heading: 'Scalable and dependable', + subheading: + 'Keep your workflows, tools, and database expertise. Self-host if you need it. Full deployment if you prefer, including automated backups, Point-in-Time Recovery (PITR), and fine-tuned observability via query logs, pg_stat_activity, and EXPLAIN ANALYZE.', + }, + ], + }, + platform: { + id: 'postgres-platform', + title: ( + <> + Supabase is the Postgres platform you control + + ), + subheading: + 'Supabase includes everything you need to create the perfect app for your brand, business, or just for fun.', + className: cn( + '[&_div.grid>div:first-child]:sm:!border-l-0', + '[&_div.grid>div]:sm:-m-px', + '[&_div.grid>div:nth-child(2n+1)]:sm:!border-l', + '[&_div.grid>div:nth-child(2n+2)]:sm:!border-t', + '[&_div.grid>div:nth-child(3n+3)]:lg:!border-l-0', + '[&_div.grid>div:nth-child(2)]:lg:!border-t-0' + ), + features: [ + { + id: 'database', + title: 'Database', + isDatabase: true, + icon: MainProducts[PRODUCT_SHORTNAMES.DATABASE].icon, + subheading: ( + <> + A fully managed Postgres database. +
    No forks: 100% pure Postgres. + + ), + className: 'sm:col-span-2 flex-col px-4 lg:pr-0 lg:flex-row', + image: ( +
    +
    + + + + + + + + + {[ + { name: 'Jon Meyers', pub: 'All', active: false }, + { name: 'Chris Martin', pub: 'All', active: true }, + { name: 'Amy Quek', pub: 'No', active: false }, + { name: 'Riccardo Bussetti', pub: 'No', active: false }, + { name: 'Beng Eu', pub: 'All', active: false }, + { name: 'Tyler Hillery', pub: 'All', active: false }, + ].map((row) => ( + + + + + ))} + +
    + NAME + + PUBLICATION +
    {row.name}{row.pub}
    +
    +
    +
    + ), + highlights: ( +
      +
    • + 100% portable +
      • +
    • + Built-in Auth with RLS +
      • +
    • + Easy to extend +
      • +
    + ), + }, + { + id: 'authentication', + title: 'Authentication', + icon: MainProducts[PRODUCT_SHORTNAMES.AUTHENTICATION].icon, + subheading: ( + <> + Secure authentication with email/password, + magic links, OAuth (Google, GitHub, Twitter, etc.), SAML, SSO, and phone/SMS OTP. + + ), + className: '!border-l-0 sm:!border-l sm:!border-t-0', + image: , + }, + { + id: 'rbac', + title: 'Role-Based Access Control', + icon: 'M17.6874 22.888V20.3886C17.6874 17.5888 15.4178 15.3192 12.618 15.3192C9.8182 15.3192 7.54852 17.5888 7.54852 20.3886V22.888M21.5531 11.5235C21.8189 14.1669 20.9393 16.9038 18.9141 18.9289C18.5359 19.3072 18.1328 19.6455 17.7101 19.9438M20.8038 8.70448C20.3598 7.71036 19.7299 6.77911 18.9141 5.96334C15.3338 2.38299 9.52889 2.38299 5.94855 5.96334C4.17501 7.73687 3.28 10.0562 3.26352 12.3807M24.0875 13.1161L23.2046 12.2332C22.3264 11.355 20.9026 11.355 20.0244 12.2332L19.1415 13.1161M0.875198 10.9503L1.75809 11.8331C2.63629 12.7113 4.06012 12.7113 4.93832 11.8331L5.82121 10.9503M7.49904 20.4919C5.77226 19.4557 4.37848 17.8555 3.62143 15.8584M15.6799 12.1942C15.6799 13.9201 14.2808 15.3192 12.5549 15.3192C10.829 15.3192 9.42993 13.9201 9.42993 12.1942C9.42993 10.4683 10.829 9.06917 12.5549 9.06917C14.2808 9.06917 15.6799 10.4683 15.6799 12.1942Z', + subheading: <>Secure your data properly., + className: '!border-l-0', + image: ( + Role Based Access Control diagram + ), + }, + { + id: 'realtime', + title: 'Realtime', + icon: MainProducts[PRODUCT_SHORTNAMES.REALTIME].icon, + subheading: ( + <> + Postgres replication enables{' '} + live sync functionality for collaborative + applications. + + ), + className: '!border-l-0 sm:!border-l', + image: ( + + ), + }, + { + id: 'storage', + title: 'Storage', + icon: MainProducts[PRODUCT_SHORTNAMES.STORAGE].icon, + subheading: ( + <> + Scalable S3-compatible object storage for + managing files, images, and videos. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Storage + ), + }, + { + id: 'edge-functions', + title: 'Edge Functions', + icon: MainProducts[PRODUCT_SHORTNAMES.FUNCTIONS].icon, + subheading: ( + <> + Serverless functions powered by Deno, + deployed globally for low-latency execution. + + ), + className: '!border-l-0 sm:!border-l lg:!border-l-0', + image: , + }, + { + id: 'vectors', + title: 'Vectors', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + pgvector extension + for AI/ML applications, enabling fast semantic search and embedding storage. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Vector embeddings + ), + }, + { + id: 'row-level-security', + title: 'Row Level Security', + icon: '', + subheading: ( + <> + Granular access control policies to secure + data at the row level. + + ), + image: ( + Row Level Security + ), + }, + { + id: 'row-level-security', + title: 'Full SQL access', + icon: '', + subheading: ( + <> + Supabase supports{' '} + + CTEs, triggers, foreign keys, JSONB, full-text search + + , and more. + + ), + className: 'sm:!border-l-0', + image: ( + Row Level Security + ), + }, + { + id: 'Postgres functions', + title: 'Postgres functions', + icon: '', + subheading: ( + <> + Run backend logic in the database if you prefer using stored procedures, PL/pgSQL, and + custom functions. + + ), + image: ( +
    +
    +
    +
    +
    + Add a new Function +
    +
    +
    +
    +

    Name of function

    + +
    + + + Name will also be used for the function name in postgres + +
    +
    +
    +
    + ), + }, + { + id: 'Postgres extensions', + title: 'Postgres extensions', + icon: '', + subheading: ( + <> + Tap into the full Posgres ecosystem, + including pgvector, PostGIS, pg_stat_statements, and over XX more Postgres extensions. + + ), + image: ( +
    +
    +
    +
    +

    + PGTAP +

    +
    + + +
    +
    +

    Unit testing for PostreSQL

    +
    +
    +
    + ), + }, + ], + }, + developerExperience: { + id: 'developer-experience', + className: '[&_h2]:!max-w-sm', + title: ( + <> + Developers can build faster with Supabase + + ), + subheading: 'Features that help developers move quickly and focus.', + features: [ + { + id: 'ai-assistant', + title: 'AI Assistant', + icon: 'M11.8949 2.39344C12.5051 1.78324 13.4944 1.78324 14.1046 2.39344L22.9106 11.1994C23.5208 11.8096 23.5208 12.7989 22.9106 13.4091L14.1046 22.2151C13.4944 22.8253 12.5051 22.8253 11.8949 22.2151L3.08892 13.4091C2.47872 12.7989 2.47872 11.8096 3.08892 11.1994L11.8949 2.39344Z M16.5408 12.3043C16.5408 14.2597 14.9556 15.8449 13.0002 15.8449C11.0448 15.8449 9.45961 14.2597 9.45961 12.3043C9.45961 10.3489 11.0448 8.76371 13.0002 8.76371C14.9556 8.76371 16.5408 10.3489 16.5408 12.3043Z', + subheading: ( + <> + A single panel that persists across the Supabase Dashboard and maintains{' '} + context across AI prompts. + + ), + image: ( +
    +
    + + + +
    +

    AI Assistant

    + +
    +
    +
    +

    Entity: Auth

    +

    Schema:

    +

    + Issue: We have detected that you have enabled the email provider with an expiry + time of more than an hour. It is recommended to set this value to less th... +

    +
    +
    + ), + }, + { + id: 'mcp-server', + title: 'MCP Server', + icon: 'M19 5L22 2M2 22L5 19M7.5 13.5L10 11M10.5 16.5L13 14M6.3 20.3C6.52297 20.5237 6.78791 20.7013 7.07963 20.8224C7.37136 20.9435 7.68413 21.0059 8 21.0059C8.31587 21.0059 8.62864 20.9435 8.92036 20.8224C9.21209 20.7013 9.47703 20.5237 9.7 20.3L12 18L6 12L3.7 14.3C3.47626 14.523 3.29873 14.7879 3.17759 15.0796C3.05646 15.3714 2.99411 15.6841 2.99411 16C2.99411 16.3159 3.05646 16.6286 3.17759 16.9204C3.29873 17.2121 3.47626 17.477 3.7 17.7L6.3 20.3ZM12 6L18 12L20.3 9.7C20.5237 9.47703 20.7013 9.21209 20.8224 8.92036C20.9435 8.62864 21.0059 8.31587 21.0059 8C21.0059 7.68413 20.9435 7.37136 20.8224 7.07963C20.7013 6.78791 20.5237 6.52297 20.3 6.3L17.7 3.7C17.477 3.47626 17.2121 3.29873 16.9204 3.17759C16.6286 3.05646 16.3159 2.99411 16 2.99411C15.6841 2.99411 15.3714 3.05646 15.0796 3.17759C14.7879 3.29873 14.523 3.47626 14.3 3.7L12 6Z', + subheading: ( + <> + Connect your favorite AI tools such as Cursor + or Claude directly with Supabase. + + ), + image: ( + Vector embeddings + ), + }, + { + id: 'auto-generated-apis', + title: 'Auto-generated APIs', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + Learn SQL when you're ready. In the meantime, + Supabase generates automatic APIs to make coding a lot easier. + + ), + image: ( + Auto Generated APIs + ), + }, + { + id: 'foreign-data-wrappers', + title: 'Foreign Data Wrappers', + icon: 'M10.2805 18.2121C11.2419 18.6711 12.3325 18.8932 13.4711 18.8084C15.2257 18.6776 16.7596 17.843 17.8169 16.6015M8.21496 8.36469C9.27117 7.14237 10.7928 6.322 12.5311 6.19248C13.7196 6.10392 14.8558 6.34979 15.8474 6.85054M17.8169 16.6015L20.5242 19.3223C22.1857 17.5141 23.1562 15.1497 23.1562 12.5005C23.1562 6.89135 18.6091 2.34424 13 2.34424C10.9595 2.34424 9.16199 2.87659 7.57035 3.91232C8.35717 3.56865 9.22613 3.37801 10.1396 3.37801C12.6236 3.37801 14.7783 4.78762 15.8474 6.85054M17.8169 16.6015V16.6015C16.277 15.059 16.3448 12.5527 16.5387 10.3817C16.5557 10.191 16.5644 9.99794 16.5644 9.80282C16.5644 8.73844 16.3056 7.73451 15.8474 6.85054M13 22.6567C7.39086 22.6567 2.84375 18.1096 2.84375 12.5005C2.84375 9.84123 3.8026 7.48969 5.4753 5.67921L8.21496 8.42354V8.42354C9.76942 9.98064 9.69844 12.5133 9.51947 14.7062C9.50526 14.8803 9.49802 15.0564 9.49802 15.2341C9.49802 18.7705 12.3648 21.6373 15.9012 21.6373C16.8116 21.6373 17.6776 21.4473 18.4618 21.1048C16.8609 22.1588 15.06 22.6567 13 22.6567Z', + subheading: ( + <> + Connect Supabase to Redshift, BigQuery, MySQL + , and external APIs for seamless integrations. + + ), + image: ( + Foreign Data Wrappers + ), + }, + { + id: 'instant-deployment', + title: 'Instant and secure deployment', + icon: 'M12.5 1.5625C6.45939 1.5625 1.5625 6.45939 1.5625 12.5C1.5625 18.5406 6.45939 23.4375 12.5 23.4375C18.5406 23.4375 23.4375 18.5406 23.4375 12.5C23.4375 9.90692 22.5351 7.52461 21.0273 5.64995L11.6145 15.0627L9.61957 13.0677M12.6068 5.82237C8.92939 5.82237 5.94826 8.80351 5.94826 12.4809C5.94826 16.1583 8.92939 19.1395 12.6068 19.1395C16.2842 19.1395 19.2654 16.1583 19.2654 12.4809C19.2654 11.1095 18.8507 9.83483 18.14 8.77557', + subheading: ( + <> + No need to set up servers, manage DevOps, or + tweak security settings. + + ), + + image: ( + <> + background grid +
    + Postgres slonik elephant + + ), + }, + { + id: 'observability', + title: 'Observability', + icon: 'M11.1404 7.66537C11.1404 5.18146 13.1541 3.16785 15.638 3.16785H17.3775C19.8614 3.16785 21.875 5.18146 21.875 7.66537V17.3776C21.875 19.8615 19.8614 21.8751 17.3775 21.8751H15.638C13.1541 21.8751 11.1404 19.8615 11.1404 17.3776V7.66537Z M3.125 14.7821C3.125 13.4015 4.24419 12.2823 5.62477 12.2823C7.00536 12.2823 8.12454 13.4015 8.12454 14.7821V19.3754C8.12454 20.7559 7.00536 21.8751 5.62477 21.8751C4.24419 21.8751 3.125 20.7559 3.125 19.3754V14.7821Z M3.125 5.58522C3.125 4.20463 4.24419 3.08545 5.62477 3.08545C7.00536 3.08545 8.12454 4.20463 8.12454 5.58522V6.95164C8.12454 8.33223 7.00536 9.45142 5.62477 9.45142C4.24419 9.45142 3.125 8.33223 3.125 6.95164V5.58522Z', + subheading: ( + <> + Built-in logs, query performance tools, and security insights for{' '} + easy debugging. + + ), + image: ( + + ), + }, + ], + }, + resultsSection: { + id: 'results', + heading: ( + <> + Top performance, +
    + at any scale + + ), + subheading: + "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.", + highlights: [ + { + heading: 'databases managed', + subheading: companyStats.databasesManaged, + }, + { + heading: 'databases launched daily', + subheading: companyStats.databasesLaunchedDaily, + }, + ], + }, + featureGrid: { + id: 'database-features', + features: [ + { + id: 'postgres-core', + title: 'Postgres at its core', + description: ( + <> + ACID-compliant, battle-tested database{' '} + trusted by enterprises and startups. + + ), + icon: 'M13.2689 14.9229C14.04 16.494 15.6379 17.4892 17.3881 17.4893H22.0892C22.4726 17.4893 22.7843 17.8003 22.7845 18.1836C22.7845 18.5671 22.4728 18.8789 22.0892 18.8789H20.1664C20.1564 21.0605 18.171 22.4853 16.0052 22.4854C14.044 22.4854 12.4009 21.1292 11.9603 19.3037L11.9213 19.126L11.9086 18.9854C11.9116 18.6624 12.1408 18.3748 12.4701 18.3105C12.7994 18.2463 13.1203 18.4265 13.2445 18.7246L13.2845 18.8594L13.3412 19.0947C13.6746 20.251 14.742 21.0967 16.0052 21.0967C17.6551 21.0966 18.7655 20.0649 18.7758 18.8789H17.3881C15.108 18.8788 13.0263 17.5811 12.0218 15.5342L13.2689 14.9229ZM18.7767 15.6787V11.4639C18.7766 8.09738 16.0476 5.36816 12.681 5.36816H11.7269C11.7032 5.36816 11.6797 5.36364 11.6566 5.36133H7.15564C6.5783 5.36133 6.05835 5.69927 5.82068 6.21777L5.77673 6.32422L4.26404 10.4443C4.03486 11.0686 4.21563 11.7696 4.71814 12.2051L5.75622 13.1045L5.93298 13.2754C6.32193 13.694 6.54138 14.2468 6.54138 14.8242V16.4775L6.5531 16.7227C6.67574 17.9298 7.69544 18.8721 8.93493 18.8721C9.2213 18.8721 9.45986 18.6685 9.51501 18.3984L9.52771 18.2793V10.9121C9.52772 9.33737 10.1566 7.82755 11.2748 6.71875L11.3842 6.63086C11.6543 6.45411 12.0199 6.48475 12.2562 6.72266C12.5263 6.995 12.5247 7.43503 12.2523 7.70508L12.097 7.86816C11.3396 8.69814 10.9164 9.78304 10.9164 10.9121V18.2793L10.9056 18.4814C10.8044 19.4807 9.96094 20.2607 8.93493 20.2607C6.91113 20.2607 5.25814 18.6714 5.15661 16.6729L5.15173 16.4775V14.8242C5.15173 14.5993 5.06693 14.3838 4.9154 14.2207L4.84607 14.1543L3.80798 13.2549C2.86934 12.4414 2.53223 11.1318 2.96033 9.96582L4.47302 5.84473L4.55798 5.63867C5.02039 4.62971 6.03224 3.97266 7.15564 3.97266H11.8246V3.97949H12.681C16.8146 3.97949 20.1662 7.33032 20.1664 11.4639V15.6787C20.1664 16.0622 19.8546 16.373 19.4711 16.373C19.0877 16.3728 18.7767 16.0621 18.7767 15.6787ZM12.3392 14.6055C12.6835 14.4365 13.1 14.5785 13.2689 14.9229L12.0218 15.5342C11.8532 15.1901 11.9953 14.7745 12.3392 14.6055Z M14.4779 10.7135C14.4779 11.1278 14.8137 11.4635 15.2279 11.4635C15.6421 11.4635 15.9779 11.1278 15.9779 10.7135C15.9779 10.2993 15.6421 9.96354 15.2279 9.96354C14.8137 9.96354 14.4779 10.2993 14.4779 10.7135Z', + iconNoStroke: true, + }, + { + id: 'scaling', + title: 'Horizontal & Vertical Scaling', + description: ( + <> + Scale compute and storage independently, including support for{' '} + read replicas. + + ), + icon: 'M14.2847 11.1404V7.8447C14.2847 5.36078 12.2711 3.34717 9.7872 3.34717H7.84476C5.36084 3.34717 3.34723 5.36078 3.34723 7.8447V9.78714C3.34723 12.2711 5.36084 14.2847 7.84476 14.2847H11.1253M8.63752 8.65306L18.4524 18.468M19.1282 14.068V16.5986C19.1282 17.8405 18.1214 18.8474 16.8794 18.8474H14.2847M15.6573 22.0972H17.5997C20.0836 22.0972 22.0972 20.0836 22.0972 17.5996V15.6572C22.0972 13.1733 20.0836 11.1597 17.5997 11.1597H15.6573C13.1733 11.1597 11.1597 13.1733 11.1597 15.6572V17.5996C11.1597 20.0836 13.1733 22.0972 15.6573 22.0972Z', + }, + { + id: 'multi-region', + title: 'Multi-region Deployments', + description: ( + <> + Deploy databases across multiple regions for{' '} + global availability. + + ), + icon: 'M8.48462 3.05339C6.79298 3.58819 5.33457 4.64831 4.30037 6.0436C3.4029 7.25444 2.82613 8.71636 2.69516 10.306H6.77142C6.83771 8.01994 7.22916 5.93809 7.84745 4.36313C8.03485 3.88578 8.24723 3.44433 8.48462 3.05339ZM10.9999 1.27832C7.79633 1.27832 4.95467 2.82842 3.18457 5.21656C1.98658 6.83284 1.2778 8.83471 1.2778 11.0001C1.2778 13.1781 1.99476 15.1906 3.20527 16.8117C4.97675 19.1842 7.80877 20.7225 10.9999 20.7225C14.191 20.7225 17.023 19.1841 18.7944 16.8117C20.005 15.1906 20.722 13.1781 20.722 11.0001C20.722 8.83471 20.0132 6.83284 18.8152 5.21656L18.7944 5.18864C17.0229 2.81635 14.1909 1.27832 10.9999 1.27832ZM10.9999 2.66721C10.768 2.66721 10.4732 2.78413 10.1294 3.15462C9.78466 3.52602 9.44227 4.10142 9.14028 4.87067C8.596 6.2571 8.22699 8.16013 8.16092 10.306H13.8389C13.7728 8.16013 13.4038 6.2571 12.8595 4.87067C12.5575 4.10142 12.2151 3.52602 11.8704 3.15462C11.5265 2.78413 11.2318 2.66721 10.9999 2.66721ZM15.2284 10.306C15.1621 8.01994 14.7706 5.93809 14.1523 4.36313C13.9649 3.88578 13.7525 3.44433 13.5152 3.05339C15.1971 3.58512 16.6485 4.63618 17.6816 6.01966L17.6994 6.0436C18.5969 7.25443 19.1737 8.71636 19.3046 10.306H15.2284ZM13.8389 11.6949H8.16092C8.22699 13.8407 8.596 15.7437 9.14028 17.1301C9.44227 17.8994 9.78466 18.4748 10.1294 18.8462C10.4732 19.2167 10.768 19.3336 10.9999 19.3336C11.2318 19.3336 11.5265 19.2167 11.8704 18.8462C12.2151 18.4748 12.5575 17.8994 12.8595 17.1301C13.4038 15.7437 13.7728 13.8407 13.8389 11.6949ZM13.5152 18.9473C13.7526 18.5564 13.965 18.115 14.1523 17.6377C14.7706 16.0627 15.1621 13.9809 15.2284 11.6949H19.3046C19.1727 13.2947 18.5892 14.7653 17.6816 15.9807C16.6485 17.3643 15.1971 18.4155 13.5152 18.9473ZM8.48458 18.9474C8.24721 18.5564 8.03484 18.115 7.84745 17.6377C7.22916 16.0627 6.83771 13.9809 6.77142 11.6949H2.6952C2.82712 13.2947 3.41061 14.7653 4.31815 15.9808C5.35126 17.3644 6.80264 18.4156 8.48458 18.9474Z', + iconNoStroke: true, + }, + { + id: 'high-availability', + title: 'High Availability Architecture', + description: ( + <> + Enterprise plans offer{' '} + automatic failover and redundancy for + mission-critical applications. + + ), + icon: 'M16.3046 3.24514C15.3004 2.91279 14.2268 2.73291 13.1111 2.73291C7.50197 2.73291 2.95486 7.28002 2.95486 12.8892C2.95486 18.4983 7.50197 23.0454 13.1111 23.0454C18.7203 23.0454 23.2674 18.4983 23.2674 12.8892C23.2674 10.5703 22.4902 8.4329 21.1822 6.72328L12.2253 15.5572L10.2303 13.5622M13.2175 6.31682C9.54013 6.31682 6.55899 9.29795 6.55899 12.4809C6.55899 16.1583 9.54013 19.1395 13.2175 19.1395C16.895 19.1395 19.8761 16.1583 19.8761 12.4809C19.8761 11.1095 19.4615 9.83483 18.7507 8.77557', + }, + { + id: 'pitr', + title: 'Point-in-Time Recovery', + description: ( + <> + Restore your database to any point in time{' '} + for disaster recovery. + + ), + icon: 'M3.3784 13.3407C3.1413 10.4689 4.12132 7.51558 6.31845 5.31845C10.2847 1.35219 16.7153 1.35219 20.6816 5.31845C24.6478 9.28471 24.6478 15.7153 20.6816 19.6816C16.7153 23.6478 10.2847 23.6478 6.31845 19.6816C5.3819 18.745 4.6665 17.671 4.17224 16.5246M0.706939 11.443L2.28117 13.0172C2.89137 13.6274 3.88069 13.6274 4.49088 13.0172L6.06512 11.443M10.761 17.5453L16.0995 17.5453C16.9625 17.5453 17.662 16.8458 17.662 15.9828V15.7328C17.662 14.8699 16.9625 14.1703 16.0995 14.1703L10.761 14.1703C9.89806 14.1703 9.1985 14.8699 9.1985 15.7328L9.1985 15.9828C9.1985 16.8458 9.89806 17.5453 10.761 17.5453ZM11.1648 14.1711L15.6537 14.1711C16.5167 14.1711 17.2162 13.4716 17.2162 12.6086L17.2162 12.3586C17.2162 11.4956 16.5167 10.7961 15.6537 10.7961L11.1648 10.7961C10.3019 10.7961 9.60234 11.4956 9.60234 12.3586L9.60234 12.6086C9.60234 13.4716 10.3019 14.1711 11.1648 14.1711ZM10.7606 10.7963L16.0991 10.7963C16.9621 10.7963 17.6616 10.0967 17.6616 9.2338V8.98375C17.6616 8.1208 16.9621 7.42125 16.0991 7.42125L10.7606 7.42125C9.89765 7.42125 9.19809 8.12081 9.19809 8.98375L9.19809 9.2338C9.19809 10.0967 9.89765 10.7963 10.7606 10.7963Z', + }, + { + id: 'backups', + title: 'Automatic Backups', + description: ( + <> + Daily backups with retention policies for + added security. + + ), + icon: 'M22.375 5.7085C22.375 7.43439 18.1777 8.8335 13 8.8335C7.82233 8.8335 3.625 7.43439 3.625 5.7085M22.375 5.7085C22.375 3.98261 18.1777 2.5835 13 2.5835C7.82233 2.5835 3.625 3.98261 3.625 5.7085M22.375 5.7085V10.1877M3.625 5.7085L3.625 20.2918C3.62434 20.9675 4.28075 21.6251 5.49583 22.166C6.71091 22.7069 8.41919 23.1019 10.3646 23.2918M3.625 13.0002C3.6235 13.5826 4.11036 14.1536 5.03066 14.6487C5.95095 15.1438 7.26805 15.5434 8.83334 15.8022M13 13.0002V17.1668M13 17.1668H17.1667M13 17.1668L15.1771 14.9897C16.0833 14.0835 17.3438 13.521 18.7292 13.521C19.9724 13.521 21.1647 14.0149 22.0437 14.8939C22.9228 15.773 23.4167 16.9653 23.4167 18.2085C23.4167 19.3016 23.0727 20.3671 22.4336 21.2539C21.7944 22.1407 20.8924 22.8039 19.8554 23.1496C18.8183 23.4952 17.6988 23.5059 16.6554 23.1799C15.612 22.854 14.6975 22.208 14.0417 21.3335', + }, + ], + }, + securitySection: { + id: 'security', + label: 'Security', + heading: 'Trusted for medical records, missions to the moon, and everything in between', + subheading: + "Keep your data secure with SOC 2, HIPAA, and GDPR compliance. Your customers' data is encrypted at rest and in transit, with built-in tools for monitoring and managing security threats.", + features: [ + { + icon: ShieldCheck, + heading: 'SOC 2 Type II certified', + }, + { + icon: HeartPulse, + heading: 'HIPAA compliance', + }, + { + icon: ShieldAlert, + heading: 'DDoS Protection', + }, + { + icon: Lock, + heading: 'Multi-factor Authentication', + }, + { + icon: ClipboardCheck, + heading: 'Vulnerability Management', + }, + { + icon: Users, + heading: 'Role-based access control', + }, + { + icon: List, + heading: 'Database Audit Logs', + }, + { + icon: Lightbulb, + heading: 'Security Advisors', + }, + { + icon: FolderLock, + heading: 'Encrypted Storage', + }, + { + icon: UserX, + heading: 'Network restrictions', + }, + ], + cta: { + label: 'Learn about security', + url: '/security', + }, + }, + platformStarterSection: { + id: 'platform-starter', + heading: ( + <> + Choose your platform to start building in + seconds + + ), + headingRight: ( + <> + Or, start with Supabase AI Prompts{' '} + + + ), + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts', + leftFooter: ( +
    + {frameworks.map((framework) => ( + + ))} +
    + ), + aiPrompts: [ + { + id: 'auth-setup', + title: 'Bootstrap Next.js app with Supabase Auth', + description: + '## Overview of implementing Supabase Auth SSR\n1. Install @supabase/supabase-js and...', + code: `1. Install @supabase/supabase-js and @supabase/ssr packages. +2. Set up environment variables. +3. Write two utility functions with \u0060createClient\u0060 functions to create a browser client and a server client. +4. Hook up middleware to refresh auth tokens +`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/nextjs-supabase-auth', + }, + { + id: 'edge-functions', + title: 'Writing Supabase Edge Functions', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `1. Try to use Web APIs and Deno’s core APIs instead of external dependencies (eg: use fetch instead of Axios, use WebSockets API instead of node-ws) +2. If you are reusing utility methods between Edge Functions, add them to 'supabase/functions/_shared' and import using a relative path. Do NOT have cross dependencies between Edge Functions. +3. Do NOT use bare specifiers when importing dependecnies. If you need to use an external dependency, make sure it's prefixed with either 'npm:' or 'jsr:'. For example, '@supabase/supabase-js' should be written as 'npm:@supabase/supabase-js'. +4. For external imports, always define a version. For example, 'npm:@express' should be written as 'npm:express@4.18.2'. +5. For external dependencies, importing via 'npm:' and 'jsr:' is preferred. Minimize the use of imports from @'deno.land/x' , 'esm.sh' and @'unpkg.com' . If you have a package from one of those CDNs, you can replace the CDN hostname with 'npm:' specifier. +`, + language: 'markdown', + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts/edge-functions', + }, + { + id: 'declarative-db-schema', + title: 'Declarative Database Schema', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `Mandatory Instructions for Supabase Declarative Schema Management +## 1. **Exclusive Use of Declarative Schema** +-**All database schema modifications must be defined within '.sql' files located in the 'supabase/schemas/' directory.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/declarative-database-schema', + }, + { + id: 'rls-policies', + title: 'Create RLS policies', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate a policy with the constraints given by the user. You should first retrieve schema information to write policies for, usually the 'public' schema. +The output should use the following instructions: + +- The generated SQL must be valid SQL.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/database-rls-policies', + }, + ], + }, + mcp: { + id: 'mcp', + heading: ( +
    + Supabase MCP server works seamlessly with{' '} + your favorite AI code editor +
    + ), + ctaLabel: 'Connect your AI tools', + documentationLink: '/docs/guides/getting-started/mcp', + frameworks: editors, + apiExamples: [ + { + lang: 'json', + title: 'macOS', + code: `{ +"mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows', + code: `{ +"mcpServers": { + "supabase": { + "command": "cmd", + "args": [ + "/c", + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows (WSL)', + code: `{ +"mcpServers": { + "supabase": { + "command": "wsl", + "args": [ + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Linux', + code: `{ + "mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } + } +}`, + }, + ], + }, + } +} + +export const getEditors: (isXs: boolean) => FrameworkLinkProps[] = (isXs) => [ + { + name: 'Cursor', + icon: ( + + + + + + + + + + + + + + + + + + + ), + docs: '/docs/guides/getting-started/mcp#cursor', + }, + { + name: 'Visual Studio Code (Copilot)', + icon: 'M50.1467 13.5721C50.2105 13.572 50.2743 13.5724 50.3382 13.576C50.3414 13.5762 50.3447 13.5768 50.3479 13.577C50.4258 13.5816 50.5036 13.5892 50.5813 13.5995C50.5895 13.6006 50.5976 13.6022 50.6057 13.6034C50.9388 13.6498 51.2689 13.7462 51.5833 13.8983L62.4924 19.1756C63.5692 19.6966 64.2777 20.757 64.3596 21.9442C64.3653 22.0231 64.3684 22.1026 64.3684 22.1825V22.3104C64.3684 22.301 64.3676 22.2914 64.3674 22.2821V57.8417C64.3675 57.834 64.3684 57.8259 64.3684 57.8182V57.9461C64.3684 57.9598 64.3666 57.9736 64.3665 57.9872C64.354 59.2535 63.6289 60.4044 62.4924 60.954L51.5833 66.2303C51.194 66.4187 50.7811 66.5227 50.3674 66.5497C50.3525 66.5507 50.3375 66.5518 50.3225 66.5526C50.2401 66.5568 50.1577 66.5585 50.0755 66.5565C49.6814 66.5509 49.2901 66.476 48.9221 66.3319C48.5051 66.1688 48.1177 65.918 47.7874 65.5858L26.9163 46.4471L17.8372 53.3749C17.4137 53.6981 16.9059 53.8466 16.4055 53.8241H16.3743C15.8739 53.8018 15.3809 53.6085 14.9876 53.2489L12.0706 50.5809C11.1081 49.7012 11.1073 48.1798 12.0686 47.2987L19.9573 40.0643L12.0676 32.8299C11.1064 31.9489 11.108 30.4273 12.0706 29.5477L14.9876 26.8797C15.3809 26.5201 15.8739 26.3269 16.3743 26.3045H16.594C17.032 26.3224 17.4668 26.4713 17.8372 26.7538L26.9163 33.6815L47.7874 14.5428C47.9113 14.4183 48.0433 14.3052 48.1819 14.204C48.7277 13.8051 49.3759 13.5895 50.0354 13.5721H50.0715C50.0966 13.5716 50.1217 13.5721 50.1467 13.5721ZM35.2825 40.0643L51.0969 52.1307V27.9969L35.2825 40.0643Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, + { + name: 'Claude', + icon: 'M22.1027 49.8962L33.9052 43.2734L34.1027 42.6962L33.9052 42.3772H33.328L31.3534 42.2557L24.609 42.0734L18.7609 41.8304L13.0951 41.5266L11.6673 41.2228L10.3306 39.4608L10.4673 38.5797L11.6673 37.7747L13.3837 37.9266L17.1812 38.1848L22.8774 38.5797L27.009 38.8228L33.1306 39.4608H34.1027L34.2394 39.0658L33.9052 38.8228L33.647 38.5797L27.7534 34.5848L21.3736 30.362L18.0318 27.9316L16.2242 26.7013L15.3128 25.5468L14.9179 23.0253L16.5584 21.2177L18.7609 21.3696L19.323 21.5215L21.5559 23.238L26.3255 26.9291L32.5534 31.5165L33.4647 32.276L33.8293 32.0177L33.8749 31.8354L33.4647 31.1519L30.0774 25.0304L26.4622 18.8025L24.8521 16.2203L24.4268 14.6709C24.2749 14.0329 24.1685 13.5013 24.1685 12.8481L26.0369 10.3114L27.0698 9.97722L29.5609 10.3114L30.609 11.2228L32.1584 14.762L34.6647 20.3367L38.5534 27.9165L39.6926 30.1646L40.3002 32.2456L40.528 32.8835H40.923V32.519L41.242 28.2506L41.8344 23.0101L42.4116 16.2658L42.609 14.3671L43.5508 12.0886L45.4192 10.8582L46.8774 11.557L48.0774 13.2734L47.9103 14.3823L47.1964 19.0152L45.7989 26.276L44.8875 31.1367H45.4192L46.0268 30.5291L48.4875 27.2633L52.6192 22.0987L54.442 20.0481L56.5685 17.7848L57.9356 16.7063H60.5179L62.4166 19.5316L61.566 22.4481L58.9078 25.8203L56.7052 28.676L53.5458 32.9291L51.5711 36.3316L51.7534 36.6051L52.2242 36.5595L59.3635 35.0405L63.2217 34.3418L67.8242 33.5519L69.9053 34.5241L70.1331 35.5114L69.3128 37.5316L64.3913 38.7468L58.6192 39.9013L50.0217 41.9367L49.9154 42.0127L50.0369 42.1646L53.9103 42.5291L55.566 42.6203H59.6217L67.1711 43.1823L69.1458 44.4886L70.3306 46.0835L70.1331 47.2987L67.0951 48.8481L62.9939 47.876L53.4242 45.5975L50.1432 44.7772H49.6875V45.0506L52.4217 47.7241L57.4344 52.2506L63.7078 58.0835L64.0268 59.5266L63.2217 60.6658L62.3711 60.5443L56.8571 56.3975L54.7306 54.5291L49.9154 50.4734H49.5964V50.8987L50.7052 52.5241L56.5685 61.3342L56.8723 64.038L56.447 64.919L54.928 65.4506L53.2571 65.1468L49.8242 60.3316L46.285 54.9089L43.4293 50.0481L43.0799 50.2456L41.3939 68.3975L40.604 69.3241L38.7812 70.0228L37.2622 68.8684L36.4571 67L37.2622 63.3089L38.2344 58.4937L39.0242 54.6658L39.7382 49.9114L40.1635 48.3316L40.1331 48.2253L39.7837 48.2709L36.1989 53.1924L30.7458 60.5595L26.4318 65.1772L25.3989 65.5873L23.6065 64.6608L23.7736 63.0051L24.7761 61.5316L30.7458 53.9367L34.3458 49.2279L36.6698 46.5089L36.6546 46.1139H36.5179L20.6597 56.4127L17.8344 56.7772L16.6192 55.638L16.7711 53.7696L17.3483 53.162L22.1179 49.881L22.1027 49.8962Z', + docs: '/docs/guides/getting-started/mcp#claude-code', + }, + { + name: 'Windsurf', + icon: 'M70.1801 22.6639H69.6084C66.5989 22.6592 64.1571 25.0966 64.1571 28.1059V40.2765C64.1571 42.7069 62.1485 44.6756 59.7579 44.6756C58.3377 44.6756 56.9197 43.9607 56.0785 42.7608L43.6475 25.0076C42.6163 23.5334 40.9384 22.6545 39.1219 22.6545C36.2885 22.6545 33.7386 25.0638 33.7386 28.0379V40.2788C33.7386 42.7092 31.7465 44.6779 29.3395 44.6779C27.9146 44.6779 26.499 43.9631 25.6576 42.7631L11.748 22.8983C11.434 22.4506 10.7285 22.6709 10.7285 23.2193V33.8338C10.7285 34.3705 10.8926 34.8908 11.1996 35.3314L24.8866 54.8798C25.6952 56.0352 26.8881 56.893 28.2638 57.2047C31.7066 57.9876 34.8752 55.3369 34.8752 51.9596V39.7258C34.8752 37.2954 36.844 35.3267 39.2742 35.3267H39.2812C40.7462 35.3267 42.1196 36.0415 42.9609 37.2414L55.3916 54.9924C56.4251 56.4688 58.0166 57.3455 59.9149 57.3455C62.8116 57.3455 65.2935 54.9336 65.2935 51.962V39.7234C65.2935 37.293 67.2622 35.3243 69.6927 35.3243H70.1777C70.4825 35.3243 70.7285 35.0783 70.7285 34.7736V23.2123C70.7285 22.9076 70.4825 22.6615 70.1777 22.6615L70.1801 22.6639Z', + docs: '/docs/guides/getting-started/mcp#windsurf', + }, + { + name: 'Cline', + icon: 'M40.6646 10C42.5072 10 44.2747 10.7322 45.5776 12.0352C46.8803 13.338 47.6118 15.1049 47.6118 16.9473C47.6118 18.0072 47.3683 19.0415 46.9146 19.9775H53.1167C59.9917 19.9775 65.5669 25.5779 65.5669 32.4854V36.6523L69.1919 43.8926C69.3687 44.2454 69.4603 44.6347 69.4595 45.0293C69.4586 45.424 69.3654 45.813 69.187 46.165L65.5669 53.3252V57.4951C65.5668 64.4001 59.9917 70 53.1167 70H28.2144C21.337 69.9998 15.7652 64.4 15.7651 57.4951V53.3252L12.065 46.1875C11.8788 45.8299 11.7811 45.4325 11.7798 45.0293C11.7786 44.6263 11.8734 44.2288 12.0571 43.8701L15.7622 36.6523V32.4854C15.7622 25.5779 21.3374 19.9775 28.2124 19.9775H34.4146C33.9609 19.0416 33.7173 18.0071 33.7173 16.9473C33.7174 15.1048 34.4496 13.338 35.7525 12.0352C37.0553 10.7323 38.8221 10.0001 40.6646 10ZM49.5073 34C47.9996 34 46.553 34.5989 45.4868 35.665C44.4209 36.7311 43.8219 38.1771 43.8218 39.6846V49.79C43.8218 51.2976 44.4209 52.7435 45.4868 53.8096C46.553 54.8757 47.9996 55.4746 49.5073 55.4746C51.015 55.4746 52.4608 54.8757 53.5269 53.8096C54.593 52.7434 55.1919 51.2978 55.1919 49.79V39.6846C55.1918 38.9379 55.0451 38.1986 54.7593 37.5088C54.4734 36.8189 54.054 36.192 53.5259 35.6641C52.9978 35.1362 52.3711 34.7172 51.6812 34.4316C50.9912 34.1461 50.2541 33.9997 49.5073 34ZM31.1919 34C29.6843 34.0001 28.2385 34.599 27.1724 35.665C26.1063 36.7311 25.5075 38.177 25.5073 39.6846V49.79C25.5385 51.2768 26.1509 52.692 27.2134 53.7324C28.2759 54.7729 29.7038 55.3555 31.1909 55.3555C32.678 55.3555 34.106 54.7729 35.1685 53.7324C36.2309 52.692 36.8433 51.2768 36.8745 49.79V39.6846C36.8744 38.1774 36.276 36.732 35.2105 35.666C34.1449 34.5999 32.6992 34.0007 31.1919 34Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, +] + +const ControlledSwitch = () => { + const [isOn, setIsOn] = useState(true) + return setIsOn(!isOn)} /> +} + +export default data diff --git a/apps/www/data/solutions/solutions.types.ts b/apps/www/data/solutions/solutions.types.ts deleted file mode 100644 index 72b29dec59f97..0000000000000 --- a/apps/www/data/solutions/solutions.types.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { LucideIcon } from 'lucide-react' -import type { ComponentType, SVGProps } from 'react' - -export type HeroIcon = ComponentType> -export type IconType = LucideIcon | HeroIcon - -interface Metadata { - metaTitle: string - metaDescription: string -} - -export interface HeroSection { - id: string - title: string - h1: JSX.Element - subheader: JSX.Element[] - image: JSX.Element - className?: string - sectionContainerClassName?: string - icon?: string - ctas: { - label: string - href: string - type: 'primary' | 'default' - }[] - logos: { - name: string - image: string - }[] - footer?: React.ReactNode - footerPosition?: 'left' | 'right' -} - -export interface Quote { - icon?: string - author: string - authorTitle?: string - quote: JSX.Element - avatar: string -} - -export interface Quotes { - id: string - items: Quote[] -} - -export interface Highlight { - icon?: IconType - heading: string | JSX.Element - subheading: string | JSX.Element - url?: string -} - -export interface Feature { - id?: string - icon?: IconType | string - iconNoStroke?: boolean - heading: string | JSX.Element - subheading: string | JSX.Element - img?: JSX.Element -} - -export interface FeaturesSection { - id: string - label?: string - heading: JSX.Element - subheading?: string - features: Feature[] - // { - // [key: string]: Feature - // } -} - -export interface Testimonials { - id: string - label: string - heading: JSX.Element - videos: { - [key: string]: { - url: string - } - } -} - -interface CTASection { - id: string - label: string - heading: JSX.Element | string - subheading: string - cta: { - label: string - href: string - type: string - } -} - -export interface AIData { - metadata: Metadata - heroSection: HeroSection - quotes: Quotes - why: FeaturesSection - features: FeaturesSection - testimonials: Testimonials - 'cta-section': CTASection -} diff --git a/apps/www/data/solutions/solutions.utils.tsx b/apps/www/data/solutions/solutions.utils.tsx new file mode 100644 index 0000000000000..ec0e654441557 --- /dev/null +++ b/apps/www/data/solutions/solutions.utils.tsx @@ -0,0 +1,225 @@ +import { useBreakpoint } from 'common' +import { LucideIcon } from 'lucide-react' +import Link from 'next/link' +import type { ComponentType, SVGProps } from 'react' +import { cn } from 'ui' + +export type HeroIcon = ComponentType> +export type IconType = LucideIcon | HeroIcon + +export interface Metadata { + metaTitle: string + metaDescription: string +} + +export interface HeroSection { + id: string + title: string + h1: JSX.Element + subheader: JSX.Element[] + image: JSX.Element + className?: string + sectionContainerClassName?: string + icon?: string + ctas: { + label: string + href: string + type: 'primary' | 'default' + }[] + logos?: { + name: string + image: string + }[] + footer?: React.ReactNode + footerPosition?: 'left' | 'right' | 'bottom' +} + +export interface Quote { + icon?: string + author: string + authorTitle?: string + quote: JSX.Element + avatar: string +} + +export interface Quotes { + id: string + items: Quote[] +} + +export interface Highlight { + icon?: IconType + heading: string | JSX.Element + subheading: string | JSX.Element + url?: string +} + +export interface Feature { + id?: string + icon?: IconType | string + iconNoStroke?: boolean + heading: string | JSX.Element + subheading: string | JSX.Element + img?: JSX.Element +} + +export interface FeaturesSection { + id: string + label?: string + heading: JSX.Element + subheading?: string + features: Feature[] + // { + // [key: string]: Feature + // } +} + +export interface Testimonials { + id: string + label: string + heading: JSX.Element + videos: { + [key: string]: { + url: string + } + } +} + +export interface CTASection { + id: string + label: string + heading: JSX.Element | string + subheading: string + cta: { + label: string + href: string + type: string + } +} + +export interface FrameworkLinkProps { + name: string + icon: string | React.ReactNode + docs: string +} + +export const FrameworkLink = ({ framework }: { framework: FrameworkLinkProps }) => { + const isXs = useBreakpoint(640) + return ( + +
    + {typeof framework.icon === 'string' ? ( + + + + ) : ( + framework.icon + )} +
    + + {framework.name} + + + ) +} + +export const getEditors: (isXs: boolean) => FrameworkLinkProps[] = (isXs) => [ + { + name: 'Cursor', + icon: ( + + + + + + + + + + + + + + + + + + + ), + docs: '/docs/guides/getting-started/mcp#cursor', + }, + { + name: 'Visual Studio Code (Copilot)', + icon: 'M50.1467 13.5721C50.2105 13.572 50.2743 13.5724 50.3382 13.576C50.3414 13.5762 50.3447 13.5768 50.3479 13.577C50.4258 13.5816 50.5036 13.5892 50.5813 13.5995C50.5895 13.6006 50.5976 13.6022 50.6057 13.6034C50.9388 13.6498 51.2689 13.7462 51.5833 13.8983L62.4924 19.1756C63.5692 19.6966 64.2777 20.757 64.3596 21.9442C64.3653 22.0231 64.3684 22.1026 64.3684 22.1825V22.3104C64.3684 22.301 64.3676 22.2914 64.3674 22.2821V57.8417C64.3675 57.834 64.3684 57.8259 64.3684 57.8182V57.9461C64.3684 57.9598 64.3666 57.9736 64.3665 57.9872C64.354 59.2535 63.6289 60.4044 62.4924 60.954L51.5833 66.2303C51.194 66.4187 50.7811 66.5227 50.3674 66.5497C50.3525 66.5507 50.3375 66.5518 50.3225 66.5526C50.2401 66.5568 50.1577 66.5585 50.0755 66.5565C49.6814 66.5509 49.2901 66.476 48.9221 66.3319C48.5051 66.1688 48.1177 65.918 47.7874 65.5858L26.9163 46.4471L17.8372 53.3749C17.4137 53.6981 16.9059 53.8466 16.4055 53.8241H16.3743C15.8739 53.8018 15.3809 53.6085 14.9876 53.2489L12.0706 50.5809C11.1081 49.7012 11.1073 48.1798 12.0686 47.2987L19.9573 40.0643L12.0676 32.8299C11.1064 31.9489 11.108 30.4273 12.0706 29.5477L14.9876 26.8797C15.3809 26.5201 15.8739 26.3269 16.3743 26.3045H16.594C17.032 26.3224 17.4668 26.4713 17.8372 26.7538L26.9163 33.6815L47.7874 14.5428C47.9113 14.4183 48.0433 14.3052 48.1819 14.204C48.7277 13.8051 49.3759 13.5895 50.0354 13.5721H50.0715C50.0966 13.5716 50.1217 13.5721 50.1467 13.5721ZM35.2825 40.0643L51.0969 52.1307V27.9969L35.2825 40.0643Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, + { + name: 'Claude', + icon: 'M22.1027 49.8962L33.9052 43.2734L34.1027 42.6962L33.9052 42.3772H33.328L31.3534 42.2557L24.609 42.0734L18.7609 41.8304L13.0951 41.5266L11.6673 41.2228L10.3306 39.4608L10.4673 38.5797L11.6673 37.7747L13.3837 37.9266L17.1812 38.1848L22.8774 38.5797L27.009 38.8228L33.1306 39.4608H34.1027L34.2394 39.0658L33.9052 38.8228L33.647 38.5797L27.7534 34.5848L21.3736 30.362L18.0318 27.9316L16.2242 26.7013L15.3128 25.5468L14.9179 23.0253L16.5584 21.2177L18.7609 21.3696L19.323 21.5215L21.5559 23.238L26.3255 26.9291L32.5534 31.5165L33.4647 32.276L33.8293 32.0177L33.8749 31.8354L33.4647 31.1519L30.0774 25.0304L26.4622 18.8025L24.8521 16.2203L24.4268 14.6709C24.2749 14.0329 24.1685 13.5013 24.1685 12.8481L26.0369 10.3114L27.0698 9.97722L29.5609 10.3114L30.609 11.2228L32.1584 14.762L34.6647 20.3367L38.5534 27.9165L39.6926 30.1646L40.3002 32.2456L40.528 32.8835H40.923V32.519L41.242 28.2506L41.8344 23.0101L42.4116 16.2658L42.609 14.3671L43.5508 12.0886L45.4192 10.8582L46.8774 11.557L48.0774 13.2734L47.9103 14.3823L47.1964 19.0152L45.7989 26.276L44.8875 31.1367H45.4192L46.0268 30.5291L48.4875 27.2633L52.6192 22.0987L54.442 20.0481L56.5685 17.7848L57.9356 16.7063H60.5179L62.4166 19.5316L61.566 22.4481L58.9078 25.8203L56.7052 28.676L53.5458 32.9291L51.5711 36.3316L51.7534 36.6051L52.2242 36.5595L59.3635 35.0405L63.2217 34.3418L67.8242 33.5519L69.9053 34.5241L70.1331 35.5114L69.3128 37.5316L64.3913 38.7468L58.6192 39.9013L50.0217 41.9367L49.9154 42.0127L50.0369 42.1646L53.9103 42.5291L55.566 42.6203H59.6217L67.1711 43.1823L69.1458 44.4886L70.3306 46.0835L70.1331 47.2987L67.0951 48.8481L62.9939 47.876L53.4242 45.5975L50.1432 44.7772H49.6875V45.0506L52.4217 47.7241L57.4344 52.2506L63.7078 58.0835L64.0268 59.5266L63.2217 60.6658L62.3711 60.5443L56.8571 56.3975L54.7306 54.5291L49.9154 50.4734H49.5964V50.8987L50.7052 52.5241L56.5685 61.3342L56.8723 64.038L56.447 64.919L54.928 65.4506L53.2571 65.1468L49.8242 60.3316L46.285 54.9089L43.4293 50.0481L43.0799 50.2456L41.3939 68.3975L40.604 69.3241L38.7812 70.0228L37.2622 68.8684L36.4571 67L37.2622 63.3089L38.2344 58.4937L39.0242 54.6658L39.7382 49.9114L40.1635 48.3316L40.1331 48.2253L39.7837 48.2709L36.1989 53.1924L30.7458 60.5595L26.4318 65.1772L25.3989 65.5873L23.6065 64.6608L23.7736 63.0051L24.7761 61.5316L30.7458 53.9367L34.3458 49.2279L36.6698 46.5089L36.6546 46.1139H36.5179L20.6597 56.4127L17.8344 56.7772L16.6192 55.638L16.7711 53.7696L17.3483 53.162L22.1179 49.881L22.1027 49.8962Z', + docs: '/docs/guides/getting-started/mcp#claude-code', + }, + { + name: 'Windsurf', + icon: 'M70.1801 22.6639H69.6084C66.5989 22.6592 64.1571 25.0966 64.1571 28.1059V40.2765C64.1571 42.7069 62.1485 44.6756 59.7579 44.6756C58.3377 44.6756 56.9197 43.9607 56.0785 42.7608L43.6475 25.0076C42.6163 23.5334 40.9384 22.6545 39.1219 22.6545C36.2885 22.6545 33.7386 25.0638 33.7386 28.0379V40.2788C33.7386 42.7092 31.7465 44.6779 29.3395 44.6779C27.9146 44.6779 26.499 43.9631 25.6576 42.7631L11.748 22.8983C11.434 22.4506 10.7285 22.6709 10.7285 23.2193V33.8338C10.7285 34.3705 10.8926 34.8908 11.1996 35.3314L24.8866 54.8798C25.6952 56.0352 26.8881 56.893 28.2638 57.2047C31.7066 57.9876 34.8752 55.3369 34.8752 51.9596V39.7258C34.8752 37.2954 36.844 35.3267 39.2742 35.3267H39.2812C40.7462 35.3267 42.1196 36.0415 42.9609 37.2414L55.3916 54.9924C56.4251 56.4688 58.0166 57.3455 59.9149 57.3455C62.8116 57.3455 65.2935 54.9336 65.2935 51.962V39.7234C65.2935 37.293 67.2622 35.3243 69.6927 35.3243H70.1777C70.4825 35.3243 70.7285 35.0783 70.7285 34.7736V23.2123C70.7285 22.9076 70.4825 22.6615 70.1777 22.6615L70.1801 22.6639Z', + docs: '/docs/guides/getting-started/mcp#windsurf', + }, + { + name: 'Cline', + icon: 'M40.6646 10C42.5072 10 44.2747 10.7322 45.5776 12.0352C46.8803 13.338 47.6118 15.1049 47.6118 16.9473C47.6118 18.0072 47.3683 19.0415 46.9146 19.9775H53.1167C59.9917 19.9775 65.5669 25.5779 65.5669 32.4854V36.6523L69.1919 43.8926C69.3687 44.2454 69.4603 44.6347 69.4595 45.0293C69.4586 45.424 69.3654 45.813 69.187 46.165L65.5669 53.3252V57.4951C65.5668 64.4001 59.9917 70 53.1167 70H28.2144C21.337 69.9998 15.7652 64.4 15.7651 57.4951V53.3252L12.065 46.1875C11.8788 45.8299 11.7811 45.4325 11.7798 45.0293C11.7786 44.6263 11.8734 44.2288 12.0571 43.8701L15.7622 36.6523V32.4854C15.7622 25.5779 21.3374 19.9775 28.2124 19.9775H34.4146C33.9609 19.0416 33.7173 18.0071 33.7173 16.9473C33.7174 15.1048 34.4496 13.338 35.7525 12.0352C37.0553 10.7323 38.8221 10.0001 40.6646 10ZM49.5073 34C47.9996 34 46.553 34.5989 45.4868 35.665C44.4209 36.7311 43.8219 38.1771 43.8218 39.6846V49.79C43.8218 51.2976 44.4209 52.7435 45.4868 53.8096C46.553 54.8757 47.9996 55.4746 49.5073 55.4746C51.015 55.4746 52.4608 54.8757 53.5269 53.8096C54.593 52.7434 55.1919 51.2978 55.1919 49.79V39.6846C55.1918 38.9379 55.0451 38.1986 54.7593 37.5088C54.4734 36.8189 54.054 36.192 53.5259 35.6641C52.9978 35.1362 52.3711 34.7172 51.6812 34.4316C50.9912 34.1461 50.2541 33.9997 49.5073 34ZM31.1919 34C29.6843 34.0001 28.2385 34.599 27.1724 35.665C26.1063 36.7311 25.5075 38.177 25.5073 39.6846V49.79C25.5385 51.2768 26.1509 52.692 27.2134 53.7324C28.2759 54.7729 29.7038 55.3555 31.1909 55.3555C32.678 55.3555 34.106 54.7729 35.1685 53.7324C36.2309 52.692 36.8433 51.2768 36.8745 49.79V39.6846C36.8744 38.1774 36.276 36.732 35.2105 35.666C34.1449 34.5999 32.6992 34.0007 31.1919 34Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, +] diff --git a/apps/www/data/solutions/startups.tsx b/apps/www/data/solutions/startups.tsx new file mode 100644 index 0000000000000..a8b8952295eb9 --- /dev/null +++ b/apps/www/data/solutions/startups.tsx @@ -0,0 +1,998 @@ +import dynamic from 'next/dynamic' +import { + Check, + ClipboardCheck, + FolderLock, + HeartPulse, + InfoIcon, + Lightbulb, + List, + Lock, + ShieldAlert, + ShieldCheck, + Sparkles, + Timer, + Users, + UserX, +} from 'lucide-react' +import { CubeIcon } from '@heroicons/react/outline' +import { cn, IconPartners, Image } from 'ui' + +import MainProducts from '../MainProducts' +import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection' +import RealtimeLogs from 'components/Products/Functions/RealtimeLogs' +import { frameworks } from 'components/Hero/HeroFrameworks' + +import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection' +import type { ResultsSectionProps } from 'components/Solutions/ResultsSection' +import type { PlatformSectionProps } from 'components/Solutions/PlatformSection' +import { + FrameworkLink, + type FrameworkLinkProps, + type FeaturesSection, + type HeroSection, + type Metadata, +} from './solutions.utils' +import type { FeatureGridProps } from 'components/Solutions/FeatureGrid' +import type { SecuritySectionProps } from 'components/Enterprise/Security' +import type { MPCSectionProps } from 'components/Solutions/MPCSection' + +import { PRODUCT_SHORTNAMES } from 'shared-data/products' +import { useBreakpoint } from 'common' +import { useSendTelemetryEvent } from 'lib/telemetry' +import { companyStats } from '../company-stats' + +const AuthVisual = dynamic(() => import('components/Products/AuthVisual')) +const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual')) +const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual')) + +const data: () => { + metadata: Metadata + heroSection: HeroSection + why: FeaturesSection + platform: PlatformSectionProps + developerExperience: DXSectionProps + resultsSection: ResultsSectionProps + featureGrid: FeatureGridProps + securitySection: SecuritySectionProps + platformStarterSection: TwoColumnsSectionProps + mcp: MPCSectionProps +} = () => { + const sendTelemetryEvent = useSendTelemetryEvent() + const isXs = useBreakpoint(640) + const editors = getEditors(isXs) + + return { + metadata: { + metaTitle: 'Supabase for Startups', + metaDescription: 'Build fast. Scale easily. Trust your stack.', + }, + heroSection: { + id: 'hero', + title: 'Supabase for Startups', + h1: ( + <> + Build fast. Scale easily. + Trust your stack. + + ), + subheader: [ + <> + The Postgres development platform. Supabase is the powerful, scalable backend that lets + you focus on building a great, differentiated product instead of being stuck building + infrastructure. + , + ], + image: ( + Supabase for Startups + ), + ctas: [ + { + label: 'Start your company', + href: 'https://supabase.com/dashboard', + type: 'primary' as any, + onClick: () => + sendTelemetryEvent({ + action: 'start_project_button_clicked', + properties: { buttonLocation: 'Solutions: Developers page hero' }, + }), + }, + ], + }, + why: { + id: 'why-supabase', + label: '', + heading: ( + <> + Why startups choose Supabase + + ), + subheading: + 'Speed wins. Supabase helps you move faster by providing a full-featured, scalable backend based on Postgres.', + features: [ + { + id: 'build-in-a-weekend', + icon: Timer, + heading: 'Build in a weekend', + subheading: + 'Launch your backend in minutes with seamless integrations for common frameworks. Focus on growth while we handle infrastructure.', + }, + { + id: 'development-platform', + icon: CubeIcon, + heading: 'A complete development platform', + subheading: + 'All-in-one suite with auth, storage, edge functions, real-time, and vector search. Use one or all.', + }, + { + id: 'scalable', + icon: (props: any) => ( + + + + + ), + heading: 'Scale to millions', + subheading: + 'Fair pricing, a complete, powerful Postgres database, and global infrastructure deployment.', + }, + { + id: 'scalable', + icon: (props: any) => ( + + + + + + + ), + heading: 'We try harder', + subheading: 'Outstanding support to resolve issues fast and keep you building.', + }, + ], + }, + platform: { + id: 'postgres-platform', + title: ( + <> + Supabase helps you build + + ), + subheading: + 'Supabase includes everything you need to create the perfect app for your brand, business, or just for fun.', + features: [ + { + id: 'database', + title: 'Database', + isDatabase: true, + icon: MainProducts[PRODUCT_SHORTNAMES.DATABASE].icon, + subheading: ( + <> + A fully managed database that’s simple for creators and{' '} + trusted by enterprises. + + ), + className: + 'flex-col lg:flex-row [&>div:first-child]:lg:!max-w-none [&>div:first-child]:lg:!mr-0 lg:!gap-0', + image: ( +
    +
    + + + + + + + + + {[ + { name: 'Jon Meyers', pub: 'All', active: false }, + { name: 'Chris Martin', pub: 'All', active: true }, + { name: 'Amy Quek', pub: 'No', active: false }, + { name: 'Riccardo Bussetti', pub: 'No', active: false }, + { name: 'Beng Eu', pub: 'All', active: false }, + { name: 'Tyler Hillery', pub: 'All', active: false }, + ].map((row) => ( + + + + + ))} + +
    + NAME + + PUBLICATION +
    {row.name}{row.pub}
    +
    +
    +
    + ), + highlights: ( +
      +
    • + 100% portable +
      • +
    • + Built-in Auth with RLS +
      • +
    • + Easy to extend +
      • +
    + ), + }, + { + id: 'authentication', + title: 'Authentication', + icon: MainProducts[PRODUCT_SHORTNAMES.AUTHENTICATION].icon, + subheading: ( + <> + Secure authentication with email/password, + magic links, OAuth (Google, GitHub, Twitter, etc.), SAML, SSO, and phone/SMS OTP. + + ), + className: '!border-l-0 sm:!border-l sm:!border-t-0', + image: , + }, + { + id: 'storage', + title: 'Storage', + icon: MainProducts[PRODUCT_SHORTNAMES.STORAGE].icon, + subheading: ( + <> + Scalable S3-compatible object storage for + managing files, images, and videos. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Storage + ), + }, + { + id: 'edge-functions', + title: 'Edge Functions', + icon: MainProducts[PRODUCT_SHORTNAMES.FUNCTIONS].icon, + subheading: ( + <> + Serverless functions powered by Deno, + deployed globally for low-latency execution. + + ), + className: '!border-l-0 sm:!border-l lg:!border-l-0', + image: , + }, + { + id: 'vectors', + title: 'Vectors', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + pgvector extension + for AI/ML applications, enabling fast semantic search and embedding storage. + + ), + className: '!border-l-0 lg:!border-l', + image: ( + Vector embeddings + ), + }, + { + id: 'realtime', + title: 'Realtime', + icon: MainProducts[PRODUCT_SHORTNAMES.REALTIME].icon, + subheading: ( + <> + Postgres replication enables{' '} + live sync functionality for collaborative + applications. + + ), + className: '!border-l-0 sm:!border-l', + image: ( + + ), + }, + ], + }, + developerExperience: { + id: 'developer-experience', + className: '[&_h2]:!max-w-sm', + title: ( + <> + Developers can build faster with Supabase + + ), + subheading: 'Features that help developers move quickly and focus.', + features: [ + { + id: 'ai-assistant', + title: 'AI Assistant', + icon: 'M11.8949 2.39344C12.5051 1.78324 13.4944 1.78324 14.1046 2.39344L22.9106 11.1994C23.5208 11.8096 23.5208 12.7989 22.9106 13.4091L14.1046 22.2151C13.4944 22.8253 12.5051 22.8253 11.8949 22.2151L3.08892 13.4091C2.47872 12.7989 2.47872 11.8096 3.08892 11.1994L11.8949 2.39344Z M16.5408 12.3043C16.5408 14.2597 14.9556 15.8449 13.0002 15.8449C11.0448 15.8449 9.45961 14.2597 9.45961 12.3043C9.45961 10.3489 11.0448 8.76371 13.0002 8.76371C14.9556 8.76371 16.5408 10.3489 16.5408 12.3043Z', + subheading: ( + <> + A single panel that persists across the Supabase Dashboard and maintains{' '} + context across AI prompts. + + ), + image: ( +
    +
    + + + +
    +

    AI Assistant

    + +
    +
    +
    +

    Entity: Auth

    +

    Schema:

    +

    + Issue: We have detected that you have enabled the email provider with an expiry + time of more than an hour. It is recommended to set this value to less th... +

    +
    +
    + ), + }, + { + id: 'mcp-server', + title: 'MCP Server', + icon: 'M19 5L22 2M2 22L5 19M7.5 13.5L10 11M10.5 16.5L13 14M6.3 20.3C6.52297 20.5237 6.78791 20.7013 7.07963 20.8224C7.37136 20.9435 7.68413 21.0059 8 21.0059C8.31587 21.0059 8.62864 20.9435 8.92036 20.8224C9.21209 20.7013 9.47703 20.5237 9.7 20.3L12 18L6 12L3.7 14.3C3.47626 14.523 3.29873 14.7879 3.17759 15.0796C3.05646 15.3714 2.99411 15.6841 2.99411 16C2.99411 16.3159 3.05646 16.6286 3.17759 16.9204C3.29873 17.2121 3.47626 17.477 3.7 17.7L6.3 20.3ZM12 6L18 12L20.3 9.7C20.5237 9.47703 20.7013 9.21209 20.8224 8.92036C20.9435 8.62864 21.0059 8.31587 21.0059 8C21.0059 7.68413 20.9435 7.37136 20.8224 7.07963C20.7013 6.78791 20.5237 6.52297 20.3 6.3L17.7 3.7C17.477 3.47626 17.2121 3.29873 16.9204 3.17759C16.6286 3.05646 16.3159 2.99411 16 2.99411C15.6841 2.99411 15.3714 3.05646 15.0796 3.17759C14.7879 3.29873 14.523 3.47626 14.3 3.7L12 6Z', + subheading: ( + <> + Connect your favorite AI tools such as Cursor + or Claude directly with Supabase. + + ), + image: ( + Vector embeddings + ), + }, + { + id: 'auto-generated-apis', + title: 'Auto-generated APIs', + icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', + subheading: ( + <> + Learn SQL when you're ready. In the meantime, + Supabase generates automatic APIs to make coding a lot easier. + + ), + image: ( + Auto Generated APIs + ), + }, + { + id: 'foreign-data-wrappers', + title: 'Foreign Data Wrappers', + icon: 'M10.2805 18.2121C11.2419 18.6711 12.3325 18.8932 13.4711 18.8084C15.2257 18.6776 16.7596 17.843 17.8169 16.6015M8.21496 8.36469C9.27117 7.14237 10.7928 6.322 12.5311 6.19248C13.7196 6.10392 14.8558 6.34979 15.8474 6.85054M17.8169 16.6015L20.5242 19.3223C22.1857 17.5141 23.1562 15.1497 23.1562 12.5005C23.1562 6.89135 18.6091 2.34424 13 2.34424C10.9595 2.34424 9.16199 2.87659 7.57035 3.91232C8.35717 3.56865 9.22613 3.37801 10.1396 3.37801C12.6236 3.37801 14.7783 4.78762 15.8474 6.85054M17.8169 16.6015V16.6015C16.277 15.059 16.3448 12.5527 16.5387 10.3817C16.5557 10.191 16.5644 9.99794 16.5644 9.80282C16.5644 8.73844 16.3056 7.73451 15.8474 6.85054M13 22.6567C7.39086 22.6567 2.84375 18.1096 2.84375 12.5005C2.84375 9.84123 3.8026 7.48969 5.4753 5.67921L8.21496 8.42354V8.42354C9.76942 9.98064 9.69844 12.5133 9.51947 14.7062C9.50526 14.8803 9.49802 15.0564 9.49802 15.2341C9.49802 18.7705 12.3648 21.6373 15.9012 21.6373C16.8116 21.6373 17.6776 21.4473 18.4618 21.1048C16.8609 22.1588 15.06 22.6567 13 22.6567Z', + subheading: ( + <> + Connect Supabase to Redshift, BigQuery, MySQL + , and external APIs for seamless integrations. + + ), + image: ( + Foreign Data Wrappers + ), + }, + { + id: 'instant-deployment', + title: 'Instant and secure deployment', + icon: 'M12.5 1.5625C6.45939 1.5625 1.5625 6.45939 1.5625 12.5C1.5625 18.5406 6.45939 23.4375 12.5 23.4375C18.5406 23.4375 23.4375 18.5406 23.4375 12.5C23.4375 9.90692 22.5351 7.52461 21.0273 5.64995L11.6145 15.0627L9.61957 13.0677M12.6068 5.82237C8.92939 5.82237 5.94826 8.80351 5.94826 12.4809C5.94826 16.1583 8.92939 19.1395 12.6068 19.1395C16.2842 19.1395 19.2654 16.1583 19.2654 12.4809C19.2654 11.1095 18.8507 9.83483 18.14 8.77557', + subheading: ( + <> + No need to set up servers, manage DevOps, or + tweak security settings. + + ), + + image: ( + <> + background grid +
    + Postgres slonik elephant + + ), + }, + { + id: 'observability', + title: 'Observability', + icon: 'M11.1404 7.66537C11.1404 5.18146 13.1541 3.16785 15.638 3.16785H17.3775C19.8614 3.16785 21.875 5.18146 21.875 7.66537V17.3776C21.875 19.8615 19.8614 21.8751 17.3775 21.8751H15.638C13.1541 21.8751 11.1404 19.8615 11.1404 17.3776V7.66537Z M3.125 14.7821C3.125 13.4015 4.24419 12.2823 5.62477 12.2823C7.00536 12.2823 8.12454 13.4015 8.12454 14.7821V19.3754C8.12454 20.7559 7.00536 21.8751 5.62477 21.8751C4.24419 21.8751 3.125 20.7559 3.125 19.3754V14.7821Z M3.125 5.58522C3.125 4.20463 4.24419 3.08545 5.62477 3.08545C7.00536 3.08545 8.12454 4.20463 8.12454 5.58522V6.95164C8.12454 8.33223 7.00536 9.45142 5.62477 9.45142C4.24419 9.45142 3.125 8.33223 3.125 6.95164V5.58522Z', + subheading: ( + <> + Built-in logs, query performance tools, and security insights for{' '} + easy debugging. + + ), + image: ( + + ), + }, + ], + }, + resultsSection: { + id: 'results', + heading: ( + <> + Top performance, +
    + at any scale + + ), + subheading: + "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.", + highlights: [ + { + heading: 'databases managed', + subheading: companyStats.databasesManaged, + }, + { + heading: 'databases launched daily', + subheading: companyStats.databasesLaunchedDaily, + }, + ], + }, + featureGrid: { + id: 'database-features', + features: [ + { + id: 'postgres-core', + title: 'Postgres at its core', + description: ( + <> + ACID-compliant, battle-tested database{' '} + trusted by enterprises and startups. + + ), + icon: 'M13.2689 14.9229C14.04 16.494 15.6379 17.4892 17.3881 17.4893H22.0892C22.4726 17.4893 22.7843 17.8003 22.7845 18.1836C22.7845 18.5671 22.4728 18.8789 22.0892 18.8789H20.1664C20.1564 21.0605 18.171 22.4853 16.0052 22.4854C14.044 22.4854 12.4009 21.1292 11.9603 19.3037L11.9213 19.126L11.9086 18.9854C11.9116 18.6624 12.1408 18.3748 12.4701 18.3105C12.7994 18.2463 13.1203 18.4265 13.2445 18.7246L13.2845 18.8594L13.3412 19.0947C13.6746 20.251 14.742 21.0967 16.0052 21.0967C17.6551 21.0966 18.7655 20.0649 18.7758 18.8789H17.3881C15.108 18.8788 13.0263 17.5811 12.0218 15.5342L13.2689 14.9229ZM18.7767 15.6787V11.4639C18.7766 8.09738 16.0476 5.36816 12.681 5.36816H11.7269C11.7032 5.36816 11.6797 5.36364 11.6566 5.36133H7.15564C6.5783 5.36133 6.05835 5.69927 5.82068 6.21777L5.77673 6.32422L4.26404 10.4443C4.03486 11.0686 4.21563 11.7696 4.71814 12.2051L5.75622 13.1045L5.93298 13.2754C6.32193 13.694 6.54138 14.2468 6.54138 14.8242V16.4775L6.5531 16.7227C6.67574 17.9298 7.69544 18.8721 8.93493 18.8721C9.2213 18.8721 9.45986 18.6685 9.51501 18.3984L9.52771 18.2793V10.9121C9.52772 9.33737 10.1566 7.82755 11.2748 6.71875L11.3842 6.63086C11.6543 6.45411 12.0199 6.48475 12.2562 6.72266C12.5263 6.995 12.5247 7.43503 12.2523 7.70508L12.097 7.86816C11.3396 8.69814 10.9164 9.78304 10.9164 10.9121V18.2793L10.9056 18.4814C10.8044 19.4807 9.96094 20.2607 8.93493 20.2607C6.91113 20.2607 5.25814 18.6714 5.15661 16.6729L5.15173 16.4775V14.8242C5.15173 14.5993 5.06693 14.3838 4.9154 14.2207L4.84607 14.1543L3.80798 13.2549C2.86934 12.4414 2.53223 11.1318 2.96033 9.96582L4.47302 5.84473L4.55798 5.63867C5.02039 4.62971 6.03224 3.97266 7.15564 3.97266H11.8246V3.97949H12.681C16.8146 3.97949 20.1662 7.33032 20.1664 11.4639V15.6787C20.1664 16.0622 19.8546 16.373 19.4711 16.373C19.0877 16.3728 18.7767 16.0621 18.7767 15.6787ZM12.3392 14.6055C12.6835 14.4365 13.1 14.5785 13.2689 14.9229L12.0218 15.5342C11.8532 15.1901 11.9953 14.7745 12.3392 14.6055Z M14.4779 10.7135C14.4779 11.1278 14.8137 11.4635 15.2279 11.4635C15.6421 11.4635 15.9779 11.1278 15.9779 10.7135C15.9779 10.2993 15.6421 9.96354 15.2279 9.96354C14.8137 9.96354 14.4779 10.2993 14.4779 10.7135Z', + iconNoStroke: true, + }, + { + id: 'scaling', + title: 'Horizontal & Vertical Scaling', + description: ( + <> + Scale compute and storage independently, including support for{' '} + read replicas. + + ), + icon: 'M14.2847 11.1404V7.8447C14.2847 5.36078 12.2711 3.34717 9.7872 3.34717H7.84476C5.36084 3.34717 3.34723 5.36078 3.34723 7.8447V9.78714C3.34723 12.2711 5.36084 14.2847 7.84476 14.2847H11.1253M8.63752 8.65306L18.4524 18.468M19.1282 14.068V16.5986C19.1282 17.8405 18.1214 18.8474 16.8794 18.8474H14.2847M15.6573 22.0972H17.5997C20.0836 22.0972 22.0972 20.0836 22.0972 17.5996V15.6572C22.0972 13.1733 20.0836 11.1597 17.5997 11.1597H15.6573C13.1733 11.1597 11.1597 13.1733 11.1597 15.6572V17.5996C11.1597 20.0836 13.1733 22.0972 15.6573 22.0972Z', + }, + { + id: 'multi-region', + title: 'Multi-region Deployments', + description: ( + <> + Deploy databases across multiple regions for{' '} + global availability. + + ), + icon: 'M8.48462 3.05339C6.79298 3.58819 5.33457 4.64831 4.30037 6.0436C3.4029 7.25444 2.82613 8.71636 2.69516 10.306H6.77142C6.83771 8.01994 7.22916 5.93809 7.84745 4.36313C8.03485 3.88578 8.24723 3.44433 8.48462 3.05339ZM10.9999 1.27832C7.79633 1.27832 4.95467 2.82842 3.18457 5.21656C1.98658 6.83284 1.2778 8.83471 1.2778 11.0001C1.2778 13.1781 1.99476 15.1906 3.20527 16.8117C4.97675 19.1842 7.80877 20.7225 10.9999 20.7225C14.191 20.7225 17.023 19.1841 18.7944 16.8117C20.005 15.1906 20.722 13.1781 20.722 11.0001C20.722 8.83471 20.0132 6.83284 18.8152 5.21656L18.7944 5.18864C17.0229 2.81635 14.1909 1.27832 10.9999 1.27832ZM10.9999 2.66721C10.768 2.66721 10.4732 2.78413 10.1294 3.15462C9.78466 3.52602 9.44227 4.10142 9.14028 4.87067C8.596 6.2571 8.22699 8.16013 8.16092 10.306H13.8389C13.7728 8.16013 13.4038 6.2571 12.8595 4.87067C12.5575 4.10142 12.2151 3.52602 11.8704 3.15462C11.5265 2.78413 11.2318 2.66721 10.9999 2.66721ZM15.2284 10.306C15.1621 8.01994 14.7706 5.93809 14.1523 4.36313C13.9649 3.88578 13.7525 3.44433 13.5152 3.05339C15.1971 3.58512 16.6485 4.63618 17.6816 6.01966L17.6994 6.0436C18.5969 7.25443 19.1737 8.71636 19.3046 10.306H15.2284ZM13.8389 11.6949H8.16092C8.22699 13.8407 8.596 15.7437 9.14028 17.1301C9.44227 17.8994 9.78466 18.4748 10.1294 18.8462C10.4732 19.2167 10.768 19.3336 10.9999 19.3336C11.2318 19.3336 11.5265 19.2167 11.8704 18.8462C12.2151 18.4748 12.5575 17.8994 12.8595 17.1301C13.4038 15.7437 13.7728 13.8407 13.8389 11.6949ZM13.5152 18.9473C13.7526 18.5564 13.965 18.115 14.1523 17.6377C14.7706 16.0627 15.1621 13.9809 15.2284 11.6949H19.3046C19.1727 13.2947 18.5892 14.7653 17.6816 15.9807C16.6485 17.3643 15.1971 18.4155 13.5152 18.9473ZM8.48458 18.9474C8.24721 18.5564 8.03484 18.115 7.84745 17.6377C7.22916 16.0627 6.83771 13.9809 6.77142 11.6949H2.6952C2.82712 13.2947 3.41061 14.7653 4.31815 15.9808C5.35126 17.3644 6.80264 18.4156 8.48458 18.9474Z', + iconNoStroke: true, + }, + { + id: 'high-availability', + title: 'High Availability Architecture', + description: ( + <> + Enterprise plans offer{' '} + automatic failover and redundancy for + mission-critical applications. + + ), + icon: 'M16.3046 3.24514C15.3004 2.91279 14.2268 2.73291 13.1111 2.73291C7.50197 2.73291 2.95486 7.28002 2.95486 12.8892C2.95486 18.4983 7.50197 23.0454 13.1111 23.0454C18.7203 23.0454 23.2674 18.4983 23.2674 12.8892C23.2674 10.5703 22.4902 8.4329 21.1822 6.72328L12.2253 15.5572L10.2303 13.5622M13.2175 6.31682C9.54013 6.31682 6.55899 9.29795 6.55899 12.4809C6.55899 16.1583 9.54013 19.1395 13.2175 19.1395C16.895 19.1395 19.8761 16.1583 19.8761 12.4809C19.8761 11.1095 19.4615 9.83483 18.7507 8.77557', + }, + { + id: 'pitr', + title: 'Point-in-Time Recovery', + description: ( + <> + Restore your database to any point in time{' '} + for disaster recovery. + + ), + icon: 'M3.3784 13.3407C3.1413 10.4689 4.12132 7.51558 6.31845 5.31845C10.2847 1.35219 16.7153 1.35219 20.6816 5.31845C24.6478 9.28471 24.6478 15.7153 20.6816 19.6816C16.7153 23.6478 10.2847 23.6478 6.31845 19.6816C5.3819 18.745 4.6665 17.671 4.17224 16.5246M0.706939 11.443L2.28117 13.0172C2.89137 13.6274 3.88069 13.6274 4.49088 13.0172L6.06512 11.443M10.761 17.5453L16.0995 17.5453C16.9625 17.5453 17.662 16.8458 17.662 15.9828V15.7328C17.662 14.8699 16.9625 14.1703 16.0995 14.1703L10.761 14.1703C9.89806 14.1703 9.1985 14.8699 9.1985 15.7328L9.1985 15.9828C9.1985 16.8458 9.89806 17.5453 10.761 17.5453ZM11.1648 14.1711L15.6537 14.1711C16.5167 14.1711 17.2162 13.4716 17.2162 12.6086L17.2162 12.3586C17.2162 11.4956 16.5167 10.7961 15.6537 10.7961L11.1648 10.7961C10.3019 10.7961 9.60234 11.4956 9.60234 12.3586L9.60234 12.6086C9.60234 13.4716 10.3019 14.1711 11.1648 14.1711ZM10.7606 10.7963L16.0991 10.7963C16.9621 10.7963 17.6616 10.0967 17.6616 9.2338V8.98375C17.6616 8.1208 16.9621 7.42125 16.0991 7.42125L10.7606 7.42125C9.89765 7.42125 9.19809 8.12081 9.19809 8.98375L9.19809 9.2338C9.19809 10.0967 9.89765 10.7963 10.7606 10.7963Z', + }, + { + id: 'backups', + title: 'Automatic Backups', + description: ( + <> + Daily backups with retention policies for + added security. + + ), + icon: 'M22.375 5.7085C22.375 7.43439 18.1777 8.8335 13 8.8335C7.82233 8.8335 3.625 7.43439 3.625 5.7085M22.375 5.7085C22.375 3.98261 18.1777 2.5835 13 2.5835C7.82233 2.5835 3.625 3.98261 3.625 5.7085M22.375 5.7085V10.1877M3.625 5.7085L3.625 20.2918C3.62434 20.9675 4.28075 21.6251 5.49583 22.166C6.71091 22.7069 8.41919 23.1019 10.3646 23.2918M3.625 13.0002C3.6235 13.5826 4.11036 14.1536 5.03066 14.6487C5.95095 15.1438 7.26805 15.5434 8.83334 15.8022M13 13.0002V17.1668M13 17.1668H17.1667M13 17.1668L15.1771 14.9897C16.0833 14.0835 17.3438 13.521 18.7292 13.521C19.9724 13.521 21.1647 14.0149 22.0437 14.8939C22.9228 15.773 23.4167 16.9653 23.4167 18.2085C23.4167 19.3016 23.0727 20.3671 22.4336 21.2539C21.7944 22.1407 20.8924 22.8039 19.8554 23.1496C18.8183 23.4952 17.6988 23.5059 16.6554 23.1799C15.612 22.854 14.6975 22.208 14.0417 21.3335', + }, + ], + }, + securitySection: { + id: 'security', + label: 'Security', + heading: 'Trusted for medical records, missions to the moon, and everything in between', + subheading: + "Keep your data secure with SOC 2, HIPAA, and GDPR compliance. Your customers' data is encrypted at rest and in transit, with built-in tools for monitoring and managing security threats.", + features: [ + { + icon: ShieldCheck, + heading: 'SOC 2 Type II certified', + }, + { + icon: HeartPulse, + heading: 'HIPAA compliance', + }, + { + icon: ShieldAlert, + heading: 'DDoS Protection', + }, + { + icon: Lock, + heading: 'Multi-factor Authentication', + }, + { + icon: ClipboardCheck, + heading: 'Vulnerability Management', + }, + { + icon: Users, + heading: 'Role-based access control', + }, + { + icon: List, + heading: 'Database Audit Logs', + }, + { + icon: Lightbulb, + heading: 'Security Advisors', + }, + { + icon: FolderLock, + heading: 'Encrypted Storage', + }, + { + icon: UserX, + heading: 'Network restrictions', + }, + ], + cta: { + label: 'Learn about security', + url: '/security', + }, + }, + platformStarterSection: { + id: 'platform-starter', + heading: ( + <> + Choose your platform to start building in + seconds + + ), + headingRight: ( + <> + Or, start with Supabase AI Prompts{' '} + + + ), + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts', + leftFooter: ( +
    + {frameworks.map((framework) => ( + + ))} +
    + ), + aiPrompts: [ + { + id: 'auth-setup', + title: 'Bootstrap Next.js app with Supabase Auth', + description: + '## Overview of implementing Supabase Auth SSR\n1. Install @supabase/supabase-js and...', + code: `1. Install @supabase/supabase-js and @supabase/ssr packages. +2. Set up environment variables. +3. Write two utility functions with \u0060createClient\u0060 functions to create a browser client and a server client. +4. Hook up middleware to refresh auth tokens +`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/nextjs-supabase-auth', + }, + { + id: 'edge-functions', + title: 'Writing Supabase Edge Functions', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `1. Try to use Web APIs and Deno’s core APIs instead of external dependencies (eg: use fetch instead of Axios, use WebSockets API instead of node-ws) +2. If you are reusing utility methods between Edge Functions, add them to 'supabase/functions/_shared' and import using a relative path. Do NOT have cross dependencies between Edge Functions. +3. Do NOT use bare specifiers when importing dependecnies. If you need to use an external dependency, make sure it's prefixed with either 'npm:' or 'jsr:'. For example, '@supabase/supabase-js' should be written as 'npm:@supabase/supabase-js'. +4. For external imports, always define a version. For example, 'npm:@express' should be written as 'npm:express@4.18.2'. +5. For external dependencies, importing via 'npm:' and 'jsr:' is preferred. Minimize the use of imports from @'deno.land/x' , 'esm.sh' and @'unpkg.com' . If you have a package from one of those CDNs, you can replace the CDN hostname with 'npm:' specifier. +`, + language: 'markdown', + docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts/edge-functions', + }, + { + id: 'declarative-db-schema', + title: 'Declarative Database Schema', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `Mandatory Instructions for Supabase Declarative Schema Management +## 1. **Exclusive Use of Declarative Schema** +-**All database schema modifications must be defined within '.sql' files located in the 'supabase/schemas/' directory.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/declarative-database-schema', + }, + { + id: 'rls-policies', + title: 'Create RLS policies', + description: + "You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...", + code: `You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate a policy with the constraints given by the user. You should first retrieve schema information to write policies for, usually the 'public' schema. +The output should use the following instructions: + +- The generated SQL must be valid SQL.`, + language: 'markdown', + docsUrl: + 'https://supabase.com/docs/guides/getting-started/ai-prompts/database-rls-policies', + }, + ], + }, + mcp: { + id: 'mcp', + heading: ( +
    + Supabase MCP server works seamlessly with{' '} + your favorite AI code editor +
    + ), + ctaLabel: 'Connect your AI tools', + documentationLink: '/docs/guides/getting-started/mcp', + frameworks: editors, + apiExamples: [ + { + lang: 'json', + title: 'macOS', + code: `{ +"mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows', + code: `{ +"mcpServers": { + "supabase": { + "command": "cmd", + "args": [ + "/c", + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Windows (WSL)', + code: `{ +"mcpServers": { + "supabase": { + "command": "wsl", + "args": [ + "npx", + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } +} +}`, + }, + { + lang: 'json', + title: 'Linux', + code: `{ + "mcpServers": { + "supabase": { + "command": "npx", + "args": [ + "-y", + "@supabase/mcp-server-supabase@latest", + "--read-only", + "--project-ref=" + ], + "env": { + "SUPABASE_ACCESS_TOKEN": "" + } + } + } +}`, + }, + ], + }, + } +} + +export const getEditors: (isXs: boolean) => FrameworkLinkProps[] = (isXs) => [ + { + name: 'Cursor', + icon: ( + + + + + + + + + + + + + + + + + + + ), + docs: '/docs/guides/getting-started/mcp#cursor', + }, + { + name: 'Visual Studio Code (Copilot)', + icon: 'M50.1467 13.5721C50.2105 13.572 50.2743 13.5724 50.3382 13.576C50.3414 13.5762 50.3447 13.5768 50.3479 13.577C50.4258 13.5816 50.5036 13.5892 50.5813 13.5995C50.5895 13.6006 50.5976 13.6022 50.6057 13.6034C50.9388 13.6498 51.2689 13.7462 51.5833 13.8983L62.4924 19.1756C63.5692 19.6966 64.2777 20.757 64.3596 21.9442C64.3653 22.0231 64.3684 22.1026 64.3684 22.1825V22.3104C64.3684 22.301 64.3676 22.2914 64.3674 22.2821V57.8417C64.3675 57.834 64.3684 57.8259 64.3684 57.8182V57.9461C64.3684 57.9598 64.3666 57.9736 64.3665 57.9872C64.354 59.2535 63.6289 60.4044 62.4924 60.954L51.5833 66.2303C51.194 66.4187 50.7811 66.5227 50.3674 66.5497C50.3525 66.5507 50.3375 66.5518 50.3225 66.5526C50.2401 66.5568 50.1577 66.5585 50.0755 66.5565C49.6814 66.5509 49.2901 66.476 48.9221 66.3319C48.5051 66.1688 48.1177 65.918 47.7874 65.5858L26.9163 46.4471L17.8372 53.3749C17.4137 53.6981 16.9059 53.8466 16.4055 53.8241H16.3743C15.8739 53.8018 15.3809 53.6085 14.9876 53.2489L12.0706 50.5809C11.1081 49.7012 11.1073 48.1798 12.0686 47.2987L19.9573 40.0643L12.0676 32.8299C11.1064 31.9489 11.108 30.4273 12.0706 29.5477L14.9876 26.8797C15.3809 26.5201 15.8739 26.3269 16.3743 26.3045H16.594C17.032 26.3224 17.4668 26.4713 17.8372 26.7538L26.9163 33.6815L47.7874 14.5428C47.9113 14.4183 48.0433 14.3052 48.1819 14.204C48.7277 13.8051 49.3759 13.5895 50.0354 13.5721H50.0715C50.0966 13.5716 50.1217 13.5721 50.1467 13.5721ZM35.2825 40.0643L51.0969 52.1307V27.9969L35.2825 40.0643Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, + { + name: 'Claude', + icon: 'M22.1027 49.8962L33.9052 43.2734L34.1027 42.6962L33.9052 42.3772H33.328L31.3534 42.2557L24.609 42.0734L18.7609 41.8304L13.0951 41.5266L11.6673 41.2228L10.3306 39.4608L10.4673 38.5797L11.6673 37.7747L13.3837 37.9266L17.1812 38.1848L22.8774 38.5797L27.009 38.8228L33.1306 39.4608H34.1027L34.2394 39.0658L33.9052 38.8228L33.647 38.5797L27.7534 34.5848L21.3736 30.362L18.0318 27.9316L16.2242 26.7013L15.3128 25.5468L14.9179 23.0253L16.5584 21.2177L18.7609 21.3696L19.323 21.5215L21.5559 23.238L26.3255 26.9291L32.5534 31.5165L33.4647 32.276L33.8293 32.0177L33.8749 31.8354L33.4647 31.1519L30.0774 25.0304L26.4622 18.8025L24.8521 16.2203L24.4268 14.6709C24.2749 14.0329 24.1685 13.5013 24.1685 12.8481L26.0369 10.3114L27.0698 9.97722L29.5609 10.3114L30.609 11.2228L32.1584 14.762L34.6647 20.3367L38.5534 27.9165L39.6926 30.1646L40.3002 32.2456L40.528 32.8835H40.923V32.519L41.242 28.2506L41.8344 23.0101L42.4116 16.2658L42.609 14.3671L43.5508 12.0886L45.4192 10.8582L46.8774 11.557L48.0774 13.2734L47.9103 14.3823L47.1964 19.0152L45.7989 26.276L44.8875 31.1367H45.4192L46.0268 30.5291L48.4875 27.2633L52.6192 22.0987L54.442 20.0481L56.5685 17.7848L57.9356 16.7063H60.5179L62.4166 19.5316L61.566 22.4481L58.9078 25.8203L56.7052 28.676L53.5458 32.9291L51.5711 36.3316L51.7534 36.6051L52.2242 36.5595L59.3635 35.0405L63.2217 34.3418L67.8242 33.5519L69.9053 34.5241L70.1331 35.5114L69.3128 37.5316L64.3913 38.7468L58.6192 39.9013L50.0217 41.9367L49.9154 42.0127L50.0369 42.1646L53.9103 42.5291L55.566 42.6203H59.6217L67.1711 43.1823L69.1458 44.4886L70.3306 46.0835L70.1331 47.2987L67.0951 48.8481L62.9939 47.876L53.4242 45.5975L50.1432 44.7772H49.6875V45.0506L52.4217 47.7241L57.4344 52.2506L63.7078 58.0835L64.0268 59.5266L63.2217 60.6658L62.3711 60.5443L56.8571 56.3975L54.7306 54.5291L49.9154 50.4734H49.5964V50.8987L50.7052 52.5241L56.5685 61.3342L56.8723 64.038L56.447 64.919L54.928 65.4506L53.2571 65.1468L49.8242 60.3316L46.285 54.9089L43.4293 50.0481L43.0799 50.2456L41.3939 68.3975L40.604 69.3241L38.7812 70.0228L37.2622 68.8684L36.4571 67L37.2622 63.3089L38.2344 58.4937L39.0242 54.6658L39.7382 49.9114L40.1635 48.3316L40.1331 48.2253L39.7837 48.2709L36.1989 53.1924L30.7458 60.5595L26.4318 65.1772L25.3989 65.5873L23.6065 64.6608L23.7736 63.0051L24.7761 61.5316L30.7458 53.9367L34.3458 49.2279L36.6698 46.5089L36.6546 46.1139H36.5179L20.6597 56.4127L17.8344 56.7772L16.6192 55.638L16.7711 53.7696L17.3483 53.162L22.1179 49.881L22.1027 49.8962Z', + docs: '/docs/guides/getting-started/mcp#claude-code', + }, + { + name: 'Windsurf', + icon: 'M70.1801 22.6639H69.6084C66.5989 22.6592 64.1571 25.0966 64.1571 28.1059V40.2765C64.1571 42.7069 62.1485 44.6756 59.7579 44.6756C58.3377 44.6756 56.9197 43.9607 56.0785 42.7608L43.6475 25.0076C42.6163 23.5334 40.9384 22.6545 39.1219 22.6545C36.2885 22.6545 33.7386 25.0638 33.7386 28.0379V40.2788C33.7386 42.7092 31.7465 44.6779 29.3395 44.6779C27.9146 44.6779 26.499 43.9631 25.6576 42.7631L11.748 22.8983C11.434 22.4506 10.7285 22.6709 10.7285 23.2193V33.8338C10.7285 34.3705 10.8926 34.8908 11.1996 35.3314L24.8866 54.8798C25.6952 56.0352 26.8881 56.893 28.2638 57.2047C31.7066 57.9876 34.8752 55.3369 34.8752 51.9596V39.7258C34.8752 37.2954 36.844 35.3267 39.2742 35.3267H39.2812C40.7462 35.3267 42.1196 36.0415 42.9609 37.2414L55.3916 54.9924C56.4251 56.4688 58.0166 57.3455 59.9149 57.3455C62.8116 57.3455 65.2935 54.9336 65.2935 51.962V39.7234C65.2935 37.293 67.2622 35.3243 69.6927 35.3243H70.1777C70.4825 35.3243 70.7285 35.0783 70.7285 34.7736V23.2123C70.7285 22.9076 70.4825 22.6615 70.1777 22.6615L70.1801 22.6639Z', + docs: '/docs/guides/getting-started/mcp#windsurf', + }, + { + name: 'Cline', + icon: 'M40.6646 10C42.5072 10 44.2747 10.7322 45.5776 12.0352C46.8803 13.338 47.6118 15.1049 47.6118 16.9473C47.6118 18.0072 47.3683 19.0415 46.9146 19.9775H53.1167C59.9917 19.9775 65.5669 25.5779 65.5669 32.4854V36.6523L69.1919 43.8926C69.3687 44.2454 69.4603 44.6347 69.4595 45.0293C69.4586 45.424 69.3654 45.813 69.187 46.165L65.5669 53.3252V57.4951C65.5668 64.4001 59.9917 70 53.1167 70H28.2144C21.337 69.9998 15.7652 64.4 15.7651 57.4951V53.3252L12.065 46.1875C11.8788 45.8299 11.7811 45.4325 11.7798 45.0293C11.7786 44.6263 11.8734 44.2288 12.0571 43.8701L15.7622 36.6523V32.4854C15.7622 25.5779 21.3374 19.9775 28.2124 19.9775H34.4146C33.9609 19.0416 33.7173 18.0071 33.7173 16.9473C33.7174 15.1048 34.4496 13.338 35.7525 12.0352C37.0553 10.7323 38.8221 10.0001 40.6646 10ZM49.5073 34C47.9996 34 46.553 34.5989 45.4868 35.665C44.4209 36.7311 43.8219 38.1771 43.8218 39.6846V49.79C43.8218 51.2976 44.4209 52.7435 45.4868 53.8096C46.553 54.8757 47.9996 55.4746 49.5073 55.4746C51.015 55.4746 52.4608 54.8757 53.5269 53.8096C54.593 52.7434 55.1919 51.2978 55.1919 49.79V39.6846C55.1918 38.9379 55.0451 38.1986 54.7593 37.5088C54.4734 36.8189 54.054 36.192 53.5259 35.6641C52.9978 35.1362 52.3711 34.7172 51.6812 34.4316C50.9912 34.1461 50.2541 33.9997 49.5073 34ZM31.1919 34C29.6843 34.0001 28.2385 34.599 27.1724 35.665C26.1063 36.7311 25.5075 38.177 25.5073 39.6846V49.79C25.5385 51.2768 26.1509 52.692 27.2134 53.7324C28.2759 54.7729 29.7038 55.3555 31.1909 55.3555C32.678 55.3555 34.106 54.7729 35.1685 53.7324C36.2309 52.692 36.8433 51.2768 36.8745 49.79V39.6846C36.8744 38.1774 36.276 36.732 35.2105 35.666C34.1449 34.5999 32.6992 34.0007 31.1919 34Z', + docs: '/docs/guides/getting-started/mcp#visual-studio-code-copilot', + }, +] + +export default data diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index 668a5942e02ec..701b936a4e1dd 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -1986,6 +1986,11 @@ module.exports = [ source: '/contact/enterprise', destination: 'https://forms.supabase.com/enterprise', }, + { + permanent: true, + source: '/enterprise', + destination: '/solutions/enterprise', + }, { permanent: true, source: '/legal/soc2', diff --git a/apps/www/pages/index.tsx b/apps/www/pages/index.tsx index b5daa669d185e..a51d8e6a6a5fa 100644 --- a/apps/www/pages/index.tsx +++ b/apps/www/pages/index.tsx @@ -1,5 +1,5 @@ import dynamic from 'next/dynamic' -import content from '~/data/home/content' +import getContent from '~/data/home/content' import Layout from '~/components/Layouts/Default' import Hero from '~/components/Hero/Hero' import Logos from '~/components/logos' @@ -13,6 +13,8 @@ const TwitterSocialSection = dynamic(() => import('~/components/TwitterSocialSec const CTABanner = dynamic(() => import('components/CTABanner/index')) const Index = () => { + const content = getContent() + return ( @@ -22,7 +24,7 @@ const Index = () => { - + ) diff --git a/apps/www/pages/solutions/ai-builders.tsx b/apps/www/pages/solutions/ai-builders.tsx index 3da55f541ba96..450ff845d8b64 100644 --- a/apps/www/pages/solutions/ai-builders.tsx +++ b/apps/www/pages/solutions/ai-builders.tsx @@ -2,16 +2,19 @@ import { NextPage } from 'next' import dynamic from 'next/dynamic' import { NextSeo } from 'next-seo' -import Layout from '~/components/Layouts/Default' -import ProductHeader from '~/components/Sections/ProductHeader2' -import AIBuildersLogos from '~/components/Solutions/AIBuildersLogos' -import content from '~/data/solutions/ai-builders' +import Layout from 'components/Layouts/Default' +import ProductHeader from 'components/Sections/ProductHeader2' +import AIBuildersLogos from 'components/Solutions/AIBuildersLogos' +import SolutionsStickyNav from 'components/SolutionsStickyNav' + +import content from 'data/solutions/ai-builders' +import { Solutions } from 'data/Solutions' const Quotes = dynamic(() => import('components/Solutions/Quotes')) -const WhySupabase = dynamic(() => import('~/components/Solutions/FeaturesSection')) -const FeaturesGrid = dynamic(() => import('~/components/Solutions/FeaturesGrid')) -const VideosSection = dynamic(() => import('~/components/Solutions/Videos')) -const CTAForm = dynamic(() => import('~/components/Solutions/CTAForm')) +const WhySupabase = dynamic(() => import('components/Solutions/FeaturesSection')) +const FeaturesGrid = dynamic(() => import('components/Solutions/FeaturesGrid')) +const VideosSection = dynamic(() => import('components/Solutions/Videos')) +const CTAForm = dynamic(() => import('components/Solutions/CTAForm')) const Enterprise: NextPage = () => ( <> @@ -21,7 +24,7 @@ const Enterprise: NextPage = () => ( openGraph={{ title: content.metadata.metaTitle, description: content.metadata.metaDescription, - url: `https://supabase.com/enterprise`, + url: `https://supabase.com/solutions/ai-builders`, images: [ { url: `/images/solutions/ai-builders/ai-builders-og.png`, @@ -30,6 +33,7 @@ const Enterprise: NextPage = () => ( }} /> + ( footer={} footerPosition="left" /> - + diff --git a/apps/www/pages/solutions/beginners.tsx b/apps/www/pages/solutions/beginners.tsx new file mode 100644 index 0000000000000..9ab5ab1459959 --- /dev/null +++ b/apps/www/pages/solutions/beginners.tsx @@ -0,0 +1,48 @@ +import { NextPage } from 'next' +import dynamic from 'next/dynamic' +import { NextSeo } from 'next-seo' + +import Layout from 'components/Layouts/Default' +import ProductHeader from 'components/Sections/ProductHeader2' +import SolutionsStickyNav from 'components/SolutionsStickyNav' +import getContent from 'data/solutions/beginners' +import { Solutions } from 'data/Solutions' + +const WhySupabase = dynamic(() => import('components/Solutions/FeaturesSection')) +const PlatformSection = dynamic(() => import('components/Solutions/PlatformSection')) +const PlatformStarterSection = dynamic(() => import('components/Solutions/TwoColumnsSection')) +const TwitterSocialSection = dynamic(() => import('components/TwitterSocialSection')) +const MPCSection = dynamic(() => import('components/Solutions/MPCSection')) + +const BeginnersPage: NextPage = () => { + const content = getContent() + + return ( + <> + + + + + + + + + + + + ) +} + +export default BeginnersPage diff --git a/apps/www/pages/solutions/developers.tsx b/apps/www/pages/solutions/developers.tsx new file mode 100644 index 0000000000000..b59e3d50f48c1 --- /dev/null +++ b/apps/www/pages/solutions/developers.tsx @@ -0,0 +1,95 @@ +import { NextPage } from 'next' +import dynamic from 'next/dynamic' +import Image from 'next/image' +import { NextSeo } from 'next-seo' + +import Layout from 'components/Layouts/Default' +import ProductHeader from 'components/Sections/ProductHeader2' +import SolutionsStickyNav from 'components/SolutionsStickyNav' +import getContent from 'data/solutions/developers' + +import { Solutions } from 'data/Solutions' + +const WhySupabase = dynamic(() => import('components/Solutions/FeaturesSection')) +const PlatformSection = dynamic(() => import('components/Solutions/PlatformSection')) +const PlatformStarterSection = dynamic(() => import('components/Solutions/TwoColumnsSection')) +const DXSection = dynamic(() => import('components/Solutions/DeveloperExperienceSection')) +const ResultsSection = dynamic(() => import('components/Solutions/ResultsSection')) +const FeatureGrid = dynamic(() => import('components/Solutions/FeatureGrid')) +const SingleQuote = dynamic(() => import('components/Sections/SingleQuote')) +const Security = dynamic(() => import('components/Enterprise/Security')) +const MPCSection = dynamic(() => import('components/Solutions/MPCSection')) + +const BeginnersPage: NextPage = () => { + const content = getContent() + + return ( + <> + + + + + + + + + + + + ), + }} + /> + + + + + ) +} + +export default BeginnersPage diff --git a/apps/www/pages/enterprise.tsx b/apps/www/pages/solutions/enterprise.tsx similarity index 77% rename from apps/www/pages/enterprise.tsx rename to apps/www/pages/solutions/enterprise.tsx index af3f3d73d62d2..46720622bbd42 100644 --- a/apps/www/pages/enterprise.tsx +++ b/apps/www/pages/solutions/enterprise.tsx @@ -2,17 +2,19 @@ import { NextPage } from 'next' import dynamic from 'next/dynamic' import { NextSeo } from 'next-seo' -import Layout from '~/components/Layouts/Default' -import ProductHeader from '~/components/Sections/ProductHeader2' +import Layout from 'components/Layouts/Default' +import ProductHeader from 'components/Sections/ProductHeader2' +import EnterpriseLogos from 'components/Enterprise/EnterpriseLogos' +import SolutionsStickyNav from 'components/SolutionsStickyNav' -import content from '~/data/enterprise' -import EnterpriseLogos from '../components/Enterprise/EnterpriseLogos' +import content from 'data/enterprise' +import { Solutions } from 'data/Solutions' const EnterpriseUseCases = dynamic(() => import('components/Enterprise/UseCases')) const EnterprisePerformance = dynamic(() => import('components/Enterprise/Performance')) const EnterpriseSecurity = dynamic(() => import('components/Enterprise/Security')) const EnterpriseSupport = dynamic(() => import('components/Enterprise/Support')) -const EnterpriseQuote = dynamic(() => import('~/components/Sections/SingleQuote')) +const EnterpriseQuote = dynamic(() => import('components/Sections/SingleQuote')) const CTAForm = dynamic(() => import('components/Enterprise/CTAForm')) const Enterprise: NextPage = () => ( @@ -32,6 +34,7 @@ const Enterprise: NextPage = () => ( }} /> + import('components/Solutions/PlatformSection')) +const PlatformStarterSection = dynamic(() => import('components/Solutions/TwoColumnsSection')) +const WhySupabase = dynamic(() => import('components/Solutions/FeaturesSection')) + +interface Solution { + id: string + name: string + href: string + icon: string +} + +const BeginnersPage: NextPage = () => { + const content = getContent() + + return ( + <> + + + + + + + + + + + ) +} + +export default BeginnersPage diff --git a/apps/www/pages/solutions/postgres-developers.tsx b/apps/www/pages/solutions/postgres-developers.tsx new file mode 100644 index 0000000000000..9820d265e09ab --- /dev/null +++ b/apps/www/pages/solutions/postgres-developers.tsx @@ -0,0 +1,73 @@ +import { NextPage } from 'next' +import dynamic from 'next/dynamic' +import { NextSeo } from 'next-seo' + +import Layout from 'components/Layouts/Default' +import ProductHeader from 'components/Sections/ProductHeader2' +import SubStickyNav from 'components/SolutionsStickyNav' + +import getContent from 'data/solutions/postgres-developers' +import { Solutions } from 'data/Solutions' + +const WhySupabase = dynamic(() => import('components/Solutions/FeaturesSection')) +const PlatformSection = dynamic(() => import('components/Solutions/PlatformSection')) +const PlatformStarterSection = dynamic(() => import('components/Solutions/TwoColumnsSection')) +const DXSection = dynamic(() => import('components/Solutions/DeveloperExperienceSection')) +const ResultsSection = dynamic(() => import('components/Solutions/ResultsSection')) +const FeatureGrid = dynamic(() => import('components/Solutions/FeatureGrid')) +const Security = dynamic(() => import('components/Enterprise/Security')) +const MPCSection = dynamic(() => import('components/Solutions/MPCSection')) + +const BeginnersPage: NextPage = () => { + const content = getContent() + + return ( + <> + + + + + + + + + + + + + + + ) +} + +export default BeginnersPage diff --git a/apps/www/pages/solutions/startups.tsx b/apps/www/pages/solutions/startups.tsx new file mode 100644 index 0000000000000..a5fc4af327ea4 --- /dev/null +++ b/apps/www/pages/solutions/startups.tsx @@ -0,0 +1,95 @@ +import { NextPage } from 'next' +import dynamic from 'next/dynamic' +import Image from 'next/image' +import { NextSeo } from 'next-seo' + +import Layout from 'components/Layouts/Default' +import ProductHeader from 'components/Sections/ProductHeader2' +import SolutionsStickyNav from 'components/SolutionsStickyNav' +import getContent from 'data/solutions/startups' + +import { Solutions } from 'data/Solutions' + +const WhySupabase = dynamic(() => import('components/Solutions/FeaturesSection')) +const PlatformSection = dynamic(() => import('components/Solutions/PlatformSection')) +const PlatformStarterSection = dynamic(() => import('components/Solutions/TwoColumnsSection')) +const DXSection = dynamic(() => import('components/Solutions/DeveloperExperienceSection')) +const ResultsSection = dynamic(() => import('components/Solutions/ResultsSection')) +const FeatureGrid = dynamic(() => import('components/Solutions/FeatureGrid')) +const SingleQuote = dynamic(() => import('components/Sections/SingleQuote')) +const Security = dynamic(() => import('components/Enterprise/Security')) +const MPCSection = dynamic(() => import('components/Solutions/MPCSection')) + +const BeginnersPage: NextPage = () => { + const content = getContent() + + return ( + <> + + + + + + + + + + + + ), + }} + /> + + + + + ) +} + +export default BeginnersPage diff --git a/apps/www/pages/solutions/switch-from-neon.tsx b/apps/www/pages/solutions/switch-from-neon.tsx index c77e1a1f56859..3b0dc21182394 100644 --- a/apps/www/pages/solutions/switch-from-neon.tsx +++ b/apps/www/pages/solutions/switch-from-neon.tsx @@ -2,18 +2,20 @@ import { NextPage } from 'next' import dynamic from 'next/dynamic' import { NextSeo } from 'next-seo' -import Layout from '~/components/Layouts/Default' -import content from '~/data/solutions/neon' +import Layout from 'components/Layouts/Default' +import SolutionsStickyNav from 'components/SolutionsStickyNav' +import content from 'data/solutions/neon' +import { Solutions } from 'data/Solutions' -const ProductHeader = dynamic(() => import('~/components/Sections/ProductHeader2')) -const SingleQuote = dynamic(() => import('~/components/Sections/SingleQuote')) -const FeaturesSection = dynamic(() => import('~/components/Solutions/FeaturesSection')) -const PlatformSection = dynamic(() => import('~/components/Solutions/PlatformSection')) -const DXSection = dynamic(() => import('~/components/Solutions/DeveloperExperienceSection')) -const ResultsSection = dynamic(() => import('~/components/Solutions/ResultsSection')) -const FeatureGrid = dynamic(() => import('~/components/Solutions/FeatureGrid')) -const Security = dynamic(() => import('~/components/Enterprise/Security')) -const CtaSection = dynamic(() => import('~/components/Solutions/CtaSection')) +const ProductHeader = dynamic(() => import('components/Sections/ProductHeader2')) +const SingleQuote = dynamic(() => import('components/Sections/SingleQuote')) +const FeaturesSection = dynamic(() => import('components/Solutions/FeaturesSection')) +const PlatformSection = dynamic(() => import('components/Solutions/PlatformSection')) +const DXSection = dynamic(() => import('components/Solutions/DeveloperExperienceSection')) +const ResultsSection = dynamic(() => import('components/Solutions/ResultsSection')) +const FeatureGrid = dynamic(() => import('components/Solutions/FeatureGrid')) +const Security = dynamic(() => import('components/Enterprise/Security')) +const CtaSection = dynamic(() => import('components/Solutions/CtaSection')) const Neon: NextPage = () => { return ( @@ -24,12 +26,13 @@ const Neon: NextPage = () => { openGraph={{ title: content.metadata.metaTitle, description: content.metadata.metaDescription, - url: `https://supabase.com/neon`, + url: `https://supabase.com/solutions/switch-from-neon`, }} noindex={true} nofollow={true} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/images/solutions/beginners/beginners-hero-light.svg b/apps/www/public/images/solutions/beginners/beginners-hero-light.svg new file mode 100644 index 0000000000000..20c6d59739da4 --- /dev/null +++ b/apps/www/public/images/solutions/beginners/beginners-hero-light.svg @@ -0,0 +1,418 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/images/solutions/developers/developers-hero-dark.svg b/apps/www/public/images/solutions/developers/developers-hero-dark.svg new file mode 100644 index 0000000000000..dba09569a82a3 --- /dev/null +++ b/apps/www/public/images/solutions/developers/developers-hero-dark.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/images/solutions/developers/developers-hero-light.svg b/apps/www/public/images/solutions/developers/developers-hero-light.svg new file mode 100644 index 0000000000000..836df1220ca7b --- /dev/null +++ b/apps/www/public/images/solutions/developers/developers-hero-light.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/images/solutions/no-code/no-code-hero-dark.svg b/apps/www/public/images/solutions/no-code/no-code-hero-dark.svg new file mode 100644 index 0000000000000..72de7a0a24052 --- /dev/null +++ b/apps/www/public/images/solutions/no-code/no-code-hero-dark.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/images/solutions/no-code/no-code-hero-light.svg b/apps/www/public/images/solutions/no-code/no-code-hero-light.svg new file mode 100644 index 0000000000000..7ce03251f8e1b --- /dev/null +++ b/apps/www/public/images/solutions/no-code/no-code-hero-light.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/images/solutions/postgres-developers/sql-editor-dark.jpg b/apps/www/public/images/solutions/postgres-developers/sql-editor-dark.jpg new file mode 100644 index 0000000000000..082c64306bddc Binary files /dev/null and b/apps/www/public/images/solutions/postgres-developers/sql-editor-dark.jpg differ diff --git a/apps/www/public/images/solutions/postgres-developers/sql-editor-light.jpg b/apps/www/public/images/solutions/postgres-developers/sql-editor-light.jpg new file mode 100644 index 0000000000000..0c83ea29855d4 Binary files /dev/null and b/apps/www/public/images/solutions/postgres-developers/sql-editor-light.jpg differ diff --git a/apps/www/public/images/solutions/startups/startups-hero-dark.svg b/apps/www/public/images/solutions/startups/startups-hero-dark.svg new file mode 100644 index 0000000000000..446c7a070d74c --- /dev/null +++ b/apps/www/public/images/solutions/startups/startups-hero-dark.svg @@ -0,0 +1,410 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/images/solutions/startups/startups-hero-light.svg b/apps/www/public/images/solutions/startups/startups-hero-light.svg new file mode 100644 index 0000000000000..07bafd0580e8f --- /dev/null +++ b/apps/www/public/images/solutions/startups/startups-hero-light.svg @@ -0,0 +1,410 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/types/common.ts b/apps/www/types/common.ts index 0f26adca5c876..51ce076d2ed92 100644 --- a/apps/www/types/common.ts +++ b/apps/www/types/common.ts @@ -1,3 +1,4 @@ +import { type MouseEventHandler } from 'react' import { ButtonProps } from 'ui' export interface CTA { @@ -5,4 +6,5 @@ export interface CTA { href: string type?: ButtonProps['type'] target?: HTMLAnchorElement['target'] + onClick?: MouseEventHandler }