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.

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,118 @@ let expectedExample = `module Button = {
   }
 }`
 
+let renderSection = async (~width, ~height, ~testId, component) => {
+  await viewport(width, height)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/"]>
+      <div dataTestId=testId> component </div>
+    </MemoryRouter>,
+  )
+
+  let wrapper = await screen->getByTestId(testId)
+  await element(wrapper)->toBeVisible
+  wrapper
+}
+
+let snapshotResponsive = async (~testId, ~screenshotBase, component) => {
+  let desktop = await renderSection(
+    ~width=1440,
+    ~height=900,
+    ~testId={`${testId}-desktop`},
+    component(),
+  )
+  await element(desktop)->toMatchScreenshot(`${screenshotBase}-desktop`)
+
+  let tablet = await renderSection(
+    ~width=900,
+    ~height=900,
+    ~testId={`${testId}-tablet`},
+    component(),
+  )
+  await element(tablet)->toMatchScreenshot(`${screenshotBase}-tablet`)
+
+  let mobile = await renderSection(
+    ~width=600,
+    ~height=1200,
+    ~testId={`${testId}-mobile`},
+    component(),
+  )
+  await element(mobile)->toMatchScreenshot(`${screenshotBase}-mobile`)
+}
+
+testWithTimeout(
+  "landing intro snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~testId="landing-intro-test-wrapper",
+      ~screenshotBase="landing-page-intro",
+      LandingPage.introForTest,
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing playground hero snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~testId="landing-playground-hero-test-wrapper",
+      ~screenshotBase="landing-page-playground-hero",
+      LandingPage.playgroundHeroForTest,
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing quick install snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~testId="landing-quick-install-test-wrapper",
+      ~screenshotBase="landing-page-quick-install",
+      LandingPage.quickInstallForTest,
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing other selling points snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~testId="landing-other-selling-points-test-wrapper",
+      ~screenshotBase="landing-page-other-selling-points",
+      LandingPage.otherSellingPointsForTest,
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing trusted by snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~testId="landing-trusted-by-test-wrapper",
+      ~screenshotBase="landing-page-trusted-by",
+      LandingPage.trustedByForTest,
+    )
+  },
+  30000,
+)
+
+testWithTimeout(
+  "landing curated resources snapshots",
+  async () => {
+    await snapshotResponsive(
+      ~testId="landing-curated-resources-test-wrapper",
+      ~screenshotBase="landing-page-curated-resources",
+      LandingPage.curatedResourcesForTest,
+    )
+  },
+  30000,
+)
+
 test(
   "landing page playground link uses compressed code that the playground can decode",
   async () => {