v3 - InformationMessage Component + replacement in main/page.tsx

src/app/(main)/page.tsx

@@ -7,6 +7,8 @@ import { loadQuery } from "studio/lib/store";
 import { Metadata } from "next";
 import { fetchSeoData, generateMetadataFromSeo } from "src/utils/seo";
 import CustomErrorMessage from "src/blog/components/customErrorMessage/CustomErrorMessage";
+import InformationMessage from "src/blog/components/informationMessage/InformationMessage";
+
 import { LinkType } from "studio/lib/payloads/navigation";
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -43,9 +45,9 @@ const Home = async () => {
 
   if (!landingId) {
     return (
-      <CustomErrorMessage
-        title="Landing Page Has Not Been Set"
-        body="It looks like there's no page set as your landing page in the Studio. Head over to the Studio to select a landing page and guide visitors to the right place!"
+      <InformationMessage
+        title="Welcome! Velkommen! Välkommen!"
+        body={"It looks like there's no page set as your landing page in the Studio.\nHead over to the Studio to select a landing page and guide visitors to the right place!"}
         link={navigationManagerLink}
       />
     );
@@ -59,9 +61,9 @@ const Home = async () => {
 
   if (!initialLandingPage.data) {
     return (
-      <CustomErrorMessage
+      <InformationMessage
         title="Landing Page is Missing Content"
-        body={`Your landing page is set, but it looks like there’s no content yet. Visit the Studio to start adding content and make your landing page come to life!`}
+        body={`Your landing page is set, but it looks like there’s no content yet.\n Visit the Studio to start adding content and make your landing page come to life!`}
         link={pagesLink}
       />
     );

src/blog/components/informationMessage/InformationMessage.tsx

@@ -0,0 +1,66 @@
+import Button from "src/components/buttons/Button";
+import LinkButton from "src/components/linkButton/LinkButton";
+import Text from "src/components/text/Text";
+import { ILink, LinkType } from "studio/lib/payloads/navigation";
+import styles from "./informationMessage.module.css";
+import React from "react";
+
+export const homeLink = {
+  _key: "return-home",
+  _type: "link",
+  linkTitle: "Return to home",
+  linkType: LinkType.Internal,
+  internalLink: {
+    _ref: "/",
+  },
+};
+
+export const studioLink = {
+  _key: "go-to-studio",
+  _type: "link",
+  linkTitle: "Go to studio",
+  linkType: LinkType.Internal,
+  internalLink: { _ref: "/studio" },
+};
+
+interface InformationMessageProps {
+  title: string;
+  body: string;
+  button?: {
+    label: string;
+    onClick: () => void;
+  };
+  link?: ILink;
+}
+
+const InformationMessage = ({
+  title,
+  body,
+  button,
+  link,
+}: InformationMessageProps) => {
+  return (
+    <section className={styles.wrapper} role="status" aria-live="assertive">
+      <div className={styles.info}>
+        <Text type="h1">{title}</Text>
+        <span> 
+        {body.split('\n').map((line, index) => (
+        <Text key={index}>
+            {line}
+            <br />
+        </Text>
+        ))}</span>
+        <div className={styles.buttonWrapper}>
+          {button && (
+            <Button type="primary" onClick={button.onClick}>
+              {button.label}
+            </Button>
+          )}
+          {link && <LinkButton type="primary" link={link} />}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default InformationMessage;

src/blog/components/informationMessage/informationMessage.module.css

@@ -0,0 +1,32 @@
+.wrapper {
+    display: flex;
+    padding: 5rem 2rem;
+    align-items: center;
+    align-self: stretch;
+    @media (min-width: 640px) {
+      padding: 5rem 3rem;
+      justify-content: center;
+    }
+
+    @media (min-width: 1024px) {
+      padding: 7.5rem;
+    }
+  }
+
+  .info {
+    max-width: 88rem;
+    display: flex;
+    padding: 3rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+    align-self: stretch;
+    border-radius: 1rem;
+  }
+
+  .buttonWrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.5rem;
+  }
+