{% extends 'base.html' %}
{% load i18n %}
{% load widget_tweaks %}

{% block title %}{% trans "Home" %}{% endblock %}

{% block home %}

    <section class="bg-primary-dark inset-y-0 inset-x-0 absolute overflow-hidden">

        <div class="w-full h-full grid grid-cols-1 place-items-center overflow-y-auto py-16 px-6">
            <div class="flex flex-col relative z-10 w-full max-w-[500px] justify-center gap-5">
                <div class="mb-4 w-full inline-flex justify-center">
                    {% include 'components/logo_home.html' %}
                </div>

                <div>
                    <p class=" mb-2 text-white text-xl text-center">
                        Are you a carer? 💙
                    </p>
                    <p class=" mb-2 text-white text-xl text-center">
                        Join Peopleoo today to share your story, showcase your journey, and connect with a community that celebrates your incredible work.
                    </p>
                    <p class=" mb-2 text-white text-xl text-center">
                        Know a carer who deserves recognition? 🌟
                    </p>
                    <p class=" mb-10 text-white text-xl text-center">
                        Leave a heartfelt review for a friend, family member, or colleague. Show them just how much their kindness and dedication mean to you.
                    </p>
                </div>

                <div class="flex gap-4">
                    <a href="{% url 'custom_register' %}"
                       class="transition-all group min-h-[200px] bg-white border-2 border-primary-dark rounded-md w-1/2 flex flex-col justify-center gap-y-3 items-center p-4 [box-shadow:_0_-2px_2px_rgb(0_0_0_/_10%)_inset] hover:[box-shadow:_0_-2px_2px_rgb(0_0_0_/_10%)_inset,_0_0_10px_rgb(0_0_0_/_30%)]">
                        <span class="group-hover:scale-125 transition-all">
                        {% include 'components/icons/icon-create-profile.html' %}
                        </span>
                        <h2 class="group-hover:text-primary text-xl md:text-2xl leading-none">Create profile</h2>
                    </a>
                    <a href="{% url 'find_a_carer' %}"
                       class="transition-all group min-h-[200px] bg-white border-2 border-primary-dark rounded-md w-1/2 flex flex-col justify-center gap-y-3 items-center p-4 [box-shadow:_0_-2px_2px_rgb(0_0_0_/_10%)_inset] hover:[box-shadow:_0_-2px_2px_rgb(0_0_0_/_10%)_inset,_0_0_10px_rgb(0_0_0_/_30%)]">
                        <span class="group-hover:scale-125 transition-all">
                             {% include 'components/icons/icon-leave-review.html' %}
                        </span>

                        <h2 class="group-hover:text-primary text-xl md:text-2xl leading-none">Leave a Special Mention</h2>
                    </a>
                </div>

                <a href="{% url 'login' %}" class="btn btn-secondary">
                    Sign In
                </a>
            </div>
        </div>
        <div class="absolute top-0 left-0 bottom-0 right-0 flex items-center justify-center flex-col overflow-hidden">
            <div class="transform scale-[1.5] translate-x-[-25%] translate-y-[15%]">
                {% include 'components/logo_bg.html' %}
            </div>
        </div>

    </section>

{% endblock %}