index.html

---
layout: main
title: fsharp.org
keywords: F#, FSharp, F# Programming
---

<div class="w-full"></div>

<!-- Jumbotron -->
<section class="jumbotron w-full px-6 bg-black/90 text-white" id="main">
  <div class="max-w-6xl py-8 sm:py-14 md:py-24 mx-auto">
    <div
      class="flex flex-col items-center sm:grid sm:grid-cols-[auto_1fr] sm:auto-rows-auto gap-6 sm:gap-8 md:gap-12"
      id="jumbotron"
    >
      <div id="logo">
        <a href="{{ '/testimonials' | relative_url }}"
          ><img
            src="{{ 'img/logo/fsharp256.png' | relative_url }}"
            alt="F# Logo"
          />
        </a>
      </div>

      <div
        class="text-center text-white/90 sm:text-left text-pretty self-center font-heading leading-relaxed text-xl sm:text-2xl md:text-3xl lg:text-5xl"
      >
        <span class="text-white font-bold">F#</span> empowers everyone to write
        <span class="text-white font-bold">succinct</span>,
        <span class="text-white font-bold">robust</span> and
        <span class="text-white font-bold">performant</span> code
      </div>

      <div></div>

      <div>
        <div
          class="nav-item w-fit"
          x-data="{open: false}"
          @click.away="open=false"
        >
          <button
            @click="open=!open"
            x-bind:aria-expanded="open"
            type="button"
            class="hero-button text-heading transition px-6! py-4! text-2xl rounded border-2 border-white active:bg-white active:text-slate-950"
            id="download-btn"
          >
            Use F# <i class="fa-solid fa-chevron-down text-white/70"></i>
          </button>
          {% include usemenu.html %}
        </div>
      </div>
    </div>
  </div>
</section>

<section
  class="home-section px-6 py-18 bg-white dark:bg-slate-800 shadow-lg z-20"
>
  <div class="max-w-6xl mx-auto">
    <div class="flex flex-col sm:flex-row justify-between gap-16 text-center">
      <div class="flex-1">
        <i
          class="fa-solid mb-5 fa-thumbs-up text-brand-dark dark:text-brand-light text-3xl"
        ></i>
        <p class="pretty">
          F# gives you <b>simplicity</b> like Python with <b>correctness</b>,
          <b>robustness</b> and <b>performance</b> beyond C# or Java.
        </p>
      </div>
      <div class="flex-1">
        <i
          class="fa-solid mb-5 fa-code-branch text-brand-dark dark:text-brand-light text-3xl"
        ></i>
        <p class="pretty">
          F# is <b>open source</b>, <b>cross-platform</b> and <b>free</b> to use
          with <b>professional</b> tooling.
        </p>
      </div>
      <div class="flex-1">
        <i
          class="fa-solid mb-5 fa-globe text-brand-dark dark:text-brand-light text-3xl"
        ></i>
        <p class="pretty">
          F# is a <b>JavaScript</b> and <b>.NET</b> language for <b>web</b>,
          <b>cloud</b>, <b>data-science</b>, <b>apps</b> and more.
        </p>
      </div>
    </div>
  </div>
</section>

<section
  class="home-section px-6 pt-12 pb-12 from-brand-dark to-brand-light/50 bg-gradient-to-b text-sm"
>
  <div class="featured max-w-6xl mx-auto">
    <div
      x-data="{swiper: null}"
      x-init="swiper = new Swiper($refs.container, {
                    loop: true,
                    slidesPerView: 1,
                    spaceBetween: 32,
                })"
      class="relative w-full"
    >
      <div
        class="swiper-container w-full h-fit overflow-clip"
        x-ref="container"
      >
        <div class="swiper-wrapper">
          <!-- code snippets -->
          {% for snippet in site.snippets %}
          <div class="swiper-slide">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-12">
              <div
                class="relative border-gray-950 border bg-gray-950/80 backdrop-blur-sm rounded-lg flex flex-col w-full shadow-lg overflow-clip"
              >
                <div class="grid grid-cols-1">
                  <div
                    class="row-[1] col-[1] text-gray-400 justify-self-center p-4 pt-3"
                  >
                    <img
                      class="w-6 h-6 inline align-middle mr-2"
                      src="{{ 'img/logo/fsharp256.png' | relative_url }}"
                      alt="F# Logo"
                    /><span class="align-middle text-[0.6rem] sm:text-xs"
                      >{{ snippet.title }}</span
                    >
                  </div>
                  <div
                    class="row-[1] col-[1] justify-self-left self-center pl-4"
                  >
                    <div class="flex flex-row gap-2">
                      <div
                        class="border-gray-600 border w-3 h-3 rounded-full"
                      ></div>
                      <div
                        class="border-gray-600 border w-3 h-3 rounded-full"
                      ></div>
                      <div
                        class="border-gray-600 border w-3 h-3 rounded-full"
                      ></div>
                    </div>
                  </div>

                  <div
                    class="row-[2] leading-relaxed h-96 w-full overflow-y-auto col-[1] p-4 pt-1 text-[0.8rem] sm:text-xs lg:text-md snippet"
                  >
                    {% highlight fsharp %}{{ snippet.code }}{% endhighlight %}
                  </div>
                </div>
                <svg
                  class="absolute left-0 top-0 w-3/6"
                  viewBox="0 0 100 172"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M0 0H100L47 172H0V0Z"
                    fill="url(#paint0_linear_47_2)"
                  ></path>
                  <defs>
                    <linearGradient
                      id="paint0_linear_47_2"
                      x1="50"
                      y1="0"
                      x2="50"
                      y2="100"
                      gradientUnits="userSpaceOnUse"
                    >
                      <stop stop-color="white" stop-opacity=".035"></stop>
                      <stop
                        offset="1"
                        stop-color="white"
                        stop-opacity="0"
                      ></stop>
                    </linearGradient>
                  </defs>
                </svg>
              </div>
              <div class="md:hidden prose prose-sm dark:prose-invert">
                {{ snippet.excerpt }}
              </div>
              <div class="hidden md:block prose prose-sm dark:prose-invert">
                {{ snippet.content }}
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <div class="flex flex-row gap-4 justify-center items-center">
        <div class="xl:absolute mt-8 inset-y-0 -left-10 z-10 flex items-center">
          <button
            @click="swiper.slidePrev()"
            class="-ml-2 lg:-ml-4 flex justify-center items-center focus:outline-none"
          >
            <i
              class="fa-solid fa-circle-chevron-left drop-shadow-md text-3xl opacity-90"
            ></i>
          </button>
        </div>

        <div
          class="xl:absolute mt-8 inset-y-0 -right-10 z-10 flex items-center"
        >
          <button
            @click="swiper.slideNext()"
            class="-mr-2 lg:-mr-4 flex justify-center items-center focus:outline-none"
          >
            <i
              class="fa-solid fa-circle-chevron-right drop-shadow-md text-3xl opacity-90"
            ></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="home-section px-6 pt-12 pb-12 hero-pattern">
  <div class="featured max-w-6xl mx-auto">
    <!-- <h2 class="section-header mb-8 text-4xl text-center font-bold text-brand-dark">Get Started</h2> -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
      <div
        class="bg-white dark:text-white dark:bg-slate-800 border border-gray-200 dark:border-gray-900 shadow-lg rounded-lg p-8"
      >
        <h3 class="text-2xl font-semibold">
          <i
            class="fa-solid fa-highlighter mr-2 text-brand-dark dark:text-brand-light mb-6"
          ></i>
          Learn
        </h3>
        <ul class="list-unstyled space-y-2">
          <li>
            <a
              class="transition hover:text-brand-dark hover:dark:text-brand-light"
              href="https://dotnet.microsoft.com/learn/languages/fsharp-hello-world-tutorial"
              target="_blank"
              >F# Hello World in 5min</a
            >
          </li>
          <li>
            <a
              class="transition hover:text-brand-dark hover:dark:text-brand-light"
              href="https://www.youtube.com/playlist?list=PLdo4fOcmZ0oUFghYOp89baYFBTGxUkC7Z"
              target="_blank"
              >F# for Beginners</a
            >
          </li>
          <li>
            <a
              class="transition hover:text-brand-dark hover:dark:text-brand-light"
              href="{{ '/use/web-apps/' | relative_url }} "
              target="_blank"
              >F# for JavaScript</a
            >
          </li>
        </ul>
      </div>
      <div
        class="bg-white dark:text-white dark:bg-slate-800 border border-gray-200 dark:border-gray-900 shadow-lg rounded-lg p-8"
      >
        <h3 class="text-2xl font-semibold">
          <i
            class="fa-solid fa-users mr-2 text-brand-dark dark:text-brand-light mb-6"
          ></i>
          Community
        </h3>
        <ul class="list-unstyled space-y-2">
          <li>
            Join the conversation on
            <a
              class="transition hover:text-brand-dark hover:dark:text-brand-light"
              href="https://bsky.app/starter-pack/blizard.io/3la4zswhqbt2e"
              >Bluesky</a
            >
            or
            <a
              class="transition hover:text-brand-dark hover:dark:text-brand-light"
              href="https://discord.gg/R6n7c54"
              >Discord</a
            >
          </li>
          <li>
            Participate in
            <a
              class="transition hover:text-brand-dark hover:dark:text-brand-light"
              href="https://amplifyingfsharp.io/"
              >Amplifying F#</a
            >
          </li>
          <li>
            <a
              class="transition hover:text-brand-dark hover:dark:text-brand-light"
              href="{{ '/community/projects/' | relative_url }}"
              onclick="_gaq.push(['_trackEvent', 'home-community', 'clicked', 'contribute'])"
              >Contribute to F# projects</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section
  x-data="{
        selected : [],
        choose() {
            console.log('choosing...');
            const testimonialsToShow = 6;
            this.selected =
                Array
                    .from({ length: {{ site.testimonials.size }} }, (_, i) => i)
                    .sort(_ => Math.random() - 0.5)
                    .slice(0,testimonialsToShow);
        }
    }"
  x-init="
        choose();
    "
  class="home-section p-6 py-12"
