diff --git a/apps/frontend/components/shared/Icon.tsx b/apps/frontend/components/shared/Icon.tsx index 12ef5485d..600d566ff 100644 --- a/apps/frontend/components/shared/Icon.tsx +++ b/apps/frontend/components/shared/Icon.tsx @@ -626,18 +626,24 @@ export default function Icon({ name, className }: IconProps) { case "calendar": return ( + + ); @@ -1648,6 +1654,23 @@ export default function Icon({ name, className }: IconProps) { /> ); + + case "countdown-timer": + return ( + + + + ); } } diff --git a/apps/frontend/components/shared/RichText.tsx b/apps/frontend/components/shared/RichText.tsx index 7325f2563..7ac145cd9 100644 --- a/apps/frontend/components/shared/RichText.tsx +++ b/apps/frontend/components/shared/RichText.tsx @@ -85,7 +85,7 @@ function createDefaultComponents( {...prepareProps(props)} className={cx({ uppercase: usage === "default", - "s-heading py-4": usage === "textPage", + "s-heading py-4": usage === "textPage", })} > {props.children} @@ -101,6 +101,11 @@ function createDefaultComponents( {props.children} ), + p: (props) => ( +

+ {props.children} +

+ ), normal: (props) => (

diff --git a/apps/frontend/components/shared/pt.blocks/Image.tsx b/apps/frontend/components/shared/pt.blocks/Image.tsx index de3bd559e..2c82b6171 100644 --- a/apps/frontend/components/shared/pt.blocks/Image.tsx +++ b/apps/frontend/components/shared/pt.blocks/Image.tsx @@ -4,8 +4,8 @@ import { SanityImage } from "../SanityImage"; export default function ImageBlock(props: ImageBlock) { return ( -

-
+
+
{ {props.caption && ( -

+

{props.caption}

)} diff --git a/apps/frontend/components/shared/pt.blocks/Quote.tsx b/apps/frontend/components/shared/pt.blocks/Quote.tsx index ddb75c708..02e8b71a2 100644 --- a/apps/frontend/components/shared/pt.blocks/Quote.tsx +++ b/apps/frontend/components/shared/pt.blocks/Quote.tsx @@ -3,7 +3,7 @@ import { SanityImage } from "../SanityImage"; export const Quote = (props: QuoteProps) => { return ( -
+
{props.image && ( { alt={props.authorImage?.alt} /> )} - + {props.quote} -
+
{props.authorImage && ( )} -
+
{props.authorName} @@ -40,9 +40,5 @@ export const Quote = (props: QuoteProps) => { }; export default function QuoteBlock(props: QuoteProps) { - return ( -
- -
- ); + return ; } diff --git a/apps/frontend/components/templates/BlogArticlePage/BlogArticlePageContent.tsx b/apps/frontend/components/templates/BlogArticlePage/BlogArticlePageContent.tsx index 3fe4254c0..477fd3002 100644 --- a/apps/frontend/components/templates/BlogArticlePage/BlogArticlePageContent.tsx +++ b/apps/frontend/components/templates/BlogArticlePage/BlogArticlePageContent.tsx @@ -7,7 +7,6 @@ import { SanityImage } from "@/components/shared/SanityImage"; import { SanityLink } from "@/components/shared/SanityLink"; import Section from "@/components/shared/Section"; import TableOfContents from "@/components/shared/TableOfContents"; -import Tag from "@/components/shared/Tag"; import { CUSTOMER_STORY_TAG } from "@/constants"; import type { @@ -34,117 +33,118 @@ export default function BlogArticlePageContent(props: BlogArticlePayload) { return (
-
- {/* Link back to /blog */} -
- - - {props.globalLabels?.backToIndex || "Back to blog"} - -
- - {/* Header */} -
-
- {isCustomerStory ? ( - +
+ {/* Header */} +
+ {/* Link back to /blog */} +
+ - {CUSTOMER_STORY_TAG.label} - - ) : ( - props?.tags?.map((tag) => ( + {props.globalLabels?.backToIndex || "Back to blog"} + + + {isCustomerStory ? ( - {tag?.title} + + {CUSTOMER_STORY_TAG.label} + - )) - )} -
-

{props?.title}

-
- {props.publishedAt && ( - - )} - - ยท - - {typeof props.readTime === "number" && ( - - {Number(props.readTime)} min read - - )} -
- -
-
- {props.authors && ( - <> -
- -
- - )} - {isCustomerStory && customerStorySidebar?.features && ( - <> - - - )} - - {isCustomerStory && customerStorySidebar?.stats && ( - <> - - + ) : ( + props?.tags?.map((tag) => ( + + + {tag?.title} + + + )) )}
-
- {isCustomerStory - ? null - : articleSidebar?.showToc && - toc.length > 0 && ( + +

+ {props?.title} +

+ + +
+
+ {isCustomerStory && customerStorySidebar?.features && ( + <> + + + )} + + {isCustomerStory && customerStorySidebar?.stats && ( <> - -
+ )} +
+ {isCustomerStory + ? null + : articleSidebar?.showToc && + toc.length > 0 && ( + <> + +
+ + )} +
-
-
- {/* Body */} -
- {props?.body && ( - <> +
+ {/* Body */} +
+
+ {typeof props.readTime === "number" && ( + + + {Number(props.readTime)} min read + + )} + + {props.publishedAt && ( + + )} +
+ {props?.body && ( -
- - )} -
- {/* Sidebar */} -
+ {/* Sidebar */} + {/* -
+ */} +
- {/* Footer */} -
- {props?.relatedArticles ? ( - <> - ({ - title: article?.title || "", - href: article?.pathname?.split("/")[2] || "", - }))} - /> - - ) : null} + {/* Footer */} +
+ {props?.relatedArticles ? ( + <> + ({ + title: article?.title || "", + href: article?.pathname?.split("/")[2] || "", + }))} + /> + + ) : null} - {isCustomerStory && customerStorySidebar?.articleCta && ( -
- -
-
- )} + {isCustomerStory && customerStorySidebar?.articleCta && ( +
+ +
+
+ )} +
@@ -279,48 +280,42 @@ const Features = (props: { features: CustomerStorySidebar["features"] }) => {
); }; + const ArticleAuthors = (props: { authors: BlogArticlePayload["authors"] }) => { return ( -
- - Posted By - -
    - {props?.authors?.map((author, index) => ( -
  • - - {author?.image && ( - - )} -
    - - {author?.name} +
      + {props?.authors?.map((author, index) => ( +
    • + + {author?.image && ( + + )} +
      + {author?.name} + {author?.details && ( + + {author?.details} - {author?.details && ( - - {author?.details} - - )} -
      -       -
      • - ))} -
    -
    + )} +
+ + + ))} + ); }; diff --git a/apps/frontend/styles/globals.css b/apps/frontend/styles/globals.css index d7564a30a..7ca16a54c 100644 --- a/apps/frontend/styles/globals.css +++ b/apps/frontend/styles/globals.css @@ -80,7 +80,7 @@ } .body-l { - @apply text-bodyLgRegular; + @apply text-bodyMdRegular lg:text-bodyLgRegular; } .body-m-medium { @@ -362,4 +362,4 @@ h6[class*="heading"] a { .tab-item.input-error { border-color: red; -} \ No newline at end of file +} diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts index d93c04fc1..11f09925a 100644 --- a/apps/frontend/tailwind.config.ts +++ b/apps/frontend/tailwind.config.ts @@ -253,11 +253,11 @@ export default { }, ], mdHeading: [ - "32px", + "28px", { fontWeight: "700", - lineHeight: "40px", - letterSpacing: "-0.96px", + lineHeight: "36px", + letterSpacing: "-1.28px", }, ], mdHeadingMobile: [ @@ -265,23 +265,23 @@ export default { { fontWeight: "700", lineHeight: "32px", - letterSpacing: "-0.72px", + letterSpacing: "-0.96px", }, ], smHeading: [ - "24px", + "20px", { fontWeight: "700", - lineHeight: "32px", - letterSpacing: "-0.72px", + lineHeight: "26px", + letterSpacing: "-0.4px", }, ], smHeadingMobile: [ - "20px", + "16px", { fontWeight: "700", - lineHeight: "28px", - letterSpacing: "-0.6px", + lineHeight: "24px", + letterSpacing: "-0.32px", }, ], xsHeading: [ @@ -302,7 +302,7 @@ export default { "18px", { fontWeight: "400", - lineHeight: "26px", + lineHeight: "27px", }, ], bodyMdMedium: [