import * as react_jsx_runtime from 'react/jsx-runtime';

interface IndustryItem {
    name: string;
    description: string;
    image: string;
    imageAlt: string;
    url: string;
}
interface IndustriesHoverRevealGridProps {
    /**
     * Section title displayed above the grid
     * @default "Industries"
     */
    title?: string;
    /**
     * Label shown before description on hover
     * @default "Overview"
     */
    industryLabel?: string;
    /**
     * Array of industry items to display in the grid
     */
    industries?: IndustryItem[];
    /**
     * Additional CSS classes for the section wrapper
     */
    className?: string;
    /**
     * Optional Optix Flow configuration for image optimization
     */
    optixFlowConfig?: {
        apiKey: string;
        compression?: number;
    };
}
/**
 * IndustriesHoverRevealGrid displays a responsive grid of industry cards with animated hover effects.
 *
 * Features a 1-2-4 column responsive grid layout where each card shows an industry image with
 * the industry name overlaid. On hover, a black overlay slides up from the bottom revealing
 * a detailed description, while a plus icon rotates 90 degrees. Ideal for showcasing multiple
 * industry sectors, service categories, or portfolio items with engaging hover interactions.
 *
 * @example
 * ```tsx
 * <IndustriesHoverRevealGrid
 *   title="Our Industries"
 *   industryLabel="Overview"
 *   industries={[
 *     {
 *       name: "Healthcare",
 *       description: "Revolutionary medical solutions...",
 *       image: "/healthcare.jpg",
 *       imageAlt: "Healthcare technology",
 *       url: "/industries/healthcare"
 *     }
 *   ]}
 * />
 * ```
 */
declare function IndustriesHoverRevealGrid({ className, title, industryLabel, industries, optixFlowConfig, }: IndustriesHoverRevealGridProps): react_jsx_runtime.JSX.Element;

export { IndustriesHoverRevealGrid, type IndustriesHoverRevealGridProps, type IndustryItem };
