@npm_leadtech/legal-contracts-ui 0.74.1 → 0.74.2

package/dist/components/AboutUsTemplate.d.ts

@@ -77,6 +77,7 @@ export interface IntroSectionProps {
     children: ReactNode;
     cta: ButtonProps;
     className?: string;
+    containerClassName?: string;
 }
 
 export interface Jumbotron2Props {

package/dist/components/BlogSection.d.ts

@@ -4,15 +4,14 @@ import { ReactNode } from 'react';
 export declare const BlogSection: FC<BlogSectionProps>;
 
 export declare interface BlogSectionProps {
-    header: SectionHeadingProps | null;
+    header: SectionHeadingProps;
     articles: {
         title: string;
         image: ReactNode;
         description: string;
         cta: ReactNode;
     }[];
-    cta: ReactNode | null;
-    className?: string;
+    cta: ReactNode;
 }
 
 export interface SectionHeadingProps {

package/dist/components/BlogSection.js

@@ -1,20 +1,19 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import "react";
-import s from "clsx";
-import { SectionHeading as n } from "./SectionHeading.js";
-import { LinkWrapper as o } from "./LinkWrapper.js";
-const h = ({ header: r, articles: a, cta: m, className: t = "" }) => a.length === 0 ? null : /* @__PURE__ */ e("section", { className: s("mx-auto px-8 lg:px-12 xl:max-w-300 xl:px-0", t), children: /* @__PURE__ */ i("div", { className: "mx-auto flex flex-col items-center gap-8", children: [
-  r && /* @__PURE__ */ e(n, { ...r }),
-  /* @__PURE__ */ e("div", { className: "grid gap-6 lg:grid-cols-2", children: a.map((l) => /* @__PURE__ */ i("article", { className: "flex flex-col rounded-sm bg-white shadow md:flex-row", children: [
-    /* @__PURE__ */ e("div", { className: "relative h-42 shrink-0 overflow-hidden rounded-l-sm md:h-50 lg:h-auto lg:max-w-51 [&_img]:h-full [&_img]:w-full [&_img]:object-cover", children: l.image }),
+import { SectionHeading as a } from "./SectionHeading.js";
+import { LinkWrapper as d } from "./LinkWrapper.js";
+const x = ({ header: m, articles: r, cta: t }) => r.length === 0 ? null : /* @__PURE__ */ e("section", { className: "mx-auto px-8 pt-10 pb-12 lg:px-12 lg:pb-14 xl:max-w-300 xl:px-0", children: /* @__PURE__ */ i("div", { className: "mx-auto flex flex-col items-center gap-8", children: [
+  /* @__PURE__ */ e(a, { ...m }),
+  /* @__PURE__ */ e("div", { className: "grid gap-6 lg:grid-cols-2", children: r.map((l) => /* @__PURE__ */ i("article", { className: "flex flex-col rounded-sm bg-white shadow md:flex-row", children: [
+    /* @__PURE__ */ e("div", { className: "relative h-42 shrink-0 overflow-hidden rounded-t-sm md:h-full md:max-w-51 md:rounded-t-none md:rounded-l-sm [&_img]:h-full [&_img]:w-full [&_img]:object-cover", children: l.image }),
     /* @__PURE__ */ i("div", { className: "flex flex-col gap-4 p-6 text-neutral-800", children: [
       /* @__PURE__ */ e("h3", { className: "text-big font-semibold", children: l.title }),
       /* @__PURE__ */ e("p", { className: "text-medium", children: l.description }),
-      /* @__PURE__ */ e(o, { className: "w-fit", variant: "tertiary-bold", children: l.cta })
+      /* @__PURE__ */ e(d, { className: "w-fit", variant: "tertiary-bold", children: l.cta })
     ] })
   ] }, l.title)) }),
-  !!m && /* @__PURE__ */ e(o, { className: "w-full md:w-fit", variant: "secondary-green", children: m })
+  /* @__PURE__ */ e(d, { className: "w-full md:w-fit", variant: "secondary-green", children: t })
 ] }) });
 export {
-  h as BlogSection
+  x as BlogSection
 };

package/dist/components/CategoryProductTemplate.d.ts

@@ -1,16 +1,27 @@
 import { FC } from 'react';
 import { ReactNode } from 'react';
 
+export interface AlternativeSubtypeDocumentProps extends BaseSubtypeDocumentProps {
+    format: 'Alternative';
+}
+
+export interface BaseSubtypeDocumentProps {
+    id: string;
+    link: ReactNode;
+    sampleImage: ReactNode;
+    pdfDownload: ReactNode;
+    wordDownload: ReactNode;
+}
+
 export interface BlogSectionProps {
-    header: SectionHeadingProps | null;
+    header: SectionHeadingProps;
     articles: {
         title: string;
         image: ReactNode;
         description: string;
         cta: ReactNode;
     }[];
-    cta: ReactNode | null;
-    className?: string;
+    cta: ReactNode;
 }
 
 export interface BreadcrumbProps {
@@ -28,10 +39,31 @@ export declare interface CategoryProductTemplateProps {
     breadcrumb: BreadcrumbProps;
     categories: DocumentCategoriesProps;
     documentSections: DocumentSectionProps[];
+    contentItems: ContentItemProps[];
     faqSection: FaqSectionProps;
     articles: BlogSectionProps;
 }
 
+export interface ContentItemProps {
+    id: string;
+    title: string | null;
+    content: string | null;
+    linkedProducts: LinkedProductProps[];
+    sampleImage: ImageWithPreviewProps | null;
+    cta: ReactNode | null;
+    docsModules: {
+        pdfDownload: ReactNode;
+        wordDownload: ReactNode;
+    } | null;
+    subtypeDocs: SubtypeDocumentProps[];
+}
+
+export interface DefaultSubtypeDocumentProps extends BaseSubtypeDocumentProps {
+    format: 'Default';
+    createDocButton: ReactNode;
+    description: string;
+}
+
 export interface DocumentCategoriesProps {
     title: string;
     categories: {
@@ -71,6 +103,11 @@ export interface FaqSectionProps {
     className?: string;
 }
 
+export interface ImageWithPreviewProps {
+    small: ReactNode;
+    large: ReactNode;
+}
+
 export interface JumboCardProps {
     title: string;
     description: string;
@@ -79,6 +116,11 @@ export interface JumboCardProps {
     lastUpdate?: string;
 }
 
+export interface LinkedProductProps {
+    slug: string;
+    children: ReactNode;
+}
+
 export interface SectionHeadingProps {
     title: string;
     description?: string;
@@ -86,4 +128,6 @@ export interface SectionHeadingProps {
     titleClass?: string;
     className?: string;
 }
+
+export type SubtypeDocumentProps = DefaultSubtypeDocumentProps | AlternativeSubtypeDocumentProps;
 

package/dist/components/CategoryProductTemplate.js

@@ -1,41 +1,33 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { JumboCard as i } from "./JumboCard.js";
-import { DocumentCategories as c } from "./DocumentCategories.js";
-import { DocumentSection as n } from "./DocumentSection.js";
-import { Breadcrumb as x } from "./Breadcrumb.js";
-import { FaqSection as f } from "./FaqSection.js";
-import { BlogSection as d } from "./BlogSection.js";
-const w = ({
-  jumbo: r,
-  breadcrumb: o,
-  categories: m,
-  documentSections: s,
-  faqSection: p,
-  articles: a
-}) => /* @__PURE__ */ l("main", { className: "mx-auto flex flex-1 flex-col gap-4 px-6 pt-8 pb-16 lg:px-8 xl:max-w-300 xl:px-0", children: [
-  /* @__PURE__ */ e(i, { ...r }),
-  /* @__PURE__ */ e(x, { ...o, className: "pt-2" }),
-  /* @__PURE__ */ l("div", { className: "mx-auto flex justify-center gap-4 text-neutral-800 lg:gap-26.5 xl:gap-31.5", children: [
-    /* @__PURE__ */ e("aside", { className: "sticky top-24 hidden self-start md:block", children: /* @__PURE__ */ e(c, { ...m }) }),
-    /* @__PURE__ */ l("div", { className: "flex flex-col gap-10", children: [
-      s.map((t) => /* @__PURE__ */ e(n, { ...t }, t.id)),
-      /* @__PURE__ */ e("span", { className: "h-px w-full bg-neutral-200" }),
-      /* @__PURE__ */ e(f, { ...p }),
-      /* @__PURE__ */ e(
-        d,
-        {
-          ...a,
-          header: a.header ? {
-            ...a.header,
-            align: "start",
-            titleClass: "font-bold font-inter text-super-large",
-            className: "w-full"
-          } : null
-        }
-      )
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { JumboCard as s } from "./JumboCard.js";
+import { DocumentCategories as p } from "./DocumentCategories.js";
+import { DocumentSection as f } from "./DocumentSection.js";
+import { Breadcrumb as d } from "./Breadcrumb.js";
+import { ContentItem as u } from "./ContentItem.js";
+import { FaqSection as x } from "./FaqSection.js";
+import { BlogSection as g } from "./BlogSection.js";
+const y = ({
+  jumbo: e,
+  breadcrumb: a,
+  categories: t,
+  documentSections: i,
+  contentItems: l,
+  faqSection: c,
+  articles: n
+}) => /* @__PURE__ */ o("main", { className: "mx-auto max-w-6xl flex-1", children: [
+  /* @__PURE__ */ r(s, { ...e }),
+  /* @__PURE__ */ r(d, { ...a, className: "pb-4" }),
+  /* @__PURE__ */ o("div", { className: "container mx-auto flex flex-col justify-center gap-30 lg:flex-row", children: [
+    /* @__PURE__ */ r(p, { ...t }),
+    /* @__PURE__ */ o("div", { className: "", children: [
+      i.map((m) => /* @__PURE__ */ r(f, { ...m }, m.id)),
+      /* @__PURE__ */ r("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": !0 }),
+      l.map((m) => /* @__PURE__ */ r(u, { ...m }, m.id)),
+      /* @__PURE__ */ r(x, { ...c, className: "pb-6" }),
+      /* @__PURE__ */ r(g, { ...n })
     ] })
   ] })
 ] });
 export {
-  w as CategoryProductTemplate
+  y as CategoryProductTemplate
 };

package/dist/components/DocumentSection.js

@@ -1,16 +1,15 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { DocumentItem as i } from "./DocumentItem.js";
-import { Markdown as o } from "./Markdown.js";
-const x = ({ id: r, title: t, description: s, icon: c, documents: m }) => /* @__PURE__ */ l("article", { id: r, className: "flex scroll-mt-24 flex-col gap-6", children: [
+import { DocumentItem as m } from "./DocumentItem.js";
+const n = ({ id: r, title: s, description: c, icon: t, documents: i }) => /* @__PURE__ */ l("article", { id: r, className: "flex scroll-mt-24 flex-col gap-6", children: [
   /* @__PURE__ */ l("div", { className: "flex items-start gap-4 rounded bg-neutral-50 p-6", children: [
-    c,
+    t,
     /* @__PURE__ */ l("div", { className: "flex flex-1 flex-col gap-2 text-neutral-800", children: [
-      /* @__PURE__ */ e("p", { className: "font-lora text-super-large", children: t }),
-      /* @__PURE__ */ e(o, { className: "text-medium [&_p:last-child]:mb-0", content: s })
+      /* @__PURE__ */ e("p", { className: "font-lora text-super-large", children: s }),
+      /* @__PURE__ */ e("p", { className: "text-medium", children: c })
     ] })
   ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-2", children: m.map((a) => /* @__PURE__ */ e(i, { ...a, className: "w-full" }, a.id)) })
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-2", children: i.map((a) => /* @__PURE__ */ e(m, { ...a, className: "w-full" }, a.id)) })
 ] });
 export {
-  x as DocumentSection
+  n as DocumentSection
 };

package/dist/components/HeroSection.d.ts

@@ -6,10 +6,10 @@ export declare const HeroSection: FC<HeroSectionProps>;
 export declare interface HeroSectionProps {
     title: string;
     description?: string;
+    bgImage: ReactNode | null;
     cta?: ReactNode;
     heroDocuments: ItemProps[];
     listTitle?: string;
-    backgroundImage?: string;
 }
 
 export interface ItemProps {
@@ -17,10 +17,8 @@ export interface ItemProps {
     image: ReactNode;
     title?: string;
     description?: string;
-    documentUrl?: string;
-    actions?: ReactNode;
+    documentUrl?: ReactNode;
     variant?: 'default' | 'card';
     className?: string;
-    titleClassName?: string;
 }
 

package/dist/components/HeroSection.js

@@ -1,32 +1,21 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import "react";
-import { Item as c } from "./Item.js";
+import { Item as n } from "./Item.js";
 import { LinkWrapper as x } from "./LinkWrapper.js";
-const g = ({
-  title: i,
-  description: s,
-  cta: l,
-  heroDocuments: m,
-  listTitle: n,
-  backgroundImage: r
-}) => /* @__PURE__ */ e("section", { className: "bg-primary-50", children: /* @__PURE__ */ e(
-  "div",
-  {
-    className: "bg-none bg-size-[420px_442px] bg-bottom-right bg-no-repeat xl:bg-(image:--hero-bg)",
-    style: { "--hero-bg": r ? `url(${r})` : "none" },
-    children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-6 px-6 py-10 md:px-20 lg:flex-row lg:gap-14 lg:px-8 lg:py-12 xl:justify-center xl:gap-20", children: [
-      /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-6 pb-6 text-center lg:items-start lg:text-left xl:max-w-115", children: [
-        /* @__PURE__ */ e("h1", { className: "font-lora text-hero md:text-super-hero text-neutral-900", children: i }),
-        /* @__PURE__ */ e("p", { className: "text-big text-neutral-800", children: s }),
-        !!l && /* @__PURE__ */ e(x, { variant: "primary-darkgreen", className: "w-full md:w-fit", children: l })
-      ] }),
-      /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center gap-4 md:w-full md:items-start md:justify-start xl:max-w-115", children: [
-        /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ e("p", { className: "text-big text-primary-800 font-semibold", children: n }) }),
-        /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-2", children: m.map((a) => /* @__PURE__ */ e(c, { ...a, variant: "card" }, a.title)) })
-      ] })
+const g = ({ title: i, description: s, cta: l, heroDocuments: m, listTitle: c, bgImage: r }) => /* @__PURE__ */ t("section", { className: "bg-primary-50 relative", children: [
+  !!r && r,
+  /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-6 px-6 py-10 md:px-20 lg:flex-row lg:gap-14 lg:px-8 lg:py-12 xl:justify-center xl:gap-20", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-6 pb-6 text-center lg:items-start lg:text-left xl:max-w-115", children: [
+      /* @__PURE__ */ e("h1", { className: "font-lora text-hero md:text-super-hero text-neutral-900", children: i }),
+      /* @__PURE__ */ e("p", { className: "text-big text-neutral-800", children: s }),
+      !!l && /* @__PURE__ */ e(x, { variant: "primary-darkgreen", className: "w-full md:w-fit", children: l })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center gap-4 md:w-full md:items-start md:justify-start xl:max-w-115", children: [
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ e("p", { className: "text-big text-primary-800 font-semibold", children: c }) }),
+      /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-2", children: m.map((a) => /* @__PURE__ */ e(n, { ...a, variant: "card" }, a.title)) })
     ] })
-  }
-) });
+  ] })
+] });
 export {
   g as HeroSection
 };

package/dist/components/HomeTemplate.d.ts

@@ -2,15 +2,14 @@ import { FC } from 'react';
 import { ReactNode } from 'react';
 
 export interface BlogSectionProps {
-    header: SectionHeadingProps | null;
+    header: SectionHeadingProps;
     articles: {
         title: string;
         image: ReactNode;
         description: string;
         cta: ReactNode;
     }[];
-    cta: ReactNode | null;
-    className?: string;
+    cta: ReactNode;
 }
 
 export interface CategoriesSectionProps {
@@ -37,10 +36,10 @@ export interface FaqTeaserSectionProps {
 export interface HeroSectionProps {
     title: string;
     description?: string;
+    bgImage: ReactNode | null;
     cta?: ReactNode;
     heroDocuments: ItemProps[];
     listTitle?: string;
-    backgroundImage?: string;
 }
 
 export interface HomeStepsProps {
@@ -72,23 +71,29 @@ export interface ItemProps {
     image: ReactNode;
     title?: string;
     description?: string;
-    documentUrl?: string;
-    actions?: ReactNode;
+    documentUrl?: ReactNode;
     variant?: 'default' | 'card';
     className?: string;
-    titleClassName?: string;
 }
 
 export interface LawGeniusSectionProps {
     title: string;
     content: string;
-    benefits: {
+    benefits?: {
         id: string;
         label: string;
         icon: ReactNode;
     }[];
+    /** When set, renders below the markdown instead of benefit chips (e.g. stacked AI step cards). */
+    stepsSlot?: ReactNode;
+    /** Optional copy between steps and CTA (centered + steps layout only). */
+    belowStepsSlot?: ReactNode;
     cta: ReactNode;
     image: ReactNode;
+    /** When true with `stepsSlot`, skips LinkWrapper around `cta` (e.g. plain Button). */
+    skipCtaWrapper?: boolean;
+    sectionClassName?: string;
+    innerClassName?: string;
 }
 
 export interface PopularDocumentsProps {

package/dist/components/HomeTemplate.js

@@ -1,32 +1,32 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import "react";
-import { HeroSection as n } from "./HeroSection.js";
-import { MoreTemplatesSection as f } from "./MoreTemplatesSection.js";
-import { ProcessSection as l } from "./ProcessSection.js";
-import { CategoriesSection as S } from "./CategoriesSection.js";
+import { HeroSection as s } from "./HeroSection.js";
+import { MoreTemplatesSection as a } from "./MoreTemplatesSection.js";
+import { ProcessSection as S } from "./ProcessSection.js";
+import { CategoriesSection as l } from "./CategoriesSection.js";
 import { RatafiaSection as x } from "./RatafiaSection.js";
 import { TrustSection as T } from "./TrustSection.js";
-import { FaqTeaserSection as b } from "./FaqTeaserSection.js";
-import { BlogSection as g } from "./BlogSection.js";
-const M = ({
+import { FaqTeaserSection as j } from "./FaqTeaserSection.js";
+import { BlogSection as u } from "./BlogSection.js";
+const P = ({
   hero: t,
   moreTemplates: m,
   process: e,
   categories: r,
   ratafia: i,
   trust: p,
-  faqTeaser: s,
-  articles: a
-}) => /* @__PURE__ */ c("main", { className: "flex-1", children: [
-  /* @__PURE__ */ o(n, { ...t }),
-  /* @__PURE__ */ o(f, { ...m }),
-  /* @__PURE__ */ o(l, { ...e }),
-  r && /* @__PURE__ */ o(S, { ...r }),
+  faqTeaser: n,
+  articles: c
+}) => /* @__PURE__ */ f("main", { className: "flex-1", children: [
+  /* @__PURE__ */ o(s, { ...t }),
+  /* @__PURE__ */ o(a, { ...m }),
+  /* @__PURE__ */ o(S, { ...e }),
+  r && /* @__PURE__ */ o(l, { ...r }),
   /* @__PURE__ */ o(x, { ...i }),
   /* @__PURE__ */ o(T, { ...p }),
-  /* @__PURE__ */ o(b, { ...s }),
-  /* @__PURE__ */ o(g, { className: "pt-10 pb-12 lg:pb-14", ...a })
+  /* @__PURE__ */ o(j, { ...n }),
+  /* @__PURE__ */ o(u, { ...c })
 ] });
 export {
-  M as HomeTemplate
+  P as HomeTemplate
 };

package/dist/components/HowItWorksTemplate.d.ts

@@ -0,0 +1,88 @@
+import { ComponentPropsWithRef } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    children: ReactNode;
+    size?: ButtonSize;
+    variant?: ResponsiveButtonVariant;
+    iconPosition?: IconPosition;
+}
+
+export type ButtonSize = 'small' | 'default' | 'large';
+
+export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+
+export declare type HowItWorksExamplesProps = {
+    eyebrow: string;
+    title: string;
+    rows: {
+        label: string;
+        value: string;
+    }[];
+    footer: string;
+};
+
+export declare type HowItWorksHeroBullet = {
+    id: string;
+    strong: string;
+    text: string;
+};
+
+export declare type HowItWorksLawGeniusStep = {
+    id: string;
+    title: string;
+    description: string;
+    icon: ReactNode;
+};
+
+export declare type HowItWorksProcessStep = {
+    id: string;
+    title: string;
+    /** Column with text when not reversed; swap with image when `reverse` is true. */
+    body: ReactNode;
+    image: ReactNode;
+    background: 'bg-white' | 'bg-neutral-25';
+    reverse?: boolean;
+};
+
+export declare const HowItWorksTemplate: FC<HowItWorksTemplateProps>;
+
+export declare interface HowItWorksTemplateProps {
+    hero: {
+        eyebrow: string;
+        title: string;
+        image: ReactNode;
+        intro: ReactNode;
+        bullets: HowItWorksHeroBullet[];
+        closing: ReactNode;
+        cta: ButtonProps;
+    };
+    processSteps: HowItWorksProcessStep[];
+    lawGenius: {
+        title: string;
+        content: string;
+        steps: HowItWorksLawGeniusStep[];
+        belowStepsSlot: ReactNode;
+        cta: ButtonProps;
+        image: ReactNode;
+        sectionClassName?: string;
+    };
+    resources: {
+        examples: HowItWorksExamplesProps;
+        image: ReactNode;
+        supportBody: ReactNode;
+        cta: ButtonProps;
+    };
+}
+
+export type IconPosition = 'left' | 'right' | 'top';
+
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+

package/dist/components/HowItWorksTemplate.js

@@ -0,0 +1,128 @@
+import { jsxs as a, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { Button as c } from "./Button.js";
+import { IntroSection as u } from "./IntroSection.js";
+import { RatafiaSection as f } from "./RatafiaSection.js";
+import { TwoColumnSection as m } from "./TwoColumnSection.js";
+const g = ({ title: l, description: r, icon: s }) => /* @__PURE__ */ a("div", { className: "rounded-2xl bg-white/10 p-5", children: [
+  /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("span", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/20", children: s }),
+    /* @__PURE__ */ e("p", { className: "text-lg font-semibold", children: l })
+  ] }),
+  /* @__PURE__ */ e("p", { className: "text-small mt-3 text-white/85", children: r })
+] }), h = (l) => {
+  const r = /* @__PURE__ */ a("div", { className: "space-y-5 text-neutral-800 lg:w-1/2", children: [
+    /* @__PURE__ */ e("h2", { className: "font-lora text-3xl font-bold text-neutral-800", children: l.title }),
+    /* @__PURE__ */ e("div", { className: "text-medium space-y-4 text-neutral-800", children: l.body })
+  ] }), s = /* @__PURE__ */ e("div", { className: "relative aspect-560/408 w-full overflow-hidden rounded-2xl shadow-[0_25px_60px_rgba(3,42,56,0.15)] lg:w-1/2", children: l.image });
+  return l.reverse ? { firstColumn: s, secondColumn: r } : { firstColumn: r, secondColumn: s };
+}, C = ({ hero: l, processSteps: r, lawGenius: s, resources: n }) => {
+  const o = {
+    size: "large",
+    variant: "primary-white",
+    className: "text-medium w-full justify-center font-bold text-primary-900 lg:w-auto",
+    ...s.cta
+  }, { examples: i } = n;
+  return /* @__PURE__ */ a("main", { className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ e("section", { className: "bg-primary-50 px-6 py-16 sm:px-10 lg:px-24", children: /* @__PURE__ */ a("div", { className: "mx-auto flex max-w-6xl flex-col gap-12", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e("p", { className: "text-small font-semibold tracking-[0.3em] text-neutral-600 uppercase", children: l.eyebrow }),
+        /* @__PURE__ */ e("h1", { className: "font-lora mt-3 text-4xl text-neutral-800 sm:text-5xl", children: l.title })
+      ] }),
+      /* @__PURE__ */ e(
+        u,
+        {
+          className: "bg-transparent",
+          containerClassName: "w-full !max-w-none flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-center",
+          image: l.image,
+          cta: {
+            size: "large",
+            variant: "primary-darkgreen",
+            className: "text-medium mt-8 w-full justify-center font-bold",
+            ...l.cta
+          },
+          children: /* @__PURE__ */ a("div", { className: "text-medium space-y-4", children: [
+            l.intro,
+            /* @__PURE__ */ e("ul", { className: "text-medium space-y-3", children: l.bullets.map((t) => /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e("span", { className: "bg-primary-600 mt-1 h-2.5 w-2.5 rounded-full", "aria-hidden": !0 }),
+              /* @__PURE__ */ a("span", { children: [
+                /* @__PURE__ */ a("strong", { children: [
+                  t.strong,
+                  " "
+                ] }),
+                t.text
+              ] })
+            ] }, t.id)) }),
+            l.closing
+          ] })
+        }
+      )
+    ] }) }),
+    r.map((t) => {
+      const { firstColumn: d, secondColumn: p } = h(t);
+      return /* @__PURE__ */ e(
+        m,
+        {
+          className: `${t.background} px-6 py-16 sm:px-10 lg:px-24`,
+          containerClassName: "w-full !max-w-6xl flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-center",
+          firstColumn: d,
+          secondColumn: p
+        },
+        t.id
+      );
+    }),
+    /* @__PURE__ */ e(
+      f,
+      {
+        title: s.title,
+        content: s.content,
+        stepsSlot: /* @__PURE__ */ e(x, { children: s.steps.map((t) => /* @__PURE__ */ e(g, { ...t }, t.id)) }),
+        belowStepsSlot: s.belowStepsSlot,
+        cta: /* @__PURE__ */ e(c, { ...o }),
+        skipCtaWrapper: !0,
+        image: s.image,
+        sectionClassName: s.sectionClassName ?? "bg-primary-50 px-6 py-16 sm:px-10 lg:px-24 xl:px-0"
+      }
+    ),
+    /* @__PURE__ */ e("section", { className: "bg-white px-6 py-16 sm:px-10 lg:px-24", children: /* @__PURE__ */ e(
+      m,
+      {
+        className: "bg-transparent",
+        containerClassName: "w-full !max-w-6xl flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-stretch",
+        firstColumn: /* @__PURE__ */ a("div", { className: "space-y-6 rounded-3xl border border-neutral-100 p-8 shadow-[0_20px_60px_rgba(3,42,56,0.12)] lg:w-1/2", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e("p", { className: "text-sm font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: i.eyebrow }),
+            /* @__PURE__ */ e("h3", { className: "mt-2 text-3xl font-bold text-neutral-800", children: i.title })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "space-y-4", children: i.rows.map((t) => /* @__PURE__ */ a(
+            "div",
+            {
+              className: "text-medium flex items-center justify-between border-b border-neutral-100 pb-3",
+              children: [
+                /* @__PURE__ */ e("span", { className: "text-neutral-500", children: t.label }),
+                /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-900", children: t.value })
+              ]
+            },
+            t.label
+          )) }),
+          /* @__PURE__ */ e("div", { className: "bg-neutral-25 rounded-2xl p-4 text-neutral-700", children: i.footer })
+        ] }),
+        secondColumn: /* @__PURE__ */ a("div", { className: "bg-neutral-25 space-y-6 rounded-3xl p-8 shadow-[0_25px_70px_rgba(3,42,56,0.15)] lg:w-1/2", children: [
+          /* @__PURE__ */ e("div", { className: "relative aspect-420/306 w-full overflow-hidden rounded-2xl", children: n.image }),
+          /* @__PURE__ */ e("div", { className: "space-y-4 text-neutral-800", children: n.supportBody }),
+          /* @__PURE__ */ e(
+            c,
+            {
+              size: "large",
+              variant: "primary-darkgreen",
+              className: "text-medium w-full justify-center font-bold",
+              ...n.cta
+            }
+          )
+        ] })
+      }
+    ) })
+  ] });
+};
+export {
+  C as HowItWorksTemplate
+};