@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Marketing/ButtonLink.tsx

@@ -0,0 +1,32 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { buttonClass } from "../Button/button-class.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { type ButtonLinkProps } from "./Marketing.types.ts";
+
+/**
+ * A link drawn as a Button, for calls to action that navigate. Button stays for actions that happen
+ * in place; `xl` is the 44 px call to action size on public pages.
+ */
+export function ButtonLink({
+  variant = "secondary",
+  size = "md",
+  icon,
+  trailingIcon,
+  external = false,
+  className,
+  children,
+  ...rest
+}: ButtonLinkProps): ReactElement {
+  return (
+    <a
+      {...rest}
+      {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+      className={cx(buttonClass(variant, size), "box-border no-underline", className)}
+    >
+      {icon ? <Icon name={icon} size={14} /> : null}
+      {children}
+      {trailingIcon ? <Icon name={trailingIcon} size={14} /> : null}
+    </a>
+  );
+}

package/src/Marketing/CodeSample.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Button } from "../Button/Button.tsx";
+import { type CodeSampleProps } from "./Marketing.types.ts";
+
+/** How long the copy button shows its confirmation, in milliseconds. */
+const COPIED_FOR = 2000;
+
+/**
+ * A labeled block of code with a copy button. The copy is announced, and when the clipboard is
+ * unavailable the text stays selectable in a focusable, scrollable region.
+ */
+export function CodeSample({ label, code }: CodeSampleProps): ReactElement {
+  const t = useT();
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const copy = () => {
+    const confirm = () => {
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), COPIED_FOR);
+    };
+    // A frame without clipboard access, or a refused write, leaves the text selectable.
+    void navigator.clipboard?.writeText(code).then(confirm, () => undefined);
+  };
+
+  return (
+    <div className="xos-mkt-code">
+      <div className="xos-mkt-code-bar">
+        <span className="xos-mkt-label">{label}</span>
+        <Button size="sm" variant="ghost" icon={copied ? "Check" : "Copy"} onClick={copy}>
+          {t("mk.code.copy")}
+        </Button>
+        <span className="sr-only" role="status" aria-live="polite">
+          {copied ? t("mk.code.copied") : ""}
+        </span>
+      </div>
+      <pre tabIndex={0} role="region" aria-label={label}>
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

package/src/Marketing/ComparisonScroll.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+/**
+ * The scroll region of ComparisonTable, as its own client module. ScrollRegion measures its
+ * overflow, so it runs in the browser; the table around it renders on the server (ADR 0027).
+ */
+export { ScrollRegion as ComparisonScroll } from "../Layout/ScrollRegion.tsx";

package/src/Marketing/ComparisonTable.tsx

@@ -0,0 +1,104 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { ComparisonScroll } from "./ComparisonScroll.tsx";
+import { marketingCopy } from "./marketing-copy.ts";
+import { type ComparisonTableProps, type ComparisonValue } from "./Marketing.types.ts";
+
+const CELL: Record<ComparisonValue, { icon: string; key: string }> = {
+  yes: { icon: "CircleCheck", key: "mk.cmp.yes" },
+  partial: { icon: "CircleDot", key: "mk.cmp.partial" },
+  no: { icon: "CircleMinus", key: "mk.cmp.no" },
+  unpublished: { icon: "CircleDashed", key: "mk.cmp.unpublished" },
+};
+
+/**
+ * A like-for-like comparison in a real table. Every cell carries a word beside its icon, the
+ * caption states when the cells were last verified, and a cell may link to its source. Explicit
+ * roles keep the table a table when it stacks into cards below bp-md.
+ */
+export function ComparisonTable({
+  caption,
+  verified,
+  featureLabel,
+  columns,
+  rows,
+  footnote,
+  locale,
+  messages,
+}: ComparisonTableProps): ReactElement {
+  const { t } = marketingCopy({ locale, messages });
+  return (
+    <div className="xos-mkt-cmp">
+      <ComparisonScroll label={caption}>
+        <table className="xos-mkt-cmp-table" role="table">
+          <caption>
+            <span>{caption}</span>
+            {verified ? (
+              <span className="xos-mkt-cmp-verified">
+                {t("mk.cmp.verified", { date: verified })}
+              </span>
+            ) : null}
+          </caption>
+          <thead role="rowgroup">
+            <tr role="row">
+              <th scope="col" role="columnheader">
+                {featureLabel ?? t("mk.cmp.feature")}
+              </th>
+              {columns.map((column) => (
+                <th
+                  key={column.name}
+                  scope="col"
+                  role="columnheader"
+                  className={column.highlight ? "xos-mkt-cmp-own" : undefined}
+                >
+                  {column.name}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody role="rowgroup">
+            {rows.map((row) => (
+              <tr key={row.feature} role="row">
+                <th scope="row" role="rowheader">
+                  {row.feature}
+                </th>
+                {row.cells.map((cell, index) => {
+                  const column = columns[index];
+                  const mark = CELL[cell.value] ?? CELL.unpublished;
+                  return (
+                    <td
+                      key={column?.name ?? index}
+                      role="cell"
+                      data-label={column?.name}
+                      className={column?.highlight ? "xos-mkt-cmp-own" : undefined}
+                    >
+                      <span
+                        className={cx(
+                          "xos-mkt-cmp-cell",
+                          cell.value === "yes" && "xos-mkt-cmp-yes",
+                          cell.value === "partial" && "xos-mkt-cmp-partial",
+                          cell.value === "no" && "xos-mkt-cmp-no",
+                          cell.value === "unpublished" && "xos-mkt-cmp-unpublished",
+                        )}
+                      >
+                        <Icon name={mark.icon} size={14} />
+                        <span>{cell.text ?? t(mark.key)}</span>
+                      </span>
+                      {cell.source ? (
+                        <a className="xos-mkt-cmp-src" href={cell.source.href}>
+                          {cell.source.label}
+                        </a>
+                      ) : null}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ComparisonScroll>
+      {footnote ? <p className="xos-mkt-note">{footnote}</p> : null}
+    </div>
+  );
+}

package/src/Marketing/FAQ.tsx

@@ -0,0 +1,26 @@
+import { type ReactElement } from "react";
+import { Icon } from "../Icon/Icon.tsx";
+import { type FAQProps } from "./Marketing.types.ts";
+
+/**
+ * Questions and answers on native disclosure elements, so every answer stays in the document
+ * while closed and the list works without script.
+ */
+export function FAQ({ headingLevel = 3, items }: FAQProps): ReactElement {
+  const Heading = `h${headingLevel}` as const;
+  return (
+    <div className="xos-mkt-faq">
+      {items.map((item) => (
+        <details key={item.q} {...(item.open ? { open: true } : {})}>
+          <summary>
+            <Icon name="ChevronRight" size={14} />
+            <Heading>{item.q}</Heading>
+          </summary>
+          <div className="xos-mkt-faq-body">
+            {typeof item.a === "string" ? <p>{item.a}</p> : item.a}
+          </div>
+        </details>
+      ))}
+    </div>
+  );
+}

package/src/Marketing/FeatureGrid.tsx

@@ -0,0 +1,65 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { DepartmentGlyph } from "../Glyphs/Glyphs.tsx";
+import { codeClass } from "../Chips/codeClass.tsx";
+import { cardClass } from "../Surface/Surface.tsx";
+import { linkClass } from "../Link/link-class.ts";
+import { marketingCopy } from "./marketing-copy.ts";
+import { type FeatureGridProps } from "./Marketing.types.ts";
+
+/**
+ * Cards in a grid. An item with a department code draws that department's glyph and prints the
+ * code beside the name. An external link opens a new tab and says so.
+ */
+export function FeatureGrid({
+  columns = 3,
+  headingLevel = 3,
+  items,
+  locale,
+  messages,
+}: FeatureGridProps): ReactElement {
+  const { t } = marketingCopy({ locale, messages });
+  const Heading = `h${headingLevel}` as const;
+  return (
+    <ul
+      className={cx(
+        "xos-mkt-grid",
+        columns === 3 && "xos-mkt-grid-3",
+        columns === 4 && "xos-mkt-grid-4",
+        columns === 5 && "xos-mkt-grid-5",
+      )}
+    >
+      {items.map((item) => (
+        <li key={item.title} className={cx(cardClass, "xos-mkt-feature")}>
+          <div className="xos-mkt-feature-head">
+            {item.code ? (
+              <span className="xos-mkt-tile" aria-hidden="true">
+                <DepartmentGlyph code={item.code} size={16} />
+              </span>
+            ) : item.icon ? (
+              <span className="xos-mkt-tile" aria-hidden="true">
+                <Icon name={item.icon} size={16} />
+              </span>
+            ) : null}
+            <Heading>{item.title}</Heading>
+            {item.code ? <span className={codeClass}>{item.code}</span> : null}
+          </div>
+          {item.body ? <p>{item.body}</p> : null}
+          {item.link ? (
+            <a
+              href={item.link.href}
+              {...(item.link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+              className={cx(linkClass, "xos-mkt-feature-link")}
+            >
+              {item.link.label}
+              {item.link.external ? (
+                <Icon name="ExternalLink" size={12} label={t("link.newTab")} />
+              ) : null}
+            </a>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/Marketing/GateLifecycleRail.tsx

@@ -0,0 +1,52 @@
+import { type ReactElement } from "react";
+import { Icon } from "../Icon/Icon.tsx";
+import { PhaseGlyph } from "../Glyphs/Glyphs.tsx";
+import { marketingCopy } from "./marketing-copy.ts";
+import { type GateLifecycleRailProps } from "./Marketing.types.ts";
+
+/** The nine gates in three acts. A gate reads "Gate 3 · Advance": the number never stands alone. */
+export function GateLifecycleRail({
+  label,
+  acts,
+  locale,
+  messages,
+}: GateLifecycleRailProps): ReactElement {
+  const { t } = marketingCopy({ locale, messages });
+  return (
+    <ol className="xos-mkt-rail" aria-label={label}>
+      {acts.map((act) => (
+        <li key={act.name} className="xos-mkt-act">
+          <p className="xos-mkt-act-name">
+            <strong>{act.name}</strong>
+            {act.range ? <span>{act.range}</span> : null}
+          </p>
+          <ol className="xos-mkt-gates" start={act.gates[0]?.n}>
+            {act.gates.map((gate) => (
+              <li key={gate.n} className="xos-mkt-gate">
+                <div className="xos-mkt-gate-head">
+                  <span className="xos-mkt-tile" aria-hidden="true">
+                    <PhaseGlyph code={gate.code} size={16} />
+                  </span>
+                  <span className="xos-mkt-gate-name">
+                    <span>{t("phase.gate", { n: gate.n })}</span>
+                    <span className="xos-mkt-sep" aria-hidden="true">
+                      ·
+                    </span>
+                    <strong>{gate.name}</strong>
+                  </span>
+                </div>
+                {gate.summary ? <p>{gate.summary}</p> : null}
+                {gate.evidence ? (
+                  <p className="xos-mkt-gate-evidence">
+                    <Icon name="FileCheck" size={14} />
+                    <span>{gate.evidence}</span>
+                  </p>
+                ) : null}
+              </li>
+            ))}
+          </ol>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/Marketing/LogoSlotWall.tsx

@@ -0,0 +1,53 @@
+import { type ReactElement } from "react";
+import { BrandMark } from "../BrandMark/BrandMark.tsx";
+import { BrandSlotFrame } from "../Identity/BrandSlotFrame.tsx";
+import { marketingCopy } from "./marketing-copy.ts";
+import { type LogoSlotWallProps } from "./Marketing.types.ts";
+
+const SLOT = { width: 160, height: 40 } as const;
+
+/**
+ * Customer marks. With no logos and no slots it renders nothing, so a page ships without it until
+ * a customer consents in writing.
+ */
+export function LogoSlotWall({
+  label,
+  title,
+  logos = [],
+  slots = 0,
+  disclosure,
+  locale,
+  messages,
+}: LogoSlotWallProps): ReactElement | null {
+  const { t } = marketingCopy({ locale, messages });
+  if (logos.length === 0 && slots <= 0) return null;
+  return (
+    <div className="xos-mkt-logos">
+      {title ? <p className="xos-mkt-label">{title}</p> : null}
+      <ul aria-label={label}>
+        {logos.map((logo) => (
+          <li key={logo.name}>
+            <BrandMark
+              name={logo.name}
+              size="lg"
+              {...(logo.logoLight === undefined ? {} : { logoLight: logo.logoLight })}
+              {...(logo.logoDark === undefined ? {} : { logoDark: logo.logoDark })}
+            />
+          </li>
+        ))}
+        {Array.from({ length: slots }, (_, index) => (
+          <li key={`slot-${index}`}>
+            <BrandSlotFrame
+              label={t("mk.logo.slot", { n: index + 1 })}
+              width={SLOT.width}
+              height={SLOT.height}
+              formats="SVG"
+              sizeLabel={t("brand.size", SLOT)}
+            />
+          </li>
+        ))}
+      </ul>
+      {disclosure ? <p className="xos-mkt-note">{disclosure}</p> : null}
+    </div>
+  );
+}

package/src/Marketing/Marketing.tsx

@@ -0,0 +1,49 @@
+/* The Marketing layer as `@xos/ui` exports it: inside a product shell every component follows the
+   nearest XOSProvider. Public pages import from `@xos/ui/marketing` instead (src/marketing.ts). */
+export type {
+  MarketingLocaleProps,
+  MarketingLink,
+  Persona,
+  PricingPlan,
+  ComparisonValue,
+  ButtonLinkProps,
+  MarketingNavProps,
+  MarketingSectionProps,
+  MarketingHeroProps,
+  ScreenshotFrameProps,
+  PersonaSwitcherProps,
+  ProofStatStripProps,
+  GateLifecycleRailProps,
+  SurfaceTriptychProps,
+  FeatureGridProps,
+  ComparisonTableProps,
+  PriceDisplayProps,
+  PricingTableProps,
+  FAQProps,
+  TestimonialProps,
+  LogoSlotWallProps,
+  AIDisclosureBadgeProps,
+  CodeSampleProps,
+  MarketingFooterProps,
+} from "./Marketing.types.ts";
+export { ButtonLink } from "./ButtonLink.tsx";
+export { MarketingNav } from "./MarketingNav.tsx";
+export { MarketingSection } from "./MarketingSection.tsx";
+export { MarketingHero } from "./MarketingHero.tsx";
+export { ScreenshotFrame } from "./ScreenshotFrame.tsx";
+export { PersonaSwitcher } from "./PersonaSwitcher.tsx";
+export { SurfaceTriptych } from "./SurfaceTriptych.tsx";
+export { PricingTable } from "./PricingTable.tsx";
+export { FAQ } from "./FAQ.tsx";
+export { Testimonial } from "./Testimonial.tsx";
+export { CodeSample } from "./CodeSample.tsx";
+export { MarketingFooter } from "./MarketingFooter.tsx";
+export {
+  ProofStatStrip,
+  GateLifecycleRail,
+  FeatureGrid,
+  ComparisonTable,
+  PriceDisplay,
+  LogoSlotWall,
+  AIDisclosureBadge,
+} from "./provided.tsx";

package/src/Marketing/Marketing.types.ts

@@ -0,0 +1,64 @@
+import type {
+  AIDisclosureBadgeProps as ReferenceAIDisclosureBadgeProps,
+  ButtonLinkProps as ReferenceButtonLinkProps,
+  CodeSampleProps as ReferenceCodeSampleProps,
+  ComparisonTableProps as ReferenceComparisonTableProps,
+  ComparisonValue as ReferenceComparisonValue,
+  FAQProps as ReferenceFAQProps,
+  FeatureGridProps as ReferenceFeatureGridProps,
+  GateLifecycleRailProps as ReferenceGateLifecycleRailProps,
+  LogoSlotWallProps as ReferenceLogoSlotWallProps,
+  MarketingFooterProps as ReferenceMarketingFooterProps,
+  MarketingHeroProps as ReferenceMarketingHeroProps,
+  MarketingLink as ReferenceMarketingLink,
+  MarketingNavProps as ReferenceMarketingNavProps,
+  MarketingSectionProps as ReferenceMarketingSectionProps,
+  Persona as ReferencePersona,
+  PersonaSwitcherProps as ReferencePersonaSwitcherProps,
+  PriceDisplayProps as ReferencePriceDisplayProps,
+  PricingPlan as ReferencePricingPlan,
+  PricingTableProps as ReferencePricingTableProps,
+  ProofStatStripProps as ReferenceProofStatStripProps,
+  ScreenshotFrameProps as ReferenceScreenshotFrameProps,
+  SurfaceTriptychProps as ReferenceSurfaceTriptychProps,
+  TestimonialProps as ReferenceTestimonialProps,
+} from "../types/reference";
+import type { Messages } from "../lib/i18n.ts";
+
+/**
+ * The locale of a component rendered without a provider. The Marketing components that hold no
+ * state render on the server, where no XOSProvider is in reach, so the page passes its locale and
+ * that locale's `ui` messages to each one that prints a shared string or formats a number. Left
+ * out, they read what `configure` set, en-US by default.
+ */
+export interface MarketingLocaleProps {
+  /** BCP 47 locale for the shared strings and Intl formatting. */
+  locale?: string;
+  /** Flat `ui` messages for that locale, keyed without the namespace; missing keys read en-US. */
+  messages?: Messages;
+}
+
+export type MarketingLink = ReferenceMarketingLink;
+export type Persona = ReferencePersona;
+export type PricingPlan = ReferencePricingPlan;
+export type ComparisonValue = ReferenceComparisonValue;
+
+export type ButtonLinkProps = ReferenceButtonLinkProps;
+export type MarketingNavProps = ReferenceMarketingNavProps;
+export type MarketingSectionProps = ReferenceMarketingSectionProps;
+export type MarketingHeroProps = ReferenceMarketingHeroProps;
+export type ScreenshotFrameProps = ReferenceScreenshotFrameProps;
+export type PersonaSwitcherProps = ReferencePersonaSwitcherProps;
+export type ProofStatStripProps = ReferenceProofStatStripProps & MarketingLocaleProps;
+export type GateLifecycleRailProps = ReferenceGateLifecycleRailProps & MarketingLocaleProps;
+export type SurfaceTriptychProps = ReferenceSurfaceTriptychProps;
+export type FeatureGridProps = ReferenceFeatureGridProps & MarketingLocaleProps;
+export type ComparisonTableProps = ReferenceComparisonTableProps & MarketingLocaleProps;
+export type PriceDisplayProps = ReferencePriceDisplayProps & MarketingLocaleProps;
+export type PricingTableProps = ReferencePricingTableProps;
+export type FAQProps = ReferenceFAQProps;
+export type TestimonialProps = ReferenceTestimonialProps;
+export type LogoSlotWallProps = ReferenceLogoSlotWallProps & MarketingLocaleProps;
+export type AIDisclosureBadgeProps = ReferenceAIDisclosureBadgeProps & MarketingLocaleProps;
+export type CodeSampleProps = ReferenceCodeSampleProps;
+export type MarketingFooterProps = ReferenceMarketingFooterProps;

package/src/Marketing/MarketingFooter.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useState, type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { applyTheme, isThemePreference } from "../lib/theme.ts";
+import { Select } from "../Forms/Select.tsx";
+import { SegmentedControl } from "../Navigation/SegmentedControl.tsx";
+import { type MarketingFooterProps } from "./Marketing.types.ts";
+
+/**
+ * The footer of a public page: brand, link columns, the legal line, and the language and theme
+ * controls. Without `onTheme` the theme control applies the choice to the document root.
+ */
+export function MarketingFooter({
+  brand,
+  tagline,
+  label,
+  columns,
+  legal,
+  locales,
+  locale,
+  onLocale,
+  themes = true,
+  theme = "dark",
+  onTheme,
+}: MarketingFooterProps): ReactElement {
+  const t = useT();
+  const [current, setCurrent] = useState<string>(theme);
+  const setTheme = (next: string) => {
+    setCurrent(next);
+    if (onTheme) onTheme(next);
+    else if (isThemePreference(next)) applyTheme(next);
+  };
+  return (
+    <footer className="xos-mkt-footer">
+      <div className="xos-mkt-wrap">
+        <div className="xos-mkt-footer-top">
+          <div className="xos-mkt-footer-brand">
+            {brand}
+            {tagline ? <p>{tagline}</p> : null}
+          </div>
+          <nav className="xos-mkt-footer-cols" aria-label={label}>
+            {columns.map((column) => (
+              <div key={column.title}>
+                <h2>{column.title}</h2>
+                <ul>
+                  {column.links.map((link) => (
+                    <li key={link.label}>
+                      <a href={link.href}>{link.label}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </nav>
+        </div>
+        <div className="xos-mkt-footer-base">
+          <p>{legal}</p>
+          <div className="xos-mkt-footer-controls">
+            {locales ? (
+              <Select
+                label={t("mk.footer.language")}
+                options={locales}
+                {...(locale === undefined ? {} : { value: locale })}
+                {...(onLocale === undefined ? {} : { onChange: onLocale })}
+              />
+            ) : null}
+            {themes ? (
+              <div className="xos-mkt-footer-theme">
+                <span className="xos-mkt-label">{t("mk.footer.theme")}</span>
+                <SegmentedControl
+                  label={t("mk.footer.theme")}
+                  value={current}
+                  onChange={setTheme}
+                  options={[
+                    { value: "dark", label: t("mk.theme.dark") },
+                    { value: "light", label: t("mk.theme.light") },
+                    { value: "sunlight", label: t("mk.theme.sunlight") },
+                  ]}
+                />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/Marketing/MarketingHero.tsx

@@ -0,0 +1,45 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { type MarketingHeroProps } from "./Marketing.types.ts";
+
+/**
+ * The opening of a public page, or with `compact` its closing call to action. The default hero
+ * holds the page's one h1 at display-64; the compact hero is an h2 at display-48.
+ */
+export function MarketingHero({
+  id,
+  variant = "default",
+  eyebrow,
+  title,
+  lead,
+  actions,
+  note,
+  media,
+  headingLevel,
+}: MarketingHeroProps): ReactElement {
+  const compact = variant === "compact";
+  const Heading = `h${headingLevel ?? (compact ? 2 : 1)}` as const;
+  return (
+    <section
+      id={id}
+      className={cx(
+        "xos-mkt-hero",
+        compact && "xos-mkt-hero-compact",
+        !media && "xos-mkt-hero-solo",
+      )}
+    >
+      <div className="xos-mkt-wrap xos-mkt-hero-grid">
+        <div className="xos-mkt-hero-copy">
+          {eyebrow ? <p className="xos-mkt-eyebrow">{eyebrow}</p> : null}
+          <Heading className={compact ? "xos-mkt-display-48" : "xos-mkt-display-64"}>
+            {title}
+          </Heading>
+          {lead ? <p className="xos-mkt-lead">{lead}</p> : null}
+          {actions ? <div className="xos-mkt-actions">{actions}</div> : null}
+          {note ? <p className="xos-mkt-note">{note}</p> : null}
+        </div>
+        {media ? <div className="xos-mkt-hero-media">{media}</div> : null}
+      </div>
+    </section>
+  );
+}