<div class="space-y-32 pt-20 mx-auto w-full max-w-screen-lg px-5">
    <div class="text-center">
        <div class="font-medium text-dolphin">
            This is Data Wizard!
        </div>
        <div class="pt-2 text-2xl sm:text-3xl">
            <span class="inline-block">Some of the best</span>
            <span class="inline-block font-black">Features</span>
        </div>
    </div>

    <div x-ref="feature_1"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -left-10 top-40 hidden lg:block">
            <img x-ref="geometric_shape_1"
                 src="https://filamentphp.com/build/assets/geometric-shape-1-abf4e8ef.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(0%, -82.5351%) translate3d(0px, 0px, 0px) rotate(82.5351deg);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/action-modals-d076c147.webp"
                     alt="Action modals" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/handpoint-6f296a2f.webp"
                     alt="Hand pointing" class="w-12">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-[15rem] pt-5 text-2xl font-bold">
                Action modals, everywhere.
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                Open modals and slide-overs from any button on the page.
                Even nest modals within other modals with full state
                preservation.
            </div>
        </div>
    </div>
    <div x-ref="feature_2"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -right-16 top-40 hidden lg:block">
            <img x-ref="geometric_shape_2"
                 src="https://filamentphp.com/build/assets/geometric-shape-2-f701d3d8.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(-9.902%, -19.804%) translate3d(0px, 0px, 0px) rotate(35.6471deg);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/table-report-01a18999.webp"
                     alt="Table report" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/report-ff5ee8e2.webp" alt="Report"
                     class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-[15rem] pt-5 text-2xl font-bold">
                Powerful table reporting.
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                Summarize table builder rows with a suite of aggregate
                functions to calculate statistics and provide an
                analytical overview of your data. Group rows together by
                common attributes and summarize that data too.
            </div>
        </div>
    </div>
    <div x-ref="feature_3"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -left-5 top-40 hidden lg:block">
            <img x-ref="geometric_shape_3"
                 src="https://filamentphp.com/build/assets/geometric-shape-3-51c5af35.webp" alt="Shape"
                 class="block w-16"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/tenancy-d26f0ae0.webp"
                     alt="Tenant switcher" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/cloud-33cbe35b.webp" alt="Cloud"
                     class="w-20">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-[15rem] pt-5 text-2xl font-bold">
                Multi-tenancy built for SaaS.
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                Use the panel builder to build multi-tenant
                applications, with subscription billing, at record
                speed. Switch between tenants without leaving the panel.
            </div>
        </div>
    </div>


    <div x-ref="feature_4"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -right-10 top-40 hidden lg:block">
            <img x-ref="geometric_shape_4"
                 src="https://filamentphp.com/build/assets/geometric-shape-4-f47ecdf0.webp" alt="Shape"
                 class="block w-12"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/infolist-23d932e6.webp" alt="Infolist"
                     class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/featherpaper-549c635a.webp"
                     alt="Quill on paper" class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-[15rem] pt-5 text-2xl font-bold">
                Beautiful read-only "View" pages.
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                Embed infolists in your apps for flexible responsive
                layouts to render read-only data. Completely
                customizable with your own components.
            </div>
        </div>
    </div>


    <div x-ref="feature_5"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute bottom-0 left-0 hidden lg:block">
            <img x-ref="geometric_shape_5"
                 src="https://filamentphp.com/build/assets/geometric-shape-5-7bcaeaa9.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/panels-2e83a5af.webp"
                     alt="Multiple panels" class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/infinity-3ae41d3c.webp" alt="Infinity"
                     class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-[15rem] pt-5 text-2xl font-bold">
                Unlimited panels in one app.
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                Build multiple completely separate Filament-powered
                panels with their own resources, dashboards, custom
                pages and configuration. Ship an entire panel in a
                Composer package with ease.
            </div>
        </div>
    </div>


    <div x-ref="feature_6"
         class="relative flex flex-wrap items-center justify-around gap-10 lg:justify-center lg:gap-x-32"
         style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
        <div class="absolute -bottom-20 -right-10 hidden lg:block">
            <img x-ref="geometric_shape_6"
                 src="https://filamentphp.com/build/assets/geometric-shape-6-221ff95a.webp" alt="Shape"
                 class="block w-14"
                 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
        </div>


        <div
            class="relative h-80 w-full max-w-[23rem] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-tl from-orange-400 to-orange-200 shadow-xl shadow-black/5">
            <div class="absolute left-5 top-5 w-[30rem] overflow-hidden rounded-lg shadow-xl">
                <img src="https://filamentphp.com/build/assets/theme-409be2ea.webp" alt="Theme"
                     class="w-full">
            </div>
        </div>


        <div>
            <div class="relative inline-block">
                <img src="https://filamentphp.com/build/assets/colorpalette-266f08e7.webp"
                     alt="Color palette" class="w-16">
                <div
                    class="absolute -bottom-4 left-4 -z-10 h-7 w-7 rounded-full bg-black/50 blur-md"></div>
            </div>

            <div class="max-w-[15rem] pt-5 text-2xl font-bold">
                Improved theme customization.
            </div>


            <div class="max-w-xs pt-3 font-medium text-dolphin">
                Customize the color palette and typography of your panel
                without having to compile any Tailwind. Easily hook in
                to our suite of CSS classes to characterize a panel with
                your own branding - it's all yours.
            </div>
        </div>
    </div>
</div>
