> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getlimina.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

> Getting started with Limina, AI based data privacy.

export const LogoMask = () => {
  return <svg className="pai-logo-mask" viewBox="0 0 32.6 30">
      <defs>
        <clipPath id="clipLogoTop">
          <path d="m23.15.46 9.45 9.26v4.81l-9.45-6.37L0 13.94V8.96L23.15.46Z" />
        </clipPath>
        <clipPath id="clipLogoCenter">
          <path d="m18.98 12.12 13.62 5.02v4.71L18.98 19.1 0 21.34v-4.76l18.98-4.46Z" />
        </clipPath>
        <clipPath id="clipLogoBottom">
          <path d="M12.66 22.92 32.6 24.6v4.56H0v-5.23l12.66-1.01Z" />
        </clipPath>
      </defs>
      <path d="m-6.6 13.4 29.8-9.3 11.9 10.2" className="pai-logo-dash pai-logo-dash-top" clipPath="url(#clipLogoTop)" />
      <path d="M-6.6 20.1 19 15.4l16.1 4.8" className="pai-logo-dash pai-logo-dash-center" clipPath="url(#clipLogoCenter)" />
      <path d="m-6.6 26.8 19.3-1 22.4 1.3" className="pai-logo-dash pai-logo-dash-bottom" clipPath="url(#clipLogoBottom)" />
    </svg>;
};

export const LogoPath = () => {
  const DOTS_TOP = [{
    dur: "10s"
  }, {
    dur: "24s"
  }, {
    dur: "14s"
  }];
  const DOTS_CENTER = [{
    dur: "10s"
  }, {
    dur: "20s"
  }, {
    dur: "12s"
  }];
  const DOTS_BOTTOM = [{
    dur: "10s"
  }, {
    dur: "6s"
  }];
  return <svg className="pai-logo-path" viewBox="0 0 32.6 30">
      <defs>
        <radialGradient id="radialGradient">
          <stop offset="30%" stopColor="#fff" />
          <stop offset="80%" stopColor="#ffffff00" />
        </radialGradient>
      </defs>

      {DOTS_TOP.map(dot => {
    return <circle key={`top${dot.dur}`} r="0.5" fill="url(#radialGradient)">
            <animateMotion dur={dot.dur} repeatCount="indefinite" path="m23.15.46 9.45 9.26v4.81l-9.45-6.37L0 13.94V8.96L23.15.46Z" />
          </circle>;
  })}
      {DOTS_CENTER.map(dot => {
    return <circle key={`center${dot.dur}`} r="0.5" fill="url(#radialGradient)">
            <animateMotion dur={dot.dur} repeatCount="indefinite" path="m18.98 12.12 13.62 5.02v4.71L18.98 19.1 0 21.34v-4.76l18.98-4.46Z" />
          </circle>;
  })}
      {DOTS_BOTTOM.map(dot => {
    return <circle key={`bottom${dot.dur}`} r="0.5" fill="url(#radialGradient)">
            <animateMotion dur={dot.dur} repeatCount="indefinite" path="M12.66 22.92 32.6 24.6v4.56H0v-5.23l12.66-1.01Z" />
          </circle>;
  })}
    </svg>;
};

export const PaiBadge = ({children, className = ""}) => {
  return <span className={`pai-badge font-main inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold bg-main-100 text-secondary ${className}`}>
      {children}
    </span>;
};

export const PaiLogo = () => {
  return <svg className="pai-logo h-6 w-auto" viewBox="0 0 28.5 26">
      <title>Limina</title>
      <g>
        <path className="fill-white" d="M20.06 7.08 0 12.08V7.76L20.06.4v6.68Z" />
        <path className="fill-white" d="m20.06.4 8.2 8.03v4.17l-8.2-5.52V.4Z" />
        <path className="fill-white" d="M16.45 16.55 0 18.5v-4.13l16.45-3.87v6.05Z" />
        <path className="fill-white" d="m16.45 10.5 11.8 4.35v4.08l-11.8-2.38V10.5Z" />
        <path className="fill-white" d="M10.97 25.27H0v-4.53l10.97-.88v5.41Z" />
        <path className="fill-white" d="M10.97 25.27h17.28v-3.95l-17.28-1.46v5.41Z" />
      </g>
    </svg>;
};

