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

> Complete documentation for Kamino Finance: Earn yield with automated vaults, Borrow and Lend, Multiply for leveraged positions, and concentrated liquidity on Solana. Developer Buildkit with REST API and TypeScript SDK. Curator tools for vault creation and management.

export const ContactForm = () => {
  const BUSINESS_TOPICS = ["Custom loan or yield solution", "Become a curator"];
  const TOPICS = ["Custom loan or yield solution", "Become a curator", "API / SDK developer support", "Rust Crate developer support", "Report a bug", "Feature request", "Other"];
  const TIMELINES = ["ASAP", "1-3 months", "3-6 months", "Just exploring"];
  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const EMPTY = {
    fullname: "",
    email: "",
    topic: "",
    company: "",
    jobtitle: "",
    timeline: "",
    message: ""
  };
  const [values, setValues] = useState(EMPTY);
  const [errors, setErrors] = useState({});
  const [submitError, setSubmitError] = useState("");
  const isBusiness = BUSINESS_TOPICS.includes(values.topic);
  const setField = name => e => {
    const value = e.target.value;
    setValues(prev => ({
      ...prev,
      [name]: value
    }));
    setErrors(prev => ({
      ...prev,
      [name]: undefined
    }));
  };
  const validate = () => {
    const next = {};
    if (!values.fullname.trim()) next.fullname = "Please enter your name.";
    if (!EMAIL_RE.test(values.email.trim())) next.email = "Please enter a valid email address.";
    if (!values.topic) next.topic = "Please select a topic.";
    if (isBusiness && !values.company.trim()) next.company = "Please enter your company name.";
    if (!values.message.trim()) next.message = "Please tell us what you have in mind.";
    setErrors(next);
    return Object.keys(next).length === 0;
  };
  const handleSubmit = e => {
    e.preventDefault();
    setSubmitError("");
    if (!validate()) return;
    if (typeof window === "undefined" || typeof window.Intercom !== "function") {
      setSubmitError("Sorry, we couldn't send your message right now. Please try again in a moment.");
      return;
    }
    const fullname = values.fullname.trim();
    const email = values.email.trim();
    window.Intercom("update", {
      name: fullname,
      email: email,
      inquiry_topic: values.topic
    });
    setTimeout(function () {
      const eventData = {
        topic: values.topic
      };
      if (isBusiness) {
        if (values.company.trim()) eventData.company = values.company.trim();
        if (values.jobtitle.trim()) eventData.job_title = values.jobtitle.trim();
        if (values.timeline) eventData.timeline = values.timeline;
      }
      window.Intercom("trackEvent", "web_form_submitted", eventData);
    }, 1000);
    window.Intercom("showNewMessage", values.message.trim());
    setValues(EMPTY);
    setErrors({});
  };
  return <form className="kf-form" onSubmit={handleSubmit} noValidate>
      <div className="kf-row">
        <div className="kf-group">
          <label className="kf-label" htmlFor="cf-fullname">Full name <span className="kf-req">*</span></label>
          <input className="kf-input" id="cf-fullname" type="text" maxLength={200} value={values.fullname} onChange={setField("fullname")} placeholder="Your name" />
          {errors.fullname && <span className="kf-error">{errors.fullname}</span>}
        </div>
        <div className="kf-group">
          <label className="kf-label" htmlFor="cf-email">Email address <span className="kf-req">*</span></label>
          <input className="kf-input" id="cf-email" type="email" maxLength={200} value={values.email} onChange={setField("email")} placeholder="you@example.com" />
          {errors.email && <span className="kf-error">{errors.email}</span>}
        </div>
      </div>

      <div className="kf-group">
        <label className="kf-label" htmlFor="cf-topic">Topic <span className="kf-req">*</span></label>
        <select className="kf-input" id="cf-topic" value={values.topic} onChange={setField("topic")}>
          <option value="" disabled>Select a topic</option>
          {TOPICS.map(t => <option key={t} value={t}>{t}</option>)}
        </select>
        {errors.topic && <span className="kf-error">{errors.topic}</span>}
      </div>

      {isBusiness && <div className="kf-business">
          <div className="kf-row">
            <div className="kf-group">
              <label className="kf-label" htmlFor="cf-company">Company name <span className="kf-req">*</span></label>
              <input className="kf-input" id="cf-company" type="text" maxLength={200} value={values.company} onChange={setField("company")} placeholder="Company" />
              {errors.company && <span className="kf-error">{errors.company}</span>}
            </div>
            <div className="kf-group">
              <label className="kf-label" htmlFor="cf-jobtitle">Job title</label>
              <input className="kf-input" id="cf-jobtitle" type="text" maxLength={200} value={values.jobtitle} onChange={setField("jobtitle")} placeholder="Job title" />
            </div>
          </div>
          <div className="kf-group">
            <label className="kf-label" htmlFor="cf-timeline">Timeline for implementation</label>
            <select className="kf-input" id="cf-timeline" value={values.timeline} onChange={setField("timeline")}>
              <option value="" disabled>Select a timeline (optional)</option>
              {TIMELINES.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </div>
        </div>}

      <div className="kf-group">
        <label className="kf-label" htmlFor="cf-message">Tell us what you have in mind <span className="kf-req">*</span></label>
        <textarea className="kf-input kf-textarea" id="cf-message" rows={5} maxLength={5000} value={values.message} onChange={setField("message")} placeholder="Tell us what you have in mind" />
        {errors.message && <span className="kf-error">{errors.message}</span>}
      </div>

      {submitError && <p className="kf-error">{submitError}</p>}

      <div className="kf-actions">
        <button type="submit" className="kf-btn">Send message</button>
      </div>
    </form>;
};

<div className="w-full" id="docs-welcome-page">
  <div className="relative overflow-hidden bg-white dark:bg-[#081632]">
    {/* Right background image — spans hero + cards */}

    <div className="hidden lg:block absolute inset-y-0 right-0 w-[45%] z-0">
      <img src="https://mintcdn.com/kamino-3d73a151/PLATQ08CVUwkaQvR/images/hero-image-with-k.webp?fit=max&auto=format&n=PLATQ08CVUwkaQvR&q=85&s=c2af15cbc52a601aadeb04b238b3b6a4" alt="Kamino hero" fetchPriority="high" className="dark:hidden w-full h-full object-cover object-left-top opacity-90" width="938" height="1080" data-path="images/hero-image-with-k.webp" />

      <img src="https://mintcdn.com/kamino-3d73a151/PLATQ08CVUwkaQvR/images/dark-hero-background-with-k.webp?fit=max&auto=format&n=PLATQ08CVUwkaQvR&q=85&s=405f4a8d8391347fd3a804cc8a2b30a2" alt="Kamino hero" fetchPriority="high" className="hidden dark:block w-full h-full object-cover object-left-top opacity-90" width="938" height="1080" data-path="images/dark-hero-background-with-k.webp" />
    </div>

    {/* Hero */}

    <div className="relative z-10 w-full pt-8 pb-6" id="docs-hero-section">
      <div className="k-container">
        <div className="mb-12">
          <h1 className="text-[2.5rem] leading-none lg:text-5xl font-semibold text-white mt-4 mb-4 tracking-tight">Kamino Documentation</h1>

          <p className="lg:text-lg text-white max-w-2xl">
            Explore the Kamino protocol with comprehensive documentation for developers, curators, and institutions.
          </p>
        </div>
      </div>
    </div>

    {/* Path cards */}

    <div className="relative z-10 w-full pt-2 pb-16 sm:pt-4 sm:pb-20">
      <div className="k-container">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="group bg-white dark:bg-[#13284d] border border-slate-200 dark:border-white/10 rounded-2xl p-8 card-shadow transition-all flex flex-col h-full">
            <div className="mb-6 h-32 bg-slate-50 dark:bg-[#0f2347] rounded-xl p-4 flex flex-col gap-2 overflow-hidden border border-slate-100 dark:border-white/10">
              <div className="flex gap-2">
                <div className="px-2 py-1 bg-white dark:bg-[#13284d] border border-slate-200 dark:border-white/10 rounded text-[10px] font-medium text-slate-500 dark:text-gray-400">Earn</div>
                <div className="px-2 py-1 bg-white dark:bg-[#13284d] border border-slate-200 dark:border-white/10 rounded text-[10px] font-medium text-slate-500 dark:text-gray-400">Borrow</div>
                <div className="px-2 py-1 bg-white dark:bg-[#13284d] border border-slate-200 dark:border-white/10 rounded text-[10px] font-medium text-slate-500 dark:text-gray-400">Multiply</div>
                <div className="px-2 py-1 bg-white dark:bg-[#13284d] border border-slate-200 dark:border-white/10 rounded text-[10px] font-medium text-slate-500 dark:text-gray-400">Swap</div>
              </div>

              <div className="flex gap-2 opacity-60">
                <div className="px-2 py-1 bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-400/20 rounded text-[10px] font-medium text-blue-600 dark:text-blue-300">Audits</div>
                <div className="px-2 py-1 bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-400/20 rounded text-[10px] font-medium text-blue-600 dark:text-blue-300">Risk</div>
                <div className="px-2 py-1 bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-400/20 rounded text-[10px] font-medium text-blue-600 dark:text-blue-300">Safety</div>
              </div>
            </div>

            <div className="flex items-center gap-2 mb-2">
              <h3 className="text-xl font-bold text-slate-900 dark:text-gray-100">Docs</h3>
              <span className="px-2 py-0.5 bg-blue-50 dark:bg-blue-500/15 text-blue-600 dark:text-blue-300 text-[10px] font-bold rounded-full uppercase">Product</span>
            </div>

            <p className="text-sm font-medium text-slate-500 dark:text-gray-400 mb-3">Product and risk docs for understanding Kamino.</p>
            <p className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed mb-6">Read about product mechanics, usage guides, audits, safeguards, and the risk framework behind Kamino.</p>

            <div className="mt-auto pt-6 border-t border-slate-50 dark:border-white/10 flex items-center justify-between gap-3">
              <div className="flex flex-wrap items-center gap-2">
                <a href="/docs/products/lending-vaults" className="text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline">Products</a>
                <span className="text-slate-300 dark:text-gray-600 text-xs leading-none">•</span>
                <a href="/docs/learn/lend" className="text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline">Learn</a>
                <span className="text-slate-300 dark:text-gray-600 text-xs leading-none">•</span>
                <a href="/docs/security" className="text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline">Security & Risk</a>
              </div>

              <a href="/docs/products/lending-vaults" aria-label="Open Docs" className="hero-card-arrow shrink-0 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
                <svg aria-hidden="true" focusable="false" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </a>
            </div>
          </div>

          <div className="group bg-white dark:bg-[#13284d] border border-slate-200 dark:border-white/10 rounded-2xl p-8 card-shadow transition-all flex flex-col h-full">
            <div className="mb-6 h-32 bg-[#FCFBFB] dark:bg-[#0f2347] rounded-xl p-4 overflow-hidden border border-slate-200 dark:border-white/10 font-mono text-[10px] relative">
              <div className="text-blue-600 dark:text-blue-300">const vault = new KaminoVault(rpc, address);</div>
              <div className="text-slate-500 dark:text-gray-400 mt-1">const shares = await vault.getUserShares(user);</div>

              <div className="absolute bottom-2 left-4 flex gap-1.5">
                <div className="px-1.5 py-0.5 bg-white dark:bg-[#13284d] text-slate-600 dark:text-gray-300 rounded border border-slate-200 dark:border-white/10">REST API</div>
                <div className="px-1.5 py-0.5 bg-white dark:bg-[#13284d] text-slate-600 dark:text-gray-300 rounded border border-slate-200 dark:border-white/10">TS SDK</div>
              </div>
            </div>

            <div className="flex items-center gap-2 mb-2">
              <h3 className="text-xl font-bold text-slate-900 dark:text-gray-100">Buildkit</h3>
              <span className="px-2 py-0.5 bg-indigo-50 dark:bg-indigo-500/15 text-indigo-600 dark:text-indigo-300 text-[10px] font-bold rounded-full uppercase">Developer</span>
            </div>

            <p className="text-sm font-medium text-slate-500 dark:text-gray-400 mb-3">AI-ready docs for faster Kamino integrations.</p>
            <p className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed mb-6">Build on Kamino with APIs, SDKs, Rust tooling, and practical examples.</p>

            <div className="mt-auto pt-6 border-t border-slate-50 dark:border-white/10 flex items-center justify-between gap-3">
              <div className="flex flex-wrap items-center gap-2">
                <a href="/docs/build/api-reference/introduction" className="text-xs font-semibold text-indigo-600 dark:text-indigo-400 hover:underline">API Reference</a>
                <span className="text-slate-300 dark:text-gray-600 text-xs leading-none">•</span>
                <a href="/docs/build/developers/overview" className="text-xs font-semibold text-indigo-600 dark:text-indigo-400 hover:underline">SDK Guides</a>
                <span className="text-slate-300 dark:text-gray-600 text-xs leading-none">•</span>
                <a href="/docs/build/agentic-finance/building-with-llms" className="text-xs font-semibold text-indigo-600 dark:text-indigo-400 hover:underline">AI Tools</a>
              </div>

              <a href="/docs/build" aria-label="Open Buildkit" className="hero-card-arrow shrink-0 text-slate-400 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400">
                <svg aria-hidden="true" focusable="false" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </a>
            </div>
          </div>

          <div className="group bg-white dark:bg-[#13284d] border border-slate-200 dark:border-white/10 rounded-2xl p-8 card-shadow transition-all flex flex-col h-full">
            <div className="mb-6 h-32 bg-slate-50 dark:bg-[#0f2347] rounded-xl p-4 flex items-center justify-between gap-4 border border-slate-100 dark:border-white/10 overflow-hidden">
              <div className="flex flex-col gap-1 w-full">
                <div className="h-4 w-full bg-blue-100 dark:bg-blue-500/20 rounded flex items-center px-1.5 text-[8px] font-bold text-blue-700 dark:text-blue-300">CREATE VAULT</div>
                <div className="h-4 w-full bg-blue-100 dark:bg-blue-500/20 rounded flex items-center px-1.5 text-[8px] font-bold text-blue-700 dark:text-blue-300">ALLOCATIONS</div>
                <div className="h-4 w-full bg-blue-100 dark:bg-blue-500/20 rounded flex items-center px-1.5 text-[8px] font-bold text-blue-700 dark:text-blue-300">SET UP FARMS</div>
              </div>

              <svg aria-hidden="true" focusable="false" className="w-6 h-6 text-slate-300 dark:text-gray-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>

              <div className="flex flex-col gap-1 w-full">
                <div className="h-4 w-full bg-teal-100 dark:bg-teal-500/20 rounded flex items-center px-1.5 text-[8px] font-bold text-teal-700 dark:text-teal-300">MARKETS</div>
                <div className="h-4 w-full bg-teal-100 dark:bg-teal-500/20 rounded flex items-center px-1.5 text-[8px] font-bold text-teal-700 dark:text-teal-300">RESERVES</div>
                <div className="h-4 w-full bg-teal-100 dark:bg-teal-500/20 rounded flex items-center px-1.5 text-[8px] font-bold text-teal-700 dark:text-teal-300">REWARDS</div>
              </div>
            </div>

            <div className="flex items-center gap-2 mb-2">
              <h3 className="text-xl font-bold text-slate-900 dark:text-gray-100">Curators</h3>
              <span className="px-2 py-0.5 bg-teal-50 dark:bg-teal-500/15 text-teal-600 dark:text-teal-300 text-[10px] font-bold rounded-full uppercase">Operator</span>
            </div>

            <p className="text-sm font-medium text-slate-500 dark:text-gray-400 mb-3">Vault and market docs.</p>
            <p className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed mb-6">Design and manage custom lending strategies on Kamino for institutions and professional risk managers.</p>

            <div className="mt-auto pt-6 border-t border-slate-50 dark:border-white/10 flex items-center justify-between gap-3">
              <div className="flex flex-wrap items-center gap-2">
                <a href="/docs/curators/vaults" className="text-xs font-semibold text-teal-600 dark:text-teal-400 hover:underline">Vaults</a>
                <span className="text-slate-300 dark:text-gray-600 text-xs leading-none">•</span>
                <a href="/docs/curators/markets" className="text-xs font-semibold text-teal-600 dark:text-teal-400 hover:underline">Markets</a>
                <span className="text-slate-300 dark:text-gray-600 text-xs leading-none">•</span>
                <a href="/docs/curators/reference/parameters" className="text-xs font-semibold text-teal-600 dark:text-teal-400 hover:underline">Parameters</a>
              </div>

              <a href="/docs/curators" aria-label="Open Curators" className="hero-card-arrow shrink-0 text-slate-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400">
                <svg aria-hidden="true" focusable="false" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full bg-[#F2FAFD] dark:bg-[#0e1d3a] pt-8 pb-12 sm:pb-14">
    <div className="text-center mb-8">
      <h2 className="text-[#6B7280] dark:text-gray-400 text-lg md:text-xl font-medium tracking-wide">Curators on Kamino</h2>
    </div>

    <div className="max-w-6xl mx-auto">
      {/* Static marquee: logos written inline (not a snippet) so Mintlify rewrites
                    the image paths to its CDN. Three identical copies; translateX(-33.333%)
                    in global.css scrolls one copy. Copies 2 and 3 are aria-hidden duplicates. */}

      <div className="logo-marquee">
        <div className="logo-marquee-track">
          {/* copy 1 */}

          <div className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/allez-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=3312631c709f84d2ac3807c261ad57af" alt="Allez Labs" className="h-8 w-auto logo-light" width="115" height="114" data-path="images/allez-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/allez-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=e2d209914f8266eb47c4a2334c3ffa1e" alt="Allez Labs" className="h-8 w-auto logo-dark" width="115" height="114" data-path="images/allez-logo-dark.svg" />
          </div>

          <div className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/gauntlet-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=fa512c9cdc4cb699bd4d7ce88a475b9e" alt="Gauntlet" className="h-8 w-auto logo-light" width="875" height="200" data-path="images/gauntlet-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/gauntlet-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=b5ef4dbdca8741f325bac747fc53fa41" alt="Gauntlet" className="h-8 w-auto logo-dark" width="875" height="200" data-path="images/gauntlet-logo-dark.svg" />
          </div>

          <div className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/rockaway-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=6c8417a8e85289343a9ee8c53ba9f244" alt="Rockaway" className="h-8 w-auto logo-light" width="160" height="29" data-path="images/rockaway-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/rockaway-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=96e29d15084d31c2abadf7c256ce1dcb" alt="Rockaway" className="h-8 w-auto logo-dark" width="160" height="29" data-path="images/rockaway-logo-dark.svg" />
          </div>

          <div className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/steakhouse-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=8c710519e2f57a3a45be5b22d746d809" alt="Steakhouse Financial" className="h-10 w-auto logo-light" width="512" height="512" data-path="images/steakhouse-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/steakhouse-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=ae0526279b9eaf22a1c5e696ce393552" alt="Steakhouse Financial" className="h-10 w-auto logo-dark" width="512" height="512" data-path="images/steakhouse-logo-dark.svg" />
          </div>

          <div className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/sentora-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=cc727abf15098caaa59da3863853390c" alt="Sentora" className="h-8 w-auto logo-light" width="698" height="216" data-path="images/sentora-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/sentora-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=66c541f4efe88551f091b7800135fb5b" alt="Sentora" className="h-8 w-auto logo-dark" width="698" height="216" data-path="images/sentora-logo-dark.svg" />
          </div>

          {/* copy 2 (decorative duplicate) */}

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/allez-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=3312631c709f84d2ac3807c261ad57af" alt="Allez Labs" className="h-8 w-auto logo-light" width="115" height="114" data-path="images/allez-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/allez-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=e2d209914f8266eb47c4a2334c3ffa1e" alt="Allez Labs" className="h-8 w-auto logo-dark" width="115" height="114" data-path="images/allez-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/gauntlet-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=fa512c9cdc4cb699bd4d7ce88a475b9e" alt="Gauntlet" className="h-8 w-auto logo-light" width="875" height="200" data-path="images/gauntlet-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/gauntlet-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=b5ef4dbdca8741f325bac747fc53fa41" alt="Gauntlet" className="h-8 w-auto logo-dark" width="875" height="200" data-path="images/gauntlet-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/rockaway-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=6c8417a8e85289343a9ee8c53ba9f244" alt="Rockaway" className="h-8 w-auto logo-light" width="160" height="29" data-path="images/rockaway-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/rockaway-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=96e29d15084d31c2abadf7c256ce1dcb" alt="Rockaway" className="h-8 w-auto logo-dark" width="160" height="29" data-path="images/rockaway-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/steakhouse-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=8c710519e2f57a3a45be5b22d746d809" alt="Steakhouse Financial" className="h-10 w-auto logo-light" width="512" height="512" data-path="images/steakhouse-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/steakhouse-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=ae0526279b9eaf22a1c5e696ce393552" alt="Steakhouse Financial" className="h-10 w-auto logo-dark" width="512" height="512" data-path="images/steakhouse-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/sentora-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=cc727abf15098caaa59da3863853390c" alt="Sentora" className="h-8 w-auto logo-light" width="698" height="216" data-path="images/sentora-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/sentora-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=66c541f4efe88551f091b7800135fb5b" alt="Sentora" className="h-8 w-auto logo-dark" width="698" height="216" data-path="images/sentora-logo-dark.svg" />
          </div>

          {/* copy 3 (decorative duplicate) */}

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/allez-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=3312631c709f84d2ac3807c261ad57af" alt="Allez Labs" className="h-8 w-auto logo-light" width="115" height="114" data-path="images/allez-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/allez-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=e2d209914f8266eb47c4a2334c3ffa1e" alt="Allez Labs" className="h-8 w-auto logo-dark" width="115" height="114" data-path="images/allez-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/gauntlet-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=fa512c9cdc4cb699bd4d7ce88a475b9e" alt="Gauntlet" className="h-8 w-auto logo-light" width="875" height="200" data-path="images/gauntlet-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/gauntlet-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=b5ef4dbdca8741f325bac747fc53fa41" alt="Gauntlet" className="h-8 w-auto logo-dark" width="875" height="200" data-path="images/gauntlet-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/rockaway-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=6c8417a8e85289343a9ee8c53ba9f244" alt="Rockaway" className="h-8 w-auto logo-light" width="160" height="29" data-path="images/rockaway-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/rockaway-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=96e29d15084d31c2abadf7c256ce1dcb" alt="Rockaway" className="h-8 w-auto logo-dark" width="160" height="29" data-path="images/rockaway-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/steakhouse-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=8c710519e2f57a3a45be5b22d746d809" alt="Steakhouse Financial" className="h-10 w-auto logo-light" width="512" height="512" data-path="images/steakhouse-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/steakhouse-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=ae0526279b9eaf22a1c5e696ce393552" alt="Steakhouse Financial" className="h-10 w-auto logo-dark" width="512" height="512" data-path="images/steakhouse-logo-dark.svg" />
          </div>

          <div aria-hidden="true" className="flex items-center justify-center shrink-0 mx-8 lg:mx-14 hover:opacity-80 transition-opacity curator-logo">
            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/sentora-logo.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=cc727abf15098caaa59da3863853390c" alt="Sentora" className="h-8 w-auto logo-light" width="698" height="216" data-path="images/sentora-logo.svg" />

            <img src="https://mintcdn.com/kamino-3d73a151/EHpt5rRzyV5R3dXt/images/sentora-logo-dark.svg?fit=max&auto=format&n=EHpt5rRzyV5R3dXt&q=85&s=66c541f4efe88551f091b7800135fb5b" alt="Sentora" className="h-8 w-auto logo-dark" width="698" height="216" data-path="images/sentora-logo-dark.svg" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full pt-16 sm:pt-20 pb-14 sm:pb-20 bg-[#fcfbfb] dark:bg-[#0c1b37]">
    <div className="k-container">
      <div className="max-w-[1180px] mx-auto">
        <div className="max-w-4xl mx-auto text-center mb-12">
          <p className="text-2xl lg:text-3xl font-medium leading-snug">
            <span className="text-gray-900 dark:text-gray-100">Kamino gives curators granular control</span>
            <span className="block mt-1 text-[#8A8F98] dark:text-gray-500">over institutional-grade lending infrastructure.</span>
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch">
          {/* Vaults card - Steps */}

          <div className="bg-white dark:bg-[#13284d] rounded-2xl p-8 lg:p-10 border border-gray-200 dark:border-gray-800 flex flex-col h-full">
            <a href="/docs/curators/vaults" className="curator-card-link flex items-center gap-3 mb-8 no-underline">
              <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-[#C6F4FF] dark:bg-[#0ea5e9]/20 text-[#082A56] dark:text-[#C6F4FF]">
                <Icon icon="vault" iconType="regular" />
              </div>

              <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 m-0">Vaults</h3>

              <Icon icon="arrow-right" iconType="regular" className="ml-auto curator-card-arrow" />
            </a>

            <div className="flex flex-col">
              {/* Step 1 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-blue-100 dark:bg-blue-500 text-blue-500 dark:text-white flex items-center justify-center font-bold text-base">1</div>

                  <div className="hidden xl:block w-[2px] grow bg-gray-200 dark:bg-gray-700" />
                </div>

                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Deploy Vault</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Initialize a lending vault that accepts a single deposit token.</p>
                </div>
              </div>

              {/* Step 2 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-white dark:bg-[#0c1b37] border-2 border-blue-200 dark:border-blue-400 text-blue-500 dark:text-blue-400 flex items-center justify-center font-bold text-base">2</div>

                  <div className="hidden xl:block w-[2px] grow bg-gray-200 dark:bg-gray-700" />
                </div>

                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Set Allocation Strategy</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Configure allocation weights, caps, and risk parameters across reserves.</p>
                </div>
              </div>

              {/* Step 3 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-white dark:bg-[#0c1b37] border-2 border-blue-200 dark:border-blue-400 text-blue-500 dark:text-blue-400 flex items-center justify-center font-bold text-base">3</div>

                  <div className="hidden xl:block w-[2px] grow bg-gray-200 dark:bg-gray-700" />
                </div>

                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Route Assets</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Distribute depositor assets across lending reserves and issue share tokens.</p>
                </div>
              </div>

              {/* Step 4 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-green-100 dark:bg-green-600 text-green-600 dark:text-white flex items-center justify-center font-bold text-base">4</div>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Earn Revenue</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Collect fees from vault operations and manage rewards distribution.</p>
                </div>
              </div>
            </div>
          </div>

          {/* Markets card - Steps */}

          <div className="bg-white dark:bg-[#13284d] rounded-2xl p-8 lg:p-10 border border-gray-200 dark:border-gray-800 flex flex-col h-full">
            <a href="/docs/curators/markets" className="curator-card-link flex items-center gap-3 mb-8 no-underline">
              <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-[#C6F4FF] dark:bg-[#0ea5e9]/20 text-[#082A56] dark:text-[#C6F4FF]">
                <Icon icon="building-columns" iconType="regular" />
              </div>

              <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 m-0">Markets</h3>

              <Icon icon="arrow-right" iconType="regular" className="ml-auto curator-card-arrow" />
            </a>

            <div className="flex flex-col">
              {/* Step 1 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-blue-100 dark:bg-blue-500 text-blue-500 dark:text-white flex items-center justify-center font-bold text-base">1</div>

                  <div className="hidden xl:block w-[2px] grow bg-gray-200 dark:bg-gray-700" />
                </div>

                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Create Market</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Deploy an isolated lending market with your own risk parameters.</p>
                </div>
              </div>

              {/* Step 2 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-white dark:bg-[#0c1b37] border-2 border-blue-200 dark:border-blue-400 text-blue-500 dark:text-blue-400 flex items-center justify-center font-bold text-base">2</div>

                  <div className="hidden xl:block w-[2px] grow bg-gray-200 dark:bg-gray-700" />
                </div>

                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Add Reserves</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Configure reserves with LTV, liquidation thresholds, rate curves, and oracles.</p>
                </div>
              </div>

              {/* Step 3 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center self-stretch">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-white dark:bg-[#0c1b37] border-2 border-blue-200 dark:border-blue-400 text-blue-500 dark:text-blue-400 flex items-center justify-center font-bold text-base">3</div>

                  <div className="hidden xl:block w-[2px] grow bg-gray-200 dark:bg-gray-700" />
                </div>

                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Configure Rewards</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Set up collateral and debt farms to distribute rewards to depositors and borrowers.</p>
                </div>
              </div>

              {/* Step 4 */}

              <div className="flex gap-4">
                <div className="flex flex-col items-center">
                  <div className="w-10 h-10 min-w-[40px] min-h-[40px] rounded-full bg-green-100 dark:bg-green-600 text-green-600 dark:text-white flex items-center justify-center font-bold text-base">4</div>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">Transfer to Multisig</h3>
                  <p className="text-sm text-gray-600 dark:text-white">Transfer market administration to a Squads multisig before launch.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full bg-white dark:bg-[#0c1b37] pt-16 sm:pt-20 pb-16 sm:pb-20">
    <div className="k-container">
      <h2 className="text-2xl lg:text-3xl font-semibold text-slate-900 dark:text-gray-100 mb-12">
        A complete toolchain for faster integrations.
      </h2>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <div className="lg:col-span-5 space-y-4">
          {/* REST API */}

          <div className="p-4 rounded-xl border border-slate-200 dark:border-gray-800 bg-white dark:bg-[#13284d] flex items-start gap-4">
            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center text-blue-600 dark:text-blue-400 shrink-0 mt-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
              </svg>
            </div>

            <div>
              <h4 className="font-bold text-slate-900 dark:text-gray-100">REST API</h4>
              <p className="text-xs text-slate-600 dark:text-gray-400">Data, analytics, user positions, unsigned transactions.</p>
            </div>
          </div>

          {/* TypeScript SDK - active */}

          <div className="p-4 rounded-xl border-2 border-[#0ea5e9] bg-[#C6F4FF]/30 dark:bg-[#C6F4FF]/10 flex items-start gap-4">
            <div className="w-8 h-8 bg-[#C6F4FF] dark:bg-[#0ea5e9] rounded flex items-center justify-center text-[#082A56] dark:text-white shrink-0 mt-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
              </svg>
            </div>

            <div>
              <h4 className="font-bold text-slate-900 dark:text-gray-100">TypeScript SDK</h4>
              <p className="text-xs text-slate-600 dark:text-gray-400">On-chain reads, transaction building, advanced operations.</p>
            </div>
          </div>

          {/* Rust Crate */}

          <div className="p-4 rounded-xl border border-slate-200 dark:border-gray-800 bg-white dark:bg-[#13284d] flex items-start gap-4">
            <div className="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded flex items-center justify-center text-orange-600 dark:text-orange-400 shrink-0 mt-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
              </svg>
            </div>

            <div>
              <h4 className="font-bold text-slate-900 dark:text-gray-100">Rust Crate</h4>
              <p className="text-xs text-slate-600 dark:text-gray-400">Rust clients, bots, on-chain CPI.</p>
            </div>
          </div>

          {/* AI Tools */}

          <div className="p-4 rounded-xl border border-slate-200 dark:border-gray-800 bg-white dark:bg-[#13284d] flex items-start gap-4">
            <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded flex items-center justify-center text-purple-600 dark:text-purple-400 shrink-0 mt-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.989-2.386l-.548-.547z" />
              </svg>
            </div>

            <div>
              <h4 className="font-bold text-slate-900 dark:text-gray-100">AI Tools</h4>
              <p className="text-xs text-slate-600 dark:text-gray-400">llms.txt, skill.md, agent assisted development.</p>
            </div>
          </div>

          {/* CLI */}

          <div className="p-4 rounded-xl border border-slate-200 dark:border-gray-800 bg-white dark:bg-[#13284d] flex items-start gap-4">
            <div className="w-8 h-8 bg-slate-100 dark:bg-slate-700/40 rounded flex items-center justify-center text-slate-600 dark:text-slate-300 shrink-0 mt-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>

            <div>
              <h4 className="font-bold text-slate-900 dark:text-gray-100">CLI</h4>
              <p className="text-xs text-slate-600 dark:text-gray-400">Managing markets, reserves, vaults, and operational workflows.</p>
            </div>
          </div>
        </div>

        <div className="lg:col-span-7 flex flex-col">
          <div id="toolchain-code" className="grow flex flex-col">
            ```typescript theme={null}
            import { createSolanaRpc, address, generateKeyPairSigner } from '@solana/kit';
            import { KaminoVault } from '@kamino-finance/klend-sdk';
            import { Decimal } from 'decimal.js';

            const signer = await generateKeyPairSigner();

            const vault = new KaminoVault(
              createSolanaRpc('https://api.mainnet-beta.solana.com'),
              address('HDsayqAsDWy3QvANGqh2yNraqcD8Fnjgh73Mhb3WRS5E')
            );

            const depositIxs = await vault.depositIxs(
              signer,
              new Decimal(100.0)
            );
            ```
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="support" className="w-full py-16 sm:py-20 bg-[#fcfbfb] dark:bg-[#091326]">
    <div className="k-container">
      <div className="text-center mb-12">
        <h2 className="text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          How can we help?
        </h2>

        <p className="text-gray-700 dark:text-gray-400 text-lg">
          Build with Kamino. Get the support you need to ship.
        </p>
      </div>

      <div className="max-w-2xl mx-auto mb-12">
        <ContactForm />
      </div>

      <div className="w-full flex flex-col sm:flex-row items-center justify-between gap-8 pt-4">
        <div className="flex items-center gap-6">
          <a href="https://x.com/kamino" target="_blank" rel="noopener noreferrer" aria-label="X" className="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors">
            <Icon icon="x-twitter" iconType="brands" size={22} />
          </a>

          <a href="https://discord.com/invite/kamino" target="_blank" rel="noopener noreferrer" aria-label="Discord" className="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors">
            <Icon icon="discord" iconType="brands" size={22} />
          </a>

          <a href="https://t.me/+DVzNEEQqiSRjODg0" target="_blank" rel="noopener noreferrer" aria-label="Telegram" className="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors">
            <Icon icon="telegram" iconType="brands" size={22} />
          </a>

          <a href="https://github.com/Kamino-Finance" target="_blank" rel="noopener noreferrer" aria-label="GitHub" className="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors">
            <Icon icon="github" iconType="brands" size={22} />
          </a>
        </div>

        <div className="flex items-center gap-6 flex-wrap justify-center">
          <a href="https://risk.kamino.finance" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors">
            Risk dashboard

            <Icon icon="arrow-up-right-from-square" iconType="regular" className="w-3.5 h-3.5" />
          </a>

          <a href="/docs/security" className="inline-flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors">
            Security
          </a>

          <a href="https://app.kamino.finance" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors">
            App

            <Icon icon="arrow-up-right-from-square" iconType="regular" className="w-3.5 h-3.5" />
          </a>

          <a href="https://kamino.com/terms" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors">
            Terms

            <Icon icon="arrow-up-right-from-square" iconType="regular" className="w-3.5 h-3.5" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>