<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ site.data.project.tagline }} - {{ site.data.project.title }}</title>
    {%- include meta.html -%}
</head>
<body class="bg-white text-dark font-onest antialiased relative">
<div class="relative z-10">
    <header class="flex items-center sm:justify-center">
        <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
            <div class="flex items-center gap-2 sm:gap-3">
                <img src="/assets/img/csv-logo.svg" alt="Logo" class="w-[40px] sm:w-[50px] h-[40px] sm:h-[50px]"/>
                <div class="font-black text-2xl">CSV</div>
            </div>
            <div class="flex items-center gap-0 md:gap-0">
                <a href="https://github.com/thephpleague/csv" class="px-2 py-2 sm:px-6 sm:py-3 font-black text-md text-black-50 hover:text-csv-dark hover:underlines whitespace-nowrap">SOURCE CODE</a>
                <a href="/9.0/" class="px-2 py-2 sm:px-6 sm:py-3 text-md text-white bg-csv-base hover:bg-csv-dark transition-all whitespace-nowrap rounded">Documentation</a>
            </div>
        </div>
    </header>

    <main class="flex justify-center">
        <div class="flex flex-col gap-3 pt-24 justify-between px-6 sm:px-12 lg:px-0 w-full max-w-5xl">
            <h1 class="font-black text-8xl md:text-9xl tracking-tighter">CSV</h1>

            <h2 class="font-medium text-3xl text-light">CSV Data manipulation<br>made easy in PHP</h2>

            <div class="flex">
                <span class="mt-6 rounded-xl bg-white p-6 py-9 border border-csv-base flex items-center gap-6 transition">
                    <div class="bg-gray-200 px-6 py-3 rounded-lg text-light font-mono transition-all">
                        composer require league/csv:^{{ site.data.project.version }}
                    </div>
                </span>
            </div>

            <div class="flex flex-col gap-6 pb-16 sm:pb-24 text-light">
                <div class="text-xl">Love this package ? <a href="https://github.com/sponsors/nyamsprod" class="transition-all text-csv-dark underline">Sponsor its development</a></div>
            </div>

            <div class="flex flex-col gap-6 sm:w-2/3">
                <h3 class="font-black text-6xl md:text-8xl tracking-tighter">Highlights</h3>

                <p class="text-light">{{ site.data.project.highlights.description }}</p>

                <div class="gap-6 flex flex-col my-16">

                    <h4 class="font-bold text-2xl">Simple and straightforward API</h4>

                    <div class="bg-gradient-to-r from-csv-base to-white h-px"></div>

                    <h4 class="font-bold text-xl">Read from and Write to CSV documents<br />in a memory efficient and scalable way</h4>

                    <div class="bg-gradient-to-r from-csv-base to-white h-px"></div>

                    <h4 class="font-bold text-xl">Flexible and powerful query features <br />and array to object mapping.</h4>

                    <div class="bg-gradient-to-r from-csv-base to-white h-px"></div>

                    <h4 class="font-bold text-xl">Transform CSV documents into <span class="font-mono text-base text-csv-base">JSON</span>,
                        <span class="font-mono text-base text-csv-base">XML</span> or <span class="font-mono text-base text-csv-base">HTML</span></h4>

                    <div class="bg-gradient-to-r from-csv-base to-white h-px"></div>

                    <h4 class="font-bold text-xl">Framework-agnostic</h4>
                </div>
            </div>

            <div class="bg-gray-100 p-6 rounded-lg text-light flex flex-col sm:flex-row gap-6">
                <div class="bg-csv-light text-csv-dark font-black text-lg w-12 h-12 flex shrink-0 items-center justify-center rounded-full">!</div>
                <p>Once a new <strong>major</strong> version is released, the previous stable release remains supported for <strong>six more months</strong> with patches and security fixes.</p>
            </div>

            <div class="flex flex-col gap-3 my-16 content">
                {{ content }}
            </div>
        </div>
    </main>
    {%- include footer.html -%}
</div>
<div class="absolute z-0 flex justify-center top-0 right-0 left-0 overflow-hidden">
    <img src="/assets/img/csv-logo-big.svg" alt="Logo" class="w-1/2 sm:w-auto rotate-6 z-0 top-logo -right-logo"/>
</div>
</body>
</html>
