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

interface CaseStudyFeaturedItem {
    logo: string;
    company: string;
    tags: string;
    title: string;
    subtitle: string;
    image?: string;
    href?: string;
}
interface CaseStudiesFeaturedBorderProps {
    featuredCaseStudy?: CaseStudyFeaturedItem;
    caseStudies?: CaseStudyFeaturedItem[];
    className?: string;
    optixFlowConfig?: {
        apiKey: string;
        compression?: number;
    };
}
/**
 * CaseStudiesFeaturedBorder displays case studies in a bordered card layout with
 * a prominent featured case study and secondary items below.
 *
 * Features a full-width bordered container with dot pattern decorations on the sides.
 * The featured case study shows company logo, tags, title with subtitle, image preview,
 * and a "Read case study" CTA with arrow icon. Secondary case studies appear in a
 * two-column grid below with similar styling but without images. Hover states include
 * background color transitions. Ideal for highlighting a primary success story while
 * showcasing additional case studies.
 *
 * @example
 * ```tsx
 * <CaseStudiesFeaturedBorder
 *   featuredCaseStudy={{
 *     logo: "/logos/acme.svg",
 *     company: "Acme Corp",
 *     tags: "AI / ENTERPRISE",
 *     title: "Transforming Operations",
 *     subtitle: "How we automated their workflow",
 *     image: "/images/case-featured.jpg",
 *     href: "/case-studies/acme"
 *   }}
 *   caseStudies={[
 *     {
 *       logo: "/logos/super.svg",
 *       company: "Super Inc",
 *       tags: "DATA / SOFTWARE",
 *       title: "Data Migration Success",
 *       subtitle: "Moving to the cloud",
 *       href: "/case-studies/super"
 *     }
 *   ]}
 * />
 * ```
 */
declare function CaseStudiesFeaturedBorder({ featuredCaseStudy, caseStudies, className, optixFlowConfig, }: CaseStudiesFeaturedBorderProps): react_jsx_runtime.JSX.Element;

export { CaseStudiesFeaturedBorder, type CaseStudiesFeaturedBorderProps, type CaseStudyFeaturedItem };
