feat(MED-122): update analysis packages page, pageheader

app/select-package/page.tsx

@@ -1,24 +1,15 @@
-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 SelectAnalysisPackages from '@/components/select-analysis-packages';
 
 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';
 import ComparePackagesModal from '../home/(user)/_components/compare-packages-modal';
 
@@ -30,34 +21,8 @@ export const generateMetadata = async () => {
   };
 };
 
-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();
+  const { t } = await createI18nServerInstance();
 
   return (
     <div className="container mx-auto my-24 flex flex-col items-center space-y-12">
@@ -73,57 +38,13 @@ async function SelectPackagePage() {
           }
         />
       </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>
+      <SelectAnalysisPackages />
+      <Link href={pathsConfig.app.home}>
+        <Button variant="secondary" className="align-center">
+          {t('marketing:notInterestedInAudit')}{' '}
+          <CaretRightIcon className="size-4" />
+        </Button>
+      </Link>
     </div>
   );
 }