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

# Use cases

> Browse workflows that bring your context, connected tools, and an outcome together in Replit.

export const useCases = [{
  slug: "prepare-for-a-customer-call",
  href: "/use-cases/prepare-for-a-customer-call",
  title: "Prepare for a customer call",
  description: "Bring connected tools and files together to compare evidence and prepare a clear answer.",
  categories: ["Sales", "Support"],
  time: "10 min",
  connectors: [{
    id: "salesforce",
    name: "Salesforce"
  }, {
    id: "slack",
    name: "Slack"
  }, {
    id: "google-drive",
    name: "Google Drive"
  }]
}, {
  slug: "analyze-customer-feedback",
  href: "/use-cases/analyze-customer-feedback",
  title: "Analyze customer feedback",
  description: "Turn support tickets into themes, trends, and a dashboard your team can act on.",
  categories: ["Product", "Support"],
  time: "15 min",
  connectors: [{
    id: "zendesk",
    name: "Zendesk"
  }, {
    id: "slack",
    name: "Slack"
  }, {
    id: "notion",
    name: "Notion"
  }]
}, {
  slug: "analyze-user-interviews",
  href: "/use-cases/analyze-user-interviews",
  title: "Analyze user interviews",
  description: "Turn interview transcripts into themes, verbatim quotes, and a research repository.",
  categories: ["Research", "Design"],
  time: "15 min",
  connectors: [{
    id: "google-drive",
    name: "Google Drive"
  }, {
    id: "notion",
    name: "Notion"
  }]
}, {
  slug: "monitor-brand-mentions",
  href: "/use-cases/monitor-brand-mentions",
  title: "Monitor brand mentions",
  description: "Catch important conversations about your brand and send them to the right place.",
  categories: ["Marketing"],
  time: "5 min",
  connectors: [{
    id: "x",
    name: "X"
  }, {
    id: "slack",
    name: "Slack"
  }, {
    id: "notion",
    name: "Notion"
  }]
}, {
  slug: "monitor-competitors",
  href: "/use-cases/monitor-competitors",
  title: "Monitor competitors",
  description: "Detect pricing and feature changes, then keep competitive intelligence current.",
  categories: ["Product", "Marketing"],
  time: "10 min",
  connectors: [{
    id: "slack",
    name: "Slack"
  }, {
    id: "notion",
    name: "Notion"
  }]
}, {
  slug: "monitor-top-ads",
  href: "/use-cases/monitor-top-ads",
  title: "Monitor top ads",
  description: "Centralize ad performance and find the creatives worth scaling or pausing.",
  categories: ["Marketing"],
  time: "10 min",
  connectors: [{
    id: "tiktok-ads",
    name: "TikTok Ads"
  }, {
    id: "snapchat",
    name: "Snapchat Ads"
  }, {
    id: "google-ads",
    name: "Google Ads"
  }, {
    id: "facebook",
    name: "Meta Ads"
  }]
}, {
  slug: "weekly-pipeline-report",
  href: "/use-cases/weekly-pipeline-report",
  title: "Generate a weekly sales report",
  description: "Show sales pipeline movement and trends from HubSpot every week.",
  categories: ["Sales", "Data"],
  time: "15 min",
  connectors: [{
    id: "hubspot",
    name: "HubSpot"
  }, {
    id: "google-sheets",
    name: "Google Sheets"
  }, {
    id: "slack",
    name: "Slack"
  }]
}, {
  slug: "track-subscriptions",
  href: "/use-cases/track-subscriptions",
  title: "Track subscriptions",
  description: "Find recurring payments in email and calculate what they cost each month.",
  categories: ["Finance", "Operations"],
  time: "10 min",
  connectors: [{
    id: "gmail",
    name: "Gmail"
  }, {
    id: "google-sheets",
    name: "Google Sheets"
  }]
}, {
  slug: "catch-up-while-away",
  href: "/use-cases/catch-up-while-away",
  title: "Catch up while away",
  description: "Turn Slack, email, and calendar activity into a return-to-work briefing.",
  categories: ["Operations", "Personal"],
  time: "10 min",
  connectors: [{
    id: "slack",
    name: "Slack"
  }, {
    id: "gmail",
    name: "Gmail"
  }, {
    id: "google-calendar",
    name: "Google Calendar"
  }, {
    id: "notion",
    name: "Notion"
  }]
}, {
  slug: "source-candidates",
  href: "/use-cases/source-candidates",
  title: "Source candidates",
  description: "Find matching engineers on GitHub, skip existing candidates, and draft outreach.",
  categories: ["HR"],
  time: "15 min",
  connectors: [{
    id: "google-drive",
    name: "Google Drive"
  }, {
    id: "github",
    name: "GitHub"
  }, {
    id: "ashby",
    name: "Ashby"
  }]
}, {
  slug: "find-investors",
  href: "/use-cases/find-investors",
  title: "Automate investor outreach",
  description: "Build a list of funds that match your thesis, find the right partner, and get contact details.",
  cover: "/images/use-cases/find-investors.png",
  categories: ["Finance", "Sales"],
  time: "15 min",
  connectors: [{
    id: "fullenrich",
    name: "FullEnrich"
  }, {
    id: "google-sheets",
    name: "Google Sheets"
  }]
}, {
  slug: "find-sponsors",
  href: "/use-cases/find-sponsors",
  title: "Automate sponsor prospecting",
  description: "Match brands to your event's audience, find the marketing lead, and get contact details.",
  cover: "/images/use-cases/find-sponsors.png",
  categories: ["Marketing", "Sales"],
  time: "15 min",
  connectors: [{
    id: "notion",
    name: "Notion"
  }, {
    id: "fullenrich",
    name: "FullEnrich"
  }, {
    id: "google-sheets",
    name: "Google Sheets"
  }]
}, {
  slug: "call-prospects",
  href: "/use-cases/call-prospects",
  title: "Turn prospect lists into booked demos",
  description: "Agent calls your list, books the demo on your calendar, and logs every refusal.",
  cover: "/images/use-cases/call-prospects.png",
  categories: ["Sales", "Operations"],
  time: "20 min",
  connectors: [{
    id: "salesforce",
    name: "Salesforce"
  }, {
    id: "agentphone",
    name: "AgentPhone"
  }, {
    id: "google-calendar",
    name: "Google Calendar"
  }]
}, {
  slug: "send-emails",
  href: "/use-cases/send-emails",
  title: "Automate contact discovery and outreach",
  description: "Describe who you need to reach, get a shortlist, and email every contact from your Gmail.",
  cover: "/images/use-cases/send-emails.png",
  categories: ["Operations", "Personal"],
  time: "10 min",
  connectors: [{
    id: "gmail",
    name: "Gmail"
  }]
}, {
  slug: "ship-github-change",
  href: "/use-cases/ship-github-change",
  title: "Contribute to a GitHub project",
  description: "Import a repository from a chat, ask for one small change, and let Agent open the pull request.",
  cover: "/images/use-cases/ship-github-change.png",
  categories: ["Engineering"],
  time: "20 min",
  connectors: [{
    id: "github",
    name: "GitHub"
  }]
}, {
  slug: "generate-release-notes",
  href: "/use-cases/generate-release-notes",
  title: "Generate release notes",
  description: "Turn GitHub and Linear changes into release notes people can read.",
  categories: ["Engineering", "Product"],
  time: "10 min",
  connectors: [{
    id: "github",
    name: "GitHub"
  }, {
    id: "linear",
    name: "Linear"
  }, {
    id: "notion",
    name: "Notion"
  }]
}, {
  slug: "pitch-deck-from-website",
  href: "/use-cases/pitch-deck-from-website",
  title: "Build an investor pitch deck",
  description: "Turn your website, brand files, and financials into an investor-ready deck.",
  categories: ["Finance", "Operations"],
  time: "20 min",
  connectors: [{
    id: "google-drive",
    name: "Google Drive"
  }, {
    id: "google-sheets",
    name: "Google Sheets"
  }]
}, {
  slug: "create-social-kit",
  href: "/use-cases/create-social-kit",
  title: "Create social icons and banners",
  description: "Generate profile icons and cover banners for every network in the right size.",
  categories: ["Marketing", "Design"],
  time: "10 min",
  connectors: [{
    id: "google-drive",
    name: "Google Drive"
  }]
}, {
  slug: "design-landing-page",
  href: "/use-cases/design-landing-page",
  title: "Design a landing page",
  description: "Turn a brief and brand files into a waitlist or launch page in Replit Design.",
  categories: ["Marketing", "Design"],
  time: "15 min",
  connectors: [{
    id: "notion",
    name: "Notion"
  }, {
    id: "google-drive",
    name: "Google Drive"
  }]
}, {
  slug: "redesign-your-website",
  href: "/use-cases/redesign-your-website",
  title: "Redesign your existing website",
  description: "Recreate your current site as a design frame, compare directions, then build the winner.",
  categories: ["Design", "Marketing"],
  time: "15 min",
  connectors: []
}, {
  slug: "create-design-system",
  href: "/use-cases/create-design-system",
  title: "Create your design system",
  description: "Extract your colors, type, and tokens into a saved system, then bring existing apps under it.",
  categories: ["Design"],
  time: "20 min",
  connectors: [{
    id: "google-drive",
    name: "Google Drive"
  }, {
    id: "figma",
    name: "Figma"
  }]
}, {
  slug: "import-figma-design",
  href: "/use-cases/import-figma-design",
  title: "Go from Figma to a live App",
  description: "Turn Figma frames into a publishable Replit app that matches your design.",
  categories: ["Design", "Engineering"],
  time: "15 min",
  connectors: [{
    id: "figma",
    name: "Figma"
  }]
}, {
  slug: "build-online-store",
  href: "/use-cases/build-online-store",
  title: "Build an online store",
  description: "Import your catalog into Shopify and design the storefront in Replit.",
  categories: ["Operations", "Sales"],
  time: "20 min",
  connectors: [{
    id: "google-sheets",
    name: "Google Sheets"
  }, {
    id: "google-drive",
    name: "Google Drive"
  }, {
    id: "shopify",
    name: "Shopify"
  }]
}, {
  slug: "live-api-dashboard",
  href: "/use-cases/live-api-dashboard",
  title: "Build a live API dashboard",
  description: "Turn a public API into a dashboard that stays up to date.",
  categories: ["Engineering", "Data"],
  time: "15 min",
  connectors: []
}, {
  slug: "review-a-live-website",
  href: "/use-cases/review-a-live-website",
  title: "Review a live website",
  description: "Check links, responsiveness, accessibility, and design decisions on any live site, wherever it's hosted.",
  categories: ["Design", "Engineering"],
  time: "20 min",
  connectors: [{
    id: "slack",
    name: "Slack"
  }, {
    id: "notion",
    name: "Notion"
  }]
}, {
  slug: "launch-event-website",
  href: "/use-cases/launch-event-website",
  title: "Launch a paid event website",
  description: "Ship a public event site with paid tickets, confirmations, and an attendee list.",
  categories: ["Operations", "Marketing"],
  time: "20 min",
  connectors: [{
    id: "notion",
    name: "Notion"
  }, {
    id: "resend",
    name: "Resend"
  }, {
    id: "stripe",
    name: "Stripe"
  }]
}, {
  slug: "launch-a-brand-from-one-conversation",
  href: "/use-cases/launch-a-brand-from-one-conversation",
  title: "Launch a brand from one conversation",
  description: "Build a website, then turn it into a pitch deck and launch graphics without a new brief.",
  categories: ["Marketing", "Design"],
  time: "30 min",
  connectors: []
}, {
  slug: "spreadsheet-to-team-dashboard",
  href: "/use-cases/spreadsheet-to-team-dashboard",
  title: "Turn a spreadsheet into a team dashboard",
  description: "Analyze a CSV, publish an interactive dashboard, and create a findings deck.",
  categories: ["Data", "Operations"],
  time: "20 min",
  connectors: []
}, {
  slug: "plan-a-launch-from-budget-and-feedback",
  href: "/use-cases/plan-a-launch-from-budget-and-feedback",
  title: "Plan a launch from budget and feedback",
  description: "Combine a budget and customer feedback into a launch plan and roadmap.",
  categories: ["Product", "Finance"],
  time: "15 min",
  connectors: []
}, {
  slug: "analyze-your-app-funnel",
  href: "/use-cases/analyze-your-app-funnel",
  title: "Analyze your app funnel",
  description: "Find where users drop off, then turn the answer into an interactive dashboard.",
  categories: ["Product", "Data"],
  time: "10 min",
  connectors: []
}];

