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

{% block title %}{% trans "Home" %}{% endblock %}
{% block content %}
<body>
<div class="jumbotron">
    <div class="container">
        <h1>S.E.E.L.E</h1>
        <h2>Strategic Emergency Education for Localized Events</h2>
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card card-custom">
                    <div class="card-body">
                        <h3>{% trans "What S.E.E.L.E is" %}</h3>
                        <p class="card-text">{% trans "S.E.E.L.E is a web app that helps you personally prepare for a wide range of disasters. From Typhoons to Earthquakes, we've got you covered." %}</p>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-custom">
                    <div class="card-body">
                        <h3>{% trans "Who we are" %}</h3>
                        <p class="card-text">{% trans "We’re a multicultural group of students from the University of Florida and Kyoto University, committed to making disaster preparation easier for all." %}</p>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-custom">
                    <div class="card-body">
                        <h3>{% trans "How it works" %}</h3>
                        <p class="card-text">{% trans "S.E.E.L.E creates a personalized checklist for emergency supplies that can help during times of crisis, and can provide users information via an infographic with important information regarding the disaster." %}</p>

                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4">
            <img src="{% static 'images/girl_default.png' %}" alt="{% trans "Example Image" %}" class="small-image img-fluid mt-4">
            <img src="{% static 'images/seal_default.png' %}" alt="{% trans "Example Image" %}" class="small-image img-fluid mt-4">
            <img src="{% static 'images/boy_default.png' %}" alt="{% trans "Example Image" %}" class="small-image img-fluid mt-4">
        </div>
        {% if request.session.user_email %}
        <a href="{% url 'profile' %}" class="btn btn-primary mt-4">View Profile</a>
        {% else %}
        <a href="#" class="btn btn-primary mt-4">Get Started</a>
        {% endif %}
    </div>
</div>
</body>
</html>
{% endblock %}
