B2B-98: add package selection page (#26)

* B2B-98: add packages

* B2B-98: add packages

* rename page

* use config path instead of hardcoded

* add link to successful registration

---------

Co-authored-by: Helena <helena@Helenas-MacBook-Pro.local>

app/(marketing)/pricing/page.tsx

@@ -1,39 +0,0 @@
-import { PricingTable } from '@kit/billing-gateway/marketing';
-
-import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
-import billingConfig from '~/config/billing.config';
-import pathsConfig from '~/config/paths.config';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export const generateMetadata = async () => {
-  const { t } = await createI18nServerInstance();
-
-  return {
-    title: t('marketing:pricing'),
-  };
-};
-
-const paths = {
-  signUp: pathsConfig.auth.signUp,
-  return: pathsConfig.app.home,
-};
-
-async function PricingPage() {
-  const { t } = await createI18nServerInstance();
-
-  return (
-    <div className={'flex flex-col space-y-12'}>
-      <SitePageHeader
-        title={t('marketing:pricing')}
-        subtitle={t('marketing:pricingSubtitle')}
-      />
-
-      <div className={'container mx-auto pb-8 xl:pb-16'}>
-        <PricingTable paths={paths} config={billingConfig} />
-      </div>
-    </div>
-  );
-}
-
-export default withI18n(PricingPage);

app/home/(user)/_components/home-menu-navigation.tsx

@@ -2,7 +2,6 @@ import { ShoppingCart } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
 import { Trans } from '@kit/ui/trans';
-import { cn } from '@kit/ui/utils';
 
 import { AppLogo } from '~/components/app-logo';
 import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
@@ -18,7 +17,7 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
 
   return (
     <div className={'flex w-full flex-1 items-center justify-between gap-3'}>
-      <div className={cn('flex items-center', `w-[${SIDEBAR_WIDTH}]`)}>
+      <div className={`flex items-center w-[${SIDEBAR_WIDTH}]`}>
         <AppLogo />
       </div>
       <Search

app/select-package/page.tsx

@@ -0,0 +1,126 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Scale } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@kit/ui/card';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { MedReportLogo } from '../../components/med-report-logo';
+import { PackageHeader } from '../../components/package-header';
+import { ButtonTooltip } from '../../components/ui/button-tooltip';
+import pathsConfig from '../../config/paths.config';
+
+export const generateMetadata = async () => {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:pricing'),
+  };
+};
+
+const dummyCards = [
+  {
+    titleKey: 'product:standard.label',
+    price: 40,
+    nrOfAnalyses: 4,
+    tagColor: 'bg-cyan',
+    descriptionKey: 'marketing:standard.description',
+  },
+  {
+    titleKey: 'product:standardPlus.label',
+    price: 85,
+    nrOfAnalyses: 10,
+
+    tagColor: 'bg-warning',
+    descriptionKey: 'product:standardPlus.description',
+  },
+  {
+    titleKey: 'product:premium.label',
+    price: 140,
+    nrOfAnalyses: '12+',
+
+    tagColor: 'bg-purple',
+    descriptionKey: 'product:premium.description',
+  },
+];
+
+async function SelectPackagePage() {
+  const { t, language } = await createI18nServerInstance();
+
+  return (
+    <div className="container mx-auto my-24 flex flex-col items-center space-y-12">
+      <MedReportLogo />
+      <div className="space-y-3 text-center">
+        <h3>{t('marketing:selectPackage')}</h3>
+        <Button variant="secondary" className="gap-2">
+          {t('marketing:comparePackages')}
+          <Scale className="size-4 stroke-[1.5px]" />
+        </Button>
+      </div>
+      <div className="grid grid-cols-3 gap-6">
+        {dummyCards.map(
+          (
+            { titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
+            index,
+          ) => {
+            return (
+              <Card key={index}>
+                <CardHeader className="relative">
+                  <ButtonTooltip
+                    content="Content pending"
+                    className="absolute top-5 right-5 z-10"
+                  />
+                  <Image
+                    src="/assets/card-image.png"
+                    alt="background"
+                    width={326}
+                    height={195}
+                    className="max-h-48 w-full opacity-10"
+                  />
+                </CardHeader>
+                <CardContent className="space-y-1 text-center">
+                  <PackageHeader
+                    title={t(titleKey)}
+                    tagColor={tagColor}
+                    analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
+                    language={language}
+                    price={price}
+                  />
+                  <CardDescription>{t(descriptionKey)}</CardDescription>
+                </CardContent>
+                <CardFooter>
+                  <Button className="w-full">
+                    {t('marketing:selectThisPackage')}
+                  </Button>
+                </CardFooter>
+              </Card>
+            );
+          },
+        )}
+        <div className="col-span-3 grid grid-cols-subgrid">
+          <div className="col-start-2 justify-self-center-safe">
+            <Link href={pathsConfig.app.home}>
+              <Button variant="secondary" className="align-center">
+                {t('marketing:notInterestedInAudit')}{' '}
+                <CaretRightIcon className="size-4" />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(SelectPackagePage);

components/package-header.tsx

@@ -0,0 +1,31 @@
+import { formatCurrency } from "@kit/shared/utils";
+import { Badge } from "@kit/ui/badge";
+import { cn } from "@kit/ui/utils";
+
+export const PackageHeader = ({
+  title,
+  tagColor,
+  analysesNr,
+  language,
+  price,
+}: {
+  title: string;
+  tagColor: string;
+  analysesNr: string;
+  language: string;
+  price: string | number;
+}) => {
+  return (
+    <div className="space-y-1 text-center">
+      <p className="font-medium">{title}</p>
+      <Badge className={cn('text-xs', tagColor)}>{analysesNr}</Badge>
+      <h2>
+        {formatCurrency({
+          currencyCode: 'eur',
+          locale: language,
+          value: price,
+        })}
+      </h2>
+    </div>
+  );
+};

components/ui/button-tooltip.tsx

@@ -0,0 +1,31 @@
+import { Info } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@kit/ui/tooltip';
+
+export function ButtonTooltip({
+  content,
+  className,
+}: {
+  content?: string;
+  className?: string;
+}) {
+  if (!content) return null;
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button className={className} variant="outline" size="icon">
+            <Info className="size-4 cursor-pointer" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{content}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

config/paths.config.ts

@@ -13,6 +13,7 @@ const PathsSchema = z.object({
   }),
   app: z.object({
     home: z.string().min(1),
+    selectPackage: z.string().min(1),
     booking: z.string().min(1),
     myOrders: z.string().min(1),
     analysisResults: z.string().min(1),
@@ -53,13 +54,14 @@ const pathsConfig = PathsSchema.parse({
     accountMembers: `/home/[account]/members`,
     accountBillingReturn: `/home/[account]/billing/return`,
     joinTeam: '/join',
+    selectPackage: '/select-package',
     // these routes are added as placeholders and can be changed when the pages are added
     booking: '/booking',
     myOrders: '/my-orders',
     analysisResults: '/analysis-results',
     orderAnalysisPackage: '/order-analysis-package',
     orderAnalysis: '/order-analysis',
-    orderHealthAnalysis: '/order-health-analysis'
+    orderHealthAnalysis: '/order-health-analysis',
   },
 } satisfies z.infer<typeof PathsSchema>);
 

lib/i18n/i18n.settings.ts

@@ -33,6 +33,7 @@ export const defaultI18nNamespaces = [
   'billing',
   'marketing',
   'dashboard',
+  'product',
 ];
 
 /**

packages/billing/gateway/src/components/pricing-table.tsx

@@ -1,519 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import Link from 'next/link';
-
-import { ArrowRight, CheckCircle } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-
-import {
-  BillingConfig,
-  type LineItemSchema,
-  getPlanIntervals,
-  getPrimaryLineItem,
-} from '@kit/billing';
-import { Badge } from '@kit/ui/badge';
-import { Button } from '@kit/ui/button';
-import { If } from '@kit/ui/if';
-import { Trans } from '@kit/ui/trans';
-import { cn } from '@kit/ui/utils';
-
-import { LineItemDetails } from './line-item-details';
-import { PlanCostDisplay } from './plan-cost-display';
-
-interface Paths {
-  signUp: string;
-  return: string;
-}
-
-type Interval = 'month' | 'year';
-
-export function PricingTable({
-  config,
-  paths,
-  CheckoutButtonRenderer,
-  redirectToCheckout = true,
-  displayPlanDetails = true,
-  alwaysDisplayMonthlyPrice = true,
-}: {
-  config: BillingConfig;
-  paths: Paths;
-  displayPlanDetails?: boolean;
-  alwaysDisplayMonthlyPrice?: boolean;
-  redirectToCheckout?: boolean;
-
-  CheckoutButtonRenderer?: React.ComponentType<{
-    planId: string;
-    productId: string;
-    highlighted?: boolean;
-  }>;
-}) {
-  const intervals = getPlanIntervals(config).filter(Boolean) as Interval[];
-  const [interval, setInterval] = useState(intervals[0]!);
-
-  // Always filter out hidden products
-  const visibleProducts = config.products.filter((product) => !product.hidden);
-
-  return (
-    <div className={'flex flex-col space-y-8 xl:space-y-12'}>
-      <div className={'flex justify-center'}>
-        {intervals.length > 1 ? (
-          <PlanIntervalSwitcher
-            intervals={intervals}
-            interval={interval}
-            setInterval={setInterval}
-          />
-        ) : null}
-      </div>
-
-      <div
-        className={
-          'flex flex-col items-start space-y-6 lg:space-y-0' +
-          ' justify-center lg:flex-row lg:space-x-4'
-        }
-      >
-        {visibleProducts.map((product) => {
-          const plan = product.plans.find((plan) => {
-            if (plan.paymentType === 'recurring') {
-              return plan.interval === interval;
-            }
-
-            return plan;
-          });
-
-          if (!plan) {
-            return null;
-          }
-
-          const primaryLineItem = getPrimaryLineItem(config, plan.id);
-
-          if (!plan.custom && !primaryLineItem) {
-            throw new Error(`Primary line item not found for plan ${plan.id}`);
-          }
-
-          return (
-            <PricingItem
-              selectable
-              key={plan.id}
-              plan={plan}
-              redirectToCheckout={redirectToCheckout}
-              primaryLineItem={primaryLineItem}
-              product={product}
-              paths={paths}
-              displayPlanDetails={displayPlanDetails}
-              alwaysDisplayMonthlyPrice={alwaysDisplayMonthlyPrice}
-              CheckoutButton={CheckoutButtonRenderer}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function PricingItem(
-  props: React.PropsWithChildren<{
-    className?: string;
-    displayPlanDetails: boolean;
-
-    paths: Paths;
-
-    selectable: boolean;
-
-    primaryLineItem: z.infer<typeof LineItemSchema> | undefined;
-
-    redirectToCheckout?: boolean;
-    alwaysDisplayMonthlyPrice?: boolean;
-
-    plan: {
-      id: string;
-      lineItems: z.infer<typeof LineItemSchema>[];
-      interval?: Interval;
-      name?: string;
-      href?: string;
-      label?: string;
-      custom?: boolean;
-    };
-
-    CheckoutButton?: React.ComponentType<{
-      planId: string;
-      productId: string;
-      highlighted?: boolean;
-    }>;
-
-    product: {
-      id: string;
-      name: string;
-      currency: string;
-      description: string;
-      badge?: string;
-      highlighted?: boolean;
-      features: string[];
-    };
-  }>,
-) {
-  const highlighted = props.product.highlighted ?? false;
-  const lineItem = props.primaryLineItem!;
-  const isCustom = props.plan.custom ?? false;
-
-  // we exclude flat line items from the details since
-  // it doesn't need further explanation
-  const lineItemsToDisplay = props.plan.lineItems.filter((item) => {
-    return item.type !== 'flat';
-  });
-
-  const interval = props.plan.interval as Interval;
-
-  return (
-    <div
-      data-cy={'subscription-plan'}
-      className={cn(
-        props.className,
-        `s-full relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded-lg border px-6 py-5 lg:w-4/12 xl:max-w-[20rem]`,
-        {
-          ['border-primary']: highlighted,
-          ['border-border']: !highlighted,
-        },
-      )}
-    >
-      <If condition={props.product.badge}>
-        <div className={'absolute -top-2.5 left-0 flex w-full justify-center'}>
-          <Badge
-            className={highlighted ? '' : 'bg-background'}
-            variant={highlighted ? 'default' : 'outline'}
-          >
-            <span>
-              <Trans
-                i18nKey={props.product.badge}
-                defaults={props.product.badge}
-              />
-            </span>
-          </Badge>
-        </div>
-      </If>
-
-      <div className={'flex flex-col gap-y-5'}>
-        <div className={'flex flex-col gap-y-1'}>
-          <div className={'flex items-center space-x-6'}>
-            <b
-              className={
-                'text-secondary-foreground font-heading text-xl font-medium tracking-tight'
-              }
-            >
-              <Trans
-                i18nKey={props.product.name}
-                defaults={props.product.name}
-              />
-            </b>
-          </div>
-        </div>
-
-        <div className={'mt-6 flex flex-col gap-y-1'}>
-          <Price
-            isMonthlyPrice={props.alwaysDisplayMonthlyPrice}
-            displayBillingPeriod={!props.plan.label}
-          >
-            <If
-              condition={!isCustom}
-              fallback={
-                <Trans i18nKey={props.plan.label} defaults={props.plan.label} />
-              }
-            >
-              <PlanCostDisplay
-                primaryLineItem={lineItem}
-                currencyCode={props.product.currency}
-                interval={interval}
-                alwaysDisplayMonthlyPrice={props.alwaysDisplayMonthlyPrice}
-              />
-            </If>
-          </Price>
-
-          <If condition={props.plan.name}>
-            <span
-              className={cn(
-                `animate-in slide-in-from-left-4 fade-in text-muted-foreground flex items-center gap-x-1 text-xs capitalize`,
-              )}
-            >
-              <span>
-                <If
-                  condition={props.plan.interval}
-                  fallback={<Trans i18nKey={'billing:lifetime'} />}
-                >
-                  {(interval) => (
-                    <Trans i18nKey={`billing:billingInterval.${interval}`} />
-                  )}
-                </If>
-              </span>
-
-              <If condition={lineItem && lineItem?.type !== 'flat'}>
-                <span>/</span>
-
-                <span
-                  className={cn(
-                    `animate-in slide-in-from-left-4 fade-in text-sm capitalize`,
-                  )}
-                >
-                  <If condition={lineItem?.type === 'per_seat'}>
-                    <Trans i18nKey={'billing:perTeamMember'} />
-                  </If>
-
-                  <If condition={lineItem?.unit}>
-                    <Trans
-                      i18nKey={'billing:perUnit'}
-                      values={{
-                        unit: lineItem?.unit,
-                      }}
-                    />
-                  </If>
-                </span>
-              </If>
-            </span>
-          </If>
-        </div>
-
-        <If condition={props.selectable}>
-          <If
-            condition={props.plan.id && props.CheckoutButton}
-            fallback={
-              <DefaultCheckoutButton
-                paths={props.paths}
-                product={props.product}
-                highlighted={highlighted}
-                plan={props.plan}
-                redirectToCheckout={props.redirectToCheckout}
-              />
-            }
-          >
-            {(CheckoutButton) => (
-              <CheckoutButton
-                highlighted={highlighted}
-                planId={props.plan.id}
-                productId={props.product.id}
-              />
-            )}
-          </If>
-        </If>
-
-        <span className={cn(`text-muted-foreground text-base tracking-tight`)}>
-          <Trans
-            i18nKey={props.product.description}
-            defaults={props.product.description}
-          />
-        </span>
-
-        <div className={'h-px w-full border border-dashed'} />
-
-        <div className={'flex flex-col'}>
-          <FeaturesList
-            highlighted={highlighted}
-            features={props.product.features}
-          />
-        </div>
-
-        <If condition={props.displayPlanDetails && lineItemsToDisplay.length}>
-          <div className={'h-px w-full border border-dashed'} />
-
-          <div className={'flex flex-col space-y-2'}>
-            <h6 className={'text-sm font-semibold'}>
-              <Trans i18nKey={'billing:detailsLabel'} />
-            </h6>
-
-            <LineItemDetails
-              selectedInterval={props.plan.interval}
-              currency={props.product.currency}
-              lineItems={lineItemsToDisplay}
-            />
-          </div>
-        </If>
-      </div>
-    </div>
-  );
-}
-
-function FeaturesList(
-  props: React.PropsWithChildren<{
-    features: string[];
-    highlighted: boolean;
-  }>,
-) {
-  return (
-    <ul className={'flex flex-col gap-1'}>
-      {props.features.map((feature) => {
-        return (
-          <ListItem highlighted={props.highlighted} key={feature}>
-            <Trans i18nKey={feature} defaults={feature} />
-          </ListItem>
-        );
-      })}
-    </ul>
-  );
-}
-
-function Price({
-  children,
-  isMonthlyPrice = true,
-  displayBillingPeriod = true,
-}: React.PropsWithChildren<{
-  isMonthlyPrice?: boolean;
-  displayBillingPeriod?: boolean;
-}>) {
-  return (
-    <div
-      className={`animate-in slide-in-from-left-4 fade-in flex items-end gap-1 duration-500`}
-    >
-      <span
-        className={
-          'font-heading flex items-center text-4xl font-medium tracking-tighter'
-        }
-      >
-        {children}
-      </span>
-
-      <If condition={isMonthlyPrice && displayBillingPeriod}>
-        <span className={'text-muted-foreground text-sm leading-loose'}>
-          <span>/</span>
-
-          <Trans i18nKey={'billing:perMonth'} />
-        </span>
-      </If>
-    </div>
-  );
-}
-
-function ListItem({
-  children,
-  highlighted,
-}: React.PropsWithChildren<{
-  highlighted: boolean;
-}>) {
-  return (
-    <li className={'flex items-center gap-x-2.5'}>
-      <CheckCircle
-        className={cn('h-4 min-h-4 w-4 min-w-4', {
-          'text-secondary-foreground': highlighted,
-          'text-muted-foreground': !highlighted,
-        })}
-      />
-
-      <span
-        className={cn('text-sm', {
-          'text-muted-foreground': !highlighted,
-          'text-secondary-foreground': highlighted,
-        })}
-      >
-        {children}
-      </span>
-    </li>
-  );
-}
-
-function PlanIntervalSwitcher(
-  props: React.PropsWithChildren<{
-    intervals: Interval[];
-    interval: Interval;
-    setInterval: (interval: Interval) => void;
-  }>,
-) {
-  return (
-    <div className={'flex gap-x-1 rounded-full border p-1.5'}>
-      {props.intervals.map((plan, index) => {
-        const selected = plan === props.interval;
-
-        const className = cn(
-          'animate-in fade-in !outline-hidden rounded-full transition-all focus:!ring-0',
-          {
-            'border-r-transparent': index === 0,
-            ['hover:text-primary text-muted-foreground']: !selected,
-            ['cursor-default font-semibold']: selected,
-            ['hover:bg-initial']: !selected,
-          },
-        );
-
-        return (
-          <Button
-            key={plan}
-            size={'sm'}
-            variant={selected ? 'default' : 'ghost'}
-            className={className}
-            onClick={() => props.setInterval(plan)}
-          >
-            <span className={'flex items-center'}>
-              <CheckCircle
-                className={cn('animate-in fade-in zoom-in-95 h-3.5', {
-                  hidden: !selected,
-                  'slide-in-from-left-4': index === 0,
-                  'slide-in-from-right-4': index === props.intervals.length - 1,
-                })}
-              />
-
-              <span className={'capitalize'}>
-                <Trans i18nKey={`common:billingInterval.${plan}`} />
-              </span>
-            </span>
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
-function DefaultCheckoutButton(
-  props: React.PropsWithChildren<{
-    plan: {
-      id: string;
-      name?: string | undefined;
-      href?: string;
-      buttonLabel?: string;
-    };
-
-    product: {
-      name: string;
-    };
-
-    paths: Paths;
-    redirectToCheckout?: boolean;
-
-    highlighted?: boolean;
-  }>,
-) {
-  const { t } = useTranslation('billing');
-
-  const signUpPath = props.paths.signUp;
-
-  const searchParams = new URLSearchParams({
-    next: props.paths.return,
-    plan: props.plan.id,
-    redirectToCheckout: props.redirectToCheckout ? 'true' : 'false',
-  });
-
-  const linkHref =
-    props.plan.href ?? `${signUpPath}?${searchParams.toString()}`;
-
-  const label = props.plan.buttonLabel ?? 'common:getStartedWithPlan';
-
-  return (
-    <Link className={'w-full'} href={linkHref}>
-      <Button
-        size={'lg'}
-        className={'h-12 w-full rounded-lg'}
-        variant={props.highlighted ? 'default' : 'secondary'}
-      >
-        <span className={'text-base font-medium tracking-tight'}>
-          <Trans
-            i18nKey={label}
-            defaults={label}
-            values={{
-              plan: t(props.product.name, {
-                defaultValue: props.product.name,
-              }),
-            }}
-          />
-        </span>
-
-        <ArrowRight className={'ml-2 h-4'} />
-      </Button>
-    </Link>
-  );
-}

packages/features/notifications/src/components/update-account-success-notification.tsx

@@ -32,7 +32,7 @@ export const UpdateAccountSuccessNotification = ({
       descriptionKey="account:updateAccount:successDescription"
       buttonProps={{
         buttonTitleKey: 'account:updateAccount:successButton',
-        href: pathsConfig.app.home,
+        href: pathsConfig.app.selectPackage,
       }}
     />
   );

public/locales/en/marketing.json

@@ -36,5 +36,9 @@
   "contactErrorDescription": "An error occurred while sending your message. Please try again later",
   "footerDescription": "Here you can add a description about your company or product",
   "copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
-  "heroSubtitle": "A simple, convenient, and quick overview of your health condition"
-}
+  "heroSubtitle": "A simple, convenient, and quick overview of your health condition",
+  "selectPackage": "Select package",
+  "selectThisPackage": "Select this package",
+  "comparePackages": "Compare packages",
+  "notInterestedInAudit": "Currently not interested in a health audit"
+}

public/locales/en/product.json

@@ -0,0 +1,15 @@
+{
+    "standard": {
+        "label": "Standard",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "standardPlus": {
+        "label": "Standard +",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "premium": {
+        "label": "Premium",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "nrOfAnalyses": "{{nr}} analyses"
+}

public/locales/et/marketing.json

@@ -36,5 +36,9 @@
   "contactErrorDescription": "An error occurred while sending your message. Please try again later",
   "footerDescription": "Here you can add a description about your company or product",
   "copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
-  "heroSubtitle": "Lihtne, mugav ja kiire ülevaade oma tervisest"
-}
+  "heroSubtitle": "Lihtne, mugav ja kiire ülevaade oma tervisest",
+  "selectPackage": "Vali pakett",
+  "selectThisPackage": "Vali see pakett",
+  "comparePackages": "Võrdle pakette",
+  "notInterestedInAudit": "Ei soovi hetkel terviseauditit"
+}

public/locales/et/product.json

@@ -0,0 +1,15 @@
+{
+    "standard": {
+        "label": "Standard",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "standardPlus": {
+        "label": "Standard +",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "premium": {
+        "label": "Premium",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "nrOfAnalyses": "{{nr}} analüüsi"
+}

public/locales/ru/marketing.json

@@ -36,5 +36,9 @@
   "contactErrorDescription": "An error occurred while sending your message. Please try again later",
   "footerDescription": "Here you can add a description about your company or product",
   "copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
-  "heroSubtitle": "A simple, convenient, and quick overview of your health condition"
-}
+  "heroSubtitle": "A simple, convenient, and quick overview of your health condition",
+  "selectPackage": "Select package",
+  "selectThisPackage": "Select this package",
+  "comparePackages": "Compare packages",
+  "notInterestedInAudit": "Currently not interested in a health audit"
+}

public/locales/ru/product.json

@@ -0,0 +1,15 @@
+{
+    "standard": {
+        "label": "Standard",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "standardPlus": {
+        "label": "Standard +",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "premium": {
+        "label": "Premium",
+        "description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
+    },
+    "nrOfAnalyses": "{{nr}} analyses"
+}

styles/theme.css

@@ -52,6 +52,9 @@
   --cyan: hsla(189, 94%, 43%, 1);
   --color-cyan: var(--cyan);
 
+  --purple: hsla(292, 84%, 61%, 1);
+  --color-purple: var(--purple);
+
   /* text colors */
   --color-text-foreground: var(--foreground);
   --color-text-primary: var(--primary);