<template>
    <div class="mx-auto max-w-[940px] flex flex-col py-8 px-6 lg:py-16">
        <h2 class="font-inter text-[28px] leading-[32px] text-white text-center font-bold mb-2 lg:text-5xl lg:leading-[48px]">
            Built to run from Dev → Prod
        </h2>

        <p class="text-slate-300 font-inter text-xl text-center font-normal mb-16 lg:text-2xl">Get the full benefits of containerization. Stop using containers in dev only. Works with Kubernetes, Docker Swarm and more.</p>
        
        <div class="w-full rounded-lg bg-gradient-to-r from-[#F56772] to-[#BA6BFF] p-[1px]">
            <div class="flex flex-col items-center justify-between bg-slate-900 rounded-lg p-8 lg:py-16 lg:px-8 lg:flex-row">
                <div class="flex flex-col items-center lg:items-start">
                    <span class="text-white font-bold font-inter mb-2 leading-[48px] text-[28px] lg:text-5xl">Get Started 🚀</span>
                    <span class="text-slate-300 font-inter text-lg text-center lg:text-left">100% free & open source. Available on GitHub & DockerHub.</span>
                </div>

                <a href="docs/getting-started/installation" class="flex items-center px-[20px] py-3 font-bold font-inter text-white rounded-lg bg-blue-600 text-xl mt-6 lg:px-[14px] lg:py-2 lg:mt-0">
                    View the Images &rarr;
                </a>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>