fix: cleanup profile pages in renaming to follow naming convention

cleanup profile page html to be valid

replace old temp design system components with new ones

divider is now correctly an hr element

less section elements to be valid html

apps/scandic-web/components/MyPages/Profile/Communication/communication.module.css

@@ -0,0 +1,10 @@
+.container {
+  display: grid;
+  gap: var(--Space-x3);
+  max-width: 510px;
+}
+
+.content {
+  display: grid;
+  gap: var(--Space-x1);
+}

apps/scandic-web/components/MyPages/Profile/Communication/index.tsx

@@ -0,0 +1,32 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import ManagePreferencesButton from "@/components/Profile/ManagePreferencesButton"
+import { getIntl } from "@/i18n"
+
+import styles from "./communication.module.css"
+
+export default async function CommunicationSlot() {
+  const intl = await getIntl()
+  return (
+    <section className={styles.container}>
+      <div className={styles.content}>
+        <Typography variant="Title/Subtitle/md">
+          <h3>
+            {intl.formatMessage({
+              defaultMessage: "My communication preferences",
+            })}
+          </h3>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            {intl.formatMessage({
+              defaultMessage:
+                "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
+            })}
+          </p>
+        </Typography>
+      </div>
+      <ManagePreferencesButton />
+    </section>
+  )
+}