fix(landing): ui (#2979)

Author: emir-karabeg

apps/sim/app/(landing)/components/hero/components/index.ts

@@ -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,

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx

@@ -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 */
@@ -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[]
 }
 
 /**
@@ -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
  */
@@ -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>
   )
 })

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-node.tsx

@@ -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
  */
@@ -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}
         />
@@ -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}
         />

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/loop-block.tsx

@@ -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
  */
@@ -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>

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx

@@ -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) {
+  // Split label by colon to separate title and value if present
+  const [title, displayValue] = label.includes(':')
+    ? label.split(':').map((s) => s.trim())
+    : [label, value]
+
   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

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx

@@ -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

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-edge/landing-edge.tsx

@@ -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({
@@ -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 (