50: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"] 51: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"] 52:Teee,import { CalendarClock, Mail, MapPin, Phone } from "lucide-react"; import { cn } from "@/lib/utils"; import type { Surface } from "../_types/common"; import type { ContactContent } from "../_types/contact"; import { defaultContact5Content } from "./data"; import { EnquiryForm } from "./enquiry-form"; import { SectionHeader, surfaceClass, toneFor } from "./section-header"; function telHref(phone: string): string { return `tel:${phone.replace(/[^\d+]/g, "")}`; } /** An enquiry form beside a column of office cards and a general inbox. */ export default function Contact5({ content = defaultContact5Content, onSubmit, surface = "default", }: { content?: ContactContent; onSubmit?: (values: Record) => Promise | void; surface?: Surface; }) { const { aside } = content; return (

{aside.locations.map((location) => (

{location.label}

{location.address}

{location.phone && ( {location.phone} )} {location.hours && (

{location.hours}

)}

))} {aside.email && (

{aside.email.title}

{aside.email.address} {aside.email.note && (

{aside.email.note}

)}

); } 53:Tc0b,import type { ContactContent } from "../_types/contact"; export const defaultContact5Content: ContactContent = { aside: { description: "Both answer until 7pm, Monday to Saturday. Viewings outside those hours are arranged all the time.", email: { address: "hello@marbrook.com", note: "Read within the hour during office hours, and answered within one working day either way.", title: "General enquiries", }, eyebrow: "Or just call", locations: [ { address: "148 Rowan Street, Harbour District", hours: "Mon–Sat, 8am – 7pm", label: "Harbour District", phone: "+1 (800) 555-0199", }, { address: "9 Vantage Lane, Northgate Heights", hours: "Mon–Sat, 8am – 7pm", label: "Northgate Heights", phone: "+1 (800) 555-0142", }, ], title: "Two offices, one switchboard", }, form: { description: "Everything marked optional really is. A sentence about what you are after is the useful part.", fields: [ { label: "Full name", name: "name", placeholder: "Alex Marsden", required: true, }, { label: "Email", name: "email", placeholder: "you@email.com", required: true, type: "email", }, { label: "Phone (optional)", name: "phone", placeholder: "+1 (800) 555-0199", type: "tel", }, { label: "What is it about?", name: "subject", options: [ "Buying a home", "Selling a home", "A free valuation", "Letting or management", "Relocating from abroad", "Something else", ], type: "select", }, { label: "Someone in particular? (optional)", name: "advisor", options: [ "Whoever covers my district", "Nadia Ellery — Harbour District", "Theo Marchetti — Northgate Heights", "Imogen Bell — Marina Bay & Riverside", "Rafael Okonjo — Old Town & Cedar Park", "Elin Sandoval — Relocation & overseas buyers", "Bram Halvorsen — Valuations, all districts", ], span: "full", type: "select", }, { label: "Your message", name: "message", placeholder: "We are looking for a four-bedroom house near Cedar Park, ideally before the school year starts. Budget is around $1.5M.", required: true, span: "full", type: "textarea", }, ], note: "We use your details only to answer this enquiry. We never sell or share them.", submitLabel: "Send message", success: { description: "Somebody will read this within the hour and reply within one working day. If it is urgent, both offices answer the phone until 7pm, Monday to Saturday.", resetLabel: "Send another message", title: "Thank you — that is with us.", }, title: "Send us a message", }, }; 54: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>
  );
}
55: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>
  );
}
56: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;
};
4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@cnippet-blocks","registryDependencies":["@cnippet/button","@cnippet/field","@cnippet/form","@cnippet/input","@cnippet/select","@cnippet/textarea","@cnippet/toast","@cnippet/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/sections/contact-5/index.tsx","content":"$52","type":"registry:component","target":"components/sections/contact-5/index.tsx"},{"path":"registry/default/sections/contact-5/data.ts","content":"$53","type":"registry:component","target":"components/sections/contact-5/data.ts"},{"path":"registry/default/sections/contact-5/enquiry-form.tsx","content":"$54","type":"registry:component","target":"components/sections/contact-5/enquiry-form.tsx"},{"path":"registry/default/sections/contact-5/section-header.tsx","content":"$55","type":"registry:component","target":"components/sections/contact-5/section-header.tsx"},{"path":"registry/default/sections/_types/common.ts","content":"$56","type":"registry:lib","target":"components/sections/_types/common.ts"},{"path":"registry/default/sections/_types/contact.ts","content":"import type { FormContent, SectionIntro } from \"./common\";\n\nexport type ContactContent = {\n  aside: SectionIntro & {\n    email?: {\n      address: string;\n      note?: string;\n      title: string;\n    };\n    locations: {\n      address: string;\n      hours?: string;\n      label: string;\n      phone?: string;\n    }[];\n  };\n  form: FormContent;\n};\n","type":"registry:lib","target":"components/sections/_types/contact.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>