Untitled

<section id="dlaczego-dziala" class="relative overflow-hidden px-4 py-20 sm:px-6 lg:px-8">
    <div class="absolute inset-0 -z-10 bg-[#020617]"></div>

    <div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,rgba(99,102,241,0.18),transparent_22%),radial-gradient(circle_at_bottom_right,rgba(139,92,246,0.22),transparent_24%)]"></div>

    <div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:44px_44px] opacity-20"></div>

    <div class="absolute -left-24 top-1/4 -z-10 h-72 w-72 rounded-full bg-indigo-500/20 blur-[120px]"></div>
    <div class="absolute -right-24 bottom-1/4 -z-10 h-72 w-72 rounded-full bg-violet-500/25 blur-[130px]"></div>

    <div class="relative mx-auto max-w-7xl">
        <div class="mx-auto max-w-3xl text-center">
            <span class="inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-slate-200 backdrop-blur">
                Dlaczego to działa
            </span>

            <h2 class="mt-5 text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
                Rekomendacja pojawia się dokładnie wtedy, gdy klient składa zamówienie
            </h2>

            <p class="mx-auto mt-5 max-w-2xl text-base leading-7 text-slate-300">
                Upselio nie próbuje sprzedawać wszystkiego wszystkim. Podpowiada małe, logiczne dodatki,
                które klient łatwo akceptuje, bo pasują do jego wyboru.
            </p>
        </div>

        <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div class="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
                <h3 class="text-lg font-black text-white">Moment decyzji</h3>
                <p class="mt-3 text-sm leading-7 text-slate-300">
                    Klient widzi propozycję w koszyku lub przy wyborze produktu, a nie po zakończonym zamówieniu.
                </p>
            </div>

            <div class="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
                <h3 class="text-lg font-black text-white">Dopasowanie do produktu</h3>
                <p class="mt-3 text-sm leading-7 text-slate-300">
                    Sos do frytek, deser do kawy, napój do zestawu — rekomendacja jest prosta i naturalna.
                </p>
            </div>

            <div class="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
                <h3 class="text-lg font-black text-white">Promowanie marżowych pozycji</h3>
                <p class="mt-3 text-sm leading-7 text-slate-300">
                    Lokal może promować dodatki, które mają dobrą marżę i są łatwe do przygotowania.
                </p>
            </div>

            <div class="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
                <h3 class="text-lg font-black text-white">Mniej presji na obsługę</h3>
                <p class="mt-3 text-sm leading-7 text-slate-300">
                    System przypomina o dodatkach automatycznie, nawet gdy w lokalu jest kolejka i pośpiech.
                </p>
            </div>

            <div class="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
                <h3 class="text-lg font-black text-white">Testowanie wariantów</h3>
                <p class="mt-3 text-sm leading-7 text-slate-300">
                    Można sprawdzać, które zestawy, komunikaty i dodatki konwertują najlepiej.
                </p>
            </div>

            <div class="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
                <h3 class="text-lg font-black text-white">Lepsze doświadczenie klienta</h3>
                <p class="mt-3 text-sm leading-7 text-slate-300">
                    Gość nie musi szukać dodatków samodzielnie. Widzi je w prostym, wygodnym kontekście.
                </p>
            </div>
        </div>
    </div>
</section>