xertica-ui 2.8.0 → 2.9.7

package/components/blocks/marketing/HowItWorksSteps.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, { bg: string; icon: string }> = {
+  primary: { bg: 'bg-primary/10', icon: 'text-primary' },
+  'chart-1': { bg: 'bg-[var(--chart-1)]/15', icon: 'text-[var(--chart-1)]' },
+  'chart-2': { bg: 'bg-[var(--chart-2)]/15', icon: 'text-[var(--chart-2)]' },
+  'chart-3': { bg: 'bg-[var(--chart-3)]/15', icon: 'text-[var(--chart-3)]' },
+  'chart-4': { bg: 'bg-[var(--chart-4)]/15', icon: 'text-[var(--chart-4)]' },
+  'chart-5': { bg: 'bg-[var(--chart-5)]/15', icon: 'text-[var(--chart-5)]' },
+  success: { bg: 'bg-success/10', icon: 'text-success' },
+  info: { bg: 'bg-info/10', icon: 'text-info' },
+  warning: { bg: 'bg-warning/10', icon: 'text-warning' },
+  destructive: { bg: 'bg-destructive/10', icon: 'text-destructive' },
+};
+
+export interface HowItWorksStepItem {
+  number?: string | number;
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
+  color?: BlockColor;
+}
+
+export interface HowItWorksStepsProps {
+  items: HowItWorksStepItem[];
+  className?: string;
+}
+
+/**
+ * Horizontal numbered process row — the horizontal counterpart to `EvidenceTimeline`.
+ *
+ * @description
+ * Renders a "how it works" style row of steps: each item gets a colored
+ * badge (icon or step number) above a title and description, laid out
+ * side by side in a responsive grid instead of `EvidenceTimeline`'s
+ * vertical connecting line.
+ *
+ * @ai-rules
+ * 1. Provide `icon` for a lucide-react icon in the badge, or `number` for a step label; if neither is set the 1-based index is used.
+ * 2. Each item's `color` maps to `colorTokens` — never hardcode colors.
+ * 3. There is no connecting line between steps (unlike `EvidenceTimeline`) — this avoids awkward line fragments when steps wrap to a new row on narrow screens.
+ * 4. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
+ */
+export function HowItWorksSteps({ items, className }: HowItWorksStepsProps) {
+  return (
+    <ol className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4', className)}>
+      {items.map((item, index) => {
+        const { bg, icon: iconColor } = colorTokens[item.color ?? 'primary'];
+
+        return (
+          <li key={index} className="flex flex-col gap-4">
+            <div
+              className={cn(
+                'flex size-10 shrink-0 items-center justify-center rounded-[var(--radius)] border border-current/20 md:size-12',
+                bg
+              )}
+            >
+              <span
+                className={cn(
+                  'flex items-center justify-center text-sm font-semibold [&>svg]:size-5',
+                  iconColor
+                )}
+              >
+                {item.icon ?? (item.number ?? index + 1)}
+              </span>
+            </div>
+
+            <div className="min-w-0">
+              <p className="font-semibold">{item.title}</p>
+              <p className="mt-2 text-sm opacity-70">{item.description}</p>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/components/blocks/marketing/LogoCloud.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ImageWithFallback } from '../../figma/ImageWithFallback';
+import { cn } from '../../shared/utils';
+
+export interface LogoCloudLogo {
+  src: string;
+  alt: string;
+}
+
+export interface LogoCloudProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  logos: LogoCloudLogo[];
+}
+
+/**
+ * A "trusted by" row of partner or customer logos.
+ *
+ * @description
+ * Renders an optional centered, small uppercase muted title above a
+ * responsive, wrapping row of grayscale logos that colorize on hover.
+ *
+ * @ai-rules
+ * 1. Provide `logos` as an array of `{ src, alt }` — each is rendered with `ImageWithFallback`.
+ * 2. `title` is optional; omit it to render the logo row alone.
+ * 3. Logos are token-driven (grayscale/opacity via utilities) so they stay legible across all themes and dark mode.
+ */
+export function LogoCloud({ title, logos, className, ...props }: LogoCloudProps) {
+  return (
+    <div className={cn('w-full text-center', className)} {...props}>
+      {title && (
+        <p className="mb-6 text-xs font-medium uppercase tracking-wider text-muted-foreground sm:mb-8">
+          {title}
+        </p>
+      )}
+      <div className="flex flex-wrap items-center justify-center gap-8 md:gap-12">
+        {logos.map((logo, index) => (
+          <ImageWithFallback
+            key={`${logo.alt}-${index}`}
+            src={logo.src}
+            alt={logo.alt}
+            className="h-6 w-auto object-contain grayscale opacity-60 transition-all hover:opacity-100 hover:grayscale-0 md:h-8"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/blocks/marketing/MarketingFooter.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+/**
+ * A single link rendered inside a footer column or the legal links row.
+ */
+export interface MarketingFooterLink {
+  label: string;
+  href: string;
+}
+
+/**
+ * A labeled group of links rendered as one column of the footer.
+ */
+export interface MarketingFooterColumn {
+  heading: string;
+  links: MarketingFooterLink[];
+}
+
+export interface MarketingFooterProps {
+  /** Logo slot — pass a rendered logo element (e.g. `<XerticaLogo />`). */
+  logo: React.ReactNode;
+  /** Short description shown under the logo in the first column. */
+  tagline?: string;
+  /** Link columns rendered alongside the logo column. */
+  columns: MarketingFooterColumn[];
+  /** Small print links (Privacy, Terms, etc.) shown on the bottom row. */
+  legalLinks?: MarketingFooterLink[];
+  /** Copyright text shown on the bottom row. */
+  copyright?: string;
+  className?: string;
+}
+
+/** Maps logo column + link columns to a static grid-cols class so Tailwind's JIT scanner can find it (capped at 6). */
+const gridColsClasses: Record<number, string> = {
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+};
+
+/**
+ * Multi-column site footer for public marketing pages.
+ *
+ * @description
+ * Pairs with `MarketingNavbar` to bookend a marketing page: a logo/tagline
+ * cell followed by an arbitrary number of link columns, plus a bottom bar
+ * with copyright and legal links.
+ *
+ * @ai-rules
+ * 1. Pass the logo as a rendered node via the `logo` prop — do not couple this file to any specific logo component.
+ * 2. Pass at most 5 `columns` — the logo cell plus columns are capped at a 6-column desktop grid.
+ * 3. `legalLinks` and `copyright` are optional; the bottom row still renders with just whichever is provided.
+ */
+export function MarketingFooter({
+  logo,
+  tagline,
+  columns,
+  legalLinks,
+  copyright,
+  className,
+}: MarketingFooterProps) {
+  const resolvedCols = Math.min(Math.max(columns.length + 1, 2), 6);
+
+  return (
+    <footer className={cn('border-t border-border bg-card', className)}>
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className={cn('grid grid-cols-2 gap-8 py-12', gridColsClasses[resolvedCols])}>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex items-center">{logo}</div>
+            {tagline && <p className="mt-3 max-w-xs text-sm text-muted-foreground">{tagline}</p>}
+          </div>
+
+          {columns.map(column => (
+            <div key={column.heading}>
+              <h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">{column.heading}</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                {column.links.map(link => (
+                  <li key={link.href}>
+                    <a href={link.href} className="transition-colors hover:text-foreground">
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex flex-col items-center justify-between gap-4 border-t border-border pt-6 pb-8 text-xs text-muted-foreground md:flex-row">
+          {copyright && <p>{copyright}</p>}
+
+          {legalLinks && legalLinks.length > 0 && (
+            <ul className="flex flex-wrap items-center gap-4">
+              {legalLinks.map(link => (
+                <li key={link.href}>
+                  <a href={link.href} className="transition-colors hover:text-foreground">
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+}

package/components/blocks/marketing/MarketingNavbar.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Menu, X } from 'lucide-react';
+import { Button } from '../../ui/button';
+import { LanguageSelector } from '../../brand/language-selector';
+import { cn } from '../../shared/utils';
+
+/**
+ * A single navigation link rendered in the navbar.
+ */
+export interface MarketingNavLink {
+  label: string;
+  href: string;
+}
+
+/**
+ * A call-to-action button rendered on the right side of the navbar.
+ */
+export interface MarketingNavbarCta {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface MarketingNavbarProps {
+  /** Logo slot — pass a rendered logo element (e.g. `<XerticaLogo />`). */
+  logo: React.ReactNode;
+  /** Primary navigation links, shown inline on desktop and stacked on mobile. */
+  links: MarketingNavLink[];
+  /** Primary call-to-action, rendered as a solid `Button`. */
+  cta?: MarketingNavbarCta;
+  /** Secondary call-to-action, rendered as an outline `Button`. */
+  secondaryCta?: MarketingNavbarCta;
+  /** Shows the design system's language selector. Defaults to `true` — `LanguageSelector` auto-hides itself when only one language is configured. */
+  showLanguageSelector?: boolean;
+  /** Accessible label for the mobile menu trigger when closed. */
+  openMenuLabel?: string;
+  /** Accessible label for the mobile menu trigger when open. */
+  closeMenuLabel?: string;
+  className?: string;
+}
+
+/**
+ * Sticky header for public marketing pages.
+ *
+ * @description
+ * Distinct from the app-shell `Header` (used inside the authenticated product layout):
+ * this navbar is for public-facing marketing sites, with a logo slot, inline nav links,
+ * and up to two CTA buttons. Collapses into a full-width dropdown panel on mobile.
+ *
+ * @ai-rules
+ * 1. Pass the logo as a rendered node via the `logo` prop — do not couple this file to any specific logo component.
+ * 2. Use `cta` for the primary action (solid button) and `secondaryCta` for a lower-emphasis action (outline button).
+ * 3. Each link/CTA needs either `href` (renders an `<a>`) or `onClick` — CTAs support both.
+ */
+export function MarketingNavbar({
+  logo,
+  links,
+  cta,
+  secondaryCta,
+  showLanguageSelector = true,
+  openMenuLabel = 'Open menu',
+  closeMenuLabel = 'Close menu',
+  className,
+}: MarketingNavbarProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const closeMenu = () => setIsOpen(false);
+
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-50 w-full border-b border-border bg-card/80 backdrop-blur',
+        className
+      )}
+    >
+      <nav className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+        {/* Logo */}
+        <div className="flex shrink-0 items-center">{logo}</div>
+
+        {/* Desktop nav links */}
+        <div className="hidden flex-1 items-center justify-center gap-8 md:flex">
+          {links.map(link => (
+            <a
+              key={link.href}
+              href={link.href}
+              className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+
+        {/* Desktop CTAs */}
+        <div className="hidden shrink-0 items-center gap-3 md:flex">
+          {showLanguageSelector && <LanguageSelector variant="minimal" showIcon={false} />}
+          {secondaryCta && (
+            <Button
+              variant="outline"
+              asChild={!!secondaryCta.href}
+              onClick={secondaryCta.onClick}
+            >
+              {secondaryCta.href ? (
+                <a href={secondaryCta.href}>{secondaryCta.label}</a>
+              ) : (
+                secondaryCta.label
+              )}
+            </Button>
+          )}
+          {cta && (
+            <Button variant="secondary" asChild={!!cta.href} onClick={cta.onClick}>
+              {cta.href ? <a href={cta.href}>{cta.label}</a> : cta.label}
+            </Button>
+          )}
+        </div>
+
+        {/* Mobile menu trigger */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          onClick={() => setIsOpen(prev => !prev)}
+          aria-label={isOpen ? closeMenuLabel : openMenuLabel}
+          aria-expanded={isOpen}
+        >
+          {isOpen ? <X className="size-5" /> : <Menu className="size-5" />}
+        </Button>
+      </nav>
+
+      {/* Mobile dropdown panel */}
+      {isOpen && (
+        <div className="border-t border-border bg-card/95 backdrop-blur md:hidden">
+          <div className="flex flex-col gap-1 px-4 py-4 sm:px-6">
+            {links.map(link => (
+              <a
+                key={link.href}
+                href={link.href}
+                onClick={closeMenu}
+                className="rounded-[var(--radius)] px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                {link.label}
+              </a>
+            ))}
+
+            {showLanguageSelector && (
+              <div className="mt-2 flex border-t border-border pt-4">
+                <LanguageSelector variant="minimal" showIcon={false} />
+              </div>
+            )}
+
+            {(secondaryCta || cta) && (
+              <div className="mt-2 flex flex-col gap-2 border-t border-border pt-4">
+                {secondaryCta && (
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    asChild={!!secondaryCta.href}
+                    onClick={() => {
+                      closeMenu();
+                      secondaryCta.onClick?.();
+                    }}
+                  >
+                    {secondaryCta.href ? (
+                      <a href={secondaryCta.href}>{secondaryCta.label}</a>
+                    ) : (
+                      secondaryCta.label
+                    )}
+                  </Button>
+                )}
+                {cta && (
+                  <Button
+                    variant="secondary"
+                    className="w-full"
+                    asChild={!!cta.href}
+                    onClick={() => {
+                      closeMenu();
+                      cta.onClick?.();
+                    }}
+                  >
+                    {cta.href ? <a href={cta.href}>{cta.label}</a> : cta.label}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}

package/components/blocks/marketing/PillBadge.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, { border: string; tint: string; icon: string }> = {
+  primary: { border: 'border-primary', tint: 'bg-primary/5', icon: 'text-primary' },
+  'chart-1': {
+    border: 'border-[var(--chart-1)]',
+    tint: 'bg-[var(--chart-1)]/5',
+    icon: 'text-[var(--chart-1)]',
+  },
+  'chart-2': {
+    border: 'border-[var(--chart-2)]',
+    tint: 'bg-[var(--chart-2)]/5',
+    icon: 'text-[var(--chart-2)]',
+  },
+  'chart-3': {
+    border: 'border-[var(--chart-3)]',
+    tint: 'bg-[var(--chart-3)]/5',
+    icon: 'text-[var(--chart-3)]',
+  },
+  'chart-4': {
+    border: 'border-[var(--chart-4)]',
+    tint: 'bg-[var(--chart-4)]/5',
+    icon: 'text-[var(--chart-4)]',
+  },
+  'chart-5': {
+    border: 'border-[var(--chart-5)]',
+    tint: 'bg-[var(--chart-5)]/5',
+    icon: 'text-[var(--chart-5)]',
+  },
+  success: { border: 'border-success', tint: 'bg-success/5', icon: 'text-success' },
+  info: { border: 'border-info', tint: 'bg-info/5', icon: 'text-info' },
+  warning: { border: 'border-warning', tint: 'bg-warning/5', icon: 'text-warning' },
+  destructive: { border: 'border-destructive', tint: 'bg-destructive/5', icon: 'text-destructive' },
+};
+
+export interface PillBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  color?: BlockColor;
+}
+
+/**
+ * Small outlined tag used as "eyebrow" text above marketing headlines.
+ *
+ * @description
+ * A compact, token-driven chip (e.g. "AI ADOPTION PLATFORM") that pairs an
+ * optional leading icon with short uppercase text, tinted via the shared
+ * color-chip palette so it reskins across all Xertica-ui themes.
+ *
+ * @ai-rules
+ * 1. Keep `children` short — this is an eyebrow label, not a paragraph.
+ * 2. Pass `icon` as a small lucide-react icon element; it is sized automatically.
+ * 3. Use `color` to match the section's accent; defaults to `primary`.
+ */
+export function PillBadge({
+  children,
+  icon,
+  color = 'primary',
+  className,
+  ...props
+}: PillBadgeProps) {
+  const { border, tint, icon: textColor } = colorTokens[color];
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide',
+        border,
+        tint,
+        textColor,
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <span className="flex items-center [&>svg]:size-3.5" aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {children}
+    </span>
+  );
+}

package/components/blocks/marketing/SectionHeading.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, string> = {
+  primary: 'bg-primary',
+  'chart-1': 'bg-[var(--chart-1)]',
+  'chart-2': 'bg-[var(--chart-2)]',
+  'chart-3': 'bg-[var(--chart-3)]',
+  'chart-4': 'bg-[var(--chart-4)]',
+  'chart-5': 'bg-[var(--chart-5)]',
+  success: 'bg-success',
+  info: 'bg-info',
+  warning: 'bg-warning',
+  destructive: 'bg-destructive',
+};
+
+export interface SectionHeadingProps {
+  title: string;
+  description?: string;
+  /** Use 'sidebar' when this heading sits on a `bg-sidebar` surface (e.g. Methodology). */
+  tone?: 'default' | 'sidebar';
+  /** Optional small colored bar rendered under the title. Omit for no bar. */
+  accentColor?: BlockColor;
+  className?: string;
+}
+
+/**
+ * Plain section header used to introduce a landing-page section.
+ *
+ * @description
+ * Renders the section title (and optional description), with an optional
+ * small colored bar under the title.
+ *
+ * @ai-rules
+ * 1. Use `tone="sidebar"` when this heading renders on a `bg-sidebar` surface — the default tone's tokens are not guaranteed to contrast there.
+ * 2. `accentColor` is optional — omit it for a plain title with no bar; when set, it maps to `colorTokens` and never hardcodes a color.
+ */
+export function SectionHeading({
+  title,
+  description,
+  tone = 'default',
+  accentColor,
+  className,
+}: SectionHeadingProps) {
+  const isSidebar = tone === 'sidebar';
+
+  return (
+    <div className={className}>
+      <h2 className={cn('text-2xl font-bold md:text-3xl', !isSidebar && 'text-foreground')}>
+        {title}
+      </h2>
+      {accentColor && (
+        <span
+          aria-hidden="true"
+          className={cn('mt-3 block h-1 w-10 rounded-full', colorTokens[accentColor])}
+        />
+      )}
+      {description && (
+        <p
+          className={cn(
+            'mt-6 max-w-2xl text-base',
+            isSidebar ? 'text-sidebar-foreground/70' : 'text-muted-foreground'
+          )}
+        >
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}