added signup message for 404 (#1734)

* added signup message for 404

* wip

* wip

* Update common.json
This commit is contained in:
Peer Richelsen 2022-02-08 13:38:13 +00:00 committed by GitHub
parent 5567721431
commit 7f8883866a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 255 additions and 116 deletions

View file

@ -31,11 +31,12 @@ export default function Custom404() {
];
const isSubpage = router.asPath.includes("/", 2);
const isSignup = router.asPath.includes("/signup");
return (
<>
<HeadSeo
title={t("404_page_not_found")}
title={isSignup ? t("signup_requires") : t("404_page_not_found")}
description={t("404_page_not_found")}
nextSeoProps={{
nofollow: true,
@ -44,139 +45,267 @@ export default function Custom404() {
/>
<div className="min-h-screen px-4 bg-white">
<main className="max-w-xl pt-16 pb-6 mx-auto sm:pt-24">
<div className="text-center">
<p className="text-sm font-semibold tracking-wide text-black uppercase">404 error</p>
<h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 font-cal sm:text-5xl">
{t("page_doesnt_exist")}
</h1>
{isSubpage ? (
<span className="inline-block mt-2 text-lg ">{t("check_spelling_mistakes_or_go_back")}</span>
) : process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" ? (
<a
href={"https://cal.com/signup?username=" + username.replace("/", "")}
className="inline-block mt-2 text-lg ">
{t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
{t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
</a>
) : (
<>
{t("the_username")}{" "}
<strong className="text-green-500">
{new URL(process.env.NEXT_PUBLIC_BASE_URL || "").hostname}
{username}
</strong>{" "}
{t("is_still_available")}
</>
)}
</div>
<div className="mt-12">
<h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
{t("popular_pages")}
</h2>
{!isSubpage && process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" && (
<ul role="list" className="mt-4">
<li className="px-4 py-2 border-2 border-green-500">
<a
href={"https://cal.com/signup?username=" + username.replace("/", "")}
className="relative flex items-start py-6 rtl:space-x-reverse space-x-4">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
<CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
</span>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />
{t("register")} <strong className="text-green-500">{username}</strong>
</span>
{isSignup && process.env.NEXT_PUBLIC_BASE_URL !== "https://app.cal.com" ? (
<div>
<div>
<p className="text-sm font-semibold tracking-wide text-black uppercase">
{t("missing_license")}
</p>
<h1 className="mt-2 text-3xl font-extrabold text-gray-900 font-cal">
{t("signup_requires")}
</h1>
<p className="mt-4">{t("signup_requires_description")}</p>
</div>
<div className="mt-12">
<h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
{t("next_steps")}
</h2>
<ul role="list" className="mt-4">
<li className="px-4 py-2 border-2 border-green-500">
<a
href="https://cal.com/pricing?infra"
className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
<CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
</span>
</h3>
<p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
</ul>
)}
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />
{t("acquire_commercial_license")}
</span>
</span>
</h3>
<p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
</ul>
<ul role="list" className="mt-4 border-gray-200 divide-y divide-gray-200">
{links.map((link, linkIdx) => (
<li key={linkIdx} className="px-4 py-2">
<Link href={link.href}>
<a className="relative flex items-start py-6 rtl:space-x-reverse space-x-4">
<ul role="list" className="border-gray-200 divide-y divide-gray-200">
<li className="px-4 py-2">
<Link href="https://docs.cal.com/self-hosting/install#setting-up-your-first-user">
<a className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
<DocumentTextIcon className="w-6 h-6 text-gray-700" aria-hidden="true" />
</span>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="absolute inset-0" aria-hidden="true" />
{t("prisma_studio_tip")}
</span>
</h3>
<p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</Link>
</li>
<li className="px-4 py-2">
<a
href="https://cal.com/slack"
className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
<link.icon className="w-6 h-6 text-gray-700" aria-hidden="true" />
<svg
viewBox="0 0 2447.6 2452.5"
className="w-6 h-6"
xmlns="http://www.w3.org/2000/svg">
<g clipRule="evenodd" fillRule="evenodd">
<path
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
fill="rgba(55, 65, 81)"></path>
</g>
</svg>
</span>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="absolute inset-0" aria-hidden="true" />
{link.title}
Slack
</span>
</h3>
<p className="text-base text-gray-500">{link.description}</p>
<p className="text-base text-gray-500">{t("join_our_community")}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
</ul>
<div className="mt-8">
<Link href="https://cal.com/enterprise">
<a className="text-base font-medium text-black hover:text-gray-500">
{t("contact_sales")}
<span aria-hidden="true"> &rarr;</span>
</a>
</Link>
</li>
))}
<li className="px-4 py-2">
<a
href="https://cal.com/slack"
className="relative flex items-start py-6 rtl:space-x-reverse space-x-4">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
<svg viewBox="0 0 2447.6 2452.5" className="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
<g clipRule="evenodd" fillRule="evenodd">
<path
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
fill="rgba(55, 65, 81)"></path>
</g>
</svg>
</span>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="absolute inset-0" aria-hidden="true" />
Slack
</span>
</h3>
<p className="text-base text-gray-500">{t("join_our_community")}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
</ul>
<div className="mt-8">
<Link href="/">
<a className="text-base font-medium text-black hover:text-gray-500">
{t("or_go_back_home")}
<span aria-hidden="true"> &rarr;</span>
</a>
</Link>
</div>
</div>
</div>
</div>
) : (
<>
<div className="text-center">
<p className="text-sm font-semibold tracking-wide text-black uppercase">{t("error_404")}</p>
<h1 className="mt-2 text-4xl font-extrabold text-gray-900 font-cal sm:text-5xl">
{t("page_doesnt_exist")}
</h1>
{isSubpage ? (
<span className="inline-block mt-2 text-lg ">
{t("check_spelling_mistakes_or_go_back")}
</span>
) : process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" ? (
<a
href={"https://cal.com/signup?username=" + username.replace("/", "")}
className="inline-block mt-2 text-lg ">
{t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
{t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
</a>
) : (
<>
{t("the_username")}{" "}
<strong className="text-green-500">
{new URL(process.env.NEXT_PUBLIC_BASE_URL || "").hostname}
{username}
</strong>{" "}
{t("is_still_available")}
</>
)}
</div>
<div className="mt-12">
<h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
{t("popular_pages")}
</h2>
{!isSubpage && process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" && (
<ul role="list" className="mt-4">
<li className="px-4 py-2 border-2 border-green-500">
<a
href={"https://cal.com/signup?username=" + username.replace("/", "")}
className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
<CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
</span>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />
{t("register")} <strong className="text-green-500">{username}</strong>
</span>
</span>
</h3>
<p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
</ul>
)}
<ul role="list" className="mt-4 border-gray-200 divide-y divide-gray-200">
{links.map((link, linkIdx) => (
<li key={linkIdx} className="px-4 py-2">
<Link href={link.href}>
<a className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
<link.icon className="w-6 h-6 text-gray-700" aria-hidden="true" />
</span>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="absolute inset-0" aria-hidden="true" />
{link.title}
</span>
</h3>
<p className="text-base text-gray-500">{link.description}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</Link>
</li>
))}
<li className="px-4 py-2">
<a
href="https://cal.com/slack"
className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
<svg
viewBox="0 0 2447.6 2452.5"
className="w-6 h-6"
xmlns="http://www.w3.org/2000/svg">
<g clipRule="evenodd" fillRule="evenodd">
<path
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
fill="rgba(55, 65, 81)"></path>
<path
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
fill="rgba(55, 65, 81)"></path>
</g>
</svg>
</span>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-base font-medium text-gray-900">
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
<span className="absolute inset-0" aria-hidden="true" />
Slack
</span>
</h3>
<p className="text-base text-gray-500">{t("join_our_community")}</p>
</div>
<div className="self-center flex-shrink-0">
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
</ul>
<div className="mt-8">
<Link href="/">
<a className="text-base font-medium text-black hover:text-gray-500">
{t("or_go_back_home")}
<span aria-hidden="true"> &rarr;</span>
</a>
</Link>
</div>
</div>
</>
)}
</main>
</div>
</>

View file

@ -636,5 +636,15 @@
"add": "Add",
"verify_wallet": "Verify Wallet",
"connect_metamask": "Connect Metamask",
"create_events_on": "Create events on:"
"create_events_on": "Create events on:",
"missing_license": "Missing License",
"signup_requires": "Commercial license required",
"signup_requires_description": "Cal.com, Inc. currently does not offer a free open source version of the sign up page. To receive full access to the signup components you need to acquire a commercial license. For personal use we recommend the Prisma Data Platform or any other Postgres interface to create accounts.",
"next_steps": "Next Steps",
"acquire_commercial_license": "Acquire a commercial license",
"the_infrastructure_plan": "The infrastructure plan is usage-based and has startup-friendly discounts.",
"prisma_studio_tip": "Create an account via Prisma Studio",
"prisma_studio_tip_description": "Learn how to set up your first user",
"contact_sales": "Contact Sales",
"error_404": "Error 404"
}