diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index bdb3885b5..91537a58b 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -6,13 +6,12 @@ import SectionRenderer from "src/utils/renderSection"; 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 InformationSection from "src/blog/components/informationSection/InformationSection"; import { LinkType } from "studio/lib/payloads/navigation"; export async function generateMetadata(): Promise { const { data: landingId } = await loadQuery(LANDING_QUERY); const seo = await fetchSeoData(SEO_PAGE_QUERY, { id: landingId }); - return generateMetadataFromSeo(seo); } @@ -43,9 +42,11 @@ const Home = async () => { if (!landingId) { return ( - ); @@ -59,9 +60,9 @@ const Home = async () => { if (!initialLandingPage.data) { return ( - ); diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx index 871f2b873..125ce695c 100644 --- a/src/blog/Blog.tsx +++ b/src/blog/Blog.tsx @@ -8,9 +8,8 @@ import BlogHero from "./components/hero/BlogHero"; import PostPreview from "src/blog/components/postPreview/PostPreview"; import PostPreviewGrid from "./components/postPreviewGrid/PostPreviewGrid"; import LoadingNews from "./components/loadingNews/LoadingNews"; -import CustomErrorMessage, { - homeLink, -} from "./components/customErrorMessage/CustomErrorMessage"; +import CustomErrorMessage from "./components/customErrorMessage/CustomErrorMessage"; +import { homeLink } from "./components/utils/linkTypes"; interface BlogProps { blog: BlogPage; diff --git a/src/blog/components/customErrorMessage/CustomErrorMessage.tsx b/src/blog/components/customErrorMessage/CustomErrorMessage.tsx index f921152e1..2c3883102 100644 --- a/src/blog/components/customErrorMessage/CustomErrorMessage.tsx +++ b/src/blog/components/customErrorMessage/CustomErrorMessage.tsx @@ -1,27 +1,9 @@ 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 { ILink } from "studio/lib/payloads/navigation"; import styles from "./customErrorMessage.module.css"; -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 CustomErrorMessageProps { title: string; body: string; diff --git a/src/blog/components/informationSection/InformationSection.tsx b/src/blog/components/informationSection/InformationSection.tsx new file mode 100644 index 000000000..ca63836cb --- /dev/null +++ b/src/blog/components/informationSection/InformationSection.tsx @@ -0,0 +1,34 @@ +import LinkButton from "src/components/linkButton/LinkButton"; +import Text from "src/components/text/Text"; +import { ILink } from "studio/lib/payloads/navigation"; +import styles from "./informationSection.module.css"; +import React from "react"; + +interface InformationSectionProps { + title: string; + body: string; + link?: ILink; +} + +const InformationSection = ({ title, body, link }: InformationSectionProps) => { + return ( +
+
+ {title} + + {body.split("\n").map((line, index) => ( + + {line} +
+
+ ))} +
+
+ {link && } +
+
+
+ ); +}; + +export default InformationSection; diff --git a/src/blog/components/informationSection/informationSection.module.css b/src/blog/components/informationSection/informationSection.module.css new file mode 100644 index 000000000..7f3d7d632 --- /dev/null +++ b/src/blog/components/informationSection/informationSection.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; +} diff --git a/src/blog/components/utils/linkTypes.ts b/src/blog/components/utils/linkTypes.ts new file mode 100644 index 000000000..9c26c81ce --- /dev/null +++ b/src/blog/components/utils/linkTypes.ts @@ -0,0 +1,19 @@ +import { LinkType } from "studio/lib/payloads/navigation"; + +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" }, +};