feat: blog post

website/src/app/[lang]/news/[slug]/index.module.scss

@@ -1,19 +1,90 @@
 @use '@styles/text-styles';
+@use '@styles/breakpoints';
+@use '@styles/layout';
 
 .post {
-  h1 {
-    @include text-styles.header-1;
+  /* Text styles */
+  &,
+  p {
+    @include text-styles.text-base;
+  }
+
+  p:not(form p) {
+    margin: 0;
+    margin-block-end: var(--spacing-4);
+  }
+
+  a:not([target='_blank']) {
+    @include text-styles.text-link;
+  }
+
+  li:not(:last-of-type) {
+    & p {
+      margin: 0;
+    }
+    margin-block-end: var(--spacing-2);
   }
 
   h2 {
     @include text-styles.header-2;
+    margin: 0;
+    margin-block-end: var(--spacing-4);
+
+    @include breakpoints.small-screen {
+      @include text-styles.header-2__mobile;
+    }
+
+    @include breakpoints.medium-screen {
+      @include text-styles.header-2__mobile;
+    }
   }
 
-  p {
-    @include text-styles.text-base;
+  h3 {
+    @include text-styles.header-3;
+    margin: 0;
+    margin-block-end: var(--spacing-3);
   }
 
   a {
     @include text-styles.text-link;
   }
+
+  &__layout {
+    padding: var(--spacing-6) var(--spacing-16) var(--spacing-24);
+
+    @include breakpoints.medium-screen {
+      padding: var(--spacing-6) var(--spacing-12) var(--spacing-12);
+    }
+
+    @include breakpoints.small-screen {
+      padding: var(--spacing-6) var(--spacing-6) var(--spacing-8)
+        var(--spacing-6);
+    }
+  }
+
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    @include layout.content-max-width;
+    column-gap: var(--spacing-12);
+  }
+
+  &__content {
+    width: 100%;
+    @include layout.max-width-xl;
+  }
+
+  &__aside {
+    flex-basis: 100%;
+    max-width: var(--spacing-56);
+    @include breakpoints.large-screen {
+      order: -1;
+    }
+    @include breakpoints.medium-screen {
+      display: none;
+    }
+    @include breakpoints.small-screen {
+      display: none;
+    }
+  }
 }

website/src/app/[lang]/news/[slug]/page.tsx

@@ -1,11 +1,15 @@
+import PageHeader from '@components/page-header';
 import styles from './index.module.scss';
 
+import PageLatestNews from '@components/page-latest-news';
+import SupportBanner from '@components/support-banner';
 import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
 import { getClient } from '@graphql/client';
 import {
   GetPostDocument,
   type GetPostQuery,
 } from '@graphql/queries/post/index.generated';
+import type { AvailableLocale } from '@i18n/locales';
 import type { NewsPagePropsWithLocale } from '@shared/types/page-with-locale-params';
 import { getIntlDateStrings } from '@shared/utils/intl-date';
 import { renderNode } from '@shared/utils/rich-text';
@@ -44,6 +48,13 @@ export async function generateMetadata({
   };
 }
 
+const blogPostLoale: Record<AvailableLocale, string> = {
+  en: 'Blog post',
+  es: 'Entrada de blog',
+  fr: 'Article de blog',
+  de: 'Blogbeitrag',
+};
+
 const Page: NextPage<NewsPagePropsWithLocale> = async ({ params }) => {
   const { lang, slug } = await params;
 
@@ -83,13 +94,26 @@ const Page: NextPage<NewsPagePropsWithLocale> = async ({ params }) => {
         // biome-ignore lint/security/noDangerouslySetInnerHtml: this is a safe usage
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
-      <div className="content-wrapper">
-        <h1>{post?.title}</h1>
-        <p>
-          Published: <time dateTime={dateTime}>{publishedString}</time>
-        </p>
-        {documentToReactComponents(post?.body?.json, { renderNode })}
+      <PageHeader
+        pageTitle={post?.title ?? ''}
+        imageUrl={post?.image?.url ?? undefined}
+        lang={lang}
+        lastUpdated={post?.date ?? ''}
+        sectionTitle={blogPostLoale[lang]}
+      />
+
+      <div className={styles.post__layout}>
+        <div className={styles.post__row}>
+          <div className={styles.post__content}>
+            {documentToReactComponents(post?.body?.json, { renderNode })}
+          </div>
+          <div className={styles.post__aside}>
+            <PageLatestNews lang={lang} />
+          </div>
+        </div>
       </div>
+
+      <SupportBanner lang={lang} />
     </article>
   );
 };

website/src/components/page-header/index.module.scss

@@ -70,12 +70,11 @@ $mobile-curve: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fil
       &::before {
         background-image: url($desktop-curve);
         background-repeat: no-repeat;
-        background-size: contain;
+        background-size: contain !important;
         content: ' ';
         display: block;
         inset: 0;
         left: -1px;
-        bottom: -1px;
         position: absolute;
       }
 

website/src/components/page-latest-news/index.module.scss

@@ -5,6 +5,7 @@
     list-style-type: none;
     padding: 0;
     margin: 0;
+    margin-block-end: var(--spacing-4);
   }
 
   li:not(:last-of-type) {
@@ -57,4 +58,8 @@
 
     @include text-styles.header-4;
   }
+
+  & &__see-all:is(a) {
+    @include text-styles.text-link;
+  }
 }

website/src/components/page-latest-news/index.tsx

@@ -39,7 +39,7 @@ const BlogPostCards: React.FC<BlogPostCardsProps> = ({
   });
 
   return (
-    <Link href={`/${lang}/blog/${slug}`}>
+    <Link href={`/${lang}/news/${slug}`}>
       <article>
         <p>Blog</p>
         <h4>{title}</h4>
@@ -92,6 +92,12 @@ const PageLatestNews: React.FC<PageLatestNewsProps> = async ({ lang }) => {
           </li>
         ))}
       </ul>
+      <Link
+        href={`/${lang}/news`}
+        className={styles['latest-news-content__see-all']}
+      >
+        See all
+      </Link>
     </div>
   );
 };

website/src/styles/_layout.scss

@@ -3,6 +3,10 @@ $content-max-width-7xl: 1280px;
 $content-max-width-2xl: 672px;
 $content-max-width-xl: 672px;
 
+@mixin max-width-xl {
+  max-width: $content-max-width-2xl;
+}
+
 .large-content-wrapper {
   max-width: 1400px;
   margin: 0 auto;

website/src/styles/_text-styles.scss

@@ -73,6 +73,19 @@
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
+
+  &:hover {
+    color: var(--foreground-interactive-hover);
+  }
+
+  &:hover,
+  focus {
+    color: var(--foreground-interactive-hover);
+  }
+
+  &:active {
+    color: var(--foreground-interactive-press_active);
+  }
 }
 
 @mixin text-small {