Match Home, top nav, hero, and logo wall to the current marketing frames.

Puts Workshops in the header, pairs the hero with a static rule card and breakpoint CTAs, and shows the three pilot marks with no wall label. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-11-02 18:50:32 -07:00
1 parent e12e06f7ce
commit 33cdaf135c
@@ -0,0 +1,125 @@
+"use client";
+
+import { memo } from "react";
+import Button from "../../buttons/Button";
+import Rule from "../../cards/Rule";
+import ContentLockup from "../../type/ContentLockup";
+import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
+import HeroDecor from "./HeroDecor";
+import type { HeroBannerViewProps } from "./HeroBanner.types";
+
+function HeroBannerView({
+  title,
+  subtitle,
+  description,
+  facilitatorCta,
+  facilitatorHref,
+  createRuleCta,
+  onCreateRule,
+  ruleTitle,
+  ruleDescription,
+  ruleCategories,
+}: HeroBannerViewProps) {
+  return (
+    <section
+      className="bg-transparent px-[var(--space-200)] sm:px-[var(--space-250)] md:px-[var(--space-400)] lg:px-[var(--space-600)] xl:px-[var(--space-1200)]"
+      data-figma-node="18477-15473"
+    >
+      <div className="flex flex-col gap-[var(--space-250)]">
+        <div className="relative flex flex-col gap-[var(--space-600)] overflow-hidden rounded-tl-none rounded-tr-[var(--radius-400)] rounded-br-[var(--radius-400)] rounded-bl-[var(--radius-400)] bg-[var(--color-surface-invert-brand-primary)] p-[var(--space-300)] sm:p-[var(--space-400)] md:gap-[var(--space-1200)] md:p-[var(--space-1800)] lg:flex-row lg:items-center lg:gap-[var(--space-1200)] lg:px-[var(--space-1800)] lg:py-[var(--space-1200)] xl:py-[var(--space-1800)]">
+          <HeroDecor
+            className="pointer-events-none absolute z-0
+                      left-0 top-0
+                      translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px]
+                      w-[1540px] h-[645px] scale-[1.04]"
+          />
+
+          <div className="relative z-10 flex w-full flex-col gap-[var(--space-150)] sm:gap-[var(--space-300)] md:gap-[var(--space-500)] lg:flex-1">
+            <ContentLockup
+              title={title}
+              subtitle={subtitle}
+              description={description}
+            />
+            <div className="relative z-10 flex justify-start">
+              <div className="lg:hidden">
+                <div className="md:hidden">
+                  <Button
+                    buttonType="filled"
+                    palette="inverse"
+                    size="small"
+                    href={facilitatorHref}
+                  >
+                    {facilitatorCta}
+                  </Button>
+                </div>
+                <div className="hidden md:block">
+                  <Button
+                    buttonType="filled"
+                    palette="inverse"
+                    size="large"
+                    href={facilitatorHref}
+                  >
+                    {facilitatorCta}
+                  </Button>
+                </div>
+              </div>
+              <div className="hidden lg:block">
+                <div className="xl:hidden">
+                  <Button
+                    buttonType="filled"
+                    palette="inverse"
+                    size="large"
+                    onClick={onCreateRule}
+                  >
+                    {createRuleCta}
+                  </Button>
+                </div>
+                <div className="hidden xl:block">
+                  <Button
+                    buttonType="filled"
+                    palette="inverse"
+                    size="xlarge"
+                    onClick={onCreateRule}
+                  >
+                    {createRuleCta}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative z-10 flex w-full justify-center lg:w-[568px] lg:shrink-0">
+            <Rule
+              title={ruleTitle}
+              description={ruleDescription}
+              expanded
+              size="L"
+              fluidWidth
+              interactive={false}
+              hideCategoryAddButton
+              descriptionAtBottom
+              backgroundColor="bg-[var(--color-surface-invert-brand-primary)]"
+              className="w-full max-w-[568px] gap-[12px] rounded-[var(--radius-300)] lg:gap-[16px] lg:rounded-[var(--radius-500)]"
+              categories={ruleCategories}
+              icon={
+                // eslint-disable-next-line @next/next/no-img-element -- decorative brand mark beside the title
+                <img
+                  src={getAssetPath(ASSETS.LOGO)}
+                  alt=""
+                  width={88}
+                  height={88}
+                  className="size-full object-contain brightness-0"
+                  role="presentation"
+                />
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+HeroBannerView.displayName = "HeroBannerView";
+
+export default memo(HeroBannerView);