export const PaiButton = ({as: Component, children, className = "", color = "primary", disabled, href, size = "medium", target, to, type = "button", variant = "flat", onClick, ...attrs}) => {
  const FOCUS_STYLES = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-main-700";
  const DISABLED_STYLES = "disabled:cursor-not-allowed disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:text-gray-500";
  const FIELD_SIZE_STYLES = {
    small: {
      height: "min-h-8",
      padding: "px-3 py-1.5",
      font: "text-xs"
    },
    medium: {
      height: "min-h-10.5",
      padding: "px-3 py-2",
      font: "text-sm"
    },
    large: {
      height: "min-h-13.5",
      padding: "px-4 py-2.5",
      font: "text-base"
    }
  };
  const fontStyles = {
    primary: "font-main",
    secondary: "font-secondary uppercase tracking-[0.15em] leading-[1]"
  };
  const sizeClassNames = {
    small: "",
    medium: "px-5.5",
    large: `px-7 text-lg ${fontStyles.secondary}`
  };
  const variantClassNames = {
    flat: {
      primary: "border-transparent bg-main text-white dark:text-navy hover:bg-main-700",
      white: "border-transparent bg-white text-main dark:text-navy dark:hover:not-disabled:text-main hover:bg-main-50"
    },
    outlined: {
      primary: "border border-main text-main hover:bg-main hover:text-white dark:hover:text-navy disabled:border-gray-200 dark:disabled:border-gray-600",
      white: "border border-white text-white hover:bg-white hover:text-main dark:hover:not-disabled:text-navy disabled:border-gray-200 dark:disabled:border-gray-600"
    },
    text: {
      primary: "border-transparent text-main-600 hover:bg-main-50",
      white: "border-transparent text-white hover:bg-white/10"
    }
  };
  const ButtonTag = Component ?? (href ? "a" : "button");
  const buttonSize = FIELD_SIZE_STYLES[size] ?? FIELD_SIZE_STYLES.medium;
  const variantClassName = variantClassNames[variant][color] ?? variantClassNames[variant].primary;
  return <ButtonTag className={`pai-button group/button font-main inline-flex items-center justify-center gap-1 text-center transition rounded-md ${buttonSize.height} ${buttonSize.padding} ${buttonSize.font} ${sizeClassNames[size]} ${variantClassName} ${FOCUS_STYLES} ${DISABLED_STYLES} ${className}`} disabled={disabled} href={href} rel={target === "_blank" ? "noreferrer" : undefined} target={target} to={to} type={!(href || to) ? type : undefined} onClick={onClick} {...attrs}>
      {size === "large" && typeof children === "string" ? <span className="relative overflow-hidden text-[0px] leading-[0] tracking-normal before:absolute before:top-full before:left-0 before:text-lg before:leading-none before:tracking-[0.15em] before:transition-transform before:duration-500 before:content-[attr(data-text)/''] group-hover/button:before:-translate-y-full after:block after:text-lg after:leading-none after:tracking-[0.15em] after:transition-transform after:duration-500 after:content-[attr(data-text)/''] group-hover/button:after:-translate-y-full" data-text={children}>
          {children}
        </span> : children}
    </ButtonTag>;
};

export const PaiTypography = ({as: Component, children, className, variant = "h2"}) => {
  const TYPOGRAPHY_MAP = {
    h1: {
      className: "text-secondary text-2xl font-semibold",
      tag: "h1"
    },
    h2: {
      className: "text-secondary text-xl font-semibold",
      tag: "h2"
    },
    h3: {
      className: "text-secondary text-lg font-semibold",
      tag: "h3"
    }
  };
  const typographyType = TYPOGRAPHY_MAP[variant] ?? TYPOGRAPHY_MAP.h2;
  const ComponentTag = Component ?? typographyType.tag;
  return <ComponentTag className={`font-main text-primary-font ${typographyType.className} ${className}`}>
      {children}
    </ComponentTag>;
};

