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

app/home/(user)/(dashboard)/order-analysis-package/page.tsx

@@ -0,0 +1,67 @@
+import { Scale } from 'lucide-react';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { Button } from '@kit/ui/button';
+import SelectAnalysisPackages, { IAnalysisPackage } from '@/components/select-analysis-packages';
+import { PageBody } from '@kit/ui/page';
+
+import ComparePackagesModal from '../../_components/compare-packages-modal';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('order-analysis-package:title');
+
+  return {
+    title,
+  };
+};
+
+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',
+  },
+] satisfies IAnalysisPackage[];
+
+async function OrderAnalysisPackagePage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <PageBody>
+      <div className="space-y-3 text-center">
+        <h3>{t('marketing:selectPackage')}</h3>
+        <ComparePackagesModal
+          triggerElement={
+            <Button variant="secondary" className="gap-2">
+              {t('marketing:comparePackages')}
+              <Scale className="size-4 stroke-[1.5px]" />
+            </Button>
+          }
+        />
+      </div>
+      <SelectAnalysisPackages analysisPackages={dummyCards} />
+    </PageBody>
+  );
+}
+
+export default withI18n(OrderAnalysisPackagePage);