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

# Introduction

export const HeroCard = ({icon, title, description, href}) => {
  return <a className="group cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-900 rounded-2xl transition-colors duration-100 p-4" href={href}>
            <div className="flex items-center gap-1.5">
                <Icon icon={icon} iconType="solid" className="mr-0.5 opacity-50" />
                <h3 className="text-gray-900 dark:text-zinc-50 font-medium">
                    {title}
                </h3>
                <Icon icon="arrow-right" iconType="solid" className="opacity-50 group-hover:opacity-100 group-hover:translate-x-0.5 transition-[transform,opacity] duration-300" size={12} />
            </div>
        </a>;
};

<div className="relative">
  <div className="absolute -top-12 left-0 right-0 opacity-80">
    <img src="https://mintcdn.com/duels-e8aae8c1/m_4OUlt9ASC-rG7I/images/hero/background-light.svg?fit=max&auto=format&n=m_4OUlt9ASC-rG7I&q=85&s=d2b20b8ed3c13768b2c925ed4cc03d3b" className="block dark:hidden select-none pointer-events-none w-full h-auto" draggable={false} alt="" width="1152" height="388" data-path="images/hero/background-light.svg" />

    <img src="https://mintcdn.com/duels-e8aae8c1/m_4OUlt9ASC-rG7I/images/hero/background-dark.svg?fit=max&auto=format&n=m_4OUlt9ASC-rG7I&q=85&s=2abec27f496333e04116cc593751a228" className="hidden dark:block select-none pointer-events-none w-full h-auto" draggable={false} alt="" width="1152" height="388" data-path="images/hero/background-dark.svg" />
  </div>

  <div className="relative z-10 py-16 lg:py-32 lg:pb-16 max-w-4xl mx-auto">
    <h1 className="block text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      Welcome to Duels+
    </h1>

    <div className="px-6 lg:px-0 mt-8 lg:mt-16 grid sm:grid-cols-3 gap-x-6 gap-y-4">
      <HeroCard icon="windows" title="Installing on Windows" href="/guides/installation/windows" />

      <HeroCard icon="apple" title="Installing on macOS" href="/guides/installation/osx" />

      <HeroCard icon="linux" title="Installing on Linux" href="/guides/installation/linux" />
    </div>
  </div>
</div>