Landing Updates (#638)

* Build alternative pricing page * Add mobile * Dark Mode * Dark Mode 2 * Translations * Upgrade posthog * Update packages * Mobile tweaks
tone-row · Jan 12, 2024 · 81691db · 81691db
1 parent 4d82716
commit 81691db
Show file tree

Hide file tree

Showing 25 changed files with 1,538 additions and 544 deletions.
diff --git a/app/package.json b/app/package.json
@@ -51,8 +51,8 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-hook/throttle": "^2.2.0",
     "@sendgrid/mail": "^7.4.6",
-    "@sentry/react": "^7.38.0",
-    "@sentry/tracing": "^7.38.0",
+    "@sentry/react": "^7.93.0",
+    "@sentry/tracing": "^7.93.0",
     "@stripe/react-stripe-js": "^2.1.0",
     "@stripe/stripe-js": "^1.52.1",
     "@supabase/supabase-js": "^2.31.0",
@@ -96,7 +96,7 @@
     "papaparse": "^5.4.1",
     "phosphor-react": "^1.3.1",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "posthog-js": "^1.75.3",
+    "posthog-js": "^1.98.2",
     "prettier": "^2.3.1",
     "re-resizable": "^6.9.0",
     "react": "^18.2.0",

diff --git a/app/public/images/arrows-purple.svg b/app/public/images/arrows-purple.svg
diff --git a/app/src/components/Checkout.tsx b/app/src/components/Checkout.tsx
@@ -9,7 +9,14 @@ import { PlanButton } from "./PlanButton";
 import { PaymentStepperTitle } from "./PaymentStepperTitle";
 import classNames from "classnames";
 
-export function Checkout() {
+export function Checkout({
+  pricing2,
+}: {
+  /**
+   * Is this the updated pricing page?
+   */
+  pricing2?: boolean;
+}) {
   const session = useSession();
   const sessionEmail = session?.user?.email;
   const { checkedSession, customerIsLoading } = useContext(AppContext);
@@ -56,16 +63,15 @@ export function Checkout() {
       <div className="w-full h-full flex items-center justify-center">
         <div className="grid justify-center justify-items-center">
           <p className="text-lg text-wrap-balance text-center leading-normal">
-            <Trans>
-              You must{" "}
-              <Link
-                to={`/l?${searchParams.toString()}`}
-                className="font-bold underline hover:text-blue-500"
-              >
-                log in
-              </Link>{" "}
-              before you can upgrade to Pro.
-            </Trans>
+            <Link
+              to={`/l?${searchParams.toString()}`}
+              className={classNames("font-bold hover:text-blue-500", {
+                "text-white hover:text-white text-xl hover:scale-105 transition-transform":
+                  pricing2,
+              })}
+            >
+              <Trans>Log in to upgrade your account</Trans>
+            </Link>
           </p>
         </div>
       </div>
@@ -83,12 +89,25 @@ export function Checkout() {
   if (isProUser) {
     return (
       <div className="w-full h-full flex items-center justify-center">
-        <p className="text-xl text-center text-wrap-balance leading-normal">
+        <p
+          className={classNames(
+            "text-xl text-center text-wrap-balance leading-normal",
+            {
+              "text-white": pricing2,
+            }
+          )}
+        >
           <Trans>
             You're already a Pro User!
             <br />
-            Have questions or feature requests?{" "}
-            <Link to="/o" className="underline hover:text-blue-500 font-bold">
+            Have questions or feature requests?
+            <br />
+            <Link
+              to="/o"
+              className={classNames("hover:text-blue-500", {
+                "hover:text-white": pricing2,
+              })}
+            >
               Let Us Know
             </Link>
           </Trans>
@@ -101,10 +120,11 @@ export function Checkout() {
     <div className="relative h-full">
       <div
         className={classNames(
-          "grid content-center h-full rounded-xl p-8 pb-16 bg-gradient-to-br from-neutral-50 to-neutral-300/50 shadow-inner dark:to-blue-900/50 dark:from-blue-900/0",
+          "grid content-center h-full rounded-xl p-8 pb-16 bg-neutral-50 border dark:to-blue-900/50 dark:from-blue-900/0",
           {
             "opacity-60 pointer-events-none cursor-loading":
               createCheckoutSession.isLoading,
+            "dark:bg-neutral-900 dark:border-none": pricing2,
           }
         )}
       >

diff --git a/app/src/components/PaymentStepperTitle.tsx b/app/src/components/PaymentStepperTitle.tsx
@@ -1,3 +1,5 @@
+import classNames from "classnames";
+
 export function PaymentStepperTitle({
   children,
   className = "",
@@ -7,7 +9,9 @@ export function PaymentStepperTitle({
 }) {
   return (
     <h2
-      className={`text-xl font-bold dark:text-neutral-100 text-wrap-balance leading-tight flex items-center justify-center gap-4 ${className}`}
+      className={classNames(
+        `text-xl font-bold dark:text-neutral-100 text-wrap-balance leading-tight flex items-center justify-center gap-4 ${className}`
+      )}
     >
       {children}
     </h2>

diff --git a/app/src/components/Router.tsx b/app/src/components/Router.tsx
@@ -16,7 +16,8 @@ const Sandbox = lazy(() => import("../pages/Sandbox"));
 const EditHosted = lazy(() => import("../pages/EditHosted"));
 /** Read only chart, encoded in url / maybe fullscreen */
 const ReadOnly = lazy(() => import("../pages/ReadOnly"));
-const Pricing = lazy(() => import("../pages/Pricing"));
+// const Pricing = lazy(() => import("../pages/Pricing"));
+const Pricing2 = lazy(() => import("../pages/Pricing2"));
 const Blog = lazy(() => import("../pages/Blog"));
 const Post = lazy(() => import("../pages/post/Post"));
 const Changelog = lazy(() => import("../pages/Changelog"));
@@ -40,7 +41,7 @@ export default function Router() {
     <Routes>
       <Route path="/" element={<Wrapper />}>
         <Route index element={<Sandbox />} />
-        <Route path="/pricing" element={<Pricing />} />
+        <Route path="/pricing" element={<Pricing2 />} />
         {/* "y" for "your charts" */}
         <Route
           path="/y"

diff --git a/app/src/index.css b/app/src/index.css
@@ -288,3 +288,89 @@ main .monaco-editor {
     transform: translateX(100%);
   }
 }
+
+.checkout-wrapper {
+  background-blend-mode: normal;
+  background: radial-gradient(circle, #8252eb, #8252eb 20%, #baabf2 120%) 0 0/100%
+    100%;
+}
+
+body.dark .checkout-wrapper {
+  background-blend-mode: normal;
+  background-color: #0000;
+  background-image: radial-gradient(
+      circle,
+      #8252eb8a,
+      #8252eb8a 0%,
+      #44108a5e 63%
+    ),
+    conic-gradient(at 0 100%, #000, #000 30deg);
+  background-position: 0 0;
+  background-repeat: repeat, repeat;
+  background-size: 100% 100%;
+  background-attachment: scroll, scroll;
+  background-origin: padding-box, padding-box;
+  background-clip: border-box, border-box;
+}
+
+/**
+* Add 3d effect to the product video based on mouse cursor location using CSS
+and --mouse-x
+--mouse-y custom properties
+*/
+.pricing-video {
+  transform: perspective(200px) rotateY(calc(var(--mouse-x) * 1deg))
+    rotateX(calc(var(--mouse-y) * -1deg));
+  transition: transform 0.1s ease-out;
+}
+
+.feature::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: -1;
+
+  background-blend-mode: darken;
+  background-color: #0000;
+  background-image: radial-gradient(
+      circle at 50% 125%,
+      #baabf2,
+      #baabf2 0%,
+      #fff 21%
+    ),
+    radial-gradient(circle at 50% 125%, #baabf2, #baabf2 0%, #fff 49%);
+  background-position: 0 0;
+  background-repeat: repeat, repeat;
+  background-size: 100% 100%;
+  background-attachment: scroll, scroll;
+  background-origin: padding-box, padding-box;
+  background-clip: border-box, border-box;
+
+  @apply transition-opacity duration-[400ms];
+}
+
+.feature:hover::after {
+  opacity: 1;
+}
+
+body.dark .feature::after {
+  background-blend-mode: screen;
+  background-color: #0000;
+  background-image: radial-gradient(
+      circle at 50% 125%,
+      #baabf2,
+      #baabf2 0%,
+      #000 21%
+    ),
+    radial-gradient(circle at 50% 125%, #baabf2, #baabf2 0%, #000 49%);
+  background-position: 0 0;
+  background-repeat: repeat, repeat;
+  background-size: 100% 100%;
+  background-attachment: scroll, scroll;
+  background-origin: padding-box, padding-box;
+  background-clip: border-box, border-box;
+}
diff --git a/app/src/locales/de/messages.js b/app/src/locales/de/messages.js