export const QuestionMarkCircleIcon = ({className}) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
    </svg>;
};

export const ArrowRightIcon = ({className}) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
    </svg>;
};

export const RocketLaunchIcon = ({className}) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
    </svg>;
};

export const DocumentIcon = ({className}) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
    </svg>;
};

export const PencilIcon = ({className}) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
    </svg>;
};

export const ClipboardDocumentCheckIcon = ({className}) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
    </svg>;
};

export const HomeCta = () => {
  const CTA = {
    TITLE: "Need Further Assistance?",
    DESCRIPTION: "Check out our frequently asked questions or feel free to contact us.",
    CTA_PRIMARY: {
      TEXT: "View FAQ",
      URL: "/faq"
    },
    CTA_SECONDARY: {
      TEXT: "Contact Us",
      URL: "https://getlimina.ai/contact-us/"
    }
  };
  return <section className="pai-home-cta bg-navy flex gap-6 col-span-full text-white rounded-2xl p-6">
      <QuestionMarkCircleIcon className="pai-home-icon shrink-0 size-14 text-cornflower-300" />
      <div className="relative z-10">
        <PaiTypography as="h2" className="text-white mb-2" variant="h1">
          {CTA.TITLE}
        </PaiTypography>
        <p>{CTA.DESCRIPTION}</p>
        <div className="flex flex-wrap gap-4 mt-6 max-sm:flex-col">
          <PaiButton href={CTA.CTA_PRIMARY.URL} size="large">{CTA.CTA_PRIMARY.TEXT}</PaiButton>
          <PaiButton color="white" href={CTA.CTA_SECONDARY.URL} size="large" target="_blank" variant="outlined">
            {CTA.CTA_SECONDARY.TEXT}
          </PaiButton>
        </div>
      </div>
    </section>;
};

