Skip to content

Instantly share code, notes, and snippets.

@DSchau
Created September 22, 2022 03:11
Show Gist options
  • Save DSchau/861bcc52696bd27b537ab94c91facb14 to your computer and use it in GitHub Desktop.
Save DSchau/861bcc52696bd27b537ab94c91facb14 to your computer and use it in GitHub Desktop.
Meta Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<style id="typography.js">
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
font: inherit;
margin: 0;
}
optgroup {
font-weight: 700;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
html {
font: 100%/1.5 -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
"Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
box-sizing: border-box;
overflow-y: auto;
}
* {
box-sizing: inherit;
}
*:before {
box-sizing: inherit;
}
*:after {
box-sizing: inherit;
}
body {
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
"Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: normal;
word-wrap: break-word;
font-kerning: normal;
-moz-font-feature-settings: "kern", "liga", "clig", "calt";
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
font-feature-settings: "kern", "liga", "clig", "calt";
overflow: hidden;
}
img {
max-width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
h1 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 2rem;
line-height: 1.25;
}
h2 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 1.51572rem;
line-height: 1.25;
}
h3 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 1.31951rem;
line-height: 1.25;
}
h4 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 1rem;
line-height: 1.25;
}
h5 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 0.87055rem;
line-height: 1.25;
}
h6 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 0.81225rem;
line-height: 1.25;
}
hgroup {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
ul {
margin-left: 1.5rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
list-style-position: outside;
list-style-image: none;
}
ol {
margin-left: 1.5rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
list-style-position: outside;
list-style-image: none;
}
dl {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
dd {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
p {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
figure {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
pre {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
font-size: 0.85rem;
line-height: 1.42;
background: hsla(0, 0%, 0%, 0.04);
border-radius: 3px;
overflow: auto;
word-wrap: normal;
padding: 1.5rem;
}
table {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
font-size: 1rem;
line-height: 1.5rem;
border-collapse: collapse;
width: 100%;
}
fieldset {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
blockquote {
margin-left: 1.5rem;
margin-right: 1.5rem;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
form {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
noscript {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
iframe {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
hr {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: calc(1.5rem - 1px);
background: hsla(0, 0%, 0%, 0.2);
border: none;
height: 1px;
}
address {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
b {
font-weight: bold;
}
strong {
font-weight: bold;
}
dt {
font-weight: bold;
}
th {
font-weight: bold;
}
li {
margin-bottom: calc(1.5rem / 2);
}
ol li {
padding-left: 0;
}
ul li {
padding-left: 0;
}
li > ol {
margin-left: 1.5rem;
margin-bottom: calc(1.5rem / 2);
margin-top: calc(1.5rem / 2);
}
li > ul {
margin-left: 1.5rem;
margin-bottom: calc(1.5rem / 2);
margin-top: calc(1.5rem / 2);
}
blockquote *:last-child {
margin-bottom: 0;
}
li *:last-child {
margin-bottom: 0;
}
p *:last-child {
margin-bottom: 0;
}
li > p {
margin-bottom: calc(1.5rem / 2);
}
code {
font-size: 0.85rem;
line-height: 1.5rem;
}
kbd {
font-size: 0.85rem;
line-height: 1.5rem;
}
samp {
font-size: 0.85rem;
line-height: 1.5rem;
}
abbr {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
}
acronym {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
}
abbr[title] {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
text-decoration: none;
}
thead {
text-align: left;
}
td,
th {
text-align: left;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
font-feature-settings: "tnum";
-moz-font-feature-settings: "tnum";
-ms-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: calc(0.75rem - 1px);
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
tt,
code {
background-color: hsla(0, 0%, 0%, 0.04);
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Roboto Mono",
"Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
pre code {
background: none;
line-height: 1.42;
}
code:before,
code:after,
tt:before,
tt:after {
letter-spacing: -0.2em;
content: " ";
}
pre code:before,
pre code:after,
pre tt:before,
pre tt:after {
content: none;
}
a {
color: #663399;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
h1 tt,
h1 code,
h2 tt,
h2 code,
h3 tt,
h3 code,
h4 tt,
h4 code,
h5 tt,
h5 code,
h6 tt,
h6 code,
strong tt,
strong code {
font-weight: normal;
}
svg text {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
}
</style>
<style id="typography.js">
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
font: inherit;
margin: 0;
}
optgroup {
font-weight: 700;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
html {
font: 100%/1.5 -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
"Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
box-sizing: border-box;
overflow-y: auto;
}
* {
box-sizing: inherit;
}
*:before {
box-sizing: inherit;
}
*:after {
box-sizing: inherit;
}
body {
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
"Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: normal;
word-wrap: break-word;
font-kerning: normal;
-moz-font-feature-settings: "kern", "liga", "clig", "calt";
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
font-feature-settings: "kern", "liga", "clig", "calt";
overflow: hidden;
}
img {
max-width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
h1 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 2rem;
line-height: 1.25;
}
h2 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 1.51572rem;
line-height: 1.25;
}
h3 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 1.31951rem;
line-height: 1.25;
}
h4 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 1rem;
line-height: 1.25;
}
h5 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 0.87055rem;
line-height: 1.25;
}
h6 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
color: hsla(270, 15.797828016000002%, 0%, 0.88);
font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI",
"Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 0.81225rem;
line-height: 1.25;
}
hgroup {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
ul {
margin-left: 1.5rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
list-style-position: outside;
list-style-image: none;
}
ol {
margin-left: 1.5rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
list-style-position: outside;
list-style-image: none;
}
dl {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
dd {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
p {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
figure {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
pre {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
font-size: 0.85rem;
line-height: 1.42;
background: hsla(0, 0%, 0%, 0.04);
border-radius: 3px;
overflow: auto;
word-wrap: normal;
padding: 1.5rem;
}
table {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
font-size: 1rem;
line-height: 1.5rem;
border-collapse: collapse;
width: 100%;
}
fieldset {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
blockquote {
margin-left: 1.5rem;
margin-right: 1.5rem;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
form {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
noscript {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
iframe {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
hr {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: calc(1.5rem - 1px);
background: hsla(0, 0%, 0%, 0.2);
border: none;
height: 1px;
}
address {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.5rem;
}
b {
font-weight: bold;
}
strong {
font-weight: bold;
}
dt {
font-weight: bold;
}
th {
font-weight: bold;
}
li {
margin-bottom: calc(1.5rem / 2);
}
ol li {
padding-left: 0;
}
ul li {
padding-left: 0;
}
li > ol {
margin-left: 1.5rem;
margin-bottom: calc(1.5rem / 2);
margin-top: calc(1.5rem / 2);
}
li > ul {
margin-left: 1.5rem;
margin-bottom: calc(1.5rem / 2);
margin-top: calc(1.5rem / 2);
}
blockquote *:last-child {
margin-bottom: 0;
}
li *:last-child {
margin-bottom: 0;
}
p *:last-child {
margin-bottom: 0;
}
li > p {
margin-bottom: calc(1.5rem / 2);
}
code {
font-size: 0.85rem;
line-height: 1.5rem;
}
kbd {
font-size: 0.85rem;
line-height: 1.5rem;
}
samp {
font-size: 0.85rem;
line-height: 1.5rem;
}
abbr {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
}
acronym {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
}
abbr[title] {
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
cursor: help;
text-decoration: none;
}
thead {
text-align: left;
}
td,
th {
text-align: left;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
font-feature-settings: "tnum";
-moz-font-feature-settings: "tnum";
-ms-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: calc(0.75rem - 1px);
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
tt,
code {
background-color: hsla(0, 0%, 0%, 0.04);
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Roboto Mono",
"Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
pre code {
background: none;
line-height: 1.42;
}
code:before,
code:after,
tt:before,
tt:after {
letter-spacing: -0.2em;
content: " ";
}
pre code:before,
pre code:after,
pre tt:before,
pre tt:after {
content: none;
}
a {
color: #663399;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
h1 tt,
h1 code,
h2 tt,
h2 code,
h3 tt,
h3 code,
h4 tt,
h4 code,
h5 tt,
h5 code,
h6 tt,
h6 code,
strong tt,
strong code {
font-weight: normal;
}
svg text {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
}
</style>
<meta name="generator" content="Gatsby 4.22.1" />
<meta
name="description"
content="An award-winning, full-service law firm uses Gatsby to power their high-performing website."
data-gatsby-head="true"
/>
<meta
name="image"
content="https://www.gatsbyjs.com/_gatsby/image/a38902710e03b55ed7e96f9776cad632/e85871015a3efb5874b4b6d391cbec19/Robinson-Henry_-Award-winning-Law-Firm-Sets-Industry-Gold-Standard-With-Gatsby.jpg?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FRobinson-Henry_-Award-winning-Law-Firm-Sets-Industry-Gold-Standard-With-Gatsby.jpg&amp;a=w%3D1200%26h%3D630%26fm%3Djpg%26q%3D75&amp;cd=91b86afde46fe0c9814abfc6cb1e713c"
data-gatsby-head="true"
/>
<meta
name="keywords"
content="gatsby, javascript, react, graphql, fast"
data-gatsby-head="true"
/>
<meta
name="og:title"
content="Robinson &amp; Henry, P.C.: Award-winning Law Firm Sets Industry Gold Standard With Gatsby | Gatsby"
data-gatsby-head="true"
/>
<meta
name="og:description"
content="An award-winning, full-service law firm uses Gatsby to power their high-performing website."
data-gatsby-head="true"
/>
<meta
name="og:image"
content="https://www.gatsbyjs.com/_gatsby/image/a38902710e03b55ed7e96f9776cad632/e85871015a3efb5874b4b6d391cbec19/Robinson-Henry_-Award-winning-Law-Firm-Sets-Industry-Gold-Standard-With-Gatsby.jpg?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FRobinson-Henry_-Award-winning-Law-Firm-Sets-Industry-Gold-Standard-With-Gatsby.jpg&amp;a=w%3D1200%26h%3D630%26fm%3Djpg%26q%3D75&amp;cd=91b86afde46fe0c9814abfc6cb1e713c"
data-gatsby-head="true"
/>
<meta name="og:type" content="website" data-gatsby-head="true" />
<meta name="og:site_name" content="Gatsby" data-gatsby-head="true" />
<meta
name="og:url"
content="https://www.gatsbyjs.com/blog/robinson-henry-p-c-award-winning-law-firm-sets-industry-gold-standard-with-gatsby/"
data-gatsby-head="true"
/>
<meta
name="twitter:title"
content="Robinson &amp; Henry, P.C.: Award-winning Law Firm Sets Industry Gold Standard With Gatsby | Gatsby"
data-gatsby-head="true"
/>
<meta
name="twitter:description"
content="An award-winning, full-service law firm uses Gatsby to power their high-performing website."
data-gatsby-head="true"
/>
<meta
name="twitter:image"
content="https://www.gatsbyjs.com/_gatsby/image/a38902710e03b55ed7e96f9776cad632/e85871015a3efb5874b4b6d391cbec19/Robinson-Henry_-Award-winning-Law-Firm-Sets-Industry-Gold-Standard-With-Gatsby.jpg?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FRobinson-Henry_-Award-winning-Law-Firm-Sets-Industry-Gold-Standard-With-Gatsby.jpg&amp;a=w%3D1200%26h%3D630%26fm%3Djpg%26q%3D75&amp;cd=91b86afde46fe0c9814abfc6cb1e713c"
data-gatsby-head="true"
/>
<meta
name="twitter:card"
content="summary_large_image"
data-gatsby-head="true"
/>
<meta name="twitter:site" content="@gatsbyjs" data-gatsby-head="true" />
<meta name="twitter:creator" content="@gatsbyjs" data-gatsby-head="true" />
<meta name="fb:app_id" content="" data-gatsby-head="true" />
<meta name="theme-color" content="#663399" />
<style
data-href="/styles.e76b32988447aaa1ed04.css"
data-identity="gatsby-global-css"
>
@charset "UTF-8";
.isoswk0 {
--isoswk1: #000;
--isoswk2: #fff;
--isoswk3: hsla(0, 0%, 100%, 0.8);
--isoswk4: #a97ec7;
--isoswk5: #f6edfa;
--isoswk6: #f1defa;
--isoswk7: #b17acc;
--isoswk8: #639;
--isoswk9: #f3f3f3;
--isoswka: #232129;
}
@-webkit-keyframes zyb4ak0 {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
to {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(1turn);
transform: translateX(-50%) translateY(-50%) rotate(1turn);
}
}
@keyframes zyb4ak0 {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
to {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(1turn);
transform: translateX(-50%) translateY(-50%) rotate(1turn);
}
}
.zyb4ak1 {
position: relative;
}
.zyb4ak2 {
-webkit-animation: zyb4ak0 1s linear infinite;
animation: zyb4ak0 1s linear infinite;
height: 28px;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.zyb4ak3 {
align-items: center;
background: none;
border: none;
border-radius: 4px;
box-sizing: border-box;
cursor: default;
display: flex;
height: 32px;
justify-content: center;
padding: 0;
position: relative;
transition-duration: 0.3s;
transition-property: background, opacity;
transition-timing-function: ease-in-out;
width: 32px;
}
.zyb4ak3:disabled {
cursor: default;
opacity: 0.3;
}
.zyb4ak4 {
background: var(--isoswk2);
}
.zyb4ak5 {
background: var(--isoswk5);
}
.zyb4ak6 {
background: var(--isoswk2);
}
.zyb4ak6:hover:not(:disabled) {
background: var(--isoswk9);
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.zyb4ak2 {
-webkit-animation: none;
animation: none;
}
}
@media (prefers-color-scheme: dark) {
.zyb4ak2 {
color: var(--isoswk6);
}
}
._1j0fjnn0 {
left: 40px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
._1j0fjnn1 {
align-items: center;
background: var(--isoswk1);
border-radius: 4px;
color: var(--isoswk2);
cursor: default;
display: flex;
line-height: 12px;
padding: 10px 13px;
position: relative;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
will-change: opacity;
}
._1j0fjnn1:before {
border-color: transparent #000 transparent transparent;
border-style: solid;
border-width: 10px 10px 10px 0;
content: "";
height: 0;
left: -6px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
}
._1j0fjnn2 {
align-items: center;
background: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
margin-left: 0.8rem;
padding: 0;
}
._1j0fjnn2 > svg {
color: var(--isoswk2);
opacity: 0.6;
transition-duration: 0.3s;
transition-property: color, opacity;
transition-timing-function: ease-in-out;
}
._1j0fjnn2:hover > svg {
opacity: 1;
}
.cslpar0 {
align-items: center;
background: none;
border: none;
display: flex;
padding: 0;
}
.cslpar0 > svg,
.cslpar1 {
display: inline;
margin-left: 5px;
}
.cslpar1 {
color: var(--isoswk4);
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
line-height: 12px;
margin-bottom: 0;
text-decoration: none;
}
.cslpar1:hover {
text-decoration: underline;
}
._1lmoo7k0 {
align-items: center;
display: flex;
gap: 4px;
justify-content: flex-start;
}
.ykhwys0 {
background: var(--isoswk2);
border-radius: 6px;
box-shadow: 0 2px 4px rgba(46, 41, 51, 0.08),
0 4px 8px rgba(71, 63, 79, 0.16);
box-sizing: border-box;
display: flex;
flex-direction: column;
font: 14px/1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol !important;
gap: 0.3rem;
left: 16px;
padding: 0.75rem 0.5rem;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition-duration: 0.3s;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 999999;
}
.ykhwys1 {
opacity: 0;
-webkit-transform: translateX(-100%) translateY(-50%);
transform: translateX(-100%) translateY(-50%);
}
.ykhwys2 {
opacity: 1;
-webkit-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%);
}
@media (prefers-reduced-motion: reduce) {
.ykhwys0 {
transition: none;
}
}
:root {
--selection-color: #639;
--selection-hover-color: #452475;
}
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__navigation-icon:before,
.react-datepicker__year-read-view--down-arrow {
border-color: #ccc;
border-style: solid;
border-width: 3px 3px 0 0;
content: "";
display: block;
height: 9px;
position: absolute;
top: 6px;
width: 9px;
}
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle,
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle {
margin-left: -4px;
position: absolute;
width: 0;
}
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle:before,
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle:before {
border: 8px solid transparent;
box-sizing: content-box;
content: "";
height: 0;
left: -8px;
position: absolute;
width: 1px;
z-index: -1;
}
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle:before,
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle:before {
border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle {
margin-top: -8px;
top: 0;
}
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle:before {
border-bottom-color: #f0f0f0;
border-top: none;
}
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle:after {
top: 0;
}
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle:before {
border-bottom-color: #aeaeae;
top: -1px;
}
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle {
bottom: 0;
margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle:before {
border-bottom: none;
border-top-color: #fff;
}
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle:after {
bottom: 0;
}
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle:before {
border-top-color: #aeaeae;
bottom: -1px;
}
.react-datepicker-wrapper {
border: 0;
display: inline-block;
padding: 0;
width: 100%;
}
.react-datepicker {
background-color: #fff;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
color: #000;
display: inline-block;
font-family: Inter, arial, sans-serif;
font-size: 0.8rem;
position: relative;
}
.react-datepicker--time-only .react-datepicker__triangle {
left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
.react-datepicker__triangle {
left: 50px;
position: absolute;
}
.react-datepicker-popper {
z-index: 1;
}
.react-datepicker-popper[data-placement^="bottom"] {
padding-top: 10px;
}
.react-datepicker-popper[data-placement="bottom-end"]
.react-datepicker__triangle,
.react-datepicker-popper[data-placement="top-end"]
.react-datepicker__triangle {
left: auto;
right: 50px;
}
.react-datepicker-popper[data-placement^="top"] {
padding-bottom: 10px;
}
.react-datepicker-popper[data-placement^="right"] {
padding-left: 8px;
}
.react-datepicker-popper[data-placement^="right"]
.react-datepicker__triangle {
left: auto;
right: 42px;
}
.react-datepicker-popper[data-placement^="left"] {
padding-right: 8px;
}
.react-datepicker-popper[data-placement^="left"]
.react-datepicker__triangle {
left: 42px;
right: auto;
}
.react-datepicker__header {
padding: 1rem;
position: relative;
text-align: center;
}
.react-datepicker__header--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
border-top-right-radius: 0.3rem;
}
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__year-dropdown-container--select {
display: inline-block;
margin: 0 2px;
}
.react-datepicker-time__header,
.react-datepicker-year-header,
.react-datepicker__current-month {
color: #666;
font-size: 0.75rem;
letter-spacing: 0.075em;
margin-bottom: 0.25rem;
margin-top: 0;
text-transform: uppercase;
}
.react-datepicker-time__header {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.react-datepicker__navigation {
align-items: center;
background: none;
border: none;
cursor: pointer;
display: flex;
height: 32px;
justify-content: center;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-indent: -999em;
top: 2px;
width: 32px;
z-index: 1;
}
.react-datepicker__navigation--previous {
left: 2px;
}
.react-datepicker__navigation--next {
right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 85px;
}
.react-datepicker__navigation--years {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top: 0;
}
.react-datepicker__navigation--years-previous {
top: 4px;
}
.react-datepicker__navigation--years-upcoming {
top: -4px;
}
.react-datepicker__navigation:hover :before {
border-color: #a6a6a6;
}
.react-datepicker__navigation-icon {
font-size: 20px;
position: relative;
top: -1px;
width: 0;
}
.react-datepicker__navigation-icon--next {
left: -2px;
}
.react-datepicker__navigation-icon--next:before {
left: -7px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.react-datepicker__navigation-icon--previous {
right: -2px;
}
.react-datepicker__navigation-icon--previous:before {
right: -7px;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.react-datepicker__month-container {
float: left;
}
.react-datepicker__year {
margin: 0.4rem;
text-align: center;
}
.react-datepicker__year-wrapper {
display: flex;
flex-wrap: wrap;
max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
display: inline-block;
margin: 2px;
width: 4rem;
}
.react-datepicker__month {
margin: 0.4rem;
text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
display: inline-block;
margin: 2px;
width: 4rem;
}
.react-datepicker__input-time-container {
clear: both;
float: left;
margin: 5px 0 10px 15px;
text-align: left;
width: 100%;
}
.react-datepicker__input-time-container .react-datepicker-time__caption,
.react-datepicker__input-time-container
.react-datepicker-time__input-container {
display: inline-block;
}
.react-datepicker__input-time-container
.react-datepicker-time__input-container
.react-datepicker-time__input {
display: inline-block;
margin-left: 10px;
}
.react-datepicker__input-time-container
.react-datepicker-time__input-container
.react-datepicker-time__input
input {
width: auto;
}
.react-datepicker__input-time-container
.react-datepicker-time__input-container
.react-datepicker-time__input
input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container
.react-datepicker-time__input-container
.react-datepicker-time__input
input[type="time"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.react-datepicker__input-time-container
.react-datepicker-time__input-container
.react-datepicker-time__input
input[type="time"] {
-moz-appearance: textfield;
}
.react-datepicker__input-time-container
.react-datepicker-time__input-container
.react-datepicker-time__delimiter {
display: inline-block;
margin-left: 5px;
}
.react-datepicker__time-container {
border-left: 1px solid #aeaeae;
float: right;
width: 85px;
}
.react-datepicker__time-container--with-today-button {
border: 1px solid #aeaeae;
border-radius: 0.3rem;
display: inline;
position: absolute;
right: -72px;
top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
background: #fff;
border-bottom-right-radius: 0.3rem;
position: relative;
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box {
border-bottom-right-radius: 0.3rem;
margin: 0 auto;
overflow-x: hidden;
text-align: center;
width: 85px;
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box
ul.react-datepicker__time-list {
box-sizing: content-box;
height: calc(195px + 0.85rem);
list-style: none;
margin: 0;
overflow-y: scroll;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item {
height: 30px;
padding: 5px 10px;
white-space: nowrap;
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item:hover {
background-color: #f0f0f0;
cursor: pointer;
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item--selected {
background-color: var(--selection-color);
color: #fff;
font-weight: 700;
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item--selected:hover {
background-color: var(--selection-color);
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item--disabled {
color: #ccc;
}
.react-datepicker__time-container
.react-datepicker__time
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item--disabled:hover {
background-color: transparent;
cursor: default;
}
.react-datepicker__week-number {
color: #ccc;
display: inline-block;
line-height: 1.7rem;
margin: 0.166rem;
text-align: center;
width: 1.7rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
background-color: #f0f0f0;
border-radius: 0.3rem;
}
.react-datepicker__day-names,
.react-datepicker__week {
white-space: nowrap;
}
.react-datepicker__day-names {
margin-bottom: -8px;
}
.react-datepicker__day,
.react-datepicker__day-name,
.react-datepicker__time-name {
color: #000;
display: inline-block;
font-size: 1rem;
line-height: 1.7rem;
margin: 0.2rem;
text-align: center;
width: 1.7rem;
}
.react-datepicker__month--in-range,
.react-datepicker__month--in-selecting-range,
.react-datepicker__month--selected,
.react-datepicker__quarter--in-range,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--selected {
background-color: var(--selection-color);
border-radius: 0.3rem;
color: #fff;
}
.react-datepicker__month--in-range:hover,
.react-datepicker__month--in-selecting-range:hover,
.react-datepicker__month--selected:hover,
.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--selected:hover {
background-color: var(--selection-hover-color);
}
.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
color: #ccc;
pointer-events: none;
}
.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
background-color: transparent;
cursor: default;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
background-color: #f0f0f0;
border-radius: 0.3rem;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
background-color: #ddd;
font-weight: 700;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
background-color: #3dcc4a;
border-radius: 0.3rem;
color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
color: #f0f;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
color: green;
}
.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--selected,
.react-datepicker__month-text--in-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--selected,
.react-datepicker__quarter-text--in-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__year-text--in-range,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--selected {
background-color: var(--selection-color);
border-radius: 0.3rem;
color: #fff;
}
.react-datepicker__day--in-range:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--selected:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__year-text--in-range:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--selected:hover {
background-color: var(--selection-hover-color);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
border-radius: 0.3rem;
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
background-color: var(--selection-hover-color);
color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
background-color: var(--selection-color);
color: #fff;
}
.react-datepicker__month--selecting-range
.react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range
.react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range
.react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range
.react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) {
background-color: #f0f0f0;
color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
color: #ccc;
cursor: default;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
background-color: transparent;
}
.react-datepicker__month-text.react-datepicker__month--in-range:hover,
.react-datepicker__month-text.react-datepicker__month--selected:hover,
.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__month-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover {
background-color: var(--selection-color);
}
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
background-color: #f0f0f0;
}
.react-datepicker__input-container {
display: inline-block;
position: relative;
width: 100%;
}
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view,
.react-datepicker__year-read-view {
border: 1px solid transparent;
border-radius: 0.3rem;
position: relative;
}
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover,
.react-datepicker__year-read-view:hover {
cursor: pointer;
}
.react-datepicker__month-read-view:hover
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__year-read-view:hover
.react-datepicker__year-read-view--down-arrow {
border-top-color: #b3b3b3;
}
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__year-read-view--down-arrow {
right: -16px;
top: 0;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown,
.react-datepicker__year-dropdown {
background-color: #f0f0f0;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
left: 25%;
position: absolute;
text-align: center;
top: 30px;
width: 50%;
z-index: 1;
}
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover,
.react-datepicker__year-dropdown:hover {
cursor: pointer;
}
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable,
.react-datepicker__year-dropdown--scrollable {
height: 150px;
overflow-y: scroll;
}
.react-datepicker__month-option,
.react-datepicker__month-year-option,
.react-datepicker__year-option {
display: block;
line-height: 20px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type,
.react-datepicker__year-option:first-of-type {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type,
.react-datepicker__year-option:last-of-type {
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
-webkit-user-select: none;
user-select: none;
}
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover,
.react-datepicker__year-option:hover {
background-color: #ccc;
}
.react-datepicker__month-option:hover
.react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover
.react-datepicker__navigation--years-upcoming,
.react-datepicker__year-option:hover
.react-datepicker__navigation--years-upcoming {
border-bottom-color: #b3b3b3;
}
.react-datepicker__month-option:hover
.react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover
.react-datepicker__navigation--years-previous,
.react-datepicker__year-option:hover
.react-datepicker__navigation--years-previous {
border-top-color: #b3b3b3;
}
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected,
.react-datepicker__year-option--selected {
left: 15px;
position: absolute;
}
.react-datepicker__close-icon {
background-color: transparent;
border: 0;
cursor: pointer;
display: table-cell;
height: 100%;
outline: 0;
padding: 0 6px 0 0;
position: absolute;
right: 0;
top: 0;
vertical-align: middle;
}
.react-datepicker__close-icon:after {
background-color: var(--selection-color);
border-radius: 50%;
color: #fff;
content: "×";
cursor: pointer;
display: table-cell;
font-size: 12px;
height: 16px;
line-height: 1;
padding: 2px;
text-align: center;
vertical-align: middle;
width: 16px;
}
.react-datepicker__today-button {
background: #f0f0f0;
border-top: 1px solid #aeaeae;
clear: left;
cursor: pointer;
font-weight: 700;
padding: 5px 0;
text-align: center;
}
.react-datepicker__portal {
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
height: 100vh;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 2147483647;
}
.react-datepicker__day-name {
color: #666;
font-size: 0.875rem;
font-weight: 700;
}
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__time-name {
line-height: 3rem;
width: 3rem;
}
@media (max-height: 550px), (max-width: 400px) {
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__time-name {
line-height: 2rem;
width: 2rem;
}
}
.react-datepicker__portal .react-datepicker-time__header,
.react-datepicker__portal .react-datepicker__current-month {
font-size: 1.44rem;
}
.react-datepicker__day--keyboard-selected .react-datepicker__day--today {
background: #ff0;
}
._1hqpeone {
--_1hqpeonf: var(--_1hqpeon0);
--_1hqpeong: var(--_1hqpeon1);
--_1hqpeonh: var(--_1hqpeon2);
--_1hqpeoni: var(--_1hqpeon3);
--_1hqpeonj: var(--_1hqpeon4);
--_1hqpeonk: var(--_1hqpeon5);
--_1hqpeonl: var(--_1hqpeon6);
--_1hqpeonm: var(--_1hqpeon7);
--_1hqpeonn: var(--_1hqpeon8);
--_1hqpeono: var(--_1hqpeon9);
--_1hqpeonp: var(--_1hqpeona);
--_1hqpeonq: var(--_1hqpeonb);
--_1hqpeonr: var(--_1hqpeonc);
--_1hqpeons: var(--_1hqpeond);
--_1hqpeont: 0px;
--_1hqpeonu: 4px;
--_1hqpeonv: 8px;
--_1hqpeonw: 12px;
--_1hqpeonx: 16px;
--_1hqpeony: 20px;
--_1hqpeonz: 24px;
--_1hqpeon10: 32px;
--_1hqpeon11: 40px;
--_1hqpeon12: 48px;
--_1hqpeon13: 56px;
--_1hqpeon14: 64px;
--_1hqpeon15: 72px;
--_1hqpeon16: auto;
--_1hqpeon17: 1440px;
}
:root {
--_1hqpeon0: #36313d;
--_1hqpeon1: #fff;
--_1hqpeon2: #639;
--_1hqpeon3: #f5f5f5;
--_1hqpeon4: #639;
--_1hqpeon5: #542c85;
--_1hqpeon6: #48434f;
--_1hqpeon7: transparent;
--_1hqpeon8: #639;
--_1hqpeon9: #fcfaff;
--_1hqpeona: #fff;
--_1hqpeonb: #639;
--_1hqpeonc: #fff;
--_1hqpeond: #542c85;
}
._1nrsgu0 {
align-items: center;
display: flex;
}
._1nrsgu1 {
margin-left: auto;
margin-right: auto;
max-width: 1440px;
padding-left: 32px;
padding-right: 32px;
width: 100%;
}
._1nrsgu2 {
display: none;
}
._1nrsgu3 {
display: flex;
}
._1nrsgu4 {
white-space: nowrap;
}
._1nrsgu5 {
background: transparent;
border: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
}
._1nrsgu6 {
align-items: center;
border-radius: 4px;
color: var(--_1hqpeon6);
cursor: pointer;
display: inline-flex;
font-size: 14px;
padding: 8px 12px;
position: relative;
text-decoration: none;
}
._1nrsgu6:hover {
background-color: var(--_1hqpeon9);
color: var(--_1hqpeon8);
}
._1nrsgu7 {
list-style: none;
margin: 0;
padding: 0;
}
._1nrsgu8 {
margin: 0;
}
._1nrsgu9 {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
._1nrsgua {
align-items: center;
background-color: var(--_1hqpeonb);
border-radius: 4px;
box-sizing: border-box;
color: var(--_1hqpeona);
cursor: pointer;
display: inline-flex;
font-size: 14px;
font-weight: 600;
height: 32px;
min-height: 32px;
padding: 3px 16px 4px;
text-decoration: none;
}
._1nrsgub {
background-color: transparent;
border-color: var(--_1hqpeonb);
border-style: solid;
border-width: 1px;
color: var(--_1hqpeon4);
}
._1nrsguc {
border-bottom: 1px solid;
border-color: var(--_1hqpeon3);
height: 48px;
min-width: 0;
width: 100%;
}
._1nrsgue {
flex-shrink: 0;
font-size: 12px;
margin-left: auto;
min-width: 0;
}
._1nrsguf {
border-radius: 4px;
color: var(--_1hqpeon6);
display: inline-block;
padding: 4px 8px;
text-decoration: none;
white-space: nowrap;
}
._1nrsguf:focus,
._1nrsguf:hover {
background-color: var(--_1hqpeon9);
color: var(--_1hqpeon8);
}
._1nrsgug {
background-color: var(--_1hqpeon1);
position: relative;
z-index: 3;
}
._1nrsguh {
left: 0;
position: -webkit-sticky;
position: sticky;
right: 0;
top: 0;
}
._1nrsgui {
height: 64px;
}
._1nrsguj {
color: inherit;
text-decoration: none;
}
._1nrsguj,
._1nrsguk {
display: block;
}
._1nrsgul {
margin-left: 32px;
margin-right: auto;
}
._1nrsgum {
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
font-size: 24px;
height: 48px;
line-height: 1;
margin-right: 0;
place-content: center;
width: 48px;
}
._1nrsgum:focus,
._1nrsgum:hover {
background-color: var(--_1hqpeon9);
color: var(--_1hqpeon8);
}
._1nrsgun {
margin-left: auto;
}
._1nrsguo {
margin-left: 16px;
}
._1nrsguq {
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
font-size: 24px;
height: 48px;
line-height: 1;
margin-left: auto;
place-content: center;
width: 48px;
}
._1nrsguq:focus,
._1nrsguq:hover {
background-color: var(--_1hqpeon9);
color: var(--_1hqpeon8);
}
._1nrsgur {
--_1hqpeon0: hsla(0, 0%, 100%, 0.7);
--_1hqpeon1: #11081f;
--_1hqpeon2: #639;
--_1hqpeon3: #1f0f39;
--_1hqpeon4: #f1defa;
--_1hqpeon5: #f6edfa;
--_1hqpeon6: #fff;
--_1hqpeon7: transparent;
--_1hqpeon8: #fff;
--_1hqpeon9: hsla(0, 0%, 100%, 0.05);
--_1hqpeona: #fff;
--_1hqpeonb: #639;
--_1hqpeonc: #fff;
--_1hqpeond: #542c85;
background-color: var(--_1hqpeon1);
border-color: var(--_1hqpeon3);
color: var(--_1hqpeon0);
}
@media (max-width: 1000px) {
._1nrsgu1 {
padding-left: 16px;
padding-right: 16px;
}
._1nrsgu2 {
display: flex;
}
._1nrsgu3 {
display: none;
}
._1nrsgum {
margin-right: -8px;
}
}
.e861rl0 {
flex: 1 1 auto;
font-size: 12px;
-webkit-mask-image: linear-gradient(
90deg,
#362066 0,
#362066 96%,
#362066 0,
transparent
);
mask-image: linear-gradient(
90deg,
#362066 0,
#362066 96%,
#362066 0,
transparent
);
min-width: 0;
overflow-x: auto;
padding-right: 64px;
width: 100%;
}
.e861rl0::-webkit-scrollbar {
background: transparent;
height: 0;
width: 0;
}
.e861rl1 {
background-color: #f6edfa;
border-radius: 4px;
color: #542c85;
font-weight: 600;
letter-spacing: 0.1em;
margin-right: 16px;
padding: 4px 8px;
text-transform: uppercase;
}
.e861rl1,
.e861rl2 {
white-space: nowrap;
}
.e861rl2 {
color: var(--_1hqpeon0);
}
.e861rl2 p {
margin: 0;
}
.e861rl2 a {
color: var(--_1hqpeon4);
font-weight: 700;
}
.e861rl2 a:focus,
.e861rl2 a:hover {
color: var(--_1hqpeon5);
}
._1sqad3p0 {
position: relative;
}
._1sqad3p1 {
margin-left: 4px;
margin-top: 2px;
}
._1sqad3p2 {
left: -32px;
min-width: 576px;
padding-top: 8px;
position: absolute;
top: 100%;
z-index: 1;
}
._1sqad3p3 {
background: #fff;
border-top-left-radius: 2px;
bottom: -18px;
height: 16px;
left: 50%;
position: absolute;
-webkit-transform: translateX(calc(-50% - 10px)) rotate(45deg);
transform: translateX(calc(-50% - 10px)) rotate(45deg);
width: 16px;
}
._1qw7uvr3 {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgb(46 41 51/8%),
0 8px 24px rgba(71, 63, 79, 0.16);
color: #48434f;
padding: 36px;
position: relative;
}
._1qw7uvr4 {
-webkit-column-gap: 56px;
column-gap: 56px;
display: grid;
grid-template-columns: repeat(var(--_1qw7uvr0, 1), -webkit-max-content);
grid-template-columns: repeat(var(--_1qw7uvr0, 1), max-content);
grid-template-rows: repeat(var(--_1qw7uvr1, 1), -webkit-min-content);
grid-template-rows: repeat(var(--_1qw7uvr1, 1), min-content);
row-gap: 32px;
}
._1qw7uvr5 {
display: flex;
flex-direction: column;
gap: 20px;
}
._1qw7uvr6 {
color: #78757a;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
margin: 0;
text-transform: uppercase;
}
._1qw7uvr7 {
gap: 20px;
}
._1qw7uvr7,
._1qw7uvr8 {
display: flex;
flex-direction: column;
}
._1qw7uvr8 {
gap: 16px;
grid-row: span var(--_1qw7uvr2, 1);
margin: 0;
}
._1qw7uvr9 {
align-items: flex-start;
color: inherit;
gap: 16px;
justify-content: flex-start;
text-decoration: none;
}
._1qw7uvr9,
._1qw7uvra {
display: flex;
}
._1qw7uvrb {
color: #48434f;
font-size: 16px;
font-weight: 600;
margin-bottom: 0;
}
._1qw7uvr9:focus ._1qw7uvrb,
._1qw7uvr9:hover ._1qw7uvrb {
color: #542c85;
text-decoration: underline;
}
._1qw7uvrb:after {
color: rgba(35, 33, 41, 0.4);
content: "›";
display: inline-block;
margin-left: 4px;
}
._1qw7uvrc {
color: #635e69;
font-size: 14px;
}
._1qw7uvrd {
-webkit-column-gap: 36px;
column-gap: 36px;
display: grid;
font-size: 14px;
grid-template-columns: repeat(3, 1fr);
margin-left: 56px;
row-gap: 8px;
}
._1qw7uvre {
margin: 0;
}
._1qw7uvrf {
color: #635e69;
text-decoration: none;
white-space: nowrap;
}
._1qw7uvrf:focus,
._1qw7uvrf:hover {
color: #639;
text-decoration: underline;
}
._1qw7uvrf:after {
color: rgba(35, 33, 41, 0.4);
content: "›";
display: inline-block;
margin-left: 4px;
}
@-webkit-keyframes stzoip0 {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes stzoip0 {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes stzoip1 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes stzoip1 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.stzoip2 {
-webkit-overflow-scrolling: touch;
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: stzoip0;
animation-name: stzoip0;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
background-color: #fff;
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
}
.stzoip3 {
-webkit-animation-name: stzoip1;
animation-name: stzoip1;
}
.stzoip4 {
background-color: #fff;
flex: 0 1 auto;
gap: 12px;
justify-content: space-between;
padding: 16px;
}
.stzoip5 {
gap: 20px;
}
.stzoip6 {
border-bottom: 1px solid #f0f0f2;
}
.stzoip7 {
border-top: 1px solid #f0f0f2;
}
.stzoip8 {
background-color: #fff;
border-bottom: 1px solid #f0f0f2;
flex: 0 1 auto;
gap: 12px;
justify-content: flex-start;
padding: 16px;
}
.stzoip9 {
color: #639;
display: inline-block;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
}
.stzoip9:focus,
.stzoip9:hover {
color: #542c85;
text-decoration: underline;
}
.stzoipa {
border-radius: 4px;
cursor: pointer;
font-size: 32px;
height: 32px;
line-height: 1;
margin-right: -2px;
min-width: 32px;
padding: 0;
}
.stzoipa:focus,
.stzoipa:hover {
background-color: #fcfaff;
color: #b17acc;
}
.stzoipb {
border-bottom: 1px solid;
border-color: #f5f5f5;
padding-bottom: 16px;
padding-top: 16px;
}
.stzoipb:last-child {
border: none;
}
.stzoipc {
color: #48434f;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.stzoipe {
color: #48434f;
font-size: 14px;
padding: 0;
text-decoration: none;
}
.stzoipe:focus,
.stzoipe:hover {
background-color: #fcfaff;
color: #639;
}
.stzoipf {
display: block;
margin-left: 8px;
}
.stzoipg {
flex: 1 1 auto;
overflow: auto;
padding-left: 32px;
padding-right: 32px;
}
._6wct5e0 {
margin-right: 8px;
}
._6wct5e1 {
background-color: #fff;
left: 0;
position: -webkit-sticky;
position: sticky;
right: 0;
top: 0;
z-index: 2;
}
._6wct5e2 {
border-bottom: 1px solid #f0f0f2;
border-color: #f0f0f2 currentcolor;
border-top: 1px solid #f0f0f2;
}
._6wct5e2,
._6wct5e3 {
align-items: center;
display: flex;
}
._6wct5e3 {
flex: 1 1 auto;
padding-bottom: 16px;
padding-top: 16px;
position: relative;
}
._6wct5e4 {
align-items: center;
display: flex;
font-size: 1.125rem;
font-weight: 700;
margin: 0;
}
._6wct5e5 {
color: inherit;
text-decoration: none;
}
._6wct5e5:focus,
._6wct5e5:hover {
color: #542c85;
}
._6wct5e6 {
align-items: center;
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
border-radius: 4px;
box-sizing: border-box;
margin: 0 0 0 8px;
padding: 8px;
}
._6wct5e6:focus,
._6wct5e6:hover {
outline: none;
}
._6wct5e7 {
align-items: center;
background-color: var(--_1hqpeon1);
margin-left: auto;
position: static;
}
._6wct5e7,
._6wct5e8 {
display: flex;
}
._6wct5e9 {
color: #48434f;
display: block;
font-size: 14px;
padding: 8px 12px;
text-decoration: none;
}
._6wct5e9:focus,
._6wct5e9:hover {
background-color: hsla(0, 0%, 100%, 0.05);
color: #542c85;
text-decoration: underline;
}
._6wct5ea {
display: flex;
gap: 8px;
margin-right: 0;
place-items: center;
}
._6wct5eb {
margin-left: 12px;
}
._6wct5eb,
._6wct5ec {
flex: none;
min-width: 0;
}
._6wct5ec {
border-radius: 4px;
}
@media (max-width: 1000px) {
._6wct5e1 {
position: static;
}
._6wct5e7 {
border-radius: 8px;
box-shadow: 0 4px 16px rgba(46, 41, 51, 0.08),
0 8px 24px rgba(71, 63, 79, 0.16);
display: block;
left: 0;
margin-left: 12px;
min-width: 256px;
padding: 12px;
position: absolute;
top: 100%;
z-index: 3;
}
._6wct5e8 {
display: none;
}
._6wct5e9 {
font-size: 1rem;
padding-bottom: 12px;
padding-top: 12px;
}
._6wct5ea {
margin-right: -8px;
}
._6wct5eb {
margin-left: auto;
}
}
/*! @docsearch/css 3.2.1 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
:root {
--docsearch-primary-color: #5468ff;
--docsearch-text-color: #1c1e21;
--docsearch-spacing: 12px;
--docsearch-icon-stroke-width: 1.4;
--docsearch-highlight-color: var(--docsearch-primary-color);
--docsearch-muted-color: #969faf;
--docsearch-container-background: rgba(101, 108, 133, 0.8);
--docsearch-logo-color: #5468ff;
--docsearch-modal-width: 560px;
--docsearch-modal-height: 600px;
--docsearch-modal-background: #f5f6f7;
--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
0 3px 8px 0 #555a64;
--docsearch-searchbox-height: 56px;
--docsearch-searchbox-background: #ebedf0;
--docsearch-searchbox-focus-background: #fff;
--docsearch-searchbox-shadow: inset 0 0 0 2px
var(--docsearch-primary-color);
--docsearch-hit-height: 56px;
--docsearch-hit-color: #444950;
--docsearch-hit-active-color: #fff;
--docsearch-hit-background: #fff;
--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
--docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
0 1px 2px 1px rgba(30, 35, 90, 0.4);
--docsearch-footer-height: 44px;
--docsearch-footer-background: #fff;
--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,
0 -3px 6px 0 rgba(69, 98, 155, 0.12);
}
html[data-theme="dark"] {
--docsearch-text-color: #f5f6f7;
--docsearch-container-background: rgba(9, 10, 17, 0.8);
--docsearch-modal-background: #15172a;
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
--docsearch-searchbox-background: #090a11;
--docsearch-searchbox-focus-background: #000;
--docsearch-hit-color: #bec3c9;
--docsearch-hit-shadow: none;
--docsearch-hit-background: #090a11;
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55,
inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
--docsearch-footer-background: #1e2136;
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
0 -4px 8px 0 rgba(0, 0, 0, 0.2);
--docsearch-logo-color: #fff;
--docsearch-muted-color: #7f8497;
}
.DocSearch-Button {
align-items: center;
background: var(--docsearch-searchbox-background);
border: 0;
border-radius: 40px;
color: var(--docsearch-muted-color);
cursor: pointer;
display: flex;
font-weight: 500;
height: 36px;
justify-content: space-between;
margin: 0 0 0 16px;
padding: 0 8px;
-webkit-user-select: none;
user-select: none;
}
.DocSearch-Button:active,
.DocSearch-Button:focus,
.DocSearch-Button:hover {
background: var(--docsearch-searchbox-focus-background);
box-shadow: var(--docsearch-searchbox-shadow);
color: var(--docsearch-text-color);
outline: none;
}
.DocSearch-Button-Container {
align-items: center;
display: flex;
}
.DocSearch-Search-Icon {
stroke-width: 1.6;
}
.DocSearch-Button .DocSearch-Search-Icon {
color: var(--docsearch-text-color);
}
.DocSearch-Button-Placeholder {
font-size: 1rem;
padding: 0 12px 0 6px;
}
.DocSearch-Button-Keys {
display: flex;
min-width: calc(40px + 0.8em);
}
.DocSearch-Button-Key {
align-items: center;
background: var(--docsearch-key-gradient);
border: 0;
border-radius: 3px;
box-shadow: var(--docsearch-key-shadow);
color: var(--docsearch-muted-color);
display: flex;
height: 18px;
justify-content: center;
margin-right: 0.4em;
padding: 0 0 2px;
position: relative;
top: -1px;
width: 20px;
}
@media (max-width: 768px) {
.DocSearch-Button-Keys,
.DocSearch-Button-Placeholder {
display: none;
}
}
.DocSearch-Container,
.DocSearch-Container * {
box-sizing: border-box;
}
.DocSearch-Container {
background-color: var(--docsearch-container-background);
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 200;
}
.DocSearch-Container a {
text-decoration: none;
}
.DocSearch-Link {
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
color: var(--docsearch-highlight-color);
cursor: pointer;
font: inherit;
margin: 0;
padding: 0;
}
.DocSearch-Modal {
background: var(--docsearch-modal-background);
border-radius: 6px;
box-shadow: var(--docsearch-modal-shadow);
flex-direction: column;
margin: 60px auto auto;
max-width: var(--docsearch-modal-width);
position: relative;
}
.DocSearch-SearchBar {
display: flex;
padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
}
.DocSearch-Form {
align-items: center;
background: var(--docsearch-searchbox-focus-background);
border-radius: 4px;
box-shadow: var(--docsearch-searchbox-shadow);
display: flex;
height: var(--docsearch-searchbox-height);
margin: 0;
padding: 0 var(--docsearch-spacing);
position: relative;
width: 100%;
}
.DocSearch-Input {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 0;
color: var(--docsearch-text-color);
flex: 1 1;
font: inherit;
font-size: 1.2em;
height: 100%;
outline: none;
padding: 0 0 0 8px;
width: 80%;
}
.DocSearch-Input::-webkit-input-placeholder {
color: var(--docsearch-muted-color);
opacity: 1;
}
.DocSearch-Input::placeholder {
color: var(--docsearch-muted-color);
opacity: 1;
}
.DocSearch-Input::-webkit-search-cancel-button,
.DocSearch-Input::-webkit-search-decoration,
.DocSearch-Input::-webkit-search-results-button,
.DocSearch-Input::-webkit-search-results-decoration {
display: none;
}
.DocSearch-LoadingIndicator,
.DocSearch-MagnifierLabel,
.DocSearch-Reset {
margin: 0;
padding: 0;
}
.DocSearch-MagnifierLabel,
.DocSearch-Reset {
align-items: center;
color: var(--docsearch-highlight-color);
display: flex;
justify-content: center;
}
.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
.DocSearch-LoadingIndicator {
display: none;
}
.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
align-items: center;
color: var(--docsearch-highlight-color);
display: flex;
justify-content: center;
}
@media screen and (prefers-reduced-motion: reduce) {
.DocSearch-Reset {
stroke-width: var(--docsearch-icon-stroke-width);
-webkit-animation: none;
animation: none;
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
border-radius: 50%;
color: var(--docsearch-icon-color);
cursor: pointer;
right: 0;
}
}
.DocSearch-Reset {
stroke-width: var(--docsearch-icon-stroke-width);
-webkit-animation: fade-in 0.1s ease-in forwards;
animation: fade-in 0.1s ease-in forwards;
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
border-radius: 50%;
color: var(--docsearch-icon-color);
cursor: pointer;
padding: 2px;
right: 0;
}
.DocSearch-Reset[hidden] {
display: none;
}
.DocSearch-Reset:focus {
outline: none;
}
.DocSearch-Reset:hover {
color: var(--docsearch-highlight-color);
}
.DocSearch-LoadingIndicator svg,
.DocSearch-MagnifierLabel svg {
height: 24px;
width: 24px;
}
.DocSearch-Cancel {
display: none;
}
.DocSearch-Dropdown {
max-height: calc(
var(--docsearch-modal-height) - var(--docsearch-searchbox-height) -
var(--docsearch-spacing) - var(--docsearch-footer-height)
);
min-height: var(--docsearch-spacing);
overflow-y: auto;
overflow-y: overlay;
padding: 0 var(--docsearch-spacing);
scrollbar-color: var(--docsearch-muted-color)
var(--docsearch-modal-background);
scrollbar-width: thin;
}
.DocSearch-Dropdown::-webkit-scrollbar {
width: 12px;
}
.DocSearch-Dropdown::-webkit-scrollbar-track {
background: transparent;
}
.DocSearch-Dropdown::-webkit-scrollbar-thumb {
background-color: var(--docsearch-muted-color);
border: 3px solid var(--docsearch-modal-background);
border-radius: 20px;
}
.DocSearch-Dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.DocSearch-Label {
font-size: 0.75em;
line-height: 1.6em;
}
.DocSearch-Help,
.DocSearch-Label {
color: var(--docsearch-muted-color);
}
.DocSearch-Help {
font-size: 0.9em;
margin: 0;
-webkit-user-select: none;
user-select: none;
}
.DocSearch-Title {
font-size: 1.2em;
}
.DocSearch-Logo a {
display: flex;
}
.DocSearch-Logo svg {
color: var(--docsearch-logo-color);
margin-left: 8px;
}
.DocSearch-Hits:last-of-type {
margin-bottom: 24px;
}
.DocSearch-Hits mark {
background: none;
color: var(--docsearch-highlight-color);
}
.DocSearch-HitsFooter {
color: var(--docsearch-muted-color);
display: flex;
font-size: 0.85em;
justify-content: center;
margin-bottom: var(--docsearch-spacing);
padding: var(--docsearch-spacing);
}
.DocSearch-HitsFooter a {
border-bottom: 1px solid;
color: inherit;
}
.DocSearch-Hit {
border-radius: 4px;
display: flex;
padding-bottom: 4px;
position: relative;
}
@media screen and (prefers-reduced-motion: reduce) {
.DocSearch-Hit--deleting {
transition: none;
}
}
.DocSearch-Hit--deleting {
opacity: 0;
transition: all 0.25s linear;
}
@media screen and (prefers-reduced-motion: reduce) {
.DocSearch-Hit--favoriting {
transition: none;
}
}
.DocSearch-Hit--favoriting {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: top center;
transform-origin: top center;
transition: all 0.25s linear;
transition-delay: 0.25s;
}
.DocSearch-Hit a {
background: var(--docsearch-hit-background);
border-radius: 4px;
box-shadow: var(--docsearch-hit-shadow);
display: block;
padding-left: var(--docsearch-spacing);
width: 100%;
}
.DocSearch-Hit-source {
background: var(--docsearch-modal-background);
color: var(--docsearch-highlight-color);
font-size: 0.85em;
font-weight: 600;
line-height: 32px;
margin: 0 -4px;
padding: 8px 4px 0;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10;
}
.DocSearch-Hit-Tree {
stroke-width: var(--docsearch-icon-stroke-width);
color: var(--docsearch-muted-color);
height: var(--docsearch-hit-height);
opacity: 0.5;
width: 24px;
}
.DocSearch-Hit[aria-selected="true"] a {
background-color: var(--docsearch-highlight-color);
}
.DocSearch-Hit[aria-selected="true"] mark {
text-decoration: underline;
}
.DocSearch-Hit-Container {
align-items: center;
color: var(--docsearch-hit-color);
display: flex;
flex-direction: row;
height: var(--docsearch-hit-height);
padding: 0 var(--docsearch-spacing) 0 0;
}
.DocSearch-Hit-icon {
height: 20px;
width: 20px;
}
.DocSearch-Hit-action,
.DocSearch-Hit-icon {
stroke-width: var(--docsearch-icon-stroke-width);
color: var(--docsearch-muted-color);
}
.DocSearch-Hit-action {
align-items: center;
display: flex;
height: 22px;
width: 22px;
}
.DocSearch-Hit-action svg {
display: block;
height: 18px;
width: 18px;
}
.DocSearch-Hit-action + .DocSearch-Hit-action {
margin-left: 6px;
}
.DocSearch-Hit-action-button {
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
border-radius: 50%;
color: inherit;
cursor: pointer;
padding: 2px;
}
svg.DocSearch-Hit-Select-Icon {
display: none;
}
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Select-Icon {
display: block;
}
.DocSearch-Hit-action-button:focus,
.DocSearch-Hit-action-button:hover {
background: rgba(0, 0, 0, 0.2);
transition: background-color 0.1s ease-in;
}
@media screen and (prefers-reduced-motion: reduce) {
.DocSearch-Hit-action-button:focus,
.DocSearch-Hit-action-button:hover {
transition: none;
}
}
.DocSearch-Hit-action-button:focus path,
.DocSearch-Hit-action-button:hover path {
fill: #fff;
}
.DocSearch-Hit-content-wrapper {
display: flex;
flex: 1 1 auto;
flex-direction: column;
font-weight: 500;
justify-content: center;
line-height: 1.2em;
margin: 0 8px;
overflow-x: hidden;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
width: 80%;
}
.DocSearch-Hit-title {
font-size: 0.9em;
}
.DocSearch-Hit-path {
color: var(--docsearch-muted-color);
font-size: 0.75em;
}
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Tree,
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-action,
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-icon,
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path,
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-text,
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
.DocSearch-Hit[aria-selected="true"] mark {
color: var(--docsearch-hit-active-color) !important;
}
@media screen and (prefers-reduced-motion: reduce) {
.DocSearch-Hit-action-button:focus,
.DocSearch-Hit-action-button:hover {
background: rgba(0, 0, 0, 0.2);
transition: none;
}
}
.DocSearch-ErrorScreen,
.DocSearch-NoResults,
.DocSearch-StartScreen {
font-size: 0.9em;
margin: 0 auto;
padding: 36px 0;
text-align: center;
width: 80%;
}
.DocSearch-Screen-Icon {
color: var(--docsearch-muted-color);
padding-bottom: 12px;
}
.DocSearch-NoResults-Prefill-List {
display: inline-block;
padding-bottom: 24px;
text-align: left;
}
.DocSearch-NoResults-Prefill-List ul {
display: inline-block;
padding: 8px 0 0;
}
.DocSearch-NoResults-Prefill-List li {
list-style-position: inside;
list-style-type: "» ";
}
.DocSearch-Prefill {
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
border-radius: 1em;
color: var(--docsearch-highlight-color);
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 700;
padding: 0;
}
.DocSearch-Prefill:focus,
.DocSearch-Prefill:hover {
outline: none;
text-decoration: underline;
}
.DocSearch-Footer {
align-items: center;
background: var(--docsearch-footer-background);
border-radius: 0 0 8px 8px;
box-shadow: var(--docsearch-footer-shadow);
display: flex;
flex-direction: row-reverse;
flex-shrink: 0;
height: var(--docsearch-footer-height);
justify-content: space-between;
padding: 0 var(--docsearch-spacing);
position: relative;
-webkit-user-select: none;
user-select: none;
width: 100%;
z-index: 300;
}
.DocSearch-Commands {
color: var(--docsearch-muted-color);
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.DocSearch-Commands li {
align-items: center;
display: flex;
}
.DocSearch-Commands li:not(:last-of-type) {
margin-right: 0.8em;
}
.DocSearch-Commands-Key {
align-items: center;
background: var(--docsearch-key-gradient);
border: 0;
border-radius: 2px;
box-shadow: var(--docsearch-key-shadow);
color: var(--docsearch-muted-color);
display: flex;
height: 18px;
justify-content: center;
margin-right: 0.4em;
padding: 0 0 1px;
width: 20px;
}
@media (max-width: 768px) {
:root {
--docsearch-spacing: 10px;
--docsearch-footer-height: 40px;
}
.DocSearch-Dropdown {
height: 100%;
}
.DocSearch-Container {
height: 100vh;
height: -webkit-fill-available;
height: calc(var(--docsearch-vh, 1vh) * 100);
position: absolute;
}
.DocSearch-Footer {
border-radius: 0;
bottom: 0;
position: absolute;
}
.DocSearch-Hit-content-wrapper {
display: flex;
position: relative;
width: 80%;
}
.DocSearch-Modal {
border-radius: 0;
box-shadow: none;
height: 100vh;
height: -webkit-fill-available;
height: calc(var(--docsearch-vh, 1vh) * 100);
margin: 0;
max-width: 100%;
width: 100%;
}
.DocSearch-Dropdown {
max-height: calc(
var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) -
var(--docsearch-spacing) - var(--docsearch-footer-height)
);
}
.DocSearch-Cancel {
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
color: var(--docsearch-highlight-color);
cursor: pointer;
display: inline-block;
flex: none;
font: inherit;
font-size: 1em;
font-weight: 500;
margin-left: var(--docsearch-spacing);
outline: none;
overflow: hidden;
padding: 0;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
}
.DocSearch-Commands,
.DocSearch-Hit-Tree {
display: none;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
.DocSearch {
--docsearch-primary-color: #7026b9;
--docsearch-highlight-color: var(--docsearch-primary-color);
--docsearch-hit-color: #232129;
--docsearch-hit-background: #fbfbfb;
--docsearch-hit-height: 64px;
--docsearch-searchbox-height: 64px;
--docsearch-hit-shadow: none;
--docsearch-muted-color: #78757a;
--docsearch-container-background: rgba(0, 0, 0, 0.2);
--docsearch-modal-background: #fff;
--docsearch-modal-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
0 4px 6px -6px rgba(0, 0, 0, 0.1);
--docsearch-footer-shadow: none;
--docsearch-text-color: #232129;
--docsearch-searchbox-shadow: none;
--docsearch-logo-color: #78757a;
}
.DocSearch--active {
overflow: hidden !important;
}
.DocSearch.DocSearch-Container {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
display: flex;
flex-direction: column;
padding: 8px;
position: fixed;
z-index: 10001;
}
.DocSearch .DocSearch-Modal {
border-radius: 8px;
display: flex;
flex-direction: column;
font-family: inherit;
margin: 0 auto;
max-width: 47.375rem;
min-height: 0;
overflow: hidden;
width: 100%;
}
.DocSearch .DocSearch-MagnifierLabel {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2378757A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='prefix__feather prefix__feather-search' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' x2='16.65' y1='21' y2='16.65'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
flex: none;
height: 20px;
margin-right: 12px;
width: 20px;
}
.DocSearch .DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
.DocSearch .DocSearch-MagnifierLabel svg {
display: none;
}
.DocSearch .DocSearch-Input {
-webkit-appearance: none;
appearance: none;
background: transparent;
border-width: 0;
flex: auto;
font-size: 1rem;
font-weight: 500;
margin: 0;
min-width: 0;
padding: 0;
}
.DocSearch .DocSearch-Input:focus {
outline: 2px dotted transparent;
}
.DocSearch .DocSearch-Cancel {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 1px solid #f0f0f2;
border-radius: 6px;
color: #78757a;
content: "esc";
display: block;
font-size: 0.875rem;
font-size: 12px;
line-height: 1.25rem;
padding: 4px 6px;
}
.DocSearch .DocSearch-Commands,
.DocSearch .DocSearch-Reset {
display: none;
}
.DocSearch-Form .DocSearch-Reset {
border-radius: 8px;
box-shadow: 0 0 0 1px #f5f5f5;
color: gray;
font-size: 14px;
line-height: 1;
padding: 12px;
}
.DocSearch-Form .DocSearch-Reset:focus {
background-color: gray;
border-color: purple;
}
.DocSearch .DocSearch-Reset:before {
content: "esc";
}
.DocSearch .DocSearch-Hits mark {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 1.5px;
}
.DocSearch .DocSearch-Hit {
margin-bottom: 0;
padding-bottom: 12px;
}
.DocSearch .DocSearch-Hit > a {
border-radius: 8px;
padding-left: 0;
}
.DocSearch .DocSearch-Hit-source {
color: #232129;
margin: 16px 0;
padding: 0;
}
.DocSearch .DocSearch-Hit-Container:first-child {
margin-left: 24px;
}
.DocSearch .DocSearch-Hit-icon {
flex: none;
}
.DocSearch .DocSearch-Hit-content-wrapper {
margin: 0 20px;
}
.DocSearch .DocSearch-NoResults {
align-items: flex-start;
display: flex;
flex-direction: column;
margin: 0;
width: 100%;
}
.DocSearch .DocSearch-SearchBar {
align-items: center;
border-bottom: 1px solid #f5f5f5;
padding: 0 24px;
}
.DocSearch .DocSearch-Form {
border-radius: 0;
padding: 0;
}
.DocSearch .DocSearch-Dropdown {
padding: 0 24px;
}
.DocSearch .DocSearch-Help {
text-align: left;
}
.DocSearch .DocSearch-StartScreen {
margin: 0;
}
.DocSearch .DocSearch-Screen-Icon {
display: none;
}
.DocSearch .DocSearch-Title:after {
content: " 😕";
}
.DocSearch .DocSearch-Footer {
border-top: 1px solid #f5f5f5;
height: auto;
padding: 16px 24px;
}
.DocSearch-LoadingIndicator {
display: none;
}
@media screen and (min-width: 30rem) {
.DocSearch.DocSearch-Container {
padding: 16px;
}
}
@media screen and (min-width: 40rem) {
.DocSearch.DocSearch-Container {
padding: 10vh;
}
}
</style>
<link
rel="preload"
as="font"
crossorigin="anonymous"
type="font/woff2"
href="/static/inter-v8-latin-700-65a568f2a9065247687ab85c6a88de9a.woff2"
data-gatsby-head="true"
/>
<title data-gatsby-head="true">
Robinson &amp; Henry, P.C.: Award-winning Law Firm Sets Industry Gold
Standard With Gatsby | Gatsby
</title>
<style>
.gatsby-image-wrapper {
position: relative;
overflow: hidden;
}
.gatsby-image-wrapper picture.object-fit-polyfill {
position: static !important;
}
.gatsby-image-wrapper img {
bottom: 0;
height: 100%;
left: 0;
margin: 0;
max-width: none;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
object-fit: cover;
}
.gatsby-image-wrapper [data-main-image] {
opacity: 0;
transform: translateZ(0);
transition: opacity 0.25s linear;
will-change: opacity;
}
.gatsby-image-wrapper-constrained {
display: inline-block;
vertical-align: top;
}
</style>
<noscript
><style>
.gatsby-image-wrapper noscript [data-main-image] {
opacity: 1 !important;
}
.gatsby-image-wrapper [data-placeholder-image] {
opacity: 0 !important;
}
</style></noscript
>
<script type="module">
const e =
"undefined" != typeof HTMLImageElement &&
"loading" in HTMLImageElement.prototype;
e &&
document.body.addEventListener(
"load",
function (e) {
const t = e.target;
if (void 0 === t.dataset.mainImage) return;
if (void 0 === t.dataset.gatsbyImageSsr) return;
let a = null,
n = t;
for (; null === a && n; )
void 0 !== n.parentNode.dataset.gatsbyImageWrapper &&
(a = n.parentNode),
(n = n.parentNode);
const o = a.querySelector("[data-placeholder-image]"),
r = new Image();
(r.src = t.currentSrc),
r
.decode()
.catch(() => {})
.then(() => {
(t.style.opacity = 1),
o &&
((o.style.opacity = 0),
(o.style.transition = "opacity 500ms linear"));
});
},
!0
);
</script>
<link
rel="canonical"
href="https://www.gatsbyjs.com/blog/robinson-henry-p-c-award-winning-law-firm-sets-industry-gold-standard-with-gatsby/"
data-baseprotocol="https:"
data-basehost="www.gatsbyjs.com"
/>
<style type="text/css">
.anchor.before {
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
padding-right: 4px;
}
.anchor.after {
display: inline-block;
padding-left: 4px;
}
h1 .anchor svg,
h2 .anchor svg,
h3 .anchor svg,
h4 .anchor svg,
h5 .anchor svg,
h6 .anchor svg {
visibility: hidden;
}
h1:hover .anchor svg,
h2:hover .anchor svg,
h3:hover .anchor svg,
h4:hover .anchor svg,
h5:hover .anchor svg,
h6:hover .anchor svg,
h1 .anchor:focus svg,
h2 .anchor:focus svg,
h3 .anchor:focus svg,
h4 .anchor:focus svg,
h5 .anchor:focus svg,
h6 .anchor:focus svg {
visibility: visible;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var hash = window.decodeURI(location.hash.replace("#", ""));
if (hash !== "") {
var element = document.getElementById(hash);
if (element) {
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
var clientTop =
document.documentElement.clientTop ||
document.body.clientTop ||
0;
var offset =
element.getBoundingClientRect().top + scrollTop - clientTop;
// Wait for the browser to finish rendering before scrolling.
setTimeout(function () {
window.scrollTo(0, offset - 0);
}, 0);
}
}
});
</script>
<style type="text/css">
.anchor.before {
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
padding-right: 4px;
}
.anchor.after {
display: inline-block;
padding-left: 4px;
}
h1 .anchor svg,
h2 .anchor svg,
h3 .anchor svg,
h4 .anchor svg,
h5 .anchor svg,
h6 .anchor svg {
visibility: hidden;
}
h1:hover .anchor svg,
h2:hover .anchor svg,
h3:hover .anchor svg,
h4:hover .anchor svg,
h5:hover .anchor svg,
h6:hover .anchor svg,
h1 .anchor:focus svg,
h2 .anchor:focus svg,
h3 .anchor:focus svg,
h4 .anchor:focus svg,
h5 .anchor:focus svg,
h6 .anchor:focus svg {
visibility: visible;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var hash = window.decodeURI(location.hash.replace("#", ""));
if (hash !== "") {
var element = document.getElementById(hash);
if (element) {
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
var clientTop =
document.documentElement.clientTop ||
document.body.clientTop ||
0;
var offset =
element.getBoundingClientRect().top + scrollTop - clientTop;
// Wait for the browser to finish rendering before scrolling.
setTimeout(function () {
window.scrollTo(0, offset - 0);
}, 0);
}
}
});
</script>
<link
rel="icon"
href="/favicon-32x32.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
type="image/png"
/>
<link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous" />
<link
rel="apple-touch-icon"
sizes="48x48"
href="/icons/icon-48x48.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/icons/icon-72x72.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="apple-touch-icon"
sizes="96x96"
href="/icons/icon-96x96.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/icons/icon-144x144.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="apple-touch-icon"
sizes="192x192"
href="/icons/icon-192x192.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="apple-touch-icon"
sizes="256x256"
href="/icons/icon-256x256.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="apple-touch-icon"
sizes="384x384"
href="/icons/icon-384x384.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="apple-touch-icon"
sizes="512x512"
href="/icons/icon-512x512.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf"
/>
<link
rel="sitemap"
type="application/xml"
href="/sitemap/sitemap-index.xml"
/>
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl + "";
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-N5NSCWL");
</script>
<link
href="/static/inter-v8-latin-variable-fa91dd85e27e102dcab0b26d1c17b466.woff2"
rel="preload"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<script>
window.segmentSnippetLoaded = false;
window.segmentSnippetLoading = false;
window.segmentSnippetLoader = function (callback) {
if (!window.segmentSnippetLoaded && !window.segmentSnippetLoading) {
window.segmentSnippetLoading = true;
function loader() {
window.analytics.load("hdf6zFxJrYR9MbNLBKCAO59j7wQ4GTnD");
window.segmentSnippetLoading = false;
window.segmentSnippetLoaded = true;
if (callback) {
callback();
}
}
setTimeout(function () {
"requestIdleCallback" in window
? requestIdleCallback(function () {
loader();
})
: loader();
}, 1000);
}
};
window.addEventListener(
"scroll",
function () {
window.segmentSnippetLoader();
},
{ once: true }
);
!(function () {
var analytics = (window.analytics = window.analytics || []);
if (!analytics.initialize)
if (analytics.invoked)
window.console &&
console.error &&
console.error("Segment snippet included twice.");
else {
analytics.invoked = !0;
analytics.methods = [
"trackSubmit",
"trackClick",
"trackLink",
"trackForm",
"pageview",
"identify",
"reset",
"group",
"track",
"ready",
"alias",
"debug",
"page",
"once",
"off",
"on",
];
analytics.factory = function (t) {
return function () {
var e = Array.prototype.slice.call(arguments);
e.unshift(t);
analytics.push(e);
return analytics;
};
};
for (var t = 0; t < analytics.methods.length; t++) {
var e = analytics.methods[t];
analytics[e] = analytics.factory(e);
}
analytics.load = function (t, e) {
var n = document.createElement("script");
n.type = "text/javascript";
n.async = !0;
n.src =
"https://cdn.segment.io/analytics.js/v1/" +
t +
"/analytics.min.js";
var a = document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(n, a);
analytics._loadOptions = e;
};
analytics.SNIPPET_VERSION = "4.1.0";
}
})();
</script>
</head>
<body>
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-N5NSCWL"
height="0"
width="0"
style="display: none; visibility: hidden"
aria-hidden="true"
></iframe
></noscript>
<div id="___gatsby">
<div style="outline: none" tabindex="-1" id="gatsby-focus-wrapper">
<style data-emotion-css="1ics1oj">
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/inter-v8-latin-variable-fa91dd85e27e102dcab0b26d1c17b466.woff2)
format("woff2-variations"),
url(/static/inter-v8-latin-regular-c96fe5ff771f9e7b53abe32b27238136.woff2)
format("woff2"),
url(/static/inter-v8-latin-regular-513f22e166bab984fa607bad4cdf1899.woff)
format("woff");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/inter-v8-latin-variable-fa91dd85e27e102dcab0b26d1c17b466.woff2)
format("woff2-variations"),
url(/static/inter-v8-latin-700-65a568f2a9065247687ab85c6a88de9a.woff2)
format("woff2"),
url(/static/inter-v8-latin-700-90e1ac1b0ff515438bda3332686bcc44.woff)
format("woff");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html {
-webkit-scroll-padding-top: 5rem;
-moz-scroll-padding-top: 5rem;
-ms-scroll-padding-top: 5rem;
scroll-padding-top: 5rem;
-webkit-font-smoothing: antialiased;
}
</style>
<div class="_1nrsguc _1hqpeone _1nrsgu0">
<div class="_1nrsgu0 _1nrsgu1">
<div class="e861rl0 _1nrsgu0">
<div class="e861rl1">Now 100x Faster</div>
<div class="e861rl2">
<p>
<strong>Read the latest from Gatsby CTO Kyle Mathews</strong>
<a
href="https://www.gatsbyjs.com/blog/re-introducing-gatsby-a-reactive-site-generator/"
>Re-introducing Gatsby, a Reactive Site Generator</a
>
</p>
</div>
</div>
<div class="_1nrsgue _1nrsgu3">
<a class="_1nrsguf" href="/support">Support</a
><a class="_1nrsguf" href="/dashboard/login">Log In</a>
</div>
</div>
</div>
<header class="_1nrsgug _1hqpeone _1nrsguh">
<div class="_1nrsgui _1nrsgu0 _1nrsgu1">
<a aria-label="Link to home" class="_1nrsguj" href="/"
><svg
class="_1nrsguk"
width="91"
height="24"
fill="#663399"
viewBox="0 0 106 28"
>
<g>
<path
d="M14,0C6.3,0,0,6.3,0,14s6.3,14,14,14s14-6.3,14-14S21.7,0,14,0z M6.2,21.8c-2.1-2.1-3.2-4.9-3.2-7.6L13.9,25 C11.1,24.9,8.3,23.9,6.2,21.8z M16.4,24.7L3.3,11.6C4.4,6.7,8.8,3,14,3c3.7,0,6.9,1.8,8.9,4.5l-1.5,1.3C19.7,6.5,17,5,14,5 c-3.9,0-7.2,2.5-8.5,6L17,22.5c2.9-1,5.1-3.5,5.8-6.5H18v-2h7C25,19.2,21.3,23.6,16.4,24.7z"
></path>
</g>
<g fill="#000">
<path
d="M62.9,12h2.8v10h-2.8v-1.3c-1,1.5-2.3,1.6-3.1,1.6c-3.1,0-5.1-2.4-5.1-5.3c0-3,2-5.3,4.9-5.3c0.8,0,2.3,0.1,3.2,1.6V12z M57.7,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C58.9,14.2,57.7,15.4,57.7,17z"
></path>
<path
d="M71.2,14.4V22h-2.8v-7.6h-1.1V12h1.1V8.6h2.8V12h1.9v2.4H71.2z"
></path>
<path
d="M79.7,14.4c-0.7-0.6-1.3-0.7-1.6-0.7c-0.7,0-1.1,0.3-1.1,0.8c0,0.3,0.1,0.6,0.9,0.9l0.7,0.2c0.8,0.3,2,0.6,2.5,1.4 c0.3,0.4,0.5,1,0.5,1.7c0,0.9-0.3,1.8-1.1,2.5c-0.8,0.7-1.8,1.1-3,1.1c-2.1,0-3.2-1-3.9-1.7l1.5-1.7c0.6,0.6,1.4,1.2,2.2,1.2 c0.8,0,1.4-0.4,1.4-1.1c0-0.6-0.5-0.9-0.9-1l-0.6-0.2c-0.7-0.3-1.5-0.6-2.1-1.2c-0.5-0.5-0.8-1.1-0.8-1.9c0-1,0.5-1.8,1-2.3 c0.8-0.6,1.8-0.7,2.6-0.7c0.7,0,1.9,0.1,3.2,1.1L79.7,14.4z"
></path>
<path
d="M85.8,13.3c1-1.4,2.4-1.6,3.2-1.6c2.9,0,4.9,2.3,4.9,5.3c0,3-2,5.3-5,5.3c-0.6,0-2.1-0.1-3.2-1.6V22H83V5.2h2.8V13.3z M85.5,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C86.6,14.2,85.5,15.4,85.5,17z"
></path>
<path
d="M98.5,20.5L93.7,12H97l3.1,5.7l2.8-5.7h3.2l-8,15.3h-3.2L98.5,20.5z"
></path>
<path
d="M54,13.7h-2.8c0,0-4.2,0-4.2,0v2.8h3.7c-0.6,1.9-2,3.2-4.6,3.2c-2.9,0-5-2.4-5-5.3S43.1,9,46,9c1.6,0,3.2,0.8,4.2,2.1 l2.3-1.5C51,7.5,48.6,6.3,46,6.3c-4.4,0-8,3.6-8,8.1s3.4,8.1,8,8.1s8-3.6,8-8.1C54.1,14.1,54,13.9,54,13.7z"
></path>
</g></svg
></a>
<nav class="_1nrsgul _1nrsgu0 _1nrsgu3">
<div class="_1sqad3p0">
<button class="_1nrsgu6 _1nrsgu5 _1nrsgu4">
Why Gatsby<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="_1sqad3p1"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path>
</svg>
</button>
</div>
<div class="_1sqad3p0">
<button class="_1nrsgu6 _1nrsgu5 _1nrsgu4">
Products<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="_1sqad3p1"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path>
</svg>
</button>
</div>
<div class="_1sqad3p0">
<button class="_1nrsgu6 _1nrsgu5 _1nrsgu4">
Open Source<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="_1sqad3p1"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path>
</svg>
</button>
</div>
<div class="_1sqad3p0">
<button class="_1nrsgu6 _1nrsgu5 _1nrsgu4">
Learn<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="_1sqad3p1"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path>
</svg>
</button>
</div>
<div class="_1sqad3p0">
<button class="_1nrsgu6 _1nrsgu5 _1nrsgu4">
Company<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="_1sqad3p1"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path>
</svg>
</button>
</div>
<a class="_1nrsgu6 _1nrsgu5 _1nrsgu4" href="/pricing">Pricing</a>
</nav>
<button class="_1nrsguq _1nrsgu5 _1nrsgu4 _1nrsgu0">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg
><span class="_1nrsgu9">Search</span></button
><a class="_1nrsgu3 _1nrsgub _1nrsgua _1nrsgu4" href="/contact-us"
>Contact</a
><a
class="_1nrsguo _1nrsgu3 _1nrsgua _1nrsgu4"
href="/dashboard/signup"
>Sign Up for Free</a
><button class="_1nrsgum _1nrsgu2 _1nrsgu5 _1nrsgu4 _1nrsgu0">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line></svg
><span class="_1nrsgu9">Menu</span>
</button>
</div>
</header>
<style data-emotion-css="bxzolu">
.css-bxzolu {
background-color: var(--theme-ui-colors-white, #ffffff);
}
</style>
<div class="css-bxzolu">
<style data-emotion-css="sxippp">
.token {
display: inline;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--theme-ui-colors-code-comment, #527713);
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol {
color: var(--theme-ui-colors-code-tag, #137886);
}
.token.punctuation {
color: var(--theme-ui-colors-code-punctuation, #53450e);
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.function,
.token.builtin {
color: var(--theme-ui-colors-code-selector, #b94185);
}
.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
color: var(--theme-ui-colors-code-keyword, #096fb3);
}
.token.inserted {
color: var(--theme-ui-colors-code-add, #088413);
}
.token.deleted {
color: var(--theme-ui-colors-code-remove, #da0013);
}
.token.regex,
.token.important {
color: var(--theme-ui-colors-code-regex, #dc0437);
}
.language-css .token.string,
.style .token.string {
color: var(--theme-ui-colors-code-cssString, #a2466c);
}
.token.important {
font-weight: 400;
}
.token.bold {
font-weight: 700;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token-line > span.token:empty::after {
min-height: 1em;
display: inline-block;
content: "";
}
.namespace {
opacity: 0.7;
}
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before {
color: var(--theme-ui-colors-code-invisibles, #e0d7d1);
}
.gatsby-highlight {
background: var(--theme-ui-colors-code-bg, #fdfaf6);
color: var(--theme-ui-colors-text-primary, #36313d);
position: relative;
-webkit-overflow-scrolling: touch;
}
.gatsby-highlight pre code {
display: block;
font-size: 100%;
line-height: 1.5;
float: left;
min-width: 100%;
padding: 0 1.5rem;
}
.gatsby-highlight-code-line {
background: var(
--theme-ui-colors-code-lineHighlightBackground,
#fbf0ea
);
margin-left: -1.5rem;
margin-right: -1.5rem;
padding-left: 1.25rem;
padding-right: 1.5rem;
border-left: 0.25rem solid
var(--theme-ui-colors-code-lineHighlightBorder, #f1beb6);
display: block;
}
.gatsby-highlight pre::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
}
.gatsby-highlight pre::-webkit-scrollbar-thumb {
background: var(--theme-ui-colors-code-scrollbarThumb, #f4d1c6);
}
.gatsby-highlight pre::-webkit-scrollbar-track {
background: var(--theme-ui-colors-code-scrollbarTrack, #faede5);
}
.gatsby-highlight pre[class*="language-"] {
background-color: transparent;
border: 0;
padding: 1.5rem 0;
-webkit-overflow-scrolling: touch;
}
.gatsby-highlight pre[class*="language-"]::before {
background: var(--theme-ui-colors-code-bgInline, #fbf2e9);
border-radius: 0 0 4px 4px;
color: var(--theme-ui-colors-blackFade-70, rgba(35, 33, 41, 0.7));
font-size: 0.75rem;
font-family: SFMono-Regular, Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace;
font-weight: 400;
-webkit-letter-spacing: 0.075em;
-moz-letter-spacing: 0.075em;
-ms-letter-spacing: 0.075em;
letter-spacing: 0.075em;
line-height: 1;
padding: 0.25rem 0.5rem;
position: absolute;
left: 1.5rem;
text-align: right;
text-transform: uppercase;
top: 0;
}
.gatsby-highlight pre[class="language-javascript"]::before {
content: "js";
background: #f7df1e;
}
.gatsby-highlight pre[class="language-js"]::before {
content: "js";
background: #f7df1e;
}
.gatsby-highlight pre[class="language-jsx"]::before {
content: "jsx";
background: #61dafb;
}
.gatsby-highlight pre[class="language-typescript"]::before {
content: "ts";
background: #294e80;
color: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-ts"]::before {
content: "ts";
background: #294e80;
color: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-tsx"]::before {
content: "tsx";
background: #294e80;
color: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-graphql"]::before {
content: "GraphQL";
background: #e10098;
color: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-html"]::before {
content: "html";
background: #005a9c;
color: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-css"]::before {
content: "css";
background: #ff9800;
color: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-mdx"]::before {
content: "mdx";
background: #f9ac00;
color: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-shell"]::before {
content: "shell";
}
.gatsby-highlight pre[class="language-sh"]::before {
content: "sh";
}
.gatsby-highlight pre[class="language-bash"]::before {
content: "bash";
}
.gatsby-highlight pre[class="language-yaml"]::before {
content: "yaml";
background: #ffa8df;
}
.gatsby-highlight pre[class="language-markdown"]::before {
content: "md";
}
.gatsby-highlight pre[class="language-json"]::before,
.gatsby-highlight pre[class="language-json5"]::before {
content: "json";
background: linen;
}
.gatsby-highlight pre[class="language-diff"]::before {
content: "diff";
background: #e6ffed;
}
.gatsby-highlight pre[class="language-text"]::before {
content: "text";
background: var(--theme-ui-colors-white, #ffffff);
}
.gatsby-highlight pre[class="language-flow"]::before {
content: "flow";
background: #e8bd36;
}
html,
body {
color: var(--theme-ui-colors-text-primary, #36313d);
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
}
a {
-webkit-text-decoration: none;
text-decoration: none;
}
a > code {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
border-bottom: 1px solid
var(--theme-ui-colors-link-border, #d9bae8);
}
a:hover > code {
border-bottom-color: var(
--theme-ui-colors-link-hoverBorder,
#8a4baf
);
}
h1 {
font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--theme-ui-colors-text-header, #000000);
-webkit-letter-spacing: -0.015em;
-moz-letter-spacing: -0.015em;
-ms-letter-spacing: -0.015em;
letter-spacing: -0.015em;
}
h2 {
margin-top: 3rem;
}
h3 {
margin-top: 3rem;
}
h4,
h5,
h6 {
font-size: 1.125rem;
}
h5,
h6 {
font-weight: 600;
}
h6 {
font-size: 1rem;
}
blockquote {
padding-left: 1.5rem;
margin-left: 0;
border-left: 0.25rem solid
var(--theme-ui-colors-standardLine, #f0f0f2);
}
hr {
background-color: var(--theme-ui-colors-standardLine, #f0f0f2);
}
iframe {
border: 0;
}
th,
td {
border-color: var(--theme-ui-colors-standardLine, #f0f0f2);
}
tt,
code,
kbd,
samp {
line-height: inherit;
}
code::before,
code::after,
tt::before,
tt::after {
word-break: normal;
}
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
font-weight: 400;
font-size: 82.5%;
}
tt,
code,
kbd {
background: var(--theme-ui-colors-code-bgInline, #fbf2e9);
padding-top: 0.2em;
padding-bottom: 0.2em;
}
tt,
code,
kbd,
.gatsby-code-title {
font-family: SFMono-Regular, Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace;
font-size: 90%;
font-variant: none;
-webkit-font-feature-settings: "clig" 0, "calt" 0;
font-feature-settings: "clig" 0, "calt" 0;
}
.gatsby-resp-image-link + em,
.gatsby-resp-image-wrapper + em {
font-size: 0.875rem;
line-height: 1.25;
padding-top: 0.5rem;
margin-bottom: 3rem;
display: block;
font-style: normal;
color: var(--theme-ui-colors-text-secondary, #78757a);
position: relative;
}
.gatsby-resp-image-link + em a,
.gatsby-resp-image-wrapper + em a {
font-weight: 400;
color: var(--theme-ui-colors-lilac, #8a4baf);
}
.main-body a {
color: var(--theme-ui-colors-link-color, #8a4baf);
-webkit-text-decoration: none;
text-decoration: none;
-webkit-transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid
var(--theme-ui-colors-link-border, #d9bae8);
}
.main-body a:hover {
border-bottom-color: var(
--theme-ui-colors-link-hoverBorder,
#8a4baf
);
}
.post-body h1 {
font-weight: 700;
}
.post-body figure img {
margin-bottom: 0;
}
.post-body figcaption {
color: var(--theme-ui-colors-text-secondary, #78757a);
font-size: 87.5%;
margin-top: 0.25rem;
margin-bottom: 0.75rem;
}
.main-body a.anchor {
color: inherit;
fill: var(--theme-ui-colors-link-color, #8a4baf);
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: none;
}
.main-body a.anchor:hover {
background: none;
}
.main-body a.gatsby-resp-image-link {
border-bottom: transparent;
margin-top: 3rem;
margin-bottom: 3rem;
}
.main-body figure a.gatsby-resp-image-link {
border-bottom: transparent;
margin-top: 3rem;
margin-bottom: 0;
}
.gatsby-highlight,
.gatsby-code-title,
.post-body .gatsby-resp-image-link {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.gatsby-resp-image-link {
border-radius: 2px;
overflow: hidden;
}
.gatsby-code-title {
background: var(--theme-ui-colors-code-bg, #fdfaf6);
border-bottom: 1px solid
var(--theme-ui-colors-code-border, #faede5);
color: var(--theme-ui-colors-code-text, #866c5b);
padding: 1.25rem 1.5rem 1rem;
font-size: 0.75rem;
margin-top: 0.5rem;
}
video {
width: 100%;
margin-bottom: 1.5rem;
}
.twitter-tweet-rendered {
margin: 3rem auto !important;
}
.egghead-video {
border: none;
max-width: 100%;
}
.gatsby-resp-image-link + em a[href*='//']:after
{
content: " "
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23744C9E'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}
@media (min-width: 750px) {
.gatsby-highlight,
.gatsby-resp-image-link,
.gatsby-code-title {
margin-left: 0;
margin-right: 0;
border-radius: 8px;
}
.gatsby-code-title {
border-radius: 8px 8px 0 0;
}
.gatsby-code-title + .gatsby-highlight {
border-radius: 0 0 8px 8px;
}
}</style
><style data-emotion-css="1aeor3">
.css-1aeor3 {
margin-left: auto;
margin-right: auto;
padding-bottom: 3rem;
padding-top: 3rem;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 550px) {
.css-1aeor3 {
display: grid;
grid-template-columns: 1fr;
max-width: 42rem;
width: 90%;
}
}
@media (min-width: 1000px) {
.css-1aeor3 {
display: grid;
grid-column-gap: 4.5rem;
grid-template-columns: 1fr 15rem;
max-width: 68rem;
padding-bottom: 4.5rem;
padding-top: 4.5rem;
}
}
@media (min-width: 1300px) {
.css-1aeor3 {
grid-template-columns: 1fr 18rem;
}
}
@media (min-width: 750px) {
.css-1aeor3 {
padding-left: 2rem;
padding-right: 2rem;
}
}
</style>
<main id="gatsby-skip-here" class="post docSearch-content css-1aeor3">
<style data-emotion-css="1py3y9z">
.css-1py3y9z {
-webkit-align-self: end;
-ms-flex-item-align: end;
align-self: end;
}
@media (min-width: 550px) {
.css-1py3y9z {
max-width: 90%;
}
}
@media (min-width: 1000px) {
.css-1py3y9z {
margin-bottom: 0;
}
}</style
><style data-emotion-css="1sdgg0b">
.css-1sdgg0b {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
-webkit-letter-spacing: -0.015em;
-moz-letter-spacing: -0.015em;
-ms-letter-spacing: -0.015em;
letter-spacing: -0.015em;
line-height: 1.1;
color: var(--theme-ui-colors-grey-90, #232129);
font-weight: 700;
-webkit-transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.75rem;
-webkit-align-self: end;
-ms-flex-item-align: end;
align-self: end;
}
@media (min-width: 550px) {
.css-1sdgg0b {
font-size: 2.25rem;
}
}
@media (min-width: 1000px) {
.css-1sdgg0b {
font-size: 2.625rem;
}
}
@media (min-width: 550px) {
.css-1sdgg0b {
max-width: 90%;
}
}
@media (min-width: 1000px) {
.css-1sdgg0b {
margin-bottom: 0;
}
}
</style>
<h1 class="css-1sdgg0b">
Robinson & Henry, P.C.: Award-winning Law Firm Sets Industry Gold
Standard With Gatsby
</h1>
<style data-emotion-css="17x3t95">
.css-17x3t95 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
@media (min-width: 1000px) {
.css-17x3t95 {
-webkit-align-self: end;
-ms-flex-item-align: end;
align-self: end;
grid-column: 2;
grid-row: 1;
margin-top: 48px;
position: relative;
}
}
</style>
<div class="css-17x3t95">
<style data-emotion-css="tva4e8">
.css-tva4e8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.875rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 1000px) {
.css-tva4e8 {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
}
}
</style>
<section class="css-tva4e8">
<style data-emotion-css="1tu59u4">
.css-1tu59u4 {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
</style>
<div class="css-1tu59u4">
<style data-emotion-css="a4s10g">
.css-a4s10g {
display: block;
margin-right: 1rem;
line-height: 1;
}</style
><a class="css-a4s10g" href="/contributors/neha-varshneya"
><style data-emotion-css="pwjpol">
.css-pwjpol {
object-fit: cover;
border-radius: 9999px;
}
</style>
<div
data-gatsby-image-wrapper=""
style="width: 48px; height: 48px"
class="gatsby-image-wrapper css-pwjpol"
>
<div
aria-hidden="true"
data-placeholder-image=""
style="
opacity: 1;
transition: opacity 500ms linear;
background-color: rgb(248, 248, 248);
width: 48px;
height: 48px;
position: relative;
"
></div>
<picture
><source
type="image/avif"
data-srcset="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/9a9d8dd67c7f7f5893c01610d602148a/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,/_gatsby/image/4bce2700acab61af21b945b62e084ab3/ccbde9ca2e9b1139d5c90238ba301e13/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x"
sizes="48px" />
<source
type="image/webp"
data-srcset="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/c9805143dda94a57d869f0ec25df0dc8/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,/_gatsby/image/4bce2700acab61af21b945b62e084ab3/3a665789b00b19529f711eeb764a463d/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x"
sizes="48px" />
<img
data-gatsby-image-ssr=""
placeholder="none"
data-main-image=""
style="opacity: 0"
sizes="48px"
decoding="async"
loading="lazy"
data-src="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9"
data-srcset="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a941be751f1d5be6ee73405370fd9e66/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x"
alt="Neha Varshneya" /></picture
><noscript
><picture
><source
type="image/avif"
srcset="
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/9a9d8dd67c7f7f5893c01610d602148a/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/ccbde9ca2e9b1139d5c90238ba301e13/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x
"
sizes="48px" />
<source
type="image/webp"
srcset="
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/c9805143dda94a57d869f0ec25df0dc8/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/3a665789b00b19529f711eeb764a463d/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x
"
sizes="48px" />
<img
data-gatsby-image-ssr=""
placeholder="none"
data-main-image=""
style="opacity: 0"
sizes="48px"
decoding="async"
loading="lazy"
src="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9"
srcset="
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a941be751f1d5be6ee73405370fd9e66/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x
"
alt="Neha Varshneya" /></picture
></noscript>
<script type="module">
const t =
"undefined" != typeof HTMLImageElement &&
"loading" in HTMLImageElement.prototype;
if (t) {
const t = document.querySelectorAll(
"img[data-main-image]"
);
for (let e of t) {
e.dataset.src &&
(e.setAttribute("src", e.dataset.src),
e.removeAttribute("data-src")),
e.dataset.srcset &&
(e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset"));
const t = e.parentNode.querySelectorAll(
"source[data-srcset]"
);
for (let e of t)
e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset");
e.complete &&
((e.style.opacity = 1),
(e.parentNode.parentNode.querySelector(
"[data-placeholder-image]"
).style.opacity = 0));
}
}
</script>
</div></a
>
</div>
<style data-emotion-css="11qjisw">
.css-11qjisw {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
</style>
<div class="css-11qjisw">
<style data-emotion-css="19brxl7">
.css-19brxl7 {
color: var(--theme-ui-colors-gatsby, #663399);
display: inline-block;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
-webkit-text-decoration: none;
text-decoration: none;
}
@media (min-width: 1000px) {
.css-19brxl7 {
margin-top: 0.25rem;
}
}</style
><a class="css-19brxl7" href="/contributors/neha-varshneya"
>Neha Varshneya</a
><style data-emotion-css="tp9qd0">
.css-tp9qd0 {
color: var(--theme-ui-colors-text-secondary, #78757a);
line-height: 1.25;
margin-top: 0.125rem;
}
</style>
<div class="css-tp9qd0">September 6th, 2022</div>
</div>
</section>
</div>
<style data-emotion-css="9vi1nb">
.css-9vi1nb {
position: relative;
grid-column: 1;
min-width: 0;
padding-top: 2rem;
}
.css-9vi1nb .gatsby-resp-iframe-wrapper {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.css-9vi1nb .gatsby-resp-iframe-wrapper iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.css-9vi1nb .gatsby-embed-twitter {
max-height: 1000px;
overflow-y: auto;
}
</style>
<section class="post-body main-body css-9vi1nb">
<style data-emotion-css="ds482h">
.css-ds482h {
margin-bottom: 1.25rem;
padding-top: 1.25rem;
}
</style>
<div class="css-ds482h">
<div>
<p>
<span style="font-weight: 400"
>It’s not every day you come across a partner of an
award-winning, full-service law firm who is as
technologically inclined as Bill Henry, one of the two
managing partners at 145-person, Colorado-based law firm </span
><a href="https://www.robinsonandhenry.com/"
><span style="font-weight: 400"
>Robinson &amp; Henry, P.C</span
></a
><span style="font-weight: 400"
>. For Henry, keeping up with the latest technology isn’t
a “nice to have,” it’s a “need to have”—considering 95% of
their firm’s clients are generated through the web.
</span>
</p>
<p>
<span style="font-weight: 400"
>“Our online presence and marketing is the most critical
avenue that we have. I would say practically every single
one of our clients at some point visits our website before
they hire us,” mentions Henry.
</span>
</p>
</div>
</div>
<div class="css-ds482h">
<figure>
<div
data-gatsby-image-wrapper=""
class="gatsby-image-wrapper gatsby-image-wrapper-constrained"
>
<div style="max-width: 600px; display: block">
<img
alt=""
role="presentation"
aria-hidden="true"
src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;352&#x27; width=&#x27;600&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27; version=&#x27;1.1&#x27;%3E%3C/svg%3E"
style="
max-width: 100%;
display: block;
position: static;
"
/>
</div>
<img
aria-hidden="true"
data-placeholder-image=""
style="opacity: 1; transition: opacity 500ms linear"
decoding="async"
src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAADNklEQVQokSWR7U9bBRTG73+jfvGT0WliNIzMxsDUIJtBI1l00UREYRU2P+0tw+FACrgsbjipxMBwzo0CsnRYkPDaUkYZUAqFtrt9ufe297b3trelwM9QTnJynjzn5Pd8OELVhTbOXLnJJxe7+PTyz1Sdb6PCep1Kaysnv2vlg+YbvN/0IxXnrpd0pfVoHnZFY0vp/r3DvbUVS0MLwrcdds519WHt+p2m7j6snXYabb00dPTSYOul0WanocNOfftdvvnpLl+391B3486Rttk523KL2ks2Pr/UQV3LTQTFKJJIm4hKBjNvcljF3SJGLkvONDHMPHouj6TphBWVkCTzLLTDnM/HxKN+7o8OYf9nDIfjHj7PNMK6qDC1ssX0ShCvP8hSYJu4ohxi2d/f5+DgoBSSNfPImo6samwlFMadwyzfuopz8Df6/53i0ehDXAuzCDPr2wyMzzM8s8ykd5XRaS+hWJwDiuQLu+TyBTQ9SyabJW1k0TI6YirN+OAd3G3f4+rr4sGsl7Enj5nxehA2Y0nGl/w43WtMLq7iXFjmeVxmObDD7MoGU0/XmfH5kbU0es4kld1lJyJyv/siC7cv81drPeevtOHxzFMsGAghScWz+ZyxuWcM/bfIhHcN1+Iq424fozPeEkzLmehmEU03yexBX89tOq9dxTF4j49P1XDc8hEjww6Kpo6wGU0y6dvA5V3DObtEIJJkYTXI0kaQqadruDei7O9Dxiyg6Cb63gG1ZxtounCNH9p+4bW3qzj+bg39A38Si4kIGUMmpiTYkVRSeo5scgNFiqKoBrv5PGZ0GjEhEZZTJDJZtMIeX9Q188JLr1JuOcUrx05QZjnNg6ER4vE4gqbL+MNh3AGRiGqgqiKhaJRgTEU1cqjiHNsJhS1ZQ1T1ErC9+1defPkt3iirwnKylsoPP+Oh08X86iZCPFNgW84QTKhEkmnCqRyiZhDVMkQ1A1HfI6EfedsJlWS2yNCTKc5U12Ktb+bN8mrKLaf5w/GYEc86QkhOsxKW8IUkDj8eiEoE4yl2EhohKc1WPFnytySVdVEiktJxTMxRY6mk86svOfb6O5SdqKZn4G9ci37+B6BmBYTmnT1LAAAAAElFTkSuQmCC"
alt=""
/><picture
><source
type="image/avif"
data-srcset="/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/f690172f7795466d27d802bc2f847e99/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 150w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/4e2f50559d54f5c7958d0d56259710ab/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D300%26h%3D176%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 300w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/4db88efe789e94813502d0be7f719e2a/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D600%26h%3D352%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 600w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/0bc97a5be1cf52af22f6a618c77e56ba/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D1200%26h%3D704%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 1200w"
sizes="(min-width: 600px) 600px, 100vw" />
<source
type="image/webp"
data-srcset="/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/d81838a446069215d8a71c516ece12f9/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 150w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/09d976c6812b4583ecf10584d53d0a4b/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D300%26h%3D176%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 300w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/4e52d63fe3e4323a536cde11e9f1ff85/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D600%26h%3D352%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 600w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/f9713333a820924318fa4afa178a5c80/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D1200%26h%3D704%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 1200w"
sizes="(min-width: 600px) 600px, 100vw" />
<img
data-gatsby-image-ssr=""
data-main-image=""
style="opacity: 0"
sizes="(min-width: 600px) 600px, 100vw"
decoding="async"
loading="lazy"
data-src="/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/6f41cc55340c7692e14bc160f2ddf160/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24"
data-srcset="/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/6f41cc55340c7692e14bc160f2ddf160/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 150w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/ec9ed1cfcc002ffd1c184bb9f792de70/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D300%26h%3D176%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 300w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/66fd8e63b1714d0b84b39eb3f968d7f3/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D600%26h%3D352%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 600w,/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/f5c91a8f4725d7b5e8ee329466480bea/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D1200%26h%3D704%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 1200w"
alt="" /></picture
><noscript
><picture
><source
type="image/avif"
srcset="
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/f690172f7795466d27d802bc2f847e99/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 150w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/4e2f50559d54f5c7958d0d56259710ab/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D300%26h%3D176%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 300w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/4db88efe789e94813502d0be7f719e2a/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D600%26h%3D352%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 600w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/0bc97a5be1cf52af22f6a618c77e56ba/Screen-Shot-2022-09-02-at-12.28.20-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D1200%26h%3D704%26fm%3Davif%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 1200w
"
sizes="(min-width: 600px) 600px, 100vw" />
<source
type="image/webp"
srcset="
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/d81838a446069215d8a71c516ece12f9/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 150w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/09d976c6812b4583ecf10584d53d0a4b/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D300%26h%3D176%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 300w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/4e52d63fe3e4323a536cde11e9f1ff85/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D600%26h%3D352%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 600w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/f9713333a820924318fa4afa178a5c80/Screen-Shot-2022-09-02-at-12.28.20-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D1200%26h%3D704%26fm%3Dwebp%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 1200w
"
sizes="(min-width: 600px) 600px, 100vw" />
<img
data-gatsby-image-ssr=""
data-main-image=""
style="opacity: 0"
sizes="(min-width: 600px) 600px, 100vw"
decoding="async"
loading="lazy"
src="/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/6f41cc55340c7692e14bc160f2ddf160/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24"
srcset="
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/6f41cc55340c7692e14bc160f2ddf160/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D150%26h%3D88%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 150w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/ec9ed1cfcc002ffd1c184bb9f792de70/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D300%26h%3D176%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 300w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/66fd8e63b1714d0b84b39eb3f968d7f3/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D600%26h%3D352%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 600w,
/_gatsby/image/f0082b11b1c9f326c5451d0b8e698f9d/f5c91a8f4725d7b5e8ee329466480bea/Screen-Shot-2022-09-02-at-12.28.20-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.28.20-PM.png&amp;a=w%3D1200%26h%3D704%26fm%3Dpng%26q%3D75&amp;cd=41ef9b89623fb19558a2148638aeee24 1200w
"
alt="" /></picture
></noscript>
<script type="module">
const t =
"undefined" != typeof HTMLImageElement &&
"loading" in HTMLImageElement.prototype;
if (t) {
const t = document.querySelectorAll(
"img[data-main-image]"
);
for (let e of t) {
e.dataset.src &&
(e.setAttribute("src", e.dataset.src),
e.removeAttribute("data-src")),
e.dataset.srcset &&
(e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset"));
const t = e.parentNode.querySelectorAll(
"source[data-srcset]"
);
for (let e of t)
e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset");
e.complete &&
((e.style.opacity = 1),
(e.parentNode.parentNode.querySelector(
"[data-placeholder-image]"
).style.opacity = 0));
}
}
</script>
</div>
<figcaption></figcaption>
</figure>
</div>
<div class="css-ds482h">
<div>
<p>
<span style="font-weight: 400"
>Over the last decade, Robinson &amp; Henry used content
marketing and SEO to grow their organization from a small
team of 3 to a team of 145. Their scale and efficiency is
almost unheard of in the personal law world—they’ve become
one of the largest personal law firms in the state of
Colorado.
</span>
</p>
<p>
<span style="font-weight: 400"
>On a weekly basis, the firm receives 800 prospective
clients contacting them from their website, in which half
will talk to an attorney—resulting in 20% converting to
paying clients. The firm publishes content on a daily
basis, and today, their site boasts over 5,000 articles.
</span>
</p>
<p>
<span style="font-weight: 400"
>Having a keen interest in keeping up with the latest
happenings in the world of React—Henry came across Gatsby
when he was conducting his own research into a solution
that would not only drastically improve their Lighthouse
scores, but one that their marketing team would </span
><i><span style="font-weight: 400">want to use</span></i
><span style="font-weight: 400">.</span>
</p>
<h2>
<span style="font-weight: 400"
>Adding 40+ Lighthouse points and increasing traffic by
26%<br />
</span>
</h2>
<p>
<span style="font-weight: 400"
>“We knew we had to move on from our old WordPress
instance as we were constantly facing some integration
issues,” states Henry.</span
><span style="font-weight: 400"><br /> </span
><span style="font-weight: 400"><br /> </span
><span style="font-weight: 400"
>We’ll cut to the chase; immediately after implementing
Gatsby, Robinson &amp; Henry’s Lighthouse scores jumped
from 46 to 90!
</span>
</p>
<p>
<span style="font-weight: 400"
>“Improving our SEO was the primary driver for us and
Gatsby delivered,” states Henry.
</span>
</p>
<p>
<span style="font-weight: 400"
>Today, Robinson &amp; Henry is driving an impressive 60%
of their website traffic from their SEO efforts alone!
This was key for their firm as they serve a niche market
of those seeking high quality legal representation, but
not knowing who to turn to.
</span>
</p>
<p>
<span style="font-weight: 400"
>“These folks typically won’t know inside general counsel
at major companies that are going to make referrals. They
don’t know attorneys. They’re going to turn to the web to
find their answer.”
</span>
</p>
<p>
<span style="font-weight: 400"
>“In the last three months alone, Gatsby has allowed us to
drop our bounce rate by 50% which is in line with the
responsiveness of the website going up and increased our
users by 26%. Having a fast-performing website is key to
our success,” exclaims Henry.</span
>
</p>
<p>
Not to mention, the firm passed their Core Web Vitals with
flying colors!<span style="font-weight: 400"><br /> </span>
</p>
</div>
</div>
<div class="css-ds482h">
<figure>
<div
data-gatsby-image-wrapper=""
class="gatsby-image-wrapper gatsby-image-wrapper-constrained"
>
<div style="max-width: 600px; display: block">
<img
alt=""
role="presentation"
aria-hidden="true"
src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;295&#x27; width=&#x27;600&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27; version=&#x27;1.1&#x27;%3E%3C/svg%3E"
style="
max-width: 100%;
display: block;
position: static;
"
/>
</div>
<img
aria-hidden="true"
data-placeholder-image=""
style="opacity: 1; transition: opacity 500ms linear"
decoding="async"
src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABgklEQVQokW2R2a7bMAxE/f8fWfShTWzZjrXv0imkGLlFewkMRhpyqIVL753vUHujtUatdWKs5/7mf+tHDF74Jjqdq1hCikgpUUpNvqTkdJKY03+eeh+6pFqIId4IpBjprdNgNow+EHwgp68muRXCqA1x1o/8wGi62BwQ1/nB4xS8rJr3PKxEvA6260A6wxUNoWZCTazXMet3+WI9d1Sw9N5Yxl+dzU28mmevFhElvSRczxy3flbHI1zsSdN64xra9Hle1SGyJiXPEmLEW4ezbj6B9/9O6q1B61+4o41B3Fof/Jdn0cmxHoJ1F6xCsJ4Cn8MczCZPnmJjO/bJP9bf5JLxJfI8xNS34TsPTPTjBiy5V55VsVY98StLVr9D8qgeedy5Z1H8DDve7tAqWzM8Px7F4TbwiiWEiJIaa9xE8JFaGikXtDZYbTHaEkOilUapHescWpmpDwxfToVSG0tMCak0apidZ+xTzu+GxiL1O2esJaZMLhVjLJdSH8+Yw/CVUvkDsfMJg6s3UEYAAAAASUVORK5CYII="
alt=""
/><picture
><source
type="image/avif"
data-srcset="/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/b84721e1f3ce066e65e11d46f1b55d29/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 150w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/9f9caef229158e6aa18e3609b524bef0/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D300%26h%3D148%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 300w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/84de3403ed11685dad4198050b977232/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D600%26h%3D295%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 600w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/53747d7b09ae358c775ad0a815016282/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D1200%26h%3D590%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 1200w"
sizes="(min-width: 600px) 600px, 100vw" />
<source
type="image/webp"
data-srcset="/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/6fc0a0b8c65e619efbf9f0e6ee447c0d/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 150w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/69f90995066ba106eb38d65bc9d22f27/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D300%26h%3D148%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 300w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/9fa816c4948d599c5b7c9e1fae36be0c/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D600%26h%3D295%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 600w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/1175658e263baed3c8da9a6913ef053a/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D1200%26h%3D590%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 1200w"
sizes="(min-width: 600px) 600px, 100vw" />
<img
data-gatsby-image-ssr=""
data-main-image=""
style="opacity: 0"
sizes="(min-width: 600px) 600px, 100vw"
decoding="async"
loading="lazy"
data-src="/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/09d8d94ca5f5f0d65294556977d8c936/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7"
data-srcset="/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/09d8d94ca5f5f0d65294556977d8c936/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 150w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/b7415166e0392bec52fce72a4a4e9382/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D300%26h%3D148%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 300w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/c46063ada0390774e7821aaa9ea36315/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D600%26h%3D295%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 600w,/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/c41024b00725cf462e228b2b51488962/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D1200%26h%3D590%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 1200w"
alt="" /></picture
><noscript
><picture
><source
type="image/avif"
srcset="
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/b84721e1f3ce066e65e11d46f1b55d29/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 150w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/9f9caef229158e6aa18e3609b524bef0/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D300%26h%3D148%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 300w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/84de3403ed11685dad4198050b977232/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D600%26h%3D295%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 600w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/53747d7b09ae358c775ad0a815016282/Screen-Shot-2022-09-02-at-12.32.44-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D1200%26h%3D590%26fm%3Davif%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 1200w
"
sizes="(min-width: 600px) 600px, 100vw" />
<source
type="image/webp"
srcset="
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/6fc0a0b8c65e619efbf9f0e6ee447c0d/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 150w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/69f90995066ba106eb38d65bc9d22f27/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D300%26h%3D148%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 300w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/9fa816c4948d599c5b7c9e1fae36be0c/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D600%26h%3D295%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 600w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/1175658e263baed3c8da9a6913ef053a/Screen-Shot-2022-09-02-at-12.32.44-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D1200%26h%3D590%26fm%3Dwebp%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 1200w
"
sizes="(min-width: 600px) 600px, 100vw" />
<img
data-gatsby-image-ssr=""
data-main-image=""
style="opacity: 0"
sizes="(min-width: 600px) 600px, 100vw"
decoding="async"
loading="lazy"
src="/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/09d8d94ca5f5f0d65294556977d8c936/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7"
srcset="
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/09d8d94ca5f5f0d65294556977d8c936/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D150%26h%3D74%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 150w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/b7415166e0392bec52fce72a4a4e9382/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D300%26h%3D148%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 300w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/c46063ada0390774e7821aaa9ea36315/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D600%26h%3D295%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 600w,
/_gatsby/image/a7c659cfdc22a9d07e7ff4dbe8aa8043/c41024b00725cf462e228b2b51488962/Screen-Shot-2022-09-02-at-12.32.44-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-02-at-12.32.44-PM.png&amp;a=w%3D1200%26h%3D590%26fm%3Dpng%26q%3D75&amp;cd=50b662ce3cf3e933f00f0e4e853b29d7 1200w
"
alt="" /></picture
></noscript>
<script type="module">
const t =
"undefined" != typeof HTMLImageElement &&
"loading" in HTMLImageElement.prototype;
if (t) {
const t = document.querySelectorAll(
"img[data-main-image]"
);
for (let e of t) {
e.dataset.src &&
(e.setAttribute("src", e.dataset.src),
e.removeAttribute("data-src")),
e.dataset.srcset &&
(e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset"));
const t = e.parentNode.querySelectorAll(
"source[data-srcset]"
);
for (let e of t)
e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset");
e.complete &&
((e.style.opacity = 1),
(e.parentNode.parentNode.querySelector(
"[data-placeholder-image]"
).style.opacity = 0));
}
}
</script>
</div>
<figcaption></figcaption>
</figure>
</div>
<div class="css-ds482h">
<div>
<h2>
<span style="font-weight: 400"
>Gatsby Concierge to the rescue<br />
</span>
</h2>
<p>
<span style="font-weight: 400"
>“Purchasing Gatsby Concierge was the best decision we
could have made,” mentions Henry.</span
><span style="font-weight: 400"><br /> </span
><span style="font-weight: 400"><br /> </span
><span style="font-weight: 400"
>“I’ll be honest, I knew Gatsby Concierge wouldn’t be
cheap, but it was a worthwhile investment. Having Grayson
[Hicks] from your team as our main point of contact helped
immensely with not only learning best practices, but
helping us overcome the major hurdles one faces when
transitioning an old WordPress site that was created back
in 2010. He set us up for success.”</span
>
</p>
<p>
<span style="font-weight: 400"
>Hicks also helped Henry evaluate the quality of the work
he was getting from the agency he had hired.</span
>
</p>
<p>
<span style="font-weight: 400"
>“I can evaluate lawyers and paralegals—but it’s nice to
have an expert in the field vet the development team for
me,” laughs Henry.
</span>
</p>
<p>
<span style="font-weight: 400"
>With Hicks’ help, Henry broke the project into manageable
chunks—starting by moving the frontend over, then changing
the design, then doing further performance
optimization.</span
>
</p>
<p>
<span style="font-weight: 400"
>We asked what Henry’s budget had been when he invested in
a refresh with Gatsby, coupled with our Gatsby Concierge
service, and he responded thoughtfully with; “It’s really
more about the value that’s being driven.” With 95% of
their new clients coming from the web, it certainly
is.</span
>
</p>
<h2>
<span style="font-weight: 400"
>Customer service starts with a client’s first website
interaction<br />
</span>
</h2>
<p>
<span style="font-weight: 400"
>Henry shared some with us some words of advice for others
in similar situations that are considering a website
rehaul;</span
><span style="font-weight: 400"><br /> </span
><span style="font-weight: 400"><br /> </span
><span style="font-weight: 400"
>“You have to be prepared for some pain when you make
massive changes to a website with 5,000 pages on it. But
at the end of the day, you have to be willing to take big
risks if you’re trying to outpace the competition. We
recognize that we’re in the customer service business—and
for us, the customer experience starts with a client’s
first interaction on our website.”</span
><span style="font-weight: 400"><br /> </span>
</p>
<p>
<span style="font-weight: 400"
>We couldn’t agree more!
</span>
</p>
</div>
</div>
<style data-emotion-css="kv66jr">
.css-kv66jr {
position: relative;
padding-top: 0;
}
@media (min-width: 1000px) {
.css-kv66jr {
position: absolute;
height: 100%;
left: 0;
top: 0;
-webkit-transform: translateX(-3.5rem);
-ms-transform: translateX(-3.5rem);
transform: translateX(-3.5rem);
padding-top: 3.5rem;
}
}
</style>
<div class="css-kv66jr">
<style data-emotion-css="1gxjgjn">
.css-1gxjgjn > a:not(:last-of-type) {
margin-right: 0.5rem;
}
@media (min-width: 1000px) {
.css-1gxjgjn {
display: inline-grid;
position: -webkit-sticky;
position: sticky;
top: 6rem;
gap: 0.5rem;
}
.css-1gxjgjn > a:not(:last-of-type) {
margin-right: 0;
}
}
</style>
<div class="css-1gxjgjn">
<style data-emotion-css="1qq7l79">
.css-1qq7l79.css-1qq7l79 {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-1qq7l79:hover,
.css-1qq7l79:focus {
color: #1d9bf0;
}
.css-1qq7l79 > svg:hover,
.css-1qq7l79 > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}</style
><style data-emotion-css="jl7nxq animation-5yo8zs">
.css-jl7nxq {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: var(--theme-ui-colors-grey-60, #635e69);
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background 250ms, border 250ms,
color 250ms;
transition: background 250ms, border 250ms, color 250ms;
line-height: 1;
-webkit-text-decoration: none;
text-decoration: none;
background: transparent;
border: 1px solid transparent;
color: #232129;
font-size: 0.75rem;
min-height: 1.5rem;
min-width: 1.5rem;
padding: 0.25rem 0.5rem;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1rem;
}
.css-jl7nxq[disabled],
.css-jl7nxq[disabled]:hover {
cursor: not-allowed;
opacity: 0.5;
}
.css-jl7nxq svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0.25rem;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.css-jl7nxq:hover:not([disabled]) svg,
.css-jl7nxq:focus:not([disabled]) svg {
-webkit-animation: animation-5yo8zs 1s linear infinite;
animation: animation-5yo8zs 1s linear infinite;
}
.css-jl7nxq:hover {
background: #fbfbfb;
color: #000000;
}
.css-jl7nxq svg {
margin: 0;
}
.css-jl7nxq.css-jl7nxq {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-jl7nxq:hover,
.css-jl7nxq:focus {
color: #1d9bf0;
}
.css-jl7nxq > svg:hover,
.css-jl7nxq > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}
@-webkit-keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}</style
><a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/share?url=https%3A%2F%2Fwww.gatsbyjs.com%2Fblog%2Frobinson-henry-p-c-award-winning-law-firm-sets-industry-gold-standard-with-gatsby%2F&amp;text=Check%20out%20this%20Gatsby%20blog%20post%3A%20Robinson%20%26%20Henry%2C%20P.C.%3A%20Award-winning%20Law%20Firm%20Sets%20Industry%20Gold%20Standard%20With%20Gatsby"
title="Share on Twitter"
class="css-jl7nxq"
><style data-emotion-css="pqd587">
.css-pqd587 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute;
}</style
><span class="css-pqd587">Share on Twitter</span
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
></path></svg></a
><style data-emotion-css="jeh5qs">
.css-jeh5qs.css-jeh5qs {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-jeh5qs:hover,
.css-jeh5qs:focus {
color: #0073b1;
}
.css-jeh5qs > svg:hover,
.css-jeh5qs > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}</style
><style data-emotion-css="10h94lg animation-5yo8zs">
.css-10h94lg {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: var(--theme-ui-colors-grey-60, #635e69);
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background 250ms, border 250ms,
color 250ms;
transition: background 250ms, border 250ms, color 250ms;
line-height: 1;
-webkit-text-decoration: none;
text-decoration: none;
background: transparent;
border: 1px solid transparent;
color: #232129;
font-size: 0.75rem;
min-height: 1.5rem;
min-width: 1.5rem;
padding: 0.25rem 0.5rem;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1rem;
}
.css-10h94lg[disabled],
.css-10h94lg[disabled]:hover {
cursor: not-allowed;
opacity: 0.5;
}
.css-10h94lg svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0.25rem;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.css-10h94lg:hover:not([disabled]) svg,
.css-10h94lg:focus:not([disabled]) svg {
-webkit-animation: animation-5yo8zs 1s linear infinite;
animation: animation-5yo8zs 1s linear infinite;
}
.css-10h94lg:hover {
background: #fbfbfb;
color: #000000;
}
.css-10h94lg svg {
margin: 0;
}
.css-10h94lg.css-10h94lg {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-10h94lg:hover,
.css-10h94lg:focus {
color: #0073b1;
}
.css-10h94lg > svg:hover,
.css-10h94lg > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}
@-webkit-keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}</style
><a
target="_blank"
rel="noopener noreferrer"
href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwww.gatsbyjs.com%2Fblog%2Frobinson-henry-p-c-award-winning-law-firm-sets-industry-gold-standard-with-gatsby%2F&amp;title=Check%20out%20this%20Gatsby%20blog%20post%3A%20Robinson%20%26%20Henry%2C%20P.C.%3A%20Award-winning%20Law%20Firm%20Sets%20Industry%20Gold%20Standard%20With%20Gatsby"
title="Share on LinkedIn"
class="css-10h94lg"
><span class="css-pqd587">Share on LinkedIn</span
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
></path></svg></a
><style data-emotion-css="z1kehg">
.css-z1kehg.css-z1kehg {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-z1kehg:hover,
.css-z1kehg:focus {
color: #1877f2;
}
.css-z1kehg > svg:hover,
.css-z1kehg > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}</style
><style data-emotion-css="kq9zw1 animation-5yo8zs">
.css-kq9zw1 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: var(--theme-ui-colors-grey-60, #635e69);
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background 250ms, border 250ms,
color 250ms;
transition: background 250ms, border 250ms, color 250ms;
line-height: 1;
-webkit-text-decoration: none;
text-decoration: none;
background: transparent;
border: 1px solid transparent;
color: #232129;
font-size: 0.75rem;
min-height: 1.5rem;
min-width: 1.5rem;
padding: 0.25rem 0.5rem;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1rem;
}
.css-kq9zw1[disabled],
.css-kq9zw1[disabled]:hover {
cursor: not-allowed;
opacity: 0.5;
}
.css-kq9zw1 svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0.25rem;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.css-kq9zw1:hover:not([disabled]) svg,
.css-kq9zw1:focus:not([disabled]) svg {
-webkit-animation: animation-5yo8zs 1s linear infinite;
animation: animation-5yo8zs 1s linear infinite;
}
.css-kq9zw1:hover {
background: #fbfbfb;
color: #000000;
}
.css-kq9zw1 svg {
margin: 0;
}
.css-kq9zw1.css-kq9zw1 {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-kq9zw1:hover,
.css-kq9zw1:focus {
color: #1877f2;
}
.css-kq9zw1 > svg:hover,
.css-kq9zw1 > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}
@-webkit-keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}</style
><a
target="_blank"
rel="noopener noreferrer"
href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.gatsbyjs.com%2Fblog%2Frobinson-henry-p-c-award-winning-law-firm-sets-industry-gold-standard-with-gatsby%2F&amp;t=Check%20out%20this%20Gatsby%20blog%20post%3A%20Robinson%20%26%20Henry%2C%20P.C.%3A%20Award-winning%20Law%20Firm%20Sets%20Industry%20Gold%20Standard%20With%20Gatsby"
title="Share on Facebook"
class="css-kq9zw1"
><span class="css-pqd587">Share on Facebook</span
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
></path></svg></a
><style data-emotion-css="195kusf">
.css-195kusf.css-195kusf {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-195kusf:hover,
.css-195kusf:focus {
color: #7026b9;
}
.css-195kusf > svg:hover,
.css-195kusf > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}</style
><style data-emotion-css="1fsltme animation-5yo8zs">
.css-1fsltme {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: var(--theme-ui-colors-grey-60, #635e69);
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background 250ms, border 250ms,
color 250ms;
transition: background 250ms, border 250ms, color 250ms;
line-height: 1;
-webkit-text-decoration: none;
text-decoration: none;
background: transparent;
border: 1px solid transparent;
color: #232129;
font-size: 0.75rem;
min-height: 1.5rem;
min-width: 1.5rem;
padding: 0.25rem 0.5rem;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1rem;
}
.css-1fsltme[disabled],
.css-1fsltme[disabled]:hover {
cursor: not-allowed;
opacity: 0.5;
}
.css-1fsltme svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0.25rem;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.css-1fsltme:hover:not([disabled]) svg,
.css-1fsltme:focus:not([disabled]) svg {
-webkit-animation: animation-5yo8zs 1s linear infinite;
animation: animation-5yo8zs 1s linear infinite;
}
.css-1fsltme:hover {
background: #fbfbfb;
color: #000000;
}
.css-1fsltme svg {
margin: 0;
}
.css-1fsltme.css-1fsltme {
border-bottom: none;
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-1fsltme:hover,
.css-1fsltme:focus {
color: #7026b9;
}
.css-1fsltme > svg:hover,
.css-1fsltme > svg:focus {
stroke: var(--theme-ui-colors-white, #ffffff);
}
@-webkit-keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}</style
><a
target="_blank"
rel="noopener noreferrer"
href='mailto:?subject=Check out this blog post from Gatsby&amp;mailToBody=Check out this blog post "Robinson &amp; Henry, P.C.: Award-winning Law Firm Sets Industry Gold Standard With Gatsby" from Gatsby - https://www.gatsbyjs.com/blog/robinson-henry-p-c-award-winning-law-firm-sets-industry-gold-standard-with-gatsby/'
title="Share via Email"
class="css-1fsltme"
><span class="css-pqd587">Share via Email</span
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"
></path></svg
></a>
</div>
</div>
</section>
<style data-emotion-css="k3zrgk">
@media (min-width: 1000px) {
.css-k3zrgk {
grid-column: 2;
}
}
</style>
<div class="css-k3zrgk">
<style data-emotion-css="1usr9xy">
.css-1usr9xy {
margin-bottom: 3rem;
}
@media (min-width: 1000px) {
.css-1usr9xy {
margin-top: 3rem;
}
}
</style>
<div class="css-1usr9xy">
<style data-emotion-css="1yx2qoa">
.css-1yx2qoa {
border-top: 1px solid
var(--theme-ui-colors-standardLine, #f0f0f2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 3rem;
padding-top: 3rem;
}
@media (min-width: 1000px) {
.css-1yx2qoa {
border: 0;
-webkit-clip: rect(0, 0, 0, 0);
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
}
</style>
<div class="css-1yx2qoa">
<div class="css-1tu59u4">
<a class="css-a4s10g" href="/contributors/neha-varshneya"
><div
data-gatsby-image-wrapper=""
style="width: 48px; height: 48px"
class="gatsby-image-wrapper css-pwjpol"
>
<div
aria-hidden="true"
data-placeholder-image=""
style="
opacity: 1;
transition: opacity 500ms linear;
background-color: rgb(248, 248, 248);
width: 48px;
height: 48px;
position: relative;
"
></div>
<picture
><source
type="image/avif"
data-srcset="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/9a9d8dd67c7f7f5893c01610d602148a/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,/_gatsby/image/4bce2700acab61af21b945b62e084ab3/ccbde9ca2e9b1139d5c90238ba301e13/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x"
sizes="48px" />
<source
type="image/webp"
data-srcset="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/c9805143dda94a57d869f0ec25df0dc8/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,/_gatsby/image/4bce2700acab61af21b945b62e084ab3/3a665789b00b19529f711eeb764a463d/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x"
sizes="48px" />
<img
data-gatsby-image-ssr=""
placeholder="none"
data-main-image=""
style="opacity: 0"
sizes="48px"
decoding="async"
loading="lazy"
data-src="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9"
data-srcset="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a941be751f1d5be6ee73405370fd9e66/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x"
alt="Neha Varshneya" /></picture
><noscript
><picture
><source
type="image/avif"
srcset="
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/9a9d8dd67c7f7f5893c01610d602148a/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/ccbde9ca2e9b1139d5c90238ba301e13/Screen-Shot-2022-09-12-at-12.52.50-PM.avif?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Davif%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x
"
sizes="48px" />
<source
type="image/webp"
srcset="
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/c9805143dda94a57d869f0ec25df0dc8/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/3a665789b00b19529f711eeb764a463d/Screen-Shot-2022-09-12-at-12.52.50-PM.webp?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dwebp%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x
"
sizes="48px" />
<img
data-gatsby-image-ssr=""
placeholder="none"
data-main-image=""
style="opacity: 0"
sizes="48px"
decoding="async"
loading="lazy"
src="/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9"
srcset="
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a13055f53290b257047e140ee08fd17f/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D48%26h%3D48%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 1x,
/_gatsby/image/4bce2700acab61af21b945b62e084ab3/a941be751f1d5be6ee73405370fd9e66/Screen-Shot-2022-09-12-at-12.52.50-PM.png?u=https%3A%2F%2Fgatsbycontent.wpengine.com%2Fwp-content%2Fuploads%2F2022%2F09%2FScreen-Shot-2022-09-12-at-12.52.50-PM.png&amp;a=w%3D96%26h%3D96%26fm%3Dpng%26q%3D75&amp;cd=8459913304ea1d948cb8ce25b61847f9 2x
"
alt="Neha Varshneya" /></picture
></noscript>
<script type="module">
const t =
"undefined" != typeof HTMLImageElement &&
"loading" in HTMLImageElement.prototype;
if (t) {
const t = document.querySelectorAll(
"img[data-main-image]"
);
for (let e of t) {
e.dataset.src &&
(e.setAttribute("src", e.dataset.src),
e.removeAttribute("data-src")),
e.dataset.srcset &&
(e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset"));
const t = e.parentNode.querySelectorAll(
"source[data-srcset]"
);
for (let e of t)
e.setAttribute("srcset", e.dataset.srcset),
e.removeAttribute("data-srcset");
e.complete &&
((e.style.opacity = 1),
(e.parentNode.parentNode.querySelector(
"[data-placeholder-image]"
).style.opacity = 0));
}
}
</script>
</div></a
>
</div>
<div class="css-11qjisw">
<style data-emotion-css="1ynwi3i">
.css-1ynwi3i {
font-size: 0.875rem;
color: var(--theme-ui-colors-text-secondary, #78757a);
}</style
><span class="css-1ynwi3i">Written by</span
><style data-emotion-css="zfozx0">
.css-zfozx0 {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
}
</style>
<h6 class="css-zfozx0">
<a class="css-19brxl7" href="/contributors/neha-varshneya"
>Neha Varshneya</a
>
</h6>
</div>
</div>
<style data-emotion-css="po96y3">
.css-po96y3 {
color: var(--theme-ui-colors-text-secondary, #78757a);
font-size: 0.875rem;
}
@media (min-width: 1000px) {
.css-po96y3 {
font-size: 0.75rem;
}
}
</style>
<div class="css-po96y3">
<p>
Director of Product Marketing at Gatsby. Fan of good brand
storytelling and bad puns.
</p>
<p>
<a href="https://www.twitter.com/@nehavarshneya"
>Follow
<!-- -->Neha Varshneya<!-- -->
on Twitter</a
>
</p>
<style data-emotion-css="1t07vmd">
.css-1t07vmd {
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
</style>
<div class="css-1t07vmd">
<style data-emotion-css="1aw2dlr">
.css-1aw2dlr {
color: var(--theme-ui-colors-text-secondary, #78757a);
display: block;
-webkit-flex-basis: 60%;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-size: 0.75rem;
font-style: normal;
margin-bottom: 0.25rem;
margin-top: 1.25rem;
}</style
><em class="css-1aw2dlr"
>Tagged with
<span
><a href="/blog/tags/case-studies"
>Case Studies</a
></span
></em
><style data-emotion-css="78xyp7 animation-5yo8zs">
.css-78xyp7 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: var(--theme-ui-colors-grey-60, #635e69);
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background 250ms, border 250ms,
color 250ms;
transition: background 250ms, border 250ms, color 250ms;
line-height: 1;
-webkit-text-decoration: none;
text-decoration: none;
background: transparent;
border: 1px solid transparent;
color: #663399;
font-size: 0.75rem;
min-height: 1.5rem;
min-width: 1.5rem;
padding: 0.25rem 0.5rem;
}
.css-78xyp7[disabled],
.css-78xyp7[disabled]:hover {
cursor: not-allowed;
opacity: 0.5;
}
.css-78xyp7 svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0.25rem;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
margin-right: -0.25rem;
}
.css-78xyp7:hover:not([disabled]) svg,
.css-78xyp7:focus:not([disabled]) svg {
-webkit-animation: animation-5yo8zs 1s linear infinite;
animation: animation-5yo8zs 1s linear infinite;
}
.css-78xyp7:hover {
background: #fcfaff;
color: #362066;
}
@-webkit-keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}</style
><a class="css-78xyp7" href="/blog/tags"
>View all Tags<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 640 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"
></path></svg
></a>
</div>
</div>
</div>
<style data-emotion-css="rg6yv7">
.css-rg6yv7 {
border-top: 1px solid
var(--theme-ui-colors-standardLine, #f0f0f2);
}
@media (min-width: 1000px) {
.css-rg6yv7 {
margin-top: 3rem;
}
}
</style>
<div class="css-rg6yv7"></div>
<h3 class="css-zfozx0">
Talk to our team of Gatsby Experts to supercharge your website
performance.
</h3>
<style data-emotion-css="1qs8v0y">
.css-1qs8v0y {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 2.5rem;
margin-bottom: 0rem;
}
.css-1qs8v0y > :first-child {
margin-bottom: 0rem;
}
@media (min-width: 550px) {
.css-1qs8v0y {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.css-1qs8v0y > :first-child {
margin-bottom: 0;
margin-right: 0.75rem;
}
}
</style>
<div class="css-1qs8v0y">
<style data-emotion-css="dp4f8d">
.css-dp4f8d {
border-radius: 8px;
background: var(--theme-ui-colors-purple-60, #663399);
border-color: var(--theme-ui-colors-purple-60, #663399);
font-weight: 700;
}
.css-dp4f8d:hover {
background: var(--theme-ui-colors-purple-70, #542c85);
border-color: var(--theme-ui-colors-purple-70, #542c85);
}</style
><style data-emotion-css="19luf7c animation-5yo8zs">
.css-19luf7c {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: var(--theme-ui-colors-grey-60, #635e69);
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background 250ms, border 250ms,
color 250ms;
transition: background 250ms, border 250ms, color 250ms;
line-height: 1;
-webkit-text-decoration: none;
text-decoration: none;
background: #8a4baf;
border: 1px solid #8a4baf;
color: var(--theme-ui-colors-white, #ffffff);
font-weight: 600;
font-size: 1rem;
min-height: calc(2rem + 0.25rem);
min-width: calc(2rem + 0.25rem);
padding: 0.25rem 1rem;
border-radius: 8px;
background: var(--theme-ui-colors-purple-60, #663399);
border-color: var(--theme-ui-colors-purple-60, #663399);
font-weight: 700;
}
.css-19luf7c[disabled],
.css-19luf7c[disabled]:hover {
cursor: not-allowed;
opacity: 0.5;
}
.css-19luf7c svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0.25rem;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
margin-right: -0.25rem;
}
.css-19luf7c:hover:not([disabled]) svg,
.css-19luf7c:focus:not([disabled]) svg {
-webkit-animation: animation-5yo8zs 1s linear infinite;
animation: animation-5yo8zs 1s linear infinite;
}
.css-19luf7c:hover {
background: #663399;
border: 1px solid #663399;
}
.css-19luf7c:hover {
background: var(--theme-ui-colors-purple-70, #542c85);
border-color: var(--theme-ui-colors-purple-70, #542c85);
}
@-webkit-keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes animation-5yo8zs {
33% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
66% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}</style
><a href="/concierge#contact" class="css-19luf7c"
>Contact Gatsby Now<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
></path></svg
></a>
</div>
</div>
<style data-emotion-css="hsw7gq">
@media (min-width: 1000px) {
.css-hsw7gq {
grid-column: 1;
}
}
</style>
<div class="css-hsw7gq">
<style data-emotion-css="i6zy71">
.css-i6zy71 {
margin-top: 3rem;
}
@media (min-width: 550px) {
.css-i6zy71 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
}
</style>
<nav aria-label="pagination" class="css-i6zy71">
<style data-emotion-css="1vwrce3">
@media (min-width: 550px) {
.css-1vwrce3 {
margin-top: 1rem;
width: 48%;
}
}
</style>
<div class="css-1vwrce3">
<style data-emotion-css="13x78tx">
.css-13x78tx {
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
}
.css-13x78tx.css-13x78tx {
-webkit-text-decoration: none;
text-decoration: none;
}</style
><a
class="css-13x78tx"
href="/blog/comparing-website-performance-gatsby-vs-next-vs-nuxt"
><style data-emotion-css="3z8wqe">
.css-3z8wqe {
color: var(--theme-ui-colors-text-secondary, #78757a);
font-size: 0.875rem;
font-weight: normal;
margin-bottom: 0.5rem;
margin-top: 2rem;
}
</style>
<p class="css-3z8wqe">Previous</p>
<style data-emotion-css="1o0el9m">
.css-1o0el9m {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
margin-left: -1.5em;
}</style
><span class="css-1o0el9m"
><style data-emotion-css="xxshfe">
.css-xxshfe {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-right: 0.5em;
position: relative;
top: 0.1825em;
}</style
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="css-xxshfe"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
></path></svg
>Comparing website performance: Gatsby vs Next vs
Nuxt</span
></a
>
</div>
<style data-emotion-css="cqsxwv">
.css-cqsxwv {
text-align: right;
}
@media (min-width: 550px) {
.css-cqsxwv {
margin-top: 1rem;
width: 48%;
}
}
</style>
<div class="css-cqsxwv">
<a
class="css-13x78tx"
href="/blog/getting-started-with-gatsby-features-server-side-rendering"
><p class="css-3z8wqe">Next</p>
<style data-emotion-css="1ecn93">
.css-1ecn93 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: -1.5em;
}</style
><span class="css-1ecn93"
>Getting Started With Gatsby Features: Server-Side
Rendering<style data-emotion-css="r5893g">
.css-r5893g {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-left: 0.5em;
position: relative;
top: 0.1825em;
}</style
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="css-r5893g"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
></path></svg></span
></a>
</div>
</nav>
</div>
</main>
<style data-emotion-css="1ev0e9b">
.css-1ev0e9b {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 6rem;
}</style
><style data-emotion-css="bexlo1">
.css-bexlo1 {
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 90rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 6rem;
}
@media (min-width: 550px) {
.css-bexlo1 {
width: 100%;
}
}
</style>
<div class="css-bexlo1">
<style data-emotion-css="zhgq71">
.css-zhgq71 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 1.25rem;
margin-top: 3rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
@media (min-width: 750px) {
.css-zhgq71 {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-align-items: flex-end;
-webkit-box-align: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
margin-top: 0;
margin-bottom: 4rem;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
}
</style>
<aside aria-label="Gatsby Community" class="css-zhgq71">
<style data-emotion-css="g7lqkh">
.css-g7lqkh {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@media (min-width: 750px) {
.css-g7lqkh {
margin-right: auto;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
}
}
</style>
<div class="css-g7lqkh">
<style data-emotion-css="1kb6yjw">
.css-1kb6yjw {
height: 1.5rem;
width: auto;
}</style
><style data-emotion-css="j6vqkv">
.css-j6vqkv {
fill: black;
height: 1.5rem;
width: auto;
}</style
><svg
width="106"
height="28"
viewBox="0 0 106 28"
class="css-j6vqkv"
>
<g fill="#000000">
<path
d="M62.9,12h2.8v10h-2.8v-1.3c-1,1.5-2.3,1.6-3.1,1.6c-3.1,0-5.1-2.4-5.1-5.3c0-3,2-5.3,4.9-5.3c0.8,0,2.3,0.1,3.2,1.6V12z M57.7,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C58.9,14.2,57.7,15.4,57.7,17z"
></path>
<path
d="M71.2,14.4V22h-2.8v-7.6h-1.1V12h1.1V8.6h2.8V12h1.9v2.4H71.2z"
></path>
<path
d="M79.7,14.4c-0.7-0.6-1.3-0.7-1.6-0.7c-0.7,0-1.1,0.3-1.1,0.8c0,0.3,0.1,0.6,0.9,0.9l0.7,0.2c0.8,0.3,2,0.6,2.5,1.4 c0.3,0.4,0.5,1,0.5,1.7c0,0.9-0.3,1.8-1.1,2.5c-0.8,0.7-1.8,1.1-3,1.1c-2.1,0-3.2-1-3.9-1.7l1.5-1.7c0.6,0.6,1.4,1.2,2.2,1.2 c0.8,0,1.4-0.4,1.4-1.1c0-0.6-0.5-0.9-0.9-1l-0.6-0.2c-0.7-0.3-1.5-0.6-2.1-1.2c-0.5-0.5-0.8-1.1-0.8-1.9c0-1,0.5-1.8,1-2.3 c0.8-0.6,1.8-0.7,2.6-0.7c0.7,0,1.9,0.1,3.2,1.1L79.7,14.4z"
></path>
<path
d="M85.8,13.3c1-1.4,2.4-1.6,3.2-1.6c2.9,0,4.9,2.3,4.9,5.3c0,3-2,5.3-5,5.3c-0.6,0-2.1-0.1-3.2-1.6V22H83V5.2h2.8V13.3z M85.5,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C86.6,14.2,85.5,15.4,85.5,17z"
></path>
<path
d="M98.5,20.5L93.7,12H97l3.1,5.7l2.8-5.7h3.2l-8,15.3h-3.2L98.5,20.5z"
></path>
<path
d="M54,13.7h-2.8c0,0-4.2,0-4.2,0v2.8h3.7c-0.6,1.9-2,3.2-4.6,3.2c-2.9,0-5-2.4-5-5.3S43.1,9,46,9c1.6,0,3.2,0.8,4.2,2.1 l2.3-1.5C51,7.5,48.6,6.3,46,6.3c-4.4,0-8,3.6-8,8.1s3.4,8.1,8,8.1s8-3.6,8-8.1C54.1,14.1,54,13.9,54,13.7z"
></path>
</g>
<g>
<g fill="#ffffff">
<path
d="M25,14h-7v2h4.8c-0.7,3-2.9,5.5-5.8,6.5L5.5,11c1.2-3.5,4.6-6,8.5-6c3,0,5.7,1.5,7.4,3.8l1.5-1.3 C20.9,4.8,17.7,3,14,3C8.8,3,4.4,6.7,3.3,11.6l13.2,13.2C21.3,23.6,25,19.2,25,14z"
></path>
<path
d="M3,14.1c0,2.8,1.1,5.5,3.2,7.6c2.1,2.1,4.9,3.2,7.6,3.2L3,14.1z"
></path>
</g>
<path
d="M14,0C6.3,0,0,6.3,0,14s6.3,14,14,14s14-6.3,14-14S21.7,0,14,0z M6.2,21.8c-2.1-2.1-3.2-4.9-3.2-7.6L13.9,25 C11.1,24.9,8.3,23.9,6.2,21.8z M16.4,24.7L3.3,11.6C4.4,6.7,8.8,3,14,3c3.7,0,6.9,1.8,8.9,4.5l-1.5,1.3C19.7,6.5,17,5,14,5 c-3.9,0-7.2,2.5-8.5,6L17,22.5c2.9-1,5.1-3.5,5.8-6.5H18v-2h7C25,19.2,21.3,23.6,16.4,24.7z"
fill="#663399"
></path>
</g></svg
><style data-emotion-css="1vym0s9">
.css-1vym0s9 {
font-size: 0.75rem;
color: var(--theme-ui-colors-grey-50, #78757a);
margin: 0;
margin-top: 1.25rem;
text-align: center;
}
@media (min-width: 750px) {
.css-1vym0s9 {
text-align: left;
}
}
</style>
<p class="css-1vym0s9">
Gatsby is powered by the amazing Gatsby<br />
community and Gatsby, the company.
</p>
</div>
<style data-emotion-css="1ozgqm8">
.css-1ozgqm8 {
margin-top: 1.25rem;
}
@media (min-width: 750px) {
.css-1ozgqm8 {
margin-top: 0;
}
}
</style>
<div class="css-1ozgqm8">
<style data-emotion-css="78568f">
.css-78568f {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
-webkit-transform: translateY(0.25rem);
-ms-transform: translateY(0.25rem);
transform: translateY(0.25rem);
}
@media (min-width: 750px) {
.css-78568f {
margin-right: 2rem;
}
}
</style>
<ul class="css-78568f">
<style data-emotion-css="1k2fin6">
.css-1k2fin6 {
margin: 0;
}
.css-1k2fin6:not(:last-of-type) {
margin-right: 0.25rem;
}
</style>
<li class="css-1k2fin6">
<style data-emotion-css="1smyiel">
.css-1smyiel {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
-webkit-transition: background 500ms
cubic-bezier(0.4, 0, 0.2, 1);
transition: background 500ms
cubic-bezier(0.4, 0, 0.2, 1);
}
.css-1smyiel svg {
fill: var(--theme-ui-colors-grey-40, #b7b5bd);
-webkit-transition: fill 500ms
cubic-bezier(0.4, 0, 0.2, 1);
transition: fill 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.css-1smyiel:hover {
background: var(--theme-ui-colors-purple-10, #f6edfa);
}
.css-1smyiel:hover svg {
fill: var(--theme-ui-colors-grey-60, #635e69);
}</style
><style data-emotion-css="jix6m">
.css-jix6m {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--theme-ui-colors-purple-60, #663399);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-text-decoration: underline;
text-decoration: underline;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
-webkit-transition: background 500ms
cubic-bezier(0.4, 0, 0.2, 1);
transition: background 500ms
cubic-bezier(0.4, 0, 0.2, 1);
}
.css-jix6m:focus,
.css-jix6m:hover {
color: var(--theme-ui-colors-purple-60, #663399);
-webkit-text-decoration: underline;
text-decoration: underline;
}
.css-jix6m svg {
fill: var(--theme-ui-colors-grey-40, #b7b5bd);
-webkit-transition: fill 500ms
cubic-bezier(0.4, 0, 0.2, 1);
transition: fill 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.css-jix6m:hover {
background: var(--theme-ui-colors-purple-10, #f6edfa);
}
.css-jix6m:hover svg {
fill: var(--theme-ui-colors-grey-60, #635e69);
}</style
><a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/gatsbyjs"
class="css-jix6m"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 496 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>Gatsby Github</title>
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
></path></svg
></a>
</li>
<li class="css-1k2fin6">
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/gatsbyjs"
class="css-jix6m"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>Gatsby Twitter</title>
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
></path></svg
></a>
</li>
<li class="css-1k2fin6">
<a
target="_blank"
rel="noopener noreferrer"
href="https://gatsby.dev/discord"
class="css-jix6m"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 640 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>Gatsby Discord</title>
<path
d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
></path></svg
></a>
</li>
<li class="css-1k2fin6">
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.instagram.com/gatsbyjs/"
class="css-jix6m"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>Gatsby Instagram</title>
<path
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
></path></svg
></a>
</li>
<li class="css-1k2fin6">
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.youtube.com/gatsbyjs"
class="css-jix6m"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 576 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>Gatsby Youtube</title>
<path
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
></path></svg
></a>
</li>
<li class="css-1k2fin6">
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.twitch.tv/gatsbyjs"
class="css-jix6m"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>Gatsby Twitch</title>
<path
d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z"
></path></svg
></a>
</li>
<li class="css-1k2fin6">
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.linkedin.com/company/gatsbyjs"
class="css-jix6m"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>Gatsby LinkedIn</title>
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
></path></svg
></a>
</li>
</ul>
</div>
<style data-emotion-css="bkatzl">
.css-bkatzl {
width: 16rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
position: relative;
}
</style>
<div class="css-bkatzl">
<style data-emotion-css="poyawq">
.css-poyawq {
display: grid;
grid-template-areas: "label label" "input button";
margin: 0;
margin-top: 1.5rem;
position: relative;
}
@media (min-width: 750px) {
.css-poyawq {
margin-top: 0;
}
}
</style>
<form novalidate="" class="css-poyawq">
<style data-emotion-css="1o60176">
.css-1o60176 {
grid-area: label;
color: var(--theme-ui-colors-grey-50, #78757a);
font-size: 0.75rem;
margin-bottom: 0.5rem;
}
.css-1o60176 span {
display: none;
}</style
><label for="email" class="css-1o60176"
>Subscribe to our newsletter</label
><style data-emotion-css="1cmx75u">
.css-1cmx75u {
grid-area: input;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
height: 2.5rem;
padding: 0 0.5rem;
background: var(
--theme-ui-colors-blackFade-5,
rgba(35, 33, 41, 0.05)
);
border: 0;
}
.css-1cmx75u span {
display: none;
}
.css-1cmx75u:focus {
box-shadow: 0 0 0 2px
var(--theme-ui-colors-red-10, #fde7e7);
}
.css-1cmx75u::-webkit-input-placeholder {
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-1cmx75u::-moz-placeholder {
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-1cmx75u:-ms-input-placeholder {
color: var(--theme-ui-colors-grey-50, #78757a);
}
.css-1cmx75u::placeholder {
color: var(--theme-ui-colors-grey-50, #78757a);
}
@media (min-width: 750px) {
.css-1cmx75u {
font-size: 0.875rem;
height: 2rem;
}
}</style
><input
type="email"
name="email"
required=""
placeholder="[email protected]"
value=""
class="css-1cmx75u"
/><style data-emotion-css="ol3l68">
.css-ol3l68 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 4px;
box-sizing: border-box;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
grid-area: button;
height: 2.5rem;
width: 2.5rem;
padding: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
background: var(--theme-ui-colors-purple-60, #663399);
border: var(--theme-ui-colors-purple-60, #663399);
color: var(--theme-ui-colors-white, #ffffff);
}
.css-ol3l68 svg {
width: 1.25rem;
height: auto;
}
@media (min-width: 750px) {
.css-ol3l68 {
height: 2rem;
width: 2rem;
}
}</style
><button type="submit" class="css-ol3l68">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
</svg>
<style data-emotion-css="7v2lmy">
.css-7v2lmy {
-webkit-clip: rect(1px, 1px, 1px, 1px);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}</style
><span class="css-7v2lmy">Subscribe</span>
</button>
</form>
<style data-emotion-css="1hyfx7x">
.css-1hyfx7x {
display: none;
}</style
><style data-emotion-css="ln1sdc">
.css-ln1sdc {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
max-width: 420px;
width: 100%;
margin-left: auto;
margin-right: auto;
display: none;
}
.css-ln1sdc .mktoForm {
width: 100%;
padding: 0;
}
.css-ln1sdc .mktoForm fieldset {
max-width: none;
width: 100%;
}
.css-ln1sdc .mktoForm .mktoFormRow,
.css-ln1sdc .mktoForm .mktoFormCol,
.css-ln1sdc .mktoForm .mktoFieldWrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.css-ln1sdc .mktoForm .mktoFormRow {
margin-bottom: 1.25rem;
}
.css-ln1sdc .mktoForm .mktoGutter,
.css-ln1sdc .mktoForm .mktoOffset {
display: none;
}
.css-ln1sdc .mktoForm .mktoRequiredField .mktoAsterix {
color: var(
--theme-ui-colors-blackFade-50,
rgba(35, 33, 41, 0.5)
);
}
.css-ln1sdc .mktoForm .mktoRequiredField .mktoInvalid {
border-color: var(--theme-ui-colors-warning, #da0013);
}
.css-ln1sdc .mktoForm label {
box-sizing: border-box;
color: var(
--theme-ui-colors-blackFade-70,
rgba(35, 33, 41, 0.7)
);
display: block;
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 0.25rem;
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
}
.css-ln1sdc .mktoForm .mktoError {
position: static;
margin-top: 0.25rem;
}
.css-ln1sdc .mktoForm .mktoError .mktoErrorMsg {
background-color: inherit;
background-image: inherit;
box-shadow: none;
text-shadow: none;
border: none;
color: inherit;
margin: 0;
padding: 0;
}
.css-ln1sdc .mktoForm .mktoError .mktoErrorArrowWrap {
display: none !important;
}
.css-ln1sdc .mktoForm .mktoField {
z-index: 10;
display: block;
}
.css-ln1sdc .mktoForm .mktoRequired {
color: var(--theme-ui-colors-grey-40, #b7b5bd);
}
.css-ln1sdc .mktoForm input[type="text"],
.css-ln1sdc .mktoForm input[type="email"],
.css-ln1sdc .mktoForm input[type="tel"],
.css-ln1sdc .mktoForm input[type="url"],
.css-ln1sdc .mktoForm textarea.mktoField,
.css-ln1sdc .mktoForm select.mktoField {
box-sizing: border-box;
background-color: var(--theme-ui-colors-white, #ffffff);
border: 1px solid
var(--theme-ui-colors-blackFade-10, rgba(35, 33, 41, 0.1));
border-radius: 4px;
caret-color: var(--theme-ui-colors-gatsby, #663399);
color: var(
--theme-ui-colors-blackFade-80,
rgba(35, 33, 41, 0.8)
);
padding: 8px;
width: 100% !important;
outline: none;
-webkit-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1rem;
min-height: 40px;
position: relative;
}
.css-ln1sdc
.mktoForm
input[type="text"]::-webkit-input-placeholder,
.css-ln1sdc
.mktoForm
input[type="email"]::-webkit-input-placeholder,
.css-ln1sdc
.mktoForm
input[type="tel"]::-webkit-input-placeholder,
.css-ln1sdc
.mktoForm
input[type="url"]::-webkit-input-placeholder,
.css-ln1sdc
.mktoForm
textarea.mktoField::-webkit-input-placeholder,
.css-ln1sdc
.mktoForm
select.mktoField::-webkit-input-placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc .mktoForm input[type="text"]::-moz-placeholder,
.css-ln1sdc .mktoForm input[type="email"]::-moz-placeholder,
.css-ln1sdc .mktoForm input[type="tel"]::-moz-placeholder,
.css-ln1sdc .mktoForm input[type="url"]::-moz-placeholder,
.css-ln1sdc .mktoForm textarea.mktoField::-moz-placeholder,
.css-ln1sdc .mktoForm select.mktoField::-moz-placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc
.mktoForm
input[type="text"]:-ms-input-placeholder,
.css-ln1sdc
.mktoForm
input[type="email"]:-ms-input-placeholder,
.css-ln1sdc .mktoForm input[type="tel"]:-ms-input-placeholder,
.css-ln1sdc .mktoForm input[type="url"]:-ms-input-placeholder,
.css-ln1sdc
.mktoForm
textarea.mktoField:-ms-input-placeholder,
.css-ln1sdc .mktoForm select.mktoField:-ms-input-placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc .mktoForm input[type="text"]::placeholder,
.css-ln1sdc .mktoForm input[type="email"]::placeholder,
.css-ln1sdc .mktoForm input[type="tel"]::placeholder,
.css-ln1sdc .mktoForm input[type="url"]::placeholder,
.css-ln1sdc .mktoForm textarea.mktoField::placeholder,
.css-ln1sdc .mktoForm select.mktoField::placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc .mktoForm input[type="text"]:focus,
.css-ln1sdc .mktoForm input[type="email"]:focus,
.css-ln1sdc .mktoForm input[type="tel"]:focus,
.css-ln1sdc .mktoForm input[type="url"]:focus,
.css-ln1sdc .mktoForm textarea.mktoField:focus,
.css-ln1sdc .mktoForm select.mktoField:focus {
border-color: var(--theme-ui-colors-gatsby, #663399);
outline: 0;
box-shadow: 0 0 0 0.2rem
var(--theme-ui-colors-purple-20, #f1defa);
}
.css-ln1sdc .mktoForm select {
-webkit-appearance: none;
background: var(--theme-ui-colors-white, #ffffff)
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
no-repeat right 0.75rem center/8px 10px;
width: 100% !important;
color: var(
--theme-ui-colors-blackFade-80,
rgba(35, 33, 41, 0.8)
) !important;
}
.css-ln1sdc .mktoForm input[type="radio"] {
width: auto;
margin-right: 8px;
}
.css-ln1sdc .mktoForm ul.inputs-list {
list-style-type: none;
margin: 0;
}
.css-ln1sdc
.mktoForm
.mktoButtonWrap
.mktoButton[type="submit"] {
background: var(--theme-ui-colors-gatsby, #663399);
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid transparent;
border-radius: 8px;
color: var(--theme-ui-colors-white, #ffffff);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
font-weight: bold;
padding: 0.5rem 1rem;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
-webkit-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-font-smoothing: antialiased;
width: 100%;
background-color: none;
background-image: none;
border-color: none;
cursor: pointer;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1rem !important;
}
.css-ln1sdc
.mktoForm
.mktoButtonWrap
.mktoButton[type="submit"]:hover {
background: var(--theme-ui-colors-gatsby, #663399);
}
.css-ln1sdc
.mktoForm
.mktoButtonWrap
.mktoButton[type="submit"]:focus {
outline: 0;
}
@media (min-width: 550px) {
.css-ln1sdc
.mktoForm
.mktoButtonWrap
.mktoButton[type="submit"] {
font-size: 1.25rem;
width: auto;
}
}
.css-ln1sdc
.mktoForm
.mktoButtonWrap
.mktoButton[type="submit"]:hover,
.css-ln1sdc
.mktoForm
.mktoButtonWrap
.mktoButton[type="submit"]:focus {
background: var(--theme-ui-colors-purple-90, #362066);
box-shadow: 0 0 0 0.2rem rgba(138, 75, 175, 0.25);
}
.css-ln1sdc .mktoForm textarea {
box-sizing: border-box;
background-color: var(--theme-ui-colors-white, #ffffff);
border: 1px solid
var(--theme-ui-colors-blackFade-10, rgba(35, 33, 41, 0.1));
border-radius: 2px;
padding: 8px;
width: 100% !important;
outline: none;
-webkit-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.css-ln1sdc .mktoForm textarea::-webkit-input-placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc .mktoForm textarea::-moz-placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc .mktoForm textarea:-ms-input-placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc .mktoForm textarea::placeholder {
color: var(--theme-ui-colors-lilac, #8a4baf);
opacity: 1;
}
.css-ln1sdc .mktoForm textarea:focus {
border-color: var(--theme-ui-colors-lilac, #8a4baf);
outline: 0;
box-shadow: 0 0 0 0.2rem
var(--theme-ui-colors-purple-20, #f1defa);
}
.css-ln1sdc .form-columns-1 .input,
.css-ln1sdc .form-columns-2 .input {
margin-right: 1rem !important;
}
.css-ln1sdc label.hs-form-radio-display,
.css-ln1sdc label.hs-form-checkbox-display {
font-size: 1rem;
color: var(--theme-ui-colors-grey-90, #232129);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
margin: 0;
}
.css-ln1sdc label.hs-form-radio-display .mktoInput,
.css-ln1sdc label.hs-form-checkbox-display .mktoInput {
margin-right: 0.5rem;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
</style>
<div class="css-ln1sdc"><form id="mktoForm_1139"></form></div>
</div>
</aside>
<style data-emotion-css="1h3ns7l">
.css-1h3ns7l {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
@media (min-width: 750px) {
.css-1h3ns7l {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
}
</style>
<nav aria-label="Site" class="css-1h3ns7l">
<style data-emotion-css="1lb2m8i">
.css-1lb2m8i {
border-top: 1px solid var(--theme-ui-colors-grey-20, #f0f0f2);
display: grid;
grid-column-gap: 2.5rem;
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 750px) {
.css-1lb2m8i {
border-top: 0;
grid-template-columns: repeat(
auto-fill,
minmax(10rem, 1fr)
);
}
}
</style>
<ul class="css-1lb2m8i">
<style data-emotion-css="q7vzzb">
.css-q7vzzb {
margin: 0;
border-bottom: 1px solid
var(--theme-ui-colors-grey-20, #f0f0f2);
}
@media (min-width: 750px) {
.css-q7vzzb {
border-bottom: 0;
}
}
</style>
<li class="css-q7vzzb">
<style data-emotion-css="lr5hez">
.css-lr5hez {
color: var(--theme-ui-colors-grey-90, #232129);
font-size: 0.75rem;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
margin: 0;
text-transform: uppercase;
}
@media (min-width: 750px) {
.css-lr5hez {
border-bottom: 0;
}
}
</style>
<h2 class="css-lr5hez">
<style data-emotion-css="1qjgsvq">
.css-1qjgsvq {
all: inherit;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: none;
border: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.75rem 0;
font-size: inherit;
text-transform: inherit;
width: 100%;
}</style
><button aria-expanded="false" class="css-1qjgsvq">
Open Source<style data-emotion-css="1gzf20k">
.css-1gzf20k {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 24px;
width: 24px;
border-radius: 2px;
}
.css-1gzf20k svg {
font-size: 1.5rem;
fill: var(--theme-ui-colors-grey-40, #b7b5bd);
-webkit-transition: -webkit-transform 0.5s;
-webkit-transition: transform 0.5s;
transition: transform 0.5s;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
button:focus > .css-1gzf20k {
border: 1px solid
var(--theme-ui-colors-purple-30, #d9bae8);
}
button:focus > .css-1gzf20k svg {
fill: var(--theme-ui-colors-purple-60, #663399);
}</style
><span aria-hidden="true" class="css-1gzf20k"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></svg
></span>
</button>
</h2>
<style data-emotion-css="1l1mtm3">
.css-1l1mtm3 {
display: none;
list-style: none;
margin: 0;
padding: 0;
padding-top: 0.25rem;
padding-bottom: 1.5rem;
}
@media (min-width: 750px) {
.css-1l1mtm3 {
display: grid;
padding-top: 1.25rem;
}
}
</style>
<ul class="css-1l1mtm3">
<style data-emotion-css="1sncdea">
.css-1sncdea {
font-size: 0.875rem;
line-height: 1.25;
}
.css-1sncdea:not(:last-of-type) {
margin-bottom: 0.25rem;
}
</style>
<li class="css-1sncdea">
<style data-emotion-css="15ppiz8">
.css-15ppiz8 {
color: var(
--theme-ui-colors-blackFade-70,
rgba(35, 33, 41, 0.7)
);
display: inline-block;
padding: 2px 4px;
-webkit-transform: translateX(-4px);
-ms-transform: translateX(-4px);
transform: translateX(-4px);
}
.css-15ppiz8:hover,
.css-15ppiz8:focus {
color: var(--theme-ui-colors-purple-60, #663399);
-webkit-transition: all 250ms
cubic-bezier(0.4, 0, 0.2, 1);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-text-decoration: none;
text-decoration: none;
}</style
><style data-emotion-css="tu9on4">
.css-tu9on4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--theme-ui-colors-purple-60, #663399);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-text-decoration: none;
text-decoration: none;
color: var(
--theme-ui-colors-blackFade-70,
rgba(35, 33, 41, 0.7)
);
display: inline-block;
padding: 2px 4px;
-webkit-transform: translateX(-4px);
-ms-transform: translateX(-4px);
transform: translateX(-4px);
}
.css-tu9on4:focus,
.css-tu9on4:hover {
color: var(--theme-ui-colors-purple-40, #b17acc);
-webkit-text-decoration: underline;
text-decoration: underline;
}
.css-tu9on4:hover,
.css-tu9on4:focus {
color: var(--theme-ui-colors-purple-60, #663399);
-webkit-transition: all 250ms
cubic-bezier(0.4, 0, 0.2, 1);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-text-decoration: none;
text-decoration: none;
}</style
><a class="css-tu9on4" href="/docs/">
<!-- -->Documentation</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/quick-start/">
<!-- -->Quick Start</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/tutorial/">
<!-- -->Tutorial</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/how-to/">
<!-- -->How-To Guides</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/reference/">
<!-- -->Reference Guides</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/conceptual/">
<!-- -->Conceptual Guides</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/reference/gatsby-cli/">
<!-- -->Gatsby CLI</a
>
</li>
<style data-emotion-css="1hrdhpc">
.css-1hrdhpc {
font-size: 0.875rem;
line-height: 1.25;
margin-top: 1.25rem;
}
.css-1hrdhpc:not(:last-of-type) {
margin-bottom: 0.25rem;
}
</style>
<li class="css-1hrdhpc">
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/gatsbyjs"
class="css-tu9on4"
><style data-emotion-css="f0hjtx">
.css-f0hjtx {
fill: var(--theme-ui-colors-grey-50, #78757a);
font-size: 0.9em;
margin-right: 0.5rem;
}</style
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 496 512"
class="css-f0hjtx"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
></path>
</svg>
<!-- -->Github</a
>
</li>
</ul>
</li>
<li class="css-q7vzzb">
<h2 class="css-lr5hez">
<button aria-expanded="false" class="css-1qjgsvq">
Gatsby Cloud<span aria-hidden="true" class="css-1gzf20k"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></svg
></span>
</button>
</h2>
<ul class="css-1l1mtm3">
<li class="css-1sncdea">
<a class="css-tu9on4" href="/cloud/">
<!-- -->Why Gatsby Cloud?</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/support/">
<!-- -->Support</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/integrations/">
<!-- -->Integrations
</a>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/guides/all">
<!-- -->Guides</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/pricing/">
<!-- -->Pricing</a
>
</li>
<li class="css-1hrdhpc">
<a class="css-tu9on4" href="/dashboard"
><svg
width="14"
height="13"
viewBox="0 0 14 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="css-f0hjtx"
>
<path
d="M6.33301 3.16667L5.39967 4.1L7.13301 5.83333H0.333008V7.16667H7.13301L5.39967 8.9L6.33301 9.83333L9.66634 6.5L6.33301 3.16667ZM12.333 11.1667H6.99967V12.5H12.333C13.0663 12.5 13.6663 11.9 13.6663 11.1667V1.83333C13.6663 1.1 13.0663 0.5 12.333 0.5H6.99967V1.83333H12.333V11.1667Z"
fill="#78757A"
></path>
</svg>
<!-- -->Log in</a
>
</li>
</ul>
</li>
<li class="css-q7vzzb">
<h2 class="css-lr5hez">
<button aria-expanded="false" class="css-1qjgsvq">
Features<span aria-hidden="true" class="css-1gzf20k"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></svg
></span>
</button>
</h2>
<ul class="css-1l1mtm3">
<li class="css-1sncdea">
<a class="css-tu9on4" href="/features/">
<!-- -->Comparison</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/plugins/">
<!-- -->Plugins</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/themes/">
<!-- -->Themes</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/docs/recipes/">
<!-- -->Recipes</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/starters/">
<!-- -->Starters</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/use-cases/">
<!-- -->Use Cases</a
>
</li>
</ul>
</li>
<li class="css-q7vzzb">
<h2 class="css-lr5hez">
<button aria-expanded="false" class="css-1qjgsvq">
Community<span aria-hidden="true" class="css-1gzf20k"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></svg
></span>
</button>
</h2>
<ul class="css-1l1mtm3">
<li class="css-1sncdea">
<a class="css-tu9on4" href="/contributing/">
<!-- -->Contributing</a
>
</li>
<li class="css-1sncdea">
<a
target="_blank"
rel="noopener noreferrer"
href="https://store.gatsbyjs.org/"
class="css-tu9on4"
>
<!-- -->Swag Store</a
>
</li>
<li class="css-1sncdea">
<a
class="css-tu9on4"
href="/contributing/code-of-conduct/"
>
<!-- -->Code of Conduct</a
>
</li>
<li class="css-1sncdea">
<a
class="css-tu9on4"
href="/contributing/gatsby-style-guide/"
>
<!-- -->Style Guide</a
>
</li>
<li class="css-1sncdea">
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.twitch.tv/gatsbyjs"
class="css-tu9on4"
>
<!-- -->Live Streams</a
>
</li>
</ul>
</li>
<li class="css-q7vzzb">
<h2 class="css-lr5hez">
<button aria-expanded="false" class="css-1qjgsvq">
Events<span aria-hidden="true" class="css-1gzf20k"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></svg
></span>
</button>
</h2>
<ul class="css-1l1mtm3">
<li class="css-1sncdea">
<a class="css-tu9on4" href="/resources/webinars/">
<!-- -->Webinars</a
>
</li>
<li class="css-1sncdea">
<a
target="_blank"
rel="noopener noreferrer"
href="https://gatsbyconf.com/"
class="css-tu9on4"
>
<!-- -->GatsbyConf 2022</a
>
</li>
</ul>
</li>
<li class="css-q7vzzb">
<h2 class="css-lr5hez">
<button aria-expanded="false" class="css-1qjgsvq">
Company<span aria-hidden="true" class="css-1gzf20k"
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></svg
></span>
</button>
</h2>
<ul class="css-1l1mtm3">
<li class="css-1sncdea">
<a class="css-tu9on4" href="/about/"> <!-- -->About us</a>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/blog/"> <!-- -->Blog</a>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/contact-us/">
<!-- -->Contact Us</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/design-labs/">
<!-- -->Design Labs</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/security/">
<!-- -->Security</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/careers/">
<!-- -->Careers</a
>
</li>
<li class="css-1sncdea">
<a class="css-tu9on4" href="/partners/">
<!-- -->Partners</a
>
</li>
</ul>
</li>
</ul>
</nav>
<style data-emotion-css="17c8neb">
.css-17c8neb {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
color: var(--theme-ui-colors-grey-50, #78757a);
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 0.875rem;
margin-bottom: 3rem;
margin-top: 1.5rem;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
@media (min-width: 750px) {
.css-17c8neb {
border-top: 1px solid var(--theme-ui-colors-grey-20, #f0f0f2);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
padding-top: 3rem;
}
}
</style>
<footer class="css-17c8neb">
<style data-emotion-css="1rewx2h">
.css-1rewx2h {
font-size: 0.75rem;
margin-top: 0.75rem;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
@media (min-width: 750px) {
.css-1rewx2h {
margin-top: 0;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
}
</style>
<div class="css-1rewx2h">
©
<!-- -->2022<!-- -->
Gatsby, Inc.
</div>
<style data-emotion-css="rczhnp">
.css-rczhnp {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
margin-bottom: 0.5rem;
}
.css-rczhnp > a:not(:last-of-type) {
margin-right: 1.5rem;
}
@media (min-width: 750px) {
.css-rczhnp {
margin-bottom: 0;
}
}
</style>
<div class="css-rczhnp">
<a class="css-tu9on4" href="/accessibility-statement"
>Accessibility Statement</a
><a class="css-tu9on4" href="/guidelines/logo"
>Brand Guidelines</a
>
</div>
<div class="css-rczhnp">
<a class="css-tu9on4" href="/terms-of-use">Terms of Use</a
><a class="css-tu9on4" href="/privacy-policy">Privacy Policy</a>
</div>
</footer>
</div>
</div>
</div>
<div
id="gatsby-announcer"
style="
position: absolute;
top: 0;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
"
aria-live="assertive"
aria-atomic="true"
></div>
</div>
<script id="gatsby-script-loader">
/*<![CDATA[*/ window.pagePath =
"/blog/robinson-henry-p-c-award-winning-law-firm-sets-industry-gold-standard-with-gatsby/";
window.___webpackCompilationHash = "f5623174348da09f6abc"; /*]]>*/
</script>
<script id="gatsby-chunk-mapping">
/*<![CDATA[*/ window.___chunkMapping = {
polyfill: ["/polyfill-9c4764e16082ab1d5a4a.js"],
app: ["/app-877287f24d303716281a.js"],
"gatsby-plugin-image": ["/gatsby-plugin-image-717947c6f8d1dfec8f42.js"],
"intersection-observer-polyfill": [
"/intersection-observer-polyfill-b51e583476be14fdc7b6.js",
],
"object-fit-polyfill": ["/object-fit-polyfill-2ed1015a95d9da6f44ac.js"],
"matchall-polyfill": ["/matchall-polyfill-35063fe7ffd22028b1f9.js"],
"component---dashboard-src-pages-content-sync-js": [
"/component---dashboard-src-pages-content-sync-js-86ed3bcdbc099feb8b3e.js",
],
"component---dashboard-src-pages-dashboard-js": [
"/component---dashboard-src-pages-dashboard-js-52a4854bd8f15745b711.js",
],
"component---dashboard-src-pages-frameable-js": [
"/component---dashboard-src-pages-frameable-js-186220cc732b6216c4cb.js",
],
"component---dashboard-src-pages-site-create-js": [
"/component---dashboard-src-pages-site-create-js-496540d14186b4346854.js",
],
"component---src-pages-404-js": [
"/component---src-pages-404-js-38b1ca1609176ef6f0d1.js",
],
"component---src-pages-agencies-contentful-agency-slug-tsx": [
"/component---src-pages-agencies-contentful-agency-slug-tsx-4fab0d34526bcc735295.js",
],
"component---src-pages-agencies-index-tsx": [
"/component---src-pages-agencies-index-tsx-0c9c9c20ce2d9cc98b86.js",
],
"component---src-pages-agencies-submissions-tsx": [
"/component---src-pages-agencies-submissions-tsx-2c06804bfde8cf3f6713.js",
],
"component---src-pages-contentful-rich-text-page-slug-js": [
"/component---src-pages-contentful-rich-text-page-slug-js-c8b14c2cd01ac7460b0b.js",
],
"component---src-pages-design-labs-index-js": [
"/component---src-pages-design-labs-index-js-cbe18c6fceabc20d3be1.js",
],
"component---src-pages-salary-calculator-index-js": [
"/component---src-pages-salary-calculator-index-js-ffbee125c52e63144a9b.js",
],
"component---src-pages-support-js": [
"/component---src-pages-support-js-2ac103ab1d70370fbaad.js",
],
"component---src-pages-terms-of-use-js": [
"/component---src-pages-terms-of-use-js-7b2a96a21d55d00271b3.js",
],
"component---src-templates-blog-index-js": [
"/component---src-templates-blog-index-js-aaa9099fc6bee6fc47b3.js",
],
"component---src-templates-blog-post-js": [
"/component---src-templates-blog-post-js-d45e3862d6d3c6f184cf.js",
],
"component---src-templates-blog-tag-js": [
"/component---src-templates-blog-tag-js-d6d454ed3a3b66b1695e.js",
],
"component---src-templates-blog-tags-js": [
"/component---src-templates-blog-tags-js-bd1b2ca53e70eb5c7412.js",
],
"component---src-templates-careers-index-js": [
"/component---src-templates-careers-index-js-e95b4a5a59ddd7a81b68.js",
],
"component---src-templates-careers-job-posting-js": [
"/component---src-templates-careers-job-posting-js-28e2bf90a026d8d344e3.js",
],
"component---src-templates-contributors-author-js": [
"/component---src-templates-contributors-author-js-ab6632b1d65ef88bc20e.js",
],
"component---src-templates-docs-api-reference-js": [
"/component---src-templates-docs-api-reference-js-a0bd713027f0933f9318.js",
],
"component---src-templates-docs-doc-section-js": [
"/component---src-templates-docs-doc-section-js-bc1ba1c2b75689cd110a.js",
],
"component---src-templates-docs-doc-type-js": [
"/component---src-templates-docs-doc-type-js-c708a812887862c07921.js",
],
"component---src-templates-docs-index-js": [
"/component---src-templates-docs-index-js-14f7f0813e88dc31d4ff.js",
],
"component---src-templates-features-cms-js": [
"/component---src-templates-features-cms-js-6570378334732763d7e3.js",
],
"component---src-templates-features-feature-comparison-template-js": [
"/component---src-templates-features-feature-comparison-template-js-5add9f14e51d32744fb7.js",
],
"component---src-templates-features-index-js": [
"/component---src-templates-features-index-js-6bc993d182ed9ac22262.js",
],
"component---src-templates-features-jamstack-js": [
"/component---src-templates-features-jamstack-js-9a606de4d3e971537fb2.js",
],
"component---src-templates-gatsby-days-details-js": [
"/component---src-templates-gatsby-days-details-js-d298fe7455f52a6712c6.js",
],
"component---src-templates-gatsby-days-index-js": [
"/component---src-templates-gatsby-days-index-js-34fcd564f5dde48b083b.js",
],
"component---src-templates-guide-default-index-js": [
"/component---src-templates-guide-default-index-js-9c39c8b23b2004bfdf3a.js",
],
"component---src-templates-guide-react-index-js": [
"/component---src-templates-guide-react-index-js-a92c6572d08708718855.js",
],
"component---src-templates-guidelines-color-js": [
"/component---src-templates-guidelines-color-js-60e9290d3b97aad86a1e.js",
],
"component---src-templates-guidelines-logo-js": [
"/component---src-templates-guidelines-logo-js-bf8acca55881c9641f4d.js",
],
"component---src-templates-how-it-works-index-js": [
"/component---src-templates-how-it-works-index-js-cfd0c238d3ba29add776.js",
],
"component---src-templates-landing-page-index-js": [
"/component---src-templates-landing-page-index-js-2480a141ac632ceb03da.js",
],
"component---src-templates-languages-index-js": [
"/component---src-templates-languages-index-js-989990ee8c3e10b612a7.js",
],
"component---src-templates-page-js": [
"/component---src-templates-page-js-641250d64deca66653a7.js",
],
"component---src-templates-plugins-index-js": [
"/component---src-templates-plugins-index-js-771bd1506137fcce6609.js",
],
"component---src-templates-plugins-plugin-readme-js": [
"/component---src-templates-plugins-plugin-readme-js-6f65f241773f2c9c490c.js",
],
"component---src-templates-pricing-index-js": [
"/component---src-templates-pricing-index-js-2fd2f3fc0075b80c5ab0.js",
],
"component---src-templates-privacy-policy-index-js": [
"/component---src-templates-privacy-policy-index-js-9280a2854bdc7f5d6a70.js",
],
"component---src-templates-self-service-landing-page-index-js": [
"/component---src-templates-self-service-landing-page-index-js-7224147edc2fee3f66cd.js",
],
"component---src-templates-showcase-details-js": [
"/component---src-templates-showcase-details-js-3ea1049b5f800800e103.js",
],
"component---src-templates-showcase-index-js": [
"/component---src-templates-showcase-index-js-778b05d969135a2bd764.js",
],
"component---src-templates-starters-community-submissions-tsx": [
"/component---src-templates-starters-community-submissions-tsx-494499618616d733446f.js",
],
"component---src-templates-starters-details-js": [
"/component---src-templates-starters-details-js-79a22a122974d93c1391.js",
],
"component---src-templates-starters-index-js": [
"/component---src-templates-starters-index-js-f61cb75c59db31cb46f2.js",
],
"component---src-templates-use-cases-index-js": [
"/component---src-templates-use-cases-index-js-0714f6bda3de12f052fe.js",
],
"component---src-templates-use-cases-landing-page-js": [
"/component---src-templates-use-cases-landing-page-js-6fcb53301c3d243ab1de.js",
],
"billing-chunk": ["/billing-chunk-11ad044b6e3c5286df8d.js"],
"deploynow-site-chunk": [
"/deploynow-site-chunk-730293c2fd695ad52fba.js",
],
"creationtype-site-chunk": [
"/creationtype-site-chunk-b0d931b2efc015886310.js",
],
"import-site-chunk": ["/import-site-chunk-c4187c3401b82d1fb2b4.js"],
"site-information-chunk": [
"/site-information-chunk-dc06279c6baffeb87397.js",
],
"organization-detail-chunk": [
"/organization-detail-chunk-3eb53579ac98d0c3aba7.js",
],
"build-detail-chunk": ["/build-detail-chunk-d75e064fe0f212e51493.js"],
"build-logs-chunk": ["/build-logs-chunk-9e17f8cfbd3f97c22fdf.js"],
yup: [],
}; /*]]>*/
</script>
<script src="/polyfill-9c4764e16082ab1d5a4a.js" nomodule=""></script>
<script src="/app-877287f24d303716281a.js" async=""></script>
<script
src="/dc6a8720040df98778fe970bf6c000a41750d3ae-d422182a7223c5fda13f.js"
async=""
></script>
<script src="/framework-05b9bd33a726a2540699.js" async=""></script>
<script src="/webpack-runtime-31d8e000dbeea541211e.js" async=""></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script>
(function () {
try {
if (document.cookie && document.cookie.indexOf("isLoggedIn=1") > -1) {
document.documentElement.classList.add("logged-in-on-page-load");
}
} catch (err) {}
})();
</script>
<title>Pricing – Vercel</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="en" http-equiv="Content-Language" />
<link href="https://vercel.com/pricing" rel="canonical" />
<link
crossorigin="anonymous"
href="https://assets.vercel.com"
rel="preconnect"
/>
<link
crossorigin="anonymous"
href="https://avatars.githubusercontent.com"
rel="preconnect"
/>
<meta content="summary_large_image" name="twitter:card" />
<meta content="@vercel" name="twitter:site" />
<meta
content="https://assets.vercel.com/image/upload/front/vercel/dps.png"
name="twitter:image"
/>
<meta content="Pricing – Vercel" property="og:title" />
<meta content="https://vercel.com/pricing" property="og:url" />
<meta
content="The fastest frontend platform for deploying Next.js, Create React App, and more. Plans starting at $0/month."
name="description"
/>
<meta
content="The fastest frontend platform for deploying Next.js, Create React App, and more. Plans starting at $0/month."
property="og:description"
/>
<meta
content="https://assets.vercel.com/image/upload/front/vercel/dps.png"
property="og:image"
/>
<meta
content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"
name="robots"
/>
<meta content="Vercel" name="apple-mobile-web-app-title" />
<meta content="var(--geist-background)" name="theme-color" />
<meta content="#000000" name="msapplication-TileColor" />
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/57x57.png"
rel="apple-touch-icon"
sizes="57x57"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/60x60.png"
rel="apple-touch-icon"
sizes="60x60"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/72x72.png"
rel="apple-touch-icon"
sizes="72x72"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/76x76.png"
rel="apple-touch-icon"
sizes="76x76"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/114x114.png"
rel="apple-touch-icon"
sizes="114x114"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/120x120.png"
rel="apple-touch-icon"
sizes="120x120"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/144x144.png"
rel="apple-touch-icon"
sizes="144x144"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/152x152.png"
rel="apple-touch-icon"
sizes="152x152"
/>
<link
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/180x180.png"
rel="apple-touch-icon"
sizes="180x180"
/>
<link
href="https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico"
rel="icon shortcut"
type="image/x-icon"
/>
<link fetchpriority="low" href="/site.webmanifest" rel="manifest" />
<link
color="#000000"
fetchpriority="low"
href="https://assets.vercel.com/image/upload/front/favicon/vercel/safari-pinned-tab.svg"
rel="mask-icon"
/>
<link
href="/atom"
rel="alternate"
title="Vercel News"
type="application/atom+xml"
/>
<script>
if (
!window.newVisit &&
document.cookie &&
document.cookie.indexOf("beenHere=1") !== -1
) {
document.documentElement.classList.add("inter");
} else {
window.newVisit = true;
}
setTimeout(function () {
document.cookie =
"beenHere=1;samesite=lax;expires=" +
new Date(Date.now() + 31 * 3600 * 24 * 1000).toGMTString();
});
</script>
<link
as="font"
crossorigin="anonymous"
href="https://assets.vercel.com/raw/upload/v1660068731/fonts/4/Inter.var.latin.woff2"
rel="preload"
type="font/woff2"
/>
<script>
(function () {
try {
if (
+(localStorage.getItem("banner-hidden-nextjs-conf-2022") || "0")
) {
document.documentElement.classList.add("banner-hidden");
}
} catch (err) {}
})();
</script>
<script>
(function () {
document.documentElement.classList.add("has-banner");
})();
</script>
<script>
var w = window;
var good = w.CSS && CSS.supports("color", "var(--v)");
try {
const i = 1;
} catch (e) {
good = 0;
}
if (!good && (!w.localStorage || !localStorage.getItem("ignore-browser")))
w.location = "/old-browser.html";
</script>
<meta name="next-head-count" content="38" />
<link
rel="preload"
href="/_next/static/css/bda65ee872e0a524.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/bda65ee872e0a524.css"
data-n-g=""
/>
<link
rel="preload"
href="/_next/static/css/704a7fe2a3e051c0.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/704a7fe2a3e051c0.css"
data-n-p=""
/>
<link
rel="preload"
href="/_next/static/css/f1483055088364e4.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/f1483055088364e4.css"
data-n-p=""
/>
<noscript data-n-css=""></noscript>
<script
defer=""
nomodule=""
src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
></script>
<script
src="/_next/static/chunks/webpack-6c0bc4262d231ac9.js"
defer=""
></script>
<script
src="/_next/static/chunks/framework-a02a547a58655d0b.js"
defer=""
></script>
<script
src="/_next/static/chunks/main-7839b12cd870e15c.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/_app-6f166b6ad14d4b01.js"
defer=""
></script>
<script
src="/_next/static/chunks/88637-f9d7add52e6642a5.js"
defer=""
></script>
<script
src="/_next/static/chunks/147-f89730c06366bc5c.js"
defer=""
></script>
<script
src="/_next/static/chunks/17827-2864d6c593126648.js"
defer=""
></script>
<script
src="/_next/static/chunks/96329-48b77bc724705085.js"
defer=""
></script>
<script
src="/_next/static/chunks/64782-148e945642d23017.js"
defer=""
></script>
<script
src="/_next/static/chunks/93005-92fd709eae2ae219.js"
defer=""
></script>
<script
src="/_next/static/chunks/86861-ca5c78334ffeb2d8.js"
defer=""
></script>
<script
src="/_next/static/chunks/90053-9d6f4bf16d4a2659.js"
defer=""
></script>
<script
src="/_next/static/chunks/19641-885cf861605e399e.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/pricing-b403b8eb5f7ac26b.js"
defer=""
></script>
<script
src="/_next/static/Jb24F06WvMTM0VNZzx2LJ/_buildManifest.js"
defer=""
></script>
<script
src="/_next/static/Jb24F06WvMTM0VNZzx2LJ/_ssgManifest.js"
defer=""
></script>
<style id="__jsx-1558625419">
@media screen and (min-width: 961px) {
.stack.jsx-1558625419 > * + * {
margin-left: 8px;
}
}
@media screen and (min-width: 601px) and (max-width: 960px) {
.stack.jsx-1558625419 > * + * {
margin-left: 8px;
}
}
@media screen and (max-width: 600px) {
.stack.jsx-1558625419 > * + * {
margin-left: 8px;
}
}
</style>
<style id="__jsx-3685804679">
@media screen and (min-width: 961px) {
.stack.jsx-3685804679 > * + * {
margin-left: 4px;
}
}
@media screen and (min-width: 601px) and (max-width: 960px) {
.stack.jsx-3685804679 > * + * {
margin-left: 4px;
}
}
@media screen and (max-width: 600px) {
.stack.jsx-3685804679 > * + * {
margin-left: 4px;
}
}
</style>
<style id="__jsx-2923788466">
@media screen and (min-width: 961px) {
.stack.jsx-2923788466 > * + * {
}
}
@media screen and (min-width: 601px) and (max-width: 960px) {
.stack.jsx-2923788466 > * + * {
}
}
@media screen and (max-width: 600px) {
.stack.jsx-2923788466 > * + * {
}
}
</style>
<style id="__jsx-917344996">
@media screen and (min-width: 961px) {
.stack.jsx-917344996 > * + * {
margin-top: 16px;
}
}
@media screen and (min-width: 601px) and (max-width: 960px) {
.stack.jsx-917344996 > * + * {
margin-top: 16px;
}
}
@media screen and (max-width: 600px) {
.stack.jsx-917344996 > * + * {
margin-top: 16px;
}
}
</style>
<style id="__jsx-1949794864">
@media screen and (min-width: 961px) {
.stack.jsx-1949794864 > * + * {
margin-left: 24px;
}
}
@media screen and (min-width: 601px) and (max-width: 960px) {
.stack.jsx-1949794864 > * + * {
margin-top: 40px;
}
}
@media screen and (max-width: 600px) {
.stack.jsx-1949794864 > * + * {
margin-top: 32px;
}
}
</style>
<style id="__jsx-3907808361">
small.jsx-3907808361 {
font-weight: 700;
text-transform: uppercase;
}
</style>
<style id="__jsx-499702677">
.geist-container.jsx-499702677 > * {
--gap-ratio: 1;
}
</style>
<style id="__jsx-712099163">
@media screen and (min-width: 961px) {
.stack.jsx-712099163 > * + * {
margin-top: 8px;
}
}
@media screen and (min-width: 601px) and (max-width: 960px) {
.stack.jsx-712099163 > * + * {
margin-top: 8px;
}
}
@media screen and (max-width: 600px) {
.stack.jsx-712099163 > * + * {
margin-top: 8px;
}
}
</style>
<style id="__jsx-2453764976">
@media screen and (min-width: 961px) {
.stack.jsx-2453764976 > * + * {
margin-left: 12px;
}
}
@media screen and (min-width: 601px) and (max-width: 960px) {
.stack.jsx-2453764976 > * + * {
margin-left: 12px;
}
}
@media screen and (max-width: 600px) {
.stack.jsx-2453764976 > * + * {
margin-left: 12px;
}
}
</style>
<style id="__jsx-2933621141">
p.jsx-2933621141 {
font-weight: 800;
text-transform: none;
}
</style>
<style id="__jsx-1033220754">
p.jsx-1033220754 {
text-transform: none;
}
</style>
<style id="__jsx-1668268191">
.button.jsx-1668268191 {
--button-fg: var(--themed-fg);
--button-bg: var(--themed-bg);
--button-border: var(--themed-border);
}
.button.jsx-1668268191:hover,
.button.jsx-1668268191:focus,
.button.jsx-1668268191:active {
--button-fg-hover: var(--button-bg);
--button-bg-hover: transparent;
--button-border-hover: var(--button-bg);
}
</style>
<style id="__jsx-1068715251">
.button.jsx-1068715251 {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 0;
text-align: center;
text-decoration: none;
line-height: 38px;
white-space: nowrap;
font-weight: 500;
font-family: var(--font-sans);
min-width: 200px;
height: 50px;
padding: 0 25px 0 25px;
-webkit-border-radius: var(--geist-radius);
-moz-border-radius: var(--geist-radius);
border-radius: var(--geist-radius);
font-size: 1rem;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0;
color: var(--button-fg);
background-color: var(--button-bg);
border: 1px solid var(--button-border);
-webkit-transition: all.2s ease;
-moz-transition: all.2s ease;
-o-transition: all.2s ease;
transition: all.2s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
overflow: hidden;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.button.geist-themed.geist-ghost.jsx-1068715251 {
--button-fg-hover: var(--geist-foreground);
--button-bg-hover: transparent;
--button-border-hover: transparent;
}
.button.geist-themed.geist-secondary.jsx-1068715251 {
--button-fg: var(--accents-5);
--button-bg: var(--geist-background);
--button-border: var(--accents-2);
}
.button.geist-themed.geist-secondary.shadow.jsx-1068715251 {
--button-border: transparent;
}
.button.geist-themed.geist-secondary.jsx-1068715251:not(.shadow):hover,
.button.geist-themed.geist-secondary.jsx-1068715251:not(.shadow):focus,
.button.geist-themed.geist-secondary.jsx-1068715251:not(.shadow):active {
--button-fg-hover: var(--geist-foreground);
--button-bg-hover: var(--geist-background);
--button-border-hover: var(--geist-foreground);
}
.button.shadow.jsx-1068715251:hover,
.button.shadow.jsx-1068715251:focus,
.button.shadow.jsx-1068715251:active {
--button-fg-hover: var(--button-fg);
--button-bg-hover: var(--button-bg);
--button-border-hover: var(--button-border);
}
.button.small.jsx-1068715251 {
min-width: auto;
height: 24px;
line-height: 22px;
padding: 0 10px 0 10px;
}
.button.small.jsx-1068715251 .icon.jsx-1068715251 {
left: 11px;
right: auto;
}
.button.medium.jsx-1068715251 {
min-width: auto;
height: 32px;
line-height: 0;
font-size: 0.875rem;
padding: 6px 12px 6px 12px;
}
@media only screen and (max-device-width: 780px) and (-webkit-min-device-pixel-ratio: 0) {
button.jsx-1068715251 {
}
}
.button.shadow.jsx-1068715251 {
font-weight: 400;
-webkit-box-shadow: var(--shadow-small);
-moz-box-shadow: var(--shadow-small);
box-shadow: var(--shadow-small);
}
.button.jsx-1068715251 .text.jsx-1068715251 {
position: relative;
z-index: 1;
margin-left: 0;
}
.button.jsx-1068715251 .icon.jsx-1068715251 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
top: 0;
bottom: 0;
z-index: 1;
left: 22px;
right: auto;
color: var(--button-fg);
}
.button.medium.jsx-1068715251 .icon.jsx-1068715251 {
left: 15px;
right: auto;
}
.button.auto-size.jsx-1068715251 .icon.jsx-1068715251 svg {
height: 20px;
width: 20px;
}
.button.icon-color.jsx-1068715251 .icon.jsx-1068715251 path {
fill: var(--button-fg);
-webkit-transition: fill.2s ease, color.2s ease;
-moz-transition: fill.2s ease, color.2s ease;
-o-transition: fill.2s ease, color.2s ease;
transition: fill.2s ease, color.2s ease;
}
.button.icon-stroke.jsx-1068715251 .icon.jsx-1068715251 path {
stroke: var(--button-fg);
-webkit-transition: stroke.2s ease, color.2s ease;
-moz-transition: stroke.2s ease, color.2s ease;
-o-transition: stroke.2s ease, color.2s ease;
transition: stroke.2s ease, color.2s ease;
}
.button.jsx-1068715251:hover,
.button.jsx-1068715251:focus,
.button.jsx-1068715251:active,
.button.jsx-1068715251:focus-within {
color: var(--button-fg-hover);
background-color: var(--button-bg-hover);
border-color: var(--button-border-hover);
}
.button.jsx-1068715251:hover .icon.jsx-1068715251,
.button.jsx-1068715251:focus .icon.jsx-1068715251,
.button.jsx-1068715251:active .icon.jsx-1068715251,
.button.jsx-1068715251:focus-within .icon.jsx-1068715251 {
color: var(--button-fg-hover);
}
.button.icon-color.jsx-1068715251:hover .icon.jsx-1068715251 path,
.button.icon-color.jsx-1068715251:focus .icon.jsx-1068715251 path,
.button.icon-color.jsx-1068715251:active .icon.jsx-1068715251 path {
fill: var(--button-fg-hover);
}
.button.icon-stroke.jsx-1068715251:hover .icon.jsx-1068715251 path,
.button.icon-stroke.jsx-1068715251:focus .icon.jsx-1068715251 path,
.button.icon-stroke.jsx-1068715251:active .icon.jsx-1068715251 path {
stroke: var(--button-fg-hover);
}
.button.shadow.jsx-1068715251:hover,
.button.shadow.jsx-1068715251:focus,
.button.shadow.jsx-1068715251:active {
-webkit-box-shadow: var(--shadow-medium);
-moz-box-shadow: var(--shadow-medium);
box-shadow: var(--shadow-medium);
-webkit-transform: translate3d(0px, -1px, 0px);
-moz-transform: translate3d(0px, -1px, 0px);
transform: translate3d(0px, -1px, 0px);
}
.button.disabled.jsx-1068715251 {
cursor: not-allowed;
background: var(--accents-1);
border-color: var(--accents-2);
color: var(--accents-4);
-webkit-filter: grayscale(1);
filter: grayscale(1);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.button.disabled.jsx-1068715251 .icon.jsx-1068715251 {
color: var(--accents-4);
}
.button.disabled.jsx-1068715251 .icon.jsx-1068715251 svg {
opacity: 0.4;
}
.button.disabled.icon-color.jsx-1068715251 .icon.jsx-1068715251 path {
fill: var(--accents-4);
}
.button.disabled.stroke-color.jsx-1068715251 .icon.jsx-1068715251 path {
stroke: var(--accents-4);
}
.button.disabled.shadow.jsx-1068715251:hover,
.button.disabled.shadow.jsx-1068715251:focus,
.button.disabled.shadow.jsx-1068715251:active {
-webkit-box-shadow: var(--shadow-medium);
-moz-box-shadow: var(--shadow-medium);
box-shadow: var(--shadow-medium);
-webkit-transform: unset;
-moz-transform: unset;
-ms-transform: unset;
-o-transform: unset;
transform: unset;
}
.button.loading.jsx-1068715251 {
background: var(--accents-1);
border-color: var(--accents-2);
color: var(--accents-4);
cursor: default;
pointer-events: none;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.button.loading.jsx-1068715251 .text.jsx-1068715251 {
visibility: hidden;
}
.button.loading.jsx-1068715251 .loading-dots.jsx-1068715251 {
position: absolute;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
</style>
<style id="__jsx-3b89f5549ccc7499">
.closing.jsx-3b89f5549ccc7499 {
background: var(--custom-background, var(--geist-background));
padding: -webkit-calc(1.5 * var(--geist-gap-double)) 0;
padding: -moz-calc(1.5 * var(--geist-gap-double)) 0;
padding: calc(1.5 * var(--geist-gap-double)) 0;
border-top: 1px solid var(--accents-2);
}
.closing-buttons.jsx-3b89f5549ccc7499 {
margin-left: var(--geist-gap-double);
}
@media (max-width: 960px) {
.closing.jsx-3b89f5549ccc7499 {
padding: var(--geist-gap-double) 0;
}
.closing.jsx-3b89f5549ccc7499 .text {
text-align: center;
}
.closing-buttons.jsx-3b89f5549ccc7499 {
max-width: 300px;
margin: var(--geist-gap-half) auto;
}
}
</style>
</head>
<body>
<a
class="geist-sr-only"
href="#reach-skip-nav"
data-reach-skip-link=""
data-reach-skip-nav-link=""
>Skip to content</a
>
<div id="__next">
<script>
!(function () {
try {
var d = document.documentElement,
c = d.classList;
c.remove("light-theme", "dark-theme");
var e = localStorage.getItem("zeit-theme");
if ("system" === e || (!e && true)) {
var t = "(prefers-color-scheme: dark)",
m = window.matchMedia(t);
if (m.media !== t || m.matches) {
d.style.colorScheme = "dark";
c.add("dark-theme");
} else {
d.style.colorScheme = "light";
c.add("light-theme");
}
} else if (e) {
var x = { light: "light-theme", dark: "dark-theme" };
c.add(x[e] || "");
}
if (e === "light" || e === "dark") d.style.colorScheme = e;
} catch (e) {}
})();
</script>
<div class="debug-borders_experiment-wrapper__QN1Fa">
<div class="geist-page">
<span class="dark-theme invert-theme"></span>
<div class="screen_geist_screen__JT1Q7 pricing-page_screen__JSf_1">
<div class="banner_banner___vqIH banner_hidden__2XZ3p" role="alert">
<a
href="https://nextjs.org/conf"
rel="noopener"
target="_blank"
class="link_link__LTNaQ"
><span class="banner_title__gxIX9 geist-hide-on-mobile"></span
><span class="banner_subtitle__4q7_P"></span
><span
class="banner_link__himMz banner_link-hide-title-on-mobile__7v2kA banner_hide-title__JUo8N"
><span class="geist-show-on-mobile">Join Next.js Conf →</span
><span class="geist-hide-on-mobile"
>Join an online experience developers love. Next.js Conf
→</span
></span
></a
><button aria-label="Hide banner" class="banner_close___AkKx">
<svg
data-testid="geist-icon"
fill="none"
height="18"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="18"
style="color: currentColor"
>
<path d="M18 6L6 18" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div class="header_wrapper__S9gC_ header_noBorder__2Hvqu">
<header
class="header_header__U_Kza"
style="--full: var(--geist-page-width-with-margin)"
>
<div class="header_nav_first__I1THP">
<div>
<button
aria-label="home"
class="header_logo__6rx_B"
data-testid="header/navbar/logo"
>
<svg
aria-label="Vercel Logotype"
fill="var(--geist-foreground)"
height="26"
viewBox="0 0 284 65"
>
<path
d="M141.68 16.25c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm117.14-14.5c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm-39.03 3.5c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9v-46h9zM37.59.25l36.95 64H.64l36.95-64zm92.38 5l-27.71 48-27.71-48h10.39l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10v14.8h-9v-34h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"
></path>
</svg>
</button>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: center;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<button
class="mobile-menu_indicator__d6Glb"
data-testid="mobile-menu/trigger"
>
<div
aria-label="open menu"
class="menu-toggle_wrap__volVz"
></div>
</button>
</div>
</div>
</div>
<div class="header_nav_second__C9hMX">
<ul
class="header_nav__q5xvN header_left__Gc2zM header_visible__POQKZ"
>
<li>
<div
class="popover_details__Ua543 popover_disableTransform__KAtPr"
data-version="v1"
>
<div class="popover_summary__IkAID">
<div class="popover_trigger__wvDqH">
<button
class="geist-reset geist-kb-outline header_features-popover__l2eJ_ header_link-padding__O1xLm"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: center;
--justify: flex-start;
"
class="jsx-3685804679 stack_stack__A16oG stack"
>
<span>Features</span
><span class="header_chevron__YIJnG"
><svg
data-testid="geist-icon"
fill="none"
height="16"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="16"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg
></span>
</div>
</button>
</div>
</div>
<div
aria-hidden="true"
class="popover_menu__FJo3U"
role="menu"
></div>
</div>
</li>
<li>
<a
class="link_link__LTNaQ link_secondary__Htj2D header_link-padding__O1xLm"
href="/templates"
>Templates</a
>
</li>
<li>
<a
class="link_link__LTNaQ link_secondary__Htj2D header_link-padding__O1xLm"
href="/integrations"
>Integrations</a
>
</li>
<li>
<a
class="link_link__LTNaQ link_secondary__Htj2D header_link-padding__O1xLm"
href="/customers"
>Customers</a
>
</li>
<li>
<a
class="link_link__LTNaQ link_secondary__Htj2D header_link-padding__O1xLm header_active__yxIuk"
href="/pricing"
>Pricing</a
>
</li>
</ul>
</div>
<div class="header_nav_third__CGDCP">
<div class="header_right__7DofF header_hidden__FkiUt">
<span
class="fade-in_fade-in__UFRvA"
style="box-sizing: border-box"
><div class="logged-out-profile_wrapper__gbgi_">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/contact/sales"
>Contact</a
><a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/login"
>Login</a
><a
role="button"
tabindex="0"
href="/signup"
type="submit"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf button_small__Eazab button_invert__ESQI6"
data-geist-button=""
data-version="v1"
><span class="button_content__9hWh7">Sign Up</span></a
>
</div></span
>
</div>
</div>
</header>
</div>
<div id="reach-skip-nav" data-reach-skip-nav-content=""></div>
<div>
<div>
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-2923788466 stack_stack__A16oG stack geist-wrapper"
>
<span
aria-hidden="true"
class="geist-spacer geist-show-on-mobile"
data-version="v1"
style="margin-top: 47px"
></span
><span
aria-hidden="true"
class="geist-spacer geist-hide-on-mobile"
data-version="v1"
style="margin-top: 71px"
></span>
<div>
<h1 class="hero_title__OR9Ze">
Find a plan to power<!-- --><br
class="geist-hide-on-mobile"
/>
your projects.<!-- -->
</h1>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 15px"
></span>
<p class="hero_description__EwadB">
Get the fastest frontend cloud platform<!-- --><br
class="geist-hide-on-mobile"
/>
for teams of 1 to 1,000+.<!-- -->
</p>
</div>
<span
aria-hidden="true"
class="geist-spacer geist-show-on-mobile"
data-version="v1"
style="margin-top: 47px"
></span
><span
aria-hidden="true"
class="geist-spacer geist-hide-on-mobile"
data-version="v1"
style="margin-top: 71px"
></span>
</div>
<div class="pricing_plans-wrapper__95BQG">
<div
data-version="v1"
style="
--flex: initial;
--sm-direction: column;
--md-direction: column;
--lg-direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1949794864 stack_stack__A16oG stack"
>
<div
class="pricing_plan-card__8Q2Iu pricing_plan-card-personal__FBJhu"
>
<div
class="pricing_plan-card-header__g8BK_ pricing_plan-card-header-personal__All8V"
>
<p
class="text_wrapper__aJlSM text_s-32__lPhW6 text_w-700__BJEFg text_lh-32__iP9gT"
data-version="v1"
style="--color: var(--geist-foreground)"
>
<span class="pricing_plan-card-header-text__xEN2p"
>Hobby</span
>
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 5px"
></span>
<p
class="text_wrapper__aJlSM text_s-16__wD_tc text_w-600__hi7Y9 text_lh-24___qKPu"
data-version="v1"
style="--color: inherit"
>
<!-- --><span
class="pricing_plan-card-header-description__mdnYK"
>
<!-- -->Free<!-- --></span
>
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 5px"
></span>
<div
class="pricing_plan-card-header-description__mdnYK pricing_plan-card-header-description-personal__iKbGC"
>
<p
class="text_wrapper__aJlSM text_s-16__wD_tc text_w-600__hi7Y9 text_lh-24___qKPu"
data-version="v1"
style="--color: inherit"
>
For personal or non-commercial projects.
</p>
</div>
</div>
<div class="pricing_plan-card-body__tIAYe">
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-917344996 stack_stack__A16oG stack"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Deploy from CLI or personal git integrations
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Built-in CI/CD
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Automatic HTTPS/SSL
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Previews for every git push
</p>
</div>
</div>
</div>
<div class="pricing_plan-card-footer__iC0uW">
<a
role="button"
tabindex="0"
href="/new"
type="submit"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf geist-themed geist-default geist-default-fill button_large__FQLqa button_invert__ESQI6"
data-geist-button=""
data-version="v1"
><span
class="button_content__9hWh7 button_start___N8dd"
>Deploy Hobby Project</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" /></svg></span
></a>
</div>
</div>
<div
class="pricing_plan-card__8Q2Iu pricing_plan-card-pro__MuCSt pricing_plan-card-most-popular__yDivF"
>
<div
class="pricing_plan-card-header__g8BK_ pricing_plan-card-header-pro__HNjJH"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: center;
--justify: center;
"
class="jsx-2923788466 stack_stack__A16oG stack pricing_plan-card-header-pill__5iDNw"
>
<p
class="text_wrapper__aJlSM pricing_plan-card-header-pill-text__Nnfjb text_s-14__COjdp text_w-700__BJEFg text_lh-20__QJq5X"
data-version="v1"
style="--color: var(--geist-foreground)"
>
Most Popular
</p>
</div>
<p
class="text_wrapper__aJlSM text_s-32__lPhW6 text_w-700__BJEFg text_lh-32__iP9gT"
data-version="v1"
style="--color: var(--geist-foreground)"
>
<span class="pricing_plan-card-header-text__xEN2p"
>Pro</span
>
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 5px"
></span>
<p
class="text_wrapper__aJlSM text_s-16__wD_tc text_w-600__hi7Y9 text_lh-24___qKPu"
data-version="v1"
style="--color: inherit"
>
<!-- --><span
class="pricing_plan-card-header-description__mdnYK"
>
<!-- -->$20 per user / month<!-- --></span
>
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 5px"
></span>
<div
class="pricing_plan-card-header-description__mdnYK pricing_plan-card-header-description-pro__nuHoc"
>
<p
class="text_wrapper__aJlSM text_s-16__wD_tc text_w-600__hi7Y9 text_lh-24___qKPu"
data-version="v1"
style="--color: inherit"
>
For small teams focused on collaboration.
</p>
</div>
</div>
<div class="pricing_plan-card-body__tIAYe">
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-917344996 stack_stack__A16oG stack"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Up to 1 TB of bandwidth
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Unlimited function requests &amp; 1000 GB-hours of
execution
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Dynamic edge caching
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Email support
</p>
</div>
</div>
</div>
<div class="pricing_plan-card-footer__iC0uW">
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-2923788466 stack_stack__A16oG stack"
>
<button
type="button"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf geist-themed geist-success geist-success-fill button_large__FQLqa button_invert__ESQI6"
data-geist-button=""
data-version="v1"
>
<span
class="button_content__9hWh7 button_start___N8dd"
>Start free trial</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" /></svg
></span>
</button>
</div>
</div>
</div>
<div
class="pricing_plan-card__8Q2Iu pricing_plan-card-enterprise__JiGCc"
>
<div
class="pricing_plan-card-header__g8BK_ pricing_plan-card-header-enterprise__t0gUZ"
>
<p
class="text_wrapper__aJlSM text_s-32__lPhW6 text_w-700__BJEFg text_lh-32__iP9gT"
data-version="v1"
style="--color: var(--geist-foreground)"
>
<span class="pricing_plan-card-header-text__xEN2p"
>Enterprise</span
>
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 5px"
></span>
<p
class="text_wrapper__aJlSM text_s-16__wD_tc text_w-600__hi7Y9 text_lh-24___qKPu"
data-version="v1"
style="--color: inherit"
>
<!-- --><span
class="pricing_plan-card-header-description__mdnYK"
>
<!-- -->Custom<!-- --></span
>
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 5px"
></span>
<div
class="pricing_plan-card-header-description__mdnYK pricing_plan-card-header-description-enterprise__QPgpq"
>
<p
class="text_wrapper__aJlSM text_s-16__wD_tc text_w-600__hi7Y9 text_lh-24___qKPu"
data-version="v1"
style="--color: inherit"
>
For teams with more security and performance needs.
</p>
</div>
</div>
<div class="pricing_plan-card-body__tIAYe">
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-917344996 stack_stack__A16oG stack"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
SSO/SAML
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Scaled bandwidth pricing
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Isolated build infrastructure, on better hardware,
and no queues
</p>
</div>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-1558625419 stack_stack__A16oG stack"
>
<div>
<svg
data-testid="geist-icon"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #ffffff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Dedicated support manager &amp; SLAs
</p>
</div>
</div>
</div>
<div class="pricing_plan-card-footer__iC0uW">
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-2923788466 stack_stack__A16oG stack"
>
<button
type="button"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf geist-themed geist-violet geist-violet-fill button_large__FQLqa button_invert__ESQI6"
data-geist-button=""
data-version="v1"
>
<span
class="button_content__9hWh7 button_start___N8dd"
>Contact Sales</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" /></svg
></span>
</button>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 41px"
></span>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu text_center__wcieq"
data-version="v1"
style="--color: var(--accents-5)"
>
All plans include Bandwidth, Builds, and Serverless Function
Execution subject to our<!-- -->
<!-- --><a
href="/docs/platform/fair-use-policy"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_primary__8ELPN"
>Fair Use Policy<!-- --></a
>.<!-- -->
</p>
</div>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 71px"
></span>
<div class="testimonials_container__tBn70">
<div
data-version="v1"
style="
--flex: 1;
--justify-content: flex-start;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<div
data-version="v1"
style="
--flex: 1;
--justify-content: flex-start;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<div class="testimonials_testimonials-heading__KnJbZ">
<div class="tiny-heading_heading__4Znu5">
<small
style="
font-size: 0.75rem;
letter-spacing: 0.2rem;
margin-top: 0;
padding-left: 0.2rem;
color: var(--geist-foreground);
"
class="jsx-3907808361 text_text__tVl7E text_small__ke4_O geist-themed geist-secondary geist-text-no-margin text_noMargin__uy__0 text_center__uKEGZ text_themed__eHOst"
><a class="link_link__LTNaQ" href="/customers"
>Trusted by
<!-- --><br class="geist-show-on-mobile" />
the best frontend teams<!-- --></a
></small
>
</div>
</div>
<div class="testimonials_brandsTablet__jBfle">
<div class="slider_sliderContainer__FrC_N">
<div
class="slider_sliderContentWrapper__8t9tp"
style="animation-duration: 30s"
>
<div>
<div class="testimonials_brands__E_qgQ">
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="HashiCorp Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg"
width="110.16"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="McDonald’s Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg"
width="38.25"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Meta Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg"
width="127.5"
height="25.5"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Washington Post Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg"
width="177.0975"
height="27.54"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Auth0 Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg"
width="82.96000000000001"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Uber Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg"
width="58.79166666666667"
height="21.25"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Tripadvisor Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg"
width="161.5"
height="24.65"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
</div>
</div>
<div>
<div class="testimonials_brands__E_qgQ">
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="HashiCorp Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg"
width="110.16"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="McDonald’s Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg"
width="38.25"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Meta Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg"
width="127.5"
height="25.5"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Washington Post Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg"
width="177.0975"
height="27.54"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Auth0 Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg"
width="82.96000000000001"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Uber Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg"
width="58.79166666666667"
height="21.25"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Tripadvisor Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg"
width="161.5"
height="24.65"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="testimonials_brandsDesktop__T_Loj">
<div class="testimonials_brands__E_qgQ">
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="HashiCorp Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/hashicorp.svg"
width="110.16"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="McDonald’s Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/mcdonalds.svg"
width="38.25"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Meta Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/meta.svg"
width="127.5"
height="25.5"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Washington Post Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/washingtonpost.svg"
width="177.0975"
height="27.54"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Auth0 Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/auth0.svg"
width="82.96000000000001"
height="30.599999999999998"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Uber Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/uber.svg"
width="58.79166666666667"
height="21.25"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
<div class="testimonials_wrap__ajJdt">
<img
data-version="v1"
alt="Tripadvisor Logo"
srcset="
https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg 1x,
https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg 2x
"
src="https://assets.vercel.com/image/upload/front/home/new/logos/tripadvisor-horizontal.svg"
width="161.5"
height="24.65"
decoding="async"
data-nimg="future"
loading="lazy"
style="color: transparent"
/>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 71px"
></span>
<hr class="geist-hr-reset" />
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 59px"
></span>
<div
data-version="v1"
style="
--flex: initial;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-2923788466 stack_stack__A16oG stack geist-wrapper"
>
<h2
class="text_wrapper__aJlSM text_s-40__NAUDm text_w-700__BJEFg text_lh-48__Fp4Hd text_center__wcieq"
data-version="v1"
style="--color: var(--geist-foreground)"
>
Compare Plans
</h2>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 35px"
></span>
</div>
</div>
</div>
</div>
<section>
<header class="plans-table_plans-table-header__YrJjw">
<div class="geist-wrapper">
<div
data-version="v1"
style="
--flex: 1;
--justify-content: flex-start;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<div class="plans-table_plans-table-container__EpZ_6">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2923788466 stack_stack__A16oG stack"
>
<div class="plans-table_feature-column___RY3J"></div>
<div class="plans-table_plan-column-header__5BPz7">
<div
data-version="v1"
style="
--flex: 1;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-712099163 stack_stack__A16oG stack"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: flex-end;
--justify: space-between;
"
class="jsx-2923788466 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-24__CrAe_ text_w-600__hi7Y9 text_lh-32__iP9gT"
data-version="v1"
style="
--color: var(--geist-foreground);
transition: transform 0.2s;
transform: scale(1);
transform-origin: bottom left;
"
>
Hobby
</p>
<div class="plans-table_switcher__MybMq">
<button
type="submit"
style="--geist-form-height: 24px"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf button_secondary__ZQVAM button_ghost__sBWMh"
data-geist-button=""
data-version="v1"
>
<span class="button_content__9hWh7"
>Switch Plan</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="18"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="18"
style="color: currentColor"
>
<path
d="M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517"
/></svg
></span>
</button>
</div>
</div>
<a
role="button"
tabindex="0"
href="/new"
type="submit"
data-testid="pricing-page/personal"
style="--geist-form-height: 32px"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf button_invert__ESQI6"
data-geist-button=""
data-version="v1"
><span
class="button_content__9hWh7 button_start___N8dd"
>Deploy to Hobby</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="20"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="20"
style="color: currentColor"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" /></svg></span
></a>
</div>
</div>
<div
class="plans-table_plan-column-header__5BPz7 plans-table_plan-column-header-mobile-active__xegja"
>
<div
data-version="v1"
style="
--flex: 1;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-712099163 stack_stack__A16oG stack"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: flex-end;
--justify: space-between;
"
class="jsx-2923788466 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-24__CrAe_ text_w-600__hi7Y9 text_lh-32__iP9gT"
data-version="v1"
style="
--color: var(--geist-foreground);
transition: transform 0.2s;
transform: scale(1);
transform-origin: bottom left;
"
>
Pro
</p>
<div class="plans-table_switcher__MybMq">
<button
type="submit"
style="--geist-form-height: 24px"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf button_secondary__ZQVAM button_ghost__sBWMh"
data-geist-button=""
data-version="v1"
>
<span class="button_content__9hWh7"
>Switch Plan</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="18"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="18"
style="color: currentColor"
>
<path
d="M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517"
/></svg
></span>
</button>
</div>
</div>
<a
role="button"
tabindex="0"
href="/signup?next=/dashboard?createTeam=true"
type="submit"
data-testid="pricing-page/pro"
style="--geist-form-height: 32px"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf geist-themed geist-success geist-success-fill button_invert__ESQI6"
data-geist-button=""
data-version="v1"
><span
class="button_content__9hWh7 button_start___N8dd"
>Start free trial</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="20"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="20"
style="color: currentColor"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" /></svg></span
></a>
</div>
</div>
<div class="plans-table_plan-column-header__5BPz7">
<div
data-version="v1"
style="
--flex: 1;
--direction: column;
--align: stretch;
--justify: flex-start;
"
class="jsx-712099163 stack_stack__A16oG stack"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: flex-end;
--justify: space-between;
"
class="jsx-2923788466 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-24__CrAe_ text_w-600__hi7Y9 text_lh-32__iP9gT"
data-version="v1"
style="
--color: var(--geist-foreground);
transition: transform 0.2s;
transform: scale(1);
transform-origin: bottom left;
"
>
Enterprise
</p>
<div class="plans-table_switcher__MybMq">
<button
type="submit"
style="--geist-form-height: 24px"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf button_secondary__ZQVAM button_ghost__sBWMh"
data-geist-button=""
data-version="v1"
>
<span class="button_content__9hWh7"
>Switch Plan</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="18"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="18"
style="color: currentColor"
>
<path
d="M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517"
/></svg
></span>
</button>
</div>
</div>
<button
type="button"
data-testid="pricing/contact-sales-button/enterprise"
style="--geist-form-height: 32px"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf geist-themed geist-violet geist-violet-fill button_invert__ESQI6"
data-geist-button=""
data-version="v1"
>
<span
class="button_content__9hWh7 button_start___N8dd"
>Contact Sales</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="20"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="20"
style="color: currentColor"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" /></svg
></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
></span>
<hr class="geist-hr-reset" />
</header>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 71px"
></span>
<div class="geist-wrapper">
<div
data-version="v1"
style="
--flex: 1;
--justify-content: flex-start;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<div class="plans-table_plans-table-container__EpZ_6">
<table class="plans-table_table__79MdH">
<thead>
<tr>
<th class="plans-table_table-section-header__FVUaC">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: center;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<div class="plans-table_table-icon__sDs_1">
<svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path
d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"
/>
<path d="M3.27 6.96L12 12.01l8.73-5.05" />
<path d="M12 22.08V12" />
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-24__CrAe_ text_w-600__hi7Y9 text_lh-32__iP9gT"
data-version="v1"
style="--color: var(--geist-foreground)"
>
Scale
</p>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th
class="plans-table_th-row-heading__4HVvB plans-table_th-row-heading-first__GyMIH"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-500__m76xk text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Application</span
>
</th>
<th
class="plans-table_td-row-heading__AGEEp plans-table_td-mobile-active__XtfXs undefined"
></th>
<th
class="plans-table_td-row-heading__AGEEp undefined"
></th>
<th
class="plans-table_td-row-heading__AGEEp undefined"
></th>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-no-top-border___znTK plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Bandwidth</span
>
</div>
</th>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
100 GB
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1 plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
1 TB
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div></span
>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Serverless Function Execution</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
100 GB-hours
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
1,000 GB-hours
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div></span
>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Edge Middleware</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
1 million invocations
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
1 million invocations
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div></span
>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Serverless Function Execution Timeout</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
10 seconds
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
60 seconds
</p>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
900 seconds
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Multi-Region Serverless Functions</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Build Execution</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
6,000 minutes
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
24,000 minutes
</p>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Concurrent Builds</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
1
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
1
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div></span
>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Image Optimization</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
1,000 source images
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
5,000 source images
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div></span
>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Unlimited Serverless Function Invocations</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th-row-heading__4HVvB">
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-500__m76xk text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Team</span
>
</th>
<th
class="plans-table_td-row-heading__AGEEp plans-table_td-mobile-active__XtfXs"
></th>
<th class="plans-table_td-row-heading__AGEEp"></th>
<th class="plans-table_td-row-heading__AGEEp"></th>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-no-top-border___znTK plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Team Members</span
>
</div>
</th>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1"
></td>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1 plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
$20/mo per member
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Unlimited Previewers</span
><span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</th>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Remote Cache Artifact Downloads </span
><span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
10 GB
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
10 GB
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div></span
>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
10 GB
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div></span
>
</div>
</td>
</tr>
<tr>
<th class="plans-table_th-row-heading__4HVvB">
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-500__m76xk text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Business</span
>
</th>
<th
class="plans-table_td-row-heading__AGEEp plans-table_td-mobile-active__XtfXs"
></th>
<th class="plans-table_td-row-heading__AGEEp"></th>
<th class="plans-table_td-row-heading__AGEEp"></th>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-no-top-border___znTK plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Domains per Project</span
>
</div>
</th>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
50
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1 plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Unlimited
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-no-top-border__Ua3z1"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Unlimited
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Deployments per Day</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
100
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
3,000
</p>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Preview Deployment Suffix</span
><span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div>
</div></span
>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Vercel Projects Connected per Git
Repository</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
3
</p>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
60
</p>
</div>
</td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
<tr>
<th
class="plans-table_th__bqwhR plans-table_th-indent__0xWC7"
>
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Analytics</span
><span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</th>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Limited
</p>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div>
</div></span
>
</td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
</tbody>
</table>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 59px"
></span>
<table class="plans-table_table__79MdH">
<thead>
<tr>
<th class="plans-table_table-section-header__FVUaC">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: center;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<div class="plans-table_table-icon__sDs_1">
<svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path
d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-24__CrAe_ text_w-600__hi7Y9 text_lh-32__iP9gT"
data-version="v1"
style="--color: var(--geist-foreground)"
>
Security
</p>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>HTTPS/SSL by default</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>DDoS Mitigation</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Password Protected Previews</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<div
class="plans-table_plans-table-icon-light__BahOs"
>
<p
class="text_wrapper__aJlSM text_s-12__dx9hh text_lh-16__rh3gB"
data-version="v1"
style="--color: var(--geist-foreground)"
>
$
</p>
</div>
</div></span
>
</td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>SSO Protected Previews</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Custom Firewall Rules</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>SAML Single-Sign On and 2FA</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
</tbody>
</table>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 59px"
></span>
<table class="plans-table_table__79MdH">
<thead>
<tr>
<th class="plans-table_table-section-header__FVUaC">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: center;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<div class="plans-table_table-icon__sDs_1">
<svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M3 18v-6a9 9 0 0118 0v6" />
<path
d="M21 19a2 2 0 01-2 2h-1a2 2 0 01-2-2v-3a2 2 0 012-2h3zM3 19a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H3z"
/>
</svg>
</div>
<p
class="text_wrapper__aJlSM text_s-24__CrAe_ text_w-600__hi7Y9 text_lh-32__iP9gT"
data-version="v1"
style="--color: var(--geist-foreground)"
>
Support
</p>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Email Support</span
>
</div>
</th>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-foreground);
--geist-fill: currentColor;
--geist-stroke: var(--geist-background);
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-success);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>SLA for 99.99% Uptime</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Email Support SLA</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Onboarding Support</span
><span
class="tooltip_container__8oRxQ"
data-testid="legacy/tooltip-trigger"
data-version="v1"
tabindex="0"
><div
class="plans-table_plans-table-icon-wrapper__tADEu"
>
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--accents-2);
--geist-fill: currentColor;
--geist-stroke: var(--geist-foreground);
"
>
<circle
cx="12"
cy="12"
r="10"
fill="var(--geist-fill)"
/>
<path
d="M12 16v-4"
stroke="var(--geist-stroke)"
/>
<path
d="M12 8h.01"
stroke="var(--geist-stroke)"
/>
</svg></div
></span>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Advanced Support Scope</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Dedicated Customer Success Engineer</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<svg
data-testid="geist-icon"
height="22"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="22"
style="
color: var(--geist-violet);
--geist-fill: currentColor;
--geist-stroke: #fff;
"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
fill="var(--geist-fill)"
stroke="var(--geist-fill)"
/>
<path
d="M8 11.8571L10.5 14.3572L15.8572 9"
fill="none"
stroke="var(--geist-stroke)"
/>
</svg>
</td>
</tr>
<tr>
<th class="plans-table_th__bqwhR">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: flex-start;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_w-400__XA97_ text_lh-24___qKPu"
data-version="v1"
style="--color: var(--geist-foreground)"
>Code Audits &amp; Professional Services</span
>
</div>
</th>
<td class="plans-table_td__avsTB"></td>
<td
class="plans-table_td__avsTB plans-table_td-mobile-active__XtfXs"
></td>
<td class="plans-table_td__avsTB">
<div
data-version="v1"
style="
--flex: initial;
--direction: row;
--align: stretch;
--justify: center;
"
class="jsx-2453764976 stack_stack__A16oG stack"
>
<p
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-6)"
>
Custom
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 83px"
></span>
<div class="geist-wrapper">
<div
data-version="v1"
style="
--flex: 1;
--justify-content: flex-start;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<div class="pricing_partners-card__gW9wR">
<h2
class="text_wrapper__aJlSM text_s-24__CrAe_ text_w-700__BJEFg text_lh-32__iP9gT"
data-version="v1"
style="--color: var(--geist-foreground)"
>
For Partners
</h2>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 5px"
></span>
<p
class="text_wrapper__aJlSM text_s-16__wD_tc text_lh-24___qKPu"
data-version="v1"
style="--color: var(--accents-5)"
>
Apply to become an approved agency, technology partner, or
professional services partner.
</p>
<div
data-version="v1"
style="
--flex: initial;
--sm-direction: column;
--md-direction: column;
--lg-direction: row;
--sm-align: flex-start;
--md-align: flex-start;
--lg-align: center;
--justify: space-between;
"
class="jsx-2923788466 stack_stack__A16oG stack"
>
<div
class="pricing_featured-logos___5huR pricing_featured-logos-desktop__1ptRs"
>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="work-and-co"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="unlikely"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="myplanet"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="monogram"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
</div>
<div
class="pricing_featured-logos___5huR pricing_featured-logos-mobile-tablet__dtPln"
>
<div
class="pricing_featured-logos-mobile-gradient__mAo6_"
></div>
<div class="slider_sliderContainer__FrC_N">
<div
class="slider_sliderContentWrapper__8t9tp"
style="animation-duration: 30s"
>
<div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="work-and-co"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="unlikely"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="myplanet"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="monogram"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
</div>
<div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="work-and-co"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/work-and-co.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="unlikely"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/unlikely.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="myplanet"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/myplanet.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
<div class="pricing_featured-logo__Ki0Vn">
<img
data-version="v1"
alt="monogram"
sizes="100vw"
srcset="
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 640w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 750w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 828w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1080w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1200w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 1920w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 2048w,
https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg 3840w
"
src="https://assets.vercel.com/image/upload/front/partners/landing/agency-logos/monogram.svg"
decoding="async"
data-nimg="future-fill"
loading="lazy"
style="
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
object-fit: cover;
"
/>
</div>
</div>
</div>
</div>
</div>
<div class="pricing_partners-cta__8wCOS">
<a
role="button"
tabindex="0"
href="/partners"
type="submit"
class="button_base__AOyi_ reset_reset__90FTf button_button__dmey4 reset_reset__90FTf button_large__FQLqa button_invert__ESQI6"
data-geist-button=""
data-version="v1"
><span class="button_content__9hWh7"
>Become a Partner</span
><span class="button_suffix__i0gL_"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" /></svg></span
></a>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 95px"
></span>
<div class="faqs_wrapper__ymDOu">
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 35px"
></span>
<div class="geist-wrapper">
<div
data-version="v1"
style="
--flex: 1;
--justify-content: center;
--align-items: center;
"
class="jsx-499702677 geist-container"
>
<div class="faqs_faqs__EXwRA">
<p
class="text_wrapper__aJlSM text_s-48__7I9Fx text_w-700__BJEFg text_lh-56__Pfcy_ text_center__wcieq"
data-version="v1"
style="--color: var(--geist-foreground)"
>
FAQs
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 47px"
></span>
<div class="collapse_collapseGroup__twkb6" data-version="v1">
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:R3mmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:R3mmdikmH1:"
>
<span class="collapse_small__PJjBg"
>Which Vercel plan is right for me?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:R3mmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:R3mmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>Our Hobby plan is for personal, non-commercial
use. Pro is for small teams with moderate
bandwidth and collaboration requirements.
Enterprise is for teams seeking greater
performance, collaboration, and security.
<!-- --><a
href="https://vercel.com/contact/sales"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>Contact our sales team<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg
></a>
to learn more.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:R5mmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:R5mmdikmH1:"
>
<span class="collapse_small__PJjBg"
>Do you offer custom invoicing?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:R5mmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:R5mmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>Yes, we offer custom invoicing for Enterprise
customers.
<!-- --><a
href="https://vercel.com/contact/sales"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>Contact our sales team<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg
></a>
to learn more.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:R7mmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:R7mmdikmH1:"
>
<span class="collapse_small__PJjBg"
>What are the limits for each plan?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:R7mmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:R7mmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>Our limits are listed
<!-- --><a
href="https://vercel.com/docs/platform/limits"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>here<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg></a
>. Additionally, check out our
<!-- --><a
href="https://vercel.com/docs/platform/fair-use-policy"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>Fair Use Policy<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg></a
>.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:R9mmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:R9mmdikmH1:"
>
<span class="collapse_small__PJjBg"
>I went over my limits. What can I do?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:R9mmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:R9mmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>We are glad you are growing and scaling with
Vercel! Please
<!-- --><a
href="https://vercel.com/contact/sales"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>contact us<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg
></a>
to discuss your resource requirements and we can
customize a plan for your team.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:Rbmmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:RbmmdikmH1:"
>
<span class="collapse_small__PJjBg"
>Can I buy additional bandwidth?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:RbmmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:Rbmmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>Yes! Please
<!-- --><a
href="https://vercel.com/contact/sales"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>reach out<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg
></a>
and the sales team will be happy to assist.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:Rdmmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:RdmmdikmH1:"
>
<span class="collapse_small__PJjBg"
>I have a Hobby account, how do I upgrade to a paid
plan?<!-- --><span class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:RdmmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:Rdmmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>Thanks for continuing to use Vercel! Follow
<!-- --><a
href="https://vercel.com/support/articles/transferring-projects-from-hobby-to-team"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>this guide<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg
></a>
to transfer your project to a team.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:Rfmmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:RfmmdikmH1:"
>
<span class="collapse_small__PJjBg"
>Is there a limit to how many teams I can have?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:RfmmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:Rfmmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>No, there is not a limit.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:Rhmmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:RhmmdikmH1:"
>
<span class="collapse_small__PJjBg"
>I want to transfer a domain name to Vercel. Is
there a fee?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:RhmmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:Rhmmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>Potentially. Transfer fees are dependent on the
TLD and the domain renewal fee. The
domain-transfer workflow will alert you of fees
before initiating transfer.<!-- --></span
>
</p>
</div>
</div>
</div>
<div
class="collapse_collapse__0ol6h collapse_context__jZ5Do faqs_collapse__6GF36"
data-version="v1"
>
<h3 class="geist-text geist-text-no-margin h5 w-500">
<button
aria-controls="collapse-section-:Rjmmdikm:"
class="geist-reset collapse_button__yZM4w"
id="collapse-button-:RjmmdikmH1:"
>
<span class="collapse_small__PJjBg"
>How does Vercel calculate usage?<!-- --><span
class="collapse_icon__78e_S"
><svg
data-testid="geist-icon"
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
style="color: currentColor"
>
<path d="M6 9l6 6 6-6" /></svg></span
></span>
</button>
</h3>
<div
aria-labelledby="collapse-button-:RjmmdikmH1:"
class="collapse_collapseContent__rvDg0"
id="collapse-section-:Rjmmdikm:"
role="region"
style="height: 0"
>
<div>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>We calculate the total response size which
includes headers along with the number of bytes in
the body. Anything served from our servers from
your project’s domain will be counted as bandwidth
(including JSON responses for Serverless
Functions).<!-- --></span
>
</p>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>When it comes to Serverless Functions though,
GB-Hrs is calculated by multiplying the duration
that your functions ran for by the amount of
memory that was consumed by them.<!-- --></span
>
</p>
<p>
<span
class="text_wrapper__aJlSM text_s-14__COjdp text_lh-24___qKPu"
data-version="v1"
style="
--color: var(--geist-foreground);
font-size: inherit;
"
>To learn more, check out the
<!-- --><a
href="https://vercel.com/docs/platform/usage"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_highlight__3ua_9"
>Usage documentation<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg></a
>.<!-- --></span
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 119px"
></span>
</div>
<div class="dark-theme">
<div class="invert-theme">
<div
style="color: var(--geist-foreground); border-top: none"
class="jsx-3b89f5549ccc7499 closing"
>
<div class="geist-wrapper">
<div
data-version="v1"
style="
--flex: 1;
--justify-content: flex-start;
--align-items: center;
"
class="jsx-499702677 geist-container lg-row"
>
<div
data-version="v1"
style="
--flex: 1;
--justify-content: center;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<p
style="
letter-spacing: -0.02em;
color: var(
--custom-primary-text-color,
var(--geist-foreground)
);
"
class="jsx-2933621141 text_text__tVl7E text_h2__V8zux text geist-text-no-margin text_noMargin__uy__0 text_text-constant-size__TlO1K"
>
Develop.<!-- --><br class="geist-show-on-tablet" />
Preview.<!-- --><br class="geist-show-on-tablet" />
Ship.<!-- -->
</p>
<span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 11px"
></span>
<p
style="
color: var(
--custom-secondary-text-color,
var(--geist-secondary)
);
"
class="jsx-1033220754 text_text__tVl7E text_p__fjUxc geist-themed geist-secondary text geist-text-no-margin text_noMargin__uy__0 text_themed__eHOst"
>
The development platform for the best frontend teams.<!-- -->
</p>
</div>
<span
aria-hidden="true"
class="geist-spacer geist-show-on-tablet"
data-version="v1"
></span>
<div class="jsx-3b89f5549ccc7499 closing-buttons">
<div
data-version="v1"
style="
--flex: 0 0 auto;
--justify-content: flex-start;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<div
data-version="v1"
style="
--flex: 1;
--justify-content: flex-start;
--align-items: stretch;
"
class="jsx-499702677 geist-container"
>
<a
href="/new"
class="jsx-1068715251 jsx-1668268191 button icon-color geist-themed geist-success geist-success-fill"
><span class="jsx-1068715251 jsx-1668268191 text"
>Start Deploying</span
></a
><span
aria-hidden="true"
class="geist-spacer"
data-version="v1"
style="margin-top: 17px"
></span
><a
href="/try/book-a-vercel-demo?utm_source=homepage-hero&amp;utm_medium=demo-button&amp;utm_campaign=demo"
rel="noopener"
target="_blank"
class="jsx-1068715251 jsx-1668268191 button icon-color geist-themed geist-secondary geist-secondary-fill"
><span class="jsx-1068715251 jsx-1668268191 text"
>Get a Demo</span
></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--$-->
<footer class="footer_footer__CQcPM" data-version="v1">
<nav aria-label="Vercel Directory" role="navigation">
<div class="footer_logotype__Y2l5z">
<a href="/home"
><svg
aria-label="Vercel Inc."
fill="var(--geist-foreground)"
height="20"
role="img"
viewBox="0 0 283 64"
>
<path
d="M37 0l37 64H0L37 0zM159.6 34c0-10.3-7.6-17.5-18.5-17.5s-18.5 7.2-18.5 17.5c0 10.1 8.2 17.5 19.5 17.5 6.2 0 11.8-2.3 15.4-6.5l-6.8-3.9c-2.1 2.1-5.2 3.4-8.6 3.4-5 0-9.3-2.7-10.8-6.8l-.3-.7h28.3c.2-1 .3-2 .3-3zm-28.7-3l.2-.6c1.3-4.3 5.1-6.9 9.9-6.9 4.9 0 8.6 2.6 9.9 6.9l.2.6h-20.2zM267.3 34c0-10.3-7.6-17.5-18.5-17.5s-18.5 7.2-18.5 17.5c0 10.1 8.2 17.5 19.5 17.5 6.2 0 11.8-2.3 15.4-6.5l-6.8-3.9c-2.1 2.1-5.2 3.4-8.6 3.4-5 0-9.3-2.7-10.8-6.8l-.3-.7H267c.2-1 .3-2 .3-3zm-28.7-3l.2-.6c1.3-4.3 5.1-6.9 9.9-6.9 4.9 0 8.6 2.6 9.9 6.9l.2.6h-20.2zM219.3 28.3l6.8-3.9c-3.2-5-8.9-7.8-15.8-7.8-10.9 0-18.5 7.2-18.5 17.5s7.6 17.5 18.5 17.5c6.9 0 12.6-2.8 15.8-7.8l-6.8-3.9c-1.8 3-5 4.7-9 4.7-6.3 0-10.5-4.2-10.5-10.5s4.2-10.5 10.5-10.5c3.9 0 7.2 1.7 9 4.7zM282.3 5.6h-8v45h8v-45zM128.5 5.6h-9.2L101.7 36 84.1 5.6h-9.3L101.7 52l26.8-46.4zM185.1 25.8c.9 0 1.8.1 2.7.3v-8.5c-6.8.2-13.2 4-13.2 8.7v-8.7h-8v33h8V36.3c0-6.2 4.3-10.5 10.5-10.5z"
></path></svg
></a>
</div>
<div class="footer_group__2SKZl">
<input
aria-label="Open Navigation Menu"
class="footer_hidden__027FV reset_visuallyHidden__Epm6x"
id="footer-group-:R16tikm:"
type="checkbox"
/><label for="footer-group-:R16tikm:"
><h2 class="footer_header__IT1IT">Frameworks</h2></label
>
<ul class="footer_list__St1yh">
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/solutions/nextjs"
>Next.js</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/solutions/react"
>Create React App</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/solutions/svelte"
>Svelte</a
>
</li>
<li class="footer_item__RjypT">
<a
href="/guides/deploying-nuxtjs-with-vercel"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_secondary__Htj2D"
>Nuxt<!-- --></a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/solutions/gatsby"
>Gatsby</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/solutions/vue"
>Vue</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/solutions/angular"
>Angular</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/templates"
>More Frameworks</a
>
</li>
</ul>
</div>
<div class="footer_group__2SKZl">
<input
aria-label="Open Navigation Menu"
class="footer_hidden__027FV reset_visuallyHidden__Epm6x"
id="footer-group-:R1mtikm:"
type="checkbox"
/><label for="footer-group-:R1mtikm:"
><h2 class="footer_header__IT1IT">Resources</h2></label
>
<ul class="footer_list__St1yh">
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/docs"
>Documentation</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/experts"
>Experts</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/customers"
>Customers</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/guides"
>Guides</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/help"
>Help</a
>
</li>
<li class="footer_item__RjypT">
<a
href="/docs/api"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_secondary__Htj2D"
>API Reference<!-- --></a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/oss"
>OSS</a
>
</li>
<li class="footer_item__RjypT">
<a
href="/cli"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_secondary__Htj2D"
>Command-Line<!-- --></a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/integrations"
>Integrations</a
>
</li>
</ul>
</div>
<div class="footer_group__2SKZl">
<input
aria-label="Open Navigation Menu"
class="footer_hidden__027FV reset_visuallyHidden__Epm6x"
id="footer-group-:R26tikm:"
type="checkbox"
/><label for="footer-group-:R26tikm:"
><h2 class="footer_header__IT1IT">Company</h2></label
>
<ul class="footer_list__St1yh">
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/home"
>Home</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/blog"
>Blog</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/changelog"
>Changelog</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/about"
>About</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/careers"
>Careers</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/pricing"
>Pricing</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/enterprise"
>Enterprise</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/security"
>Security</a
>
</li>
<li class="footer_item__RjypT">
<a
href="https://nextjs.org/conf"
rel="noopener"
target="_blank"
class="link_link__LTNaQ link_external__NODW5 link_secondary__Htj2D"
>Next.js Conf<!-- --><svg
data-testid="geist-icon"
fill="none"
height="1em"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="1em"
class="link_externalIcon__lLA3x"
style="color: currentColor"
>
<path
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
/>
<path d="M15 3h6v6" />
<path d="M10 14L21 3" /></svg
></a>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/partners"
>Partners</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/contact"
>Contact Us</a
>
</li>
</ul>
</div>
<div class="footer_group__2SKZl">
<input
aria-label="Open Navigation Menu"
class="footer_hidden__027FV reset_visuallyHidden__Epm6x"
id="footer-group-:R2mtikm:"
type="checkbox"
/><label for="footer-group-:R2mtikm:"
><h2 class="footer_header__IT1IT">Legal</h2></label
>
<ul class="footer_list__St1yh">
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/privacy-policy"
>Privacy Policy</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/terms"
>Terms of Service</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/trademark-policy"
>Trademark Policy</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/inactivity-policy"
>Inactivity Policy</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/dmca-policy"
>DMCA Policy</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/support-terms"
>Support Terms</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/dpa"
>DPA</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/sla"
>SLA</a
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/sub-processors"
>Sub-processors</a
>
</li>
<li class="footer_item__RjypT">
<span
class="link_link__LTNaQ link_secondary__Htj2D"
role="link"
tabindex="0"
>Cookie Preferences</span
>
</li>
<li class="footer_item__RjypT">
<a
class="link_link__LTNaQ link_secondary__Htj2D"
href="/legal/event-terms-conditions"
>Event Terms and Conditions</a
>
</li>
</ul>
</div>
</nav>
<section>
<div class="footer_wrapper__z6ZwQ">
<span class="footer_copyright__nFXY7"
><span>Copyright</span> ©
<!-- -->2022<!-- -->
<!-- -->Vercel<!-- -->
Inc. All rights reserved.<!-- --></span
><span class="footer_contact__5lVzo"
><ul class="footer_social__TS_hG">
<li>
<a
aria-label="GitHub"
class="footer_github__rmvAM"
href="https://github.com/vercel"
rel="noopener"
target="_blank"
><svg
aria-label="github"
height="19"
viewBox="0 0 14 14"
width="19"
>
<path
d="M7 .175c-3.872 0-7 3.128-7 7 0 3.084 2.013 5.71 4.79 6.65.35.066.482-.153.482-.328v-1.181c-1.947.415-2.363-.941-2.363-.941-.328-.81-.787-1.028-.787-1.028-.634-.438.044-.416.044-.416.7.044 1.071.722 1.071.722.635 1.072 1.641.766 2.035.59.066-.459.24-.765.437-.94-1.553-.175-3.193-.787-3.193-3.456 0-.766.262-1.378.721-1.881-.065-.175-.306-.897.066-1.86 0 0 .59-.197 1.925.722a6.754 6.754 0 0 1 1.75-.24c.59 0 1.203.087 1.75.24 1.335-.897 1.925-.722 1.925-.722.372.963.131 1.685.066 1.86.46.48.722 1.115.722 1.88 0 2.691-1.641 3.282-3.194 3.457.24.219.481.634.481 1.29v1.926c0 .197.131.415.481.328C11.988 12.884 14 10.259 14 7.175c0-3.872-3.128-7-7-7z"
fill="currentColor"
fill-rule="nonzero"
></path></svg
></a>
</li>
<li>
<a
aria-label="Twitter"
class="footer_bird__3RjDI"
href="https://twitter.com/vercel"
rel="noopener"
target="_blank"
><svg
aria-label="twitter"
fill="currentColor"
height="16"
viewBox="0 0 18 15"
>
<path
d="M18 1.684l-1.687 1.684v.28c0 .307-.05.602-.123.886-.04 2.316-.777 5.387-3.816 7.81C6.404 17.115 0 12.907 0 12.907c5.063 0 5.063-1.684 5.063-1.684-1.126 0-3.376-2.243-3.376-2.243.563.56 1.689 0 1.689 0C.56 7.295.56 5.61.56 5.61c.563.561 1.689 0 1.689 0C-.563 3.368 1.124.561 1.124.561 1.687 3.368 9 4.49 9 4.49l.093-.046A6.637 6.637 0 0 1 9 3.368C9 1.353 10.636 0 12.656 0c1.112 0 2.094.506 2.765 1.286l.329-.163L17.437 0l-1.122 2.245L18 1.684z"
fill-rule="nonzero"
></path></svg
></a>
</li></ul
></span>
<div class="footer_status__c98JS"></div>
<div class="footer_theme-switcher__kGZC9"></div>
</div>
</section>
</footer>
<!--/$-->
</div>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": {
"pageProps": {
"experiments": {
"experiments": { "pricingcta": { "enabled": true } },
"userId": "v_0c9DHr2HUI03AtKQnztPooFA"
},
"pricingFeatures": {
"support": [
{
"category": "Support",
"order": 1,
"title": "Email Support",
"personalCheckmark": true,
"proCheckmark": true,
"enterpriseCheckmark": true
},
{
"category": "Support",
"order": 2,
"title": "SLA for 99.99% Uptime",
"enterpriseCheckmark": true
},
{
"category": "Support",
"order": 2,
"title": "Email Support SLA",
"enterpriseCheckmark": true
},
{
"category": "Support",
"order": 3,
"title": "Onboarding Support",
"enterpriseCheckmark": true,
"titleTooltip": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Training sessions and shared Slack channel with a dedicated Customer Success Manager.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
},
{
"category": "Support",
"order": 3,
"title": "Advanced Support Scope",
"enterpriseCheckmark": true,
"proTooltip": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/legal/support-terms"
},
"content": [
{
"data": {},
"marks": [],
"value": "Learn more",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": ".",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
},
{
"category": "Support",
"order": 4,
"title": "Dedicated Customer Success Engineer",
"personalCheckmark": false,
"proCheckmark": false,
"enterpriseCheckmark": true
},
{
"category": "Support",
"order": 5,
"title": "Code Audits \u0026 Professional Services",
"enterpriseText": "Custom"
}
],
"security": [
{
"category": "Security",
"order": 1,
"title": "HTTPS/SSL by default",
"personalCheckmark": true,
"proCheckmark": true,
"enterpriseCheckmark": true
},
{
"category": "Security",
"order": 2,
"title": "DDoS Mitigation",
"personalCheckmark": true,
"proCheckmark": true,
"enterpriseCheckmark": true
},
{
"category": "Security",
"order": 3,
"title": "Password Protected Previews",
"enterpriseCheckmark": true,
"proIcon": "Dollar Sign",
"proTooltip": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "Learn more",
"marks": [],
"data": {}
}
],
"data": {
"uri": "https://vercel.com/docs/platform/projects#password-protection"
}
},
{
"nodeType": "text",
"value": ".",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
},
{
"category": "Security",
"order": 4,
"title": "SSO Protected Previews",
"enterpriseCheckmark": true,
"proTooltip": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {
"uri": "https://vercel.com/docs/concepts/projects/overview#sso-protection"
}
},
{
"nodeType": "text",
"value": " ",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
},
{
"category": "Security",
"order": 4,
"title": "Custom Firewall Rules",
"enterpriseCheckmark": true
},
{
"category": "Security",
"order": 4,
"title": "SAML Single-Sign On and 2FA",
"enterpriseCheckmark": true
}
],
"scaleApplication": [
{
"category": "Scale: Application",
"order": 1,
"title": "Bandwidth",
"personalText": "100 GB",
"proText": "1 TB",
"enterpriseText": "Custom",
"proTooltipDollarSign": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Then $40 per extra 100 GB.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
},
{
"category": "Scale: Application",
"order": 2,
"title": "Serverless Function Execution",
"personalText": "100 GB-hours",
"proText": "1,000 GB-hours",
"enterpriseText": "Custom",
"proTooltipDollarSign": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Then $40 per extra 100 GB-hours.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
},
{
"category": "Scale: Application",
"order": 2,
"title": "Edge Middleware",
"personalCheckmark": false,
"proCheckmark": false,
"enterpriseCheckmark": false,
"personalText": "1 million invocations",
"proText": "1 million invocations",
"enterpriseText": "Custom",
"proTooltipDollarSign": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Then $0.65 per million.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
},
{
"category": "Scale: Application",
"order": 3,
"title": "Serverless Function Execution Timeout",
"personalText": "10 seconds",
"proText": "60 seconds",
"enterpriseText": "900 seconds"
},
{
"category": "Scale: Application",
"order": 4,
"title": "Multi-Region Serverless Functions",
"enterpriseText": "Custom"
},
{
"category": "Scale: Application",
"order": 6,
"title": "Build Execution",
"personalText": "6,000 minutes",
"proText": "24,000 minutes",
"enterpriseText": "Custom"
},
{
"category": "Scale: Application",
"order": 7,
"title": "Concurrent Builds",
"personalText": "1",
"proText": "1",
"enterpriseText": "Custom ",
"proTooltipDollarSign": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Then $50 each.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
},
{
"category": "Scale: Application",
"order": 7,
"title": "Image Optimization",
"personalText": "1,000 source images",
"proText": "5,000 source images",
"enterpriseText": "Custom",
"personalTooltip": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "The number of source images you can optimize in each billing period (",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/docs/concepts/image-optimization#source-images"
},
"content": [
{
"data": {},
"marks": [],
"value": "learn more",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": ").",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"proTooltipDollarSign": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Then $9 per 1,000.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
},
{
"category": "Scale: Application",
"order": 8,
"title": "Unlimited Serverless Function Invocations",
"personalCheckmark": true,
"proCheckmark": true,
"enterpriseCheckmark": true
}
],
"scaleBusiness": [
{
"category": "Scale: Business",
"order": 2,
"title": "Domains per Project",
"personalText": "50",
"proText": "Unlimited",
"enterpriseText": "Unlimited"
},
{
"category": "Scale: Business",
"order": 2,
"title": "Deployments per Day",
"personalText": "100",
"proText": "3,000",
"enterpriseText": "Custom"
},
{
"category": "Scale: Business",
"order": 3,
"title": "Preview Deployment Suffix",
"proIcon": "Dollar Sign",
"enterpriseText": "Custom",
"proTooltip": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "$100 per month. ",
"marks": [],
"data": {}
}
],
"data": {}
}
]
},
"titleTooltip": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Customize the appearance of preview URLs (",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/docs/concepts/deployments/automatic-urls#preview-deployment-suffix"
},
"content": [
{
"data": {},
"marks": [],
"value": "learn more",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": ").",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
},
{
"category": "Scale: Business",
"order": 4,
"title": "Vercel Projects Connected per Git Repository",
"personalText": "3",
"proText": "60",
"enterpriseText": "Custom"
},
{
"category": "Scale: Business",
"order": 6,
"title": "Analytics",
"enterpriseCheckmark": true,
"proIcon": "Dollar Sign",
"personalText": "Limited",
"personalTooltip": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "Learn more.",
"marks": [],
"data": {}
}
],
"data": {
"uri": "https://vercel.com/docs/concepts/analytics#pricing"
}
},
{
"nodeType": "text",
"value": " ",
"marks": [],
"data": {}
}
],
"data": {}
}
]
},
"proTooltip": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/docs/analytics#pricing"
},
"content": [
{
"data": {},
"marks": [],
"value": "Learn More",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": "",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"titleTooltip": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "See how real users experience your site after each deploy (",
"nodeType": "text"
},
{
"data": { "uri": "https://vercel.com/analytics" },
"content": [
{
"data": {},
"marks": [],
"value": "learn more",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": ").",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
}
],
"scaleTeam": [
{
"category": "Scale: Team",
"order": 1,
"title": "Team Members",
"proText": "$20/mo per member",
"enterpriseText": "Custom",
"proTooltip": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Maximum of 10 Team Members.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
},
{
"category": "Scale: Team",
"order": 2,
"title": "Unlimited Previewers",
"personalCheckmark": true,
"proCheckmark": true,
"enterpriseCheckmark": true,
"titleTooltip": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Collaborators who can access deploy previews.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
},
{
"category": "Scale: Team",
"order": 3,
"title": "Remote Cache Artifact Downloads ",
"personalCheckmark": false,
"proCheckmark": false,
"enterpriseCheckmark": false,
"personalText": "10 GB",
"proText": "10 GB",
"enterpriseText": "10 GB",
"titleTooltip": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/contact/turborepo?utm_source=vercel.com\u0026utm_medium=referral\u0026utm_campaign=pricing"
},
"content": [
{
"data": {},
"marks": [],
"value": "Get Turborepo Demo",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": "",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"proTooltipDollarSign": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Then $0.50 per GB",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"enterpriseTooltipDollarSign": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "Then $0.50 per GB",
"marks": [],
"data": {}
}
]
}
]
}
}
]
},
"pricingFaqs": [
{
"title": "Which Vercel plan is right for me?",
"description": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Our Hobby plan is for personal, non-commercial use. Pro is for small teams with moderate bandwidth and collaboration requirements. Enterprise is for teams seeking greater performance, collaboration, and security. ",
"nodeType": "text"
},
{
"data": { "uri": "https://vercel.com/contact/sales" },
"content": [
{
"data": {},
"marks": [],
"value": "Contact our sales team",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": " to learn more.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"order": 1
},
{
"title": "Do you offer custom invoicing?",
"description": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Yes, we offer custom invoicing for Enterprise customers. ",
"nodeType": "text"
},
{
"data": { "uri": "https://vercel.com/contact/sales" },
"content": [
{
"data": {},
"marks": [],
"value": "Contact our sales team",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": " to learn more.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"order": 2
},
{
"title": "What are the limits for each plan?",
"description": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Our limits are listed ",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/docs/platform/limits"
},
"content": [
{
"data": {},
"marks": [],
"value": "here",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": ". Additionally, check out our ",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/docs/platform/fair-use-policy"
},
"content": [
{
"data": {},
"marks": [],
"value": "Fair Use Policy",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": ".",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"order": 3
},
{
"title": "I went over my limits. What can I do?",
"description": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "We are glad you are growing and scaling with Vercel! Please ",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "contact us",
"marks": [],
"data": {}
}
],
"data": { "uri": "https://vercel.com/contact/sales" }
},
{
"nodeType": "text",
"value": " to discuss your resource requirements and we can customize a plan for your team.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
},
"order": 4
},
{
"title": "Can I buy additional bandwidth?",
"description": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Yes! Please ",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "reach out",
"marks": [],
"data": {}
}
],
"data": { "uri": "https://vercel.com/contact/sales" }
},
{
"nodeType": "text",
"value": " and the sales team will be happy to assist.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
},
"order": 5
},
{
"title": "I have a Hobby account, how do I upgrade to a paid plan?",
"description": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Thanks for continuing to use Vercel! Follow ",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "this guide",
"marks": [],
"data": {}
}
],
"data": {
"uri": "https://vercel.com/support/articles/transferring-projects-from-hobby-to-team"
}
},
{
"nodeType": "text",
"value": " to transfer your project to a team.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
},
"order": 6
},
{
"title": "Is there a limit to how many teams I can have?",
"description": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "No, there is not a limit.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"order": 7
},
{
"title": "I want to transfer a domain name to Vercel. Is there a fee?",
"description": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Potentially. Transfer fees are dependent on the TLD and the domain renewal fee. The domain-transfer workflow will alert you of fees before initiating transfer.",
"marks": [],
"data": {}
}
],
"data": {}
}
]
},
"order": 8
},
{
"title": "How does Vercel calculate usage?",
"description": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "We calculate the total response size which includes headers along with the number of bytes in the body. Anything served from our servers from your project’s domain will be counted as bandwidth (including JSON responses for Serverless Functions).",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "When it comes to Serverless Functions though, GB-Hrs is calculated by multiplying the duration that your functions ran for by the amount of memory that was consumed by them.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "To learn more, check out the ",
"nodeType": "text"
},
{
"data": {
"uri": "https://vercel.com/docs/platform/usage"
},
"content": [
{
"data": {},
"marks": [],
"value": "Usage documentation",
"nodeType": "text"
}
],
"nodeType": "hyperlink"
},
{
"data": {},
"marks": [],
"value": ".",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
},
"order": 9
}
]
},
"__N_SSP": true
},
"page": "/pricing",
"query": {},
"buildId": "Jb24F06WvMTM0VNZzx2LJ",
"isFallback": false,
"gssp": true,
"scriptLoader": []
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment