@atelic-action/ui 0.17.2 → 1.0.0

package/src/sections/SplitSection.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+
+export interface SplitSectionProps {
+	left: ReactNode;
+	right: ReactNode;
+	/**
+	 * Column proportions: "even" (1/1), or "narrow-first" (0.9/1.1,
+	 * the media-plus-copy pattern).
+	 */
+	ratio?: "even" | "narrow-first";
+	align?: "start" | "center";
+	/** Section background band. */
+	surface?: "default" | "alt";
+	/** Compact top padding for sections directly under a page hero. */
+	tightTop?: boolean;
+	/**
+	 * Compact bottom padding for when the next section continues this
+	 * one's thought (e.g. a list that belongs to this section's copy).
+	 * Pair with `tight-top` on the follower to close the gap.
+	 */
+	tightBottom?: boolean;
+	id?: string;
+	className?: string;
+}
+
+/** The recurring two-column section: copy plus copy, or media plus copy. */
+export function SplitSection({
+	left,
+	right,
+	ratio = "even",
+	align = "start",
+	surface = "default",
+	tightTop = false,
+	tightBottom = false,
+	id,
+	className,
+}: SplitSectionProps) {
+	const sectionClasses = [
+		"section",
+		surface === "alt" && "surface-alt",
+		tightTop && "tight-top",
+		tightBottom && "tight-bottom",
+		className,
+	]
+		.filter(Boolean)
+		.join(" ");
+	const gridClasses = ["split", `ratio-${ratio}`, `align-${align}`].join(" ");
+	return (
+		<section className={sectionClasses} id={id}>
+			<div className={`wrap ${gridClasses}`}>
+				<div>{left}</div>
+				<div>{right}</div>
+			</div>
+		</section>
+	);
+}

package/src/sections/index.ts

@@ -0,0 +1,76 @@
+/**
+ * `@atelic-action/ui/sections`: the page scale sections a marketing site
+ * composes, moved here from template-marketing in 0.19.0 (ATE-643), with the
+ * `SiteConfig` contract they and `SiteShell` read. Their styles are
+ * `@atelic-action/ui/styles/sections.css`; a section imports no stylesheet of
+ * its own.
+ */
+export { isHoneypotFilled } from "../lib/honeypot";
+export { formatClock, formatHoursRange, isClosed } from "../lib/hours";
+export { type EventParams, trackEvent } from "../lib/trackEvent";
+export { BlogIndex, type BlogIndexItem, type BlogIndexProps } from "./BlogIndex";
+export { BlogPost, type BlogPostDoc, type BlogPostProps } from "./BlogPost";
+export {
+	type ComparisonRow,
+	type ComparisonState,
+	ComparisonTable,
+	type ComparisonTableProps,
+} from "./ComparisonTable";
+export { ContactForm, type ContactFormProps } from "./ContactForm";
+export {
+	ContactInfoCard,
+	type ContactInfoCardProps,
+	type ContactInfoCardSite,
+	type ContactPhone,
+} from "./ContactInfoCard";
+export { type Credential, CredentialList, type CredentialListProps } from "./CredentialList";
+export { CTABanner, type CTABannerCTA, type CTABannerProps } from "./CTABanner";
+export { CTASection, type CTASectionProps } from "./CTASection";
+export { type DeviceImage, DeviceShowcase, type DeviceShowcaseProps } from "./DeviceShowcase";
+export { ExpandList, type ExpandListItem, type ExpandListProps } from "./ExpandList";
+export {
+	FAQBrowser,
+	type FAQBrowserProps,
+	type FAQCategory,
+	type FAQCta,
+	type FAQEntry,
+} from "./FAQBrowser";
+export { FeatureDetail, type FeatureDetailProps } from "./FeatureDetail";
+export { type FeatureCard, FeatureGrid, type FeatureGridProps } from "./FeatureGrid";
+export { Gallery, type GalleryPhoto, type GalleryProps } from "./Gallery";
+export { Hero, type HeroCTA, type HeroProps, type HeroTrustItem } from "./Hero";
+export { HoursTable, type HoursTableProps } from "./HoursTable";
+export { JumpRail, type JumpRailItem, type JumpRailProps } from "./JumpRail";
+export { type LegalBlock, type LegalDoc, LegalPage, type LegalPageProps } from "./LegalPage";
+export {
+	LocationSection,
+	type LocationSectionProps,
+	type LocationSectionSite,
+} from "./LocationSection";
+export { type LocationEntry, Locations, type LocationsProps } from "./Locations";
+export { LogoMarquee, type LogoMarqueeProps } from "./LogoMarquee";
+export { MapEmbed, type MapEmbedProps, type MapEmbedSite } from "./MapEmbed";
+export { MediaBand, type MediaBandProps } from "./MediaBand";
+export { MenuList, type MenuListItem, type MenuListProps } from "./MenuList";
+export { PageHero, type PageHeroProps } from "./PageHero";
+export { type PressItem, PressQuotes, type PressQuotesProps, sortPress } from "./PressQuotes";
+export { PricingBand, type PricingBandProps } from "./PricingBand";
+export { PricingCard, type PricingCardProps } from "./PricingCard";
+export { type ProcessStep, ProcessSteps, type ProcessStepsProps } from "./ProcessSteps";
+export { ProfileCards, type ProfileCardsProps, type ProfileItem } from "./ProfileCards";
+export { type RevealSlide, RevealSlider, type RevealSliderProps } from "./RevealSlider";
+export { ReviewCarousel, type ReviewCarouselProps, type ReviewStat } from "./ReviewCarousel";
+export { type ReviewItem, ReviewWall, type ReviewWallProps } from "./ReviewWall";
+export { type SocialPhoto, SocialStrip, type SocialStripProps } from "./SocialStrip";
+export { SplitSection, type SplitSectionProps } from "./SplitSection";
+export type {
+	Address,
+	CTA,
+	Founder,
+	GateConfig,
+	NavItem,
+	OpeningHours,
+	SiteConfig,
+	SiteLink,
+	SocialLink,
+} from "./siteConfig";

