4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:Te67,import { CalendarClock, Mail, Phone } from "lucide-react"; import Image from "next/image"; import { cn } from "@/lib/utils"; import type { ImageAsset } from "../_types/common"; import type { CtaContactIcon, CtaContent } from "../_types/cta"; import { defaultCta5Background, defaultCta5Content } from "./data"; import { EnquiryForm } from "./enquiry-form"; import { SectionHeader } from "./section-header"; const contactIcons: Record = { clock: CalendarClock, mail: Mail, phone: Phone, }; export default function Cta5({ backgroundImage = defaultCta5Background, content = defaultCta5Content, onPhoto = false, onSubmit, }: { /** Photo behind the band. Pass `null` for a plain primary band. */ backgroundImage?: ImageAsset | null; content?: CtaContent; /** A parent already paints a photo behind this band (and usually the * footer below): stay transparent but keep the photo text colours. */ onPhoto?: boolean; onSubmit?: (values: Record) => Promise | void; }) { const photo = Boolean(backgroundImage) || onPhoto; return (

{backgroundImage && ( <> {backgroundImage.alt}

)}

{content.contacts && content.contacts.length > 0 && (

{content.contacts.map((contact) => { const Icon = contactIcons[contact.icon]; const body = ( <> {contact.label} {contact.value} ); return contact.href ? ( {body} ) : ( {body} ); })}

)}

{content.form && (

)}

); } 52:T80e,import type { ImageAsset } from "../_types/common"; import type { CtaContent } from "../_types/cta"; export const defaultCta5Content: CtaContent = { contacts: [ { href: "tel:+18005550199", icon: "phone", label: "Call us", value: "+1 (800) 555-0199", }, { icon: "clock", label: "Open", value: "Mon–Sat, 8am – 7pm", }, ], description: "Tell us roughly what you are after and an advisor will call within one working day — no automated valuations, no drip campaign.", eyebrow: "Start the conversation", form: { description: "Four fields. That is all we need to be useful.", fields: [ { label: "Full name", name: "name", placeholder: "Alex Marsden", required: true, }, { label: "Phone", name: "phone", placeholder: "+1 (800) 555-0199", required: true, type: "tel", }, { label: "Email", name: "email", placeholder: "you@email.com", required: true, span: "full", type: "email", }, { label: "What are you looking for?", name: "interest", placeholder: "A four-bed near Cedar Park, under $1.5M", span: "full", }, ], note: "By sending this you agree to be contacted about your enquiry. We never share your details with third parties.", submitLabel: "Request a callback", success: { description: "An advisor for your district will call within one working day. If it is urgent, the office answers on +1 (800) 555-0199 until 7pm.", resetLabel: "Send another", title: "Thank you — that is with us.", }, title: "Request a callback", }, title: "Book a viewing, or ask what your home is worth.", }; export const defaultCta5Background: ImageAsset = { alt: "Evening light across a harbour residence", src: "https://res.cloudinary.com/qgiongel/image/upload/q_auto/f_auto/v1786950553/templates/estate/marbrook/cndn_marbrook003.jpg", }; 53:T1a8c,"use client"; import { ArrowRight, Check } from "lucide-react"; import type React from "react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Field, FieldError, FieldLabel } from "@/components/ui/field"; import { Form } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { toastManager } from "@/components/ui/toast"; import { cn } from "@/lib/utils"; import type { FormContent, FormField } from "../_types/common"; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const PHONE = /^\+?[\d\s().-]{8,}$/; function validate(field: FormField) { return (raw: unknown): string | null => { const value = String(raw ?? "").trim(); if (value === "") { return field.required ? "Please fill this in." : null; } if (field.type === "email" && !EMAIL.test(value)) { return "That does not look like an email address."; } if (field.type === "tel" && !PHONE.test(value)) { return "Please check the number — digits, spaces and brackets only."; } return null; }; } /** Stands in for a real POST so the pending and success states are visible. */ async function simulateSubmit(): Promise { await new Promise((resolve) => setTimeout(resolve, 900)); } const controlClasses = "h-11 items-center border-input"; const labelClasses = "text-muted-foreground text-sm"; export function EnquiryForm({ className, content, onSubmit = simulateSubmit, size = "default", }: { className?: string; content: FormContent; onSubmit?: (values: Record) => Promise | void; /** `sm` for a sidebar card, `default` for a page-level form. */ size?: "default" | "sm"; }): React.ReactElement { const [pending, setPending] = useState(false); const [sent, setSent] = useState(false); const [selects, setSelects] = useState>(() => Object.fromEntries( content.fields .filter((field) => field.type === "select") .map((field) => [field.name, field.options?.[0] ?? ""]), ), ); const Heading = size === "sm" ? "h3" : "h2"; const headingClasses = size === "sm" ? "font-display text-2xl text-primary" : "font-display text-3xl text-primary"; async function handleSubmit(values: Record): Promise { setPending(true); await onSubmit({ ...values, ...selects }); setPending(false); setSent(true); toastManager.add({ description: content.success.description, title: content.success.title, type: "success", }); } if (sent) { return (

