Update website content

app/src/client/Main.css

@@ -4,20 +4,35 @@
 
 @font-face {
   font-family: "Panton-SemiBold";
-  src: url("/fonts/47a8ea40a6adb66d377bd4931fa3e394.eot"); /* IE9*/
-  src: url("/fonts/47a8ea40a6adb66d377bd4931fa3e394.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
-  url("/fonts/47a8ea40a6adb66d377bd4931fa3e394.woff2") format("woff2"), /* chrome、firefox */
-  url("/fonts/47a8ea40a6adb66d377bd4931fa3e394.woff") format("woff"), /* chrome、firefox */
-  url("/fonts/47a8ea40a6adb66d377bd4931fa3e394.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
-  url("/fonts/47a8ea40a6adb66d377bd4931fa3e394.svg#Panton-SemiBold") format("svg"); /* iOS 4.1- */
+  src: url("/fonts/Panton-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Rubik-Medium";
+  src: url("/fonts/Rubik-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "RobotoMono-Regular";
+  src: url("/fonts/RobotoMono-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto-Light";
+  src: url("/fonts/Roboto-Light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto-Regular";
+  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
 }
 
 body {
   margin: 0;
   /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif; */
-  font-family:"Panton-SemiBold";
+  font-family:"Roboto-Regular";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

app/src/client/app/PricingPage.tsx

@@ -10,24 +10,24 @@ export const tiers = [
   // {
   //   name: 'Hobby',
   //   id: TierIds.HOBBY,
-  //   price: '$9.99',
+  //   priceMonthly: '$9.99',
   //   description: 'All you need to get started',
   //   features: ['Limited monthly usage', 'Basic support'],
   // },
   {
-    name: 'Pro',
+    name: 'Monthly Subscription',
     id: TierIds.PRO,
-    price: '$19.99',
-    description: 'Our most popular plan',
-    features: ['Unlimited monthly usage', 'Priority customer support'],
+    priceMonthly: '$29',
+    description: 'Purchase a monthly subscription and enjoy 30 days on us, followed by a low monthly fee of just',
+    features: ['30-day free trial', 'No credit card required for trial subscription', 'Cancel any time'],
     bestDeal: true,
   },
   // {
-  //   name: '10 Credits',
-  //   id: TierIds.CREDITS,
-  //   price: '$9.99',
-  //   description: 'One-time purchase of 10 credits for your account',
-  //   features: ['Use credits for e.g. OpenAI API calls', 'No expiration date'],
+  //   name: 'Enterprise',
+  //   id: TierIds.ENTERPRISE,
+  //   priceMonthly: '$500',
+  //   description: 'Big business means big money',
+  //   features: ['Unlimited monthly usage', '24/7 customer support', 'Advanced analytics'],
   // },
 ];
 
@@ -61,57 +61,56 @@ const PricingPage = () => {
     <div className='py-10 lg:mt-10'>
       <div className='mx-auto max-w-7xl px-6 lg:px-8'>
         <div id='pricing' className='mx-auto max-w-4xl text-center'>
-          <h2 className='mt-2 text-4xl font-bold tracking-tight text-airt-font-base sm:text-5xl dark:text-white'>
-            Pick your <span className='text-airt-primary'>pricing</span>
+          <h2 className='mt-2 text-4xl font-bold tracking-tight text-airt-font-base sm:text-5xl dark:airt-font-base'>
+            Try FastAgency free for a month. <span className='text-airt-primary'>No credit card required!</span>
           </h2>
         </div>
-        <p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-airt-font-base dark:text-white'>
-          Stripe subscriptions and secure webhooks are built-in. Just add your Stripe Product IDs! Try it out below with
-          test credit card number{' '}
-          <span className='px-2 py-1 bg-airt-primary rounded-md text-airt-font-base'>4242 4242 4242 4242 4242</span>
+        <p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-airt-font-base dark:airt-font-base'>
+          Unlock FastAgency's full capabilities with an active subscription. Explore all features with a hassle-free
+          30-day free trial—no credit card required.
+          {/* {' '}
+          <span className='px-2 py-1 bg-gray-100 rounded-md text-gray-500'>
+            4242 4242 4242 4242 4242
+          </span> */}
         </p>
+        {/* <div className='isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 lg:gap-x-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3'> */}
         <div className='justify-center isolate mx-auto mt-16 max-w-none gap-y-8 lg:gap-x-8 sm:mt-20 lg:mx-0 lg:max-w-none'>
           {tiers.map((tier) => (
             <div
               key={tier.id}
-              className={cn(
-                'relative flex flex-col  ring-2 mx-auto grow justify-center max-w-md rounded-3xl ring-gray-200 overflow-hidden p-8 xl:p-10',
-                {
-                  'ring-2': tier.bestDeal,
-                  'ring-1 lg:mt-8': !tier.bestDeal,
-                }
-              )}
+              className={`relative flex flex-col  ${
+                tier.bestDeal ? 'ring-2' : 'ring-1 lg:mt-8'
+              } mx-auto grow justify-center max-w-md rounded-3xl ring-gray-200 overflow-hidden p-8 xl:p-10`}
             >
               {tier.bestDeal && (
                 <div className='absolute top-0 right-0 -z-10 w-full h-full ' aria-hidden='true'>
-                  <div className='absolute w-full h-full bg-airt-primary' />
+                  <div
+                    className='absolute w-full h-full bg-airt-primary'
+                    style={{
+                      clipPath: 'circle(670% at 50% 50%)',
+                    }}
+                  />
                 </div>
               )}
               <div className='mb-8'>
                 <div className='flex items-center justify-between gap-x-4'>
-                  <h3 id={tier.id} className='text-airt-font-base text-lg font-semibold leading-8 dark:text-white'>
+                  <h3 id={tier.id} className='text-airt-font-base text-lg font-semibold leading-8 dark:airt-font-base'>
                     {tier.name}
                   </h3>
                 </div>
-                <p className='mt-4 text-sm leading-6 text-airt-font-base dark:text-white'>{tier.description}</p>
-                <p className='mt-6 flex items-baseline gap-x-1 dark:text-white'>
-                  <span className='text-4xl font-bold tracking-tight text-airt-font-base dark:text-white'>
-                    {tier.price}
+                <p className='mt-4 text-sm leading-6 text-airt-font-base dark:airt-font-base'>{tier.description}</p>
+                <p className='mt-6 flex items-baseline gap-x-1 dark:airt-font-base'>
+                  <span className='text-4xl font-bold tracking-tight text-airt-font-base dark:airt-font-base'>
+                    {tier.priceMonthly}
                   </span>
-                  <span className='text-sm font-semibold leading-6 text-airt-font-base dark:text-white'>
-                    {tier.id !== TierIds.CREDITS && '/month'}
+                  <span className='text-sm font-semibold leading-6 text-airt-font-base dark:airt-font-base'>
+                    /month
                   </span>
                 </p>
-                <ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-airt-font-base dark:text-white'>
+                <ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-airt-font-base dark:airt-font-base'>
                   {tier.features.map((feature) => (
                     <li key={feature} className='flex gap-x-3'>
-                      <AiFillCheckCircle
-                        className={cn('h-6 w-5 flex-none ', {
-                          'text-airt-font-base': tier.bestDeal,
-                          'text-airt-primary': !tier.bestDeal,
-                        })}
-                        aria-hidden='true'
-                      />
+                      <AiFillCheckCircle className='h-6 w-5 flex-none text-captn-cta-green' aria-hidden='true' />
                       {feature}
                     </li>
                   ))}
@@ -121,20 +120,6 @@ const PricingPage = () => {
                 <a
                   href={STRIPE_CUSTOMER_PORTAL_LINK}
                   aria-describedby='manage-subscription'
-                  className={cn(
-                    'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-airt-primary',
-                    {
-                      'bg-airt-primary text-white hover:text-white shadow-sm hover:bg-airt-primary': tier.bestDeal,
-                      'text-airt-font-base ring-1 ring-inset ring-purple-200 hover:ring-purple-400': !tier.bestDeal,
-                    }
-                  )}
-                >
-                  Manage Subscription
-                </a>
-              ) : (
-                <button
-                  onClick={() => handleBuyNowClick(tier.id)}
-                  aria-describedby={tier.id}
                   className={cn(
                     {
                       'bg-airt-secondary text-white hover:text-airt-primary shadow-sm hover:bg-airt-font-base':
@@ -147,7 +132,29 @@ const PricingPage = () => {
                     'mt-8 block rounded-md py-2 px-3 text-center text-sm dark:text-white font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-airt-primary'
                   )}
                 >
-                  {!!user ? 'Buy plan' : 'Log in to buy plan'}
+                  {tier.id === 'enterprise-tier' ? 'Contact us' : 'Manage Subscription'}
+                </a>
+              ) : (
+                <button
+                  onClick={() => handleBuyNowClick(tier.id)}
+                  aria-describedby={tier.id}
+                  className={`dark:airt-font-base
+                      ${tier.id === 'enterprise-tier' ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer'}
+                      ${
+                        tier.bestDeal
+                          ? 'bg-airt-secondary text-airt-font-base hover:opacity-80 shadow-sm hover:bg-captn-cta-green-hover'
+                          : 'airt-font-base  ring-1 ring-inset ring-purple-200 hover:ring-purple-400'
+                      }
+                      ${isStripePaymentLoading === tier.id ? 'cursor-wait' : null}
+                      'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-yellow-400 '
+                    `}
+                >
+                  {tier.id === 'enterprise-tier'
+                    ? 'Contact us'
+                    : !!user
+                      ? // ? 'Buy plan'
+                        'Start free trial'
+                      : 'Sign in to buy plan'}
                 </button>
               )}
             </div>