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

# Flinks Documentation

export const FlinksVideo = ({videoId, playlist}) => {
  const PLAYLIST = [{
    id: '1183239584',
    hash: '5b5f7c9f89',
    title: 'Welcome to Flinks',
    page: '/'
  }, {
    id: '1183239766',
    hash: '4965a1d16c',
    title: 'Choosing your front-end integration',
    page: '/guides/connect/choose-a-frontend-solution'
  }, {
    id: '1183240266',
    hash: '17b592a0ac',
    title: 'Choosing your back-end integration',
    page: '/guides/connect/choose-a-backend-solution'
  }, {
    id: '1183240418',
    hash: 'a5adf4b7a4',
    title: 'Using the Flinks API and webhooks',
    page: '/guides/webhooks/introduction'
  }, {
    id: '1183240713',
    hash: 'a6fce4b746',
    title: 'Flinks Enrich Walkthrough',
    page: '/guides/enrich/getting-started'
  }, {
    id: '1183241038',
    hash: '869c6490df',
    title: 'Exploring Enrich attributes in the Dashboard',
    page: '/guides/dashboard/tools'
  }, {
    id: '1183241189',
    hash: 'b03e777aee',
    title: 'Flinks Upload Walkthrough',
    page: '/guides/upload/getting-started'
  }, {
    id: '1183241410',
    hash: '3a57b7e600',
    title: "You're live with Flinks",
    page: null
  }];
  const containerRef = useRef(null);
  const playerRef = useRef(null);
  const [ended, setEnded] = useState(false);
  const currentIndex = PLAYLIST.findIndex(v => v.id === videoId);
  const current = PLAYLIST[currentIndex];
  const next = currentIndex < PLAYLIST.length - 1 ? PLAYLIST[currentIndex + 1] : null;
  const shouldAutoplay = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('fv') === 'play';
  const linkTo = page => page ? `${page}?fv=play` : '#';
  useEffect(() => {
    setEnded(false);
    if (playerRef.current) {
      playerRef.current.off('ended');
      playerRef.current.off('play');
      playerRef.current = null;
    }
    let cancelled = false;
    let script = document.querySelector('script[src="https://player.vimeo.com/api/player.js"]');
    const init = () => {
      if (cancelled || !containerRef.current) return;
      const iframe = containerRef.current.querySelector('iframe');
      if (!iframe || typeof window.Vimeo === 'undefined') return;
      const player = new window.Vimeo.Player(iframe);
      playerRef.current = player;
      player.on('ended', () => {
        if (cancelled) return;
        if (playlist && next) {
          var allWraps = document.querySelectorAll('.fv-wrap');
          for (var i = 0; i < allWraps.length; i++) {
            var iframe = allWraps[i].querySelector('iframe');
            if (iframe && iframe.src.indexOf(next.id) !== -1) {
              allWraps[i].scrollIntoView({
                behavior: 'smooth',
                block: 'center'
              });
              var nextPlayer = new window.Vimeo.Player(iframe);
              setTimeout(function () {
                nextPlayer.play().catch(function () {});
              }, 600);
              break;
            }
          }
        } else {
          setEnded(true);
        }
      });
      player.on('play', () => {
        if (!cancelled) setEnded(false);
      });
      if (shouldAutoplay) {
        player.play().catch(() => {});
      }
    };
    if (!script) {
      script = document.createElement('script');
      script.src = 'https://player.vimeo.com/api/player.js';
      script.async = true;
      script.onload = init;
      document.head.appendChild(script);
    } else if (window.Vimeo) {
      setTimeout(init, 100);
    } else {
      script.addEventListener('load', init);
    }
    return () => {
      cancelled = true;
      if (playerRef.current) {
        playerRef.current.off('ended');
        playerRef.current.off('play');
        playerRef.current = null;
      }
    };
  }, [videoId]);
  const handleReplay = () => {
    if (playerRef.current) {
      playerRef.current.setCurrentTime(0);
      playerRef.current.play();
    }
    setEnded(false);
  };
  return <>
      <style>{`
        .fv-wrap {
          position: relative;
          width: 100%;
          border-radius: 16px;
          overflow: hidden;
        }
        .fv-aspect {
          padding: 56.25% 0 0 0;
          position: relative;
        }
        .fv-aspect iframe {
          position: absolute;
          top: 0; left: 0;
          width: 100%; height: 100%;
          border: 0;
        }

        /* --- overlay backdrop --- */
        .fv-overlay {
          position: absolute;
          inset: 0;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow-y: auto;
          padding: 16px;
          background: radial-gradient(ellipse at 50% 40%, rgba(0,10,20,0.80), rgba(0,0,0,0.92));
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          animation: fv-fade-in 0.35s ease-out;
        }
        .fv-overlay::-webkit-scrollbar { width: 0; }
        @keyframes fv-fade-in {
          from { opacity: 0; }
          to   { opacity: 1; }
        }

        /* --- glass card --- */
        .fv-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 14px;
          padding: 28px 32px 24px;
          max-width: 380px;
          width: 100%;
          background: rgba(255,255,255,0.07);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 32px 24px 28px 20px;
          box-shadow: 0 8px 40px rgba(0,0,0,0.25);
          animation: fv-card-up 0.4s ease-out both;
          animation-delay: 0.08s;
          margin: auto;
        }
        @keyframes fv-card-up {
          from { opacity: 0; transform: translateY(14px) scale(0.97); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* --- text --- */
        .fv-label {
          font-family: var(--font-body, 'Helvetica Neue'), sans-serif;
          font-size: 11px !important;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.12em;
          color: rgba(0,172,228,0.85) !important;
          margin: 0;
        }
        .fv-title {
          font-family: var(--font-heading, 'Helvetica Neue'), sans-serif;
          font-size: 19px !important;
          font-weight: 600;
          line-height: 1.35;
          color: #fff !important;
          margin: 0;
          text-align: center;
        }
        .fv-counter {
          font-family: var(--font-body, 'Helvetica Neue'), sans-serif;
          font-size: 12px !important;
          color: rgba(255,255,255,0.35) !important;
          margin: 0;
        }

        /* --- pill buttons --- */
        .fv-actions {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 2px;
        }
        .fv-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 10px 26px;
          border-radius: 50px;
          font-family: var(--font-body, 'Helvetica Neue'), sans-serif;
          font-size: 14px !important;
          font-weight: 600;
          cursor: pointer;
          text-decoration: none !important;
          border: none;
          transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .fv-btn:hover {
          transform: translateY(-1px);
        }
        .fv-btn:active {
          transform: translateY(0);
        }
        .fv-btn-primary {
          background: #fff;
          color: #0a0a0a !important;
          box-shadow: 0 2px 16px rgba(255,255,255,0.12);
        }
        .fv-btn-primary:hover {
          box-shadow: 0 4px 24px rgba(255,255,255,0.18);
        }
        .fv-btn-ghost {
          background: rgba(255,255,255,0.08);
          color: rgba(255,255,255,0.85) !important;
          border: 1px solid rgba(255,255,255,0.12);
        }
        .fv-btn-ghost:hover {
          background: rgba(255,255,255,0.13);
        }

        /* --- browse link --- */
        .fv-browse {
          font-family: var(--font-body, 'Helvetica Neue'), sans-serif;
          font-size: 12px !important;
          color: rgba(255,255,255,0.40) !important;
          text-decoration: none !important;
          transition: color 0.15s;
        }
        .fv-browse:hover {
          color: rgba(255,255,255,0.7) !important;
        }

        /* --- mobile --- */
        @media (max-width: 480px) {
          .fv-card {
            padding: 20px 16px 18px;
            gap: 10px;
            border-radius: 24px 18px 22px 16px;
          }
          .fv-title { font-size: 16px !important; }
          .fv-btn { font-size: 13px !important; padding: 9px 20px; }
        }
      `}</style>
      <div className="fv-wrap" ref={containerRef}>
        <div className="fv-aspect">
          <iframe src={`https://player.vimeo.com/video/${current.id}?h=${current.hash}&badge=0&autopause=0&player_id=0&app_id=58479`} allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title={current.title} />
          {ended && <div className="fv-overlay">
              <div className="fv-card">
                {next ? <>
                    <p className="fv-label">Up next</p>
                    <p className="fv-title">{next.title}</p>
                    <p className="fv-counter">{currentIndex + 2} of {PLAYLIST.length}</p>
                    <div className="fv-actions">
                      <a href={linkTo(next.page)} className="fv-btn fv-btn-primary">
                        Continue →
                      </a>
                      <button onClick={handleReplay} className="fv-btn fv-btn-ghost">
                        Replay
                      </button>
                    </div>
                  </> : <>
                    <p className="fv-label">Series complete</p>
                    <p className="fv-title">Nice — you've watched them all</p>
                    <div className="fv-actions">
                      <button onClick={handleReplay} className="fv-btn fv-btn-primary">
                        Replay
                      </button>
                      <a href="/guides/getting-started/walkthrough-videos" className="fv-btn fv-btn-ghost">
                        All videos
                      </a>
                    </div>
                  </>}

                <a href="/guides/getting-started/walkthrough-videos" className="fv-browse">
                  Browse all videos
                </a>
              </div>
            </div>}
        </div>
      </div>
    </>;
};

