---
layout: layout.vto
features:
    - icon: "web"
      heading: Modernized Interface
      description: Reliable workflows upgraded with a 2024 look. Notice how we retained familiarity with this site's <a class="font-semibold underline" href="https://web.archive.org/web/20240119062342/http://www.sfiab.ca/" target="_blank">predecessor</a>.
    - icon: "lock"
      heading: Modern Security Practices
      description: A good software is more than just a modern interface, security is at the core.
    - icon: "emoji_events"
      heading: Awards/Prizes Management
      description: Ensure that all champions are accounted for.
    - icon: "gavel"
      heading: Judge Management and Scheduling
      description: Unrivalled judge management and scheduling to bring piece of mind to the Chief Judge.
    - icon: "payments"
      heading: Fundraising/Sponsors Management
      description: Never miss a recognition by keeping everything in one intuitive place.
    - icon: "edit"
      heading: Registration
      description: Makes onboarding participants, volunteers, and committee members a breeze.
    - icon: "summarize"
      heading: Reporting
      description: Forget the days of manually compiling the regional fair data!
    - icon: "menu_book"
      heading: Data-powered Templates
      description: We are extending from the heritage of SFIAB with award ceremony scripts to also incorporate other aspects of the fair.
    - icon: "code"
      heading: Libre Software
      description: We believe software should empower its users and will continue the heritage of Lightbox Technologies.
    - icon: "view_module"
      heading: Modular System
      description: Pick and choose the components you use.
    - icon: "dns"
      heading: Customized Instance
      description: Your science fair is unique, let us tailor your systems to your needs.
---

<div class="page-heading py-10 text-center">
    <div class="page-heading text-3xl">Features</div>

    <div class="flex flex-wrap m-5 gap-4 justify-center">
        {{ for feature of features }}
        <div
            class="flex block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100">
            <img class="max-w-10 mr-5" src="{{ feature.icon |> icon('material') }}">
            <div class="flex flex-col items-center justify-center align-center">
                <h5 class="px-5 mb-2 text-2xl font-bold tracking-tight text-gray-900">{{ feature.heading }}
                </h5>
                <p class="font-normal text-gray-700">{{feature.description}}</p>
            </div>
          </div>
        {{ /for }}
    </div>

    <div
        class="relative mx-auto border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]">
        <div class="h-[32px] w-[3px] bg-gray-800 absolute -start-[17px] top-[72px] rounded-s-lg"></div>
        <div class="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[124px] rounded-s-lg">
        </div>
        <div class="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[178px] rounded-s-lg">
        </div>
        <div class="h-[64px] w-[3px] bg-gray-800 absolute -end-[17px] top-[142px] rounded-e-lg"></div>
        <div class="rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white">
            <div class="w-[272px] h-[572px] pt-20">
                <p class="text-xl font-semibold">Now with mobile support!</p>
                <p>(the design of this site is the prototype for the new modern interface)</p>
            </div>
        </div>
    </div>

</div>