export const HomeAdvanced = () => {
  const CONTENT = {
    TITLE: "Advanced Configuration & Operation",
    DETECTION: {
      TITLE: "Entity Detection & Redaction",
      LINKS: [{
        TEXT: "Customizing Detection",
        URL: "/configuration-and-operations/entity-detection-and-redaction/customizing-detection"
      }, {
        TEXT: "Customizing Redaction",
        URL: "/configuration-and-operations/entity-detection-and-redaction/customizing-redaction"
      }, {
        TEXT: "Accuracy Modes",
        URL: "/configuration-and-operations/entity-detection-and-redaction/accuracy-modes"
      }, {
        TEXT: "Language Detection",
        URL: "/configuration-and-operations/entity-detection-and-redaction/language-detection"
      }]
    },
    FILES: {
      TITLE: "Working With Files",
      LINKS: [{
        TEXT: "Processing Files",
        URL: "/configuration-and-operations/working-with-files/processing-files/index"
      }, {
        TEXT: "Structured Data",
        URL: "/configuration-and-operations/working-with-files/structured-data"
      }, {
        TEXT: "Supported File Types",
        URL: "/configuration-and-operations/working-with-files/supported-file-types"
      }, {
        TEXT: "Customizing Object Detection",
        URL: "/working-with-files/processing-files/customizing-object-detection"
      }]
    },
    FEATURES: {
      TITLE: "Advanced Features",
      LINKS: [{
        TEXT: "Websockets",
        URL: "/configuration-and-operations/advanced-features/websockets"
      }, {
        TEXT: "NER",
        URL: "/configuration-and-operations/advanced-features/ner"
      }, {
        TEXT: "Analyze Text",
        URL: "/configuration-and-operations/advanced-features/analyze-text"
      }, {
        TEXT: "Azure OCR",
        URL: "/configuration-and-operations/advanced-features/azure-ocr"
      }, {
        TEXT: "LLM Prompt Redaction",
        URL: "/configuration-and-operations/advanced-features/llms"
      }]
    },
    MANAGEMENT: {
      TITLE: "Container Management",
      LINKS: [{
        TEXT: "Benchmarks",
        URL: "/configuration-and-operations/container-management/benchmarks"
      }, {
        TEXT: "Concurrency",
        URL: "/configuration-and-operations/container-management/performance-tips"
      }, {
        TEXT: "CORS Configuration",
        URL: "/configuration-and-operations/container-management/cors-configuration"
      }, {
        TEXT: "Environment Variables",
        URL: "/configuration-and-operations/container-management/environment-variables"
      }, {
        TEXT: "Logstash & Dashboards",
        URL: "/configuration-and-operations/container-management/logstash-and-dashboards"
      }, {
        TEXT: "Performance Tips",
        URL: "/configuration-and-operations/container-management/performance-tips"
      }, {
        TEXT: "Security",
        URL: "/configuration-and-operations/container-management/security"
      }, {
        TEXT: "Upgrade Guide",
        URL: "/configuration-and-operations/container-management/upgrade-guide"
      }]
    }
  };
  const SECTIONS = [{
    title: CONTENT.DETECTION.TITLE,
    links: CONTENT.DETECTION.LINKS
  }, {
    title: CONTENT.FILES.TITLE,
    links: CONTENT.FILES.LINKS
  }, {
    title: CONTENT.FEATURES.TITLE,
    links: CONTENT.FEATURES.LINKS
  }, {
    title: CONTENT.MANAGEMENT.TITLE,
    links: CONTENT.MANAGEMENT.LINKS
  }];
  return <section className="col-span-full mt-4">
      <PaiTypography as="h2" className="mb-6" variant="h1">
        {CONTENT.TITLE}
      </PaiTypography>
      <div className="grid md:grid-cols-2 gap-6 md:gap-8">
        {SECTIONS.map(section => {
    return <div key={section.title} className="rounded-2xl p-6 border bg-primary-background">
              <PaiTypography className="mb-2" variant="h3">
                {section.title}
              </PaiTypography>
              <ul className="grid gap-y-2 gap-x-4 text-sm sm:grid-cols-2">
                {section.links.map(link => {
      return <li key={link.TEXT}>
                      <a href={link.URL}>{link.TEXT}</a>
                    </li>;
    })}
              </ul>
            </div>;
  })}
      </div>
    </section>;
};

