Skip to content

fix(landing): ui #2979

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emir-karabeg merged 1 commit into from
Jan 24, 2026
Merged

fix(landing): ui #2979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/sim/app/(landing)/components/hero/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export { LandingLoopNode } from './landing-canvas/landing-block/landing-loop-nod
export { LandingNode } from './landing-canvas/landing-block/landing-node'
export type { LoopBlockProps } from './landing-canvas/landing-block/loop-block'
export { LoopBlock } from './landing-canvas/landing-block/loop-block'
export type { TagProps } from './landing-canvas/landing-block/tag'
export { Tag } from './landing-canvas/landing-block/tag'
export type { SubBlockRowProps, TagProps } from './landing-canvas/landing-block/tag'
export { SubBlockRow, Tag } from './landing-canvas/landing-block/tag'
export type {
LandingBlockNode,
LandingCanvasProps,
Expand Down
45 changes: 25 additions & 20 deletions ...m/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react'
import { BookIcon } from 'lucide-react'
import {
Tag,
type TagProps,
SubBlockRow,
type SubBlockRowProps,
} from '@/app/(landing)/components/hero/components/landing-canvas/landing-block/tag'

/**
* Data structure for a landing card component
* Matches the workflow block structure from the application
*/
export interface LandingCardData {
/** Icon element to display in the card header */
Expand All @@ -15,8 +15,8 @@ export interface LandingCardData {
color: string | '#f6f6f6'
/** Name/title of the card */
name: string
/** Optional tags to display at the bottom of the card */
tags?: TagProps[]
/** Optional subblock rows to display below the header */
tags?: SubBlockRowProps[]
}

/**
Expand All @@ -28,7 +28,8 @@ export interface LandingBlockProps extends LandingCardData {
}

/**
* Landing block component that displays a card with icon, name, and optional tags
* Landing block component that displays a card with icon, name, and optional subblock rows
* Styled to match the application's workflow blocks
* @param props - Component properties including icon, color, name, tags, and className
* @returns A styled block card component
*/
Expand All @@ -39,33 +40,37 @@ export const LandingBlock = React.memo(function LandingBlock({
tags,
className,
}: LandingBlockProps) {
const hasContentBelowHeader = tags && tags.length > 0

return (
<div
className={`z-10 flex w-64 flex-col items-start gap-3 rounded-[14px] border border-[#E5E5E5] bg-[#FEFEFE] p-3 ${className ?? ''}`}
style={{
boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
}}
className={`z-10 flex w-[250px] flex-col rounded-[8px] border border-[#E5E5E5] bg-white ${className ?? ''}`}
>
<div className='flex w-full items-center justify-between'>
<div className='flex items-center gap-2.5'>
{/* Header - matches workflow-block.tsx header styling */}
<div
className={`flex items-center justify-between p-[8px] ${hasContentBelowHeader ? 'border-[#E5E5E5] border-b' : ''}`}
>
<div className='flex min-w-0 flex-1 items-center gap-[10px]'>
<div
className='flex h-6 w-6 items-center justify-center rounded-[8px] text-white'
style={{ backgroundColor: color as string }}
className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
style={{ background: color as string }}
>
{icon}
</div>
<p className='text-base text-card-foreground'>{name}</p>
<span className='truncate font-medium text-[#171717] text-[16px]' title={name}>
{name}
</span>
</div>
<BookIcon className='h-4 w-4 text-muted-foreground' />
</div>

{tags && tags.length > 0 ? (
<div className='flex flex-wrap gap-2'>
{/* Content - SubBlock Rows matching workflow-block.tsx */}
{hasContentBelowHeader && (
<div className='flex flex-col gap-[8px] p-[8px]'>
{tags.map((tag) => (
<Tag key={tag.label} icon={tag.icon} label={tag.label} />
<SubBlockRow key={tag.label} icon={tag.icon} label={tag.label} />
))}
</div>
) : null}
)}
</div>
)
})
39 changes: 22 additions & 17 deletions ...im/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,14 @@ import {
type LandingCardData,
} from '@/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block'

/**
* Handle Y offset from block top - matches HANDLE_POSITIONS.DEFAULT_Y_OFFSET
*/
const HANDLE_Y_OFFSET = 20

/**
* React Flow node component for the landing canvas
* Includes CSS animations and connection handles
* Styled to match the application's workflow blocks
* @param props - Component properties containing node data
* @returns A React Flow compatible node component
*/
Expand Down Expand Up @@ -41,15 +46,15 @@ export const LandingNode = React.memo(function LandingNode({ data }: { data: Lan
type='target'
position={Position.Left}
style={{
width: '12px',
height: '12px',
background: '#FEFEFE',
border: '1px solid #E5E5E5',
borderRadius: '50%',
top: '50%',
left: '-20px',
width: '7px',
height: '20px',
background: '#D1D1D1',
border: 'none',
borderRadius: '2px 0 0 2px',
top: `${HANDLE_Y_OFFSET}px`,
left: '-7px',
transform: 'translateY(-50%)',
zIndex: 2,
zIndex: 10,
}}
isConnectable={false}
/>
Expand All @@ -59,15 +64,15 @@ export const LandingNode = React.memo(function LandingNode({ data }: { data: Lan
type='source'
position={Position.Right}
style={{
width: '12px',
height: '12px',
background: '#FEFEFE',
border: '1px solid #E5E5E5',
borderRadius: '50%',
top: '50%',
right: '-20px',
width: '7px',
height: '20px',
background: '#D1D1D1',
border: 'none',
borderRadius: '0 2px 2px 0',
top: `${HANDLE_Y_OFFSET}px`,
right: '-7px',
transform: 'translateY(-50%)',
zIndex: 2,
zIndex: 10,
}}
isConnectable={false}
/>
Expand Down
29 changes: 15 additions & 14 deletions .../sim/app/(landing)/components/hero/components/landing-canvas/landing-block/loop-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface LoopBlockProps {
/**
* Loop block container component that provides a styled container
* for grouping related elements with a dashed border
* Styled to match the application's subflow containers
* @param props - Component properties including children and styling
* @returns A styled loop container component
*/
Expand All @@ -29,33 +30,33 @@ export const LoopBlock = React.memo(function LoopBlock({
style={{
width: '1198px',
height: '528px',
borderRadius: '14px',
background: 'rgba(59, 130, 246, 0.10)',
borderRadius: '8px',
background: 'rgba(59, 130, 246, 0.08)',
position: 'relative',
...style,
}}
>
{/* Custom dashed border with SVG */}
{/* Custom dashed border with SVG - 8px border radius to match blocks */}
<svg
className='pointer-events-none absolute inset-0 h-full w-full'
style={{ borderRadius: '14px' }}
style={{ borderRadius: '8px' }}
preserveAspectRatio='none'
>
<path
className='landing-loop-animated-dash'
d='M 1183.5 527.5
L 14 527.5
A 13.5 13.5 0 0 1 0.5 514
L 0.5 14
A 13.5 13.5 0 0 1 14 0.5
L 1183.5 0.5
A 13.5 13.5 0 0 1 1197 14
L 1197 514
A 13.5 13.5 0 0 1 1183.5 527.5 Z'
d='M 1190 527.5
L 8 527.5
A 7.5 7.5 0 0 1 0.5 520
L 0.5 8
A 7.5 7.5 0 0 1 8 0.5
L 1190 0.5
A 7.5 7.5 0 0 1 1197.5 8
L 1197.5 520
A 7.5 7.5 0 0 1 1190 527.5 Z'
fill='none'
stroke='#3B82F6'
strokeWidth='1'
strokeDasharray='12 12'
strokeDasharray='8 8'
strokeLinecap='round'
/>
</svg>
Expand Down
51 changes: 39 additions & 12 deletions apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,52 @@
import React from 'react'

/**
* Properties for a tag component
* Properties for a subblock row component
* Matches the SubBlockRow pattern from workflow-block.tsx
*/
export interface TagProps {
/** Icon element to display in the tag */
icon: React.ReactNode
/** Text label for the tag */
export interface SubBlockRowProps {
/** Icon element to display (optional, for visual context) */
icon?: React.ReactNode
/** Text label for the row title */
label: string
/** Optional value to display on the right side */
value?: string
}

/**
* Tag component for displaying labeled icons in a compact format
* @param props - Tag properties including icon and label
* @returns A styled tag component
* Kept for backwards compatibility
*/
export const Tag = React.memo(function Tag({ icon, label }: TagProps) {
export type TagProps = SubBlockRowProps

/**
* SubBlockRow component matching the workflow block's subblock row style
* @param props - Row properties including label and optional value
* @returns A styled row component
*/
export const SubBlockRow = React.memo(function SubBlockRow({ label, value }: SubBlockRowProps) {
Copy link
Contributor

@greptile-apps greptile-apps bot Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: icon prop declared in interface but not used in component - destructure it if intended for display or remove from interface

Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
Line: 26:26

Comment:
**style:** `icon` prop declared in interface but not used in component - destructure it if intended for display or remove from interface

How can I resolve this? If you propose a fix, please make it concise.

// Split label by colon to separate title and value if present
const [title, displayValue] = label.includes(':')
? label.split(':').map((s) => s.trim())
: [label, value]
Comment on lines +26 to +30
Copy link
Contributor

@greptile-apps greptile-apps bot Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: simplified label splitting logic loses flexibility

The current implementation always splits on the first colon, which means labels like "Time: 09:00AM: Daily" would split incorrectly. Consider using split(':', 2) pattern or limit to first occurrence only.

Suggested change
export const SubBlockRow = React.memo(function SubBlockRow({ label, value }: SubBlockRowProps) {
// Split label by colon to separate title and value if present
const [title, displayValue] = label.includes(':')
? label.split(':').map((s) => s.trim())
: [label, value]
const colonIndex = label.indexOf(':')
const [title, displayValue] = colonIndex !== -1
? [label.slice(0, colonIndex).trim(), label.slice(colonIndex + 1).trim()]
: [label, value]
Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
Line: 26:30

Comment:
**logic:** simplified label splitting logic loses flexibility

The current implementation always splits on the first colon, which means labels like `"Time: 09:00AM: Daily"` would split incorrectly. Consider using `split(':', 2)` pattern or limit to first occurrence only.

```suggestion
  const colonIndex = label.indexOf(':')
  const [title, displayValue] = colonIndex !== -1
    ? [label.slice(0, colonIndex).trim(), label.slice(colonIndex + 1).trim()]
    : [label, value]
```

How can I resolve this? If you propose a fix, please make it concise.


return (
<div className='flex w-fit items-center gap-1 rounded-[8px] border border-gray-300 bg-white px-2 py-0.5'>
<div className='h-3 w-3 text-muted-foreground'>{icon}</div>
<p className='text-muted-foreground text-xs leading-normal'>{label}</p>
<div className='flex items-center gap-[8px]'>
<span className='min-w-0 truncate text-[#888888] text-[14px] capitalize' title={title}>
{title}
</span>
{displayValue && (
<span
className='flex-1 truncate text-right text-[#171717] text-[14px]'
title={displayValue}
>
{displayValue}
</span>
)}
</div>
)
})

/**
* Tag component - alias for SubBlockRow for backwards compatibility
*/
export const Tag = SubBlockRow
5 changes: 3 additions & 2 deletions apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ import { LandingFlow } from '@/app/(landing)/components/hero/components/landing-

/**
* Visual constants for landing node dimensions
* Matches BLOCK_DIMENSIONS from the application
*/
export const CARD_WIDTH = 256
export const CARD_HEIGHT = 92
export const CARD_WIDTH = 250
export const CARD_HEIGHT = 100

/**
* Landing block node with positioning information
Expand Down
28 changes: 12 additions & 16 deletions ...sim/app/(landing)/components/hero/components/landing-canvas/landing-edge/landing-edge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,29 @@ import React from 'react'
import { type EdgeProps, getSmoothStepPath, Position } from 'reactflow'

/**
* Custom edge component with animated dotted line that floats between handles
* Custom edge component with animated dashed line
* Styled to match the application's workflow edges with rectangular handles
* @param props - React Flow edge properties
* @returns An animated dotted edge component
* @returns An animated dashed edge component
*/
export const LandingEdge = React.memo(function LandingEdge(props: EdgeProps) {
const { id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, data } =
props
const { id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style } = props

// Adjust the connection points to create floating effect
// Account for handle size (12px) and additional spacing
const handleRadius = 6 // Half of handle width (12px)
const floatingGap = 1 // Additional gap for floating effect

// Calculate adjusted positions based on edge direction
// Adjust the connection points to connect flush with rectangular handles
// Handle width is 7px, positioned at -7px from edge
let adjustedSourceX = sourceX
let adjustedTargetX = targetX

if (sourcePosition === Position.Right) {
adjustedSourceX = sourceX + handleRadius + floatingGap
adjustedSourceX = sourceX + 1
} else if (sourcePosition === Position.Left) {
adjustedSourceX = sourceX - handleRadius - floatingGap
adjustedSourceX = sourceX - 1
}

if (targetPosition === Position.Left) {
adjustedTargetX = targetX - handleRadius - floatingGap
adjustedTargetX = targetX - 1
} else if (targetPosition === Position.Right) {
adjustedTargetX = targetX + handleRadius + floatingGap
adjustedTargetX = targetX + 1
}

const [path] = getSmoothStepPath({
Expand All @@ -40,8 +36,8 @@ export const LandingEdge = React.memo(function LandingEdge(props: EdgeProps) {
targetY,
sourcePosition,
targetPosition,
borderRadius: 20,
offset: 10,
borderRadius: 8,
offset: 16,
})

return (
Expand Down
Loading