Pricing Page Improvements (#734)

* Features Slideshow * Slowly moving grid * Visual / Sizing Improvements * Checkout text cleanup * Banner sizing * Checkout block * Translations
tone-row · Sep 12, 2024 · 8b2e9a5 · 8b2e9a5
1 parent e22b40a
commit 8b2e9a5
Show file tree

Hide file tree

Showing 19 changed files with 567 additions and 521 deletions.
diff --git a/app/src/components/Checkout.tsx b/app/src/components/Checkout.tsx
@@ -124,15 +124,12 @@ export function Checkout({
   }
 
   return (
-    <div>
-      <h2 className="text-white text-5xl font-bold text-center mb-3 tracking-wide">
-        <Trans>Upgrade to Pro</Trans>
-      </h2>
-      <p className="text-white text-[26px] text-center mb-10 text-wrap-balance leading-tight opacity-90">
+    <div className="grid">
+      <h2 className="text-white text-lg font-medium sm:text-3xl text-center mb-10 text-wrap-balance leading-tight opacity-90">
         <Trans>
           Unlock AI Features and never lose your work with a Pro account.
         </Trans>
-      </p>
+      </h2>
       <div className="grid sm:grid-cols-2 gap-3 mb-8">
         <PlanButton
           onClick={() => {
@@ -158,45 +155,44 @@ export function Checkout({
           data-session-activity="Choose Monthly Plan"
         />
       </div>
-      <div className="px-[48px]">
-        <button
-          className={classNames(
-            "w-full bg-[#FFCD1F] text-black rounded-3xl text-[22px] font-bold py-6 shadow-md hover:bg-[#FFE063] hover:shadow-lg transition-all duration-300",
-            {
-              "animate-pulse": createCheckoutSession.isLoading,
-            }
-          )}
-          onClick={() => {
-            createCheckoutSession.mutate(plan);
-          }}
-          data-session-activity="Upgrade Account"
-        >
-          <Trans>
-            {createCheckoutSession.isLoading
-              ? t`Processing...`
-              : t`Get Pro Access Now`}
-          </Trans>
-        </button>
 
-        <div className="mt-8 text-base text-white bg-purple-600 rounded-lg p-5 shadow-md">
-          <div className="flex items-center mb-2">
-            <LockSimple className="mr-2" size={18} />
-            <span>
-              <Trans>Secure payment</Trans>
-            </span>
-          </div>
-          <div className="flex items-center mb-2">
-            <CreditCard className="mr-2" size={18} />
-            <span>
-              <Trans>Cancel anytime</Trans>
-            </span>
-          </div>
-          <div className="flex items-center">
-            <ArrowClockwise className="mr-2" size={18} />
-            <span>
-              <Trans>Satisfaction guaranteed or first payment refunded</Trans>
-            </span>
-          </div>
+      <button
+        className={classNames(
+          "w-full bg-[#FFCD1F] text-black rounded-3xl text-[22px] font-bold py-6 shadow-md hover:bg-[#FFE063] hover:shadow-lg transition-all duration-300",
+          {
+            "animate-pulse": createCheckoutSession.isLoading,
+          }
+        )}
+        onClick={() => {
+          createCheckoutSession.mutate(plan);
+        }}
+        data-session-activity="Upgrade Account"
+      >
+        <Trans>
+          {createCheckoutSession.isLoading
+            ? t`Processing...`
+            : t`Get Pro Access Now`}
+        </Trans>
+      </button>
+
+      <div className="mt-8 text-base text-white bg-purple-600 rounded-lg p-5 shadow-md">
+        <div className="flex items-center mb-2">
+          <LockSimple className="mr-2" size={18} />
+          <span>
+            <Trans>Secure payment</Trans>
+          </span>
+        </div>
+        <div className="flex items-center mb-2">
+          <CreditCard className="mr-2" size={18} />
+          <span>
+            <Trans>Cancel anytime</Trans>
+          </span>
+        </div>
+        <div className="flex items-center">
+          <ArrowClockwise className="mr-2" size={18} />
+          <span>
+            <Trans>Satisfaction guaranteed or first payment refunded</Trans>
+          </span>
         </div>
       </div>
     </div>

diff --git a/app/src/index.css b/app/src/index.css
@@ -320,7 +320,7 @@ and --mouse-x
 }
 
 .feature:nth-child(1) {
-  --hover-accent: theme("colors.purple.300");
+  --hover-accent: theme("colors.purple.400");
 }
 .feature:nth-child(2) {
   --hover-accent: theme("colors.green.300");
@@ -329,7 +329,7 @@ and --mouse-x
   --hover-accent: theme("colors.orange.300");
 }
 .feature:nth-child(4) {
-  --hover-accent: theme("colors.blue.300");
+  --hover-accent: theme("colors.red.300");
 }
 
 .feature::after {
@@ -365,7 +365,7 @@ and --mouse-x
   @apply transition-opacity duration-[400ms];
 }
 
-.feature:hover::after {
+.feature[data-is-active="true"]::after {
   opacity: 1;
 }
 
@@ -408,12 +408,22 @@ and --mouse-x
       #e3dff3 32px 33px
     ),
     linear-gradient(90deg, #f5f4f91f, #f5f4f91f 30px);
-  background-position: 0 0;
   background-repeat: repeat, repeat, repeat, repeat;
-  background-size: 100% 100%;
+  background-size: 120% 120%;
   background-attachment: scroll, scroll, scroll, scroll;
   background-origin: padding-box, padding-box, padding-box, padding-box;
   background-clip: border-box, border-box, border-box, border-box;
+  background-position: 0px 0px;
+  animation: move-background 3s linear infinite;
+}
+
+@keyframes move-background {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: -33px -5px;
+  }
 }
 
 body.dark .pricing-highlights {

diff --git a/app/src/locales/de/messages.js b/app/src/locales/de/messages.js