diff --git a/package.json b/package.json index 7fdc8b1fa..9e191782e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "safe-homepage", "homepage": "https://github.com/safe-global/safe-homepage", - "version": "1.3.4", + "version": "1.3.5", "scripts": { "build": "next build && next export", "lint": "tsc && next lint", diff --git a/src/components/Campaign/Faq/index.tsx b/src/components/Campaign/Faq/index.tsx index 80659ea62..b88776e94 100644 --- a/src/components/Campaign/Faq/index.tsx +++ b/src/components/Campaign/Faq/index.tsx @@ -19,6 +19,7 @@ import Image from 'next/image' import { isEntryTypeFaqEntry } from '@/lib/typeGuards' import { trackEvent } from '@/services/analytics/trackEvent' import { SOCIAL_LOGIN_EVENTS } from '@/services/analytics/events/socialLogin' +import RichText from '@/components/Campaign/RichText' type FaqEntry = Entry @@ -80,8 +81,8 @@ const Faq = (props: FaqEntry) => { > {item.question} - - {item.answer} + + ) diff --git a/src/components/Campaign/Faq/styles.module.css b/src/components/Campaign/Faq/styles.module.css index 7ff11b5bd..eb0656f61 100644 --- a/src/components/Campaign/Faq/styles.module.css +++ b/src/components/Campaign/Faq/styles.module.css @@ -45,6 +45,14 @@ padding: 0 0 32px; } +.details p { + margin: 0; +} + +.details a { + text-decoration: underline; +} + @media (min-width: 900px) { .bg { position: absolute; diff --git a/src/components/Campaign/Hero/styles.module.css b/src/components/Campaign/Hero/styles.module.css index 2a0505e71..2e227a3a6 100644 --- a/src/components/Campaign/Hero/styles.module.css +++ b/src/components/Campaign/Hero/styles.module.css @@ -7,7 +7,7 @@ .spot { position: absolute; right: -35px; - top: -110px; + top: 410px; z-index: -1; width: 800px; height: 800px; @@ -64,6 +64,10 @@ } @media (min-width: 900px) { + .spot { + top: -110px; + } + .heroFooter { margin-top: 100px; flex-direction: row; diff --git a/src/components/Campaign/RichText/index.tsx b/src/components/Campaign/RichText/index.tsx index 9d2c0510c..9261b4094 100644 --- a/src/components/Campaign/RichText/index.tsx +++ b/src/components/Campaign/RichText/index.tsx @@ -1,8 +1,21 @@ -import { documentToReactComponents } from '@contentful/rich-text-react-renderer' -import type { Document as ContentfulDocument } from '@contentful/rich-text-types' +import { documentToReactComponents, type RenderNode, type Options } from '@contentful/rich-text-react-renderer' +import { INLINES, type Document as ContentfulDocument, type Hyperlink } from '@contentful/rich-text-types' + +const options: Options = { + renderNode: { + [INLINES.HYPERLINK]: (node: Hyperlink) => { + const text = node.content.find((item) => item.nodeType === 'text')?.value + return ( + + {text} + + ) + }, + } as unknown as RenderNode, +} const RichText = (props: ContentfulDocument) => { - return <>{documentToReactComponents(props)} + return <>{documentToReactComponents(props, options)} } export default RichText diff --git a/src/contentful/types/TypeFaqEntry.ts b/src/contentful/types/TypeFaqEntry.ts index 3d89125b6..7979a30c9 100644 --- a/src/contentful/types/TypeFaqEntry.ts +++ b/src/contentful/types/TypeFaqEntry.ts @@ -2,7 +2,7 @@ import type { ChainModifiers, Entry, EntryFieldTypes, EntrySkeletonType, LocaleC export interface TypeFaqEntryFields { question: EntryFieldTypes.Symbol - answer: EntryFieldTypes.Text + answer: EntryFieldTypes.RichText slug?: EntryFieldTypes.Symbol }