fix(landing): improve mobile hero and workflow previews (#7634)

* fix(landing): improve mobile hero and workflow previews

* fix(landing): remove blank preview intro and close mobile QA gaps

* fix(landing): clarify swipe discovery and share interactive logs

* fix(landing): use absolute logs graph export

---------

Co-authored-by: andresdjasso <andresdjasso@users.noreply.github.com>
Co-authored-by: Waleed Latif <walif6@gmail.com>

Author: andresdjasso

apps/sim/app/(landing)/comparisons/components/source-info/source-info.tsx

@@ -28,7 +28,7 @@ export function SourceLink({ source, children, className }: SourceLinkProps) {
           href={source.url}
           target='_blank'
           rel='noopener noreferrer'
-          className={cn('block min-w-0', className)}
+          className={cn('relative block min-w-0', className)}
         >
           {children}
           <span className='sr-only'> (source: {source.label}, opens in a new tab)</span>

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

@@ -230,6 +230,7 @@ export function FeaturesRail({ label, children }: FeaturesRailProps) {
     <div className='relative'>
       <div
         ref={railRef}
+        role='region'
         aria-label={label}
         className={cn(
           'flex gap-6 overflow-x-auto overscroll-x-contain pb-4 [overflow-anchor:none] [scrollbar-width:none] data-[dragging]:cursor-grabbing data-[dragging]:select-none [&::-webkit-scrollbar]:hidden',

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

@@ -61,6 +61,7 @@ const CORE_FEATURES = [
     href: '/logs',
     tone: 'light',
     visual: <RunTraceGraphic />,
+    interactiveVisual: true,
   },
 ] as const
 
@@ -81,12 +82,15 @@ export function Features() {
           <h2
             id='features-heading'
             className={cn(
-              'mb-16 max-w-[20ch] text-balance text-[var(--text-primary)] max-sm:mb-10 max-lg:mb-12',
+              'mb-16 max-w-[20ch] text-balance text-[var(--text-primary)] max-sm:mb-3 max-lg:mb-12',
               HOME_TYPE.h2
             )}
           >
             Everything AI agents need to do real work
           </h2>
+          <p className='mb-8 hidden text-[13px] text-[var(--text-secondary)] max-sm:block'>
+            Swipe to explore
+          </p>
 
           <FeaturesRail label='Core Sim features'>
             {CORE_FEATURES.map((feature) => (

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

@@ -256,8 +256,6 @@ export function HeroChatLoop({
       </div>
 
       <div
-        data-preview-outline='frame'
-        data-preview-composer=''
         className={cn(
           'mx-auto w-[calc(100%-48px)] max-w-chat rounded-2xl border border-[var(--border)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
           showWelcome

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

@@ -15,7 +15,6 @@ export function HeroChatWelcome({ visible, onSelect }: HeroChatWelcomeProps) {
   return (
     <>
       <p
-        data-preview-skeleton-label=''
         aria-hidden={!visible}
         className={cn(
           'absolute inset-x-0 bottom-[calc(100%+28px)] text-balance text-center text-[26px] text-[var(--text-primary)] leading-[1.2] tracking-[-0.01em] max-sm:bottom-[calc(100%+20px)] max-sm:text-[20px]',
@@ -34,9 +33,7 @@ export function HeroChatWelcome({ visible, onSelect }: HeroChatWelcomeProps) {
           visible ? 'opacity-100' : 'pointer-events-none opacity-0'
         )}
       >
-        <span data-preview-skeleton-label='' className='text-[13px] text-[var(--text-secondary)]'>
-          Suggested actions
-        </span>
+        <span className='text-[13px] text-[var(--text-secondary)]'>Suggested actions</span>
         <div className='mt-2 flex flex-col'>
           {PREVIEW_SUGGESTIONS.map((action, index) => {
             const Icon = ACTION_ICONS[index]
@@ -48,9 +45,7 @@ export function HeroChatWelcome({ visible, onSelect }: HeroChatWelcomeProps) {
                 className='flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left text-[var(--text-body)] text-sm transition-colors duration-150 hover:bg-[var(--surface-hover)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-primary)] [&+button]:border-t'
               >
                 <Icon className='size-[16px] shrink-0 text-[var(--text-icon)]' />
-                <span data-preview-skeleton-label='' className='min-w-0 flex-1 truncate'>
-                  {action.title}
-                </span>
+                <span className='min-w-0 flex-1 truncate'>{action.title}</span>
                 <ArrowRight className='size-[14px] shrink-0 text-[var(--text-icon)]' />
               </button>
             )