>
  <div
    class="columns-1 sm:columns-2 lg:columns-3 min-h-72 gap-12 max-w-6xl mb-8 mx-auto"
  >
    {% for testimonial in site.testimonials %}
    <div
      x-cloak
      x-show="selected.includes({{ forloop.index0 }})"
      class="break-inside-avoid mb-12"
    >
      <p class="mb-2">{{ testimonial.quote }}</p>
      <div
        class="text-sm text-slate-400 before:inline before:content['.&ndash;']"
      >
        {{ testimonial.bullets[0] | markdownify }}
      </div>
    </div>

    {% endfor %}
  </div>

  <div class="flex flex-row gap-4 w-full justify-center">
    <button
      type="button"
      x-on:click="choose()"
      class="rounded px-4 text-lg md:text-xl active:bg-brand-dark/30 active:dark:bg-brand-light/30 text-brand-dark dark:text-brand-light hover:text-brand-light hover:dark:text-brand-dark transition group border bg-brand-dark/10 hover:bg-brand-light/20 dark:bg-brand-light/10 hover:dark:bg-brand-dark/20 border-brand-dark hover:border-brand-light hover:dark:border-brand-dark dark:border-brand-light shadow"
    >
      <i class="fa-solid fa-dice"></i>
    </button>

    <a
      href="{{ '/testimonials' | relative_url }}"
      class="w-fit transition group border active:bg-brand-dark/30 active:dark:bg-brand-light/30 bg-brand-dark/10 hover:bg-brand-light/20 dark:bg-brand-light/10 hover:dark:bg-brand-dark/20 border-brand-dark hover:border-brand-light hover:dark:border-brand-dark dark:border-brand-light shadow flex flex-row items-center rounded"
    >
      <div class="py-4 px-2 md:px-2 text-center text-sm md:text-lg">
        Read More Testimonials
      </div>
      <div
        class="transition self-stretch flex justify-center items-center bg-brand-dark group-hover:bg-brand-light group-active:bg-brand-dark/30 group-active:dark:bg-brand-light/30 dark:bg-brand-light group-hover:dark:bg-brand-dark text-white dark:text-slate-950 p-4"
      >
        <i class="fa-solid fa-arrow-right"></i>
      </div>
    </a>
  </div>
</section>

<section class="home-section px-6">
  <hr class="bg-slate-200 dark:bg-slate-800 w-full" />

  <div class="max-w-6xl mx-auto flex flex-col items-center">
    <h2
      class="text-heading hover:text-brand-dark hover:dark:text-brand-light mt-8 mb-4 font-bold text-xl sm:text-2xl md:text-3xl"
    >
      <a href="https://foundation.fsharp.org/sponsor_membership">
        Sponsors Past & Present
      </a>
    </h2>

    <div
      class="flex flex-row place-content-center items-center justify-around flex-wrap"
    >
      <div class="p-4">
        <img
          class="mx-auto d-block img-fluid carousel-img"
          src="img/sup/fsharpworks.png"
          alt="fsharpWorks logo"
        />
      </div>
      <div class="p-4">
        <img
          class="mx-auto d-block img-fluid carousel-img"
          src="img/sup/prolucid.png"
          alt="prolucid logo"
        />
      </div>
      <div class="p-4">
        <img
          class="mx-auto d-block img-fluid carousel-img"
          src="img/sup/genetec.png"
          alt="genetec logo"
        />
      </div>
      <div class="p-4">
        <img
          class="mx-auto d-block img-fluid carousel-img"
          src="img/sup/drdispatch.png"
          alt="drdispatch logo"
        />
      </div>
    </div>
  </div>
</section>