[codex] simplify landing page DOM structure (#1272)

* refactor: simplify landing page DOM structure

Simplify the landing page markup by removing single-child wrappers and moving layout classes onto the surviving elements where needed.

Add responsive visual snapshots for the major landing page sections at desktop, tablet, and mobile widths so the refactor has a stable regression baseline.

* test: scope landing page snapshots to section roots

Render the full landing page in browser tests and target section roots by data-testid instead of route helper exports.
Refresh the existing landing page snapshots and increase the mobile viewport height so tall sections capture without extra white space.

* test: isolate landing page snapshot captures

Clone selected landing page sections into a top-level sandbox before screenshotting so Vitest captures the component instead of page scroll context.
Refresh the landing page snapshots and add the page-level getByTestId binding used by the new harness.

* test: load hljs in vitest setup

Mirror the landing page highlight.js registration in browser tests.
Add regression coverage for highlighted playground code in the live render and sandboxed snapshot copy.

* test: fix landing page snapshot capture

Render selected landing sections inside a normal test wrapper before capturing screenshots.
Refresh the affected landing-page screenshots so the playground hero retains syntax highlighting in the stored baselines.

Author: jderochervlk

__tests__/LandingPage_.test.res

@@ -1,6 +1,9 @@
 open ReactRouter
 open Vitest
 
+@module("vitest")
+external testWithTimeout: (string, unit => promise<unit>, int) => unit = "test"
+
 let expectedExample = `module Button = {
   @react.component
   let make = (~count) => {
@@ -15,6 +18,126 @@ let expectedExample = `module Button = {
   }
 }`
 
+let snapshotSection = async (~width, ~height, ~sectionTestId, ~screenshotName) => {
+  await viewport(width, height)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/"]>
+      <LandingPage />
+    </MemoryRouter>,
+  )
+
+  let sourceSection = switch document->WebAPI.Document.querySelector(
+    `[data-testid="${sectionTestId}"]`,
+  ) {
+  | Value(section) => section
+  | Null => failwith(`expected to find section ${sectionTestId}`)
+  }
+
+  let sandboxTestId = `${sectionTestId}-snapshot`
+  let snapshotHtml = sourceSection.outerHTML
+  await screen->unmount
+
+  let snapshotScreen = await render(
+    <div
+      dataTestId=sandboxTestId
+      style={{width: `${width->Int.toString}px`, margin: "0"}}
+      dangerouslySetInnerHTML={"__html": snapshotHtml}
+    />,
+  )
+
+  let snapshotTarget = await snapshotScreen->getByTestId(sandboxTestId)
+  await element(snapshotTarget)->toBeVisible
+  await element(snapshotTarget)->toMatchScreenshot(screenshotName)
+  await snapshotScreen->unmount
+}
+
+let snapshotResponsive = async (~sectionTestId, ~screenshotBase) => {
+  await snapshotSection(
+    ~width=1440,
+    ~height=1800,
+    ~sectionTestId,
+    ~screenshotName={`${screenshotBase}-desktop`},
+  )
+
+  await snapshotSection(
+    ~width=900,
+    ~height=1800,
+    ~sectionTestId,
+    ~screenshotName={`${screenshotBase}-tablet`},
+  )
+
+  await snapshotSection(
+    ~width=600,
+    ~height=1800,
+    ~sectionTestId,
+    ~screenshotName={`${screenshotBase}-mobile`},
+  )
+}
+
+testWithTimeout(
+  "landing intro snapshots",
+  async () => {
+    await snapshotResponsive(~sectionTestId="landing-intro", ~screenshotBase="landing-page-intro")
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing playground hero snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~sectionTestId="landing-playground-hero",
+      ~screenshotBase="landing-page-playground-hero",
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing quick install snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~sectionTestId="landing-quick-install",
+      ~screenshotBase="landing-page-quick-install",
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing other selling points snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~sectionTestId="landing-other-selling-points",
+      ~screenshotBase="landing-page-other-selling-points",
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing trusted by snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~sectionTestId="landing-trusted-by",
+      ~screenshotBase="landing-page-trusted-by",
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing curated resources snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~sectionTestId="landing-curated-resources",
+      ~screenshotBase="landing-page-curated-resources",
+    )
+  },
+  30000,
+)
+
 test(
   "landing page playground link uses compressed code that the playground can decode",
   async () => {
@@ -53,3 +176,94 @@ test(
     expect(decodedCode->Option.getOrThrow)->toBe(expectedExample)
   },
 )
+
+test("landing page playground hero renders highlighted code tokens", async () => {
+  let screen = await render(
+    <MemoryRouter initialEntries=["/"]>
+      <LandingPage />
+    </MemoryRouter>,
+  )
+
+  let _ = await screen->getByText("Write in ReScript")
+
+  let rescriptCodeBlock = switch document->WebAPI.Document.querySelector(
+    "[data-testid='landing-playground-hero'] code.lang-res",
+  ) {
+  | Value(codeBlock) => codeBlock
+  | Null => failwith("expected landing playground hero to render the ReScript code block")
+  }
+
+  let javascriptCodeBlock = switch document->WebAPI.Document.querySelector(
+    "[data-testid='landing-playground-hero'] code.lang-js",
+  ) {
+  | Value(codeBlock) => codeBlock
+  | Null => failwith("expected landing playground hero to render the JavaScript code block")
+  }
+
+  expect(rescriptCodeBlock.innerHTML->String.includes("<span"))->toBe(true)
+  expect(javascriptCodeBlock.innerHTML->String.includes("<span"))->toBe(true)
+})
+
+test(
+  "landing page playground hero keeps highlight styling in the sandboxed snapshot copy",
+  async () => {
+    await viewport(1440, 1800)
+
+    let screen = await render(
+      <MemoryRouter initialEntries=["/"]>
+        <LandingPage />
+      </MemoryRouter>,
+    )
+
+    let sourceSection = switch document->WebAPI.Document.querySelector(
+      "[data-testid='landing-playground-hero']",
+    ) {
+    | Value(section) => section
+    | Null => failwith("expected to find the landing playground hero section")
+    }
+
+    let sandboxTestId = "landing-playground-hero-sandbox"
+    let snapshotHtml = sourceSection.outerHTML
+    await screen->unmount
+
+    let snapshotScreen = await render(
+      <div
+        dataTestId=sandboxTestId
+        style={{width: "1440px", margin: "0"}}
+        dangerouslySetInnerHTML={"__html": snapshotHtml}
+      />,
+    )
+
+    let _ = await snapshotScreen->getByTestId(sandboxTestId)
+
+    let sandbox = switch document->WebAPI.Document.querySelector(
+      "[data-testid='landing-playground-hero-sandbox']",
+    ) {
+    | Value(sandbox) => sandbox
+    | Null => failwith("expected to find the sandboxed landing playground hero")
+    }
+
+    let sandboxRect: WebAPI.DOMAPI.domRect = sandbox->WebAPI.Element.getBoundingClientRect
+
+    let rescriptCodeBlock = switch document->WebAPI.Document.querySelector(
+      "[data-testid='landing-playground-hero-sandbox'] code.lang-res",
+    ) {
+    | Value(codeBlock) => codeBlock
+    | Null =>
+      failwith("expected sandboxed landing playground hero to render the ReScript code block")
+    }
+
+    let javascriptCodeBlock = switch document->WebAPI.Document.querySelector(
+      "[data-testid='landing-playground-hero-sandbox'] code.lang-js",
+    ) {
+    | Value(codeBlock) => codeBlock
+    | Null =>
+      failwith("expected sandboxed landing playground hero to render the JavaScript code block")
+    }
+
+    expect(sandboxRect.width > 1000.0)->toBe(true)
+    expect(rescriptCodeBlock.innerHTML->String.includes("<span"))->toBe(true)
+    expect(javascriptCodeBlock.innerHTML->String.includes("<span"))->toBe(true)
+    await snapshotScreen->unmount
+  },
+)