{content.success.title}

{content.success.description}

); } return (

{content.title} {content.description && (

{content.description}

)}

{content.fields.map((field) => { const span = field.span === "full" && "sm:col-span-2"; if (field.type === "select") { return (

{field.label}

); } return ( {field.label} {field.type === "textarea" ? (

) : (
                <Input
                  className={controlClasses}
                  name={field.name}
                  placeholder={field.placeholder}
                  type={field.type ?? "text"}
                />
              )}
              <FieldError />
            </Field>
          );
        })}
      </div>

<Button
        className={cn(
          "group mt-7 w-full gap-2 border-none bg-primary text-primary-foreground shadow-none hover:bg-primary/90",
          size === "default" && "sm:w-fit sm:px-9",
        )}
        loading={pending}
        size="xl"
        type="submit"
      >
        {content.submitLabel}
        <ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5" />
      </Button>

{content.note && (
        <p className="mt-4 text-muted-foreground/70 text-xs leading-relaxed">
          {content.note}
        </p>
      )}
    </Form>
  );
}
54:Tcd4,import type React from "react";

import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";

/** The small uppercase label that opens most headers. */
export const eyebrowClass =
  "inline-flex items-center gap-2 font-medium text-[0.6875rem] uppercase tracking-[0.22em]";

export const surfaceClass: Record<Surface, string> = {
  default: "bg-background text-foreground",
  muted: "bg-muted text-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
};

/**
 * Which band the header sits on. `photo` keeps literal white, because
 * `--primary-foreground` inverts in dark mode and would be unreadable over a
 * photograph.
 */
export type SectionTone = "light" | "photo" | "primary" | "secondary";

export function toneFor(surface: Surface): SectionTone {
  if (surface === "primary") return "primary";
  if (surface === "secondary") return "secondary";
  return "light";
}

const toneClasses: Record<
  SectionTone,
  { eyebrow: string; heading: string; lede: string; tick: string }
> = {
  light: {
    eyebrow: "text-muted-foreground/70",
    heading: "text-primary",
    lede: "text-muted-foreground",
    tick: "bg-secondary",
  },
  photo: {
    eyebrow: "text-white/50",
    heading: "text-white",
    lede: "text-white/65",
    tick: "bg-secondary",
  },
  primary: {
    eyebrow: "text-primary-foreground/40",
    heading: "text-primary-foreground",
    lede: "text-primary-foreground/60",
    tick: "bg-secondary",
  },
  secondary: {
    eyebrow: "text-secondary-foreground/50",
    heading: "text-secondary-foreground",
    lede: "text-secondary-foreground/70",
    tick: "bg-primary",
  },
};