export const UseCaseSearch = ({items}) => {
  const coverBackgroundCount = 17;
  const useCaseCoverBackground = slug => {
    let hash = 0;
    for (let i = 0; i < slug.length; i++) {
      hash = hash * 31 + slug.charCodeAt(i) >>> 0;
    }
    const index = hash % coverBackgroundCount + 1;
    return `/images/use-cases/backgrounds/use-case-bg-${index}.png`;
  };
  const coverMarkByConnector = {
    salesforce: "salesforce",
    slack: "slack",
    "google-drive": "google-drive",
    zendesk: "zendesk",
    notion: "notion",
    x: "x",
    "tiktok-ads": "tiktok",
    snapchat: "snapchat",
    "google-ads": "google-ads",
    facebook: "meta",
    hubspot: "hubspot",
    gmail: "gmail",
    "google-calendar": "google-calendar",
    github: "github",
    ashby: "ashby",
    linear: "linear",
    figma: "figma",
    shopify: "shopify",
    stripe: "stripe",
    fullenrich: "fullenrich",
    agentphone: "agentphone",
    "google-sheets": "google-sheets",
    resend: "resend"
  };
  const coverFallbackMarksBySlug = {
    "redesign-your-website": ["web", "paintbrush"],
    "live-api-dashboard": ["API"]
  };
  const renderCard = item => {
    const categories = item.categories ?? [];
    const connectors = item.connectors ?? [];
    const search = [item.title, ...categories, ...connectors.map(connector => connector.name)].join(" ").toLowerCase();
    const coverFallback = coverFallbackMarksBySlug[item.slug];
    let coverMarks;
    if (coverFallback) {
      coverMarks = coverFallback.map(mark => ({
        key: mark,
        src: `/images/use-cases/cover-icons/use-case-logo-${mark}.svg`
      }));
    } else {
      const availableConnectors = connectors.filter(connector => coverMarkByConnector[connector.id]);
      coverMarks = availableConnectors.slice(0, 3).map(connector => ({
        key: connector.id,
        src: `/images/use-cases/cover-icons/use-case-logo-${coverMarkByConnector[connector.id]}.svg`
      }));
    }
    return <a className="use-case-card" href={item.href} key={item.slug} data-search={search}>
        <div className="use-case-card-cover">
          <img className="use-case-card-cover-bg" src={useCaseCoverBackground(item.slug)} alt="" loading="lazy" width="800" height="451" />
          <div className="use-case-card-cover-marks" aria-hidden="true">
            {coverMarks.map(mark => <span className="use-case-card-cover-mark" key={mark.key}>
                <img src={mark.src} alt="" />
              </span>)}
          </div>
        </div>
        <h3>{item.title}</h3>
        <p>{item.description}</p>
        <div className="use-case-card-meta">
          {categories.length > 0 && <>
              <span>{categories.join(", ")}</span>
              <span aria-hidden="true">·</span>
            </>}
          <span>{item.time}</span>
        </div>
      </a>;
  };
  useEffect(() => {
    const host = document.getElementById("header") || document.getElementById("use-case-search-fallback");
    if (!host) return undefined;
    const wrapper = document.createElement("div");
    wrapper.className = "use-case-search-input";
    wrapper.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
        <path d="M15.25 15.25L11.285 11.285" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M7.75 12.75C10.5114 12.75 12.75 10.5114 12.75 7.75C12.75 4.98858 10.5114 2.75 7.75 2.75C4.98858 2.75 2.75 4.98858 2.75 7.75C2.75 10.5114 4.98858 12.75 7.75 12.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <input type="text" placeholder="Search use cases..." aria-label="Search use cases" />
    `;
    const input = wrapper.querySelector("input");
    const grid = document.getElementById("use-case-grid");
    const empty = document.getElementById("use-case-empty");
    const onInput = () => {
      const q = input.value.trim().toLowerCase();
      let visible = 0;
      grid.querySelectorAll(".use-case-card").forEach(card => {
        const match = !q || (card.dataset.search || "").includes(q);
        card.style.display = match ? "" : "none";
        if (match) visible += 1;
      });
      if (empty) empty.style.display = visible ? "none" : "";
    };
    input.addEventListener("input", onInput);
    host.appendChild(wrapper);
    return () => {
      input.removeEventListener("input", onInput);
      wrapper.remove();
    };
  }, []);
  return <>
      <style>{`
        header.leading-none h1 { flex: 1 1 auto; width: 100%; text-align: center; }
        header.leading-none p { text-align: center; }
        header.leading-none { display: flex; flex-direction: column; }
        header.leading-none .flex.flex-col.sm\\:flex-row { flex-direction: column; gap: 0; }
        header.leading-none #page-context-menu { order: -1; align-self: flex-end; margin: 0 0 12px !important; }
      `}</style>
      <div id="use-case-search-fallback" />
      <div className="use-case-results">
        <div id="use-case-grid" className="use-case-grid">
          {items.map(renderCard)}
        </div>
        <p id="use-case-empty" className="use-case-search-empty" style={{
    display: "none"
  }}>
          No use cases found. Try a different title, connector, or job function.
        </p>
      </div>
    </>;
};

<UseCaseSearch items={useCases} />