added signup message for 404 (#1734)

* added signup message for 404

* wip

* wip

* Update common.json

pages/404.tsx

@@ -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,13 +45,136 @@ 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">
+          {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>
+                      </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="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">
+                          <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="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>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <>
               <div className="text-center">
-            <p className="text-sm font-semibold tracking-wide text-black uppercase">404 error</p>
+                <p className="text-sm font-semibold tracking-wide text-black uppercase">{t("error_404")}</p>
-            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 font-cal sm:text-5xl">
+                <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>
+                  <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("/", "")}
@@ -78,7 +202,7 @@ export default function Custom404() {
                     <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">
+                        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" />
@@ -107,7 +231,7 @@ export default function Custom404() {
                   {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">
+                        <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" />
@@ -132,10 +256,13 @@ export default function Custom404() {
                   <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">
+                      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">
+                          <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"
@@ -177,6 +304,8 @@ export default function Custom404() {
                   </Link>
                 </div>
               </div>
+            </>
+          )}
         </main>
       </div>
     </>

public/static/locales/en/common.json

@@ -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"
 }