diff --git a/packages/twenty-website-new/public/images/partner/testimonials/benjamin-reynolds.webp b/packages/twenty-website-new/public/images/partner/testimonials/benjamin-reynolds.webp new file mode 100644 index 0000000000..27a549dae2 Binary files /dev/null and b/packages/twenty-website-new/public/images/partner/testimonials/benjamin-reynolds.webp differ diff --git a/packages/twenty-website-new/public/images/partner/testimonials/bertrams.jpeg b/packages/twenty-website-new/public/images/partner/testimonials/bertrams.jpeg new file mode 100644 index 0000000000..7d26679408 Binary files /dev/null and b/packages/twenty-website-new/public/images/partner/testimonials/bertrams.jpeg differ diff --git a/packages/twenty-website-new/public/images/partner/testimonials/mike-babiy.png b/packages/twenty-website-new/public/images/partner/testimonials/mike-babiy.png new file mode 100644 index 0000000000..26cdabed77 Binary files /dev/null and b/packages/twenty-website-new/public/images/partner/testimonials/mike-babiy.png differ diff --git a/packages/twenty-website-new/public/images/shared/companies/logos/airbnb.png b/packages/twenty-website-new/public/images/shared/companies/logos/airbnb.png new file mode 100644 index 0000000000..45d956fae8 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/companies/logos/airbnb.png differ diff --git a/packages/twenty-website-new/public/images/shared/companies/logos/figma.png b/packages/twenty-website-new/public/images/shared/companies/logos/figma.png new file mode 100644 index 0000000000..da239c8bcb Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/companies/logos/figma.png differ diff --git a/packages/twenty-website-new/public/images/shared/companies/logos/github.png b/packages/twenty-website-new/public/images/shared/companies/logos/github.png new file mode 100644 index 0000000000..4e3eecd942 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/companies/logos/github.png differ diff --git a/packages/twenty-website-new/public/images/shared/companies/logos/notion.png b/packages/twenty-website-new/public/images/shared/companies/logos/notion.png new file mode 100644 index 0000000000..33b1bafeb1 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/companies/logos/notion.png differ diff --git a/packages/twenty-website-new/public/images/shared/companies/logos/sequoia.png b/packages/twenty-website-new/public/images/shared/companies/logos/sequoia.png new file mode 100644 index 0000000000..30ba5e7948 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/companies/logos/sequoia.png differ diff --git a/packages/twenty-website-new/public/images/shared/companies/logos/slack.png b/packages/twenty-website-new/public/images/shared/companies/logos/slack.png new file mode 100644 index 0000000000..48aae83296 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/companies/logos/slack.png differ diff --git a/packages/twenty-website-new/public/images/shared/people/avatars/chris-wanstrath.jpg b/packages/twenty-website-new/public/images/shared/people/avatars/chris-wanstrath.jpg new file mode 100644 index 0000000000..d6742ad94d Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/people/avatars/chris-wanstrath.jpg differ diff --git a/packages/twenty-website-new/public/images/shared/people/avatars/dylan-field.jpg b/packages/twenty-website-new/public/images/shared/people/avatars/dylan-field.jpg new file mode 100644 index 0000000000..b427fee1b3 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/people/avatars/dylan-field.jpg differ diff --git a/packages/twenty-website-new/public/images/shared/people/avatars/eddy-cue.jpg b/packages/twenty-website-new/public/images/shared/people/avatars/eddy-cue.jpg new file mode 100644 index 0000000000..107a9bd2b7 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/people/avatars/eddy-cue.jpg differ diff --git a/packages/twenty-website-new/public/images/shared/people/avatars/jeff-williams.jpg b/packages/twenty-website-new/public/images/shared/people/avatars/jeff-williams.jpg new file mode 100644 index 0000000000..7535f77e78 Binary files /dev/null and b/packages/twenty-website-new/public/images/shared/people/avatars/jeff-williams.jpg differ diff --git a/packages/twenty-website-new/public/images/home/hero/avatars/katherine-adams.jpg b/packages/twenty-website-new/public/images/shared/people/avatars/katherine-adams.jpg similarity index 100% rename from packages/twenty-website-new/public/images/home/hero/avatars/katherine-adams.jpg rename to packages/twenty-website-new/public/images/shared/people/avatars/katherine-adams.jpg diff --git a/packages/twenty-website-new/src/app/(home)/_constants/helped.ts b/packages/twenty-website-new/src/app/(home)/_constants/helped.ts index 5fd86d42ca..ebf7b168cd 100644 --- a/packages/twenty-website-new/src/app/(home)/_constants/helped.ts +++ b/packages/twenty-website-new/src/app/(home)/_constants/helped.ts @@ -3,17 +3,17 @@ import type { HelpedDataType } from '@/sections/Helped/types/HelpedData'; export const HELPED_DATA: HelpedDataType = { eyebrow: { heading: { - text: 'Twenty helped them', + text: 'In production.', fontFamily: 'sans', }, }, heading: [ { - text: 'Make your GTM team happy with a', + text: 'Dev teams power\ncompany-wide\n', fontFamily: 'serif', }, { - text: " CRM they'll love", + text: 'change with Twenty', fontFamily: 'sans', }, ], diff --git a/packages/twenty-website-new/src/app/(home)/_constants/hero.ts b/packages/twenty-website-new/src/app/(home)/_constants/hero.ts index 07b357f475..be268993c7 100644 --- a/packages/twenty-website-new/src/app/(home)/_constants/hero.ts +++ b/packages/twenty-website-new/src/app/(home)/_constants/hero.ts @@ -5,6 +5,7 @@ import type { HeroKanbanPageDefinition, HeroTablePageDefinition, } from '@/sections/Hero/types'; +import { SHARED_PEOPLE_AVATAR_URLS } from '@/lib/shared-asset-paths'; const PEOPLE_AVATAR_URLS = { craigFederighi: @@ -12,7 +13,7 @@ const PEOPLE_AVATAR_URLS = { eddyCue: 'https://twentyhq.github.io/placeholder-images/people/image-18.png', jeffWilliams: 'https://twentyhq.github.io/placeholder-images/people/image-22.png', - katherineAdams: '/images/home/hero/avatars/katherine-adams.jpg', + katherineAdams: SHARED_PEOPLE_AVATAR_URLS.katherineAdams, philSchiller: 'https://twentyhq.github.io/placeholder-images/people/image-14.png', timCook: 'https://twentyhq.github.io/placeholder-images/people/image-27.png', diff --git a/packages/twenty-website-new/src/app/(home)/_constants/three-cards-feature.ts b/packages/twenty-website-new/src/app/(home)/_constants/three-cards-feature.ts index 52c653c71b..9457471db7 100644 --- a/packages/twenty-website-new/src/app/(home)/_constants/three-cards-feature.ts +++ b/packages/twenty-website-new/src/app/(home)/_constants/three-cards-feature.ts @@ -8,7 +8,8 @@ export const THREE_CARDS_FEATURE_DATA: ThreeCardsFeatureCardsDataType = { }, }, heading: [ - { text: 'Make your GTM team happy with ', fontFamily: 'serif' }, + { text: 'Make your GTM team happy', fontFamily: 'serif' }, + { text: 'with ', fontFamily: 'serif', lineBreakBefore: true }, { text: "a CRM they'll love", fontFamily: 'sans' }, ], featureCards: [ @@ -17,30 +18,24 @@ export const THREE_CARDS_FEATURE_DATA: ThreeCardsFeatureCardsDataType = { body: { text: "Twenty makes it simple. It's clean, intuitive, and built to feel like Notion.", }, - image: { - src: '/images/home/three-cards-feature/familiar-interface.webp', - alt: 'Familiar interface', - }, - }, - { - heading: { text: 'Fast path to action', fontFamily: 'sans' }, - body: { - text: 'Smart patterns, shortcuts, and layouts make everyday tasks faster and easier to execute.', - }, - image: { - src: '/images/home/three-cards-feature/fast-path.webp', - alt: 'Fast path', - }, + icon: 'users-group', + illustration: 'familiar-interface', }, { heading: { text: 'Live data and AI Built', fontFamily: 'sans' }, body: { text: 'Everything updates in real time, with AI chat always ready to help you move faster.', }, - image: { - src: '/images/home/three-cards-feature/live-data.webp', - alt: 'Live data', + icon: 'live-data', + illustration: 'live-data', + }, + { + heading: { text: 'Fast path to action', fontFamily: 'sans' }, + body: { + text: 'Smart patterns, shortcuts, and layouts make everyday tasks faster and easier to execute.', }, + icon: 'fast-path', + illustration: 'fast-path', }, ], }; diff --git a/packages/twenty-website-new/src/app/case-studies/9dots/page.tsx b/packages/twenty-website-new/src/app/case-studies/9dots/page.tsx index df0571dc8d..a677f2eb67 100644 --- a/packages/twenty-website-new/src/app/case-studies/9dots/page.tsx +++ b/packages/twenty-website-new/src/app/case-studies/9dots/page.tsx @@ -7,7 +7,7 @@ import { Menu } from '@/sections/Menu/components'; import { theme } from '@/theme'; import type { Metadata } from 'next'; -const PLACEHOLDER_HERO = '/images/home/hero/avatars/katherine-adams.jpg'; +const PLACEHOLDER_HERO = '/images/shared/people/avatars/katherine-adams.jpg'; const CASE_STUDY: CaseStudyData = { meta: { diff --git a/packages/twenty-website-new/src/app/case-studies/act-education/page.tsx b/packages/twenty-website-new/src/app/case-studies/act-education/page.tsx index 2008647e85..544b44caee 100644 --- a/packages/twenty-website-new/src/app/case-studies/act-education/page.tsx +++ b/packages/twenty-website-new/src/app/case-studies/act-education/page.tsx @@ -7,7 +7,7 @@ import { Menu } from '@/sections/Menu/components'; import { theme } from '@/theme'; import type { Metadata } from 'next'; -const PLACEHOLDER_HERO = '/images/home/hero/avatars/katherine-adams.jpg'; +const PLACEHOLDER_HERO = '/images/shared/people/avatars/katherine-adams.jpg'; const CASE_STUDY: CaseStudyData = { meta: { diff --git a/packages/twenty-website-new/src/app/case-studies/alternative-partners/page.tsx b/packages/twenty-website-new/src/app/case-studies/alternative-partners/page.tsx index f328b5bb55..e970c99eb8 100644 --- a/packages/twenty-website-new/src/app/case-studies/alternative-partners/page.tsx +++ b/packages/twenty-website-new/src/app/case-studies/alternative-partners/page.tsx @@ -7,7 +7,7 @@ import { Menu } from '@/sections/Menu/components'; import { theme } from '@/theme'; import type { Metadata } from 'next'; -const PLACEHOLDER_HERO = '/images/home/hero/avatars/katherine-adams.jpg'; +const PLACEHOLDER_HERO = '/images/shared/people/avatars/katherine-adams.jpg'; const CASE_STUDY: CaseStudyData = { meta: { diff --git a/packages/twenty-website-new/src/app/case-studies/elevate-consulting/page.tsx b/packages/twenty-website-new/src/app/case-studies/elevate-consulting/page.tsx index cd940f40cc..ac903a15fc 100644 --- a/packages/twenty-website-new/src/app/case-studies/elevate-consulting/page.tsx +++ b/packages/twenty-website-new/src/app/case-studies/elevate-consulting/page.tsx @@ -7,7 +7,7 @@ import { Menu } from '@/sections/Menu/components'; import { theme } from '@/theme'; import type { Metadata } from 'next'; -const PLACEHOLDER_HERO = '/images/home/hero/avatars/katherine-adams.jpg'; +const PLACEHOLDER_HERO = '/images/shared/people/avatars/katherine-adams.jpg'; const CASE_STUDY: CaseStudyData = { meta: { diff --git a/packages/twenty-website-new/src/app/case-studies/netzero/page.tsx b/packages/twenty-website-new/src/app/case-studies/netzero/page.tsx index 90c0ea27b6..941f4aadef 100644 --- a/packages/twenty-website-new/src/app/case-studies/netzero/page.tsx +++ b/packages/twenty-website-new/src/app/case-studies/netzero/page.tsx @@ -7,7 +7,7 @@ import { Menu } from '@/sections/Menu/components'; import { theme } from '@/theme'; import type { Metadata } from 'next'; -const PLACEHOLDER_HERO = '/images/home/hero/avatars/katherine-adams.jpg'; +const PLACEHOLDER_HERO = '/images/shared/people/avatars/katherine-adams.jpg'; const CASE_STUDY: CaseStudyData = { meta: { diff --git a/packages/twenty-website-new/src/app/case-studies/page.tsx b/packages/twenty-website-new/src/app/case-studies/page.tsx index 56f9c83fb4..1700a1d41f 100644 --- a/packages/twenty-website-new/src/app/case-studies/page.tsx +++ b/packages/twenty-website-new/src/app/case-studies/page.tsx @@ -36,7 +36,7 @@ const SIGNOFF_BODY = { text: 'Join the teams that chose to own their CRM. Start building with Twenty today.', }; -const PLACEHOLDER_HERO = '/images/home/hero/avatars/katherine-adams.jpg'; +const PLACEHOLDER_HERO = '/images/shared/people/avatars/katherine-adams.jpg'; const CASE_STUDY_CATALOG_ENTRIES: CaseStudyCatalogEntry[] = [ { diff --git a/packages/twenty-website-new/src/app/case-studies/w3villa/page.tsx b/packages/twenty-website-new/src/app/case-studies/w3villa/page.tsx index 8efb84b431..90310b6599 100644 --- a/packages/twenty-website-new/src/app/case-studies/w3villa/page.tsx +++ b/packages/twenty-website-new/src/app/case-studies/w3villa/page.tsx @@ -7,7 +7,7 @@ import { Menu } from '@/sections/Menu/components'; import { theme } from '@/theme'; import type { Metadata } from 'next'; -const PLACEHOLDER_HERO = '/images/home/hero/avatars/katherine-adams.jpg'; +const PLACEHOLDER_HERO = '/images/shared/people/avatars/katherine-adams.jpg'; const CASE_STUDY: CaseStudyData = { meta: { diff --git a/packages/twenty-website-new/src/app/halftone/_components/HalftoneCanvas.tsx b/packages/twenty-website-new/src/app/halftone/_components/HalftoneCanvas.tsx index 156d5280cc..93d9406fcc 100644 --- a/packages/twenty-website-new/src/app/halftone/_components/HalftoneCanvas.tsx +++ b/packages/twenty-website-new/src/app/halftone/_components/HalftoneCanvas.tsx @@ -364,6 +364,38 @@ function createRenderTarget(width: number, height: number) { }); } +function syncImageElementTexture( + resources: SceneResources, + imageElement: HTMLImageElement | null, +) { + if (resources.imageTexture) { + resources.imageTexture.dispose(); + resources.imageTexture = null; + } + + if (!imageElement) { + resources.imageMaterial.uniforms.tImage.value = null; + resources.imageMaterial.uniforms.imageSize.value.set(1, 1); + return; + } + + const texture = new THREE.Texture(imageElement); + texture.wrapS = THREE.ClampToEdgeWrapping; + texture.wrapT = THREE.ClampToEdgeWrapping; + texture.generateMipmaps = false; + texture.minFilter = THREE.LinearFilter; + texture.magFilter = THREE.LinearFilter; + texture.needsUpdate = true; + texture.colorSpace = THREE.SRGBColorSpace; + + resources.imageTexture = texture; + resources.imageMaterial.uniforms.tImage.value = texture; + resources.imageMaterial.uniforms.imageSize.value.set( + imageElement.naturalWidth, + imageElement.naturalHeight, + ); +} + function createInteractionState( initialPose?: Partial, ): InteractionState { @@ -584,6 +616,7 @@ export function HalftoneCanvas({ const poseChangeReference = useRef(onPoseChange); const previewDistanceReference = useRef(previewDistance); const geometryReference = useRef(geometry); + const imageElementReference = useRef(imageElement); const snapshotReference = useRef(snapshotRef); useEffect(() => { @@ -663,38 +696,15 @@ export function HalftoneCanvas({ }, [snapshotRef]); useEffect(() => { + imageElementReference.current = imageElement; + const resources = resourcesReference.current; if (!resources) { return; } - if (imageElement) { - if (resources.imageTexture) { - resources.imageTexture.dispose(); - } - - const texture = new THREE.Texture(imageElement); - texture.wrapS = THREE.ClampToEdgeWrapping; - texture.wrapT = THREE.ClampToEdgeWrapping; - texture.generateMipmaps = false; - texture.minFilter = THREE.LinearFilter; - texture.magFilter = THREE.LinearFilter; - texture.needsUpdate = true; - texture.colorSpace = THREE.SRGBColorSpace; - resources.imageTexture = texture; - resources.imageMaterial.uniforms.tImage.value = texture; - resources.imageMaterial.uniforms.imageSize.value.set( - imageElement.naturalWidth, - imageElement.naturalHeight, - ); - } else { - if (resources.imageTexture) { - resources.imageTexture.dispose(); - resources.imageTexture = null; - resources.imageMaterial.uniforms.tImage.value = null; - } - } + syncImageElementTexture(resources, imageElement); }, [imageElement]); useEffect(() => { @@ -1037,6 +1047,7 @@ export function HalftoneCanvas({ } syncResources(resources, settingsReference.current); + syncImageElementTexture(resources, imageElementReference.current); const captureSnapshot: HalftoneSnapshotFn = async ( snapshotWidth: number, diff --git a/packages/twenty-website-new/src/app/partner/_constants/signoff.ts b/packages/twenty-website-new/src/app/partner/_constants/signoff.ts index 2c72a6cf63..206557a25e 100644 --- a/packages/twenty-website-new/src/app/partner/_constants/signoff.ts +++ b/packages/twenty-website-new/src/app/partner/_constants/signoff.ts @@ -2,10 +2,10 @@ import type { SignoffDataType } from '@/sections/Signoff/types'; export const SIGNOFF_DATA: SignoffDataType = { heading: [ - { text: 'Ready to grow', fontFamily: 'serif' }, - { text: ' with Twenty?', fontFamily: 'sans' }, + { text: 'Ready to grow\n', fontFamily: 'serif' }, + { text: 'with Twenty?', fontFamily: 'sans' }, ], body: { - text: 'Join our partner ecosystem and help businesses take control of their CRM.', + text: 'Join our partner ecosystem and help businesses\ntake control of their CRM.', }, }; diff --git a/packages/twenty-website-new/src/app/partner/_constants/testimonials.ts b/packages/twenty-website-new/src/app/partner/_constants/testimonials.ts index 41b16aab26..8c53b9379c 100644 --- a/packages/twenty-website-new/src/app/partner/_constants/testimonials.ts +++ b/packages/twenty-website-new/src/app/partner/_constants/testimonials.ts @@ -13,6 +13,10 @@ export const TESTIMONIALS_DATA: TestimonialsDataType = { author: { name: { text: 'Benjamin Reynolds' }, designation: { text: 'Principal and Founder, Alternative Partners' }, + avatar: { + src: '/images/partner/testimonials/benjamin-reynolds.webp', + alt: 'Portrait of Benjamin Reynolds', + }, }, }, { @@ -23,6 +27,10 @@ export const TESTIMONIALS_DATA: TestimonialsDataType = { author: { name: { text: 'Bertrams' }, designation: { text: 'Founder, Wintactix' }, + avatar: { + src: '/images/partner/testimonials/bertrams.jpeg', + alt: 'Portrait of Bertrams', + }, }, }, { @@ -33,6 +41,10 @@ export const TESTIMONIALS_DATA: TestimonialsDataType = { author: { name: { text: 'Mike Babiy' }, designation: { text: 'Founder, Nine Dots Ventures' }, + avatar: { + src: '/images/partner/testimonials/mike-babiy.png', + alt: 'Photo featuring Mike Babiy', + }, }, }, ], diff --git a/packages/twenty-website-new/src/app/partner/page.tsx b/packages/twenty-website-new/src/app/partner/page.tsx index 24ebfbbfc4..23bbb27258 100644 --- a/packages/twenty-website-new/src/app/partner/page.tsx +++ b/packages/twenty-website-new/src/app/partner/page.tsx @@ -126,9 +126,10 @@ export default async function PartnerPage() { - - + + diff --git a/packages/twenty-website-new/src/design-system/components/Body/Body.tsx b/packages/twenty-website-new/src/design-system/components/Body/Body.tsx index 1e36f74dbc..15bebc4436 100644 --- a/packages/twenty-website-new/src/design-system/components/Body/Body.tsx +++ b/packages/twenty-website-new/src/design-system/components/Body/Body.tsx @@ -3,8 +3,9 @@ import { css } from '@linaria/core'; import { BodyType } from './types/Body'; const bodyClassName = css` + color: inherit; margin: 0; - letter-spacing: -0.01em; + letter-spacing: 0; &[data-family='sans'] { font-family: ${theme.font.family.sans}; @@ -37,6 +38,7 @@ const bodyClassName = css` } &[data-size='sm'] { + color: ${theme.colors.primary.text[60]}; font-size: ${theme.font.size(4)}; line-height: ${theme.lineHeight(5.5)}; } diff --git a/packages/twenty-website-new/src/design-system/components/GuideCrosshair/GuideCrosshair.tsx b/packages/twenty-website-new/src/design-system/components/GuideCrosshair/GuideCrosshair.tsx new file mode 100644 index 0000000000..cd8f9d52bc --- /dev/null +++ b/packages/twenty-website-new/src/design-system/components/GuideCrosshair/GuideCrosshair.tsx @@ -0,0 +1,140 @@ +import { theme } from '@/theme'; +import { styled } from '@linaria/react'; +import type { CSSProperties } from 'react'; + +const Root = styled.div` + display: none; + + @media (min-width: ${theme.breakpoints.md}px) { + display: block; + inset: 0; + pointer-events: none; + position: absolute; + z-index: var(--guide-z-index, 1); + } +`; + +const HorizontalLineLeft = styled.div` + @media (min-width: ${theme.breakpoints.md}px) { + background-color: var(--guide-line-color); + height: var(--guide-stroke); + left: 0; + position: absolute; + top: var(--guide-cross-y); + width: calc(var(--guide-cross-x) - var(--guide-gap)); + } +`; + +const HorizontalLineRight = styled.div` + @media (min-width: ${theme.breakpoints.md}px) { + background-color: var(--guide-line-color); + height: var(--guide-stroke); + position: absolute; + right: 0; + top: var(--guide-cross-y); + width: calc(100% - var(--guide-cross-x) - var(--guide-gap)); + } +`; + +const VerticalLineTop = styled.div` + @media (min-width: ${theme.breakpoints.md}px) { + background-color: var(--guide-line-color); + height: calc(var(--guide-cross-y) - var(--guide-gap)); + left: var(--guide-cross-x); + position: absolute; + top: 0; + width: var(--guide-stroke); + } +`; + +const VerticalLineBottom = styled.div` + @media (min-width: ${theme.breakpoints.md}px) { + background-color: var(--guide-line-color); + bottom: 0; + height: calc(100% - var(--guide-cross-y) - var(--guide-gap)); + left: var(--guide-cross-x); + position: absolute; + width: var(--guide-stroke); + } +`; + +const Plus = styled.div` + @media (min-width: ${theme.breakpoints.md}px) { + height: var(--guide-plus-size); + left: calc(var(--guide-cross-x) - var(--guide-plus-offset)); + position: absolute; + top: calc(var(--guide-cross-y) - var(--guide-plus-offset)); + width: var(--guide-plus-size); + + &::before, + &::after { + background-color: var(--guide-plus-color); + content: ''; + position: absolute; + } + + &::before { + height: var(--guide-plus-size); + left: 50%; + top: 0; + transform: translateX(-50%); + width: var(--guide-stroke); + } + + &::after { + height: var(--guide-stroke); + left: 0; + top: 50%; + transform: translateY(-50%); + width: var(--guide-plus-size); + } + } +`; + +type GuideCrosshairProps = { + className?: string; + crossX: string; + crossY: string; + gap?: string; + lineColor?: string; + plusColor?: string; + plusOffset?: string; + plusSize?: string; + strokeWidth?: string; + zIndex?: number; +}; + +export function GuideCrosshair({ + className, + crossX, + crossY, + gap = '18px', + lineColor = theme.colors.primary.border[10], + plusColor = theme.colors.highlight[100], + plusOffset = '6px', + plusSize = '12px', + strokeWidth = '1px', + zIndex = 1, +}: GuideCrosshairProps) { + const style = { + '--guide-cross-x': crossX, + '--guide-cross-y': crossY, + '--guide-gap': gap, + '--guide-line-color': lineColor, + '--guide-plus-color': plusColor, + '--guide-plus-offset': plusOffset, + '--guide-plus-size': plusSize, + '--guide-stroke': strokeWidth, + '--guide-z-index': String(zIndex), + } as CSSProperties; + + return ( + + + + + + + + ); +} diff --git a/packages/twenty-website-new/src/design-system/components/Heading/Heading.tsx b/packages/twenty-website-new/src/design-system/components/Heading/Heading.tsx index 3c6d62f8a0..d84771ac12 100644 --- a/packages/twenty-website-new/src/design-system/components/Heading/Heading.tsx +++ b/packages/twenty-website-new/src/design-system/components/Heading/Heading.tsx @@ -128,17 +128,22 @@ export function Heading({ return ( {Array.isArray(segments) ? ( - segments.map((segment, index) => ( - - {segment.newLine ?
: null} - - {segment.text} - - - )) + segments.map((segment, index) => { + const lineBreakBefore = + segment.newLine === true || segment.lineBreakBefore === true; + + return ( + + {lineBreakBefore ?
: null} + + {segment.text} + + + ); + }) ) : (