feat: add card grid component

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,26 +1,50 @@
+import { Check } from "react-feather"
+
+import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/Title"
+
+import styles from "./loyaltyLevels.module.css"
+
+import { LevelCardProps } from "@/types/components/loyalty/blocks"
+
 export default async function LoyaltyLevels() {
   const data = await serverClient().loyalty.levels.all()
 
   return (
-    <div>
-      {data.map((level) => (
-        <LevelCard key={level.tier} level={level} />
+    <section className={styles.container}>
+      <div className={styles.cardContainer}>
+        {data.map((level) => (
+          <LevelCard key={level.tier} level={level} />
+        ))}
+      </div>
+      <div className={styles.buttonContainer}>
+        <Button intent="primary" asChild>
+          <Link href={"/compare-all-levels"}>{_("Compare all levels")}</Link>
+        </Button>
+      </div>
+    </section>
+  )
+}
+
+function LevelCard({ level }: LevelCardProps) {
+  return (
+    <div className={styles.card}>
+      <Title level="h4">{level.tier}</Title>
+      <Image src={level.logo} alt={level.name} width={140} height={54} />
+      <p className={styles.qualifications}>
+        {level.requiredPoints} {_("or")} {level.requiredNights} {_("nights")}
+      </p>
+      {level.topBenefits.map((benefit) => (
+        <p key={benefit} className={styles.benefits}>
+          <Check className={styles.icon} />
+          {benefit}
+        </p>
       ))}
     </div>
   )
 }
-
-type LevelCardProps = {
-  level: {
-    tier: number
-    name: string
-    requiredPoints: number
-    requiredNights: string
-    topBenefits: string[]
-  }
-}
-function LevelCard({ level }: LevelCardProps) {
-  return <div></div>
-}