[web] Create a first implementation of the CIAM version of the email confirmation page (#29432)

* Move `main#main-content.content.content-alt` into a React component (`ContentLayout`)

* Create the CIAM variant of `RegistrationConfirmEmailForm`

* `bin/run web npm run extract-translations`

* Use `CiamLayout` in the Storybook demo

* Add `SplitTestProvider` in tests

* Fix Storybook: Wrap `RegistrationConfirmEmailForm` Story in `onboarding-confirm-email`

* Refactor SCSS files:

- only imports in all.scss
- split .storybook-layout and .storybook-enabled
- extract ciam-spacing.scss

GitOrigin-RevId: f4a214a0978423a1621dd8f60bf459af7b8f877e

services/web/frontend/js/shared/components/layouts/ciam-layout.tsx

@@ -0,0 +1,26 @@
+import React, { FC, ReactNode } from 'react'
+import overleafLogo from '@/shared/svgs/overleaf-a-ds-solution-mallard.svg'
+
+type Props = { children: ReactNode }
+
+const CiamLayout: FC<Props> = ({ children }: Props) => (
+  <div className="ciam-layout ciam-enabled">
+    <a
+      href="/"
+      aria-label="Overleaf"
+      className="brand"
+      style={{ backgroundImage: `url("${overleafLogo}")` }}
+    />
+    <div className="ciam-container">
+      <main className="ciam-card" id="main-content">
+        {children}
+      </main>
+    </div>
+    <footer>
+      <a href="https://www.overleaf.com/legal#Privacy">Privacy</a>
+      <a href="https://www.overleaf.com/legal#Terms">Terms</a>
+    </footer>
+  </div>
+)
+
+export default CiamLayout

services/web/frontend/js/shared/components/layouts/content-layout.tsx

@@ -0,0 +1,16 @@
+import React, { FC, ReactNode } from 'react'
+
+type Props = { children: ReactNode; isMain?: boolean; alt?: boolean }
+
+const ContentLayout: FC<Props> = ({ children, isMain, alt }: Props) => {
+  const className = alt ? 'content content-alt' : 'content'
+  return isMain ? (
+    <main className={className} id="main-content">
+      {children}
+    </main>
+  ) : (
+    <div className={className}>{children}</div>
+  )
+}
+
+export default ContentLayout