feat(WEB-304): remaning UI from design system primitives

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

@@ -1,4 +1,4 @@
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
 import ContactRow from "./ContactRow"
@@ -11,9 +11,11 @@ import type { ContactProps } from "@/types/components/loyalty/sidebar"
 export default async function Contact({ contactBlock }: ContactProps) {
   const { formatMessage } = await getIntl()
   return (
-    <div className={styles.contactContainer}>
-      <Title level="h5">{formatMessage({ id: "Contact us" })}</Title>
-      <section>
+    <article className={styles.contactContainer}>
+      <Subtitle textAlign="center">
+        {formatMessage({ id: "Contact us" })}
+      </Subtitle>
+      <section className={styles.contact}>
         {contactBlock.map(({ contact, __typename }, i) => {
           switch (__typename) {
             case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
@@ -28,6 +30,6 @@ export default async function Contact({ contactBlock }: ContactProps) {
           }
         })}
       </section>
-    </div>
+    </article>
   )
 }