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

app/home/(user)/_components/order-cards.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ChevronRight, HeartPulse } from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardHeader,
+  CardDescription,
+  CardProps,
+  CardFooter,
+} from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@/lib/utils';
+
+const dummyCards = [
+  {
+    title: 'booking:analysisPackages.title',
+    description: 'booking:analysisPackages.description',
+    descriptionColor: 'text-primary',
+    icon: (
+      <Link href={'/home/order-analysis-package'}>
+        <Button size="icon" variant="outline" className="px-2 text-black">
+          <ChevronRight className="size-4 stroke-2" />
+        </Button>
+      </Link>
+    ),
+    cardVariant: 'gradient-success' as CardProps['variant'],
+    iconBg: 'bg-warning',
+  },
+];
+
+export default function OrderCards() {
+  return (
+    <div className="grid grid-cols-3 gap-6 mt-4">
+      {dummyCards.map(({
+        title,
+        description,
+        icon,
+        cardVariant,
+        descriptionColor,
+        iconBg,
+      }) => (
+        <Card
+          key={title}
+          variant={cardVariant}
+          className="flex flex-col justify-between"
+        >
+          <CardHeader className="items-end-safe">
+            <div
+              className={cn(
+                'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
+                iconBg,
+              )}
+            >
+              {icon}
+            </div>
+          </CardHeader>
+          <CardFooter className="flex flex-col items-start gap-2">
+            <div
+              className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
+            >
+              <HeartPulse className="size-4 fill-green-500" />
+            </div>
+            <h5>
+              <Trans i18nKey={title} />
+            </h5>
+            <CardDescription className={descriptionColor}>
+              <Trans i18nKey={description} />
+            </CardDescription>
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}