@trackany-device/components 1.0.0

package/src/components/cms/sections/hero-section.tsx

@@ -0,0 +1,180 @@
+import { SectionBackground } from '../section-bg';
+import type { CmsBackground } from '../section-bg';
+import { SectionButtons } from '../section-button';
+import type { CmsButton } from '../section-button';
+import { cn } from '../../../lib/utils';
+
+export type HeroContent = {
+    size?: 'full' | 'half' | 'third' | null;
+    alignment?: 'left' | 'center' | null;
+    eyebrow?: string | null;
+    title?: string | null;
+    title_highlight?: string | null;
+    subtitle?: string | null;
+    body?: string | null;
+    bg?: CmsBackground | null;
+    buttons?: CmsButton[] | null;
+};
+
+const SIZE_CLASSES: Record<string, string> = {
+    full: 'min-h-[88vh]',
+    half: 'min-h-[60vh]',
+    third: 'min-h-[40vh]',
+};
+
+/**
+ * Hero section — the universal page header. Three size variants
+ * (full / half / third), five background modes, optional eyebrow,
+ * highlighted title fragment, subtitle, body, and a buttons[] CTA row.
+ *
+ * Light-on-dark vs dark-on-light is decided automatically by the bg
+ * mode: image, video, map, and gradient default to light text; color
+ * uses the matching foreground token.
+ */
+export function HeroSection({
+    content,
+    identifier,
+}: {
+    content?: HeroContent;
+    identifier?: string | null;
+}) {
+    const size = content?.size ?? 'half';
+    const alignment = content?.alignment ?? 'center';
+    const bg = content?.bg ?? { kind: 'color', color_token: 'muted' };
+    const isDarkSurface = ['image', 'video', 'map', 'gradient'].includes(
+        bg.kind ?? '',
+    );
+    const isMapSurface = bg.kind === 'map';
+    const isPrimaryColor =
+        bg.kind === 'color' && (bg.color_token ?? 'primary') === 'primary';
+    const textColor =
+        isDarkSurface || isPrimaryColor ? 'text-white' : 'text-foreground';
+    const supportColor =
+        isDarkSurface || isPrimaryColor
+            ? 'text-white/85'
+            : 'text-muted-foreground';
+    const eyebrowColor =
+        isDarkSurface || isPrimaryColor
+            ? 'text-white/70'
+            : 'text-muted-foreground';
+
+    const title = content?.title ?? '';
+    const highlight = content?.title_highlight?.trim();
+    const titleNode =
+        highlight && title.includes(highlight)
+            ? renderHighlightedTitle(
+                  title,
+                  highlight,
+                  isDarkSurface || isPrimaryColor,
+              )
+            : title;
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className={cn(
+                'relative isolate flex w-full items-center overflow-hidden',
+                SIZE_CLASSES[size] ?? SIZE_CLASSES.half,
+            )}
+        >
+            <SectionBackground bg={bg} />
+
+            <div
+                className={cn(
+                    'relative mx-auto w-full max-w-5xl px-6 py-16 sm:py-20 lg:py-24',
+                    alignment === 'center' ? 'text-center' : 'text-left',
+                    // On a live map background the moving tiles can otherwise
+                    // wash out the text. A subtle frosted card behind the
+                    // copy keeps the title and CTAs readable on any region.
+                    isMapSurface &&
+                        'rounded-3xl bg-black/35 ring-1 ring-white/10 backdrop-blur-sm',
+                )}
+            >
+                {content?.eyebrow ? (
+                    <p
+                        className={cn(
+                            'mb-4 text-xs font-medium tracking-widest uppercase',
+                            eyebrowColor,
+                        )}
+                    >
+                        {content.eyebrow}
+                    </p>
+                ) : null}
+
+                {title ? (
+                    <h1
+                        className={cn(
+                            'text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl',
+                            textColor,
+                            isDarkSurface &&
+                                '[text-shadow:0_2px_24px_rgba(0,0,0,0.4)]',
+                        )}
+                    >
+                        {titleNode}
+                    </h1>
+                ) : null}
+
+                {content?.subtitle ? (
+                    <p
+                        className={cn(
+                            'mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-pretty sm:text-xl',
+                            supportColor,
+                            alignment === 'left' && 'mx-0',
+                            isDarkSurface &&
+                                '[text-shadow:0_1px_12px_rgba(0,0,0,0.5)]',
+                        )}
+                    >
+                        {content.subtitle}
+                    </p>
+                ) : null}
+
+                {content?.body ? (
+                    <p
+                        className={cn(
+                            'mx-auto mt-4 max-w-2xl text-base leading-relaxed text-pretty',
+                            supportColor,
+                            alignment === 'left' && 'mx-0',
+                        )}
+                    >
+                        {content.body}
+                    </p>
+                ) : null}
+
+                {content?.buttons && content.buttons.length > 0 ? (
+                    <div className="mt-10">
+                        <SectionButtons
+                            buttons={content.buttons}
+                            align={alignment}
+                            size="lg"
+                        />
+                    </div>
+                ) : null}
+            </div>
+        </section>
+    );
+}
+
+function renderHighlightedTitle(
+    title: string,
+    highlight: string,
+    onDark: boolean,
+) {
+    const idx = title.indexOf(highlight);
+
+    if (idx === -1) {
+        return title;
+    }
+
+    const before = title.slice(0, idx);
+    const after = title.slice(idx + highlight.length);
+
+    return (
+        <>
+            {before}
+            <span className={cn(onDark ? 'text-primary' : 'text-primary')}>
+                {highlight}
+            </span>
+            {after}
+        </>
+    );
+}