export const HomeMainLinks = () => {
  const MAIN_LINKS = {
    VIEW_ALL: "View All",
    API: {
      TITLE: "API Docs & Reference",
      DESCRIPTION: "Jump right in with your IDE and check out the API documentation along with sample code, and reference projects.",
      VIEW_ALL_URL: "",
      LINKS: [{
        TEXT: "Process Files",
        BADGE: "Post",
        URL: "/latest/process-files-base64"
      }, {
        TEXT: "Process Text",
        BADGE: "Post",
        URL: "/latest/process-text"
      }, {
        TEXT: "NER Text",
        BADGE: "Post",
        URL: "/latest/ner-text"
      }, {
        TEXT: "Analyze Text",
        BADGE: "Post",
        URL: "/latest/analyze-text"
      }, {
        TEXT: "Github Examples",
        URL: "/examples/github-examples"
      }]
    },
    CONTAINERS: {
      TITLE: "Containers & Installation",
      DESCRIPTION: "Quick start guides to get the Limina container image deployed and running in your environment in minutes.",
      VIEW_ALL_URL: "/installation/index",
      LINKS: [{
        TEXT: "API Quickstart",
        URL: "/container-quickstart/api-quickstart"
      }, {
        TEXT: "Grabbing the Image",
        URL: "/installation/grabbing-the-image"
      }, {
        TEXT: "Running the Container",
        URL: "/installation/running-the-container"
      }, {
        TEXT: "Deploying to Production",
        URL: "/installation/deploying-into-production"
      }]
    },
    SUPPORTED: {
      TITLE: "Supported Entities & Languages",
      DESCRIPTION: "What types of entities can we detect, redact, and in what languages? Limina covers all major privacy regulations in over 50 different languages.",
      VIEW_ALL_URL: "",
      LINKS: [{
        TEXT: "Supported Languages",
        URL: "/languages"
      }, {
        TEXT: "Supported Entity Types",
        URL: "/entities/supported-entity-types"
      }, {
        TEXT: "Supported Object Entity Types",
        URL: "/entities/supported-object-entities"
      }, {
        TEXT: "Translated Entity Labels",
        URL: "/entities/translated-entity-labels"
      }]
    },
    PRODUCTS: {
      TITLE: "Other Product Guides",
      DESCRIPTION: "Companion products and components designed to enhance the functionality and efficiency of your installation.",
      VIEW_ALL_URL: "",
      LINKS: [{
        TEXT: "Python Thin Client",
        URL: "/product-guides/thin-client"
      }, {
        TEXT: "Container Playground",
        URL: "/product-guides/container-playground"
      }]
    }
  };
  const SECTIONS = [{
    description: MAIN_LINKS.API.DESCRIPTION,
    title: MAIN_LINKS.API.TITLE,
    viewAllUrl: MAIN_LINKS.API.VIEW_ALL_URL,
    links: MAIN_LINKS.API.LINKS
  }, {
    description: MAIN_LINKS.CONTAINERS.DESCRIPTION,
    title: MAIN_LINKS.CONTAINERS.TITLE,
    viewAllUrl: MAIN_LINKS.CONTAINERS.VIEW_ALL_URL,
    links: MAIN_LINKS.CONTAINERS.LINKS
  }, {
    description: MAIN_LINKS.PRODUCTS.DESCRIPTION,
    title: MAIN_LINKS.PRODUCTS.TITLE,
    viewAllUrl: MAIN_LINKS.PRODUCTS.VIEW_ALL_URL,
    links: MAIN_LINKS.PRODUCTS.LINKS
  }, {
    description: MAIN_LINKS.SUPPORTED.DESCRIPTION,
    title: MAIN_LINKS.SUPPORTED.TITLE,
    viewAllUrl: MAIN_LINKS.SUPPORTED.VIEW_ALL_URL,
    links: MAIN_LINKS.SUPPORTED.LINKS
  }];
  return SECTIONS.map(section => {
    return <section key={section.title} className="grid grid-cols-subgrid col-span-full mt-4">
        <div className="col-span-full flex gap-2 mb-4 pb-4 border-b max-sm:flex-col">
          <PaiTypography as="h2" className="flex items-start gap-2" variant="h1">
            <DocumentIcon className="pai-home-icon size-7 shrink-0 text-accent" />
            {section.title}
          </PaiTypography>
          {section.viewAllUrl && <a className="flex items-center gap-2 text-sm sm:ml-auto" href={section.viewAllUrl}>
              {MAIN_LINKS.VIEW_ALL}
              <ArrowRightIcon className="size-3" />
            </a>}
        </div>
        <p className="col-span-full md:col-span-5">{section.description}</p>
        <ul className="grid sm:grid-cols-2 col-span-full self-start gap-y-2 gap-x-8 md:col-span-6 md:col-start-7 max-sm:mt-4">
          {section.links.map(link => {
      return <li key={link.TEXT}>
                {link.BADGE && <PaiBadge className="relative -top-px mr-2 uppercase">{link.BADGE}</PaiBadge>}
                <a href={link.URL}>{link.TEXT}</a>
              </li>;
    })}
        </ul>
      </section>;
  });
};

