{% extends 'base.html' %}
{% load i18n %}
{% load static carer_tags %}

{% block title %}{% trans "Quizzer Start" %}{% endblock %}

{% block content %}
<section class="intro overflow-hidden">
    <div class="w-full p-4 rounded-md bg-[#EFF0F7] text-center">
        <h1 class="text-[20px] md:text-[22px] font-bold leading-tight md:leading-tight">
            Welcome to Peopleoo
        </h1>
        <p class="text-[16px] md:text-[20px] leading-normal md:leading-normal">
            Some welcome message that is only displayed the first time visited.
        </p>
    </div>
    <div class="w-full mt-5 rounded-md border-2 border-[#E0E3EE] p-5 text-center">
        <img
            class="w-20 h-20 rounded-full mx-auto mb-2"
            src="https://placehold.co/80"
            alt="img"
        />
        <h2 class="text-[23px] md:text-[27px] font-bold leading-tight md:leading-tight">
            Aaron Jack
        </h2>
        <p class="text-[16px] md:text-[18px] leading-normal md:leading-normal">
            Horizon Care
        </p>
    </div>
    <div class="mt-5 w-full text-center">
        <h3 class="text-[20px] md:text-[22px] font-bold leading-tight md:leading-tight">
            Quizzes
        </h3>
        <p class="text-[16px] md:text-[18px] leading-normal md:leading-normal">
            Some message to prompt them to start filling out the quizzes.
        </p>
    </div>
    <div class="w-full mt-4 grid grid-cols-2 gap-4 text-center">
            <a href="" class="relative p-4 rounded-md bg-[#EFF0F7] border-2 border-[#22A573] cursor-pointer hover:opacity-80 duration-300">
            <span class="absolute top-2 right-2 inline-block rounded-full bg-[#22A573] text-white p-1">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-3">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
            </span>

            <img
                class="w-[60px] h-[60px] rounded-full mx-auto mb-2"
                src="https://placehold.co/60/purple/yellow"
                alt="img"
            />
            <h3 class="fonmt-semibold text-[16px] leading-tight">
                Care Explorer {{ item }}
            </h3>
            <p class="text-[14px] leading-normal">
                {{ item }} min quiz
            </p>
        </a>
        {% for item in '1234567' %}
        <a href="" class="relative p-4 rounded-md bg-[#EFF0F7] border-2 border-[#EFF0F7] cursor-pointer hover:opacity-80 duration-300">
            <img
                class="w-[60px] h-[60px] rounded-full mx-auto mb-2"
                src="https://placehold.co/60/purple/yellow"
                alt="img"
            />
            <h3 class="fonmt-semibold text-[16px] leading-tight">
                Care Explorer {{ item }}
            </h3>
            <p class="text-[14px] leading-normal">
                {{ item }} min quiz
            </p>
        </a>
        {% endfor %}
    </div>
</section>
<section class="mt-5 mb-20">
    <h2 class="text-center text-[22px] md:text-[24px] leading-tight md:leading-tight mb-5">
        Your Latest Reviews
    </h2>
    <div class="intro overflow-hidden gap-0">
        <h3 class="font-bold text-[18px] md:text-[20px] leading-tight md:leading-tight">
            No reviews to display.
        </h3>
        <p class="text-[16px] md:text-[17px] leading-normal md:leading-normal">
            Share your reviews link to get things started.
        </p>
    </div>
    <a href="" class="mt-5 block w-full py-4 px-5 rounded-full bg-primary text-white font-bold text-[18px] md:text-[20px] flex items-center gap-1 justify-center shadow-md hover:opacity-80 duration-300 cursor-pointer">
        <span class="block">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
            </svg>
        </span>
        <span>
           Copy Reviews link
        </span>
    </a>

</section>
{% endblock %}