<div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-8 sm:pt-12 lg:pt-16 pb-4 sm:pb-6 lg:pb-8 max-w-[70rem]">
  <div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">
    <div className="flex-1 w-full lg:w-auto text-center lg:text-left">
      <h1 className="text-4xl sm:text-5xl lg:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-4 sm:mb-6">
        Welcome to Flinks' Documentation
      </h1>

      <p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 lg:mb-10 max-w-2xl mx-auto lg:mx-0">
        Build financial apps with our secure API, access bank data, transactions, and account info easily. Watch the video below to learn what Flinks can do for you.
      </p>

      <div className="flex flex-col sm:flex-row gap-4 sm:gap-4 justify-center lg:justify-start">
        <a href="/guides/getting-started/about-flinks" className="inline-flex items-center justify-center gap-2 px-6 sm:px-6 py-3 sm:py-2 font-semibold bg-black dark:bg-white text-white dark:text-black rounded-full hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors duration-200 text-base">
          Get Started

          <span className="dark:block hidden">
            <Icon icon="arrow-right" color="black" />
          </span>

          <span className="dark:hidden block">
            <Icon icon="arrow-right" color="white" />
          </span>
        </a>

        <a href="/api-home" className="inline-flex items-center justify-center px-6 sm:px-6 py-3 sm:py-2 font-semibold bg-white dark:bg-gray-800 text-black dark:text-white border-2 border-black dark:border-white rounded-full hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 text-base">
          View API Docs
        </a>
      </div>
    </div>

    <div className="flex-1 w-full flex justify-center lg:justify-end">
      <FlinksVideo videoId="1183239584" />
    </div>
  </div>
