fix(landing): show footer painting previews while loading (#7628)

* fix(landing): show footer painting previews while loading

* fix(landing): include static image types in clean checkouts

Author: waleedlatif1

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

@@ -7,13 +7,16 @@ import {
   LANDING_CONTENT_WIDTH,
   LANDING_GUTTER,
 } from '@/app/(landing)/components/landing-layout'
+import ctaDark from '@/public/landing/cta-san-francisco-painted-dark.webp'
+import ctaLight from '@/public/landing/cta-san-francisco-painted-light.webp'
 
 /** One shared closing statement, with a deliberate line break between sentences. */
 const CTA_HEADLINE = ['Every agent your company runs.', 'All in one place.'] as const
 
 /**
  * Painted pre-footer CTA for every marketing page, mounted once by LandingShell.
  * Theme classes select the matching lazy-loaded painting without client state.
+ * An embedded preview fills the scene while the full-resolution image loads.
  * The sky mask keeps the copy clear and the lower edge fades into the footer.
  */
 export function Cta() {
@@ -50,17 +53,21 @@ export function Cta() {
         className='-mt-[clamp(96px,12.5vw,240px)] max-sm:-mt-6 pointer-events-none relative aspect-video w-full max-sm:aspect-[16/10]'
       >
         <Image
-          src='/landing/cta-san-francisco-painted-light.webp'
+          src={ctaLight}
           alt=''
           fill
+          placeholder='blur'
+          fetchPriority='high'
           quality={90}
           sizes='(max-width: 639px) 112vw, 100vw'
           className={cn('object-cover object-center dark:hidden', styles.plate)}
         />
         <Image
-          src='/landing/cta-san-francisco-painted-dark.webp'
+          src={ctaDark}
           alt=''
           fill
+          placeholder='blur'
+          fetchPriority='high'
           quality={90}
           sizes='(max-width: 639px) 112vw, 100vw'
           className={cn('hidden object-cover object-center dark:block', styles.plate)}

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

@@ -10,6 +10,8 @@ import { createRoot, type Root } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { LandingShell } from '@/app/(landing)/components/landing-shell/landing-shell'
+import ctaDark from '@/public/landing/cta-san-francisco-painted-dark.webp'
+import ctaLight from '@/public/landing/cta-san-francisco-painted-light.webp'
 
 interface TestLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   href: string
@@ -111,8 +113,8 @@ describe('LandingShell shared closing section', () => {
       'Every agent your company runs. All in one place. '
     )
     expect(Array.from(cta.querySelectorAll('img'), (image) => image.getAttribute('src'))).toEqual([
-      '/landing/cta-san-francisco-painted-light.webp',
-      '/landing/cta-san-francisco-painted-dark.webp',
+      ctaLight,
+      ctaDark,
     ])
     expect(Array.from(cta.querySelectorAll('img'), (image) => image.alt)).toEqual(['', ''])
     expect(

apps/sim/types/images.d.ts

@@ -0,0 +1,2 @@
+/** Keep static image imports typed before Next.js generates next-env.d.ts. */
+import 'next/image-types/global'