Annual Pricing v2

components/blocks/Pricing.template.ts

@@ -31,6 +31,11 @@ export const cardTemplate: Template = {
       label: 'Annual Price',
       type: 'string'
     },
+    {
+      name: 'annualDescription',
+      label: 'Annual Description',
+      type: 'string'
+    },
     {
       name: 'interval',
       label: 'Interval',

components/blocks/Pricing.tsx

@@ -1,26 +1,26 @@
-import { TinaMarkdown } from 'tinacms/dist/rich-text';
-import RenderButton from 'utils/renderButtonArrayHelper';
+import { pricingComponents } from 'components/tinaMarkdownComponents/pricingComponents';
+import { useState } from 'react';
+import { AiOutlineUser, AiOutlineUsergroupAdd } from 'react-icons/ai';
+import { BiBadge, BiSupport } from 'react-icons/bi';
+import { CgCrown } from 'react-icons/cg';
 import {
+  FaChevronDown,
+  FaChevronUp,
   FaClock,
-  FaUnlock,
-  FaCodeBranch,
   FaCloudDownloadAlt,
-  FaPuzzlePiece,
-  FaMarkdown,
-  FaGithub,
+  FaCodeBranch,
   FaFileAlt,
-  FaChevronDown,
-  FaChevronUp,
+  FaGithub,
+  FaMarkdown,
+  FaPuzzlePiece,
   FaStar,
+  FaUnlock,
 } from 'react-icons/fa';
-import { AiOutlineUser, AiOutlineUsergroupAdd } from 'react-icons/ai';
-import { BiBadge, BiSupport } from 'react-icons/bi';
-import { CgCrown } from 'react-icons/cg';
 import { HiOutlineSparkles } from 'react-icons/hi2';
-import { TbPlugConnected } from 'react-icons/tb';
 import { SlLock } from 'react-icons/sl';
-import { useState } from 'react';
-import { pricingComponents } from 'components/tinaMarkdownComponents/pricingComponents';
+import { TbPlugConnected } from 'react-icons/tb';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+import RenderButton from 'utils/renderButtonArrayHelper';
 
 const icons = {
   FaClock,
@@ -108,11 +108,14 @@ const PaidTier = ({ data, isMonthly }) => {
           </span>
           {data.interval && (
             <span className="pl-2 text-lg bg-gradient-to-br from-blue-600 via-blue-800 to-blue-1000 bg-clip-text text-transparent">
-               {data.interval}
+              {data.interval}
             </span>
           )}
         </div>
-        <div className="pt-6 flex">
+        <div className="pt-1 text-stone-600 text-sm">
+          {!isMonthly ? data.annualDescription : ''}
+        </div>
+        <div className="pt-3 flex">
           {data.buttons &&
             data.buttons.map((button, index) => (
               <RenderButton key={index} button={button} index={index} />
@@ -211,42 +214,56 @@ export function PricingBlock({ data }) {
         <h1 className="text-center justify-center font-tuner text-4xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-600 to-orange-700 group-hover:from-orange-300 group-hover:via-orange-500 group-hover:to-orange-700 bg-clip-text text-transparent">
           {data.headline}
         </h1>
-        
-        <div className="pt-2 max-w-4xl mx-auto flex justify-center">
+
+        <div className="pt-2 max-w-7xl mx-auto flex justify-center">
           <FreeTier data={data} />
         </div>
-        <div className="pt-10 px-4 pb-6 text-center">
-          <TinaMarkdown content={data.intro} components={pricingComponents} />
-        </div>
-        <div className="flex justify-center pb-6">
-          <div className="bg-gradient-to-br font-tuner from-white/25 via-white/50 to-white/75 shadow-2xl rounded-full gap-16 relative w-max">
-            <div
-              className={`absolute top-0 left-0 w-1/2 h-full bg-gradient-to-br from-blue-300 via-blue-400 to-blue-500 rounded-full transition-transform duration-500 ease-in-out ${
-                isMonthly
-                  ? 'transform translate-x-0'
-                  : 'transform translate-x-full'
-              }`}
-            ></div>
-            <div className="relative flex z-10">
-              <button
-                className={`px-10 py-2 w-1/2 z-20 transition-colors duration-500 ${
-                  isMonthly ? 'text-white' : 'text-black'
-                }`}
-                onClick={() => setIsMonthly(true)}
-              >
-                Monthly
-              </button>
-              <button
-                className={`px-10 py-2 w-1/2 z-20 transition-colors duration-500 ${
-                  !isMonthly ? 'text-white' : 'text-black'
+        <div className="flex justify-center md:justify-start pt-10">
+          <div className="flex flex-col sm:space-y-4 md:flex-row md:items-center">
+            <div className="bg-gradient-to-br font-tuner from-white/25 via-white/50 to-white/75 shadow-md rounded-full gap-16 relative w-max">
+              <div
+                className={`absolute top-0 left-0 w-1/2 h-full bg-gradient-to-br from-blue-300 via-blue-500 to-blue-700 rounded-full transition-transform duration-500 ease-in-out border-4 border-white  ${
+                  isMonthly
+                    ? 'transform translate-x-0'
+                    : 'transform translate-x-full'
                 }`}
-                onClick={() => setIsMonthly(false)}
-              >
-                Annually
-              </button>
+              ></div>
+              <div className="relative leading-none flex z-10">
+                <button
+                  className={`px-10 py-4 w-1/2 z-20 transition-colors  duration-500 ${
+                    isMonthly ? 'text-white' : 'text-blue-500'
+                  }`}
+                  onClick={() => setIsMonthly(true)}
+                >
+                  Monthly
+                </button>
+                <button
+                  className={`px-10 py-2 w-1/2 z-20 transition-colors  duration-500 ${
+                    !isMonthly ? 'text-white' : 'text-blue-500'
+                  }`}
+                  onClick={() => setIsMonthly(false)}
+                >
+                  Annually
+                </button>
+              </div>
+            </div>
+            <div className="flex flex-col md:flex-row md:items-center pt-4 pb-8">
+              <div className="flex items-start md:items-center md:pt-0 justify-center md:justify-start pl-1 md:pl-10">
+                All prices in <span className="font-bold ml-1">USD</span>.
+              </div>
+              {!isMonthly && (
+                <div
+                  className={`flex items-center  pl-1 md:pt-0 transition-opacity justify-center duration-500 ease-in-out text-black ${
+                    isMonthly ? 'opacity-0' : 'opacity-100'
+                  }`}
+                >
+                  Save from 16% with annual billing
+                </div>
+              )}
             </div>
           </div>
         </div>
+
         <div className="responsive-grid">
           {data.plans &&
             data.plans.map((plan, index) => (
@@ -279,4 +296,3 @@ export function PricingBlock({ data }) {
     </div>
   );
 }
-

content/blocksPages/enterprise.json

@@ -167,7 +167,7 @@
     {
       "title2": "\"Tina is transforming the way we do docs at Unity\"",
       "subtext": "Anton Iancu, Product Engineering Manager for AI and Docs",
-      "logo": "/svg/unity.svg",
+      "logo": "/svg/logos/unity.svg",
       "_template": "quote"
     },
     {

content/blocksPages/pricing.json

@@ -25,6 +25,7 @@
           "description": "For growing teams\n",
           "price": "$29",
           "annualPrice": "$24",
+          "annualDescription": "$288 billed annually (save $60)",
           "interval": "/ month",
           "cardItem": [
             {
@@ -62,6 +63,7 @@
           "description": "For bigger teams\n",
           "price": "$49",
           "annualPrice": "$41",
+          "annualDescription": "$492 billed annually (save $96)",
           "interval": "/ month",
           "cardItem": [
             {
@@ -107,6 +109,7 @@
           "description": "For premium support\n",
           "price": "$299",
           "annualPrice": "$249",
+          "annualDescription": "$2,988 billed annually (save $600)",
           "interval": "/ month",
           "cardItem": [
             {