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

# Overview (Edits On Demand)

> Let's get started on learning about Edits On Demand!

export const MtuneCard = ({title, description, href, hoverBorder = "#3b82f6", icon = null, iconColor = "#3b82f6", iconHoverColor = "#ffffff", children}) => {
  const Wrapper = href ? "a" : "div";
  return <Wrapper href={href} style={{
    "--hover-border": hoverBorder,
    "--icon-color": iconColor,
    "--icon-hover-color": iconHoverColor
  }} className="
        group
        not-prose
        block
        rounded-xl
        border
        border-zinc-200
        dark:border-zinc-800
        bg-white
        dark:bg-zinc-950
        p-5
        mb-4
        transition-all
        duration-200
        hover:shadow-md
        hover:-translate-y-[1px]
        hover:border-[var(--hover-border)]
        dark:hover:border-[var(--hover-border)]
        no-underline
      ">
      <div className="flex flex-col items-center sm:items-start text-center sm:text-left space-y-2">
        {icon && <div className="transition-colors" style={{
    color: "var(--icon-color)"
  }}>
            <div className="group-hover:text-[var(--icon-hover-color)] transition-colors">
              {React.cloneElement(icon, {
    width: 35,
    height: 35,
    fill: "currentColor"
  })}
            </div>
          </div>}

        <h3 className="text-sm font-semibold text-zinc-950 dark:text-white">
          {title}
        </h3>

        {description && <p className="text-sm text-zinc-600 dark:text-zinc-400">
            {description}
          </p>}

        {children && <div className="pt-2">{children}</div>}
      </div>
    </Wrapper>;
};

<div className="py-4">
  <Columns cols={3}>
    <MtuneCard title="Projects" description="Learn about projects and how they organize your edits!" href="/edits/projects/" hoverBorder="#de668b" icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M88 289.6L64.4 360.2L64.4 160C64.4 124.7 93.1 96 128.4 96L267.1 96C280.9 96 294.4 100.5 305.5 108.8L343.9 137.6C349.4 141.8 356.2 144 363.1 144L480.4 144C515.7 144 544.4 172.7 544.4 208L544.4 224L179 224C137.7 224 101 250.4 87.9 289.6zM509.8 512L131 512C98.2 512 75.1 479.9 85.5 448.8L133.5 304.8C140 285.2 158.4 272 179 272L557.8 272C590.6 272 613.7 304.1 603.3 335.2L555.3 479.2C548.8 498.8 530.4 512 509.8 512z"/></svg>} iconColor="#de668b" iconHoverColor="#3d155d" />

    <MtuneCard title="Single Track Edits" description="Learn about Single Track Edits and how to create or update them!" href="/edits/single/" hoverBorder="#de668b" icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M532 71C539.6 77.1 544 86.3 544 96L544 400C544 444.2 501 480 448 480C395 480 352 444.2 352 400C352 355.8 395 320 448 320C459.2 320 470 321.6 480 324.6L480 207.9L256 257.7L256 464C256 508.2 213 544 160 544C107 544 64 508.2 64 464C64 419.8 107 384 160 384C171.2 384 182 385.6 192 388.6L192 160C192 145 202.4 132 217.1 128.8L505.1 64.8C514.6 62.7 524.5 65 532.1 71.1z"/></svg>} iconColor="#de668b" iconHoverColor="#3d155d" />

    <MtuneCard title="Multi Track Edits" description="Learn about Multi Track Edits and how to create or update them!" href="/edits/multi/" hoverBorder="#de668b" icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M296.5 69.2C311.4 62.3 328.6 62.3 343.5 69.2L562.1 170.2C570.6 174.1 576 182.6 576 192C576 201.4 570.6 209.9 562.1 213.8L343.5 314.8C328.6 321.7 311.4 321.7 296.5 314.8L77.9 213.8C69.4 209.8 64 201.3 64 192C64 182.7 69.4 174.1 77.9 170.2L296.5 69.2zM112.1 282.4L276.4 358.3C304.1 371.1 336 371.1 363.7 358.3L528 282.4L562.1 298.2C570.6 302.1 576 310.6 576 320C576 329.4 570.6 337.9 562.1 341.8L343.5 442.8C328.6 449.7 311.4 449.7 296.5 442.8L77.9 341.8C69.4 337.8 64 329.3 64 320C64 310.7 69.4 302.1 77.9 298.2L112 282.4zM77.9 426.2L112 410.4L276.3 486.3C304 499.1 335.9 499.1 363.6 486.3L527.9 410.4L562 426.2C570.5 430.1 575.9 438.6 575.9 448C575.9 457.4 570.5 465.9 562 469.8L343.4 570.8C328.5 577.7 311.3 577.7 296.4 570.8L77.9 469.8C69.4 465.8 64 457.3 64 448C64 438.7 69.4 430.1 77.9 426.2z"/></svg>} iconColor="#de668b" iconHoverColor="#3d155d" />
  </Columns>

  <Columns cols={2}>
    <MtuneCard title="Fast Pass" description="Have questions or want to learn about Fast Pass? Continue Here!" href="/edits/fastpass" hoverBorder="#de668b" icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M128 320L156.5 92C158.5 76 172.1 64 188.3 64L356.9 64C371.9 64 384 76.1 384 91.1C384 94.3 383.4 97.6 382.3 100.6L336 224L475.3 224C495.5 224 512 240.4 512 260.7C512 268.1 509.8 275.3 505.6 281.4L313.4 562.4C307.5 571 297.8 576.1 287.5 576.1L284.6 576.1C268.9 576.1 256.1 563.3 256.1 547.6C256.1 545.3 256.4 543 257 540.7L304 352L160 352C142.3 352 128 337.7 128 320z"/></svg>} iconColor="#de668b" iconHoverColor="#3d155d" />

    <MtuneCard title="Billing & Pricing" description="Have questions or issues with Billing? Continue Here!" href="/edits/billing" hoverBorder="#de668b" icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M296 88C296 74.7 306.7 64 320 64C333.3 64 344 74.7 344 88L344 128L400 128C417.7 128 432 142.3 432 160C432 177.7 417.7 192 400 192L285.1 192C260.2 192 240 212.2 240 237.1C240 259.6 256.5 278.6 278.7 281.8L370.3 294.9C424.1 302.6 464 348.6 464 402.9C464 463.2 415.1 512 354.9 512L344 512L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552L296 512L224 512C206.3 512 192 497.7 192 480C192 462.3 206.3 448 224 448L354.9 448C379.8 448 400 427.8 400 402.9C400 380.4 383.5 361.4 361.3 358.2L269.7 345.1C215.9 337.5 176 291.4 176 237.1C176 176.9 224.9 128 285.1 128L296 128L296 88z"/></svg>} iconColor="#de668b" iconHoverColor="#3d155d" />
  </Columns>
</div>