fix(landing): preserve accessible controls and readable terminal previews

Author: waleedlatif1

apps/sim/app/(landing)/components/features/components/features-rail/features-rail.test.tsx

@@ -145,6 +145,39 @@ describe('FeaturesRail', () => {
     expect(mount(true).scrollLeft).toBe(SET)
   })
 
+  it('keeps interactive controls keyboard-accessible only in the home copy', () => {
+    let activations = 0
+    act(() =>
+      root?.render(
+        <FeaturesRail label='Interactive features'>
+          <div>
+            <button type='button' onClick={() => activations++}>
+              Open folder
+            </button>
+            <input aria-label='Search files' />
+          </div>
+        </FeaturesRail>
+      )
+    )
+
+    const homeControls = host?.querySelectorAll<HTMLElement>(
+      '[data-copy="home"] :is(button, input)'
+    )
+    expect(homeControls).toHaveLength(2)
+    for (const control of homeControls ?? []) expect(control.tabIndex).toBe(0)
+
+    const cloneControls = host?.querySelectorAll<HTMLElement>(
+      ':is([data-copy="lead"], [data-copy="tail"]) :is(button, input)'
+    )
+    expect(cloneControls).toHaveLength(4)
+    for (const control of cloneControls ?? []) expect(control.tabIndex).toBe(-1)
+
+    const cloneButton = host?.querySelector<HTMLButtonElement>('[data-copy="tail"] button')
+    expect(cloneButton?.disabled).toBe(false)
+    act(() => cloneButton?.click())
+    expect(activations).toBe(1)
+  })
+
   it('drags with the mouse, scrolling by the pointer delta and swallowing the click', () => {
     const rail = mount()
     const link = rail.querySelector<HTMLAnchorElement>('[data-copy="home"] a')

apps/sim/app/(landing)/components/features/components/features-rail/features-rail.tsx

@@ -142,10 +142,10 @@ export function FeaturesRail({ label, children }: FeaturesRailProps) {
       if (Math.abs(next - rail.scrollLeft) > FOLD_TOLERANCE) rail.scrollLeft = next
     }
 
-    for (const link of rail.querySelectorAll<HTMLElement>(
-      '[data-copy="lead"] a, [data-copy="tail"] a'
+    for (const control of rail.querySelectorAll<HTMLElement>(
+      ':is([data-copy="lead"], [data-copy="tail"]) :is(a, button, input, select, textarea, [tabindex])'
     )) {
-      link.tabIndex = -1
+      control.tabIndex = -1
     }
     measure()
     rail.scrollLeft = foldScrollLeft(rail.scrollLeft + setWidthRef.current, setWidthRef.current)

apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx

@@ -320,8 +320,8 @@ export function StageBlockCard({
                       type='button'
                       variant='ghost'
                       size={null}
-                      aria-label={label}
-                      onClick={(event) => event.stopPropagation()}
+                      disabled={!decorative}
+                      aria-label={decorative ? label : `${label} unavailable in preview`}
                       className={getActionButtonClassName(
                         label === 'Delete' ? 'last' : 'middle',
                         selected
@@ -331,7 +331,9 @@ export function StageBlockCard({
                     </Button>
                   </span>
                 </Tooltip.Trigger>
-                <Tooltip.Content side='top'>{label}</Tooltip.Content>
+                <Tooltip.Content side='top'>
+                  {decorative ? label : `${label} unavailable in preview`}
+                </Tooltip.Content>
               </Tooltip.Root>
             ))}
           </div>

apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.module.css

@@ -51,14 +51,14 @@
   max-width: 100%;
   white-space: nowrap;
 }
-.response .started {
+.started {
   margin: 0;
   animation: response-first 12s steps(34, end) infinite;
 }
-.response .running {
+.running {
   animation: response-second 12s steps(33, end) infinite;
 }
-.response .completed {
+.completed {
   animation: response-third 12s steps(37, end) infinite;
 }
 @keyframes response-first {

apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.module.css

@@ -166,11 +166,18 @@
     padding: 18px 14px;
   }
   .lines {
+    width: 100%;
     font-size: 11px;
     line-height: 23px;
   }
   .row {
     gap: 8px;
+    width: 100%;
+  }
+  .typed {
+    min-width: 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
   }
 }
 

apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx

@@ -2,9 +2,18 @@ import { cn } from '@sim/emcn'
 import { TerminalWindow } from '@sim/emcn/icons'
 import styles from '@/app/(landing)/components/shared/code-window-graphic/code-window-graphic.module.css'
 
+/** The compact preview sequences up to six visual command rows. */
+export type CodeWindowCommands =
+  | readonly [string]
+  | readonly [string, string]
+  | readonly [string, string, string]
+  | readonly [string, string, string, string]
+  | readonly [string, string, string, string, string]
+  | readonly [string, string, string, string, string, string]
+
 interface CodeWindowGraphicProps {
   filename: string
-  commands: readonly string[]
+  commands: CodeWindowCommands
 }
 
 /** A complete terminal window with sequentially typed, documentation-backed CLI examples. */

apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx

@@ -36,11 +36,13 @@ export function ProductCodeExample({ example }: ProductCodeExampleProps) {
             </LandingCtaLink>
           </div>
         </div>
-        <div className='relative h-[340px] min-w-0 overflow-hidden rounded-2xl bg-[var(--surface-3)] pt-8 pl-8 max-sm:h-[300px] max-sm:pt-5 max-sm:pl-5'>
-          <div className='w-[calc(100%+96px)]'>
+        <div className='relative h-[340px] min-w-0 overflow-hidden rounded-2xl bg-[var(--surface-3)] pt-8 pl-8 max-sm:h-auto max-sm:p-3'>
+          <div className='w-[calc(100%+96px)] max-sm:w-full'>
             <CodeWindowGraphic filename={example.filename} commands={example.commands} />
           </div>
-          <EdgeFade ground='surface' edges={['right', 'bottom']} depth='preview' />
+          <div className='pointer-events-none absolute inset-0 max-sm:hidden'>
+            <EdgeFade ground='surface' edges={['right', 'bottom']} depth='preview' />
+          </div>
         </div>
       </div>
     </section>

apps/sim/app/(landing)/components/solutions-page/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import type { CodeWindowCommands } from '@/app/(landing)/components/shared/code-window-graphic/code-window-graphic'
 
 /**
  * Solutions-page configuration - the entire content contract a route passes to
@@ -157,5 +158,5 @@ export interface SolutionsProductCodeExampleConfig {
   title: string
   description: string
   filename: string
-  commands: readonly string[]
+  commands: CodeWindowCommands
 }