fix(landing): serve pre-encoded footer artwork (#7667)

Author: waleedlatif1

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

@@ -0,0 +1,50 @@
+/** @vitest-environment jsdom */
+import { createHash } from 'node:crypto'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import { renderToStaticMarkup } from 'react-dom/server'
+import sharp from 'sharp'
+import { describe, expect, it, vi } from 'vitest'
+import { Cta } from '@/app/(landing)/components/cta/cta'
+import { FOOTER_ARTWORK } from '@/app/(landing)/components/cta/footer-artwork.generated'
+
+vi.mock('@/app/(landing)/components/hero-cta', () => ({ HeroCta: () => null }))
+
+describe('Footer artwork delivery', () => {
+  it('renders responsive static sources with lazy, decorative fallbacks and no optimizer requests', () => {
+    const host = document.createElement('div')
+    host.innerHTML = renderToStaticMarkup(<Cta />)
+    expect(host.innerHTML).not.toContain('/_next/image')
+    expect(host.querySelectorAll('picture')).toHaveLength(2)
+    expect(host.querySelector('picture')?.className).toContain('dark:hidden')
+    expect(host.querySelectorAll('picture')[1].className).toContain('dark:block')
+    for (const picture of host.querySelectorAll('picture')) {
+      expect(picture.closest('[aria-hidden="true"]')).not.toBeNull()
+      expect([...picture.querySelectorAll('source')].map((source) => source.type)).toEqual([
+        'image/avif',
+        'image/webp',
+      ])
+      const image = picture.querySelector('img')!
+      expect(image.getAttribute('loading')).toBe('lazy')
+      expect(image.alt).toBe('')
+      expect(image.src).toContain('/landing/footer-artwork/')
+      expect(image.getAttribute('style')).toContain('data:image/svg+xml')
+    }
+  })
+
+  it('ships every advertised size with the matching dimensions and immutable content hash', async () => {
+    for (const artwork of Object.values(FOOTER_ARTWORK)) {
+      for (const srcSet of [artwork.avifSrcSet, artwork.webpSrcSet]) {
+        for (const entry of srcSet.split(', ')) {
+          const [src, descriptor] = entry.split(' ')
+          const width = Number.parseInt(descriptor, 10)
+          const buffer = await readFile(path.join(process.cwd(), 'public', src))
+          const metadata = await sharp(buffer).metadata()
+          expect(metadata.width).toBe(width)
+          expect(metadata.height).toBe((width * 9) / 16)
+          expect(src).toContain(createHash('sha256').update(buffer).digest('hex').slice(0, 12))
+        }
+      }
+    }
+  })
+})

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

@@ -1,21 +1,22 @@
 import { cn } from '@sim/emcn'
 import Image from 'next/image'
 import styles from '@/app/(landing)/components/cta/cta.module.css'
+import { FOOTER_ARTWORK } from '@/app/(landing)/components/cta/footer-artwork.generated'
 import { HeroCta } from '@/app/(landing)/components/hero-cta'
 import {
   HOME_TYPE,
   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
+const ARTWORK_SIZES = '(max-width: 639px) 112vw, 100vw'
 
 /**
  * Painted pre-footer CTA for every marketing page, mounted once by LandingShell.
  * Theme classes select the matching lazy-loaded painting without client state.
+ * Pre-encoded sources avoid request-time image optimization at every resolution.
  * 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.
  */
@@ -52,26 +53,29 @@ export function Cta() {
         aria-hidden='true'
         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={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={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)}
-        />
+        {Object.entries(FOOTER_ARTWORK).map(([theme, artwork]) => (
+          <picture
+            key={theme}
+            className={cn(
+              'absolute inset-0',
+              theme === 'light' ? 'block dark:hidden' : 'hidden dark:block'
+            )}
+          >
+            <source type='image/avif' srcSet={artwork.avifSrcSet} sizes={ARTWORK_SIZES} />
+            <source type='image/webp' srcSet={artwork.webpSrcSet} sizes={ARTWORK_SIZES} />
+            <Image
+              src={artwork.src}
+              alt=''
+              fill
+              unoptimized
+              placeholder='blur'
+              blurDataURL={artwork.blurDataURL}
+              fetchPriority='high'
+              sizes={ARTWORK_SIZES}
+              className={cn('object-cover object-center', styles.plate)}
+            />
+          </picture>
+        ))}
       </div>
     </section>
   )

apps/sim/app/(landing)/components/cta/footer-artwork.generated.ts

@@ -0,0 +1,21 @@
+/** Generated by scripts/generate-footer-artwork.ts. */
+export const FOOTER_ARTWORK = {
+  light: {
+    avifSrcSet:
+      '/landing/footer-artwork/light-1200-f29e84fa39b5.avif 1200w, /landing/footer-artwork/light-1920-352cf7c570ad.avif 1920w, /landing/footer-artwork/light-3840-e889bb4bc039.avif 3840w',
+    webpSrcSet:
+      '/landing/footer-artwork/light-1200-8764ab359e07.webp 1200w, /landing/footer-artwork/light-1920-c9ec24660024.webp 1920w, /landing/footer-artwork/light-3840-6a6c3eab4b02.webp 3840w',
+    src: '/landing/footer-artwork/light-3840-6a6c3eab4b02.webp',
+    blurDataURL:
+      'data:image/webp;base64,UklGRjYAAABXRUJQVlA4ICoAAACwAQCdASoIAAQAAkA4JaQAAxaZftQAAP75igYWrDK4ciyu9bneK5BAAAA=',
+  },
+  dark: {
+    avifSrcSet:
+      '/landing/footer-artwork/dark-1200-a1f7345fe7f6.avif 1200w, /landing/footer-artwork/dark-1920-638fa2f584cb.avif 1920w, /landing/footer-artwork/dark-3840-c0bf8a67335d.avif 3840w',
+    webpSrcSet:
+      '/landing/footer-artwork/dark-1200-117c8741a843.webp 1200w, /landing/footer-artwork/dark-1920-2c586b41810a.webp 1920w, /landing/footer-artwork/dark-3840-3140a296c362.webp 3840w',
+    src: '/landing/footer-artwork/dark-3840-3140a296c362.webp',
+    blurDataURL:
+      'data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAABwAQCdASoIAAQAAkA4JaRtgAAIQAD+9MlFFCUE/BGgAA==',
+  },
+} as const

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

@@ -9,9 +9,8 @@ import ts from '@typescript/typescript6'
 import { createRoot, type Root } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { FOOTER_ARTWORK } from '@/app/(landing)/components/cta/footer-artwork.generated'
 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
@@ -113,8 +112,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([
-      ctaLight,
-      ctaDark,
+      FOOTER_ARTWORK.light.src,
+      FOOTER_ARTWORK.dark.src,
     ])
     expect(Array.from(cta.querySelectorAll('img'), (image) => image.alt)).toEqual(['', ''])
     expect(

apps/sim/next.config.ts

@@ -268,6 +268,11 @@ const nextConfig: NextConfig = {
           },
         ],
       },
+      {
+        /** Generated footer artwork uses content hashes, so URLs are immutable. */
+        source: '/landing/footer-artwork/:path*',
+        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }],
+      },
       {
         source: '/.well-known/:path*',
         headers: [