Skip to content

Commit 6b40488

Browse files
andresdjassoandresdjasso
committed
fix(landing): improve mobile hero and workflow previews
1 parent 7aee676 commit 6b40488

3 files changed

Lines changed: 100 additions & 29 deletions

File tree

‎apps/sim/app/(landing)/components/hero/components/hero-platform-stage/hero-platform-stage.tsx‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { cn } from '@sim/emcn'
22
import Image from 'next/image'
33
import { HeroPlatformLoopMount } from '@/app/(landing)/components/hero/components/hero-platform-loop'
4-
import { HOME_INSET, LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
4+
import { MobileHeroWorkflow } from '@/app/(landing)/components/hero/components/hero-platform-stage/mobile-hero-workflow'
5+
import { LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
56

67
/**
78
* Painted frame on the customer carousel's full content measure. The product
@@ -12,38 +13,41 @@ import { HOME_INSET, LANDING_STAGE_RADIUS } from '@/app/(landing)/components/lan
1213
*/
1314
export function HeroPlatformStage() {
1415
return (
15-
<div
16-
data-preview-stage=''
17-
className={cn(
18-
'relative isolate mt-20 w-full overflow-hidden bg-[var(--surface-3)] py-20',
19-
'max-sm:mt-12 max-sm:p-4 max-lg:mt-16 max-lg:p-6 max-xl:py-16',
20-
LANDING_STAGE_RADIUS
21-
)}
22-
>
23-
<div aria-hidden='true' className='pointer-events-none absolute inset-0'>
24-
<Image
25-
data-preview-background=''
26-
src='/landing/hero-painted-4k.webp'
27-
alt=''
28-
fill
29-
priority
30-
fetchPriority='high'
31-
quality={90}
32-
sizes='(max-width: 1727px) 100vw, 1648px'
33-
className='object-cover dark:brightness-[0.28]'
34-
/>
35-
</div>
36-
16+
<>
17+
<MobileHeroWorkflow />
3718
<div
38-
role='region'
39-
aria-label='Interactive Sim product preview'
19+
data-preview-stage=''
4020
className={cn(
41-
'relative aspect-[1280/735] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] shadow-xs transition-[border-color,box-shadow] duration-300 ease-out has-[[data-preview-entering]]:border-transparent has-[[data-preview-entering]]:shadow-none motion-reduce:transition-none max-sm:aspect-[4/3] max-sm:min-h-[264px] max-xl:min-h-[480px]',
42-
HOME_INSET
21+
'relative isolate mt-20 w-full overflow-hidden bg-[var(--surface-3)] py-20',
22+
'max-lg:mt-16 max-lg:hidden max-xl:p-6',
23+
LANDING_STAGE_RADIUS
4324
)}
4425
>
45-
<HeroPlatformLoopMount />
26+
<div aria-hidden='true' className='pointer-events-none absolute inset-0'>
27+
<Image
28+
data-preview-background=''
29+
src='/landing/hero-painted-4k.webp'
30+
alt=''
31+
fill
32+
priority
33+
fetchPriority='high'
34+
quality={90}
35+
sizes='(max-width: 1727px) 100vw, 1648px'
36+
className='object-cover dark:brightness-[0.28]'
37+
/>
38+
</div>
39+
40+
<div
41+
role='region'
42+
aria-label='Interactive Sim product preview'
43+
className={cn(
44+
'relative aspect-[1280/735] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] shadow-xs transition-[border-color,box-shadow] duration-300 ease-out has-[[data-preview-entering]]:border-transparent has-[[data-preview-entering]]:shadow-none motion-reduce:transition-none max-sm:aspect-[4/3] max-sm:min-h-[264px] max-xl:min-h-[480px]',
45+
'w-full xl:mx-auto xl:w-[83.333%]'
46+
)}
47+
>
48+
<HeroPlatformLoopMount />
49+
</div>
4650
</div>
47-
</div>
51+
</>
4852
)
4953
}

‎apps/sim/app/(landing)/components/hero/components/hero-platform-stage/mobile-hero-workflow.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
'use client'
2+
3+
import { cn } from '@sim/emcn'
4+
import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
5+
import { STAGE_BLOCKS } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-data'
6+
import {
7+
horizontalHandleAnchors,
8+
smoothStep,
9+
} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
10+
import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
11+
12+
const BLOCKS = [
13+
{ ...STAGE_BLOCKS[0], x: 5, y: 185, position: 'left-[5px] top-[185px]' },
14+
{ ...STAGE_BLOCKS[1], x: 325, y: 75, position: 'left-[325px] top-[75px]' },
15+
{ ...STAGE_BLOCKS[4], name: 'Share lead', x: 645, y: 165, position: 'left-[645px] top-[165px]' },
16+
]
17+
18+
/** A readable close-up of lead enrichment for screens too narrow for the full platform. */
19+
export function MobileHeroWorkflow() {
20+
return (
21+
<div
22+
role='img'
23+
aria-label='Workflow: Start, enrich a lead with an Agent, then share the lead in Slack'
24+
className='-mx-7 md:-mx-8 relative isolate mt-12 h-[300px] w-[calc(100%+56px)] overflow-hidden md:w-[calc(100%+64px)] lg:hidden'
25+
>
26+
<div
27+
aria-hidden='true'
28+
className='-translate-x-1/2 absolute top-0 left-1/2 h-[340px] w-[900px] origin-top scale-[0.85]'
29+
>
30+
<svg
31+
className='absolute inset-0 size-full overflow-visible'
32+
viewBox='0 0 900 340'
33+
fill='none'
34+
>
35+
{BLOCKS.slice(1).map((block, index) => {
36+
const source = horizontalHandleAnchors(BLOCKS[index]).out
37+
const target = horizontalHandleAnchors(block).in
38+
return (
39+
<path
40+
key={block.id}
41+
d={smoothStep(source.x, source.y, target.x, target.y)}
42+
stroke='var(--text-secondary)'
43+
strokeWidth={1.5}
44+
/>
45+
)
46+
})}
47+
</svg>
48+
{BLOCKS.map((block, index) => (
49+
<div key={block.id} className={cn('absolute', block.position)}>
50+
<StageBlockCard
51+
block={block}
52+
orientation='horizontal'
53+
selected={index === 1}
54+
decorative
55+
/>
56+
</div>
57+
))}
58+
</div>
59+
<EdgeFade ground='canvas' edges={['left', 'right']} depth='stage' />
60+
<EdgeFade ground='canvas' edges={['top', 'bottom']} depth='preview' />
61+
</div>
62+
)
63+
}

‎apps/sim/app/(landing)/workflows/components/workflow-builder-preview/workflow-builder-preview.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ export function WorkflowBuilderPreview() {
5050
</div>
5151
</div>
5252
<EdgeFade ground='canvas' edges={['left', 'right']} depth='preview' />
53+
<div
54+
aria-hidden='true'
55+
className='pointer-events-none absolute inset-x-0 bottom-0 z-[5] @max-[760px]:block hidden h-[160px] bg-[var(--bg)] backdrop-blur-[8px] [mask-image:linear-gradient(to_top,black_65%,transparent)]'
56+
/>
5357
<div className='absolute inset-x-5 bottom-8 z-10 flex flex-col items-center gap-3'>
5458
<div
5559
role='group'

0 commit comments

Comments
 (0)