6: feat: add the whiteboard image, blurred

packages/web/src/app/page.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from "next"
+import Image from "next/image"
 import Link from "next/link"
 
 import { Button } from "@/components/ui/button"
 import { Eyebrow, Heading, Lede, Section, Title } from "@/components/ui/section"
 import { servicesInGroup } from "@/lib/services"
+import whiteboard from "@/images/whiteboard.jpg"
 import { clients, company } from "@/lib/site"
 
 export const metadata: Metadata = {
@@ -47,11 +49,23 @@ const HomePage = () => (
         <Section className="border-t border-line">
             <Eyebrow>The specialism</Eyebrow>
             <Heading className="mt-3">Broadcast and streaming</Heading>
-            <p className="mt-4 max-w-[60ch] text-dim">
-                Where we contract most, and the reason the reliability work below is not a claim. A
-                fault on a streaming platform is visible to millions of people at once, so it gets
-                found and fixed to a standard most systems never need.
-            </p>
+            <div className="mt-6 grid items-start gap-8 md:grid-cols-[1.1fr_0.9fr]">
+                <p className="max-w-[60ch] text-dim">
+                    Where we contract most, and the reason the reliability work below is not a
+                    claim. A fault on a streaming platform is visible to millions of people at once,
+                    so it gets found and fixed to a standard most systems never need.
+                </p>
+                {/* Deliberately out of focus. It is a real whiteboard from a real
+                    engagement, and the client's architecture is theirs, not ours to
+                    publish. See DESIGN.md, "Confidentiality". */}
+                <Image
+                    src={whiteboard}
+                    alt="A whiteboard covered in a hand drawn system architecture, deliberately out of focus"
+                    className="w-full border border-line"
+                    sizes="(min-width: 768px) 40vw, 100vw"
+                    placeholder="blur"
+                />
+            </div>
             <ServiceList group="specialism" />
         </Section>
 

packages/web/test/pages.test.ts

@@ -207,3 +207,31 @@ describe("mobile layout", () => {
         expect(widths.size).toBeGreaterThan(2)
     })
 })
+
+describe("imagery", () => {
+    it("serves the image through the optimiser, in a modern format", async () => {
+        const { body } = await get("/")
+        const src = body.match(/src="(\/_next\/image[^"]*)"/)?.[1]?.replace(/&/g, "&")
+        expect(src, "no optimised image on the page").toBeDefined()
+
+        const response = await fetch(`${baseUrl}${src}`, {
+            headers: { accept: "image/avif,image/webp,image/*" },
+        })
+        expect(response.status).toBe(200)
+        expect(response.headers.get("content-type")).toMatch(/avif|webp/)
+    })
+
+    it("gives the image dimensions, so nothing shifts as it loads", async () => {
+        const { body } = await get("/")
+        const tag = body.match(/<img[^>]*_next\/image[^>]*>/)?.[0] ?? ""
+        expect(tag).toMatch(/width="\d+"/)
+        expect(tag).toMatch(/height="\d+"/)
+    })
+
+    it("describes the image for somebody who cannot see it", async () => {
+        const { body } = await get("/")
+        const tag = body.match(/<img[^>]*_next\/image[^>]*>/)?.[0] ?? ""
+        const alt = tag.match(/alt="([^"]*)"/)?.[1] ?? ""
+        expect(alt.length).toBeGreaterThan(20)
+    })
+})