diff --git a/README.md b/README.md
index 2fc2bef504..17e2ad1ae5 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
   </a>
 </p>
 
-<p align="center">Build and deploy AI agent workflows in minutes.</p>
+<p align="center">The open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.</p>
 
 <p align="center">
   <a href="https://sim.ai" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/sim.ai-6F3DFA" alt="Sim.ai"></a>
diff --git a/apps/docs/app/[lang]/[[...slug]]/page.tsx b/apps/docs/app/[lang]/[[...slug]]/page.tsx
index 0a4afc9818..5c7710e8a7 100644
--- a/apps/docs/app/[lang]/[[...slug]]/page.tsx
+++ b/apps/docs/app/[lang]/[[...slug]]/page.tsx
@@ -264,15 +264,17 @@ export async function generateMetadata(props: {
   return {
     title: data.title,
     description:
-      data.description || 'Sim visual workflow builder for AI applications documentation',
+      data.description ||
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce.',
     keywords: [
-      'AI workflow builder',
-      'visual workflow editor',
-      'AI automation',
-      'workflow automation',
       'AI agents',
-      'no-code AI',
-      'drag and drop workflows',
+      'agentic workforce',
+      'AI agent platform',
+      'agentic workflows',
+      'LLM orchestration',
+      'AI automation',
+      'knowledge base',
+      'AI integrations',
       data.title?.toLowerCase().split(' '),
     ]
       .flat()
@@ -282,7 +284,8 @@ export async function generateMetadata(props: {
     openGraph: {
       title: data.title,
       description:
-        data.description || 'Sim visual workflow builder for AI applications documentation',
+        data.description ||
+        'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce.',
       url: fullUrl,
       siteName: 'Sim Documentation',
       type: 'article',
@@ -303,7 +306,8 @@ export async function generateMetadata(props: {
       card: 'summary_large_image',
       title: data.title,
       description:
-        data.description || 'Sim visual workflow builder for AI applications documentation',
+        data.description ||
+        'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce.',
       images: [ogImageUrl],
       creator: '@simdotai',
       site: '@simdotai',
diff --git a/apps/docs/app/[lang]/layout.tsx b/apps/docs/app/[lang]/layout.tsx
index d76a11f103..ef8165751b 100644
--- a/apps/docs/app/[lang]/layout.tsx
+++ b/apps/docs/app/[lang]/layout.tsx
@@ -63,7 +63,7 @@ export default async function Layout({ children, params }: LayoutProps) {
     '@type': 'WebSite',
     name: 'Sim Documentation',
     description:
-      'Comprehensive documentation for Sim - the visual workflow builder for AI Agent Workflows.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     url: 'https://docs.sim.ai',
     publisher: {
       '@type': 'Organization',
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 103de41769..5548fd7e74 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -7,26 +7,27 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 export const metadata = {
   metadataBase: new URL('https://docs.sim.ai'),
   title: {
-    default: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    default: 'Sim Documentation — Build AI Agents & Run Your Agentic Workforce',
     template: '%s',
   },
   description:
-    'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+    'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
   keywords: [
-    'AI workflow builder',
-    'visual workflow editor',
-    'AI automation',
-    'workflow automation',
     'AI agents',
-    'no-code AI',
-    'drag and drop workflows',
+    'agentic workforce',
+    'AI agent platform',
+    'open-source AI agents',
+    'agentic workflows',
+    'LLM orchestration',
     'AI integrations',
-    'workflow canvas',
-    'AI Agent Workflow Builder',
-    'workflow orchestration',
-    'agent builder',
-    'AI workflow automation',
-    'visual programming',
+    'knowledge base',
+    'AI automation',
+    'workflow builder',
+    'AI workflow orchestration',
+    'enterprise AI',
+    'AI agent deployment',
+    'intelligent automation',
+    'AI tools',
   ],
   authors: [{ name: 'Sim Team', url: 'https://sim.ai' }],
   creator: 'Sim',
@@ -53,9 +54,9 @@ export const metadata = {
     alternateLocale: ['es_ES', 'fr_FR', 'de_DE', 'ja_JP', 'zh_CN'],
     url: 'https://docs.sim.ai',
     siteName: 'Sim Documentation',
-    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    title: 'Sim Documentation — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     images: [
       {
         url: 'https://docs.sim.ai/api/og?title=Sim%20Documentation',
@@ -67,9 +68,9 @@ export const metadata = {
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    title: 'Sim Documentation — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Comprehensive documentation for Sim - the visual workflow builder for AI applications.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     creator: '@simdotai',
     site: '@simdotai',
     images: ['https://docs.sim.ai/api/og?title=Sim%20Documentation'],
diff --git a/apps/docs/app/llms.txt/route.ts b/apps/docs/app/llms.txt/route.ts
index bf5a7a68b6..352f4cc904 100644
--- a/apps/docs/app/llms.txt/route.ts
+++ b/apps/docs/app/llms.txt/route.ts
@@ -37,9 +37,9 @@ export async function GET() {
 
     const manifest = `# Sim Documentation
 
-> Visual Workflow Builder for AI Applications
+> The open-source platform to build AI agents and run your agentic workforce.
 
-Sim is a visual workflow builder for AI applications that lets you build AI agent workflows visually. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.
+Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders.
 
 ## Documentation Overview
 
diff --git a/apps/docs/components/docs-layout/toc-footer.tsx b/apps/docs/components/docs-layout/toc-footer.tsx
index 01eb5d81a1..6e8fca4bfd 100644
--- a/apps/docs/components/docs-layout/toc-footer.tsx
+++ b/apps/docs/components/docs-layout/toc-footer.tsx
@@ -13,9 +13,9 @@ export function TOCFooter() {
         <div className='text-balance font-semibold text-base leading-tight'>
           Start building today
         </div>
-        <div className='text-muted-foreground'>Trusted by over 60,000 builders.</div>
+        <div className='text-muted-foreground'>Trusted by over 100,000 builders.</div>
         <div className='text-muted-foreground'>
-          Build Agentic workflows visually on a drag-and-drop canvas or with natural language.
+          The open-source platform to build AI agents and run your agentic workforce.
         </div>
         <Link
           href='https://sim.ai/signup'
diff --git a/apps/docs/components/structured-data.tsx b/apps/docs/components/structured-data.tsx
index c3aebd10d0..6aad777f84 100644
--- a/apps/docs/components/structured-data.tsx
+++ b/apps/docs/components/structured-data.tsx
@@ -74,7 +74,7 @@ export function StructuredData({
     name: 'Sim Documentation',
     url: baseUrl,
     description:
-      'Comprehensive documentation for Sim visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     publisher: {
       '@type': 'Organization',
       name: 'Sim',
@@ -104,7 +104,7 @@ export function StructuredData({
     applicationCategory: 'DeveloperApplication',
     operatingSystem: 'Any',
     description:
-      'Visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs.',
     url: baseUrl,
     author: {
       '@type': 'Organization',
@@ -115,12 +115,13 @@ export function StructuredData({
       category: 'Developer Tools',
     },
     featureList: [
-      'Visual workflow builder with drag-and-drop interface',
-      'AI agent creation and automation',
-      '80+ built-in integrations',
-      'Real-time team collaboration',
-      'Multiple deployment options',
-      'Custom integrations via MCP protocol',
+      'AI agent creation',
+      'Agentic workflow orchestration',
+      '1,000+ integrations',
+      'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
+      'Knowledge base creation',
+      'Table creation',
+      'Document creation',
     ],
   }
 
diff --git a/apps/sim/app/(home)/components/features/features.tsx b/apps/sim/app/(home)/components/features/features.tsx
index 71a6ec0a73..01cdc6572d 100644
--- a/apps/sim/app/(home)/components/features/features.tsx
+++ b/apps/sim/app/(home)/components/features/features.tsx
@@ -9,7 +9,7 @@
  *
  * GEO:
  * - Each feature block is independently extractable (atomic answer block pattern).
- * - Include specific numbers ("100+ integrations", "15+ AI providers", "SOC2 compliant").
+ * - Include specific numbers ("1,000+ integrations", "15+ AI providers", "SOC2 compliant").
  * - Always use "Sim" by name — never "the platform" or "our tool" (entity consistency).
  */
 export default function Features() {
diff --git a/apps/sim/app/(home)/components/footer/footer.tsx b/apps/sim/app/(home)/components/footer/footer.tsx
index d6f0af220d..baa3670813 100644
--- a/apps/sim/app/(home)/components/footer/footer.tsx
+++ b/apps/sim/app/(home)/components/footer/footer.tsx
@@ -8,7 +8,7 @@
  * - Legal links (Privacy, Terms) must be crawlable (trust signals).
  *
  * GEO:
- * - Include "Sim — Open-source AI agent workflow builder" as visible text (entity reinforcement).
+ * - Include "Sim — Build AI agents and run your agentic workforce" as visible text (entity reinforcement).
  * - Social links (X, GitHub, LinkedIn, Discord) must match `sameAs` in structured-data.tsx.
  * - Link to all major pages: Docs, Pricing, Enterprise, Careers, Changelog (internal link graph).
  * - Display compliance badges (SOC2, HIPAA) and status page link as visible trust signals.
diff --git a/apps/sim/app/(home)/components/hero/components/animated-blocks.tsx b/apps/sim/app/(home)/components/hero/components/animated-blocks.tsx
new file mode 100644
index 0000000000..f85a630425
--- /dev/null
+++ b/apps/sim/app/(home)/components/hero/components/animated-blocks.tsx
@@ -0,0 +1,584 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { motion, type Variants } from 'framer-motion'
+
+/** Stagger between each block appearing (seconds). */
+const ENTER_STAGGER = 0.06
+
+/** Duration of each block's fade-in (seconds). */
+const ENTER_DURATION = 0.3
+
+/** Stagger between each block disappearing (seconds). */
+const EXIT_STAGGER = 0.12
+
+/** Duration of each block's fade-out (seconds). */
+const EXIT_DURATION = 0.5
+
+/** Shared corner radius for all decorative rects. */
+const RX = '2.59574'
+
+/** Hold time after the initial enter animation before cycling starts (ms). */
+const INITIAL_HOLD_MS = 2500
+
+/** Pause between an exit completing and the next enter starting (ms). */
+const TRANSITION_PAUSE_MS = 400
+
+/** Hold time between successive transitions (ms). */
+const HOLD_BETWEEN_MS = 2500
+
+/** Animation state for a block group. */
+export type BlockAnimState = 'entering' | 'visible' | 'exiting' | 'hidden'
+
+/** Positions around the hero where block groups can appear. */
+export type BlockPosition = 'topRight' | 'left' | 'rightEdge' | 'rightSide' | 'topLeft'
+
+/** Attributes for a single animated SVG rect. */
+interface BlockRect {
+  opacity: number
+  width: string
+  height: string
+  fill: string
+  x?: string
+  y?: string
+  transform?: string
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: ENTER_STAGGER } },
+  exit: { transition: { staggerChildren: EXIT_STAGGER } },
+}
+
+const blockVariants: Variants = {
+  hidden: { opacity: 0, transition: { duration: 0 } },
+  visible: (targetOpacity: number) => ({
+    opacity: targetOpacity,
+    transition: { duration: ENTER_DURATION },
+  }),
+  exit: {
+    opacity: 0,
+    transition: { duration: EXIT_DURATION },
+  },
+}
+
+/** Maps a BlockAnimState to the framer-motion animate value. */
+function toAnimateValue(state: BlockAnimState): string {
+  if (state === 'entering' || state === 'visible') return 'visible'
+  if (state === 'exiting') return 'exit'
+  return 'hidden'
+}
+
+/** Shared SVG wrapper that staggers child rects in and out. */
+function AnimatedBlocksSvg({
+  width,
+  height,
+  viewBox,
+  rects,
+  animState = 'entering',
+}: {
+  width: number
+  height: number
+  viewBox: string
+  rects: readonly BlockRect[]
+  animState?: BlockAnimState
+}) {
+  return (
+    <motion.svg
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className='h-auto w-full'
+      initial='hidden'
+      animate={toAnimateValue(animState)}
+      variants={containerVariants}
+    >
+      {rects.map((r, i) => (
+        <motion.rect
+          key={i}
+          variants={blockVariants}
+          custom={r.opacity}
+          x={r.x}
+          y={r.y}
+          width={r.width}
+          height={r.height}
+          rx={RX}
+          fill={r.fill}
+          transform={r.transform}
+        />
+      ))}
+    </motion.svg>
+  )
+}
+
+/**
+ * Rect data for the top-right position.
+ * Two-row horizontal strip, ordered left-to-right.
+ */
+const TOP_RIGHT_RECTS: readonly BlockRect[] = [
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '0', y: '0', width: '85.3433', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '34.2403', y: '0', width: '34.2403', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 1, x: '34.2403', y: '0', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '51.6188', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '68.4812', y: '0', width: '54.6502', height: '16.8626', fill: '#00F701' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '34.2403', height: '33.7252', fill: '#00F701' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '51.103', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '123.6484', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 0.6, x: '157.371', y: '0', width: '34.2403', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 1, x: '157.371', y: '0', width: '16.8626', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 0.6, x: '208.993', y: '0', width: '68.4805', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '209.137', y: '0', width: '16.8626', height: '33.7252', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '243.233', y: '0', width: '34.2403', height: '33.7252', fill: '#FA4EDF' },
+  { opacity: 1, x: '243.233', y: '0', width: '16.8626', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '260.096', y: '0', width: '34.04', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 1, x: '260.611', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#FA4EDF' },
+]
+
+/**
+ * Rect data for the top-left position.
+ * Same two-row structure as top-right with rotated colour palette:
+ * blue→green, green→yellow, yellow→pink, pink→blue.
+ */
+const TOP_LEFT_RECTS: readonly BlockRect[] = [
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '33.7252', fill: '#00F701' },
+  { opacity: 0.6, x: '0', y: '0', width: '85.3433', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 0.6, x: '34.2403', y: '0', width: '34.2403', height: '33.7252', fill: '#00F701' },
+  { opacity: 1, x: '34.2403', y: '0', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '51.6188', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '68.4812', y: '0', width: '54.6502', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '34.2403', height: '33.7252', fill: '#FFCC02' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '51.103', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 1, x: '123.6484', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 0.6, x: '157.371', y: '0', width: '34.2403', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 1, x: '157.371', y: '0', width: '16.8626', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '208.993', y: '0', width: '68.4805', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '209.137', y: '0', width: '16.8626', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '243.233', y: '0', width: '34.2403', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 1, x: '243.233', y: '0', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '260.096', y: '0', width: '34.04', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '260.611', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+]
+
+/**
+ * Rect data for the left position.
+ * Two-column vertical strip, ordered top-to-bottom.
+ */
+const LEFT_RECTS: readonly BlockRect[] = [
+  {
+    opacity: 0.6,
+    width: '34.240',
+    height: '33.725',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '68.480',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.727 0)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.727 17.378)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.986',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 51.616)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '140.507',
+    fill: '#00F701',
+    transform: 'matrix(-1 0 0 1 33.986 85.335)',
+  },
+  {
+    opacity: 0.4,
+    x: '17.119',
+    y: '136.962',
+    width: '34.240',
+    height: '16.8626',
+    fill: '#FFCC02',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 1,
+    x: '17.119',
+    y: '136.962',
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FFCC02',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 0.5,
+    width: '34.240',
+    height: '33.725',
+    fill: '#00F701',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+]
+
+/**
+ * Rect data for the right-side position (right edge of screenshot).
+ * Same two-column structure as left with rotated colours:
+ * pink→blue, green→pink, yellow→green.
+ */
+const RIGHT_SIDE_RECTS: readonly BlockRect[] = [
+  {
+    opacity: 0.6,
+    width: '34.240',
+    height: '33.725',
+    fill: '#2ABBF8',
+    transform: 'matrix(0 1 1 0 0 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '68.480',
+    fill: '#2ABBF8',
+    transform: 'matrix(-1 0 0 1 33.727 0)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#2ABBF8',
+    transform: 'matrix(-1 0 0 1 33.727 17.378)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.986',
+    fill: '#2ABBF8',
+    transform: 'matrix(0 1 1 0 0 51.616)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '140.507',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.986 85.335)',
+  },
+  {
+    opacity: 0.4,
+    x: '17.119',
+    y: '136.962',
+    width: '34.240',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 1,
+    x: '17.119',
+    y: '136.962',
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 0.5,
+    width: '34.240',
+    height: '33.725',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+]
+
+/**
+ * Rect data for the right-edge position (far right of screen).
+ * Two-column vertical strip, ordered top-to-bottom.
+ */
+const RIGHT_RECTS: readonly BlockRect[] = [
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.726',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '34.241',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 16.891 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '68.482',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.739 16.888)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.726',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 33.776)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.739 34.272)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.726',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0.012 68.510)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '102.384',
+    fill: '#2ABBF8',
+    transform: 'matrix(-1 0 0 1 33.787 102.384)',
+  },
+  {
+    opacity: 0.4,
+    x: '17.131',
+    y: '153.859',
+    width: '34.241',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.131 153.859)',
+  },
+  {
+    opacity: 1,
+    x: '17.131',
+    y: '153.859',
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.131 153.859)',
+  },
+]
+
+/** Number of rects per position, used to compute animation durations. */
+const RECT_COUNTS: Record<BlockPosition, number> = {
+  topRight: TOP_RIGHT_RECTS.length,
+  topLeft: TOP_LEFT_RECTS.length,
+  left: LEFT_RECTS.length,
+  rightSide: RIGHT_SIDE_RECTS.length,
+  rightEdge: RIGHT_RECTS.length,
+}
+
+/** Total enter animation time for a position (seconds). */
+function enterTime(pos: BlockPosition): number {
+  return (RECT_COUNTS[pos] - 1) * ENTER_STAGGER + ENTER_DURATION
+}
+
+/** Total exit animation time for a position (seconds). */
+function exitTime(pos: BlockPosition): number {
+  return (RECT_COUNTS[pos] - 1) * EXIT_STAGGER + EXIT_DURATION
+}
+
+/** A single step in the repeating animation cycle. */
+type CycleStep =
+  | { action: 'exit'; position: BlockPosition }
+  | { action: 'enter'; position: BlockPosition }
+  | { action: 'hold'; ms: number }
+
+/**
+ * The repeating cycle sequence. After all steps, the layout returns to its
+ * initial state (topRight + left + rightEdge) so the loop is seamless.
+ *
+ * Order: exit top → exit right-edge → enter right-side-of-preview →
+ * exit left → enter top-left → exit right-side → enter left →
+ * exit top-left → enter top-right → enter right-edge → back to initial.
+ */
+const CYCLE_STEPS: readonly CycleStep[] = [
+  { action: 'exit', position: 'topRight' },
+  { action: 'exit', position: 'rightEdge' },
+  { action: 'enter', position: 'rightSide' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'exit', position: 'left' },
+  { action: 'enter', position: 'topLeft' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'exit', position: 'rightSide' },
+  { action: 'enter', position: 'left' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'exit', position: 'topLeft' },
+  { action: 'enter', position: 'topRight' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'enter', position: 'rightEdge' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+]
+
+/**
+ * Drives the block-cycling animation loop. Returns the current animation
+ * state for every position so each component can be driven declaratively.
+ *
+ * Lifecycle:
+ * 1. All three initial groups (topRight, left, rightEdge) enter together.
+ * 2. After a hold period the cycle begins, processing each step in order.
+ * 3. Repeats indefinitely, returning to the initial layout every cycle.
+ */
+export function useBlockCycle(): Record<BlockPosition, BlockAnimState> {
+  const [states, setStates] = useState<Record<BlockPosition, BlockAnimState>>({
+    topRight: 'entering',
+    left: 'entering',
+    rightEdge: 'entering',
+    rightSide: 'hidden',
+    topLeft: 'hidden',
+  })
+
+  useEffect(() => {
+    const cancelled = { current: false }
+    const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
+
+    const run = async () => {
+      const longestEnter = Math.max(
+        enterTime('topRight'),
+        enterTime('left'),
+        enterTime('rightEdge')
+      )
+      await delay(longestEnter * 1000)
+      if (cancelled.current) return
+
+      setStates({
+        topRight: 'visible',
+        left: 'visible',
+        rightEdge: 'visible',
+        rightSide: 'hidden',
+        topLeft: 'hidden',
+      })
+
+      await delay(INITIAL_HOLD_MS)
+      if (cancelled.current) return
+
+      while (!cancelled.current) {
+        for (const step of CYCLE_STEPS) {
+          if (cancelled.current) return
+
+          if (step.action === 'exit') {
+            setStates((prev) => ({ ...prev, [step.position]: 'exiting' }))
+            await delay(exitTime(step.position) * 1000)
+            if (cancelled.current) return
+            setStates((prev) => ({ ...prev, [step.position]: 'hidden' }))
+            await delay(TRANSITION_PAUSE_MS)
+          } else if (step.action === 'enter') {
+            setStates((prev) => ({ ...prev, [step.position]: 'entering' }))
+            await delay(enterTime(step.position) * 1000)
+            if (cancelled.current) return
+            setStates((prev) => ({ ...prev, [step.position]: 'visible' }))
+            await delay(TRANSITION_PAUSE_MS)
+          } else {
+            await delay(step.ms)
+          }
+
+          if (cancelled.current) return
+        }
+      }
+    }
+
+    run()
+    return () => {
+      cancelled.current = true
+    }
+  }, [])
+
+  return states
+}
+
+interface AnimatedBlockProps {
+  animState?: BlockAnimState
+}
+
+/** Two-row horizontal strip at the top-right of the hero. */
+export function BlocksTopRightAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={295}
+      height={34}
+      viewBox='0 0 295 34'
+      rects={TOP_RIGHT_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-row horizontal strip at the top-left of the hero. */
+export function BlocksTopLeftAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={295}
+      height={34}
+      viewBox='0 0 295 34'
+      rects={TOP_LEFT_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-column vertical strip on the left edge of the screenshot. */
+export function BlocksLeftAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={34}
+      height={226}
+      viewBox='0 0 34 226.021'
+      rects={LEFT_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-column vertical strip on the right edge of the screenshot. */
+export function BlocksRightSideAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={34}
+      height={226}
+      viewBox='0 0 34 226.021'
+      rects={RIGHT_SIDE_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-column vertical strip at the far-right edge of the screen. */
+export function BlocksRightAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={34}
+      height={205}
+      viewBox='0 0 34 204.769'
+      rects={RIGHT_RECTS}
+      animState={animState}
+    />
+  )
+}
diff --git a/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-panel/hero-preview-panel.tsx b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-panel/hero-preview-panel.tsx
new file mode 100644
index 0000000000..fddee8ba68
--- /dev/null
+++ b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-panel/hero-preview-panel.tsx
@@ -0,0 +1,156 @@
+'use client'
+
+import { memo, useCallback, useRef, useState } from 'react'
+import { ArrowUp } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { createPortal } from 'react-dom'
+import { BubbleChatPreview, ChevronDown, MoreHorizontal, Play } from '@/components/emcn'
+import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
+
+/**
+ * Lightweight static panel replicating the real workspace panel styling.
+ * The copilot tab is active with a functional user input.
+ * When submitted, stores the prompt and redirects to /signup (same as landing hero).
+ *
+ * Structure mirrors the real Panel component:
+ *   aside > div.border-l.pt-[14px] > Header(px-8) > Tabs(px-8,pt-14) > Content(pt-12)
+ *     inside Content > Copilot > header-bar(mx-[-1px]) > UserInput(p-8)
+ */
+export const HeroPreviewPanel = memo(function HeroPreviewPanel() {
+  const router = useRouter()
+  const [inputValue, setInputValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(null)
+
+  const isEmpty = inputValue.trim().length === 0
+
+  const handleSubmit = useCallback(() => {
+    if (isEmpty) return
+    LandingPromptStorage.store(inputValue)
+    router.push('/signup')
+  }, [isEmpty, inputValue, router])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        handleSubmit()
+      }
+    },
+    [handleSubmit]
+  )
+
+  return (
+    <div className='flex h-full w-[280px] flex-shrink-0 flex-col bg-[#1e1e1e]'>
+      <div className='flex h-full flex-col border-[#2c2c2c] border-l pt-[14px]'>
+        {/* Header — More + Chat | Deploy + Run */}
+        <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
+          <div className='pointer-events-none flex gap-[6px]'>
+            <div className='flex h-[30px] w-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
+              <MoreHorizontal className='h-[14px] w-[14px] text-[#e6e6e6]' />
+            </div>
+            <div className='flex h-[30px] w-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
+              <BubbleChatPreview className='h-[14px] w-[14px] text-[#e6e6e6]' />
+            </div>
+          </div>
+          <Link
+            href='/signup'
+            className='flex gap-[6px]'
+            onMouseMove={(e) => setCursorPos({ x: e.clientX, y: e.clientY })}
+            onMouseLeave={() => setCursorPos(null)}
+          >
+            <div className='flex h-[30px] items-center rounded-[5px] bg-[#32bd7e] px-[10px] transition-[filter] hover:brightness-110'>
+              <span className='font-medium text-[#1b1b1b] text-[12px]'>Deploy</span>
+            </div>
+            <div className='flex h-[30px] items-center gap-[8px] rounded-[5px] bg-[#32bd7e] px-[10px] transition-[filter] hover:brightness-110'>
+              <Play className='h-[11.5px] w-[11.5px] text-[#1b1b1b]' />
+              <span className='font-medium text-[#1b1b1b] text-[12px]'>Run</span>
+            </div>
+          </Link>
+          {cursorPos &&
+            createPortal(
+              <div
+                className='pointer-events-none fixed z-[9999]'
+                style={{ left: cursorPos.x + 14, top: cursorPos.y + 14 }}
+              >
+                {/* Decorative color bars — mirrors hero top-right block sequence */}
+                <div className='flex h-[4px]'>
+                  <div className='h-full w-[8px] bg-[#2ABBF8]' />
+                  <div className='h-full w-[14px] bg-[#2ABBF8] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#00F701]' />
+                  <div className='h-full w-[16px] bg-[#00F701] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#FFCC02]' />
+                  <div className='h-full w-[10px] bg-[#FFCC02] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#FA4EDF]' />
+                  <div className='h-full w-[14px] bg-[#FA4EDF] opacity-60' />
+                </div>
+                <div
+                  className='flex items-center gap-[5px] bg-white px-[6px] py-[4px] font-medium text-[#1C1C1C] text-[11px]'
+                  style={{ boxShadow: '2px 2px 0px 0px #3d3d3d' }}
+                >
+                  Get started
+                  <ChevronDown className='-rotate-90 h-[7px] w-[7px] text-[#1C1C1C]' />
+                </div>
+              </div>,
+              document.body
+            )}
+        </div>
+
+        {/* Tabs */}
+        <div className='flex flex-shrink-0 items-center px-[8px] pt-[14px]'>
+          <div className='pointer-events-none flex gap-[4px]'>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-[#3d3d3d] bg-[#363636] px-[8px] py-[5px]'>
+              <span className='font-medium text-[#e6e6e6] text-[12.5px]'>Copilot</span>
+            </div>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-[8px] py-[5px]'>
+              <span className='font-medium text-[#787878] text-[12.5px]'>Toolbar</span>
+            </div>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-[8px] py-[5px]'>
+              <span className='font-medium text-[#787878] text-[12.5px]'>Editor</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Tab content — copilot */}
+        <div className='flex flex-1 flex-col overflow-hidden pt-[12px]'>
+          <div className='flex h-full flex-col'>
+            {/* Copilot header bar — matches mx-[-1px] in real copilot */}
+            <div className='pointer-events-none mx-[-1px] flex flex-shrink-0 items-center rounded-[4px] border border-[#2c2c2c] bg-[#292929] px-[12px] py-[6px]'>
+              <span className='truncate font-medium text-[#e6e6e6] text-[14px]'>New Chat</span>
+            </div>
+
+            {/* User input — matches real UserInput at p-[8px] inside copilot welcome state */}
+            <div className='px-[8px] pt-[12px] pb-[8px]'>
+              <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-[6px] py-[6px]'>
+                <textarea
+                  ref={textareaRef}
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder='Build an AI agent...'
+                  rows={2}
+                  className='mb-[6px] min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-[2px] py-1 font-base text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
+                />
+                <div className='flex items-center justify-end'>
+                  <button
+                    type='button'
+                    onClick={handleSubmit}
+                    disabled={isEmpty}
+                    className='flex h-[22px] w-[22px] items-center justify-center rounded-full border-0 p-0 transition-colors'
+                    style={{
+                      background: isEmpty ? '#808080' : '#e0e0e0',
+                      cursor: isEmpty ? 'not-allowed' : 'pointer',
+                    }}
+                  >
+                    <ArrowUp size={14} strokeWidth={2.25} color='#1b1b1b' />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
diff --git a/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-sidebar/hero-preview-sidebar.tsx b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-sidebar/hero-preview-sidebar.tsx
new file mode 100644
index 0000000000..2287f2932c
--- /dev/null
+++ b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-sidebar/hero-preview-sidebar.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Database, Layout, Search, Settings } from 'lucide-react'
+import { ChevronDown, Library } from '@/components/emcn'
+import type { PreviewWorkflow } from '@/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/workflow-data'
+
+/**
+ * Props for the HeroPreviewSidebar component
+ */
+interface HeroPreviewSidebarProps {
+  workflows: PreviewWorkflow[]
+  activeWorkflowId: string
+  onSelectWorkflow: (id: string) => void
+}
+
+/**
+ * Static footer navigation items matching the real sidebar
+ */
+const FOOTER_NAV_ITEMS = [
+  { id: 'logs', label: 'Logs', icon: Library },
+  { id: 'templates', label: 'Templates', icon: Layout },
+  { id: 'knowledge-base', label: 'Knowledge Base', icon: Database },
+  { id: 'settings', label: 'Settings', icon: Settings },
+] as const
+
+/**
+ * Lightweight static sidebar replicating the real workspace sidebar styling.
+ * Only workflow items are interactive — everything else is pointer-events-none.
+ *
+ * Colors sourced from the dark theme CSS variables:
+ * --surface-1: #1e1e1e, --surface-5: #363636, --border: #2c2c2c, --border-1: #3d3d3d
+ * --text-primary: #e6e6e6, --text-tertiary: #b3b3b3, --text-muted: #787878
+ */
+export function HeroPreviewSidebar({
+  workflows,
+  activeWorkflowId,
+  onSelectWorkflow,
+}: HeroPreviewSidebarProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const handleToggle = useCallback(() => {
+    setIsDropdownOpen((prev) => !prev)
+  }, [])
+
+  useEffect(() => {
+    if (!isDropdownOpen) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsDropdownOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isDropdownOpen])
+
+  return (
+    <div className='flex h-full w-[220px] flex-shrink-0 flex-col border-[#2c2c2c] border-r bg-[#1e1e1e]'>
+      {/* Header */}
+      <div className='relative flex-shrink-0 px-[14px] pt-[12px]' ref={dropdownRef}>
+        <div className='flex items-center justify-between'>
+          <button
+            type='button'
+            onClick={handleToggle}
+            className='group -mx-[6px] flex cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[#363636]'
+          >
+            <span className='truncate font-base text-[#e6e6e6] text-[14px]'>My Workspace</span>
+            <ChevronDown
+              className={`h-[8px] w-[10px] flex-shrink-0 text-[#787878] transition-all duration-100 group-hover:text-[#cccccc] ${isDropdownOpen ? 'rotate-180' : ''}`}
+            />
+          </button>
+          <div className='pointer-events-none flex flex-shrink-0 items-center'>
+            <Search className='h-[14px] w-[14px] text-[#787878]' />
+          </div>
+        </div>
+
+        {/* Workspace switcher dropdown */}
+        {isDropdownOpen && (
+          <div className='absolute top-[42px] left-[8px] z-50 min-w-[160px] max-w-[160px] rounded-[6px] bg-[#242424] px-[6px] py-[6px] shadow-lg'>
+            <div
+              className='flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[6px] bg-[#3d3d3d] px-[6px] font-base text-[#e6e6e6] text-[13px]'
+              role='menuitem'
+              onClick={() => setIsDropdownOpen(false)}
+            >
+              <span className='min-w-0 flex-1 truncate'>My Workspace</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Workflow items */}
+      <div className='mt-[8px] space-y-[2px] overflow-x-hidden px-[8px]'>
+        {workflows.map((workflow) => {
+          const isActive = workflow.id === activeWorkflowId
+          return (
+            <button
+              key={workflow.id}
+              type='button'
+              onClick={() => onSelectWorkflow(workflow.id)}
+              className={`group flex h-[26px] w-full items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] transition-colors ${
+                isActive ? 'bg-[#363636]' : 'bg-transparent hover:bg-[#363636]'
+              }`}
+            >
+              <div
+                className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px]'
+                style={{ backgroundColor: workflow.color }}
+              />
+              <div className='min-w-0 flex-1'>
+                <div
+                  className={`min-w-0 truncate text-left font-medium ${
+                    isActive ? 'text-[#e6e6e6]' : 'text-[#b3b3b3] group-hover:text-[#e6e6e6]'
+                  }`}
+                >
+                  {workflow.name}
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Footer navigation — static */}
+      <div className='pointer-events-none mt-auto flex flex-shrink-0 flex-col gap-[2px] border-[#2c2c2c] border-t px-[7.75px] pt-[8px] pb-[8px]'>
+        {FOOTER_NAV_ITEMS.map((item) => {
+          const Icon = item.icon
+          return (
+            <div
+              key={item.id}
+              className='flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]'
+            >
+              <Icon className='h-[14px] w-[14px] flex-shrink-0 text-[#b3b3b3]' />
+              <span className='truncate font-medium text-[#b3b3b3] text-[13px]'>{item.label}</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/hero-preview-workflow.tsx b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/hero-preview-workflow.tsx
new file mode 100644
index 0000000000..2e9d48b1c5
--- /dev/null
+++ b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/hero-preview-workflow.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { motion } from 'framer-motion'
+import ReactFlow, {
+  applyEdgeChanges,
+  applyNodeChanges,
+  type Edge,
+  type EdgeProps,
+  type EdgeTypes,
+  getSmoothStepPath,
+  type Node,
+  type NodeTypes,
+  type OnEdgesChange,
+  type OnNodesChange,
+  ReactFlowProvider,
+} from 'reactflow'
+import 'reactflow/dist/style.css'
+import { PreviewBlockNode } from '@/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/preview-block-node'
+import {
+  EASE_OUT,
+  type PreviewWorkflow,
+  toReactFlowElements,
+} from '@/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/workflow-data'
+
+interface HeroPreviewWorkflowProps {
+  workflow: PreviewWorkflow
+  animate?: boolean
+}
+
+/**
+ * Custom edge that draws left-to-right on initial load via stroke animation.
+ * Falls back to a static path when `data.animate` is false.
+ */
+function PreviewEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+  data,
+}: EdgeProps) {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  if (data?.animate) {
+    return (
+      <motion.path
+        id={id}
+        className='react-flow__edge-path'
+        d={edgePath}
+        style={{ ...style, fill: 'none' }}
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{
+          pathLength: { duration: 0.4, delay: data.delay ?? 0, ease: EASE_OUT },
+          opacity: { duration: 0.15, delay: data.delay ?? 0 },
+        }}
+      />
+    )
+  }
+
+  return (
+    <path
+      id={id}
+      className='react-flow__edge-path'
+      d={edgePath}
+      style={{ ...style, fill: 'none' }}
+    />
+  )
+}
+
+const NODE_TYPES: NodeTypes = { previewBlock: PreviewBlockNode }
+const EDGE_TYPES: EdgeTypes = { previewEdge: PreviewEdge }
+const PRO_OPTIONS = { hideAttribution: true }
+const FIT_VIEW_OPTIONS = { padding: 0.3, maxZoom: 1 } as const
+
+/**
+ * Inner flow component. Keyed on workflow ID by the parent so it remounts
+ * cleanly on workflow switch — fitView fires on mount with zero delay.
+ */
+function PreviewFlow({ workflow, animate = false }: HeroPreviewWorkflowProps) {
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => toReactFlowElements(workflow, animate),
+    [workflow, animate]
+  )
+
+  const [nodes, setNodes] = useState<Node[]>(initialNodes)
+  const [edges, setEdges] = useState<Edge[]>(initialEdges)
+
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    []
+  )
+
+  const onEdgesChange: OnEdgesChange = useCallback(
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    []
+  )
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      nodeTypes={NODE_TYPES}
+      edgeTypes={EDGE_TYPES}
+      defaultEdgeOptions={{ type: 'previewEdge' }}
+      elementsSelectable={false}
+      nodesDraggable
+      nodesConnectable={false}
+      zoomOnScroll={false}
+      zoomOnDoubleClick={false}
+      panOnScroll={false}
+      zoomOnPinch={false}
+      panOnDrag
+      preventScrolling={false}
+      autoPanOnNodeDrag={false}
+      proOptions={PRO_OPTIONS}
+      fitView
+      fitViewOptions={FIT_VIEW_OPTIONS}
+      className='h-full w-full bg-[#1b1b1b]'
+    />
+  )
+}
+
+/**
+ * Lightweight ReactFlow canvas displaying an interactive workflow preview.
+ * The key on workflow.id forces a clean remount on switch — instant fitView,
+ * no timers, no flicker.
+ */
+export function HeroPreviewWorkflow({ workflow, animate = false }: HeroPreviewWorkflowProps) {
+  return (
+    <div className='h-full w-full'>
+      <ReactFlowProvider key={workflow.id}>
+        <PreviewFlow workflow={workflow} animate={animate} />
+      </ReactFlowProvider>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/preview-block-node.tsx b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/preview-block-node.tsx
new file mode 100644
index 0000000000..803f7d2f1a
--- /dev/null
+++ b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/preview-block-node.tsx
@@ -0,0 +1,247 @@
+'use client'
+
+import { memo } from 'react'
+import { motion } from 'framer-motion'
+import { Database } from 'lucide-react'
+import { Handle, type NodeProps, Position } from 'reactflow'
+import {
+  AgentIcon,
+  JiraIcon,
+  ScheduleIcon,
+  SlackIcon,
+  StartIcon,
+  TelegramIcon,
+  xIcon,
+  YouTubeIcon,
+} from '@/components/icons'
+import {
+  BLOCK_STAGGER,
+  EASE_OUT,
+  type PreviewTool,
+} from '@/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/workflow-data'
+
+/** Map block type strings to their icon components. */
+const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  starter: StartIcon,
+  start_trigger: StartIcon,
+  agent: AgentIcon,
+  slack: SlackIcon,
+  jira: JiraIcon,
+  x: xIcon,
+  youtube: YouTubeIcon,
+  schedule: ScheduleIcon,
+  telegram: TelegramIcon,
+  knowledge_base: Database,
+}
+
+/**
+ * Data shape for preview block nodes
+ */
+interface PreviewBlockData {
+  name: string
+  blockType: string
+  bgColor: string
+  rows: Array<{ title: string; value: string }>
+  tools?: PreviewTool[]
+  markdown?: string
+  hideTargetHandle?: boolean
+  hideSourceHandle?: boolean
+  index?: number
+  animate?: boolean
+}
+
+/**
+ * Handle styling matching the real WorkflowBlock handles.
+ * --workflow-edge in dark mode: #454545
+ */
+const HANDLE_BASE = '!z-[10] !border-none !bg-[#454545]'
+const HANDLE_LEFT = `${HANDLE_BASE} !left-[-8px] !h-5 !w-[7px] !rounded-r-none !rounded-l-[2px]`
+const HANDLE_RIGHT = `${HANDLE_BASE} !right-[-8px] !h-5 !w-[7px] !rounded-l-none !rounded-r-[2px]`
+
+/**
+ * Static preview block node matching the real WorkflowBlock styling.
+ * Renders a block header with icon + name, sub-block rows, and tool chips.
+ *
+ * Colors sourced from dark theme CSS variables:
+ * --surface-2: #232323, --border-1: #3d3d3d
+ * --text-primary: #e6e6e6, --text-tertiary: #b3b3b3
+ */
+export const PreviewBlockNode = memo(function PreviewBlockNode({
+  data,
+}: NodeProps<PreviewBlockData>) {
+  const {
+    name,
+    blockType,
+    bgColor,
+    rows,
+    tools,
+    markdown,
+    hideTargetHandle,
+    hideSourceHandle,
+    index = 0,
+    animate = false,
+  } = data
+  const Icon = BLOCK_ICONS[blockType]
+  const delay = animate ? index * BLOCK_STAGGER : 0
+
+  if (blockType === 'note' && markdown) {
+    return (
+      <motion.div
+        className='relative'
+        initial={animate ? { opacity: 0 } : false}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.45, delay, ease: EASE_OUT }}
+      >
+        <div className='w-[280px] select-none rounded-[8px] border border-[#3d3d3d] bg-[#232323]'>
+          <div className='border-[#3d3d3d] border-b p-[8px]'>
+            <span className='font-medium text-[#e6e6e6] text-[16px]'>Note</span>
+          </div>
+          <div className='p-[10px]'>
+            <NoteMarkdown content={markdown} />
+          </div>
+        </div>
+      </motion.div>
+    )
+  }
+
+  const hasContent = rows.length > 0 || (tools && tools.length > 0)
+
+  return (
+    <motion.div
+      className='relative'
+      initial={animate ? { opacity: 0 } : false}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.45, delay, ease: EASE_OUT }}
+    >
+      <div className='relative z-[20] w-[250px] select-none rounded-[8px] border border-[#3d3d3d] bg-[#232323]'>
+        {/* Target handle (left side) */}
+        {!hideTargetHandle && (
+          <Handle
+            type='target'
+            position={Position.Left}
+            id='target'
+            className={HANDLE_LEFT}
+            style={{ top: '20px', transform: 'translateY(-50%)' }}
+            isConnectableStart={false}
+            isConnectableEnd={false}
+          />
+        )}
+
+        {/* Header */}
+        <div
+          className={`flex items-center justify-between p-[8px] ${hasContent ? 'border-[#3d3d3d] border-b' : ''}`}
+        >
+          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
+            <div
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              style={{ background: bgColor }}
+            >
+              {Icon && <Icon className='h-[16px] w-[16px] text-white' />}
+            </div>
+            <span className='truncate font-medium text-[#e6e6e6] text-[16px]'>{name}</span>
+          </div>
+        </div>
+
+        {/* Sub-block rows + tools */}
+        {hasContent && (
+          <div className='flex flex-col gap-[8px] p-[8px]'>
+            {rows.map((row) => (
+              <div key={row.title} className='flex items-center gap-[8px]'>
+                <span className='min-w-0 truncate text-[#b3b3b3] text-[14px] capitalize'>
+                  {row.title}
+                </span>
+                {row.value && (
+                  <span className='flex-1 truncate text-right text-[#e6e6e6] text-[14px]'>
+                    {row.value}
+                  </span>
+                )}
+              </div>
+            ))}
+
+            {/* Tool chips — inline with label */}
+            {tools && tools.length > 0 && (
+              <div className='flex items-center gap-[8px]'>
+                <span className='flex-shrink-0 text-[#b3b3b3] text-[14px]'>Tools</span>
+                <div className='flex flex-1 flex-wrap items-center justify-end gap-[5px]'>
+                  {tools.map((tool) => {
+                    const ToolIcon = BLOCK_ICONS[tool.type]
+                    return (
+                      <div
+                        key={tool.type}
+                        className='flex items-center gap-[5px] rounded-[5px] border border-[#3d3d3d] bg-[#2a2a2a] px-[6px] py-[3px]'
+                      >
+                        <div
+                          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                          style={{ background: tool.bgColor }}
+                        >
+                          {ToolIcon && <ToolIcon className='h-[10px] w-[10px] text-white' />}
+                        </div>
+                        <span className='text-[#e6e6e6] text-[12px]'>{tool.name}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Source handle (right side) */}
+        {!hideSourceHandle && (
+          <Handle
+            type='source'
+            position={Position.Right}
+            id='source'
+            className={HANDLE_RIGHT}
+            style={{ top: '20px', transform: 'translateY(-50%)' }}
+            isConnectableStart={false}
+            isConnectableEnd={false}
+          />
+        )}
+      </div>
+    </motion.div>
+  )
+})
+
+/**
+ * Renders lightweight markdown-like content for note blocks.
+ * Supports ### headings, **bold**, _italic_, --- rules, and blank-line spacing.
+ */
+function NoteMarkdown({ content }: { content: string }) {
+  const lines = content.split('\n')
+
+  return (
+    <div className='flex flex-col gap-[4px]'>
+      {lines.map((line, i) => {
+        const trimmed = line.trim()
+        if (!trimmed) return <div key={i} className='h-[4px]' />
+
+        if (trimmed === '---') {
+          return <hr key={i} className='my-[4px] border-[#3d3d3d] border-t' />
+        }
+
+        if (trimmed.startsWith('### ')) {
+          return (
+            <p key={i} className='font-semibold text-[#e6e6e6] text-[16px] leading-[1.3]'>
+              {trimmed.slice(4)}
+            </p>
+          )
+        }
+
+        return (
+          <p
+            key={i}
+            className='font-medium text-[#e6e6e6] text-[13px] leading-[1.5]'
+            dangerouslySetInnerHTML={{
+              __html: trimmed
+                .replace(/\*\*_(.+?)_\*\*/g, '<strong><em>$1</em></strong>')
+                .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+                .replace(/_"(.+?)"_/g, '<em>&ldquo;$1&rdquo;</em>')
+                .replace(/_(.+?)_/g, '<em>$1</em>'),
+            }}
+          />
+        )
+      })}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/workflow-data.ts b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/workflow-data.ts
new file mode 100644
index 0000000000..67af3bea04
--- /dev/null
+++ b/apps/sim/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/workflow-data.ts
@@ -0,0 +1,231 @@
+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 + Jira tools)
+ */
+const IT_SERVICE_WORKFLOW: PreviewWorkflow = {
+  id: 'wf-it-service',
+  name: 'IT Service Management',
+  color: '#33C482',
+  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' },
+        { name: 'Jira', type: 'jira', bgColor: '#E0E0E0' },
+      ],
+      position: { x: 420, y: 80 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [{ id: 'e-1', source: 'slack-1', target: 'agent-1' }],
+}
+
+/**
+ * Content pipeline workflow — Schedule -> Agent (X + YouTube tools)
+ *                                     \-> Telegram
+ */
+const CONTENT_PIPELINE_WORKFLOW: PreviewWorkflow = {
+  id: 'wf-content-pipeline',
+  name: 'Content Pipeline',
+  color: '#FF6B2C',
+  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: 40 },
+      hideSourceHandle: true,
+    },
+    {
+      id: 'telegram-1',
+      name: 'Telegram',
+      type: 'telegram',
+      bgColor: '#E0E0E0',
+      rows: [
+        { title: 'Operation', value: 'Send Message' },
+        { title: 'Chat', value: '#content-updates' },
+      ],
+      position: { x: 420, y: 260 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-3', source: 'schedule-1', target: 'agent-2' },
+    { id: 'e-4', source: 'schedule-1', target: 'telegram-1' },
+  ],
+}
+
+/**
+ * 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 Slack todos and add them to Linear"_',
+      position: { x: 0, y: 0 },
+      hideTargetHandle: true,
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [],
+}
+
+export const PREVIEW_WORKFLOWS: PreviewWorkflow[] = [
+  IT_SERVICE_WORKFLOW,
+  CONTENT_PIPELINE_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/hero/components/hero-preview/hero-preview.tsx b/apps/sim/app/(home)/components/hero/components/hero-preview/hero-preview.tsx
new file mode 100644
index 0000000000..dfdb5031fa
--- /dev/null
+++ b/apps/sim/app/(home)/components/hero/components/hero-preview/hero-preview.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { motion, type Variants } from 'framer-motion'
+import { HeroPreviewPanel } from '@/app/(home)/components/hero/components/hero-preview/components/hero-preview-panel/hero-preview-panel'
+import { HeroPreviewSidebar } from '@/app/(home)/components/hero/components/hero-preview/components/hero-preview-sidebar/hero-preview-sidebar'
+import { HeroPreviewWorkflow } from '@/app/(home)/components/hero/components/hero-preview/components/hero-preview-workflow/hero-preview-workflow'
+import {
+  EASE_OUT,
+  PREVIEW_WORKFLOWS,
+} from '@/app/(home)/components/hero/components/hero-preview/components/hero-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 HeroPreview() {
+  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 (
+    <motion.div
+      className='dark flex aspect-[1116/549] w-full overflow-hidden rounded bg-[#1b1b1b] antialiased'
+      initial='hidden'
+      animate='visible'
+      variants={containerVariants}
+    >
+      <motion.div className='hidden lg:flex' variants={sidebarVariants}>
+        <HeroPreviewSidebar
+          workflows={PREVIEW_WORKFLOWS}
+          activeWorkflowId={activeWorkflowId}
+          onSelectWorkflow={setActiveWorkflowId}
+        />
+      </motion.div>
+      <div className='relative flex-1 overflow-hidden'>
+        <HeroPreviewWorkflow workflow={activeWorkflow} animate={isInitialMount.current} />
+      </div>
+      <motion.div className='hidden lg:flex' variants={panelVariants}>
+        <HeroPreviewPanel />
+      </motion.div>
+    </motion.div>
+  )
+}
diff --git a/apps/sim/app/(home)/components/hero/hero.tsx b/apps/sim/app/(home)/components/hero/hero.tsx
index 04cd18a70b..1a79f49693 100644
--- a/apps/sim/app/(home)/components/hero/hero.tsx
+++ b/apps/sim/app/(home)/components/hero/hero.tsx
@@ -1,3 +1,32 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import Image from 'next/image'
+import Link from 'next/link'
+import {
+  BlocksLeftAnimated,
+  BlocksRightAnimated,
+  BlocksRightSideAnimated,
+  BlocksTopLeftAnimated,
+  BlocksTopRightAnimated,
+  useBlockCycle,
+} from '@/app/(home)/components/hero/components/animated-blocks'
+
+const HeroPreview = dynamic(
+  () =>
+    import('@/app/(home)/components/hero/components/hero-preview/hero-preview').then(
+      (mod) => mod.HeroPreview
+    ),
+  {
+    ssr: false,
+    loading: () => <div className='aspect-[1116/549] w-full rounded bg-[#1b1b1b]' />,
+  }
+)
+
+/** Shared base classes for CTA link buttons — matches Deploy/Run button styling in the preview panel. */
+const CTA_BASE =
+  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+
 /**
  * Hero section — above-the-fold value proposition.
  *
@@ -5,14 +34,126 @@
  * - `<section id="hero" aria-labelledby="hero-heading">`.
  * - Contains the page's only `<h1>`. Text aligns with the `<title>` tag keyword.
  * - Subtitle `<p>` expands the H1 into a full sentence with the primary keyword.
- * - Primary CTA is a `<Link href="/signup">` (crawlable), not a `<button>`.
+ * - Primary CTA links to `/signup` and `/login` auth pages (crawlable).
  * - Canvas/animations wrapped in `aria-hidden="true"` with a text alternative.
  *
  * GEO:
  * - H1 + subtitle answer "What is Sim?" in two sentences (answer-first pattern).
- * - First 150 chars of visible text explicitly name "Sim", "AI agent", "workflow builder".
- * - Include a `<p className="sr-only">` product summary (60-80 words) rich in entities.
+ * - First 150 chars of visible text explicitly name "Sim", "AI agents", "agentic workflows".
+ * - `<p className="sr-only">` product summary (~50 words) is an atomic answer for AI citation.
  */
 export default function Hero() {
-  return null
+  const blockStates = useBlockCycle()
+
+  return (
+    <section
+      id='hero'
+      aria-labelledby='hero-heading'
+      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[71px]'
+    >
+      {/* Screen reader product summary */}
+      <p className='sr-only'>
+        Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
+        1,000+ integrations and LLMs — including OpenAI, Claude, Gemini, Mistral, and xAI — to
+        deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables,
+        and docs. Trusted by over 100,000 builders at startups and Fortune 500 companies. SOC2 and
+        HIPAA compliant.
+      </p>
+
+      {/* Left card decoration — top-left, partially off-screen */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-[-0.7vw] left-[-2.8vw] z-0 aspect-[344/328] w-[23.9vw]'
+      >
+        <Image src='/landing/card-left.svg' alt='' fill className='object-contain' />
+      </div>
+
+      {/* Right card decoration — top-right, partially off-screen */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-[-2.8vw] right-[0vw] z-0 aspect-[471/470] w-[32.7vw]'
+      >
+        <Image src='/landing/card-right.svg' alt='' fill className='object-contain' />
+      </div>
+
+      {/* Main content */}
+      <div className='relative z-10 flex flex-col items-center gap-[12px]'>
+        <h1
+          id='hero-heading'
+          className='font-[430] font-season text-[64px] text-white leading-[100%] tracking-[-0.02em]'
+        >
+          Build Agents
+        </h1>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[16px] leading-[125%] tracking-[0.02em]'>
+          Build and deploy agentic workflows
+        </p>
+
+        {/* CTA Buttons */}
+        <div className='mt-[12px] flex items-center gap-[8px]'>
+          <Link
+            href='/login'
+            className={`${CTA_BASE} border-[#2A2A2A] text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]`}
+            aria-label='Log in'
+          >
+            Log in
+          </Link>
+          <Link
+            href='/signup'
+            className={`${CTA_BASE} gap-[8px] border-[#33C482] bg-[#33C482] text-black transition-[filter] hover:brightness-110`}
+            aria-label='Get started with Sim'
+          >
+            Get started
+          </Link>
+        </div>
+      </div>
+
+      {/* Top-right blocks */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-0 right-[13.1vw] z-20 w-[calc(140px_+_10.76vw)] max-w-[295px]'
+      >
+        <BlocksTopRightAnimated animState={blockStates.topRight} />
+      </div>
+
+      {/* Top-left blocks */}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-0 left-[16vw] z-20 w-[calc(140px_+_10.76vw)] max-w-[295px]'
+      >
+        <BlocksTopLeftAnimated animState={blockStates.topLeft} />
+      </div>
+
+      {/* Product Screenshot with decorative elements */}
+      <div className='relative z-10 mx-auto mt-[2.4vw] w-[78.9vw] px-[1.4vw]'>
+        {/* Left side blocks - flush against screenshot left edge */}
+        <div
+          aria-hidden='true'
+          className='-translate-y-1/2 pointer-events-none absolute top-[50%] right-[calc(100%-1.41vw)] z-20 w-[calc(16px_+_1.25vw)] max-w-[34px]'
+        >
+          <BlocksLeftAnimated animState={blockStates.left} />
+        </div>
+
+        {/* Right side blocks - flush against screenshot right edge, mirrored to point outward */}
+        <div
+          aria-hidden='true'
+          className='-translate-y-1/2 pointer-events-none absolute top-[50%] left-[calc(100%-1.41vw)] z-20 w-[calc(16px_+_1.25vw)] max-w-[34px] scale-x-[-1]'
+        >
+          <BlocksRightSideAnimated animState={blockStates.rightSide} />
+        </div>
+
+        {/* Interactive workspace preview */}
+        <div className='relative z-10 overflow-hidden rounded border border-[#2A2A2A]'>
+          <HeroPreview />
+        </div>
+      </div>
+
+      {/* Right edge blocks - at right edge of screen */}
+      <div
+        aria-hidden='true'
+        className='-translate-y-1/2 pointer-events-none absolute top-[50%] right-0 z-20 w-[calc(16px_+_1.25vw)] max-w-[34px]'
+      >
+        <BlocksRightAnimated animState={blockStates.rightEdge} />
+      </div>
+    </section>
+  )
 }
diff --git a/apps/sim/app/(home)/components/navbar/components/github-stars.tsx b/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
new file mode 100644
index 0000000000..050af0861a
--- /dev/null
+++ b/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { GithubOutlineIcon } from '@/components/icons'
+import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
+
+const logger = createLogger('github-stars')
+
+const INITIAL_STARS = '26.4k'
+
+/**
+ * Client component that displays GitHub stars count.
+ *
+ * Isolated as a client component to allow the parent Navbar to remain
+ * a Server Component for optimal SEO/GEO crawlability.
+ */
+export function GitHubStars() {
+  const [stars, setStars] = useState(INITIAL_STARS)
+
+  useEffect(() => {
+    getFormattedGitHubStars()
+      .then(setStars)
+      .catch((error) => {
+        logger.warn('Failed to fetch GitHub stars', error)
+      })
+  }, [])
+
+  return (
+    <a
+      href='https://github.com/simstudioai/sim'
+      target='_blank'
+      rel='noopener noreferrer'
+      className='flex items-center gap-[8px] px-[12px]'
+      aria-label={`GitHub repository — ${stars} stars`}
+    >
+      <GithubOutlineIcon className='h-[14px] w-[14px]' />
+      <span aria-live='polite'>{stars}</span>
+    </a>
+  )
+}
diff --git a/apps/sim/app/(home)/components/navbar/navbar.tsx b/apps/sim/app/(home)/components/navbar/navbar.tsx
index b742411149..aebb7d0626 100644
--- a/apps/sim/app/(home)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(home)/components/navbar/navbar.tsx
@@ -1,17 +1,113 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { ChevronDown } from '@/components/emcn'
+import { GitHubStars } from '@/app/(home)/components/navbar/components/github-stars'
+
+interface NavLink {
+  label: string
+  href: string
+  external?: boolean
+  icon?: 'chevron'
+}
+
+const NAV_LINKS: NavLink[] = [
+  { label: 'Docs', href: '/docs', icon: 'chevron' },
+  { label: 'Pricing', href: '/pricing' },
+  { label: 'Careers', href: '/careers' },
+  { label: 'Enterprise', href: '/enterprise' },
+]
+
+/** Logo and nav edge: horizontal padding (px) for left/right symmetry. */
+const LOGO_CELL = 'flex items-center px-[20px]'
+
+/** Links: even spacing between items. */
+const LINK_CELL = 'flex items-center px-[14px]'
+
 /**
  * Landing page navigation bar.
  *
+ * Server Component for immediate crawlability. Only the GitHubStars counter
+ * is a client component (hydrates independently).
+ *
  * SEO:
- * - `<nav aria-label="Primary navigation">` with `itemScope itemType="https://schema.org/SiteNavigationElement"`.
+ * - `<nav>` with schema.org `SiteNavigationElement`.
  * - All routes use `<Link>` (crawlable). External links include `rel="noopener noreferrer"`.
- * - Logo link contains `<span className="sr-only">` with the brand name.
- * - Logo `<Image>` uses `priority` and `loading="eager"` (LCP element).
+ * - Logo `<Image>` uses `priority` (LCP element).
  *
  * GEO:
- * - "Sim" as the canonical entity name everywhere.
  * - Navigation items in semantic `<ul>/<li>` with descriptive anchor text.
  * - Descriptive `aria-label` on interactive elements for AI intent extraction.
+ * - Server-rendered content available immediately to AI crawlers.
  */
 export default function Navbar() {
-  return null
+  return (
+    <nav
+      aria-label='Primary navigation'
+      className='flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
+      itemScope
+      itemType='https://schema.org/SiteNavigationElement'
+    >
+      {/* Logo */}
+      <Link href='/' className={LOGO_CELL} aria-label='Sim home' itemProp='url'>
+        <span itemProp='name' className='sr-only'>
+          Sim
+        </span>
+        <Image
+          src='/logo/sim-landing.svg'
+          alt='Sim'
+          width={71}
+          height={22}
+          className='h-[22px] w-auto'
+          priority
+        />
+      </Link>
+
+      {/* Links */}
+      <ul className='mt-[0.75px] flex'>
+        {NAV_LINKS.map(({ label, href, external, icon }) => (
+          <li key={label} className='flex'>
+            {external ? (
+              <a href={href} target='_blank' rel='noopener noreferrer' className={LINK_CELL}>
+                {label}
+              </a>
+            ) : (
+              <Link
+                href={href}
+                className={icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL}
+                aria-label={label}
+              >
+                {label}
+                {icon === 'chevron' && (
+                  <ChevronDown className='mt-[1.75px] h-[10px] w-[10px] flex-shrink-0 text-[#ECECEC]' />
+                )}
+              </Link>
+            )}
+          </li>
+        ))}
+        <li className='flex'>
+          <GitHubStars />
+        </li>
+      </ul>
+
+      <div className='flex-1' />
+
+      {/* CTAs */}
+      <div className='flex items-center gap-[8px] px-[20px]'>
+        <Link
+          href='/login'
+          className='inline-flex h-[30px] items-center rounded-[5px] border border-[#2A2A2A] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+          aria-label='Log in'
+        >
+          Log in
+        </Link>
+        <Link
+          href='/signup'
+          className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[9px] text-[13.5px] text-black transition-[filter] hover:brightness-110'
+          aria-label='Get started with Sim'
+        >
+          Get started
+        </Link>
+      </div>
+    </nav>
+  )
 }
diff --git a/apps/sim/app/(home)/components/structured-data.tsx b/apps/sim/app/(home)/components/structured-data.tsx
index bac2fbf79d..8d3d5a1af9 100644
--- a/apps/sim/app/(home)/components/structured-data.tsx
+++ b/apps/sim/app/(home)/components/structured-data.tsx
@@ -27,13 +27,13 @@ export default function StructuredData() {
         name: 'Sim',
         alternateName: 'Sim Studio',
         description:
-          'Open-source AI agent workflow builder used by developers at trail-blazing startups to Fortune 500 companies',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
         url: 'https://sim.ai',
         logo: {
           '@type': 'ImageObject',
           '@id': 'https://sim.ai/#logo',
-          url: 'https://sim.ai/logo/b&w/text/b&w.svg',
-          contentUrl: 'https://sim.ai/logo/b&w/text/b&w.svg',
+          url: 'https://sim.ai/logo/b%26w/text/b%26w.svg',
+          contentUrl: 'https://sim.ai/logo/b%26w/text/b%26w.svg',
           width: 49.78314,
           height: 24.276,
           caption: 'Sim Logo',
@@ -55,9 +55,9 @@ export default function StructuredData() {
         '@type': 'WebSite',
         '@id': 'https://sim.ai/#website',
         url: 'https://sim.ai',
-        name: 'Sim — AI Agent Workflow Builder',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         description:
-          'Open-source AI agent workflow builder. 60,000+ developers build and deploy agentic workflows. SOC2 and HIPAA compliant.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Join 100,000+ builders.',
         publisher: { '@id': 'https://sim.ai/#organization' },
         inLanguage: 'en-US',
       },
@@ -65,13 +65,13 @@ export default function StructuredData() {
         '@type': 'WebPage',
         '@id': 'https://sim.ai/#webpage',
         url: 'https://sim.ai',
-        name: 'Sim — Workflows for LLMs | Build AI Agent Workflows',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         isPartOf: { '@id': 'https://sim.ai/#website' },
         about: { '@id': 'https://sim.ai/#software' },
         datePublished: '2024-01-01T00:00:00+00:00',
         dateModified: new Date().toISOString(),
         description:
-          'Build and deploy AI agent workflows with Sim. Visual drag-and-drop interface for creating powerful LLM-powered automations.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs.',
         breadcrumb: { '@id': 'https://sim.ai/#breadcrumb' },
         inLanguage: 'en-US',
         potentialAction: [{ '@type': 'ReadAction', target: ['https://sim.ai'] }],
@@ -86,9 +86,10 @@ export default function StructuredData() {
       {
         '@type': 'WebApplication',
         '@id': 'https://sim.ai/#software',
-        name: 'Sim — AI Agent Workflow Builder',
+        url: 'https://sim.ai',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         description:
-          'Open-source AI agent workflow builder used by 60,000+ developers. Build agentic workflows with visual drag-and-drop interface. SOC2 and HIPAA compliant. Integrate with 100+ apps.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
         applicationCategory: 'DeveloperApplication',
         operatingSystem: 'Web',
         browserRequirements: 'Requires a modern browser with JavaScript enabled',
@@ -130,12 +131,13 @@ export default function StructuredData() {
           },
         ],
         featureList: [
-          'Visual workflow builder',
-          'Drag-and-drop interface',
-          '100+ integrations',
-          'AI model support (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
-          'Real-time collaboration',
-          'Version control',
+          'AI agent creation',
+          'Agentic workflow orchestration',
+          '1,000+ integrations',
+          'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
+          'Knowledge base creation',
+          'Table creation',
+          'Document creation',
           'API access',
           'Custom functions',
           'Scheduled workflows',
@@ -173,7 +175,7 @@ export default function StructuredData() {
             name: 'What is Sim?',
             acceptedAnswer: {
               '@type': 'Answer',
-              text: 'Sim is an open-source AI agent workflow builder used by 60,000+ developers at trail-blazing startups to Fortune 500 companies. It provides a visual drag-and-drop interface for building and deploying agentic workflows. Sim is SOC2 and HIPAA compliant.',
+              text: 'Sim is the open-source platform to build AI agents and run your agentic workforce. Teams connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
             },
           },
           {
@@ -197,7 +199,7 @@ export default function StructuredData() {
             name: 'Do I need coding skills to use Sim?',
             acceptedAnswer: {
               '@type': 'Answer',
-              text: 'No coding skills are required. Sim features a visual drag-and-drop interface that makes it easy to build AI workflows. However, developers can also use custom functions and the API for advanced use cases.',
+              text: 'No coding skills are required. Sim provides a visual interface for building AI agents and agentic workflows. Developers can also use custom functions, the API, and the CLI/SDK for advanced use cases.',
             },
           },
           {
diff --git a/apps/sim/app/(home)/components/templates/templates.tsx b/apps/sim/app/(home)/components/templates/templates.tsx
index 583eb77ac2..0268254f57 100644
--- a/apps/sim/app/(home)/components/templates/templates.tsx
+++ b/apps/sim/app/(home)/components/templates/templates.tsx
@@ -1,16 +1,55 @@
-/**
- * Templates section — pre-built workflow templates and use cases.
- *
- * SEO:
- * - `<section id="templates" aria-labelledby="templates-heading">`.
- * - `<h2 id="templates-heading">` for the section title.
- * - Each template: `<article>` with `<h3>`, `<p>` description, `<Link>` to signup.
- *
- * GEO:
- * - Each card is an atomic answer block: `<h3>Name</h3><p>1-2 sentences</p><ul>Features</ul>`.
- * - Name specific integrations (Slack, Gmail, Pinecone) and AI models (GPT-5, Claude).
- * - Add `id` anchors per card (e.g., `id="template-slack-summarizer"`) for fragment citations.
- */
+'use client'
+
+import { useRef } from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { Badge } from '@/components/emcn'
+
 export default function Templates() {
-  return null
+  const sectionRef = useRef<HTMLDivElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ['start end', 'end start'],
+  })
+
+  const inset = useTransform(scrollYProgress, [0.1, 0.35], [0, 16])
+  const borderRadius = useTransform(scrollYProgress, [0.1, 0.35], [0, 4])
+
+  return (
+    <section
+      ref={sectionRef}
+      id='templates'
+      aria-labelledby='templates-heading'
+      className='mt-[40px] bg-[#F6F6F6]'
+    >
+      <motion.div style={{ padding: inset }}>
+        <motion.div
+          style={{ borderRadius }}
+          className='bg-[#1C1C1C] px-[80px] pt-[120px] pb-[80px]'
+        >
+          <div className='flex flex-col items-start gap-[20px]'>
+            <Badge
+              variant='blue'
+              size='md'
+              dot
+              className='bg-[rgba(42,187,248,0.1)] font-season text-[#2ABBF8] uppercase tracking-[0.02em]'
+            >
+              Templates
+            </Badge>
+
+            <h2
+              id='templates-heading'
+              className='font-[430] font-season text-[40px] text-white leading-[100%] tracking-[-0.02em]'
+            >
+              Ready-made AI templates.
+            </h2>
+
+            <p className='max-w-[463px] font-[430] font-season text-[#F6F6F0]/50 text-[16px] leading-[125%] tracking-[0.02em]'>
+              Jump-start workflows with ready-made templates for any team—fully editable for your
+              stack.
+            </p>
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  )
 }
diff --git a/apps/sim/app/(home)/landing.tsx b/apps/sim/app/(home)/landing.tsx
index daf650aece..3d0cb66a88 100644
--- a/apps/sim/app/(home)/landing.tsx
+++ b/apps/sim/app/(home)/landing.tsx
@@ -1,3 +1,5 @@
+import { martianMono } from '@/app/_styles/fonts/martian-mono/martian-mono'
+import { season } from '@/app/_styles/fonts/season/season'
 import {
   Collaboration,
   Enterprise,
@@ -29,9 +31,9 @@ import {
  *   examples (Templates) -> capabilities (Features) -> social proof (Collaboration, Testimonials) ->
  *   pricing (Pricing) -> enterprise (Enterprise).
  */
-export default function Landing() {
+export default async function Landing() {
   return (
-    <>
+    <div className={`${season.variable} ${martianMono.variable} min-h-screen bg-[#1C1C1C]`}>
       <StructuredData />
       <header>
         <Navbar />
@@ -46,6 +48,6 @@ export default function Landing() {
         <Testimonials />
       </main>
       <Footer />
-    </>
+    </div>
   )
 }
diff --git a/apps/sim/app/(home)/layout.tsx b/apps/sim/app/(home)/layout.tsx
index decde67445..e415527386 100644
--- a/apps/sim/app/(home)/layout.tsx
+++ b/apps/sim/app/(home)/layout.tsx
@@ -1,86 +1,17 @@
-import type { Metadata } from 'next'
 import { martianMono } from '@/app/_styles/fonts/martian-mono/martian-mono'
 import { season } from '@/app/_styles/fonts/season/season'
 
 /**
- * SEO metadata for the landing page.
- *
- * - `title` contains the primary keyword and brand name.
- * - `description` is 150-160 chars, front-loaded with the value proposition.
- * - `openGraph` provides social sharing metadata with a dedicated OG image.
- * - `robots` ensures the landing page is fully indexable.
- * - `alternates.canonical` prevents duplicate content issues.
- *
- * GEO note: The description is written as a direct answer to "What is Sim?"
- * so LLMs can extract it as a cited definition.
- */
-export const metadata: Metadata = {
-  metadataBase: new URL('https://sim.ai'),
-  title: 'Sim — Workflows for LLMs | Build AI Agent Workflows',
-  description:
-    'Sim is an open-source AI agent workflow builder. Build and deploy agentic workflows with a visual drag-and-drop interface. 100+ integrations. SOC2 and HIPAA compliant.',
-  manifest: '/manifest.json',
-  icons: {
-    icon: '/favicon.ico',
-    apple: '/apple-icon.png',
-  },
-  openGraph: {
-    type: 'website',
-    locale: 'en_US',
-    url: 'https://sim.ai',
-    siteName: 'Sim',
-    title: 'Sim — Workflows for LLMs | Build AI Agent Workflows',
-    description:
-      'Open-source AI agent workflow builder used by 60,000+ developers. Visual drag-and-drop interface for building agentic workflows.',
-    images: [
-      {
-        url: '/og-image.png',
-        width: 1200,
-        height: 630,
-        alt: 'Sim — AI Agent Workflow Builder',
-      },
-    ],
-  },
-  twitter: {
-    card: 'summary_large_image',
-    site: '@simdotai',
-    creator: '@simdotai',
-    title: 'Sim — Workflows for LLMs',
-    description:
-      'Open-source AI agent workflow builder. Build and deploy agentic workflows with a visual drag-and-drop interface.',
-    images: ['/og-image.png'],
-  },
-  robots: {
-    index: true,
-    follow: true,
-    googleBot: {
-      index: true,
-      follow: true,
-      'max-video-preview': -1,
-      'max-image-preview': 'large',
-      'max-snippet': -1,
-    },
-  },
-  alternates: {
-    canonical: 'https://sim.ai',
-  },
-  other: {
-    'msapplication-TileColor': '#000000',
-    'theme-color': '#ffffff',
-  },
-}
-
-/**
- * Landing page layout.
+ * Landing page route-group layout.
  *
  * Applies landing-specific font CSS variables to the subtree:
  * - `--font-season` (Season Sans): Headings and display text
  * - `--font-martian-mono` (Martian Mono): Code snippets and technical accents
  *
- * These CSS variables are available to all child components via Tailwind classes
- * (`font-season`, `font-martian-mono`) or direct `var()` usage.
+ * Available to child components via Tailwind (`font-season`, `font-martian-mono`).
  *
- * The layout is a Server Component — no `'use client'` needed.
+ * SEO metadata for the `/` route is exported from `app/page.tsx` — not here.
+ * This layout only applies when a `page.tsx` exists inside the `(home)/` route group.
  */
 export default function HomeLayout({ children }: { children: React.ReactNode }) {
   return <div className={`${season.variable} ${martianMono.variable}`}>{children}</div>
diff --git a/apps/sim/app/(landing)/components/structured-data.tsx b/apps/sim/app/(landing)/components/structured-data.tsx
index ba3d9e704e..31223fdf49 100644
--- a/apps/sim/app/(landing)/components/structured-data.tsx
+++ b/apps/sim/app/(landing)/components/structured-data.tsx
@@ -8,7 +8,7 @@ export default function StructuredData() {
         name: 'Sim',
         alternateName: 'Sim',
         description:
-          'Open-source AI agent workflow builder used by developers at trail-blazing startups to Fortune 500 companies',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
         url: 'https://sim.ai',
         logo: {
           '@type': 'ImageObject',
@@ -36,9 +36,9 @@ export default function StructuredData() {
         '@type': 'WebSite',
         '@id': 'https://sim.ai/#website',
         url: 'https://sim.ai',
-        name: 'Sim - AI Agent Workflow Builder',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         description:
-          'Open-source AI agent workflow builder. 60,000+ developers build and deploy agentic workflows. SOC2 and HIPAA compliant.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Join 100,000+ builders.',
         publisher: {
           '@id': 'https://sim.ai/#organization',
         },
@@ -48,7 +48,7 @@ export default function StructuredData() {
         '@type': 'WebPage',
         '@id': 'https://sim.ai/#webpage',
         url: 'https://sim.ai',
-        name: 'Sim - Workflows for LLMs | Build AI Agent Workflows',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         isPartOf: {
           '@id': 'https://sim.ai/#website',
         },
@@ -58,7 +58,7 @@ export default function StructuredData() {
         datePublished: '2024-01-01T00:00:00+00:00',
         dateModified: new Date().toISOString(),
         description:
-          'Build and deploy AI agent workflows with Sim. Visual drag-and-drop interface for creating powerful LLM-powered automations.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs.',
         breadcrumb: {
           '@id': 'https://sim.ai/#breadcrumb',
         },
@@ -85,9 +85,9 @@ export default function StructuredData() {
       {
         '@type': 'SoftwareApplication',
         '@id': 'https://sim.ai/#software',
-        name: 'Sim - AI Agent Workflow Builder',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         description:
-          'Open-source AI agent workflow builder used by 60,000+ developers. Build agentic workflows with visual drag-and-drop interface. SOC2 and HIPAA compliant. Integrate with 100+ apps.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
         applicationCategory: 'DeveloperApplication',
         applicationSubCategory: 'AI Development Tools',
         operatingSystem: 'Web, Windows, macOS, Linux',
@@ -159,12 +159,13 @@ export default function StructuredData() {
           worstRating: '1',
         },
         featureList: [
-          'Visual workflow builder',
-          'Drag-and-drop interface',
-          '100+ integrations',
-          'AI model support (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
-          'Real-time collaboration',
-          'Version control',
+          'AI agent creation',
+          'Agentic workflow orchestration',
+          '1,000+ integrations',
+          'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
+          'Knowledge base creation',
+          'Table creation',
+          'Document creation',
           'API access',
           'Custom functions',
           'Scheduled workflows',
@@ -174,7 +175,7 @@ export default function StructuredData() {
           {
             '@type': 'ImageObject',
             url: 'https://sim.ai/logo/426-240/primary/small.png',
-            caption: 'Sim AI agent workflow builder interface',
+            caption: 'Sim — build AI agents and run your agentic workforce',
           },
         ],
       },
@@ -187,7 +188,7 @@ export default function StructuredData() {
             name: 'What is Sim?',
             acceptedAnswer: {
               '@type': 'Answer',
-              text: 'Sim is an open-source AI agent workflow builder used by 60,000+ developers at trail-blazing startups to Fortune 500 companies. It provides a visual drag-and-drop interface for building and deploying agentic workflows. Sim is SOC2 and HIPAA compliant.',
+              text: 'Sim is the open-source platform to build AI agents and run your agentic workforce. Teams connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
             },
           },
           {
@@ -203,7 +204,7 @@ export default function StructuredData() {
             name: 'Do I need coding skills to use Sim?',
             acceptedAnswer: {
               '@type': 'Answer',
-              text: 'No coding skills are required! Sim features a visual drag-and-drop interface that makes it easy to build AI workflows. However, developers can also use custom functions and our API for advanced use cases.',
+              text: 'No coding skills are required. Sim provides a visual interface for building AI agents and agentic workflows. Developers can also use custom functions, the API, and the CLI/SDK for advanced use cases.',
             },
           },
         ],
diff --git a/apps/sim/app/llms-full.txt/route.ts b/apps/sim/app/llms-full.txt/route.ts
index c7efe0d248..6577c69c2f 100644
--- a/apps/sim/app/llms-full.txt/route.ts
+++ b/apps/sim/app/llms-full.txt/route.ts
@@ -3,18 +3,18 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 export async function GET() {
   const baseUrl = getBaseUrl()
 
-  const llmsFullContent = `# Sim - AI Agent Workflow Builder
+  const llmsFullContent = `# Sim — Build AI Agents & Run Your Agentic Workforce
 
-> Sim is an open-source AI agent workflow builder used by 60,000+ developers at startups to Fortune 500 companies. Build and deploy agentic workflows with a visual drag-and-drop canvas. SOC2 and HIPAA compliant.
+> Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.
 
 ## Overview
 
-Sim provides a visual interface for building AI agent workflows. Instead of writing code, users drag and drop blocks onto a canvas and connect them to create complex AI automations. Each block represents a step in the workflow - an LLM call, a tool invocation, an API request, or a code execution.
+Sim lets teams create agents, workflows, knowledge bases, tables, and docs. Over 100,000 builders use Sim — from startups to Fortune 500 companies. Teams connect their tools and data, build agents that execute real workflows across systems, and manage them with full observability. SOC2 and HIPAA compliant.
 
 ## Product Details
 
 - **Product Name**: Sim
-- **Category**: AI Development Tools / Workflow Automation
+- **Category**: AI Agent Platform / Agentic Workflow Orchestration
 - **Deployment**: Cloud (SaaS) and Self-hosted options
 - **Pricing**: Free tier, Pro ($20/month), Team ($40/month), Enterprise (custom)
 - **Compliance**: SOC2 Type II, HIPAA compliant
@@ -66,7 +66,7 @@ Sim supports all major LLM providers:
 - Amazon Bedrock
 
 ### Integrations
-100+ pre-built integrations including:
+1,000+ pre-built integrations including:
 - **Communication**: Slack, Discord, Email (Gmail, Outlook), SMS (Twilio)
 - **Productivity**: Notion, Airtable, Google Sheets, Google Docs
 - **Development**: GitHub, GitLab, Jira, Linear
@@ -81,6 +81,12 @@ Built-in support for:
 - Semantic search and retrieval
 - Chunking strategies (fixed size, semantic, recursive)
 
+### Tables
+Built-in table creation and management:
+- Structured data storage
+- Queryable tables for agent workflows
+- Native integrations
+
 ### Code Execution
 - Sandboxed JavaScript/TypeScript execution
 - Access to npm packages
diff --git a/apps/sim/app/llms.txt/route.ts b/apps/sim/app/llms.txt/route.ts
index 64a1f90bcd..ee8db780eb 100644
--- a/apps/sim/app/llms.txt/route.ts
+++ b/apps/sim/app/llms.txt/route.ts
@@ -5,16 +5,16 @@ export async function GET() {
 
   const llmsContent = `# Sim
 
-> Sim is an open-source AI agent workflow builder. 60,000+ developers at startups to Fortune 500 companies deploy agentic workflows on the Sim platform. SOC2 and HIPAA compliant.
+> Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.
 
-Sim provides a visual drag-and-drop interface for building and deploying AI agent workflows. Connect to 100+ integrations and ship production-ready AI automations.
+Sim lets teams create agents, workflows, knowledge bases, tables, and docs. Over 100,000 builders use Sim — from startups to Fortune 500 companies. SOC2 and HIPAA compliant.
 
 ## Core Pages
 
-- [Homepage](${baseUrl}): Main landing page with product overview and features
+- [Homepage](${baseUrl}): Product overview, features, and pricing
 - [Templates](${baseUrl}/templates): Pre-built workflow templates to get started quickly
 - [Changelog](${baseUrl}/changelog): Product updates and release notes
-- [Sim Studio Blog](${baseUrl}/studio): Announcements, insights, and guides for AI workflows
+- [Sim Studio Blog](${baseUrl}/studio): Announcements, insights, and guides
 
 ## Documentation
 
@@ -29,28 +29,31 @@ Sim provides a visual drag-and-drop interface for building and deploying AI agen
 - **Block**: Individual step (LLM call, tool call, HTTP request, code execution)
 - **Trigger**: Event or schedule that initiates workflow execution
 - **Execution**: A single run of a workflow with logs and outputs
+- **Knowledge Base**: Vector-indexed document store for retrieval-augmented generation
 
 ## Capabilities
 
-- Visual workflow builder with drag-and-drop canvas
-- Multi-model LLM orchestration (OpenAI, Anthropic, Google, Mistral, xAI)
-- Retrieval-augmented generation (RAG) with vector databases
-- 100+ integrations (Slack, Gmail, Notion, Airtable, databases)
+- AI agent creation and deployment
+- Agentic workflow orchestration
+- 1,000+ integrations (Slack, Gmail, Notion, Airtable, databases, and more)
+- Multi-model LLM orchestration (OpenAI, Anthropic, Google, Mistral, xAI, Perplexity)
+- Knowledge base creation with retrieval-augmented generation (RAG)
+- Table creation and management
+- Document creation and processing
 - Scheduled and webhook-triggered executions
-- Real-time collaboration and version control
 
 ## Use Cases
 
-- AI agent workflow automation
-- RAG pipelines and document processing
-- Chatbot and copilot workflows for SaaS
-- Email and customer support automation
+- AI agent deployment and orchestration
+- Knowledge bases and RAG pipelines
+- Document creation and processing
+- Customer support automation
 - Internal operations (sales, marketing, legal, finance)
 
 ## Links
 
 - [GitHub Repository](https://github.com/simstudioai/sim): Open-source codebase
-- [Discord Community](https://discord.gg/Hr4UWYEcTT): Get help and connect with users
+- [Discord Community](https://discord.gg/Hr4UWYEcTT): Get help and connect with 100,000+ builders
 - [X/Twitter](https://x.com/simdotai): Product updates and announcements
 
 ## Optional
diff --git a/apps/sim/app/manifest.ts b/apps/sim/app/manifest.ts
index 9ea6507437..77c92d0c39 100644
--- a/apps/sim/app/manifest.ts
+++ b/apps/sim/app/manifest.ts
@@ -5,10 +5,10 @@ export default function manifest(): MetadataRoute.Manifest {
   const brand = getBrandConfig()
 
   return {
-    name: brand.name === 'Sim' ? 'Sim - AI Agent Workflow Builder' : brand.name,
+    name: brand.name === 'Sim' ? 'Sim — Build AI Agents & Run Your Agentic Workforce' : brand.name,
     short_name: brand.name,
     description:
-      'Open-source AI agent workflow builder. 60,000+ developers build and deploy agentic workflows on Sim. Visual drag-and-drop interface for creating AI automations. SOC2 and HIPAA compliant.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.',
     start_url: '/',
     scope: '/',
     display: 'standalone',
diff --git a/apps/sim/app/page.tsx b/apps/sim/app/page.tsx
index 4bd1e643a4..b21f9b9a3a 100644
--- a/apps/sim/app/page.tsx
+++ b/apps/sim/app/page.tsx
@@ -1,16 +1,18 @@
 import type { Metadata } from 'next'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import Landing from '@/app/(landing)/landing'
+import Landing from '@/app/(home)/landing'
+
+export const dynamic = 'force-dynamic'
 
 const baseUrl = getBaseUrl()
 
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
-  title: 'Sim - AI Agent Workflow Builder | Open Source Platform',
+  title: 'Sim — Build AI Agents & Run Your Agentic Workforce',
   description:
-    'Open-source AI agent workflow builder used by 60,000+ developers. Build and deploy agentic workflows with a visual drag-and-drop canvas. Connect 100+ apps and ship SOC2 & HIPAA-ready AI automations from startups to Fortune 500.',
+    'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.',
   keywords:
-    'AI agent workflow builder, agentic workflows, open source AI, visual workflow builder, AI automation, LLM workflows, AI agents, workflow automation, no-code AI, SOC2 compliant, HIPAA compliant, enterprise AI',
+    'AI agents, agentic workforce, open-source AI agent platform, agentic workflows, LLM orchestration, AI automation, knowledge base, workflow builder, AI integrations, SOC2 compliant, HIPAA compliant, enterprise AI',
   authors: [{ name: 'Sim' }],
   creator: 'Sim',
   publisher: 'Sim',
@@ -20,9 +22,9 @@ export const metadata: Metadata = {
     telephone: false,
   },
   openGraph: {
-    title: 'Sim - AI Agent Workflow Builder | Open Source',
+    title: 'Sim — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Open-source platform used by 60,000+ developers. Design, deploy, and monitor agentic workflows with a visual drag-and-drop interface, 100+ integrations, and enterprise-grade security.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Join over 100,000 builders.',
     type: 'website',
     url: baseUrl,
     siteName: 'Sim',
@@ -32,7 +34,7 @@ export const metadata: Metadata = {
         url: '/logo/426-240/primary/small.png',
         width: 2130,
         height: 1200,
-        alt: 'Sim - AI Agent Workflow Builder',
+        alt: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         type: 'image/png',
       },
     ],
@@ -41,12 +43,12 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     site: '@simdotai',
     creator: '@simdotai',
-    title: 'Sim - AI Agent Workflow Builder | Open Source',
+    title: 'Sim — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Open-source platform for agentic workflows. 60,000+ developers. Visual builder. 100+ integrations. SOC2 & HIPAA compliant.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.',
     images: {
       url: '/logo/426-240/primary/small.png',
-      alt: 'Sim - AI Agent Workflow Builder',
+      alt: 'Sim — Build AI Agents & Run Your Agentic Workforce',
     },
   },
   alternates: {
@@ -72,11 +74,12 @@ export const metadata: Metadata = {
   classification: 'AI Development Tools',
   referrer: 'origin-when-cross-origin',
   other: {
-    'llm:content-type': 'AI workflow builder, visual programming, no-code AI development',
+    'llm:content-type':
+      'AI agent platform, agentic workforce, agentic workflows, LLM orchestration',
     'llm:use-cases':
-      'email automation, Slack bots, Discord moderation, data analysis, customer support, content generation, agentic automations',
+      'AI agents, agentic workforce, agentic workflows, knowledge bases, tables, document creation, email automation, Slack bots, data analysis, customer support, content generation',
     'llm:integrations':
-      'OpenAI, Anthropic, Google AI, Slack, Gmail, Discord, Notion, Airtable, Supabase',
+      'OpenAI, Anthropic, Google AI, Mistral, xAI, Perplexity, Slack, Gmail, Discord, Notion, Airtable, Supabase',
     'llm:pricing': 'free tier available, pro $20/month, team $40/month, enterprise custom',
     'llm:region': 'global',
     'llm:languages': 'en',
diff --git a/apps/sim/components/emcn/icons/chevron-down.tsx b/apps/sim/components/emcn/icons/chevron-down.tsx
index 18d625dae7..a52666136c 100644
--- a/apps/sim/components/emcn/icons/chevron-down.tsx
+++ b/apps/sim/components/emcn/icons/chevron-down.tsx
@@ -15,10 +15,12 @@ export function ChevronDown(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M5.47124 5.47133C5.34622 5.59631 5.17668 5.66652 4.9999 5.66652C4.82313 5.66652 4.65359 5.59631 4.52857 5.47133L0.757237 1.69999C0.693563 1.6385 0.642775 1.56493 0.607836 1.4836C0.572896 1.40226 0.554505 1.31478 0.553736 1.22626C0.552967 1.13774 0.569835 1.04996 0.603355 0.968026C0.636876 0.886095 0.686378 0.81166 0.748973 0.749064C0.811568 0.686469 0.886003 0.636967 0.967934 0.603447C1.04986 0.569926 1.13765 0.553058 1.22617 0.553828C1.31469 0.554597 1.40217 0.572988 1.48351 0.607927C1.56484 0.642866 1.63841 0.693654 1.6999 0.757328L4.9999 4.05733L8.2999 0.757328C8.42564 0.635889 8.59404 0.568693 8.76884 0.570212C8.94363 0.571731 9.11084 0.641843 9.23445 0.765449C9.35805 0.889054 9.42817 1.05626 9.42969 1.23106C9.43121 1.40586 9.36401 1.57426 9.24257 1.69999L5.47124 5.47133Z'
-        fill='currentColor'
+        d='M1 1L5 5L9 1'
+        stroke='currentColor'
+        strokeWidth='1.33'
+        strokeLinecap='square'
+        strokeLinejoin='miter'
+        fill='none'
       />
     </svg>
   )
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index 91748946d4..9c91c3c3d4 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -537,6 +537,34 @@ export function GithubIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
+export function GithubOutlineIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M15 21C15 21 15 18.73 15 18C15 17.37 15.15 16.04 14.5 15.5C15.89 15.37 16.98 14.92 18 14C19.02 13.08 19.5 11.69 19.5 9.5C19.5 8 19.25 7 18.5 6C18.79 5.22 18.84 4 18.5 3C16.94 3 15.53 4.07 15 4.5C14.61 4.4 13.67 4 12 4C10.33 4 9.39 4.4 9 4.5C8.47 4.07 7.06 3 5.5 3C5.16 4 5.21 5.22 5.5 6C4.75 7 4.5 8 4.5 9.5C4.5 11.69 4.98 13.08 6 14C7.02 14.92 8.11 15.37 9.5 15.5C8.85 16.04 9 17.37 9 18C9 18.73 9 21 9 21'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M9 19C7.59 19 6.16 18.44 5.31 17.81C4.47 17.18 4.22 16.15 3 15.5'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
 export function GitLabIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/apps/sim/ee/whitelabeling/metadata.ts b/apps/sim/ee/whitelabeling/metadata.ts
index 2b3a8fd15b..ddbae84529 100644
--- a/apps/sim/ee/whitelabeling/metadata.ts
+++ b/apps/sim/ee/whitelabeling/metadata.ts
@@ -9,8 +9,8 @@ export function generateBrandedMetadata(override: Partial<Metadata> = {}): Metad
   const brand = getBrandConfig()
 
   const defaultTitle = brand.name
-  const summaryFull = `Sim is an open-source AI agent workflow builder. Developers at trail-blazing startups to Fortune 500 companies deploy agentic workflows on the Sim platform. 60,000+ developers already use Sim to build and deploy AI agent workflows and connect them to 100+ apps. Sim is SOC2 and HIPAA compliant, ensuring enterprise-grade security for AI automation.`
-  const summaryShort = `Sim is an open-source AI agent workflow builder for production workflows.`
+  const summaryFull = `Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders — from startups to Fortune 500 companies. SOC2 and HIPAA compliant.`
+  const summaryShort = `Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.`
 
   return {
     title: {
@@ -22,20 +22,21 @@ export function generateBrandedMetadata(override: Partial<Metadata> = {}): Metad
     authors: [{ name: brand.name }],
     generator: 'Next.js',
     keywords: [
-      'AI agent',
-      'AI agent builder',
-      'AI agent workflow',
-      'AI workflow automation',
-      'visual workflow editor',
       'AI agents',
-      'workflow canvas',
+      'agentic workforce',
+      'AI agent platform',
+      'open-source AI agents',
+      'agentic workflows',
+      'LLM orchestration',
+      'AI integrations',
+      'knowledge base',
+      'AI automation',
+      'workflow builder',
+      'AI workflow orchestration',
+      'enterprise AI',
+      'AI agent deployment',
       'intelligent automation',
       'AI tools',
-      'workflow designer',
-      'artificial intelligence',
-      'business automation',
-      'AI agent workflows',
-      'visual programming',
     ],
     referrer: 'origin-when-cross-origin',
     creator: brand.name,
@@ -130,11 +131,11 @@ export function generateStructuredData() {
     '@type': 'SoftwareApplication',
     name: 'Sim',
     description:
-      'Sim is an open-source AI agent workflow builder. Developers at trail-blazing startups to Fortune 500 companies deploy agentic workflows on the Sim platform. 60,000+ developers already use Sim to build and deploy AI agent workflows and connect them to 100+ apps. Sim is SOC2 and HIPAA compliant, ensuring enterprise-level security.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
     url: getBaseUrl(),
     applicationCategory: 'BusinessApplication',
-    operatingSystem: 'Web Browser',
-    applicationSubCategory: 'AIWorkflowAutomation',
+    operatingSystem: 'Web',
+    applicationSubCategory: 'AIAgentPlatform',
     areaServed: 'Worldwide',
     availableLanguage: ['en'],
     offers: {
@@ -147,10 +148,13 @@ export function generateStructuredData() {
       url: 'https://sim.ai',
     },
     featureList: [
-      'Visual AI Agent Builder',
-      'Workflow Canvas Interface',
-      'AI Agent Automation',
-      'Custom AI Workflows',
+      'AI Agent Creation',
+      'Agentic Workflow Orchestration',
+      '1,000+ Integrations',
+      'LLM Orchestration',
+      'Knowledge Base Creation',
+      'Table Creation',
+      'Document Creation',
     ],
   }
 }
diff --git a/apps/sim/public/landing/blocks-left.svg b/apps/sim/public/landing/blocks-left.svg
new file mode 100644
index 0000000000..7ef22978c0
--- /dev/null
+++ b/apps/sim/public/landing/blocks-left.svg
@@ -0,0 +1,11 @@
+<svg width="34" height="226" viewBox="0 0 34 226.021" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.6" width="16.8626" height="140.507" rx="2.59574" transform="matrix(-1 0 0 1 33.986 85.335)" fill="#00F701"/>
+<rect opacity="0.6" width="16.8626" height="68.480" rx="2.59574" transform="matrix(-1 0 0 1 33.727 0)" fill="#FA4EDF"/>
+<rect opacity="0.6" width="16.8626" height="33.986" rx="2.59574" transform="matrix(0 1 1 0 0 51.616)" fill="#FA4EDF"/>
+<rect opacity="0.4" x="17.119" y="136.962" width="34.240" height="16.8626" rx="2.59574" transform="rotate(-90 17.119 136.962)" fill="#FFCC02"/>
+<rect opacity="0.6" width="34.240" height="33.725" rx="2.59574" transform="matrix(0 1 1 0 0 0)" fill="#FA4EDF"/>
+<rect opacity="0.5" width="34.240" height="33.725" rx="2.59574" transform="matrix(0 1 1 0 0.257 153.825)" fill="#00F701"/>
+<rect width="16.8626" height="16.8626" rx="2.59574" transform="matrix(-1 0 0 1 33.727 17.378)" fill="#FA4EDF"/>
+<rect x="17.119" y="136.962" width="16.8626" height="16.8626" rx="2.59574" transform="rotate(-90 17.119 136.962)" fill="#FFCC02"/>
+<rect width="16.8626" height="16.8626" rx="2.59574" transform="matrix(0 1 1 0 0.257 153.825)" fill="#00F701"/>
+</svg>
diff --git a/apps/sim/public/landing/blocks-right.svg b/apps/sim/public/landing/blocks-right.svg
new file mode 100644
index 0000000000..7b56c4a36b
--- /dev/null
+++ b/apps/sim/public/landing/blocks-right.svg
@@ -0,0 +1,11 @@
+<svg width="34" height="205" viewBox="0 0 34 204.769" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.6" width="16.8626" height="102.384" rx="2.59574" transform="matrix(-1 0 0 1 33.787 102.384)" fill="#2ABBF8"/>
+<rect opacity="0.6" width="16.8626" height="68.482" rx="2.59574" transform="matrix(-1 0 0 1 33.739 16.888)" fill="#FA4EDF"/>
+<rect opacity="0.6" width="16.8626" height="33.726" rx="2.59574" transform="matrix(0 1 1 0 0.012 68.510)" fill="#FA4EDF"/>
+<rect opacity="0.6" width="16.8626" height="33.726" rx="2.59574" transform="matrix(0 1 1 0 0 33.776)" fill="#FA4EDF"/>
+<rect opacity="0.6" width="16.8626" height="33.726" rx="2.59574" transform="matrix(0 1 1 0 0 0)" fill="#FA4EDF"/>
+<rect opacity="0.4" x="17.131" y="153.859" width="34.241" height="16.8626" rx="2.59574" transform="rotate(-90 17.131 153.859)" fill="#00F701"/>
+<rect opacity="0.6" width="34.241" height="16.8626" rx="2.59574" transform="matrix(0 1 1 0 16.891 0)" fill="#FA4EDF"/>
+<rect width="16.8626" height="16.8626" rx="2.59574" transform="matrix(-1 0 0 1 33.739 34.272)" fill="#FA4EDF"/>
+<rect x="17.131" y="153.859" width="16.8626" height="16.8626" rx="2.59574" transform="rotate(-90 17.131 153.859)" fill="#00F701"/>
+</svg>
diff --git a/apps/sim/public/landing/blocks-top-right.svg b/apps/sim/public/landing/blocks-top-right.svg
new file mode 100644
index 0000000000..652b95f63d
--- /dev/null
+++ b/apps/sim/public/landing/blocks-top-right.svg
@@ -0,0 +1,20 @@
+<svg width="295" height="34" viewBox="0 0 295 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="16.8626" height="33.7252" rx="2.59574" fill="#2ABBF8"/>
+<rect x="34.2403" y="0" width="34.2403" height="33.7252" rx="2.59574" opacity="0.6" fill="#2ABBF8"/>
+<rect x="106.268" y="0" width="34.2403" height="33.7252" rx="2.59574" opacity="0.6" fill="#00F701"/>
+<rect x="209.137" y="0" width="16.8626" height="33.7252" rx="2.59574" opacity="0.6" fill="#FA4EDF"/>
+<rect x="243.233" y="0" width="34.2403" height="33.7252" rx="2.59574" opacity="0.6" fill="#FA4EDF"/>
+<rect x="0" y="0" width="85.3433" height="16.8626" rx="2.59574" opacity="0.6" fill="#2ABBF8"/>
+<rect x="68.4812" y="0" width="54.6502" height="16.8626" rx="2.59574" fill="#00F701"/>
+<rect x="106.268" y="0" width="51.103" height="16.8626" rx="2.59574" opacity="0.6" fill="#00F701"/>
+<rect x="157.371" y="0" width="34.2403" height="16.8626" rx="2.59574" opacity="0.6" fill="#FFCC02"/>
+<rect x="208.993" y="0" width="68.4805" height="16.8626" rx="2.59574" opacity="0.6" fill="#FA4EDF"/>
+<rect x="260.096" y="0" width="34.04" height="16.8626" rx="2.59574" opacity="0.6" fill="#FA4EDF"/>
+<rect x="0" y="0" width="16.8626" height="16.8626" rx="2.59574" fill="#2ABBF8"/>
+<rect x="34.2403" y="0" width="16.8626" height="16.8626" rx="2.59574" fill="#2ABBF8"/>
+<rect x="157.371" y="0" width="16.8626" height="16.8626" rx="2.59574" fill="#FFCC02"/>
+<rect x="243.233" y="0" width="16.8626" height="16.8626" rx="2.59574" fill="#FA4EDF"/>
+<rect x="51.6188" y="16.8626" width="16.8626" height="16.8626" rx="2.59574" fill="#2ABBF8"/>
+<rect x="123.6484" y="16.8626" width="16.8626" height="16.8626" rx="2.59574" fill="#00F701"/>
+<rect x="260.611" y="16.8626" width="16.8626" height="16.8626" rx="2.59574" fill="#FA4EDF"/>
+</svg>
diff --git a/apps/sim/public/landing/card-left.svg b/apps/sim/public/landing/card-left.svg
new file mode 100644
index 0000000000..2505e554b1
--- /dev/null
+++ b/apps/sim/public/landing/card-left.svg
@@ -0,0 +1,3 @@
+<svg width="344" height="328" viewBox="0 0 344 328" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M322.641 326.586L335.508 326.586C339.926 326.586 343.508 323.004 343.508 318.586V153.613C343.508 149.195 339.926 145.613 335.508 145.613H228.282C223.864 145.613 220.282 142.031 220.282 137.613V-50H190.282V137.613C190.282 142.031 186.7 145.613 182.282 145.613H-157V318.586C-157 323.004 -153.418 326.586 -149 326.586H322.641Z" fill="#1C1C1C" stroke="#323232" stroke-opacity="0.4" stroke-width="1"/>
+</svg>
diff --git a/apps/sim/public/landing/card-right.svg b/apps/sim/public/landing/card-right.svg
new file mode 100644
index 0000000000..b8abf45aa9
--- /dev/null
+++ b/apps/sim/public/landing/card-right.svg
@@ -0,0 +1,3 @@
+<svg width="471" height="470" viewBox="0 0 471 470" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M471 94.274L471 124.274L365.88 124.274C361.462 124.274 357.88 127.856 357.88 132.274L357.88 225.495C357.88 229.913 354.298 233.495 349.88 233.495L219.5 233.495C215.082 233.495 211.5 237.077 211.5 241.495L211.5 461.5C211.5 465.918 207.918 469.5 203.5 469.5L8.5 469.5C4.082 469.5 0.5 465.918 0.5 461.5L0.5 157.274C0.5 152.856 4.082 149.274 8.5 149.274L184 149.274C188.418 149.274 192 145.692 192 141.274L192 102.274C192 97.856 195.582 94.274 200 94.274L471 94.274Z" fill="#1C1C1C" stroke="#323232" stroke-opacity="0.4" stroke-width="1"/>
+</svg>
diff --git a/apps/sim/public/logo/sim-landing.svg b/apps/sim/public/logo/sim-landing.svg
new file mode 100644
index 0000000000..d3d19242d5
--- /dev/null
+++ b/apps/sim/public/logo/sim-landing.svg
@@ -0,0 +1,16 @@
+<svg width="71" height="22" viewBox="0 0 71 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<linearGradient id="paint0_linear_3547_13413" x1="171.406" y1="171.18" x2="245.831" y2="245.428" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+<g transform="scale(0.07483)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.793 124.175C142.793 128.925 140.913 133.487 137.577 136.846L137.099 137.327C133.765 140.696 129.236 142.579 124.519 142.579H17.8063C7.97854 142.579 0 150.605 0 160.503V275.91C0 285.808 7.97854 293.834 17.8063 293.834H132.383C142.211 293.834 150.179 285.808 150.179 275.91V167.858C150.179 163.453 151.914 159.226 155.009 156.109C158.095 153.001 162.292 151.253 166.666 151.253H275.166C284.994 151.253 292.962 143.229 292.962 133.33V17.9231C292.962 8.02512 284.994 0 275.166 0H160.588C150.761 0 142.793 8.02512 142.793 17.9231V124.175ZM177.564 24.5671H258.181C263.925 24.5671 268.57 29.2545 268.57 35.0301V116.224C268.57 121.998 263.925 126.687 258.181 126.687H177.564C171.83 126.687 167.175 121.998 167.175 116.224V35.0301C167.175 29.2545 171.83 24.5671 177.564 24.5671Z" fill="#33C482"/>
+<path d="M275.293 171.578H190.106C179.779 171.578 171.406 180.01 171.406 190.412V275.162C171.406 285.564 179.779 293.996 190.106 293.996H275.293C285.621 293.996 293.994 285.564 293.994 275.162V190.412C293.994 180.01 285.621 171.578 275.293 171.578Z" fill="#33C482"/>
+<path d="M275.293 171.18H190.106C179.779 171.18 171.406 179.612 171.406 190.014V274.763C171.406 285.165 179.779 293.596 190.106 293.596H275.293C285.621 293.596 293.994 285.165 293.994 274.763V190.014C293.994 179.612 285.621 171.18 275.293 171.18Z" fill="url(#paint0_linear_3547_13413)" fill-opacity="0.2"/>
+</g>
+<path d="M31.5718 15.845H34.1583C34.1583 16.5591 34.4169 17.1285 34.9342 17.5531C35.4515 17.9584 36.1508 18.1611 37.0321 18.1611C37.9901 18.1611 38.7277 17.9777 39.245 17.611C39.7623 17.225 40.021 16.7135 40.021 16.0766C40.021 15.6134 39.8773 15.2274 39.5899 14.9186C39.3217 14.6098 38.8235 14.3589 38.0955 14.1659L35.6239 13.5869C34.3786 13.2781 33.4494 12.8052 32.8363 12.1683C32.2423 11.5314 31.9454 10.6918 31.9454 9.64957C31.9454 8.78105 32.1657 8.02833 32.6064 7.39142C33.0662 6.7545 33.6889 6.26234 34.4744 5.91494C35.2791 5.56753 36.1987 5.39382 37.2333 5.39382C38.2679 5.39382 39.1588 5.57718 39.906 5.94389C40.6724 6.31059 41.2663 6.82206 41.6878 7.47827C42.1285 8.13449 42.3584 8.91615 42.3776 9.82327H39.7911C39.7719 9.08986 39.5324 8.52049 39.0726 8.11518C38.6128 7.70988 37.9709 7.50722 37.1471 7.50722C36.3041 7.50722 35.6527 7.69058 35.1929 8.05728C34.733 8.42399 34.5031 8.9258 34.5031 9.56272C34.5031 10.5084 35.1929 11.155 36.5723 11.5024L39.0439 12.1104C40.2317 12.3806 41.1226 12.8245 41.7166 13.4421C42.3105 14.0404 42.6075 14.8607 42.6075 15.9029C42.6075 16.7907 42.368 17.5724 41.889 18.2479C41.41 18.9041 40.749 19.4156 39.906 19.7823C39.0822 20.1297 38.1051 20.3034 36.9747 20.3034C35.327 20.3034 34.0146 19.8981 33.0375 19.0875C32.0603 18.2769 31.5718 17.196 31.5718 15.845Z" fill="#F6F6F0"/>
+<path d="M44.5096 19.956V5.79913C45.5868 6.19296 46.0617 6.19296 47.211 5.79913V19.956H44.5096ZM45.8316 4.86332C45.3526 4.86332 44.9311 4.68962 44.5671 4.34221C44.2222 3.9755 44.0498 3.55089 44.0498 3.06838C44.0498 2.56657 44.2222 2.14196 44.5671 1.79455C44.9311 1.44714 45.3526 1.27344 45.8316 1.27344C46.3297 1.27344 46.7512 1.44714 47.0961 1.79455C47.441 2.14196 47.6134 2.56657 47.6134 3.06838C47.6134 3.55089 47.441 3.9755 47.0961 4.34221C46.7512 4.68962 46.3297 4.86332 45.8316 4.86332Z" fill="#F6F6F0"/>
+<path d="M51.976 19.956H49.2746V5.79913H51.6887V8.18778C51.976 7.39647 52.5317 6.72555 53.298 6.20444C54.0835 5.66403 55.0319 5.39382 56.1432 5.39382C57.3885 5.39382 58.4231 5.73158 59.247 6.4071C60.0708 7.08261 60.6073 7.98008 60.8563 9.09951H60.3678C60.5594 7.98008 61.0862 7.08261 61.9484 6.4071C62.8106 5.73158 63.8739 5.39382 65.1384 5.39382C66.7478 5.39382 68.0123 5.86668 68.9319 6.8124C69.8516 7.75813 70.3114 9.05126 70.3114 10.6918V19.956H67.6674V11.3577C67.6674 10.2382 67.38 9.37936 66.8053 8.78105C66.2496 8.16344 65.4928 7.85463 64.5349 7.85463C63.8643 7.85463 63.2704 8.00903 62.7531 8.31784C62.2549 8.60735 61.8622 9.03196 61.5748 9.59167C61.2874 10.1514 61.1437 10.8076 61.1437 11.5603V19.956H58.471V11.3287C58.471 10.2093 58.1932 9.36006 57.6376 8.78105C57.082 8.18274 56.3252 7.88358 55.3672 7.88358C54.6966 7.88358 54.1027 8.03798 53.5854 8.34679C53.0873 8.6363 52.6945 9.06091 52.4071 9.62062C52.1197 10.161 51.976 10.8076 51.976 11.5603V19.956Z" fill="#F6F6F0"/>
+</svg>
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index 7f1822db0d..c578404841 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -13,6 +13,7 @@ export default {
     extend: {
       fontFamily: {
         season: ['var(--font-season)'],
+        mono: ['var(--font-martian-mono)', 'ui-monospace', 'monospace'],
       },
       fontSize: {
         xs: '11px',