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

# Gallery

> Explore what you can build with Knot's merchant connectivity platform

export const UseCaseCard = ({img, title, description, viewHref}) => <div className="not-prose block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-[rgb(var(--background-dark))] border border-gray-950/10 dark:border-white/10 overflow-hidden w-full hover:border-[rgb(var(--primary))] dark:hover:border-[rgb(var(--primary-light))]">
    <img src={img} alt="" className="block w-full object-cover object-center m-0 rounded-none" />
    <div className="px-6 py-5">
      <div style={{
  display: "block",
  margin: 0,
  fontWeight: 700
}} className="text-base leading-6 text-gray-900 dark:text-gray-100">{title}</div>
      <div style={{
  display: "block",
  margin: 0,
  marginTop: "4px"
}} className="font-normal text-base leading-6 text-gray-600 dark:text-gray-400">{description}</div>
      <div className="mt-8">
        <a href={viewHref} className="w-full inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium rounded-lg bg-gray-900 dark:bg-white !text-white dark:!text-gray-900 hover:opacity-90 no-underline border border-transparent">
          View
        </a>
      </div>
    </div>
  </div>;

<div className="max-w-8xl mx-auto pb-12">
  <Columns cols={2}>
    <UseCaseCard img="https://mintcdn.com/knot/0MwiXdOBgWetsfg_/images/upcoming-charge-funding-alert.png?fit=max&auto=format&n=0MwiXdOBgWetsfg_&q=85&s=5509aa24f0af295ae26fb6926698729f" title="Upcoming Charge Funding Alert" description="Notify users to fund their account before an upcoming charge hits." viewHref="/use-cases/upcoming-charge-funding-alert" width="3840" height="1600" data-path="images/upcoming-charge-funding-alert.png" />

    <UseCaseCard img="https://mintcdn.com/knot/OrfWfEot9G_iQSVL/images/enrich-transaction-details.png?fit=max&auto=format&n=OrfWfEot9G_iQSVL&q=85&s=4fb97badbf613604bcb7691e7b10f118" title="Enrich Transaction Details" description="Display itemized purchase details on every transaction in your app." viewHref="/use-cases/enrich-transaction-details" width="3840" height="1600" data-path="images/enrich-transaction-details.png" />

    <UseCaseCard img="https://mintcdn.com/knot/5IST4mKl2iOIrkYY/images/dispute-deflection.png?fit=max&auto=format&n=5IST4mKl2iOIrkYY&q=85&s=dfc35ce5ec12d56852790429363f99e5" title="Dispute Deflection" description="Reduce first-party fraud by showing users exactly what they purchased before they file a dispute." viewHref="/use-cases/dispute-deflection" width="3840" height="1600" data-path="images/dispute-deflection.png" />

    <UseCaseCard img="https://mintcdn.com/knot/UI5vmaLrIbjzR32k/images/personalized-dining-deals.png?fit=max&auto=format&n=UI5vmaLrIbjzR32k&q=85&s=b78caa8a5701e84ebb5020233c695f0d" title="Personalized Dining Deals" description="Match cashback deals to restaurants users already order from on delivery platforms." viewHref="/use-cases/personalized-dining-deals" width="3840" height="1600" data-path="images/personalized-dining-deals.png" />

    <UseCaseCard img="https://mintcdn.com/knot/UI5vmaLrIbjzR32k/images/post-purchase-price-adjustment.png?fit=max&auto=format&n=UI5vmaLrIbjzR32k&q=85&s=3881179c1fafe5fa3a2acf40901fce1b" title="Post-Purchase Price Adjustment" description="Alert users when a product they bought drops in price within the retailer's adjustment window." viewHref="/use-cases/post-purchase-price-adjustment" width="3840" height="1600" data-path="images/post-purchase-price-adjustment.png" />

    <UseCaseCard img="https://mintcdn.com/knot/0MwiXdOBgWetsfg_/images/store-brand-alternative-savings.png?fit=max&auto=format&n=0MwiXdOBgWetsfg_&q=85&s=a7622fbc89fe1d5834670ceb1ffef194" title="Store Brand Alternative Savings" description="Suggest cheaper store-brand alternatives for name-brand purchases." viewHref="/use-cases/store-brand-alternative-savings" width="3840" height="1600" data-path="images/store-brand-alternative-savings.png" />

    <UseCaseCard img="https://mintcdn.com/knot/LAFgTtGjggJatYpO/images/cross-merchant-savings.png?fit=max&auto=format&n=LAFgTtGjggJatYpO&q=85&s=771b6ae43a67de9e35c2367860adec82" title="Cross-Merchant Savings" description="Alert users when a product they bought is available for less at another merchant." viewHref="/use-cases/cross-merchant-savings" width="3840" height="1600" data-path="images/cross-merchant-savings.png" />

    <UseCaseCard img="https://mintcdn.com/knot/UI5vmaLrIbjzR32k/images/price-is-right.png?fit=max&auto=format&n=UI5vmaLrIbjzR32k&q=85&s=9658786508ff235dd78ccc67949b3140" title="Price Is Right" description="A gamified price-guessing game powered by real purchase data to drive repeat engagement." viewHref="/use-cases/price-is-right" width="3840" height="1600" data-path="images/price-is-right.png" />

    <UseCaseCard img="https://mintcdn.com/knot/UI5vmaLrIbjzR32k/images/shopping-list.png?fit=max&auto=format&n=UI5vmaLrIbjzR32k&q=85&s=a4567797f60eb2bdf6b08a3519799169" title="Shopping List" description="Generate a pre-populated shopping list from a user's repeat purchase history." viewHref="/use-cases/shopping-list" width="3840" height="1600" data-path="images/shopping-list.png" />
  </Columns>
</div>
