+ {lines.map((line, i) => {
+ const trimmed = line.trim()
+ if (!trimmed) return
+
+ if (trimmed === '---') {
+ return
+ }
+
+ if (trimmed.startsWith('### ')) {
+ return (
+
+ {trimmed.slice(4)}
+
+ )
+ }
+
+ return (
+
$1')
+ .replace(/\*\*(.+?)\*\*/g, '$1')
+ .replace(/_"(.+?)"_/g, '“$1”')
+ .replace(/_(.+?)_/g, '$1'),
+ }}
+ />
+ )
+ })}
+
+ )
+}
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts
new file mode 100644
index 0000000000..7501b8d0e1
--- /dev/null
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts
@@ -0,0 +1,226 @@
+import type { Edge, Node } from 'reactflow'
+import { Position } from 'reactflow'
+
+/**
+ * Tool entry displayed as a chip on agent blocks
+ */
+export interface PreviewTool {
+ name: string
+ type: string
+ bgColor: string
+}
+
+/**
+ * Static block definition for preview workflow nodes
+ */
+export interface PreviewBlock {
+ id: string
+ name: string
+ type: string
+ bgColor: string
+ rows: Array<{ title: string; value: string }>
+ tools?: PreviewTool[]
+ markdown?: string
+ position: { x: number; y: number }
+ hideTargetHandle?: boolean
+ hideSourceHandle?: boolean
+}
+
+/**
+ * Workflow definition containing nodes, edges, and metadata
+ */
+export interface PreviewWorkflow {
+ id: string
+ name: string
+ color: string
+ blocks: PreviewBlock[]
+ edges: Array<{ id: string; source: string; target: string }>
+}
+
+/**
+ * IT Service Management workflow — Slack Trigger -> Agent (KB tool) -> Jira
+ */
+const IT_SERVICE_WORKFLOW: PreviewWorkflow = {
+ id: 'wf-it-service',
+ name: 'IT Service Management',
+ color: '#FF6B2C',
+ blocks: [
+ {
+ id: 'slack-1',
+ name: 'Slack',
+ type: 'slack',
+ bgColor: '#611f69',
+ rows: [
+ { title: 'Channel', value: '#it-support' },
+ { title: 'Event', value: 'New Message' },
+ ],
+ position: { x: 80, y: 140 },
+ hideTargetHandle: true,
+ },
+ {
+ id: 'agent-1',
+ name: 'Agent',
+ type: 'agent',
+ bgColor: '#701ffc',
+ rows: [
+ { title: 'Model', value: 'claude-sonnet-4.6' },
+ { title: 'System Prompt', value: 'Triage incoming IT...' },
+ ],
+ tools: [{ name: 'Knowledge Base', type: 'knowledge_base', bgColor: '#10B981' }],
+ position: { x: 420, y: 40 },
+ },
+ {
+ id: 'jira-1',
+ name: 'Jira',
+ type: 'jira',
+ bgColor: '#E0E0E0',
+ rows: [
+ { title: 'Operation', value: 'Get Issues' },
+ { title: 'Project', value: 'IT-Support' },
+ ],
+ position: { x: 420, y: 260 },
+ hideSourceHandle: true,
+ },
+ ],
+ edges: [
+ { id: 'e-1', source: 'slack-1', target: 'agent-1' },
+ { id: 'e-2', source: 'slack-1', target: 'jira-1' },
+ ],
+}
+
+/**
+ * Content pipeline workflow — Schedule -> Agent (X + YouTube tools)
+ */
+const CONTENT_PIPELINE_WORKFLOW: PreviewWorkflow = {
+ id: 'wf-content-pipeline',
+ name: 'Content Pipeline',
+ color: '#33C482',
+ blocks: [
+ {
+ id: 'schedule-1',
+ name: 'Schedule',
+ type: 'schedule',
+ bgColor: '#6366F1',
+ rows: [
+ { title: 'Run Frequency', value: 'Daily' },
+ { title: 'Time', value: '09:00 AM' },
+ ],
+ position: { x: 80, y: 140 },
+ hideTargetHandle: true,
+ },
+ {
+ id: 'agent-2',
+ name: 'Agent',
+ type: 'agent',
+ bgColor: '#701ffc',
+ rows: [
+ { title: 'Model', value: 'grok-4' },
+ { title: 'System Prompt', value: 'Repurpose trending...' },
+ ],
+ tools: [
+ { name: 'X', type: 'x', bgColor: '#000000' },
+ { name: 'YouTube', type: 'youtube', bgColor: '#FF0000' },
+ ],
+ position: { x: 420, y: 180 },
+ hideSourceHandle: true,
+ },
+ ],
+ edges: [{ id: 'e-3', source: 'schedule-1', target: 'agent-2' }],
+}
+
+/**
+ * Empty "New Agent" workflow — a single note prompting the user to start building
+ */
+const NEW_AGENT_WORKFLOW: PreviewWorkflow = {
+ id: 'wf-new-agent',
+ name: 'New Agent',
+ color: '#787878',
+ blocks: [
+ {
+ id: 'note-1',
+ name: '',
+ type: 'note',
+ bgColor: 'transparent',
+ rows: [],
+ markdown: '### What will you build?\n\n_"Find Linear todos and send in Slack"_',
+ position: { x: 0, y: 0 },
+ hideTargetHandle: true,
+ hideSourceHandle: true,
+ },
+ ],
+ edges: [],
+}
+
+export const PREVIEW_WORKFLOWS: PreviewWorkflow[] = [
+ CONTENT_PIPELINE_WORKFLOW,
+ IT_SERVICE_WORKFLOW,
+ NEW_AGENT_WORKFLOW,
+]
+
+/** Stagger delay between each block appearing (seconds). */
+export const BLOCK_STAGGER = 0.12
+
+/** Shared cubic-bezier easing — fast deceleration, gentle settle. */
+export const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1]
+
+/** Shared edge style applied to all preview workflow connections */
+const EDGE_STYLE = { stroke: '#454545', strokeWidth: 1.5 } as const
+
+/**
+ * Converts a PreviewWorkflow to React Flow nodes and edges.
+ *
+ * @param workflow - The workflow definition
+ * @param animate - When true, node/edge data includes animation metadata
+ */
+export function toReactFlowElements(
+ workflow: PreviewWorkflow,
+ animate = false
+): {
+ nodes: Node[]
+ edges: Edge[]
+} {
+ const blockIndexMap = new Map(workflow.blocks.map((b, i) => [b.id, i]))
+
+ const nodes: Node[] = workflow.blocks.map((block, index) => ({
+ id: block.id,
+ type: 'previewBlock',
+ position: block.position,
+ data: {
+ name: block.name,
+ blockType: block.type,
+ bgColor: block.bgColor,
+ rows: block.rows,
+ tools: block.tools,
+ markdown: block.markdown,
+ hideTargetHandle: block.hideTargetHandle,
+ hideSourceHandle: block.hideSourceHandle,
+ index,
+ animate,
+ },
+ draggable: true,
+ selectable: false,
+ connectable: false,
+ sourcePosition: Position.Right,
+ targetPosition: Position.Left,
+ }))
+
+ const edges: Edge[] = workflow.edges.map((e) => {
+ const sourceIndex = blockIndexMap.get(e.source) ?? 0
+ return {
+ id: e.id,
+ source: e.source,
+ target: e.target,
+ type: 'previewEdge',
+ animated: false,
+ style: EDGE_STYLE,
+ sourceHandle: 'source',
+ targetHandle: 'target',
+ data: {
+ animate,
+ delay: animate ? sourceIndex * BLOCK_STAGGER + BLOCK_STAGGER : 0,
+ },
+ }
+ })
+
+ return { nodes, edges }
+}
diff --git a/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx b/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
new file mode 100644
index 0000000000..2a27cff9d3
--- /dev/null
+++ b/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { motion, type Variants } from 'framer-motion'
+import { LandingPreviewPanel } from '@/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
+import { LandingPreviewSidebar } from '@/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar'
+import { LandingPreviewWorkflow } from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow'
+import {
+ EASE_OUT,
+ PREVIEW_WORKFLOWS,
+} from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data'
+
+const containerVariants: Variants = {
+ hidden: {},
+ visible: {
+ transition: { staggerChildren: 0.15 },
+ },
+}
+
+const sidebarVariants: Variants = {
+ hidden: { opacity: 0, x: -12 },
+ visible: {
+ opacity: 1,
+ x: 0,
+ transition: {
+ x: { duration: 0.25, ease: EASE_OUT },
+ opacity: { duration: 0.25, ease: EASE_OUT },
+ },
+ },
+}
+
+const panelVariants: Variants = {
+ hidden: { opacity: 0, x: 12 },
+ visible: {
+ opacity: 1,
+ x: 0,
+ transition: {
+ x: { duration: 0.25, ease: EASE_OUT },
+ opacity: { duration: 0.25, ease: EASE_OUT },
+ },
+ },
+}
+
+/**
+ * Interactive workspace preview for the hero section.
+ *
+ * Renders a lightweight replica of the Sim workspace with:
+ * - A sidebar with two selectable workflows
+ * - A ReactFlow canvas showing the active workflow's blocks and edges
+ * - A panel with a functional copilot input (stores prompt + redirects to /signup)
+ *
+ * Everything except the workflow items and the copilot input is non-interactive.
+ * On mount the sidebar slides from left and the panel from right. The canvas
+ * background stays fully opaque; individual block nodes animate in with a
+ * staggered fade. Edges draw left-to-right. Animations only fire on initial
+ * load — workflow switches render instantly.
+ */
+export function LandingPreview() {
+ const [activeWorkflowId, setActiveWorkflowId] = useState(PREVIEW_WORKFLOWS[0].id)
+ const isInitialMount = useRef(true)
+
+ useEffect(() => {
+ isInitialMount.current = false
+ }, [])
+
+ const activeWorkflow =
+ PREVIEW_WORKFLOWS.find((w) => w.id === activeWorkflowId) ?? PREVIEW_WORKFLOWS[0]
+
+ return (
+