export function SectionHeader({
  action,
  actionAt = "sm",
  className,
  description,
  eyebrow,
  size = "default",
  title,
  tone = "light",
}: {
  /** Rendered beside the heading block once `actionAt` is reached. */
  action?: React.ReactNode;
  /** A text link fits from `sm`; a row of filter tabs needs `lg`. */
  actionAt?: "lg" | "sm";
  className?: string;
  description?: React.ReactNode;
  eyebrow: string;
  /** `sm` is the narrow-sidebar size used by 4/8 splits. */
  size?: "default" | "sm";
  title: React.ReactNode;
  tone?: SectionTone;
}): React.ReactElement {
  const tones = toneClasses[tone];

return (
    <div
      className={cn(
        action && "flex flex-col gap-6",
        action &&
          (actionAt === "lg"
            ? "gap-8 lg:flex-row lg:items-end lg:justify-between"
            : "sm:flex-row sm:items-end sm:justify-between"),
        className,
      )}
    >
      <div className={cn(action && "max-w-xl")}>
        <p className={cn(eyebrowClass, tones.eyebrow)}>
          <span className={cn("size-1", tones.tick)} />
          {eyebrow}
        </p>

<h2
          className={cn(
            "mt-5 font-display",
            tones.heading,
            size === "sm"
              ? "text-3xl leading-[1.1] sm:text-4xl"
              : "text-4xl leading-[1.05] sm:text-5xl",
          )}
        >
          {title}
        </h2>

{description && (
          <p className={cn("mt-4 max-w-xl leading-relaxed", tones.lede)}>
            {description}
          </p>
        )}
      </div>

{action}
    </div>
  );
}
55:T5dc,/**
 * Shapes shared by every token-based section. Each section ships this file
 * alongside its own category types, so installing several sections simply
 * rewrites the same file.
 */

/** Which band a section sits on. A style choice, never part of `content`. */
export type Surface = "default" | "muted" | "primary" | "secondary";

export type ImageAsset = {
  alt: string;
  src: string;
};

export type LinkAction = {
  href: string;
  label: string;
};

/** Eyebrow + heading + optional lede, the header most sections open with. */
export type SectionIntro = {
  description?: string;
  eyebrow: string;
  title: string;
};

/** A figure that counts up when it scrolls into view. */
export type Stat = {
  decimals?: number;
  label: string;
  prefix?: string;
  suffix?: string;
  value: number;
};

/** A figure that is displayed as written ("1,240+", "4.9/5"). */
export type Highlight = {
  label: string;
  value: string;
};

export type FormField = {
  label: string;
  name: string;
  /** Only for `type: "select"`. The first option is the default. */
  options?: string[];
  placeholder?: string;
  required?: boolean;
  /** `full` spans both columns of a two-column form. */
  span?: "full" | "half";
  type?: "email" | "select" | "tel" | "text" | "textarea";
};

export type FormContent = {
  description?: string;
  fields: FormField[];
  note?: string;
  submitLabel: string;
  success: {
    description: string;
    resetLabel: string;
    title: string;
  };
  title: string;
};
4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@cnippet-blocks","registryDependencies":["@cnippet/button","@cnippet/field","@cnippet/form","@cnippet/input","@cnippet/select","@cnippet/textarea","@cnippet/toast","@cnippet/utils"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/sections/cta-5/index.tsx","content":"$51","type":"registry:component","target":"components/sections/cta-5/index.tsx"},{"path":"registry/default/sections/cta-5/data.ts","content":"$52","type":"registry:component","target":"components/sections/cta-5/data.ts"},{"path":"registry/default/sections/cta-5/enquiry-form.tsx","content":"$53","type":"registry:component","target":"components/sections/cta-5/enquiry-form.tsx"},{"path":"registry/default/sections/cta-5/section-header.tsx","content":"$54","type":"registry:component","target":"components/sections/cta-5/section-header.tsx"},{"path":"registry/default/sections/_types/common.ts","content":"$55","type":"registry:lib","target":"components/sections/_types/common.ts"},{"path":"registry/default/sections/_types/cta.ts","content":"import type { FormContent, SectionIntro } from \"./common\";\n\nexport type CtaContactIcon = \"clock\" | \"mail\" | \"phone\";\n\nexport type CtaContent = SectionIntro & {\n  contacts?: {\n    href?: string;\n    icon: CtaContactIcon;\n    label: string;\n    value: string;\n  }[];\n  form?: FormContent;\n};\n","type":"registry:lib","target":"components/sections/_types/cta.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>