<template>
    <section class="mx-auto max-w-[940px] flex flex-col px-6 py-8 lg:py-16">
        <h2 class="font-inter text-white font-bold text-[28px] leading-[28px] text-center mb-16 lg:text-5xl lg:leading-[48px]">
            These images <span class="text-pink-500">give a lot more</span> than other PHP Docker Images.
        </h2>

        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/rocket-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">Production-ready</span>
                <span class="font-inter text-slate-300 text-base">Built to be performant and secure to exist on the wild web.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/heart-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">Native Health Checks</span>
                <span class="font-inter text-slate-300 text-base">Be 100% confident your application is actually running.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/lightning-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">High Performance</span>
                <span class="font-inter text-slate-300 text-base">Get the easiest experience for fine tuning performance.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/stars-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">Customizable & Flexible</span>
                <span class="font-inter text-slate-300 text-base">Environment variables make customizations a breeze.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/cloudflare-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">Native CloudFlare Support</span>
                <span class="font-inter text-slate-300 text-base">Get real IP addresses from visitors from trusted proxies.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/php-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">Based on official PHP</span>
                <span class="font-inter text-slate-300 text-base">Upgrade from the official PHP docker images with confidence.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/nginx-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">NGINX Unit</span>
                <span class="font-inter text-slate-300 text-base">Ditch FPM for a modern way of running PHP. Designed for containers from the ground up.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/logging-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">Unified Logging</span>
                <span class="font-inter text-slate-300 text-base">All logs are directed to STDOUT & STDERR for centralized output.</span>
            </div>
            <div class="p-4 bg-gray-900 rounded-lg flex flex-col">
                <img src="/images/icons/heartbeat-square.svg" class="w-11 h-11 mb-2"/>  
                <span class="font-inter text-lg text-slate-50 font-bold mb-2">FPM + S6 Overlay</span>
                <span class="font-inter text-slate-300 text-base">Our FPM-Apache & FPM-NGINX images use this intelligent init system.</span>
            </div>
        </div>
    </section>
</template>