export const HomeQuickLinks = () => {
  const QUICK_LINKS = {
    PREREQUISITES: {
      TITLE: "Prerequisites",
      DESCRIPTION: "Container prerequisites and system requirements",
      URL: "/installation/prerequisites-and-system-requirements"
    },
    QUICKSTART: {
      TITLE: "Quickstart",
      DESCRIPTION: "Set up and run the Limina container",
      URL: "/container-quickstart/quickstart-guide"
    },
    DEMO: {
      TITLE: "Try It Out",
      DESCRIPTION: "Demo Limina without deploying the container",
      URL: "/demo/ner"
    }
  };
  const LINKS = [{
    description: QUICK_LINKS.PREREQUISITES.DESCRIPTION,
    title: QUICK_LINKS.PREREQUISITES.TITLE,
    url: QUICK_LINKS.PREREQUISITES.URL,
    icon: ClipboardDocumentCheckIcon
  }, {
    description: QUICK_LINKS.QUICKSTART.DESCRIPTION,
    title: QUICK_LINKS.QUICKSTART.TITLE,
    url: QUICK_LINKS.QUICKSTART.URL,
    icon: PencilIcon
  }, {
    description: QUICK_LINKS.DEMO.DESCRIPTION,
    title: QUICK_LINKS.DEMO.TITLE,
    url: QUICK_LINKS.DEMO.URL,
    icon: RocketLaunchIcon
  }];
  return <ul className="not-prose grid grid-cols-subgrid gap-6 md:gap-8 col-span-full">
      {LINKS.map(link => {
    return <li key={link.title} className="col-span-full md:col-span-6 xl:col-span-4">
            <a className="pai-home-link-card" href={link.url}>
              <link.icon className="pai-home-icon" />
              <div>
                <PaiTypography as="strong" className="text-white block" variant="h2">
                  {link.title}
                </PaiTypography>
                <span>{link.description}</span>
              </div>
            </a>
          </li>;
  })}
    </ul>;
};

export const HomeBanner = () => {
  const BANNER_CONTENT = {
    TITLE: "Limina Docs",
    P1: "Limina is a stateless, container-based entity detection and redaction engine that specializes in the detection and de-identification of sensitive information in unstructured and structured data.",
    P2: "Limina is designed to be a flexible and lightweight addition to any data pipeline or workflow. No data leaves your environment and no data is ever shared with any third parties.",
    CTA_PRIMARY: {
      TEXT: "Get Started",
      URL: "/container-quickstart/quickstart-guide"
    },
    CTA_SECONDARY: {
      TEXT: "Intro & Background",
      URL: "/introduction"
    }
  };
  return <div className="pai-home-banner grid md:grid-cols-12 col-span-full gap-y-8">
      <h1 className="relative z-10 col-span-full md:row-start-1">{BANNER_CONTENT.TITLE}</h1>
      <div className="pai-home-banner-content space-y-6 md:col-span-7">
        <p className="block">{BANNER_CONTENT.P1}</p>
        <p className="block">{BANNER_CONTENT.P2}</p>
        <div className="flex max-sm:flex-col gap-4 mt-8">
          <PaiButton href={BANNER_CONTENT.CTA_PRIMARY.URL} size="large">
            {BANNER_CONTENT.CTA_PRIMARY.TEXT}
          </PaiButton>
          <PaiButton color="white" href={BANNER_CONTENT.CTA_SECONDARY.URL} size="large" variant="outlined">
            {BANNER_CONTENT.CTA_SECONDARY.TEXT}
          </PaiButton>
        </div>
      </div>
      <div className="pai-home-banner-logo md:col-start-9 md:col-span-4 md:row-start-1 md:row-end-3">
        <div className="pai-logo-wrap">
          <LogoPath />
          <PaiLogo />
          <LogoMask />
        </div>
      </div>
    </div>;
};

export const Home = () => {
  return <div className="pai-home grid grid-cols-12 gap-6 md:gap-8">
      <HomeBanner />
      <HomeQuickLinks />
      <HomeMainLinks />
      <HomeAdvanced />
      <HomeCta />
    </div>;
};

<Home />