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,11 @@ 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 +63,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,67 @@
+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,31 @@
+.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;
+}