</div>

<div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-4 sm:pt-6 lg:pt-8 pb-8 sm:pb-12 lg:pb-16 max-w-[70rem]">
  <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-4 sm:mb-6">Discover our products</h2>

  <Columns cols={2}>
    <Card title="Connect" href="/guides/connect/getting-started">
      <div style={{ display: 'flex', gap: '0', alignItems: 'flex-end', minHeight: '300px', margin: '-1rem -1.5rem -1rem -1rem' }}>
        <div style={{ flex: 1, fontSize: '1.125rem', lineHeight: '1.75', padding: '1rem 1rem 1.5rem 1rem' }}>
          Connect to your users' financial accounts
        </div>

        <img noZoom style={{ width: '55%', height: '300px', objectFit: 'cover', margin: 0, padding: 0 }} src="https://mintcdn.com/flinks-2682732c/SuJctMaY_z3s-D2D/images/get_started_connect.png?fit=max&auto=format&n=SuJctMaY_z3s-D2D&q=85&s=deea1c5a80d615e8adf1a8015716703e" alt="Connect" width="800" height="1017" data-path="images/get_started_connect.png" />
      </div>
    </Card>

    <Card title="Enrich" href="/guides/enrich/getting-started">
      <div style={{ display: 'flex', gap: '0', alignItems: 'flex-end', minHeight: '300px', margin: '-1rem -1.5rem -1rem -1rem' }}>
        <div style={{ flex: 1, fontSize: '1.125rem', lineHeight: '1.75', padding: '1rem 1rem 1.5rem 1rem' }}>
          Gain insights from raw financial data
        </div>

        <img noZoom style={{ width: '55%', height: '300px', objectFit: 'cover', margin: 0, padding: 0 }} src="https://mintcdn.com/flinks-2682732c/SuJctMaY_z3s-D2D/images/get_started_enrich.png?fit=max&auto=format&n=SuJctMaY_z3s-D2D&q=85&s=c60c66703f9ddd1966dc0737da4850ae" alt="Enrich" width="800" height="657" data-path="images/get_started_enrich.png" />
      </div>
    </Card>

    <Card title="Pay" href="/guides/pay/getting-started">
      <div style={{ display: 'flex', gap: '0', alignItems: 'flex-end', minHeight: '300px', margin: '-1rem -1.5rem -1rem -1rem' }}>
        <div style={{ flex: 1, fontSize: '1.125rem', lineHeight: '1.75', padding: '1rem 1rem 1.5rem 1rem' }}>
          Provide a holistic bank payment experience
        </div>

        <img noZoom style={{ width: '55%', height: '300px', objectFit: 'cover', margin: 0, padding: 0 }} src="https://mintcdn.com/flinks-2682732c/SuJctMaY_z3s-D2D/images/get_started_pay.png?fit=max&auto=format&n=SuJctMaY_z3s-D2D&q=85&s=c27b8b8cbe17dc15d553570ed2d3be9e" alt="Pay" width="800" height="1017" data-path="images/get_started_pay.png" />
      </div>
    </Card>

    <Card title="Outbound" href="/api/outbound/getting-started">
      <div style={{ display: 'flex', gap: '0', alignItems: 'flex-end', minHeight: '300px', margin: '-1rem -1.5rem -1rem -1rem' }}>
        <div style={{ flex: 1, fontSize: '1.125rem', lineHeight: '1.75', padding: '1rem 1rem 1.5rem 1rem' }}>
          Launch your Open Banking API
        </div>

        <img noZoom style={{ width: '55%', height: '300px', objectFit: 'cover', margin: 0, padding: 0 }} src="https://mintcdn.com/flinks-2682732c/SuJctMaY_z3s-D2D/images/get_started_outbound.png?fit=max&auto=format&n=SuJctMaY_z3s-D2D&q=85&s=5e4ba03f749facb0b9c751078e2abf24" alt="Outbound" width="800" height="676" data-path="images/get_started_outbound.png" />
      </div>
    </Card>
  </Columns>

  <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-4 sm:mb-6 mt-10">Explore our use cases</h2>

  <Columns cols={2}>
    <Card title="Onboarding (KYC)" icon="fingerprint" horizontal href="/guides/connect/confirm-your-customers-identity">
      Verify your customers' bank account information to prevent fraud
    </Card>

    <Card title="Income Verification" icon="bank" horizontal href="/guides/enrich/setup-attributes">
      Verify your customer's income and employment information for various use cases
    </Card>

    <Card title="Credit & Underwriting" icon="hand-holding-circle-dollar" horizontal href="/guides/enrich/attributes">
      Get insights from borrower financial data and make smarter, quicker lending decisions
    </Card>

    <Card title="Account Funding" icon="wallet" horizontal href="/guides/pay/send-and-receive-money">
      Send money to your bank account using e-Transfer and EFT payments
    </Card>

    <Card title="Open Banking" icon="rectangle-terminal" horizontal href="/api/outbound/getting-started">
      Create your open banking solution for bank APIs
    </Card>

    <Card title="Document Processing & Authentication" icon="file-search" horizontal href="/guides/upload/document-processing">
      Verify the authentication of documents provided to your customers
    </Card>
  </Columns>

  <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-4 sm:mb-6 mt-10">Browse by popular topics</h2>

  <Columns cols={2}>
    <Card title="Set up Flinks Connect" icon="link" horizontal href="/guides/connect/getting-started" />

    <Card title="Process customer account data" icon="database" horizontal href="/guides/upload/document-processing" />

    <Card title="Upload a file" icon="file-upload" horizontal href="/guides/upload/upload-a-file" />

    <Card title="Financial Institutions we support" icon="building" horizontal href="/guides/connect/connect-bank-accounts" />

    <Card title="Types of data you can receive" icon="list-ul" horizontal href="/guides/connect/connect-bank-accounts" />
  </Columns>
</div>