@zoyth/simple-site-framework 1.0.0

package/dist/components/index.d.ts

@@ -0,0 +1,3936 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes, ReactElement, ComponentType, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { FieldError } from 'react-hook-form';
+import { LucideProps } from 'lucide-react';
+
+/**
+ * Available animation types for AnimatedSection
+ * - fadeInUp: Fades in while moving up
+ * - fadeInDown: Fades in while moving down
+ * - fadeInLeft: Fades in while moving from left
+ * - fadeInRight: Fades in while moving from right
+ * - scaleIn: Fades in while scaling up
+ * - slideInLeft: Slides in from left
+ * - slideInRight: Slides in from right
+ * - none: No animation (used when prefers-reduced-motion is enabled)
+ */
+type AnimationType = 'fadeInUp' | 'fadeInDown' | 'fadeInLeft' | 'fadeInRight' | 'scaleIn' | 'slideInLeft' | 'slideInRight' | 'none';
+interface AnimatedSectionProps {
+    /** Content to animate */
+    children: ReactNode;
+    /** Animation type to use @default 'fadeInUp' */
+    animation?: AnimationType;
+    /** Delay before animation starts in seconds @default 0 */
+    delay?: number;
+    /** Animation duration in seconds @default 0.6 */
+    duration?: number;
+    /** Delay between animating children when using AnimatedItem @default 0 */
+    stagger?: number;
+    /** Percentage of element that must be visible to trigger (0-1) @default 0.1 */
+    threshold?: number;
+    /** Whether animation should only happen once @default true */
+    triggerOnce?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * AnimatedSection - Wrapper component for scroll-triggered entrance animations
+ *
+ * Automatically animates children when they scroll into view. Respects user's
+ * prefers-reduced-motion setting for accessibility.
+ *
+ * @example
+ * // Basic usage
+ * <AnimatedSection animation="fadeInUp">
+ *   <h1>This will fade in from below</h1>
+ * </AnimatedSection>
+ *
+ * @example
+ * // With stagger effect for children
+ * <AnimatedSection animation="fadeInLeft" stagger={0.1}>
+ *   <AnimatedItem><div>Item 1</div></AnimatedItem>
+ *   <AnimatedItem><div>Item 2</div></AnimatedItem>
+ *   <AnimatedItem><div>Item 3</div></AnimatedItem>
+ * </AnimatedSection>
+ *
+ * @example
+ * // Delayed animation
+ * <AnimatedSection animation="scaleIn" delay={0.3} duration={0.8}>
+ *   <Card>Content</Card>
+ * </AnimatedSection>
+ */
+declare function AnimatedSection({ children, animation, delay, duration, stagger, threshold, triggerOnce, className }: AnimatedSectionProps): react_jsx_runtime.JSX.Element;
+/**
+ * AnimatedItem - Individual item to be animated within AnimatedSection
+ *
+ * Use as children of AnimatedSection when you want stagger animations.
+ * Each AnimatedItem will animate in sequence based on the stagger delay.
+ *
+ * @example
+ * <AnimatedSection stagger={0.1}>
+ *   <AnimatedItem><Feature1 /></AnimatedItem>
+ *   <AnimatedItem><Feature2 /></AnimatedItem>
+ *   <AnimatedItem><Feature3 /></AnimatedItem>
+ * </AnimatedSection>
+ */
+declare function AnimatedItem({ children, className }: {
+    /** Content to animate */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+interface Toast {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface ToastContextType {
+    toasts: Toast[];
+    addToast: (toast: Omit<Toast, 'id'>) => void;
+    removeToast: (id: string) => void;
+    success: (message: string, options?: Omit<Toast, 'id' | 'type' | 'message'>) => void;
+    error: (message: string, options?: Omit<Toast, 'id' | 'type' | 'message'>) => void;
+    warning: (message: string, options?: Omit<Toast, 'id' | 'type' | 'message'>) => void;
+    info: (message: string, options?: Omit<Toast, 'id' | 'type' | 'message'>) => void;
+}
+/**
+ * Hook to access toast notifications
+ *
+ * @example
+ * const toast = useToast()
+ * toast.success('Changes saved!')
+ * toast.error('Failed to submit form')
+ */
+declare function useToast(): ToastContextType;
+interface ToastProviderProps {
+    /** Content to wrap */
+    children: ReactNode;
+    /** Position of toast notifications @default 'top-right' */
+    position?: ToastPosition;
+    /** Maximum number of toasts to show at once @default 5 */
+    maxToasts?: number;
+}
+/**
+ * ToastProvider - Context provider for toast notifications
+ *
+ * Wrap your app with this provider to enable toast notifications.
+ *
+ * @example
+ * <ToastProvider position="top-right">
+ *   <YourApp />
+ * </ToastProvider>
+ */
+declare function ToastProvider({ children, position, maxToasts }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Simple toast function for quick notifications
+ * Note: Requires ToastProvider in parent tree
+ *
+ * @example
+ * import { toast } from '@zoyth/simple-site-framework/components'
+ *
+ * toast.success('Saved!')
+ * toast.error('Failed to save')
+ * toast.warning('Unsaved changes')
+ * toast.info('New features available', {
+ *   duration: 8000,
+ *   action: { label: 'Learn more', onClick: () => {} }
+ * })
+ */
+declare const toast: {
+    success: (message: string, options?: Omit<Toast, "id" | "type" | "message">) => void;
+    error: (message: string, options?: Omit<Toast, "id" | "type" | "message">) => void;
+    warning: (message: string, options?: Omit<Toast, "id" | "type" | "message">) => void;
+    info: (message: string, options?: Omit<Toast, "id" | "type" | "message">) => void;
+};
+
+type SpinnerStyle = 'circle' | 'dots' | 'pulse' | 'ring';
+type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+interface LoadingSpinnerProps {
+    /** Spinner animation style @default 'circle' */
+    style?: SpinnerStyle;
+    /** Spinner size @default 'md' */
+    size?: SpinnerSize;
+    /** Optional loading text to display */
+    text?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * LoadingSpinner - Animated loading indicator
+ *
+ * @example
+ * <LoadingSpinner size="lg" text="Loading..." />
+ *
+ * @example
+ * // Inline spinner
+ * <LoadingSpinner size="sm" style="dots" />
+ */
+declare function LoadingSpinner({ style, size, text, className }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare namespace LoadingSpinner {
+    var Overlay: typeof LoadingOverlay;
+}
+interface LoadingOverlayProps {
+    /** Content to display in overlay */
+    children: React.ReactNode;
+    /** Spinner style @default 'circle' */
+    style?: SpinnerStyle;
+    /** Blur backdrop @default true */
+    blur?: boolean;
+}
+/**
+ * LoadingOverlay - Full-page loading overlay
+ *
+ * @example
+ * <LoadingSpinner.Overlay>
+ *   Processing payment...
+ * </LoadingSpinner.Overlay>
+ */
+declare function LoadingOverlay({ children, style, blur }: LoadingOverlayProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonAnimation = 'pulse' | 'shimmer';
+interface SkeletonProps {
+    /** Width of skeleton (CSS value) @default '100%' */
+    width?: string | number;
+    /** Height of skeleton (CSS value) @default '1rem' */
+    height?: string | number;
+    /** Border radius @default '0.25rem' */
+    radius?: string | number;
+    /** Animation style @default 'shimmer' */
+    animation?: SkeletonAnimation;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Skeleton - Loading placeholder with animation
+ *
+ * @example
+ * <Skeleton width="100%" height="200px" />
+ *
+ * @example
+ * <Skeleton width={120} height={20} radius="9999px" />
+ */
+declare function Skeleton({ width, height, radius, animation, className }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare namespace Skeleton {
+    var Text: typeof SkeletonText;
+    var Card: typeof SkeletonCard;
+    var Avatar: typeof SkeletonAvatar;
+    var Button: typeof SkeletonButton;
+    var Image: typeof SkeletonImage;
+}
+/**
+ * SkeletonText - Multiple lines of text skeleton
+ *
+ * @example
+ * <SkeletonText lines={3} />
+ */
+declare function SkeletonText({ lines, className }: {
+    /** Number of text lines @default 3 */
+    lines?: number;
+    /** Additional CSS classes */
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * SkeletonCard - Card layout skeleton
+ *
+ * @example
+ * <SkeletonCard lines={3} />
+ */
+declare function SkeletonCard({ lines, showImage, className }: {
+    /** Number of text lines @default 3 */
+    lines?: number;
+    /** Show image placeholder @default true */
+    showImage?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * SkeletonAvatar - Circular avatar skeleton
+ *
+ * @example
+ * <SkeletonAvatar size={48} />
+ */
+declare function SkeletonAvatar({ size, className }: {
+    /** Avatar size in pixels @default 40 */
+    size?: number;
+    /** Additional CSS classes */
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * SkeletonButton - Button skeleton
+ *
+ * @example
+ * <SkeletonButton />
+ */
+declare function SkeletonButton({ width, height, className }: {
+    /** Button width @default 120 */
+    width?: number;
+    /** Button height @default 40 */
+    height?: number;
+    /** Additional CSS classes */
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * SkeletonImage - Image placeholder skeleton
+ *
+ * @example
+ * <SkeletonImage width="100%" height="300px" />
+ */
+declare function SkeletonImage({ width, height, className }: {
+    /** Image width @default '100%' */
+    width?: string | number;
+    /** Image height @default '200px' */
+    height?: string | number;
+    /** Additional CSS classes */
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface FormFieldProps {
+    /** Field label text */
+    label?: string;
+    /** Field name (matches form schema) */
+    name: string;
+    /** Error object from React Hook Form */
+    error?: FieldError;
+    /** Optional hint text shown below input */
+    hint?: string;
+    /** Whether field is required */
+    required?: boolean;
+    /** Input element to render */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * FormField - Wrapper for form inputs with label and error display
+ *
+ * @example
+ * <FormField
+ *   name="email"
+ *   label="Email Address"
+ *   error={errors.email}
+ *   hint="We'll never share your email"
+ *   required
+ * >
+ *   <Input type="email" {...register('email')} />
+ * </FormField>
+ *
+ * @example
+ * // With Controller for custom components
+ * <FormField name="country" label="Country" error={errors.country}>
+ *   <Controller
+ *     name="country"
+ *     control={control}
+ *     render={({ field }) => <Select {...field} options={countries} />}
+ *   />
+ * </FormField>
+ */
+declare function FormField({ label, name, error, hint, required, children, className }: FormFieldProps): react_jsx_runtime.JSX.Element;
+/**
+ * FormGroup - Group multiple fields with a common label
+ *
+ * @example
+ * <FormGroup label="Address" description="Your billing address">
+ *   <FormField name="street" label="Street">
+ *     <Input {...register('street')} />
+ *   </FormField>
+ *   <FormField name="city" label="City">
+ *     <Input {...register('city')} />
+ *   </FormField>
+ * </FormGroup>
+ */
+declare function FormGroup({ label, description, children, className }: {
+    /** Group label */
+    label?: string;
+    /** Optional description text */
+    description?: string;
+    /** Form fields */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface ModalProps {
+    /** Whether modal is open */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Modal title */
+    title?: string;
+    /** Modal description */
+    description?: string;
+    /** Modal size @default 'md' */
+    size?: ModalSize;
+    /** Modal content */
+    children: ReactNode;
+    /** Whether clicking backdrop closes modal @default true */
+    closeOnBackdrop?: boolean;
+    /** Whether ESC key closes modal @default true */
+    closeOnEscape?: boolean;
+}
+/**
+ * Modal - Accessible dialog component
+ *
+ * @example
+ * const [open, setOpen] = useState(false)
+ *
+ * <Modal
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Confirm Delete"
+ *   description="This action cannot be undone"
+ *   size="md"
+ * >
+ *   <Modal.Content>
+ *     <p>Are you sure you want to delete this item?</p>
+ *   </Modal.Content>
+ *   <Modal.Footer>
+ *     <Button variant="outlined" onClick={() => setOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button variant="filled" onClick={handleDelete}>
+ *       Delete
+ *     </Button>
+ *   </Modal.Footer>
+ * </Modal>
+ */
+declare function Modal({ open, onOpenChange, title, description, size, children, closeOnBackdrop, closeOnEscape }: ModalProps): react_jsx_runtime.JSX.Element;
+declare namespace Modal {
+    var Content: typeof ModalContent;
+    var Footer: typeof ModalFooter;
+    var Trigger: any;
+    var Root: any;
+}
+/**
+ * ModalContent - Content area of modal
+ */
+declare function ModalContent({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * ModalFooter - Footer area with actions
+ */
+declare function ModalFooter({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * ModalTrigger - Button that opens modal
+ *
+ * @example
+ * <Modal.Root>
+ *   <Modal.Trigger asChild>
+ *     <Button>Open Modal</Button>
+ *   </Modal.Trigger>
+ *   <Modal.Content>...</Modal.Content>
+ * </Modal.Root>
+ */
+declare const ModalTrigger: any;
+/**
+ * ModalRoot - Controlled modal root
+ * Use this when you want Radix to manage the open state
+ */
+declare const ModalRoot: any;
+
+interface LocalizedString$2 {
+    [locale: string]: string;
+}
+interface HeroContent {
+    headline: LocalizedString$2;
+    subheadline: LocalizedString$2;
+    variant?: 'dark' | 'light' | 'split';
+    backgroundImage?: string;
+    backgroundVideo?: string;
+    overlayGradient?: {
+        from: string;
+        to: string;
+    };
+    cta: {
+        primary: {
+            text: LocalizedString$2;
+            href: string;
+        };
+        secondary?: {
+            text: LocalizedString$2;
+            href: string;
+        };
+    };
+    trustLine?: LocalizedString$2;
+}
+interface AboutContent {
+    heading: LocalizedString$2;
+    dividerLine?: boolean;
+    paragraphs: Array<LocalizedString$2>;
+    image?: {
+        src: string;
+        alt: LocalizedString$2;
+        placeholder?: string;
+    };
+}
+interface ServiceItem {
+    id: string;
+    name: LocalizedString$2;
+    description: LocalizedString$2;
+    href: string;
+    icon?: string;
+}
+interface ServicesContent {
+    heading: LocalizedString$2;
+    description: LocalizedString$2;
+    dividerLine?: boolean;
+    items: ServiceItem[];
+    image?: {
+        src: string;
+        alt: LocalizedString$2;
+        placeholder?: string;
+    };
+    cta?: {
+        text: LocalizedString$2;
+        subtext: LocalizedString$2;
+        button: {
+            text: LocalizedString$2;
+            href: string;
+        };
+    };
+}
+interface WhyChooseUsContent {
+    heading: LocalizedString$2;
+    dividerLine?: boolean;
+    paragraphs: Array<LocalizedString$2>;
+    image?: {
+        src: string;
+        alt: LocalizedString$2;
+        placeholder?: string;
+    };
+}
+
+interface FAQ {
+    /** Unique ID for the FAQ item */
+    id: string;
+    /** Question text (bilingual) */
+    question: LocalizedString$2;
+    /** Answer text (bilingual) or React node */
+    answer: LocalizedString$2 | ReactNode;
+}
+interface FAQAccordionProps {
+    /** Array of FAQ items */
+    faqs: FAQ[];
+    /** Current locale for display */
+    locale: 'en' | 'fr';
+    /** Allow multiple items open at once @default false */
+    allowMultiple?: boolean;
+    /** Default open item IDs */
+    defaultOpen?: string[];
+    /** Include Schema.org structured data @default true */
+    includeStructuredData?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * FAQAccordion - Accessible FAQ accordion with SEO structured data
+ *
+ * @example
+ * <FAQAccordion
+ *   faqs={[
+ *     {
+ *       id: 'payment',
+ *       question: { en: 'What payment methods...', fr: '...' },
+ *       answer: { en: 'We accept...', fr: '...' }
+ *     }
+ *   ]}
+ *   locale="en"
+ *   allowMultiple={false}
+ *   includeStructuredData
+ * />
+ */
+declare function FAQAccordion({ faqs, locale, allowMultiple, defaultOpen, includeStructuredData, className }: FAQAccordionProps): react_jsx_runtime.JSX.Element;
+
+interface AnimatedCounterProps {
+    /** Starting value @default 0 */
+    from?: number;
+    /** Ending value */
+    to: number;
+    /** Animation duration in seconds @default 2 */
+    duration?: number;
+    /** Number of decimal places @default 0 */
+    decimals?: number;
+    /** Thousands separator @default ',' */
+    separator?: string;
+    /** Prefix (e.g., '$', '+') */
+    prefix?: string;
+    /** Suffix (e.g., '%', '+', 'K', 'M') */
+    suffix?: string;
+    /** Locale for number formatting @default 'en' */
+    locale?: 'en' | 'fr';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * AnimatedCounter - Number count-up animation component
+ *
+ * Animates from a starting value to an ending value when scrolled into view.
+ * Supports locale-aware formatting, prefixes, suffixes, and decimal places.
+ *
+ * @example
+ * // Simple counter
+ * <AnimatedCounter to={10000} suffix="+" />
+ *
+ * @example
+ * // Currency
+ * <AnimatedCounter to={2500000} prefix="$" suffix="M+" decimals={1} />
+ *
+ * @example
+ * // Percentage
+ * <AnimatedCounter to={99.9} suffix="%" decimals={1} />
+ *
+ * @example
+ * // French formatting
+ * <AnimatedCounter to={1234.56} locale="fr" decimals={2} />
+ * // Displays: 1 234,56
+ */
+declare function AnimatedCounter({ from, to, duration, decimals, separator, prefix, suffix, locale, className }: AnimatedCounterProps): react_jsx_runtime.JSX.Element;
+
+interface Stat {
+    /** Numeric value to display */
+    value: number;
+    /** Prefix (e.g., '$', '+') */
+    prefix?: string;
+    /** Suffix (e.g., '%', '+', 'K', 'M') */
+    suffix?: string;
+    /** Number of decimal places @default 0 */
+    decimals?: number;
+    /** Stat label (bilingual) */
+    label: LocalizedString$2;
+    /** Optional description (bilingual) */
+    description?: LocalizedString$2;
+    /** Optional icon */
+    icon?: ReactNode;
+}
+interface StatsSectionProps {
+    /** Section title (bilingual) */
+    title?: LocalizedString$2;
+    /** Section description (bilingual) */
+    description?: LocalizedString$2;
+    /** Array of statistics */
+    stats: Stat[];
+    /** Current locale */
+    locale: 'en' | 'fr';
+    /** Number of columns @default 3 */
+    columns?: 2 | 3 | 4;
+    /** Visual variant @default 'light' */
+    variant?: 'light' | 'dark' | 'gradient' | 'bordered';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * StatsSection - Display impressive statistics with animated counters
+ *
+ * Perfect for social proof: customer counts, uptime percentages, revenue processed, etc.
+ * Numbers animate when scrolled into view with stagger effect.
+ *
+ * @example
+ * <StatsSection
+ *   title={{ en: "Our Impact", fr: "Notre Impact" }}
+ *   stats={[
+ *     {
+ *       value: 10000,
+ *       suffix: "+",
+ *       label: { en: "Happy Clients", fr: "Clients Satisfaits" },
+ *       description: { en: "Across 50 countries", fr: "..." },
+ *       icon: <UsersIcon />
+ *     },
+ *     {
+ *       value: 99.9,
+ *       suffix: "%",
+ *       decimals: 1,
+ *       label: { en: "Uptime", fr: "Disponibilité" },
+ *       icon: <CheckIcon />
+ *     }
+ *   ]}
+ *   locale="en"
+ *   columns={3}
+ *   variant="light"
+ * />
+ */
+declare function StatsSection({ title, description, stats, locale, columns, variant, className }: StatsSectionProps): react_jsx_runtime.JSX.Element;
+
+type BadgeType = 'ssl-secure' | 'money-back-30' | 'money-back-60' | 'money-back-90' | 'bbb-accredited' | 'satisfaction-guaranteed' | 'free-shipping' | 'privacy-protected' | '24-7-support' | 'secure-payment';
+interface CustomBadge {
+    type: 'custom';
+    image: string;
+    alt: string;
+    tooltip?: string;
+}
+type Badge = BadgeType | CustomBadge;
+interface TrustBadgesProps {
+    /** Array of badge types or custom badges */
+    badges: Badge[];
+    /** Visual variant @default 'color' */
+    variant?: 'color' | 'grayscale';
+    /** Badge size @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * TrustBadges - Display trust indicators and credibility badges
+ *
+ * Reduces purchase anxiety and builds trust with pre-designed or custom badges.
+ *
+ * @example
+ * <TrustBadges
+ *   badges={['ssl-secure', 'money-back-30', 'bbb-accredited']}
+ *   variant="color"
+ *   size="md"
+ * />
+ *
+ * @example
+ * // With custom badge
+ * <TrustBadges
+ *   badges={[
+ *     'ssl-secure',
+ *     {
+ *       type: 'custom',
+ *       image: '/badges/certified.png',
+ *       alt: 'Industry Certified',
+ *       tooltip: 'Certified by Industry Association'
+ *     }
+ *   ]}
+ * />
+ */
+declare function TrustBadges({ badges, variant, size, className }: TrustBadgesProps): react_jsx_runtime.JSX.Element;
+
+interface PricingFeature {
+    /** Feature name (bilingual) */
+    name: LocalizedString$2;
+    /** Whether feature is included */
+    included: boolean;
+    /** Optional tooltip description */
+    tooltip?: LocalizedString$2;
+}
+interface PricingTier {
+    /** Tier name (bilingual) */
+    name: LocalizedString$2;
+    /** Description (bilingual) */
+    description?: LocalizedString$2;
+    /** Pricing per billing period */
+    price: {
+        monthly?: number;
+        annual?: number;
+    };
+    /** Currency symbol @default '$' */
+    currency?: string;
+    /** List of features */
+    features: PricingFeature[];
+    /** CTA configuration */
+    cta: {
+        label: LocalizedString$2;
+        href: string;
+    };
+    /** Highlight this tier as most popular @default false */
+    highlighted?: boolean;
+    /** Custom badge text */
+    badge?: LocalizedString$2;
+}
+type BillingPeriod = 'monthly' | 'annual';
+interface PricingTableProps {
+    /** Array of pricing tiers (2-4 recommended) */
+    tiers: PricingTier[];
+    /** Current locale */
+    locale: 'en' | 'fr';
+    /** Available billing periods @default ['monthly', 'annual'] */
+    billingPeriods?: BillingPeriod[];
+    /** Default billing period @default 'monthly' */
+    defaultPeriod?: BillingPeriod;
+    /** Savings message for annual (bilingual) */
+    savings?: LocalizedString$2;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * PricingTable - Responsive pricing comparison table
+ *
+ * @example
+ * <PricingTable
+ *   tiers={[
+ *     {
+ *       name: { en: 'Starter', fr: 'Démarrage' },
+ *       description: { en: 'For small teams', fr: '...' },
+ *       price: { monthly: 29, annual: 24 },
+ *       features: [
+ *         { name: { en: 'Up to 10 users', fr: '...' }, included: true },
+ *         { name: { en: 'Basic support', fr: '...' }, included: true },
+ *         { name: { en: 'Advanced analytics', fr: '...' }, included: false }
+ *       ],
+ *       cta: { label: { en: 'Start Trial', fr: '...' }, href: '/signup' }
+ *     },
+ *     {
+ *       name: { en: 'Professional', fr: 'Professionnel' },
+ *       price: { monthly: 99, annual: 79 },
+ *       highlighted: true,
+ *       badge: { en: 'Most Popular', fr: 'Plus populaire' },
+ *       features: [...],
+ *       cta: { label: { en: 'Get Started', fr: '...' }, href: '/signup?plan=pro' }
+ *     }
+ *   ]}
+ *   locale="en"
+ *   defaultPeriod="annual"
+ *   savings={{ en: 'Save 20%', fr: 'Économisez 20%' }}
+ * />
+ */
+declare function PricingTable({ tiers, locale, billingPeriods, defaultPeriod, savings, className }: PricingTableProps): react_jsx_runtime.JSX.Element;
+
+interface Testimonial {
+    /** Customer quote (bilingual) */
+    quote: LocalizedString$2;
+    /** Customer name */
+    author: string;
+    /** Customer role/title (bilingual) */
+    role?: LocalizedString$2;
+    /** Company name */
+    company?: string;
+    /** Customer photo URL */
+    photo?: string;
+    /** Company logo URL */
+    logo?: string;
+    /** Star rating (1-5) */
+    rating?: number;
+    /** Optional video URL */
+    video?: string;
+}
+interface TestimonialCarouselProps {
+    /** Array of testimonials */
+    testimonials: Testimonial[];
+    /** Current locale */
+    locale: 'en' | 'fr';
+    /** Auto-play interval in milliseconds @default 5000 */
+    interval?: number;
+    /** Enable auto-play @default true */
+    autoPlay?: boolean;
+    /** Show navigation arrows @default true */
+    showArrows?: boolean;
+    /** Show navigation dots @default true */
+    showDots?: boolean;
+    /** Visual variant @default 'card' */
+    variant?: 'card' | 'minimal' | 'split';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * TestimonialCarousel - Rotating customer testimonials
+ *
+ * @example
+ * <TestimonialCarousel
+ *   testimonials={[
+ *     {
+ *       quote: { en: "This product changed...", fr: "..." },
+ *       author: "Jane Doe",
+ *       role: { en: "CEO", fr: "PDG" },
+ *       company: "Acme Corp",
+ *       photo: "/testimonials/jane.jpg",
+ *       rating: 5
+ *     }
+ *   ]}
+ *   locale="en"
+ *   autoPlay
+ *   interval={5000}
+ * />
+ */
+declare function TestimonialCarousel({ testimonials, locale, interval, autoPlay, showArrows, showDots, variant, className }: TestimonialCarouselProps): react_jsx_runtime.JSX.Element | null;
+
+interface StickyBarProps {
+    /** Message to display (bilingual) */
+    message: LocalizedString$2;
+    /** Current locale */
+    locale: 'en' | 'fr';
+    /** CTA configuration */
+    cta: {
+        label: LocalizedString$2;
+        href: string;
+        onClick?: () => void;
+    };
+    /** Position @default 'top' */
+    position?: 'top' | 'bottom';
+    /** Scroll trigger distance in pixels @default 300 */
+    trigger?: number;
+    /** Whether bar is dismissible @default true */
+    dismissible?: boolean;
+    /** Remember dismissal duration @default 'session' */
+    rememberDismissal?: 'session' | 'permanent' | 'none';
+    /** Hide on scroll up @default false */
+    hideOnScrollUp?: boolean;
+    /** Optional icon */
+    icon?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * StickyBar - Persistent notification bar with CTA
+ *
+ * Appears after scrolling past a threshold to maintain CTA visibility.
+ * Perfect for maintaining conversion opportunities throughout the page.
+ *
+ * @example
+ * <StickyBar
+ *   message={{ en: "Ready to get started?", fr: "..." }}
+ *   cta={{
+ *     label: { en: "Start Free Trial", fr: "..." },
+ *     href: "/signup"
+ *   }}
+ *   locale="en"
+ *   position="top"
+ *   trigger={300}
+ *   dismissible
+ * />
+ */
+declare function StickyBar({ message, locale, cta, position, trigger, dismissible, rememberDismissal, hideOnScrollUp, icon, className }: StickyBarProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+interface SelectProps {
+    /** Options to display */
+    options: SelectOption[] | SelectOptionGroup[];
+    /** Selected value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether select is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Select - Accessible dropdown select component
+ *
+ * @example
+ * <Select
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' }
+ *   ]}
+ *   placeholder="Select country..."
+ *   value={country}
+ *   onValueChange={setCountry}
+ * />
+ *
+ * @example
+ * // With option groups
+ * <Select
+ *   options={[
+ *     {
+ *       label: 'North America',
+ *       options: [
+ *         { value: 'us', label: 'United States' },
+ *         { value: 'ca', label: 'Canada' }
+ *       ]
+ *     }
+ *   ]}
+ * />
+ */
+declare function Select({ options, value, onValueChange, placeholder, disabled, className }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Checkbox label */
+    label?: string;
+    /** Description text below label */
+    description?: string;
+    /** Error message */
+    error?: string;
+    /** Size variant @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+}
+interface CheckboxGroupOption {
+    value: string;
+    label: LocalizedString$2 | string;
+    description?: LocalizedString$2 | string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    /** Group label */
+    label?: LocalizedString$2 | string;
+    /** Current locale for bilingual labels */
+    locale?: 'en' | 'fr';
+    /** Array of checkbox options */
+    options: CheckboxGroupOption[];
+    /** Selected values */
+    value?: string[];
+    /** Callback when selection changes */
+    onChange?: (value: string[]) => void;
+    /** Error message */
+    error?: string;
+    /** Display layout @default 'vertical' */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /** Grid columns (only for grid layout) @default 2 */
+    columns?: 2 | 3 | 4;
+    /** Disabled state for entire group */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Checkbox - Styled checkbox input with label and description
+ *
+ * Integrates with React Hook Form and supports validation states.
+ *
+ * @example
+ * // Basic usage
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   {...register('terms')}
+ * />
+ *
+ * @example
+ * // With description and error
+ * <Checkbox
+ *   label="Subscribe to newsletter"
+ *   description="Get weekly updates about new features"
+ *   error={errors.newsletter?.message}
+ *   {...register('newsletter')}
+ * />
+ *
+ * @example
+ * // Different sizes
+ * <Checkbox label="Small" size="sm" />
+ * <Checkbox label="Medium" size="md" />
+ * <Checkbox label="Large" size="lg" />
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * CheckboxGroup - Collection of related checkboxes
+ *
+ * Manages multiple checkbox selections with built-in state management.
+ * Supports bilingual labels and responsive layouts.
+ *
+ * @example
+ * // Basic usage with React Hook Form
+ * const { watch, setValue } = useForm()
+ * const selectedFeatures = watch('features') || []
+ *
+ * <CheckboxGroup
+ *   label={{ en: "Select Features", fr: "Sélectionner les fonctionnalités" }}
+ *   locale="en"
+ *   options={[
+ *     { value: 'analytics', label: { en: 'Analytics', fr: 'Analytique' } },
+ *     { value: 'reporting', label: { en: 'Reporting', fr: 'Rapports' } },
+ *     { value: 'api', label: 'API Access', disabled: true }
+ *   ]}
+ *   value={selectedFeatures}
+ *   onChange={(values) => setValue('features', values)}
+ * />
+ *
+ * @example
+ * // Grid layout
+ * <CheckboxGroup
+ *   options={options}
+ *   layout="grid"
+ *   columns={3}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ */
+declare function CheckboxGroup({ label, locale, options, value, onChange, error, layout, columns, disabled, className }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Radio label */
+    label?: string;
+    /** Description text below label */
+    description?: string;
+    /** Error message */
+    error?: string;
+    /** Size variant @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+}
+interface RadioGroupOption {
+    value: string;
+    label: LocalizedString$2 | string;
+    description?: LocalizedString$2 | string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    /** Group label */
+    label?: LocalizedString$2 | string;
+    /** Field name (for form integration) */
+    name: string;
+    /** Current locale for bilingual labels */
+    locale?: 'en' | 'fr';
+    /** Array of radio options */
+    options: RadioGroupOption[];
+    /** Selected value */
+    value?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Error message */
+    error?: string;
+    /** Display layout @default 'vertical' */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /** Grid columns (only for grid layout) @default 2 */
+    columns?: 2 | 3 | 4;
+    /** Disabled state for entire group */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Radio - Styled radio button input with label and description
+ *
+ * Integrates with React Hook Form and supports validation states.
+ *
+ * @example
+ * // Basic usage
+ * <Radio
+ *   name="plan"
+ *   value="basic"
+ *   label="Basic Plan"
+ *   {...register('plan')}
+ * />
+ *
+ * @example
+ * // With description and error
+ * <Radio
+ *   name="plan"
+ *   value="pro"
+ *   label="Pro Plan"
+ *   description="Includes advanced features and priority support"
+ *   error={errors.plan?.message}
+ *   {...register('plan')}
+ * />
+ *
+ * @example
+ * // Different sizes
+ * <Radio name="size" value="s" label="Small" size="sm" />
+ * <Radio name="size" value="m" label="Medium" size="md" />
+ * <Radio name="size" value="l" label="Large" size="lg" />
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * RadioGroup - Collection of mutually exclusive radio buttons
+ *
+ * Manages radio button selection with built-in state management.
+ * Supports bilingual labels and responsive layouts.
+ *
+ * @example
+ * // Basic usage with React Hook Form
+ * const { watch, setValue } = useForm()
+ * const selectedPlan = watch('plan')
+ *
+ * <RadioGroup
+ *   name="plan"
+ *   label={{ en: "Choose Plan", fr: "Choisir le plan" }}
+ *   locale="en"
+ *   options={[
+ *     {
+ *       value: 'basic',
+ *       label: { en: 'Basic', fr: 'Basique' },
+ *       description: { en: '$10/month', fr: '10$/mois' }
+ *     },
+ *     {
+ *       value: 'pro',
+ *       label: { en: 'Pro', fr: 'Pro' },
+ *       description: { en: '$25/month', fr: '25$/mois' }
+ *     },
+ *     {
+ *       value: 'enterprise',
+ *       label: 'Enterprise',
+ *       description: 'Custom pricing',
+ *       disabled: true
+ *     }
+ *   ]}
+ *   value={selectedPlan}
+ *   onChange={(value) => setValue('plan', value)}
+ * />
+ *
+ * @example
+ * // Horizontal layout
+ * <RadioGroup
+ *   name="color"
+ *   options={colorOptions}
+ *   layout="horizontal"
+ *   value={color}
+ *   onChange={setColor}
+ * />
+ *
+ * @example
+ * // Grid layout
+ * <RadioGroup
+ *   name="option"
+ *   options={options}
+ *   layout="grid"
+ *   columns={3}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ */
+declare function RadioGroup({ label, name, locale, options, value, onChange, error, layout, columns, disabled, className }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface FileUploadProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Label text (bilingual) */
+    label?: LocalizedString$2 | string;
+    /** Description text (bilingual) */
+    description?: LocalizedString$2 | string;
+    /** Allow multiple files @default false */
+    multiple?: boolean;
+    /** Accepted file types (e.g., 'image/*', '.pdf,.doc') */
+    accept?: string;
+    /** Max file size in bytes @default 10MB */
+    maxSize?: number;
+    /** Max number of files @default Infinity */
+    maxFiles?: number;
+    /** Current files */
+    value?: File[];
+    /** Callback when files change */
+    onChange?: (files: File[]) => void;
+    /** Error message */
+    error?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show file previews @default true */
+    showPreviews?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * FileUpload - Drag & drop file upload component
+ *
+ * Supports multiple files, file type restrictions, size limits, and previews.
+ * Integrates with React Hook Form for validation.
+ *
+ * @example
+ * // Basic usage
+ * const [files, setFiles] = useState<File[]>([])
+ *
+ * <FileUpload
+ *   label={{ en: "Upload Documents", fr: "Téléverser des documents" }}
+ *   locale="en"
+ *   value={files}
+ *   onChange={setFiles}
+ * />
+ *
+ * @example
+ * // With restrictions and React Hook Form
+ * const { setValue, formState: { errors } } = useForm()
+ *
+ * <FileUpload
+ *   label="Profile Photo"
+ *   accept="image/*"
+ *   maxSize={5 * 1024 * 1024} // 5MB
+ *   maxFiles={1}
+ *   onChange={(files) => setValue('photo', files[0])}
+ *   error={errors.photo?.message}
+ * />
+ *
+ * @example
+ * // Multiple files
+ * <FileUpload
+ *   label="Upload Attachments"
+ *   multiple
+ *   accept=".pdf,.doc,.docx"
+ *   maxFiles={5}
+ *   maxSize={10 * 1024 * 1024}
+ *   value={attachments}
+ *   onChange={setAttachments}
+ * />
+ */
+declare function FileUpload({ locale, label, description, multiple, accept, maxSize, // 10MB default
+maxFiles, value, onChange, error, disabled, showPreviews, className }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+interface MultiStepFormProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Form steps */
+    children: ReactElement<StepProps>[];
+    /** Callback when form is completed */
+    onComplete?: (data: any) => void | Promise<void>;
+    /** Show progress bar @default true */
+    showProgress?: boolean;
+    /** Allow navigation to previous steps @default true */
+    allowBack?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+interface StepProps {
+    /** Step title (bilingual) */
+    title: LocalizedString$2 | string;
+    /** Step description (bilingual) */
+    description?: LocalizedString$2 | string;
+    /** Validation function - return true if valid, error message if invalid */
+    validate?: () => boolean | string | Promise<boolean | string>;
+    /** Step content */
+    children: ReactNode;
+}
+interface MultiStepFormContextValue {
+    currentStep: number;
+    totalSteps: number;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    goToStep: (step: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    locale: 'en' | 'fr';
+}
+/**
+ * MultiStepForm - Multi-step form with progress tracking
+ *
+ * Manages form state across multiple steps with validation, navigation,
+ * and smooth transitions between steps.
+ *
+ * @example
+ * // Basic usage
+ * <MultiStepForm
+ *   locale="en"
+ *   onComplete={(data) => console.log('Form completed', data)}
+ * >
+ *   <MultiStepForm.Step
+ *     title={{ en: "Personal Info", fr: "Informations personnelles" }}
+ *     description="Tell us about yourself"
+ *   >
+ *     <FormField label="Name">
+ *       <input type="text" {...register('name')} />
+ *     </FormField>
+ *   </MultiStepForm.Step>
+ *
+ *   <MultiStepForm.Step
+ *     title="Contact"
+ *     validate={async () => {
+ *       const isValid = await validateEmail(email)
+ *       return isValid || 'Invalid email'
+ *     }}
+ *   >
+ *     <FormField label="Email">
+ *       <input type="email" {...register('email')} />
+ *     </FormField>
+ *   </MultiStepForm.Step>
+ *
+ *   <MultiStepForm.Step title="Confirm">
+ *     <p>Review your information...</p>
+ *   </MultiStepForm.Step>
+ * </MultiStepForm>
+ *
+ * @example
+ * // With custom navigation
+ * <MultiStepForm
+ *   showProgress
+ *   allowBack
+ *   onComplete={handleSubmit}
+ * >
+ *   <MultiStepForm.Step title="Step 1">
+ *     ...
+ *   </MultiStepForm.Step>
+ * </MultiStepForm>
+ */
+declare function MultiStepForm({ locale, children, onComplete, showProgress, allowBack, className }: MultiStepFormProps): react_jsx_runtime.JSX.Element;
+declare namespace MultiStepForm {
+    var Step: ({ title, description, children }: StepProps) => react_jsx_runtime.JSX.Element;
+}
+/**
+ * Hook to access multi-step form context
+ *
+ * Provides access to current step, navigation functions, and form state.
+ *
+ * @example
+ * function CustomStep() {
+ *   const { currentStep, goToNext, goToPrevious } = useMultiStepForm()
+ *
+ *   return (
+ *     <div>
+ *       <p>Current step: {currentStep}</p>
+ *       <button onClick={goToPrevious}>Back</button>
+ *       <button onClick={goToNext}>Next</button>
+ *     </div>
+ *   )
+ * }
+ */
+declare function useMultiStepForm(): MultiStepFormContextValue;
+
+interface CountdownTimerProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Target date/time */
+    targetDate: Date | string;
+    /** Label above timer (bilingual) */
+    label?: LocalizedString$2 | string;
+    /** Message shown when countdown ends (bilingual) */
+    completionMessage?: LocalizedString$2 | string;
+    /** Callback when countdown ends */
+    onComplete?: () => void;
+    /** Display format @default 'blocks' */
+    format?: 'blocks' | 'inline' | 'minimal';
+    /** Show labels for time units @default true */
+    showLabels?: boolean;
+    /** Show days @default true */
+    showDays?: boolean;
+    /** Show hours @default true */
+    showHours?: boolean;
+    /** Show minutes @default true */
+    showMinutes?: boolean;
+    /** Show seconds @default true */
+    showSeconds?: boolean;
+    /** Size variant @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CountdownTimer - Countdown timer for urgency and deadlines
+ *
+ * Creates urgency with time-limited offers, event countdowns, or flash sales.
+ * Supports multiple display formats and automatic completion callbacks.
+ *
+ * @example
+ * // Basic usage
+ * <CountdownTimer
+ *   targetDate={new Date('2024-12-31T23:59:59')}
+ *   label={{ en: "Sale Ends In", fr: "La vente se termine dans" }}
+ *   locale="en"
+ * />
+ *
+ * @example
+ * // Minimal inline format
+ * <CountdownTimer
+ *   targetDate="2024-06-15T12:00:00"
+ *   format="inline"
+ *   showDays={false}
+ *   completionMessage="Offer expired!"
+ *   onComplete={() => {
+ *     console.log('Timer ended!')
+ *     // Redirect, show message, etc.
+ *   }}
+ * />
+ *
+ * @example
+ * // Large blocks format
+ * <CountdownTimer
+ *   targetDate={eventDate}
+ *   label="Event Starts In"
+ *   format="blocks"
+ *   size="lg"
+ *   showLabels
+ * />
+ */
+declare function CountdownTimer({ locale, targetDate, label, completionMessage, onComplete, format, showLabels, showDays, showHours, showMinutes, showSeconds, size, className }: CountdownTimerProps): react_jsx_runtime.JSX.Element;
+
+interface ExitIntentModalProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Modal title (bilingual) */
+    title: LocalizedString$2 | string;
+    /** Modal content */
+    children: ReactNode;
+    /** Enable exit intent detection @default true */
+    enabled?: boolean;
+    /** Delay before showing modal (ms) @default 0 */
+    delay?: number;
+    /** Show only once per session @default true */
+    oncePerSession?: boolean;
+    /** Show only once ever (localStorage) @default false */
+    onceEver?: boolean;
+    /** Cookie/storage key for "once" tracking @default 'exit-intent-shown' */
+    storageKey?: string;
+    /** Sensitivity (distance from top in px before triggering) @default 50 */
+    sensitivity?: number;
+    /** Callback when modal is shown */
+    onShow?: () => void;
+    /** Callback when modal is dismissed */
+    onDismiss?: () => void;
+}
+/**
+ * ExitIntentModal - Capture abandoning visitors with targeted message
+ *
+ * Detects when user's mouse leaves the viewport (exit intent) and shows
+ * a modal with a retention offer, discount, or message.
+ *
+ * @example
+ * // Basic usage
+ * <ExitIntentModal
+ *   title={{ en: "Wait! Don't Leave Yet", fr: "Attendez! Ne partez pas encore" }}
+ *   locale="en"
+ * >
+ *   <div className="text-center">
+ *     <p className="mb-4">Get 10% off your first order!</p>
+ *     <input
+ *       type="email"
+ *       placeholder="Enter your email"
+ *       className="w-full px-4 py-2 border rounded mb-4"
+ *     />
+ *     <Button variant="filled" fullWidth>
+ *       Get My Discount
+ *     </Button>
+ *   </div>
+ * </ExitIntentModal>
+ *
+ * @example
+ * // Show only once ever with custom settings
+ * <ExitIntentModal
+ *   title="Special Offer Just for You"
+ *   onceEver
+ *   delay={2000}
+ *   sensitivity={30}
+ *   onShow={() => {
+ *     console.log('Exit intent triggered')
+ *     // Track analytics event
+ *   }}
+ * >
+ *   <SpecialOfferContent />
+ * </ExitIntentModal>
+ *
+ * @example
+ * // Conditional exit intent
+ * const [showExitIntent, setShowExitIntent] = useState(true)
+ *
+ * <ExitIntentModal
+ *   enabled={showExitIntent && !userIsSubscribed}
+ *   title="Before You Go..."
+ *   onDismiss={() => {
+ *     console.log('User dismissed exit intent')
+ *     setShowExitIntent(false)
+ *   }}
+ * >
+ *   <NewsletterSignup />
+ * </ExitIntentModal>
+ */
+declare function ExitIntentModal({ locale, title, children, enabled, delay, oncePerSession, onceEver, storageKey, sensitivity, onShow, onDismiss }: ExitIntentModalProps): react_jsx_runtime.JSX.Element;
+
+interface Tab {
+    /** Unique tab identifier */
+    value: string;
+    /** Tab label (bilingual) */
+    label: LocalizedString$2 | string;
+    /** Tab content */
+    content: ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+}
+interface TabsProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Array of tabs */
+    tabs: Tab[];
+    /** Default active tab value */
+    defaultValue?: string;
+    /** Controlled active tab value */
+    value?: string;
+    /** Callback when tab changes */
+    onValueChange?: (value: string) => void;
+    /** Sync active tab with URL query param @default false */
+    syncWithUrl?: boolean;
+    /** URL query param name @default 'tab' */
+    urlParam?: string;
+    /** Tab variant @default 'underline' */
+    variant?: 'underline' | 'pills' | 'bordered';
+    /** Tab orientation @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Tabs - Organize content into switchable panels
+ *
+ * Built on Radix UI with keyboard navigation, optional URL sync,
+ * and multiple visual variants. Perfect for feature comparisons,
+ * FAQs, documentation, and multi-section content.
+ *
+ * @example
+ * // Basic usage
+ * <Tabs
+ *   tabs={[
+ *     {
+ *       value: 'features',
+ *       label: { en: 'Features', fr: 'Fonctionnalités' },
+ *       content: <FeaturesContent />
+ *     },
+ *     {
+ *       value: 'pricing',
+ *       label: 'Pricing',
+ *       content: <PricingContent />
+ *     }
+ *   ]}
+ *   locale="en"
+ * />
+ *
+ * @example
+ * // With URL synchronization
+ * <Tabs
+ *   tabs={tabs}
+ *   syncWithUrl
+ *   urlParam="section"
+ *   variant="pills"
+ *   onValueChange={(value) => {
+ *     console.log('Tab changed to:', value)
+ *   }}
+ * />
+ *
+ * @example
+ * // Vertical orientation
+ * <Tabs
+ *   tabs={tabs}
+ *   orientation="vertical"
+ *   variant="bordered"
+ *   locale="fr"
+ * />
+ */
+declare function Tabs({ locale, tabs, defaultValue, value: controlledValue, onValueChange, syncWithUrl, urlParam, variant, orientation, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface TimelineItem {
+    /** Item title (bilingual) */
+    title: LocalizedString$2 | string;
+    /** Item description (bilingual) */
+    description?: LocalizedString$2 | string;
+    /** Date or step label */
+    date?: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Custom content (overrides description) */
+    content?: ReactNode;
+}
+interface TimelineProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Timeline items */
+    items: TimelineItem[];
+    /** Layout orientation @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal';
+    /** Visual variant @default 'default' */
+    variant?: 'default' | 'simple' | 'filled';
+    /** Position (vertical only) @default 'left' */
+    position?: 'left' | 'center' | 'right' | 'alternating';
+    /** Show connector line @default true */
+    showConnector?: boolean;
+    /** Animate on scroll @default true */
+    animate?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Timeline - Display chronological events or step-by-step processes
+ *
+ * Perfect for company history, project milestones, how-it-works sections,
+ * and onboarding flows. Supports multiple layouts and visual styles.
+ *
+ * @example
+ * // Company history timeline
+ * <Timeline
+ *   items={[
+ *     {
+ *       date: '2020',
+ *       title: { en: 'Company Founded', fr: 'Fondation de l\'entreprise' },
+ *       description: { en: 'Started in a garage...', fr: '...' },
+ *       icon: <RocketIcon />
+ *     },
+ *     {
+ *       date: '2022',
+ *       title: 'Series A Funding',
+ *       description: 'Raised $5M to scale operations',
+ *       icon: <ChartIcon />
+ *     }
+ *   ]}
+ *   locale="en"
+ *   variant="default"
+ * />
+ *
+ * @example
+ * // Process steps (horizontal)
+ * <Timeline
+ *   items={steps}
+ *   orientation="horizontal"
+ *   variant="filled"
+ *   position="center"
+ * />
+ *
+ * @example
+ * // Alternating timeline
+ * <Timeline
+ *   items={milestones}
+ *   position="alternating"
+ *   showConnector
+ *   animate
+ * />
+ */
+declare function Timeline({ locale, items, orientation, variant, position, showConnector, animate, className }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+interface ComparisonFeature {
+    /** Feature name (bilingual) */
+    name: LocalizedString$2 | string;
+    /** Feature values for each option (boolean for checkmark, string for custom value) */
+    values: (boolean | string | ReactNode)[];
+    /** Feature description/tooltip (bilingual) */
+    description?: LocalizedString$2 | string;
+}
+interface ComparisonOption {
+    /** Option name (bilingual) */
+    name: LocalizedString$2 | string;
+    /** Optional badge (e.g., "Popular", "Best Value") */
+    badge?: LocalizedString$2 | string;
+    /** Highlight this column @default false */
+    highlighted?: boolean;
+    /** Call to action */
+    cta?: {
+        label: LocalizedString$2 | string;
+        href?: string;
+        onClick?: () => void;
+    };
+}
+interface ComparisonTableProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Table title (bilingual) */
+    title?: LocalizedString$2 | string;
+    /** Table description (bilingual) */
+    description?: LocalizedString$2 | string;
+    /** Options/products to compare */
+    options: ComparisonOption[];
+    /** Features to compare */
+    features: ComparisonFeature[];
+    /** Show checkmarks for boolean values @default true */
+    showCheckmarks?: boolean;
+    /** Sticky header @default true */
+    stickyHeader?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ComparisonTable - Compare features across products or plans
+ *
+ * Perfect for pricing plan comparisons, feature matrices, and product
+ * comparisons. Supports highlighting, badges, and CTAs per option.
+ *
+ * @example
+ * // Basic plan comparison
+ * <ComparisonTable
+ *   title={{ en: "Compare Plans", fr: "Comparer les forfaits" }}
+ *   locale="en"
+ *   options={[
+ *     {
+ *       name: 'Basic',
+ *       cta: { label: 'Get Started', href: '/signup?plan=basic' }
+ *     },
+ *     {
+ *       name: 'Pro',
+ *       badge: 'Popular',
+ *       highlighted: true,
+ *       cta: { label: 'Start Free Trial', href: '/signup?plan=pro' }
+ *     },
+ *     {
+ *       name: 'Enterprise',
+ *       cta: { label: 'Contact Sales', onClick: () => openContact() }
+ *     }
+ *   ]}
+ *   features={[
+ *     {
+ *       name: 'Users',
+ *       values: ['5', '20', 'Unlimited']
+ *     },
+ *     {
+ *       name: 'Storage',
+ *       values: ['10 GB', '100 GB', '1 TB']
+ *     },
+ *     {
+ *       name: 'API Access',
+ *       values: [false, true, true],
+ *       description: 'Programmatic access to your data'
+ *     }
+ *   ]}
+ * />
+ *
+ * @example
+ * // Product comparison
+ * <ComparisonTable
+ *   options={products}
+ *   features={productFeatures}
+ *   showCheckmarks
+ *   stickyHeader
+ * />
+ */
+declare function ComparisonTable({ locale, title, description, options, features, showCheckmarks, stickyHeader, className }: ComparisonTableProps): react_jsx_runtime.JSX.Element;
+
+interface BlogCardProps {
+    /** Current locale */
+    locale?: 'en' | 'fr';
+    /** Article title (bilingual) */
+    title: LocalizedString$2 | string;
+    /** Article excerpt (bilingual) */
+    excerpt?: LocalizedString$2 | string;
+    /** Featured image URL */
+    image?: string;
+    /** Image alt text */
+    imageAlt?: string;
+    /** Article URL */
+    href: string;
+    /** Author name */
+    author?: string;
+    /** Author avatar URL */
+    authorAvatar?: string;
+    /** Publication date */
+    date?: string;
+    /** Read time in minutes */
+    readTime?: number;
+    /** Tags/categories */
+    tags?: string[];
+    /** Card variant @default 'default' */
+    variant?: 'default' | 'horizontal' | 'minimal';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * BlogCard - Article preview card for blog listings
+ *
+ * Displays article previews with images, metadata, and hover effects.
+ * Perfect for blog indexes, related posts, and content grids.
+ *
+ * @example
+ * // Basic usage
+ * <BlogCard
+ *   title={{ en: "10 Tips for Better UX", fr: "10 conseils pour une meilleure UX" }}
+ *   excerpt="Improve your user experience with these proven strategies..."
+ *   image="/blog/ux-tips.jpg"
+ *   href="/blog/ux-tips"
+ *   author="Jane Doe"
+ *   date="Jan 15, 2024"
+ *   readTime={5}
+ *   tags={['UX', 'Design']}
+ *   locale="en"
+ * />
+ *
+ * @example
+ * // Horizontal variant
+ * <BlogCard
+ *   title="Latest Product Updates"
+ *   excerpt="See what's new in our latest release"
+ *   image="/blog/updates.jpg"
+ *   href="/blog/updates"
+ *   variant="horizontal"
+ *   author="Product Team"
+ *   authorAvatar="/team/product.jpg"
+ *   date="2024-01-20"
+ * />
+ *
+ * @example
+ * // Minimal variant (no image)
+ * <BlogCard
+ *   title="Quick Announcement"
+ *   excerpt="Brief update about our services"
+ *   href="/blog/announcement"
+ *   variant="minimal"
+ *   date="Today"
+ *   readTime={2}
+ * />
+ */
+declare function BlogCard({ locale, title, excerpt, image, imageAlt, href, author, authorAvatar, date, readTime, tags, variant, className }: BlogCardProps): react_jsx_runtime.JSX.Element;
+
+interface LazySectionProps {
+    /** Component to lazy load */
+    component: () => Promise<{
+        default: ComponentType<any>;
+    }>;
+    /** Props to pass to the lazy component */
+    componentProps?: Record<string, any>;
+    /** Custom loading component */
+    fallback?: ReactNode;
+    /** Load when in viewport @default true */
+    loadOnView?: boolean;
+    /** Viewport intersection threshold @default 0.1 */
+    threshold?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * LazySection - Code-split sections with lazy loading
+ *
+ * Automatically lazy loads components when they enter the viewport,
+ * reducing initial bundle size and improving performance. Perfect for
+ * below-the-fold content, heavy components, and conditional features.
+ *
+ * @example
+ * // Lazy load a heavy features section
+ * <LazySection
+ *   component={() => import('./sections/FeaturesSection')}
+ *   componentProps={{
+ *     title: "Our Features",
+ *     features: featuresData
+ *   }}
+ * />
+ *
+ * @example
+ * // With custom loading skeleton
+ * <LazySection
+ *   component={() => import('./sections/TestimonialsSection')}
+ *   fallback={
+ *     <div className="py-16">
+ *       <Skeleton.Card count={3} />
+ *     </div>
+ *   }
+ *   loadOnView
+ *   threshold={0.2}
+ * />
+ *
+ * @example
+ * // Load immediately (no viewport detection)
+ * <LazySection
+ *   component={() => import('./sections/PricingSection')}
+ *   loadOnView={false}
+ *   componentProps={{ locale: 'en' }}
+ * />
+ */
+declare function LazySection({ component, componentProps, fallback, loadOnView, threshold, className }: LazySectionProps): react_jsx_runtime.JSX.Element;
+/**
+ * Higher-order component to make any component lazy-loadable
+ *
+ * @example
+ * // Create a lazy version of any component
+ * const LazyFeatures = withLazyLoad(() => import('./FeaturesSection'))
+ *
+ * // Use it like the original component
+ * <LazyFeatures title="Features" features={data} />
+ *
+ * @example
+ * // With custom fallback
+ * const LazyPricing = withLazyLoad(
+ *   () => import('./PricingSection'),
+ *   <div>Loading pricing...</div>
+ * )
+ */
+declare function withLazyLoad<P extends object>(importFunc: () => Promise<{
+    default: ComponentType<P>;
+}>, fallback?: ReactNode): ComponentType<P>;
+
+interface CodeBlockProps {
+    /** Code to display */
+    code: string;
+    /** Language for syntax highlighting @default 'tsx' */
+    language?: string;
+    /** Show line numbers @default false */
+    showLineNumbers?: boolean;
+    /** Show copy button @default true */
+    showCopy?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CodeBlock - Display code with syntax highlighting
+ *
+ * Shows formatted code with syntax highlighting and optional copy button.
+ * Perfect for documentation, examples, and style guides.
+ *
+ * @example
+ * <CodeBlock
+ *   code={`<Button variant="filled">Click me</Button>`}
+ *   language="tsx"
+ * />
+ */
+declare function CodeBlock({ code, language, showLineNumbers, showCopy, className }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+/**
+ * InlineCode - Inline code snippet
+ *
+ * @example
+ * <InlineCode>npm install</InlineCode>
+ */
+declare function InlineCode({ children }: {
+    children: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface ComponentDemoProps {
+    /** Component title */
+    title: string;
+    /** Component description */
+    description?: string;
+    /** Live component preview */
+    children: ReactNode;
+    /** Code example */
+    code: string;
+    /** Props documentation */
+    props?: Array<{
+        name: string;
+        type: string;
+        default?: string;
+        description: string;
+    }>;
+    /** Show code by default @default false */
+    defaultShowCode?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ComponentDemo - Show component with live preview and code
+ *
+ * Displays a component example with its code and optional props documentation.
+ * Used in StyleGuide and documentation.
+ *
+ * @example
+ * <ComponentDemo
+ *   title="Button"
+ *   description="Primary action button"
+ *   code={`<Button variant="filled">Click me</Button>`}
+ *   props={[
+ *     { name: 'variant', type: 'string', default: 'outlined', description: 'Visual style' }
+ *   ]}
+ * >
+ *   <Button variant="filled">Click me</Button>
+ * </ComponentDemo>
+ */
+declare function ComponentDemo({ title, description, children, code, props, defaultShowCode, className }: ComponentDemoProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Slug translations mapping for bilingual/multilingual routes
+ * Maps slugs from one locale to another
+ *
+ * @example
+ * {
+ *   fr: {
+ *     '/a-propos': '/about',
+ *     '/nous-contacter': '/contact'
+ *   },
+ *   en: {
+ *     '/about': '/a-propos',
+ *     '/contact': '/nous-contacter'
+ *   }
+ * }
+ */
+interface SlugTranslations {
+    [locale: string]: {
+        [slug: string]: string;
+    };
+}
+/**
+ * Type-safe localized string object
+ * Maps locale codes to translated strings
+ *
+ * @example
+ * const title: LocalizedString = {
+ *   en: 'Welcome',
+ *   fr: 'Bienvenue',
+ *   es: 'Bienvenido'
+ * };
+ */
+interface LocalizedString$1 {
+    [locale: string]: string;
+}
+
+/**
+ * @deprecated Import from config schemas instead
+ */
+type Locale = 'fr' | 'en';
+
+interface LocalizedString {
+    [locale: string]: string;
+}
+interface NavLink {
+    id: string;
+    label: LocalizedString;
+    href: string | LocalizedString;
+    external?: boolean;
+    icon?: string;
+}
+interface NavDropdownItem extends NavLink {
+    description?: LocalizedString;
+}
+interface NavDropdown {
+    id: string;
+    label: LocalizedString;
+    type: 'dropdown';
+    children: NavDropdownItem[];
+    cta?: {
+        label: LocalizedString;
+        href: string;
+        external?: boolean;
+    };
+}
+type NavItem = NavLink | NavDropdown;
+interface LogoConfig {
+    text?: LocalizedString;
+    image?: string;
+    imageAlt?: LocalizedString;
+    href: string;
+    width?: number;
+    height?: number;
+    displayHeight?: number;
+}
+interface HeaderConfig {
+    logo: LogoConfig;
+    mainNav: NavItem[];
+    utilityNav: NavLink[];
+    dropdownStyle?: 'mega' | 'simple';
+}
+interface FooterSection {
+    heading?: LocalizedString;
+    links: NavLink[];
+}
+interface SocialLink {
+    platform: string;
+    url: string;
+    icon: string;
+    label: LocalizedString;
+}
+interface PoweredByConfig {
+    text: LocalizedString;
+    logo?: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    href?: string;
+}
+interface FooterConfig {
+    sections?: FooterSection[];
+    copyright: LocalizedString;
+    tagline?: LocalizedString;
+    social?: SocialLink[];
+    poweredBy?: PoweredByConfig;
+    backgroundColor?: string;
+}
+
+interface HeaderProps {
+    locale: Locale;
+    config: HeaderConfig;
+}
+declare function Header({ locale, config }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+interface FooterProps {
+    locale: Locale;
+    config: FooterConfig;
+}
+declare function Footer({ locale, config }: FooterProps): react_jsx_runtime.JSX.Element;
+
+interface LanguageSelectorProps {
+    /** Current locale */
+    currentLocale: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Display variant @default 'auto' */
+    variant?: 'text' | 'dropdown' | 'auto';
+    /** Custom slug translations */
+    customSlugTranslations?: SlugTranslations;
+}
+/**
+ * LanguageSelector - Scalable language switcher component
+ *
+ * Automatically adapts between text toggle (2 languages) and dropdown (3+)
+ * Supports all 3 locale prefix modes and slug translation
+ *
+ * @example
+ * ```tsx
+ * // Auto-detects variant
+ * <LanguageSelector currentLocale={locale} />
+ *
+ * // Force dropdown
+ * <LanguageSelector currentLocale={locale} variant="dropdown" />
+ *
+ * // With custom slug translations
+ * <LanguageSelector
+ *   currentLocale={locale}
+ *   customSlugTranslations={myTranslations}
+ * />
+ * ```
+ */
+declare function LanguageSelector({ currentLocale, className, variant, customSlugTranslations, }: LanguageSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface LanguageSwitcherProps {
+    currentLocale: string;
+    className?: string;
+    customSlugTranslations?: SlugTranslations;
+}
+/**
+ * @deprecated Use LanguageSelector instead. This component will be removed in v1.0.0
+ *
+ * This is now a thin wrapper around LanguageSelector for backward compatibility.
+ * Update your code to use LanguageSelector:
+ *
+ * ```tsx
+ * import { LanguageSelector } from 'simple-site-framework/components/layout/LanguageSelector';
+ * <LanguageSelector currentLocale={locale} />
+ * ```
+ */
+declare function LanguageSwitcher({ currentLocale, className, customSlugTranslations, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
+
+interface HeroAnimations {
+    /** Animation type for headline */
+    headline?: 'fadeInUp' | 'fadeIn' | 'slideInLeft' | 'none';
+    /** Animation type for CTA buttons */
+    cta?: 'fadeInUp' | 'fadeIn' | 'none';
+    /** Stagger delay between elements (seconds) */
+    stagger?: number;
+    /** Show scroll indicator */
+    scrollIndicator?: boolean;
+}
+interface HeroSectionProps {
+    locale: Locale;
+    content: HeroContent;
+    /** Animation configuration */
+    animations?: HeroAnimations;
+    /** Show sticky CTA after scrolling past hero */
+    stickyCtaAfterScroll?: boolean;
+    /** Trust badges to display */
+    trustBadges?: Badge[];
+    /** Background effect variant */
+    backgroundEffect?: 'none' | 'particles' | 'gradient-shift' | 'mesh';
+}
+declare function HeroSection({ locale, content, animations, stickyCtaAfterScroll, trustBadges, backgroundEffect, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
+
+interface AboutSectionProps {
+    locale: Locale;
+    content: AboutContent;
+}
+declare function AboutSection({ locale, content }: AboutSectionProps): react_jsx_runtime.JSX.Element;
+
+interface WhyChooseUsSectionProps {
+    locale: Locale;
+    content: WhyChooseUsContent;
+}
+declare function WhyChooseUsSection({ locale, content }: WhyChooseUsSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ServicesSectionProps {
+    locale: Locale;
+    content: ServicesContent;
+}
+declare function ServicesSection({ locale, content }: ServicesSectionProps): react_jsx_runtime.JSX.Element;
+
+interface OfficeHours {
+    monday?: {
+        open: string;
+        close: string;
+    };
+    tuesday?: {
+        open: string;
+        close: string;
+    };
+    wednesday?: {
+        open: string;
+        close: string;
+    };
+    thursday?: {
+        open: string;
+        close: string;
+    };
+    friday?: {
+        open: string;
+        close: string;
+    };
+    saturday?: {
+        open: string;
+        close: string;
+    };
+    sunday?: {
+        open: string;
+        close: string;
+    };
+}
+interface Location {
+    name: LocalizedString$2 | string;
+    address: string;
+    phone?: string;
+    email?: string;
+    hours?: OfficeHours;
+    coordinates?: {
+        lat: number;
+        lng: number;
+    };
+}
+interface MapConfig {
+    provider?: 'google' | 'static' | 'link';
+    apiKey?: string;
+    zoom?: number;
+}
+interface SpamProtection {
+    honeypot?: boolean;
+    recaptcha?: string;
+}
+interface FormIntegration {
+    type: 'sendgrid' | 'mailgun' | 'webhook' | 'custom';
+    config: Record<string, any>;
+}
+interface ContactFormConfig {
+    enabled?: boolean;
+    fields?: Array<'name' | 'email' | 'phone' | 'subject' | 'message' | 'attachment'>;
+    requiredFields?: Array<'name' | 'email' | 'phone' | 'subject' | 'message'>;
+    onSubmit?: (data: ContactFormData$1) => Promise<void>;
+    spamProtection?: SpamProtection;
+    integration?: FormIntegration;
+}
+interface ContactSectionProps {
+    locale: Locale;
+    title?: LocalizedString$2 | string;
+    description?: LocalizedString$2 | string;
+    form?: ContactFormConfig;
+    locations?: Location[];
+    defaultLocation?: number;
+    map?: MapConfig;
+    showMap?: boolean;
+    showInfo?: boolean;
+    timezone?: string;
+    showStatus?: boolean;
+    className?: string;
+}
+interface ContactFormData$1 {
+    name: string;
+    email: string;
+    phone?: string;
+    subject?: string;
+    message: string;
+    attachment?: File;
+    _honeypot?: string;
+}
+declare function ContactSection({ locale, title, description, form, locations, defaultLocation, map, showMap, showInfo, timezone, showStatus, className, }: ContactSectionProps): react_jsx_runtime.JSX.Element;
+
+interface SecurePortalSectionProps {
+    locale: Locale;
+    portalUrl: string;
+}
+declare function SecurePortalSection({ locale, portalUrl }: SecurePortalSectionProps): react_jsx_runtime.JSX.Element;
+
+interface PersonalTaxesSectionProps {
+    locale: Locale;
+}
+declare function PersonalTaxesSection({ locale }: PersonalTaxesSectionProps): react_jsx_runtime.JSX.Element;
+
+interface RecruitingSectionProps {
+    locale: Locale;
+}
+declare function RecruitingSection({ locale }: RecruitingSectionProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+declare function Breadcrumb({ items, className }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+interface ServicePageLayoutProps {
+    locale: Locale;
+    title: string;
+    description: string;
+    children?: ReactNode;
+    breadcrumbItems: BreadcrumbItem[];
+    showCTA?: boolean;
+}
+declare function ServicePageLayout({ locale, title, description, children, breadcrumbItems, showCTA, }: ServicePageLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface Logo {
+    name: string;
+    image: string;
+    url?: string;
+}
+interface LogosContent {
+    heading: {
+        [locale: string]: string;
+    };
+    description?: {
+        [locale: string]: string;
+    };
+    logos: Logo[];
+}
+interface LogosSectionProps {
+    locale: Locale;
+    content: LogosContent;
+}
+declare function LogosSection({ locale, content }: LogosSectionProps): react_jsx_runtime.JSX.Element;
+
+interface TestimonialContent {
+    quote: {
+        [locale: string]: string;
+    };
+    author?: {
+        [locale: string]: string;
+    };
+    role?: {
+        [locale: string]: string;
+    };
+    company?: {
+        [locale: string]: string;
+    };
+}
+interface TestimonialSectionProps {
+    locale: Locale;
+    content: TestimonialContent;
+}
+declare function TestimonialSection({ locale, content }: TestimonialSectionProps): react_jsx_runtime.JSX.Element;
+
+interface FeatureSectionContent {
+    id: string;
+    heading: {
+        [locale: string]: string;
+    };
+    subheading?: {
+        [locale: string]: string;
+    };
+    description: {
+        [locale: string]: string;
+    };
+    image: string;
+    cta?: {
+        text: {
+            [locale: string]: string;
+        };
+        href: string;
+    };
+    imagePosition?: 'left' | 'right';
+}
+interface FeatureSectionProps {
+    locale: Locale;
+    content: FeatureSectionContent;
+    backgroundColor?: string;
+}
+declare function FeatureSection({ locale, content, backgroundColor }: FeatureSectionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Metric for displaying results/improvements
+ */
+interface CaseStudyMetric {
+    /** Metric label (e.g., "Revenue Growth", "Time Saved") */
+    label: LocalizedString$1 | string;
+    /** Metric value (e.g., "150%", "$2M", "20 hours/week") */
+    value: LocalizedString$1 | string;
+    /** Optional icon name from lucide-react */
+    icon?: string;
+}
+/**
+ * Individual case study data
+ */
+interface CaseStudy {
+    /** Unique identifier */
+    id: string;
+    /** Company/customer name */
+    company: LocalizedString$1 | string;
+    /** Company logo URL */
+    logo?: string;
+    /** Customer photo/avatar URL */
+    image?: string;
+    /** Industry or category */
+    industry?: LocalizedString$1 | string;
+    /** Quote or testimonial */
+    quote: LocalizedString$1 | string;
+    /** Person who gave the quote */
+    author?: {
+        name: string;
+        title?: LocalizedString$1 | string;
+        avatar?: string;
+    };
+    /** Key metrics or results */
+    metrics?: CaseStudyMetric[];
+    /** Challenge or problem statement */
+    challenge?: LocalizedString$1 | string;
+    /** Solution description */
+    solution?: LocalizedString$1 | string;
+    /** Full case study URL */
+    url?: string;
+    /** Call to action text */
+    ctaText?: LocalizedString$1 | string;
+}
+interface CaseStudySectionProps {
+    /** Section title */
+    title?: LocalizedString$1 | string;
+    /** Section description */
+    description?: LocalizedString$1 | string;
+    /** Array of case studies to display */
+    caseStudies: CaseStudy[];
+    /** Current locale for i18n */
+    locale?: string;
+    /** Layout variant */
+    variant?: 'grid' | 'carousel' | 'featured';
+    /** Number of columns for grid layout */
+    columns?: 2 | 3 | 4;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show metrics section */
+    showMetrics?: boolean;
+    /** Show challenge/solution sections */
+    showDetails?: boolean;
+    /** Custom CTA renderer */
+    renderCTA?: (caseStudy: CaseStudy) => ReactNode;
+}
+/**
+ * Case Study Section Component
+ *
+ * Displays customer success stories and testimonials to build trust.
+ * Supports multiple layouts and customizable content.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CaseStudySection
+ *   title="Customer Success Stories"
+ *   description="See how companies achieve results with our platform"
+ *   caseStudies={[
+ *     {
+ *       id: '1',
+ *       company: 'Acme Corp',
+ *       logo: '/logos/acme.png',
+ *       quote: 'Increased our email ROI by 300% in just 3 months',
+ *       author: {
+ *         name: 'Jane Doe',
+ *         title: 'Marketing Director'
+ *       },
+ *       metrics: [
+ *         { label: 'ROI Increase', value: '300%' },
+ *         { label: 'Time Saved', value: '15 hrs/week' }
+ *       ]
+ *     }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example With challenge/solution
+ * ```tsx
+ * <CaseStudySection
+ *   caseStudies={[
+ *     {
+ *       id: '1',
+ *       company: 'TechStart Inc',
+ *       challenge: 'Struggled with low email engagement and deliverability',
+ *       solution: 'Implemented our automation and segmentation features',
+ *       metrics: [
+ *         { label: 'Open Rate', value: '+45%' },
+ *         { label: 'Click Rate', value: '+120%' }
+ *       ]
+ *     }
+ *   ]}
+ *   showDetails={true}
+ * />
+ * ```
+ */
+declare function CaseStudySection({ title, description, caseStudies, locale, variant, columns, className, showMetrics, showDetails, renderCTA, }: CaseStudySectionProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual variant of the button
+     * - outlined: Rounded with border (primary brand style)
+     * - filled: Solid background with shadow
+     * - text: Text-only button without border
+     * - ghost: Transparent background, visible on hover
+     * - link: Styled like a link, but button semantics
+     * - destructive: Red variant for delete/remove actions
+     */
+    variant?: 'outlined' | 'filled' | 'text' | 'ghost' | 'link' | 'destructive';
+    /**
+     * Size of the button
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Full width button
+     */
+    fullWidth?: boolean;
+    /**
+     * Loading state - shows spinner and disables button
+     */
+    loading?: boolean;
+    /**
+     * Custom text to show during loading
+     */
+    loadingText?: string;
+    /**
+     * Success state - shows checkmark animation
+     */
+    success?: boolean;
+    /**
+     * Custom text to show during success
+     */
+    successText?: string;
+    /**
+     * Duration to show success state before reverting (ms)
+     */
+    successDuration?: number;
+    /**
+     * Icon element to display
+     */
+    icon?: ReactNode;
+    /**
+     * Position of the icon
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Icon-only button (no text)
+     */
+    iconOnly?: boolean;
+    /**
+     * Tooltip text to show when button is disabled
+     */
+    disabledTooltip?: string;
+    /**
+     * Enable ripple effect on click
+     */
+    ripple?: boolean;
+    /**
+     * Analytics event name to track on click
+     * Automatically tracks button clicks with this event name
+     */
+    trackingEvent?: string;
+    /**
+     * Additional properties to send with tracking event
+     * Merged with automatic button properties (variant, text, href)
+     */
+    trackingProps?: Record<string, unknown>;
+    /**
+     * Link href (for navigation buttons)
+     */
+    href?: string;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Padding variant
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Whether to show a border
+     */
+    bordered?: boolean;
+    /**
+     * Whether to show a shadow
+     */
+    shadow?: boolean;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below input
+     */
+    helperText?: string;
+    /**
+     * Full width input
+     */
+    fullWidth?: boolean;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Label text for the textarea
+     */
+    label?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below textarea
+     */
+    helperText?: string;
+    /**
+     * Full width textarea
+     */
+    fullWidth?: boolean;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface PhoneLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Phone number (will be formatted for tel: protocol) */
+    phone: string;
+    /** Link content (defaults to phone number) */
+    children?: ReactNode;
+}
+/**
+ * PhoneLink - Creates a clickable phone link for mobile devices
+ *
+ * Automatically formats phone number for tel: protocol and enables
+ * one-tap calling on mobile devices.
+ *
+ * @example
+ * ```tsx
+ * <PhoneLink phone="+1-555-123-4567">
+ *   Call Us Now
+ * </PhoneLink>
+ * ```
+ */
+declare function PhoneLink({ phone, children, className, ...props }: PhoneLinkProps): react_jsx_runtime.JSX.Element;
+interface EmailLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Email address */
+    email: string;
+    /** Optional email subject */
+    subject?: string;
+    /** Optional email body */
+    body?: string;
+    /** Link content (defaults to email address) */
+    children?: ReactNode;
+}
+/**
+ * EmailLink - Creates a mailto: link for email
+ *
+ * Opens email client with pre-filled recipient, subject, and body.
+ *
+ * @example
+ * ```tsx
+ * <EmailLink
+ *   email="hello@example.com"
+ *   subject="Contact from website"
+ * >
+ *   Email Us
+ * </EmailLink>
+ * ```
+ */
+declare function EmailLink({ email, subject, body, children, className, ...props }: EmailLinkProps): react_jsx_runtime.JSX.Element;
+interface AddressLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Physical address */
+    address: string;
+    /** Link content (defaults to address) */
+    children?: ReactNode;
+}
+/**
+ * AddressLink - Creates a link to Google Maps for an address
+ *
+ * Opens address in Google Maps (works on both iOS and Android).
+ * Opens in new tab for desktop convenience.
+ *
+ * @example
+ * ```tsx
+ * <AddressLink address="123 Main St, New York, NY 10001">
+ *   Get Directions
+ * </AddressLink>
+ * ```
+ */
+declare function AddressLink({ address, children, className, ...props }: AddressLinkProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Contact form field configuration
+ */
+interface ContactFormField {
+    /** Field name/id */
+    name: string;
+    /** Field label */
+    label: LocalizedString$1 | string;
+    /** Field type */
+    type?: 'text' | 'email' | 'tel' | 'url' | 'textarea';
+    /** Placeholder text */
+    placeholder?: LocalizedString$1 | string;
+    /** Whether field is required */
+    required?: boolean;
+    /** Number of rows for textarea */
+    rows?: number;
+    /** Help text */
+    helperText?: LocalizedString$1 | string;
+}
+/**
+ * Contact form submission data
+ */
+interface ContactFormData {
+    [key: string]: string;
+}
+/**
+ * Contact form submission response
+ */
+interface ContactFormResponse {
+    /** Whether submission was successful */
+    success: boolean;
+    /** Response message */
+    message?: string;
+    /** Error details if failed */
+    error?: string;
+}
+interface ContactFormProps {
+    /** Form title */
+    title?: LocalizedString$1 | string;
+    /** Form description */
+    description?: LocalizedString$1 | string;
+    /** Array of form fields */
+    fields?: ContactFormField[];
+    /** Submit button text */
+    submitText?: LocalizedString$1 | string;
+    /** Success message */
+    successMessage?: LocalizedString$1 | string;
+    /** Error message */
+    errorMessage?: LocalizedString$1 | string;
+    /** Form submission handler */
+    onSubmit: (data: ContactFormData) => Promise<ContactFormResponse>;
+    /** Current locale for i18n */
+    locale?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show privacy notice */
+    showPrivacyNotice?: boolean;
+    /** Privacy notice text */
+    privacyNoticeText?: LocalizedString$1 | string;
+    /** Privacy policy URL */
+    privacyPolicyUrl?: string;
+    /** Enable honeypot spam protection */
+    enableHoneypot?: boolean;
+}
+/**
+ * Contact Form Component
+ *
+ * Production-ready contact form with validation, accessibility,
+ * and spam protection.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ContactForm
+ *   onSubmit={async (data) => {
+ *     const response = await fetch('/api/contact', {
+ *       method: 'POST',
+ *       body: JSON.stringify(data),
+ *     });
+ *     return response.json();
+ *   }}
+ * />
+ * ```
+ *
+ * @example Custom fields
+ * ```tsx
+ * <ContactForm
+ *   fields={[
+ *     { name: 'name', label: 'Name', type: 'text', required: true },
+ *     { name: 'email', label: 'Email', type: 'email', required: true },
+ *     { name: 'company', label: 'Company', type: 'text', required: false },
+ *     { name: 'message', label: 'Message', type: 'textarea', required: true, rows: 6 }
+ *   ]}
+ *   onSubmit={handleSubmit}
+ * />
+ * ```
+ *
+ * @example With privacy notice
+ * ```tsx
+ * <ContactForm
+ *   showPrivacyNotice={true}
+ *   privacyPolicyUrl="/privacy"
+ *   onSubmit={handleSubmit}
+ * />
+ * ```
+ */
+declare function ContactForm({ title, description, fields, submitText, successMessage, errorMessage, onSubmit, locale, className, showPrivacyNotice, privacyNoticeText, privacyPolicyUrl, enableHoneypot, }: ContactFormProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeConfig {
+    brand: {
+        name: string;
+        colors: {
+            primary: string;
+            primaryHover: string;
+            primaryLight: string;
+            primaryDark: string;
+            primaryGradientStart: string;
+            primaryGradientEnd: string;
+            heroGradientStart: string;
+            heroGradientEnd: string;
+            footerGradientStart: string;
+            footerGradientEnd: string;
+        };
+        fonts: {
+            heading: {
+                family: string;
+                weights: number[];
+                fallback: string;
+            };
+            body: {
+                family: string;
+                weights: number[];
+                fallback: string;
+            };
+        };
+    };
+    design: {
+        borderRadius: 'sharp' | 'rounded' | 'pill';
+        shadows: 'flat' | 'subtle' | 'prominent';
+        spacing: 'compact' | 'comfortable' | 'spacious';
+    };
+    animations?: {
+        speed?: 'slow' | 'normal' | 'fast';
+        reduceMotion?: boolean;
+    };
+    colors: {
+        slate: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+}
+
+interface StyleGuideProps {
+    locale: Locale;
+    theme: ThemeConfig;
+    logo?: LogoConfig;
+    favicon?: string;
+    /** Show code examples @default false */
+    showCode?: boolean;
+    /** Show interactive props editor @default false */
+    interactive?: boolean;
+    /** Show component search @default false */
+    searchable?: boolean;
+}
+declare function StyleGuide({ locale, theme, logo, favicon, showCode, interactive, searchable }: StyleGuideProps): react_jsx_runtime.JSX.Element;
+
+interface HeadScriptsProps {
+    /**
+     * Array of HTML strings to inject in <head>
+     * Can include <script>, <link>, <meta>, etc.
+     */
+    scripts?: string[];
+}
+interface BodyEndScriptsProps {
+    /**
+     * Array of HTML strings to inject before </body>
+     * Typically chat widgets, tracking pixels, etc.
+     */
+    scripts?: string[];
+}
+/**
+ * Injects scripts into document head
+ * Use in your root layout's <head> section
+ */
+declare function HeadScripts({ scripts }: HeadScriptsProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Injects scripts at end of body
+ * Use in your root layout before closing </body>
+ */
+declare function BodyEndScripts({ scripts }: BodyEndScriptsProps): null;
+
+interface Feature {
+    id: string;
+    icon?: ReactNode;
+    name: string;
+    description: string;
+    benefits?: string[];
+    useCases?: string[];
+    learnMoreHref?: string;
+}
+interface FeatureCategory {
+    id: string;
+    name: string;
+    description: string;
+    features: Feature[];
+}
+interface FeaturesGridProps {
+    categories: FeatureCategory[];
+    className?: string;
+    locale?: 'fr' | 'en';
+}
+declare function FeaturesGrid({ categories, className, locale }: FeaturesGridProps): react_jsx_runtime.JSX.Element;
+
+type IconName = string;
+interface IconProps extends Omit<LucideProps, 'ref'> {
+    /** Icon name from Lucide React */
+    name: IconName;
+    /** Icon size in pixels @default 24 */
+    size?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Icon - Lucide React icon wrapper
+ *
+ * Type-safe wrapper for Lucide React icons with preset configurations.
+ * Supports all 1000+ Lucide icons with tree-shaking.
+ *
+ * @example
+ * // Basic usage
+ * <Icon name="Check" size={24} />
+ *
+ * @example
+ * // With styling
+ * <Icon
+ *   name="ChevronDown"
+ *   size={20}
+ *   className="text-primary"
+ * />
+ *
+ * @example
+ * // With animation
+ * <Icon
+ *   name="Loader2"
+ *   className="animate-spin text-white"
+ * />
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const Icons: {
+    ChevronDown: react.ComponentType<Omit<IconProps, "name">>;
+    ChevronUp: react.ComponentType<Omit<IconProps, "name">>;
+    ChevronLeft: react.ComponentType<Omit<IconProps, "name">>;
+    ChevronRight: react.ComponentType<Omit<IconProps, "name">>;
+    Menu: react.ComponentType<Omit<IconProps, "name">>;
+    X: react.ComponentType<Omit<IconProps, "name">>;
+    Check: react.ComponentType<Omit<IconProps, "name">>;
+    CheckCircle: react.ComponentType<Omit<IconProps, "name">>;
+    Plus: react.ComponentType<Omit<IconProps, "name">>;
+    Minus: react.ComponentType<Omit<IconProps, "name">>;
+    Edit: react.ComponentType<Omit<IconProps, "name">>;
+    Trash: react.ComponentType<Omit<IconProps, "name">>;
+    Copy: react.ComponentType<Omit<IconProps, "name">>;
+    Download: react.ComponentType<Omit<IconProps, "name">>;
+    Upload: react.ComponentType<Omit<IconProps, "name">>;
+    Loader: react.ComponentType<Omit<IconProps, "name">>;
+    AlertCircle: react.ComponentType<Omit<IconProps, "name">>;
+    AlertTriangle: react.ComponentType<Omit<IconProps, "name">>;
+    Info: react.ComponentType<Omit<IconProps, "name">>;
+    Mail: react.ComponentType<Omit<IconProps, "name">>;
+    Phone: react.ComponentType<Omit<IconProps, "name">>;
+    MessageCircle: react.ComponentType<Omit<IconProps, "name">>;
+    Send: react.ComponentType<Omit<IconProps, "name">>;
+    Image: react.ComponentType<Omit<IconProps, "name">>;
+    Video: react.ComponentType<Omit<IconProps, "name">>;
+    Play: react.ComponentType<Omit<IconProps, "name">>;
+    Pause: react.ComponentType<Omit<IconProps, "name">>;
+    Calendar: react.ComponentType<Omit<IconProps, "name">>;
+    Clock: react.ComponentType<Omit<IconProps, "name">>;
+    DollarSign: react.ComponentType<Omit<IconProps, "name">>;
+    CreditCard: react.ComponentType<Omit<IconProps, "name">>;
+    ShoppingCart: react.ComponentType<Omit<IconProps, "name">>;
+    Twitter: react.ComponentType<Omit<IconProps, "name">>;
+    Facebook: react.ComponentType<Omit<IconProps, "name">>;
+    Linkedin: react.ComponentType<Omit<IconProps, "name">>;
+    Instagram: react.ComponentType<Omit<IconProps, "name">>;
+    Github: react.ComponentType<Omit<IconProps, "name">>;
+    File: react.ComponentType<Omit<IconProps, "name">>;
+    FileText: react.ComponentType<Omit<IconProps, "name">>;
+    Folder: react.ComponentType<Omit<IconProps, "name">>;
+    Settings: react.ComponentType<Omit<IconProps, "name">>;
+    Search: react.ComponentType<Omit<IconProps, "name">>;
+    Filter: react.ComponentType<Omit<IconProps, "name">>;
+    ArrowRight: react.ComponentType<Omit<IconProps, "name">>;
+    ArrowLeft: react.ComponentType<Omit<IconProps, "name">>;
+    ArrowUp: react.ComponentType<Omit<IconProps, "name">>;
+    ArrowDown: react.ComponentType<Omit<IconProps, "name">>;
+    Heart: react.ComponentType<Omit<IconProps, "name">>;
+    Star: react.ComponentType<Omit<IconProps, "name">>;
+    Lock: react.ComponentType<Omit<IconProps, "name">>;
+    Unlock: react.ComponentType<Omit<IconProps, "name">>;
+    Eye: react.ComponentType<Omit<IconProps, "name">>;
+    EyeOff: react.ComponentType<Omit<IconProps, "name">>;
+    Home: react.ComponentType<Omit<IconProps, "name">>;
+    User: react.ComponentType<Omit<IconProps, "name">>;
+    Users: react.ComponentType<Omit<IconProps, "name">>;
+    Bell: react.ComponentType<Omit<IconProps, "name">>;
+    MapPin: react.ComponentType<Omit<IconProps, "name">>;
+    Globe: react.ComponentType<Omit<IconProps, "name">>;
+    Zap: react.ComponentType<Omit<IconProps, "name">>;
+    Award: react.ComponentType<Omit<IconProps, "name">>;
+    Shield: react.ComponentType<Omit<IconProps, "name">>;
+    TrendingUp: react.ComponentType<Omit<IconProps, "name">>;
+    ExternalLink: react.ComponentType<Omit<IconProps, "name">>;
+};
+
+interface FormFieldARIAProps {
+    /** Field label text */
+    label?: string;
+    /** Field name (matches form schema and input id) */
+    name: string;
+    /** Error object from React Hook Form */
+    error?: FieldError;
+    /** Optional hint text shown below input */
+    hint?: string;
+    /** Whether field is required */
+    required?: boolean;
+    /** Whether field is disabled */
+    disabled?: boolean;
+    /** Input element to render */
+    children: ReactElement;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * FormFieldARIA - ARIA-enhanced form field wrapper
+ *
+ * Provides comprehensive accessibility support including:
+ * - aria-required for required fields
+ * - aria-invalid for error states
+ * - aria-describedby linking to hints and errors
+ * - Live regions for error announcements
+ * - Proper label association
+ * - Screen reader optimizations
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FormFieldARIA
+ *   name="email"
+ *   label="Email Address"
+ *   error={errors.email}
+ *   hint="We'll never share your email"
+ *   required
+ * >
+ *   <input type="email" id="email" {...register('email')} />
+ * </FormFieldARIA>
+ * ```
+ *
+ * @example With textarea
+ * ```tsx
+ * <FormFieldARIA name="message" label="Message" required>
+ *   <textarea id="message" {...register('message')} />
+ * </FormFieldARIA>
+ * ```
+ *
+ * @example With custom component
+ * ```tsx
+ * <FormFieldARIA name="country" label="Country" error={errors.country}>
+ *   <Select id="country" options={countries} {...field} />
+ * </FormFieldARIA>
+ * ```
+ */
+declare function FormFieldARIA({ label, name, error, hint, required, disabled, children, className, }: FormFieldARIAProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxGroupARIAOption {
+    value: string;
+    label: LocalizedString$1 | string;
+    description?: LocalizedString$1 | string;
+    disabled?: boolean;
+}
+interface CheckboxGroupARIAProps {
+    /** Field name (for form integration) */
+    name: string;
+    /** Group label */
+    label: LocalizedString$1 | string;
+    /** Current locale for localized labels */
+    locale?: string;
+    /** Array of checkbox options */
+    options: CheckboxGroupARIAOption[];
+    /** Selected values */
+    value?: string[];
+    /** Callback when selection changes */
+    onChange?: (value: string[]) => void;
+    /** Error message */
+    error?: string;
+    /** Whether group is required */
+    required?: boolean;
+    /** Disabled state for entire group */
+    disabled?: boolean;
+    /** Display layout */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /** Grid columns (only for grid layout) */
+    columns?: 2 | 3 | 4;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CheckboxGroupARIA - ARIA-enhanced checkbox group
+ *
+ * Provides comprehensive accessibility for checkbox groups including:
+ * - Proper fieldset/legend structure
+ * - role="group" with aria-labelledby
+ * - aria-required for required groups
+ * - aria-invalid for error states
+ * - aria-describedby linking to errors
+ * - Individual checkbox ARIA support
+ * - Screen reader announcements
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CheckboxGroupARIA
+ *   name="features"
+ *   label="Select Features"
+ *   options={[
+ *     { value: 'analytics', label: 'Analytics' },
+ *     { value: 'reporting', label: 'Reporting' },
+ *     { value: 'api', label: 'API Access' }
+ *   ]}
+ *   value={selectedFeatures}
+ *   onChange={setSelectedFeatures}
+ * />
+ * ```
+ *
+ * @example With error and required
+ * ```tsx
+ * <CheckboxGroupARIA
+ *   name="features"
+ *   label="Select Features"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   required
+ *   error="Please select at least one feature"
+ * />
+ * ```
+ *
+ * @example With localization
+ * ```tsx
+ * <CheckboxGroupARIA
+ *   name="features"
+ *   label={{ en: 'Select Features', fr: 'Sélectionner les fonctionnalités' }}
+ *   locale="fr"
+ *   options={[
+ *     { value: 'analytics', label: { en: 'Analytics', fr: 'Analytique' } }
+ *   ]}
+ * />
+ * ```
+ */
+declare function CheckboxGroupARIA({ name, label, locale, options, value, onChange, error, required, disabled, layout, columns, className, }: CheckboxGroupARIAProps): react_jsx_runtime.JSX.Element;
+
+interface RadioGroupARIAOption {
+    value: string;
+    label: LocalizedString$1 | string;
+    description?: LocalizedString$1 | string;
+    disabled?: boolean;
+}
+interface RadioGroupARIAProps {
+    /** Field name (for form integration) */
+    name: string;
+    /** Group label */
+    label: LocalizedString$1 | string;
+    /** Current locale for localized labels */
+    locale?: string;
+    /** Array of radio options */
+    options: RadioGroupARIAOption[];
+    /** Selected value */
+    value?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Error message */
+    error?: string;
+    /** Whether group is required */
+    required?: boolean;
+    /** Disabled state for entire group */
+    disabled?: boolean;
+    /** Display layout */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /** Grid columns (only for grid layout) */
+    columns?: 2 | 3 | 4;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * RadioGroupARIA - ARIA-enhanced radio button group
+ *
+ * Provides comprehensive accessibility for radio groups including:
+ * - Proper fieldset/legend structure
+ * - role="radiogroup" with aria-labelledby
+ * - aria-required for required groups
+ * - aria-invalid for error states
+ * - aria-describedby linking to errors
+ * - Individual radio ARIA support
+ * - Screen reader announcements
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RadioGroupARIA
+ *   name="plan"
+ *   label="Choose Plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic Plan' },
+ *     { value: 'pro', label: 'Pro Plan' },
+ *     { value: 'enterprise', label: 'Enterprise Plan' }
+ *   ]}
+ *   value={selectedPlan}
+ *   onChange={setSelectedPlan}
+ * />
+ * ```
+ *
+ * @example With error and required
+ * ```tsx
+ * <RadioGroupARIA
+ *   name="plan"
+ *   label="Choose Plan"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   required
+ *   error="Please select a plan"
+ * />
+ * ```
+ *
+ * @example With localization
+ * ```tsx
+ * <RadioGroupARIA
+ *   name="plan"
+ *   label={{ en: 'Choose Plan', fr: 'Choisir le plan' }}
+ *   locale="fr"
+ *   options={[
+ *     { value: 'basic', label: { en: 'Basic Plan', fr: 'Plan Basique' } }
+ *   ]}
+ * />
+ * ```
+ */
+declare function RadioGroupARIA({ name, label, locale, options, value, onChange, error, required, disabled, layout, columns, className, }: RadioGroupARIAProps): react_jsx_runtime.JSX.Element;
+
+interface I18nMetaTagsProps {
+    /** Current locale */
+    currentLocale: string;
+    /** Current pathname (without locale prefix) */
+    pathname: string;
+    /** Base URL of the site (e.g., 'https://example.com') */
+    baseUrl: string;
+}
+/**
+ * I18nMetaTags - Generate SEO-critical meta tags for multi-language sites
+ *
+ * Generates:
+ * - hreflang tags for all supported locales
+ * - x-default tag for language selection
+ * - Canonical URL for current page
+ * - OpenGraph locale and alternate tags
+ *
+ * @example
+ * ```tsx
+ * // In layout.tsx or page.tsx
+ * import { I18nMetaTags } from 'simple-site-framework';
+ *
+ * export default function Layout({ children, params }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <I18nMetaTags
+ *           currentLocale={params.locale}
+ *           pathname="/about"
+ *           baseUrl="https://example.com"
+ *         />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ *
+ * @see https://developers.google.com/search/docs/specialty/international/localized-versions
+ * @see https://ogp.me/#optional
+ */
+declare function I18nMetaTags({ currentLocale, pathname, baseUrl }: I18nMetaTagsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Open Graph metadata for social sharing
+ * @see https://ogp.me/
+ */
+interface OpenGraphMetadata {
+    /** Page title for social sharing */
+    title?: string;
+    /** Page description for social sharing */
+    description?: string;
+    /** Absolute URL to preview image (min 1200x630px recommended) */
+    image?: string;
+    /** Image alt text for accessibility */
+    imageAlt?: string;
+    /** Page type (website, article, product, etc.) */
+    type?: 'website' | 'article' | 'product' | 'profile' | string;
+    /** Canonical URL of the page */
+    url?: string;
+    /** Site name */
+    siteName?: string;
+    /** Locale (e.g., en_US, fr_FR) */
+    locale?: string;
+    /** Alternate locales */
+    alternateLocales?: string[];
+    /** Article-specific: publication date (ISO 8601) */
+    publishedTime?: string;
+    /** Article-specific: modified date (ISO 8601) */
+    modifiedTime?: string;
+    /** Article-specific: author profile URLs */
+    authors?: string[];
+    /** Article-specific: section/category */
+    section?: string;
+    /** Article-specific: tags */
+    tags?: string[];
+}
+/**
+ * Twitter Card metadata for Twitter sharing
+ * @see https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
+ */
+interface TwitterMetadata {
+    /** Card type */
+    card?: 'summary' | 'summary_large_image' | 'app' | 'player';
+    /** Twitter handle of the site (with @) */
+    site?: string;
+    /** Twitter handle of the content creator (with @) */
+    creator?: string;
+    /** Page title for Twitter */
+    title?: string;
+    /** Page description for Twitter */
+    description?: string;
+    /** Absolute URL to preview image */
+    image?: string;
+    /** Image alt text */
+    imageAlt?: string;
+}
+/**
+ * Props for SEOMetaTags component
+ */
+interface SEOMetaTagsProps {
+    /** Page title (used in <title> tag and as fallback for OG/Twitter) */
+    title: string;
+    /** Page description (used in meta description and as fallback for OG/Twitter) */
+    description: string;
+    /** Keywords for meta keywords tag (optional, less important for modern SEO) */
+    keywords?: string[];
+    /** Canonical URL (absolute URL to prevent duplicate content issues) */
+    canonical?: string;
+    /** Prevent search engines from indexing this page */
+    noIndex?: boolean;
+    /** Prevent search engines from following links on this page */
+    noFollow?: boolean;
+    /** Open Graph metadata for social sharing */
+    openGraph?: OpenGraphMetadata;
+    /** Twitter Card metadata */
+    twitter?: TwitterMetadata;
+    /** Additional custom meta tags */
+    additionalMetaTags?: Array<{
+        name?: string;
+        property?: string;
+        content: string;
+    }>;
+    /** Additional link tags */
+    additionalLinkTags?: Array<{
+        rel: string;
+        href: string;
+        [key: string]: string;
+    }>;
+}
+/**
+ * SEO metadata component for page-level optimization.
+ *
+ * Generates essential meta tags for search engines and social media platforms:
+ * - Title and description
+ * - Open Graph tags (Facebook, LinkedIn)
+ * - Twitter Cards
+ * - Canonical URLs
+ * - Robots directives
+ *
+ * @example
+ * ```tsx
+ * import { SEOMetaTags } from 'simple-site-framework/components';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <SEOMetaTags
+ *         title="Best Email Marketing Platform | Acme"
+ *         description="Send beautiful email campaigns that convert. Start free today."
+ *         canonical="https://example.com/features"
+ *         openGraph={{
+ *           image: 'https://example.com/og-image.jpg',
+ *           type: 'website',
+ *           siteName: 'Acme'
+ *         }}
+ *         twitter={{
+ *           card: 'summary_large_image',
+ *           site: '@acme'
+ *         }}
+ *       />
+ *       <main>...</main>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function SEOMetaTags({ title, description, keywords, canonical, noIndex, noFollow, openGraph, twitter, additionalMetaTags, additionalLinkTags, }: SEOMetaTagsProps): ReactElement;
+
+/**
+ * Base schema.org Thing type
+ * @see https://schema.org/Thing
+ */
+interface Thing {
+    '@type': string;
+    '@id'?: string;
+    name?: string;
+    description?: string;
+    image?: string | string[];
+    url?: string;
+    [key: string]: unknown;
+}
+
+interface StructuredDataProps {
+    /** Structured data object or array of objects */
+    data: Thing | Thing[];
+}
+/**
+ * Renders JSON-LD structured data in a script tag.
+ *
+ * Use this component to add schema.org markup to your pages for better SEO
+ * and rich search results (rich snippets, knowledge panels, etc.).
+ *
+ * @example Basic usage with Organization
+ * ```tsx
+ * import { StructuredData } from 'simple-site-framework/components';
+ * import { createOrganization } from 'simple-site-framework/lib/seo/structured-data';
+ *
+ * const orgData = createOrganization({
+ *   name: 'Acme Inc',
+ *   url: 'https://acme.com',
+ *   logo: 'https://acme.com/logo.png',
+ *   sameAs: ['https://twitter.com/acme']
+ * });
+ *
+ * export default function Layout() {
+ *   return (
+ *     <>
+ *       <StructuredData data={orgData} />
+ *       <main>...</main>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example Multiple structured data objects
+ * ```tsx
+ * import { StructuredData } from 'simple-site-framework/components';
+ * import {
+ *   createOrganization,
+ *   createWebSite,
+ *   createBreadcrumbList
+ * } from 'simple-site-framework/lib/seo/structured-data';
+ *
+ * const organization = createOrganization({ name: 'Acme' });
+ * const website = createWebSite({
+ *   name: 'Acme',
+ *   url: 'https://acme.com',
+ *   searchUrlTemplate: 'https://acme.com/search?q={search_term_string}'
+ * });
+ * const breadcrumbs = createBreadcrumbList([
+ *   { name: 'Home', url: 'https://acme.com' },
+ *   { name: 'Products', url: 'https://acme.com/products' }
+ * ]);
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <StructuredData data={[organization, website, breadcrumbs]} />
+ *       <main>...</main>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example FAQ Page
+ * ```tsx
+ * import { StructuredData } from 'simple-site-framework/components';
+ * import { createFAQPage } from 'simple-site-framework/lib/seo/structured-data';
+ *
+ * const faqData = createFAQPage([
+ *   {
+ *     question: 'What is your refund policy?',
+ *     answer: 'We offer a 30-day money-back guarantee on all plans.'
+ *   },
+ *   {
+ *     question: 'Do you offer customer support?',
+ *     answer: 'Yes, we provide 24/7 email and chat support to all customers.'
+ *   }
+ * ]);
+ *
+ * export default function FAQPage() {
+ *   return (
+ *     <>
+ *       <StructuredData data={faqData} />
+ *       <main>...</main>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function StructuredData({ data }: StructuredDataProps): ReactElement;
+
+interface PolicyLayoutProps {
+    /** Policy title */
+    title: string;
+    /** Last updated date (ISO string or formatted) */
+    lastUpdated: string;
+    /** Current locale for date formatting */
+    locale: string;
+    /** Policy content (from MDX) */
+    children: ReactNode;
+    /** Show table of contents sidebar @default true */
+    showToc?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional contact link text */
+    contactText?: string;
+    /** Optional contact link href */
+    contactHref?: string;
+}
+/**
+ * PolicyLayout - Layout component for policy and legal document pages
+ *
+ * Designed for rendering markdown/MDX content with proper structure,
+ * typography, table of contents, and SEO.
+ *
+ * @example
+ * ```tsx
+ * import { loadPolicy } from '@/lib/content/policies';
+ * import { PolicyLayout } from 'simple-site-framework';
+ *
+ * export default async function PrivacyPage({ params }) {
+ *   const { content, metadata } = await loadPolicy('privacy-policy', params.locale);
+ *
+ *   return (
+ *     <PolicyLayout
+ *       title={metadata.title}
+ *       lastUpdated={metadata.lastUpdated}
+ *       locale={params.locale}
+ *     >
+ *       {content}
+ *     </PolicyLayout>
+ *   );
+ * }
+ * ```
+ *
+ * @see docs/POLICY-PAGES.md for complete usage guide
+ */
+declare function PolicyLayout({ title, lastUpdated, locale, children, showToc, className, contactText, contactHref, }: PolicyLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface Heading {
+    id: string;
+    text: string;
+    level: number;
+}
+interface TableOfContentsProps {
+    /** CSS selector for content container @default 'article' */
+    containerSelector?: string;
+    /** Heading levels to include @default [2, 3] */
+    includeLevels?: number[];
+    /** Additional CSS classes */
+    className?: string;
+    /** Title for TOC @default 'Table of Contents' */
+    title?: string;
+}
+/**
+ * TableOfContents - Auto-generated navigation for long-form content
+ *
+ * Automatically extracts headings from the page, generates a navigation menu,
+ * and highlights the currently visible section.
+ *
+ * @example
+ * ```tsx
+ * <aside className="sticky top-24">
+ *   <TableOfContents />
+ * </aside>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom configuration
+ * <TableOfContents
+ *   title="On This Page"
+ *   includeLevels={[2, 3, 4]}
+ *   containerSelector="main"
+ * />
+ * ```
+ */
+declare function TableOfContents({ containerSelector, includeLevels, className, title, }: TableOfContentsProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Position of the notification on screen
+ */
+type NotificationPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+/**
+ * Individual notification data
+ */
+interface LiveProofNotification {
+    /** Unique identifier */
+    id: string;
+    /** User/customer name */
+    name?: string;
+    /** User location (city, country) */
+    location?: string;
+    /** Action performed (e.g., "signed up", "made a purchase") */
+    action: LocalizedString$1 | string;
+    /** Time ago (e.g., "2 minutes ago") */
+    timeAgo?: LocalizedString$1 | string;
+    /** Optional avatar URL */
+    avatar?: string;
+    /** Optional icon (lucide-react name) */
+    icon?: string;
+    /** Custom message (overrides name/location/action format) */
+    message?: LocalizedString$1 | string;
+    /** Link URL when clicked */
+    link?: string;
+    /** Custom data for tracking */
+    data?: Record<string, unknown>;
+}
+interface LiveProofProps {
+    /** Array of notifications to display */
+    notifications: LiveProofNotification[];
+    /** Position on screen */
+    position?: NotificationPosition;
+    /** Auto-dismiss duration in milliseconds (0 = never) */
+    autoHideDuration?: number;
+    /** Maximum number of visible notifications */
+    maxVisible?: number;
+    /** Delay between showing notifications in milliseconds */
+    showDelay?: number;
+    /** Enable click to dismiss */
+    clickToDismiss?: boolean;
+    /** Custom close button */
+    showCloseButton?: boolean;
+    /** Current locale for i18n */
+    locale?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Callback when notification is clicked */
+    onNotificationClick?: (notification: LiveProofNotification) => void;
+    /** Callback when notification is dismissed */
+    onNotificationDismiss?: (notification: LiveProofNotification) => void;
+}
+/**
+ * LiveProof Notification System
+ *
+ * Displays real-time social proof notifications to build trust and create urgency.
+ * Shows messages like "John from NYC just signed up" to demonstrate activity.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const notifications = [
+ *   {
+ *     id: '1',
+ *     name: 'John D.',
+ *     location: 'New York, NY',
+ *     action: 'signed up for a trial',
+ *     timeAgo: '2 minutes ago'
+ *   },
+ *   {
+ *     id: '2',
+ *     name: 'Sarah M.',
+ *     location: 'San Francisco, CA',
+ *     action: 'upgraded to Premium',
+ *     timeAgo: '5 minutes ago'
+ *   }
+ * ];
+ *
+ * <LiveProof notifications={notifications} />
+ * ```
+ *
+ * @example Custom message
+ * ```tsx
+ * <LiveProof
+ *   notifications={[
+ *     {
+ *       id: '1',
+ *       message: '🎉 127 people signed up today!',
+ *       icon: 'TrendingUp'
+ *     }
+ *   ]}
+ *   position="bottom-left"
+ *   autoHideDuration={5000}
+ * />
+ * ```
+ *
+ * @example With avatar and link
+ * ```tsx
+ * <LiveProof
+ *   notifications={[
+ *     {
+ *       id: '1',
+ *       name: 'Alex Chen',
+ *       action: 'left a 5-star review',
+ *       avatar: '/avatars/alex.jpg',
+ *       link: '/reviews',
+ *       timeAgo: 'Just now'
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+declare function LiveProof({ notifications, position, autoHideDuration, maxVisible, showDelay, clickToDismiss, showCloseButton, locale, className, onNotificationClick, onNotificationDismiss, }: LiveProofProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Generate mock notifications for demo/testing
+ *
+ * @param count - Number of notifications to generate
+ * @param locale - Locale for localized strings
+ * @returns Array of mock notifications
+ *
+ * @example
+ * ```tsx
+ * const mockData = generateMockNotifications(5);
+ * <LiveProof notifications={mockData} />
+ * ```
+ */
+declare function generateMockNotifications(count?: number, locale?: string): LiveProofNotification[];
+
+interface MobileCTAProps {
+    /** Localized CTA text */
+    text: LocalizedString$1 | string;
+    /** CTA destination URL */
+    href: string;
+    /** Current locale */
+    locale: string;
+    /** Scroll distance in pixels before showing (default: 300) */
+    threshold?: number;
+    /** Breakpoint to hide on larger screens (default: 'lg') */
+    hideAbove?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Optional click handler (for tracking) */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Z-index value (default: 50) */
+    zIndex?: number;
+}
+/**
+ * MobileCTA - Mobile-only sticky CTA button
+ *
+ * A scroll-triggered CTA button that appears at the bottom of the screen
+ * after the user scrolls past a threshold. Improves mobile conversion rates
+ * by keeping primary CTAs accessible without cluttering the viewport.
+ *
+ * Features:
+ * - Scroll-triggered visibility (configurable threshold)
+ * - Mobile-only display (hidden on desktop)
+ * - Smooth slide-up animation
+ * - 44px minimum tap target (accessibility)
+ * - Optional click tracking
+ * - Theme integration with className override
+ * - Reduced motion support
+ *
+ * @example Basic usage
+ * ```tsx
+ * <MobileCTA
+ *   text="Start Free Trial"
+ *   href="https://app.example.com/signup"
+ *   locale="en"
+ * />
+ * ```
+ *
+ * @example With localization and tracking
+ * ```tsx
+ * <MobileCTA
+ *   text={{
+ *     en: 'Start Free Trial - No Card Required',
+ *     fr: 'Essai gratuit - Aucune carte requise'
+ *   }}
+ *   href="https://app.example.com/signup"
+ *   locale="en"
+ *   threshold={300}
+ *   onClick={() => trackEvent('mobile_cta_click')}
+ * />
+ * ```
+ *
+ * @example Custom styling and breakpoint
+ * ```tsx
+ * <MobileCTA
+ *   text="Get Started"
+ *   href="/signup"
+ *   locale="en"
+ *   hideAbove="md"
+ *   className="bg-gradient-to-r from-blue-500 to-purple-600"
+ *   zIndex={100}
+ * />
+ * ```
+ */
+declare function MobileCTA({ text, href, locale, threshold, hideAbove, onClick, className, zIndex, }: MobileCTAProps): react_jsx_runtime.JSX.Element;
+
+interface CTAButtonConfig {
+    /** Localized button text */
+    text: LocalizedString$1 | string;
+    /** Destination URL */
+    href: string;
+    /** Optional click handler (for tracking) */
+    onClick?: () => void;
+    /** Button variant (uses framework Button variants) */
+    variant?: 'outlined' | 'filled' | 'text' | 'ghost' | 'link' | 'destructive';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+}
+interface CTASectionProps {
+    /** Localized heading text */
+    heading: LocalizedString$1 | string;
+    /** Localized description/subheading */
+    description?: LocalizedString$1 | string;
+    /** Primary CTA configuration */
+    primaryCTA: CTAButtonConfig;
+    /** Optional secondary CTA */
+    secondaryCTA?: CTAButtonConfig;
+    /** Current locale */
+    locale: string;
+    /** Layout variant */
+    variant?: 'centered' | 'split' | 'inline';
+    /** Button arrangement */
+    buttonLayout?: 'horizontal' | 'vertical';
+    /** Background color class */
+    backgroundColor?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Maximum content width */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CTASection - Full-width call-to-action section
+ *
+ * A configurable CTA section component with dual-button layout.
+ * Provides consistent conversion patterns across marketing pages
+ * with support for multiple content variants.
+ *
+ * Features:
+ * - Dual-button layout (primary + optional secondary)
+ * - Multiple layout variants (centered, split, inline)
+ * - Uses framework Button component
+ * - Optional click tracking
+ * - Theme integration with className override
+ * - Responsive button stacking
+ * - Localization support
+ * - Accessibility compliant
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CTASection
+ *   heading="Create Your Free Account"
+ *   primaryCTA={{
+ *     text: 'Sign Up',
+ *     href: 'https://app.example.com/signup'
+ *   }}
+ *   locale="en"
+ * />
+ * ```
+ *
+ * @example With localization and description
+ * ```tsx
+ * <CTASection
+ *   heading={{
+ *     en: 'Create Your Free Account',
+ *     fr: 'Créez votre compte gratuit'
+ *   }}
+ *   description={{
+ *     en: 'No credit card required • Set up in 2 minutes',
+ *     fr: 'Aucune carte de crédit requise • Configuration en 2 minutes'
+ *   }}
+ *   primaryCTA={{
+ *     text: { en: 'Create Free Account', fr: 'Créer mon compte' },
+ *     href: 'https://app.example.com/signup',
+ *     onClick: () => trackCTAClick('signup', 'cta_section')
+ *   }}
+ *   secondaryCTA={{
+ *     text: { en: 'See Pricing', fr: 'Voir les forfaits' },
+ *     href: '/pricing'
+ *   }}
+ *   locale="en"
+ *   backgroundColor="bg-warm-gray"
+ * />
+ * ```
+ *
+ * @example Custom layout and styling
+ * ```tsx
+ * <CTASection
+ *   heading="Get Started Today"
+ *   variant="split"
+ *   buttonLayout="vertical"
+ *   align="left"
+ *   maxWidth="4xl"
+ *   className="border-t-4 border-primary"
+ *   primaryCTA={{
+ *     text: 'Start Free Trial',
+ *     href: '/signup',
+ *     variant: 'filled',
+ *     size: 'lg'
+ *   }}
+ *   locale="en"
+ * />
+ * ```
+ */
+declare function CTASection({ heading, description, primaryCTA, secondaryCTA, locale, variant, buttonLayout, backgroundColor, align, maxWidth, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
+
+export { AboutSection, AddressLink, type AddressLinkProps, AnimatedCounter, type AnimatedCounterProps, AnimatedItem, AnimatedSection, type AnimatedSectionProps, type AnimationType, type Badge, type BadgeType, type BillingPeriod, BlogCard, type BlogCardProps, BodyEndScripts, type BodyEndScriptsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, type CTAButtonConfig, CTASection, type CTASectionProps, Card, type CardProps, CaseStudySection, Checkbox, CheckboxGroup, CheckboxGroupARIA, type CheckboxGroupARIAOption, type CheckboxGroupARIAProps, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeBlock, type CodeBlockProps, type ComparisonFeature, type ComparisonOption, ComparisonTable, type ComparisonTableProps, ComponentDemo, type ComponentDemoProps, ContactForm, type ContactFormData, type ContactFormField, type ContactFormProps, type ContactFormResponse, ContactSection, CountdownTimer, type CountdownTimerProps, type CustomBadge, EmailLink, type EmailLinkProps, ExitIntentModal, type ExitIntentModalProps, type FAQ, FAQAccordion, type FAQAccordionProps, type Feature, type FeatureCategory, FeatureSection, FeaturesGrid, FileUpload, type FileUploadProps, Footer, type FooterProps, FormField, FormFieldARIA, type FormFieldARIAProps, type FormFieldProps, FormGroup, HeadScripts, type HeadScriptsProps, Header, type HeaderProps, type Heading, HeroSection, I18nMetaTags, type I18nMetaTagsProps, Icon, type IconName, type IconProps, Icons, InlineCode, Input, type InputProps, LanguageSelector, type LanguageSelectorProps, LanguageSwitcher, type LanguageSwitcherProps, LazySection, type LazySectionProps, LiveProof, type LiveProofNotification, type LiveProofProps, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, LogosSection, MobileCTA, type MobileCTAProps, Modal, ModalContent, ModalFooter, type ModalProps, ModalRoot, type ModalSize, ModalTrigger, MultiStepForm, type MultiStepFormProps, type NotificationPosition, type OpenGraphMetadata, PersonalTaxesSection, PhoneLink, type PhoneLinkProps, PolicyLayout, type PolicyLayoutProps, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Radio, RadioGroup, RadioGroupARIA, type RadioGroupARIAOption, type RadioGroupARIAProps, type RadioGroupOption, type RadioGroupProps, type RadioProps, RecruitingSection, SEOMetaTags, type SEOMetaTagsProps, SecurePortalSection, Select, type SelectOption, type SelectOptionGroup, type SelectProps, ServicePageLayout, ServicesSection, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonImage, type SkeletonProps, SkeletonText, type SpinnerSize, type SpinnerStyle, type Stat, StatsSection, type StatsSectionProps, type StepProps, StickyBar, type StickyBarProps, StructuredData, type StructuredDataProps, StyleGuide, type StyleGuideProps, type Tab, TableOfContents, type TableOfContentsProps, Tabs, type TabsProps, type Testimonial, TestimonialCarousel, type TestimonialCarouselProps, TestimonialSection, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type Toast, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastType, TrustBadges, type TrustBadgesProps, type TwitterMetadata, WhyChooseUsSection, generateMockNotifications, toast, useMultiStepForm, useToast, withLazyLoad };