Obi website improvements part 1

src/components/LandingPage/widgets/PriceList/PriceList.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
 
 import { styleBlockLarge } from '../../styles';
-import SelectCurrency from '../../components/select-currency';
-import SmallScreen from './small-screen';
 import LargeScreen from './large-screen';
+import SmallScreen from './small-screen';
+
 import { classNames } from '@/util/utils';
 
 import styles from './PriceList.module.css';
@@ -14,7 +13,6 @@ export default function WidgetPriceList() {
     <>
       <div className={classNames(styles.header, styleBlockLarge)}>
         <div>
-          <SelectCurrency />
           <LargeScreen />
           <SmallScreen />
         </div>

src/components/LandingPage/widgets/PriceList/contact-us/contact-us.module.css

@@ -1,4 +1,4 @@
-.contactUs {
+/* .contactUs {
   padding: 0;
   margin: 0;
   display: flex;
@@ -7,5 +7,10 @@
   justify-content: center;
   align-items: flex-start;
   height: 100%;
-  min-height: 100px;
+  min-height: 120px;
+} */
+
+.contactUs {
+  padding: 0;
+  margin-top: 127px;
 }

src/components/LandingPage/widgets/PriceList/large-screen/PlanHeader/PlanHeader.module.css

@@ -17,7 +17,7 @@
 }
 
 .planHeader ul {
-  margin-top: 2em;
+  /* margin-top: 2em; */
   margin-bottom: 3em;
 }
 
@@ -48,5 +48,44 @@
 }
 
 .priceHeader {
-  min-height: 200px;
+  min-height: 120px;
+}
+
+.paymentPeriodContainer {
+  position: relative;
+  width: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+  font-weight: normal;
+  color: var(--color-primary);
+}
+
+.paymentPeriodToggle {
+  position: relative;
+  width: 36px !important;
+  height: 22px !important;
+  border: solid 1px #ccc !important;
+  border-radius: 6px !important;
+  cursor: pointer;
+}
+
+.toggleButton {
+  position: relative;
+  top: -2px;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: var(--color-primary);
+  transition: left 0.3s ease-in-out;
+}
+
+.paymentMonthy {
+  left: -2px;
+}
+
+.paymentYearly {
+  left: 14px;
 }

src/components/LandingPage/widgets/PriceList/large-screen/PlanHeader/PlanHeader.tsx

@@ -1,13 +1,16 @@
+'use client';
+
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 
 import ContactUs from '../../contact-us';
-import { classNames } from '@/util/utils';
+
+import { useCurrency } from '@/components/LandingPage/atoms';
 import {
   ContentForPricingPlan,
   MultiCurrencyPrice,
 } from '@/components/LandingPage/content/pricing';
-import { useCurrency } from '@/components/LandingPage/atoms';
+import { classNames } from '@/util/utils';
 
 import styles from './PlanHeader.module.css';
 
@@ -21,9 +24,18 @@ export default function PlanHeader({ className, plan }: PlanHeaderProps) {
   const { discount, month, yearDiscount, yearNormal } = usePrices(currency, plan);
   const isFree = (discount || month || 0) <= 0;
 
+  const [paymentPeriod, setPaymentPeriod] = React.useState<'monthly' | 'yearly'>('monthly');
+
   return (
     <div className={classNames(className, styles.planHeader)}>
-      <h2>{plan.title}</h2>
+      {plan.title === 'Pro' ? (
+        <div className="flex w-full flex-row items-center justify-between gap-x-4">
+          <h2>{plan.title}</h2>
+          <PaymentPeriodToggle paymentPeriod={paymentPeriod} setPaymentPeriod={setPaymentPeriod} />
+        </div>
+      ) : (
+        <h2>{plan.title}</h2>
+      )}
       {plan.buttonLabel && <ContactUs>{plan.buttonLabel}</ContactUs>}
       {plan.price.month.length > 0 && (
         <>
@@ -32,32 +44,44 @@ export default function PlanHeader({ className, plan }: PlanHeaderProps) {
               <>
                 <hr />
                 <em>Subscription</em>
-                <div className={classNames(styles.discount, discount ? styles.show : styles.hide)}>
-                  <strong>
-                    {currency} {month}
-                  </strong>
-                  <small>/month</small>
-                </div>
-                <div className={classNames(styles.discount, discount ? styles.show : styles.hide)}>
-                  <strong>
-                    {currency} {yearNormal}
-                  </strong>
-                  <small>/year</small>
-                </div>
-                <div className={styles.price}>
-                  <b>
-                    {currency} {discount || month}
-                  </b>
-                  <small>/month</small>
-                  {discount && <DiscountPill />}
-                </div>
-                <div className={styles.price}>
-                  <b>
-                    {currency} {discount ? yearDiscount : yearNormal}
-                  </b>
-                  <small>/year</small>
-                  {discount && <DiscountPill />}
-                </div>
+                {paymentPeriod === 'monthly' && (
+                  <div
+                    className={classNames(styles.discount, discount ? styles.show : styles.hide)}
+                  >
+                    <strong>
+                      {currency} {month}
+                    </strong>
+                    <small>/month</small>
+                  </div>
+                )}
+                {paymentPeriod === 'yearly' && (
+                  <div
+                    className={classNames(styles.discount, discount ? styles.show : styles.hide)}
+                  >
+                    <strong>
+                      {currency} {yearNormal}
+                    </strong>
+                    <small>/year</small>
+                  </div>
+                )}
+                {paymentPeriod === 'monthly' && (
+                  <div className={styles.price}>
+                    <b>
+                      {currency} {discount || month}
+                    </b>
+                    <small>/month</small>
+                    {discount && <DiscountPill />}
+                  </div>
+                )}
+                {paymentPeriod === 'yearly' && (
+                  <div className={styles.price}>
+                    <b>
+                      {currency} {discount ? yearDiscount : yearNormal}
+                    </b>
+                    <small>/year</small>
+                    {discount && <DiscountPill />}
+                  </div>
+                )}
               </>
             )}
           </div>
@@ -90,3 +114,36 @@ function extractPrice(currency: string, price?: null | MultiCurrencyPrice[]): nu
 function DiscountPill() {
   return <div className={styles.pill}>Special launch price</div>;
 }
+
+function PaymentPeriodToggle({
+  paymentPeriod,
+  setPaymentPeriod,
+}: {
+  paymentPeriod: 'monthly' | 'yearly';
+  setPaymentPeriod: (period: 'monthly' | 'yearly') => void;
+}) {
+  const handleToggle = () => {
+    setPaymentPeriod(paymentPeriod === 'monthly' ? 'yearly' : 'monthly');
+  };
+
+  return (
+    <div className={styles.paymentPeriodContainer}>
+      <div>Monthly</div>
+      <button
+        type="button"
+        name="Toggle payment period"
+        onClick={handleToggle}
+        className={styles.paymentPeriodToggle}
+        aria-label="Toggle payment period"
+      >
+        <div
+          className={classNames(
+            styles.toggleButton,
+            paymentPeriod === 'monthly' ? styles.paymentMonthy : styles.paymentYearly
+          )}
+        />
+      </button>
+      <div>Yearly</div>
+    </div>
+  );
+}