fix(landing): ui

[emir-karabeg]

Summary

Landing spacing and canvas.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

Solo.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 24, 2026 8:56pm

[greptile-apps]

Greptile Summary

This PR updates the landing page canvas to match the application's workflow block styling. The changes align visual elements (dimensions, colors, spacing, border radius) with the actual workflow UI, making the landing page preview more accurate.

Key changes:

• Refactored Tag component to SubBlockRow with colon-separated label format ("Title: Value")
• Updated block dimensions from 256x92 to 250x100 to match BLOCK_DIMENSIONS constants
• Changed border radius from 14px to 8px across blocks and loop containers
• Replaced circular handles (12x12px) with rectangular handles (7x20px) matching production styling
• Updated edge connections and dash patterns for consistency
• Minor spacing adjustments to pricing section and GitHub star count update

Confidence Score: 4/5

• This PR is safe to merge with one logic issue to address
• The changes are primarily visual styling updates that align the landing page with the production workflow UI. The refactoring is well-structured with proper backwards compatibility. One logic issue exists with the label splitting that could cause incorrect parsing for labels with multiple colons.
• Pay attention to apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx for the label splitting logic issue

Important Files Changed

Filename	Overview
apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx	refactored Tag component to SubBlockRow matching workflow block pattern, splits labels on colon for title/value display
apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx	updated styling to match workflow blocks with 250px width, 8px border radius, proper header/content separation
apps/sim/app/(landing)/components/hero/hero.tsx	refactored landing blocks to use colon-separated labels instead of icon-based tags

Sequence Diagram

sequenceDiagram
    participant User
    participant Hero
    participant LandingCanvas
    participant LandingNode
    participant LandingBlock
    participant SubBlockRow

    User->>Hero: Views landing page
    Hero->>LandingCanvas: Renders canvas with LANDING_BLOCKS data
    Note over Hero: Updated block definitions<br/>with colon-separated labels
    LandingCanvas->>LandingNode: Creates nodes with updated dimensions (250x100)
    LandingNode->>LandingBlock: Renders block with SubBlockRow tags
    Note over LandingNode: Rectangular handles (7x20px)<br/>at Y offset 20px
    LandingBlock->>SubBlockRow: Displays tag with split label logic
    Note over SubBlockRow: Splits "Time: 09:00AM Daily"<br/>into title and value
    SubBlockRow-->>LandingBlock: Renders title/value row
    LandingBlock-->>LandingNode: Styled block (8px border radius)
    LandingNode-->>LandingCanvas: Complete node with handles
    LandingCanvas-->>Hero: Rendered canvas matching app workflow UI
    Hero-->>User: Displays updated landing page

Loading

[greptile-apps]

_{11 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: hardcoding isProd = true breaks all development and test environments

Suggested change

	export const isProd = true
	export const isProd = env.NODE_ENV === 'production'

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/lib/core/config/feature-flags.ts
Line: 9:9

Comment:
**logic:** hardcoding `isProd = true` breaks all development and test environments

```suggestion
export const isProd = env.NODE_ENV === 'production'
```

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

[greptile-apps]

logic: hardcoding isHosted = true breaks self-hosted deployments and disables isAuthDisabled flag

Suggested change

	export const isHosted = true
	export const isHosted =
	getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
	getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/lib/core/config/feature-flags.ts
Line: 24:24

Comment:
**logic:** hardcoding `isHosted = true` breaks self-hosted deployments and disables `isAuthDisabled` flag

```suggestion
export const isHosted =
  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
```

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

[greptile-apps]

syntax: getEnv import removed but needed for isHosted logic

Suggested change

	import { env, isFalsy, isTruthy } from './env'
	import { env, getEnv, isFalsy, isTruthy } from './env'

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/lib/core/config/feature-flags.ts
Line: 4:4

Comment:
**syntax:** `getEnv` import removed but needed for `isHosted` logic

```suggestion
import { env, getEnv, isFalsy, isTruthy } from './env'
```

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

[greptile-apps]

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.

[emir-karabeg]

@greptile

[greptile-apps]

_{10 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

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.