docker-php/docs/components/content/Features.vue

<template>
    <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>
</template>