package/src/sections/siteConfig.ts

@@ -0,0 +1,201 @@
+/**
+ * The contract between a marketing site and the package's sections, moved
+ * here from template-marketing in 0.19.0 (ATE-643).
+ *
+ * SiteShell maps this config onto the chrome (header, menu, footer, sticky
+ * CTA bar), the sections that need the business's facts take it (or only the
+ * keys they read) as their `site` prop, and a site's structured data helpers
+ * render from it, so standing up a new site means writing one of these plus
+ * a theme.css, never touching the components themselves.
+ */
+import type { SiteLink, SocialLink } from "../types";
+
+export type { SiteLink, SocialLink };
+
+export interface NavItem {
+	label: string;
+	to: string;
+}
+
+export interface CTA {
+	label: string;
+	href: string;
+	/** Opens in a new tab with rel="noopener" when true (e.g. a booking portal). */
+	external?: boolean;
+}
+
+export interface OpeningHours {
+	/** Row label as displayed, e.g. "Monday" or "Friday to Sunday". */
+	label: string;
+	/** Compact label for the footer, e.g. "Mon" or "Fri to Sun". */
+	labelShort: string;
+	/** schema.org day names covered by this row (empty for closed spans). */
+	days: string[];
+	/** 24 hour "HH:MM"; omit both for a closed row. */
+	opens?: string;
+	closes?: string;
+	/**
+	 * Display text for a row without posted times, e.g. "By appointment".
+	 * Renders wherever hours appear; defaults to "Closed". Rows without
+	 * opens/closes never emit an openingHoursSpecification, so a
+	 * by-appointment business states no invented hours in structured data.
+	 */
+	note?: string;
+}
+
+export interface Address {
+	street: string;
+	locality: string;
+	region: string;
+	postalCode: string;
+	country: string;
+}
+
+export interface Founder {
+	name: string;
+	jobTitle: string;
+	honorificSuffix?: string;
+	alumniOf?: string;
+}
+
+/**
+ * Copy for the access-gate login screen. Present in the config so the login
+ * page is themed and worded per client with no code edits. The gate itself is
+ * turned on by setting GATE_SESSION_SECRET on the Vercel project, not by this
+ * block (README.md, The Access Gate).
+ */
+export interface GateConfig {
+	/** Mono eyebrow above the headline, e.g. "Private preview". */
+	eyebrow?: string;
+	/** Login headline. */
+	headline: string;
+	/** Sub-lead under the headline. */
+	lead: string;
+	/** Fine-print attribution, e.g. "Built by Jane Maker". Defaults to `attribution`. */
+	builtBy?: string;
+	/** Contact email shown in the fine print. Defaults to `email`. */
+	contactEmail?: string;
+}
+
+export interface SiteConfig {
+	/** Brand name as rendered in the wordmark and structured data. */
+	name: string;
+	/**
+	 * Canonical URL, no trailing slash, e.g. "https://example.com". For a cut
+	 * with a `basePath` it is the full URL including the prefix
+	 * ("https://atwood.atelic.me/proto"), and the build fails if it does not
+	 * end with the base.
+	 */
+	url: string;
+	/**
+	 * The path prefix the site is served under, for a cut that does not own the
+	 * root of its host: a site build previewed at "/proto" on the business's
+	 * artifact host, which proxies those requests here. "" (the default) is the
+	 * root. `marketingConfig` reads it for Vite's `base` and the router's
+	 * `basepath`, and `SiteShell` hands it to `BasePathProvider`, which every
+	 * link and image a section renders reads through `useBasePath`.
+	 */
+	basePath?: string;
+	/** Default meta description and LocalBusiness description. */
+	description: string;
+	/** schema.org business types, most general first, e.g. ["MedicalBusiness", "PhysicalTherapy"]. */
+	schemaType: string[];
+	/**
+	 * The chrome identity. `src` is the mark image; omit it for a pure text
+	 * wordmark. `tile` renders a CSS glyph tile instead of an image (a dark
+	 * rounded square bearing the given character in the brand's own webfont,
+	 * with the accent bar beneath — an SVG-as-img mark cannot load webfonts,
+	 * so a lettered mark must be real DOM text to render true). `wordmark`
+	 * overrides the rendered wordmark text when it should differ from `name`
+	 * (e.g. a lowercase brand treatment); `run` appends the trailing fade bar
+	 * after the wordmark (the Eyebrow's signature, worn by the brand itself).
+	 */
+	logo: { src?: string; alt: string; tile?: string; wordmark?: string; run?: boolean };
+	/** Google Fonts stylesheet URL for the theme's font stack. */
+	fontsHref?: string;
+	nav: NavItem[];
+	/** The site's primary conversion action; rendered in nav, sticky bar, and menus. */
+	cta: CTA;
+	/** Omit for businesses with no public phone; call surfaces render nothing. */
+	phone?: { e164: string; display: string };
+	email: string;
+	address: Address;
+	geo?: { latitude: number; longitude: number };
+	mapEmbedUrl?: string;
+	mapLinkUrl?: string;
+	/**
+	 * Path to a static map screenshot (e.g. "/images/map.jpg"). When set, the
+	 * map renders as a lightweight image linking to directions instead of the
+	 * click-to-load live embed — one request, no third-party chain, and it
+	 * shows a real map on first paint.
+	 */
+	mapImage?: string;
+	hours: OpeningHours[];
+	/** Neighborhoods or cities served; feeds local SEO copy and structured data. */
+	serviceAreas: string[];
+	priceRange?: string;
+	/** Cuisine types for a Restaurant/FoodEstablishment (schema.org servesCuisine). */
+	servesCuisine?: string[];
+	founder?: Founder;
+	/** Names of offered services for structured data. */
+	offers?: string[];
+	/** Short brand paragraph for the footer. */
+	footerBlurb: string;
+	/** Extra footer nav links beyond the main nav (e.g. a patient portal). */
+	footerLinks?: SiteLink[];
+	/** Icon links (socials, the founder's own site) rendered in the footer brand column. */
+	socialLinks?: SocialLink[];
+	legalLinks?: SiteLink[];
+	/** Copyright attribution line suffix, e.g. "Dr. Alex Rivers, PT, DPT". */
+	attribution?: string;
+	/**
+	 * Footer wording overrides: the heading over the address column (defaults
+	 * to "Visit", which reads wrong for a practice with no storefront) and a
+	 * short closing note beside the copyright line ("Made with love in ...").
+	 */
+	footer?: {
+		contactHeading?: string;
+		note?: string;
+		/**
+		 * Set false to drop the name and address lines from the contact column
+		 * and leave only the phone and email under the heading (a practice with
+		 * no storefront has nothing to visit). Defaults to true.
+		 */
+		showAddress?: boolean;
+	};
+	ogImage?: string;
+	/** Profile URLs for the schema.org sameAs entity graph (socials, listings). */
+	sameAs?: string[];
+	/**
+	 * Robots meta override for every page (e.g. "noindex, nofollow" while the
+	 * site lives on a preview subdomain). Defaults to indexable.
+	 */
+	robots?: string;
+	/**
+	 * Analytics wiring. When `hubspotPortalId` is set, the HubSpot tracking code
+	 * loads on every page and records visits; because each prospect gets a
+	 * unique preview URL, a visit is attributable to that prospect. `hubspotRegion`
+	 * picks the loader host and defaults to "na1"; na2 portals (loggable via a
+	 * bcc.na2 address) load from js-na2.hs-scripts.com.
+	 *
+	 * `identify` ties a visit to a specific prospect: when the visit arrives with
+	 * `?k=<token>` (the token embedded in that prospect's outreach link), the
+	 * visitor is identified to HubSpot as `email`, so the visit attaches to that
+	 * prospect's contact timeline. Visits without the token stay anonymous.
+	 */
+	analytics?: {
+		/**
+		 * GA4 measurement id (e.g. "G-XXXXXXXXXX"). When set, the Google tag
+		 * loads on every page and the conversion events in
+		 * the site's own analytics module (the standard set in DEPLOY.md)
+		 * reach GA. Independent of the HubSpot wiring; a site can carry either
+		 * or both.
+		 */
+		googleTagId?: string;
+		hubspotPortalId?: string;
+		hubspotRegion?: "na1" | "na2" | "eu1";
+		identify?: { token: string; email: string };
+	};
+	/** Copy for the access-gate login screen (see GateConfig). */
+	gate?: GateConfig;
+}