Untitled

 avatar
unknown
plain_text
a month ago
6.9 kB
5
Indexable
<footer class="relative overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
    <div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#eef2ff_1px,transparent_1px),linear-gradient(to_bottom,#eef2ff_1px,transparent_1px)] bg-[size:40px_40px] opacity-60"></div>
    <div class="absolute -left-32 top-10 -z-10 h-72 w-72 rounded-full bg-violet-200/40 blur-3xl"></div>
    <div class="absolute -right-32 bottom-0 -z-10 h-72 w-72 rounded-full bg-indigo-200/50 blur-3xl"></div>

    <div class="mx-auto max-w-7xl overflow-hidden rounded-[2rem] border border-indigo-100 bg-white/80 shadow-[0_24px_90px_rgba(79,70,229,0.12)] backdrop-blur-xl">
        <div class="grid gap-10 px-6 py-10 sm:px-8 lg:grid-cols-[1.3fr_2fr] lg:px-12 lg:py-12">
            <div>
                <a href="/" class="inline-flex items-center gap-3" aria-label="Upselio">
                    <svg class="h-10 w-10" viewBox="0 0 48 48" fill="none" aria-hidden="true">
                        <defs>
                            <linearGradient id="upselioLogoFooter" x1="8" y1="42" x2="40" y2="6" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#6D28D9" />
                                <stop offset="0.55" stop-color="#4F46E5" />
                                <stop offset="1" stop-color="#8B5CF6" />
                            </linearGradient>
                        </defs>
                        <path
                            d="M13 8C16.3137 8 19 10.6863 19 14V27C19 31.4183 22.5817 35 27 35C31.4183 35 35 31.4183 35 27V18H31.2C29.4218 18 28.5317 15.8509 29.7891 14.5935L37.5858 6.7968C38.3668 6.01575 39.6332 6.01575 40.4142 6.7968L48.2109 14.5935C49.4683 15.8509 48.5782 18 46.8 18H43V27C43 36.9411 34.9411 45 25 45C15.0589 45 7 36.9411 7 27V14C7 10.6863 9.68629 8 13 8Z"
                            fill="url(#upselioLogoFooter)"
                        />
                    </svg>

                    <span class="text-2xl font-bold tracking-tight text-slate-950">
                        Upselio
                    </span>
                </a>

                <p class="mt-5 max-w-md text-sm leading-7 text-slate-600">
                    Inteligentne menu QR i self-ordering dla gastronomii. Większe koszyki,
                    szybsza obsługa i automatyczny upsell w Twoim lokalu.
                </p>

                <a
                    href="#zglos-lokal"
                    class="mt-6 inline-flex w-full max-w-md items-center gap-4 rounded-2xl border border-indigo-100 bg-white px-4 py-3 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md"
                >
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Z" stroke="currentColor" stroke-width="1.8" />
                            <path d="m7.5 8 4.5 4 4.5-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </span>

                    <span class="min-w-0">
                        <span class="block text-sm font-semibold text-slate-950">Chcesz przetestować Upselio?</span>
                        <span class="block text-xs text-slate-500">Zgłoś lokal do pilotażu</span>
                    </span>

                    <span class="ml-auto text-lg text-indigo-600">→</span>
                </a>
            </div>

            <div class="grid gap-8 sm:grid-cols-3">
                <div>
                    <h3 class="text-sm font-bold text-slate-950">Produkt</h3>
                    <ul class="mt-5 space-y-3 text-sm text-slate-600">
                        <li><a href="#jak-dziala" class="transition hover:text-indigo-600">Jak działa</a></li>
                        <li><a href="#korzysci" class="transition hover:text-indigo-600">Korzyści</a></li>
                        <li><a href="#przyklady" class="transition hover:text-indigo-600">Przykłady</a></li>
                        <li><a href="#faq" class="transition hover:text-indigo-600">FAQ</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-sm font-bold text-slate-950">Dla lokali</h3>
                    <ul class="mt-5 space-y-3 text-sm text-slate-600">
                        <li><a href="#zglos-lokal" class="transition hover:text-indigo-600">Zgłoś lokal</a></li>
                        <li><a href="#demo" class="transition hover:text-indigo-600">Demo</a></li>
                        <li><a href="#wdrozenie" class="transition hover:text-indigo-600">Wdrożenie</a></li>
                        <li><a href="#kontakt" class="transition hover:text-indigo-600">Kontakt</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-sm font-bold text-slate-950">Informacje</h3>
                    <ul class="mt-5 space-y-3 text-sm text-slate-600">
                        <li><a href="/polityka-prywatnosci" class="transition hover:text-indigo-600">Polityka prywatności</a></li>
                        <li><a href="/regulamin" class="transition hover:text-indigo-600">Regulamin</a></li>
                        <li><a href="mailto:[email protected]" class="transition hover:text-indigo-600">[email protected]</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="border-t border-indigo-100 px-6 py-5 sm:px-8 lg:px-12">
            <div class="flex flex-col gap-4 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between">
                <p>Upselio (c) {{ date('Y') }}</p>

                <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
                    <span class="inline-flex items-center gap-2">
                        <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M12 3 19 6v5c0 4.5-2.9 8.6-7 10-4.1-1.4-7-5.5-7-10V6l7-3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
                            <path d="m8.5 12 2.2 2.2 4.8-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        Bezpieczne i zgodne
                    </span>

                    <span class="hidden text-slate-300 sm:inline">•</span>

                    <span>Zbudowane z myślą o prywatności</span>
                </div>
            </div>
        </div>
    </div>
</footer>
Editor is loading...
Leave a Comment