TASKS-1823 WebManager module

2026-08-28 08:35:58 +00:00
parent fdb2cf3837
commit c93d8c025b
654 changed files with 26232 additions and 6075 deletions
@@ -0,0 +1,89 @@
+import { LinkList } from '#web-runtime/components/links';
+import { MediaImage } from '#web-runtime/components/media-image';
+import { RichTextContent } from '#web-runtime/components/rich-text';
+import type { PageDocument } from '#web-runtime/types';
+
+export default function PageHero({ page }: { page: PageDocument }) {
+  const hero = page.hero;
+
+  if (hero?.type === 'none') {
+    return null;
+  }
+
+  const isEditorial = ['blog', 'blog-item'].includes(page.layout);
+  const containerClasses = `mx-auto w-[min(calc(100%_-_2rem),76rem)] max-[45rem]:w-[min(calc(100%_-_1.25rem),76rem)]`;
+  const eyebrowClasses =
+    'mb-5 font-mono text-xs font-bold tracking-[0.12em] text-[#517000] uppercase';
+  const titleClasses = `max-w-[15ch] font-sans font-semibold tracking-[-0.065em] leading-[0.98] ${
+    hero?.type === 'low'
+      ? 'text-[clamp(2.4rem,4.7vw,4.5rem)]'
+      : hero?.type === 'middle'
+        ? 'text-[clamp(2.7rem,5.4vw,5.2rem)]'
+        : 'text-[clamp(2.75rem,6.2vw,6rem)]'
+  }`;
+
+  if (!hero) {
+    return (
+      <section className="overflow-hidden border-b border-[#d6d7cf]">
+        <div
+          className={`${containerClasses} relative z-10 max-w-200 py-[clamp(2.75rem,6vw,5rem)] ${isEditorial ? 'max-w-184' : ''}`}
+        >
+          <p className={eyebrowClasses}>{page.layout.replace('-', ' ')}</p>
+          <h1 className="max-w-[15ch] text-[clamp(2.4rem,4.7vw,4.5rem)] leading-[0.98] font-semibold tracking-[-0.065em]">
+            {page.title}
+          </h1>
+        </div>
+      </section>
+    );
+  }
+
+  const hasMedia = Boolean(hero.media?.url);
+  const impactClasses = {
+    low: 'py-[clamp(2.75rem,6vw,5rem)]',
+    middle: 'py-[clamp(4rem,8vw,7rem)]',
+    high: 'min-h-[min(49rem,calc(100dvh-5rem))] py-[clamp(4rem,9vw,8rem)] max-lg:min-h-0'
+  }[hero.type];
+
+  return (
+    <section
+      className={`overflow-hidden border-b border-[#d6d7cf] ${
+        hero.type === 'high'
+          ? 'bg-[radial-gradient(circle_at_85%_15%,rgb(199_255_63/23%),transparent_26rem)]'
+          : ''
+      }`}
+      data-hero-impact={hero.type}
+    >
+      <div
+        className={`${containerClasses} grid items-center gap-[clamp(2rem,5vw,5rem)] ${impactClasses} max-[45rem]:py-14 ${
+          hasMedia
+            ? 'grid-cols-[minmax(0,1fr)_minmax(20rem,0.85fr)] max-lg:grid-cols-[minmax(0,1.1fr)_minmax(16rem,0.75fr)] max-[45rem]:grid-cols-1'
+            : ''
+        }`}
+      >
+        <div className={`relative z-10 max-w-200 ${isEditorial ? 'max-w-184' : ''}`}>
+          <p className={eyebrowClasses}>{page.layout.replace('-', ' ')}</p>
+          <h1 className={titleClasses}>{hero.title || page.title}</h1>
+          {hero.subtitle ? (
+            <p className="mt-6 max-w-152 text-[clamp(1.1rem,2vw,1.35rem)] leading-[1.55] text-[#5d675f]">
+              {hero.subtitle}
+            </p>
+          ) : null}
+          <RichTextContent
+            value={hero.content}
+            className={`mt-5 max-w-156 ${isEditorial ? 'max-w-184' : ''}`}
+          />
+          <LinkList links={hero.ctaItems} className="mt-8" />
+        </div>
+        {hasMedia ? (
+          <figure className="relative m-0 before:absolute before:-inset-3 before:rotate-2 before:rounded-[2.75rem] before:border before:border-[#172019]/15 before:content-['']">
+            <MediaImage
+              media={hero.media}
+              eager
+              className="relative aspect-4/5 rounded-4xl shadow-[0_1.5rem_4rem_rgb(23_32_25/12%)] max-[45rem]:aspect-4/3"
+            />
+          </figure>
+        ) : null}
+      </div>
+    </section>
+  );
+}