package/src/components/cms/sections/solutions-with-filter-section.tsx

@@ -0,0 +1,234 @@
+'use client';
+import { PlatformLink } from '../../../platform/context';
+
+import { ArrowRight, Search } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { Card } from '../../ui/card';
+import { Icon } from '../../ui/icon';
+import { Input } from '../../ui/input';
+import { lucideIcon } from '../../../lib/lucide-icon-map';
+import { cn } from '../../../lib/utils';
+
+import type { SolutionCard } from './featured-solutions-grid-section';
+
+export type SolutionsWithFilterContent = {
+    title?: string | null;
+    subtitle?: string | null;
+    items_per_page?: number | null;
+    filters?: {
+        industries?: { label: string; value: string }[];
+        categories?: { label: string; value: string }[];
+    } | null;
+};
+
+/**
+ * Solutions list with client-side filters. Reads `solutions` shared
+ * prop. Provides a search input and optional pill-style facet filters
+ * (industries / categories). Pagination is "Load more" on top of the
+ * filtered list.
+ */
+export function SolutionsWithFilterSection({
+    content,
+    solutions,
+    identifier,
+}: {
+    content?: SolutionsWithFilterContent;
+    solutions?: SolutionCard[];
+    identifier?: string | null;
+}) {
+    const perPage = content?.items_per_page ?? 12;
+
+    const [query, setQuery] = useState('');
+    const [activeFilter, setActiveFilter] = useState<string | null>(null);
+    const [visible, setVisible] = useState(perPage);
+
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+
+        return (solutions ?? []).filter((s) => {
+            if (
+                q &&
+                !`${s.title} ${s.description ?? ''}`.toLowerCase().includes(q)
+            ) {
+                return false;
+            }
+
+            // Filter facet stored on solution's metadata (best-effort match).
+            // For now, simple title-contains match against the facet value
+            // so seeded content "just works" without a schema change.
+            if (
+                activeFilter &&
+                !s.title.toLowerCase().includes(activeFilter.toLowerCase())
+            ) {
+                return false;
+            }
+
+            return true;
+        });
+    }, [solutions, query, activeFilter]);
+
+    const shown = filtered.slice(0, visible);
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className="bg-background py-20 sm:py-24"
+        >
+            <div className="mx-auto max-w-6xl px-6">
+                {(content?.title || content?.subtitle) && (
+                    <header className="mb-10 max-w-2xl">
+                        {content?.title && (
+                            <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+                                {content.title}
+                            </h2>
+                        )}
+                        {content?.subtitle && (
+                            <p className="mt-3 text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
+                                {content.subtitle}
+                            </p>
+                        )}
+                    </header>
+                )}
+
+                <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="relative w-full sm:max-w-xs">
+                        <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                            value={query}
+                            onChange={(e) => {
+                                setQuery(e.target.value);
+                                setVisible(perPage);
+                            }}
+                            placeholder="Search solutions"
+                            className="pl-9"
+                        />
+                    </div>
+
+                    {content?.filters?.industries &&
+                        content.filters.industries.length > 0 && (
+                            <FilterPills
+                                options={content.filters.industries}
+                                active={activeFilter}
+                                onChange={(v) => {
+                                    setActiveFilter(v);
+                                    setVisible(perPage);
+                                }}
+                            />
+                        )}
+                </div>
+
+                {shown.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                        {shown.map((s) => (
+                            <SolutionCardCell key={s.id} solution={s} />
+                        ))}
+                    </div>
+                ) : (
+                    <p className="rounded-xl border border-dashed border-border bg-muted/30 py-16 text-center text-sm text-muted-foreground">
+                        No solutions match your filters.
+                    </p>
+                )}
+
+                {visible < filtered.length && (
+                    <div className="mt-8 text-center">
+                        <button
+                            type="button"
+                            onClick={() => setVisible((v) => v + perPage)}
+                            className="text-sm font-medium text-primary hover:underline"
+                        >
+                            Load {Math.min(perPage, filtered.length - visible)}{' '}
+                            more
+                        </button>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}
+
+function FilterPills({
+    options,
+    active,
+    onChange,
+}: {
+    options: { label: string; value: string }[];
+    active: string | null;
+    onChange: (v: string | null) => void;
+}) {
+    return (
+        <div className="flex flex-wrap gap-1.5">
+            <FilterPillButton
+                label="All"
+                isActive={active === null}
+                onClick={() => onChange(null)}
+            />
+            {options.map((o) => (
+                <FilterPillButton
+                    key={o.value}
+                    label={o.label}
+                    isActive={active === o.value}
+                    onClick={() => onChange(o.value)}
+                />
+            ))}
+        </div>
+    );
+}
+
+function FilterPillButton({
+    label,
+    isActive,
+    onClick,
+}: {
+    label: string;
+    isActive: boolean;
+    onClick: () => void;
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={cn(
+                'rounded-full border px-3 py-1 text-xs font-medium transition-colors',
+                isActive
+                    ? 'border-primary bg-primary text-primary-foreground'
+                    : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground',
+            )}
+        >
+            {label}
+        </button>
+    );
+}
+
+function SolutionCardCell({ solution }: { solution: SolutionCard }) {
+    const Icon$ = lucideIcon(solution.icon_name);
+    const href =
+        solution.cta_href ??
+        (solution.slug ? `/solutions/${solution.slug}` : null);
+
+    const card = (
+        <Card className="group flex h-full flex-col border-border/60 bg-card p-6 transition-colors hover:border-primary/40">
+            {Icon$ && (
+                <div className="mb-4 inline-flex size-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                    <Icon iconNode={Icon$} className="size-5" />
+                </div>
+            )}
+            <h3 className="text-base font-semibold text-card-foreground">
+                {solution.title}
+            </h3>
+            {solution.description && (
+                <p className="mt-2 line-clamp-3 flex-1 text-sm leading-relaxed text-muted-foreground">
+                    {solution.description}
+                </p>
+            )}
+            {href && (
+                <div className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary group-hover:gap-2">
+                    Explore
+                    <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-0.5" />
+                </div>
+            )}
+        </Card>
+    );
+
+    return href ? <PlatformLink href={href}>{card}</PlatformLink> : card;
+}

package/src/components/cms/sections/text-section.tsx

@@ -0,0 +1,77 @@
+import { cn } from '../../../lib/utils';
+
+export type TextSectionContent = {
+    eyebrow?: string | null;
+    title?: string | null;
+    alignment?: 'left' | 'center' | null;
+    max_width?: 'narrow' | 'medium' | 'wide' | 'full' | null;
+    body_html?: string | null;
+};
+
+const MAX_WIDTH: Record<string, string> = {
+    narrow: 'max-w-2xl',
+    medium: 'max-w-3xl',
+    wide: 'max-w-5xl',
+    full: 'max-w-none',
+};
+
+/**
+ * Long-form prose block. Renders TipTap (Filament RichEditor) output as
+ * sanitised HTML. Use `prose` typography classes for readable paragraphs,
+ * headings, lists, blockquotes, code blocks — without per-element styling.
+ *
+ * SECURITY: body_html comes from authenticated /admin authors. Filament's
+ * RichEditor sanitises on save (its allowed tags/attributes are conservative
+ * by default). If we ever expose richtext to untrusted submitters, swap to
+ * a server-side sanitiser before render.
+ */
+export function TextSection({
+    content,
+    identifier,
+}: {
+    content?: TextSectionContent;
+    identifier?: string | null;
+}) {
+    const alignment = content?.alignment ?? 'left';
+    const maxWidth = MAX_WIDTH[content?.max_width ?? 'narrow'];
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className="bg-background py-16 sm:py-20"
+        >
+            <div
+                className={cn(
+                    'mx-auto px-6',
+                    maxWidth,
+                    alignment === 'center' && 'text-center',
+                )}
+            >
+                {content?.eyebrow && (
+                    <p className="mb-3 text-xs font-medium tracking-widest text-muted-foreground uppercase">
+                        {content.eyebrow}
+                    </p>
+                )}
+
+                {content?.title && (
+                    <h2 className="mb-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+                        {content.title}
+                    </h2>
+                )}
+
+                {content?.body_html && (
+                    <div
+                        className={cn(
+                            'prose max-w-none prose-neutral dark:prose-invert',
+                            'prose-headings:font-semibold prose-headings:tracking-tight',
+                            'prose-a:text-primary prose-a:no-underline hover:prose-a:underline',
+                            'prose-strong:text-foreground',
+                            alignment === 'center' && 'mx-auto',
+                        )}
+                        dangerouslySetInnerHTML={{ __html: content.body_html }}
+                    />
+                )}
+            </div>
+        </section>
+    );
+}