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

Author: waleedlatif1

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/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>
             )