feat: add blocks for loyalty page

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: grid;
+  text-align: center;
+  gap: 0.4rem;
+  padding: 1rem;
+}
+
+.title {
+  font-family: var(--fira-sans);
+  font-size: 1.6rem;
+  font-weight: 700;
+
+  margin: 0;
+}
+
+.value {
+  font-family: var(--fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  margin: 0;
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -0,0 +1,25 @@
+import { serverClient } from "@/lib/trpc/server"
+import { getValueFromContactConfig } from "@/utils/contactConfig"
+
+import styles from "./contactRow.module.css"
+
+import { Lang } from "@/constants/languages"
+import type { ContactFields } from "@/types/requests/contactConfig"
+
+export default async function ContactRow({
+  contact,
+}: {
+  contact: ContactFields
+}) {
+  const data = await serverClient().contentstack.contactConfig.get({
+    lang: Lang.en,
+  })
+
+  const val = getValueFromContactConfig(contact.contact_field, data)
+  return (
+    <div className={styles.container}>
+      <h4 className={styles.title}>{contact.display_text}</h4>
+      <p className={styles.value}>{val}</p>
+    </div>
+  )
+}