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

{% block title %}Home | ArchDune{% endblock %}

{% block css %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
<link rel="stylesheet" href="{% static 'css/home/style.min.css' %}" />

<!-- Elementor Related CSS -->
<link rel="stylesheet" id="elementor-frontend-css" href="{% static 'css/frems/frontend.min.css' %}" media="all" />
<link rel="stylesheet" id="elementor-post-2627-css" href="{% static 'css/frems/post-2627.css' %}" media="all" />

<!-- Swiper and Section Specific CSS -->
<link rel="stylesheet" href="{% static 'css/home/swiper-bundle.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/home/jurySection.css' %}" />
<link rel="stylesheet" href="{% static 'css/home/book_selling_section.css' %}" />

<!-- Utility and Feature CSS -->
<link rel="stylesheet" href="{% static 'css/utils/utils.css' %}" />
<link rel="stylesheet" href="{% static 'css/digital-products/Hero-Section.css' %}" />
<link rel="stylesheet" href="{% static 'css/home/banners.css' %}" />
<link rel="stylesheet" href="{% static 'css/home/instructor-banner.css' %}" />
{% endblock css %}
{% load static %}

{% block content %}

<!-- Top Banner Section -->
{% if banner_dict.1 %}
<section>
    <div class="top-baner-section">
        <div class="top-baner">
            <img src="{{ banner_dict.1.image.url }}" alt="{{ banner_dict.1.title }}" />
        </div>
    </div>
</section>
{% else %}
<section>
    <div class="top-baner-section">
        <div class="top-baner">
            <img src="{% static 'images/homepageapp_images/ArchDune-bg-baner.jpg' %}" alt="" />
        </div>
    </div>
</section>
{% endif %}

<!-- Second Banner Section -->
{% if banner_dict.2 %}
<section class="my-2rem lg-my-5rem">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <div>
            <span class="title-1">{{ banner_dict.2.title|title }} </span>
            <span class="title-2">{{ banner_dict.2.subtitle|title }} </span>
        </div>
        <div style="width: 100%; display: flex; justify-content: center; margin-top: 1.5rem;">
            <a href="{{ banner_dict.2.url }}">
                <img src="{{ banner_dict.2.image.url }}" alt="{{ banner_dict.2.title }}" style="max-width: 100%" />
            </a>
        </div>
    </div>
</section>
{% else %}
<section class="my-2rem lg-my-5rem">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <div>
            <span class="title-1">The </span>
            <span class="title-2">Eternal Voices </span>
        </div>
        <div style="width: 100%; display: flex; justify-content: center; margin-top: 1.5rem;">
            <a href="{% url 'competitionapp:competition' %}">
                <img src="{% static 'images/competition/banner.jpeg' %}" alt="" style="max-width: 100%" />
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Third Banner Section -->
{% if banner_dict.3 %}
<section class="my-2rem lg-my-5rem">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <div>
            <span class="title-1">{{ banner_dict.3.title|title }} </span>
            <span class="title-2">{{ banner_dict.3.subtitle|title }} </span>
        </div>
        <div class="banner-image-div" style="margin-top: 1rem; max-width: 1622px; padding: 0rem 0.7rem">
            <div style="position: relative" class="banner-image-div-main">
                <img style="width: 100%; max-width: 100%" src="{{ banner_dict.3.image.url }}"
                    alt="{{ banner_dict.3.title|title }} {{ banner_dict.3.subtitle|title }}"
                    class="banner-image-global cursor-pointer" />
                <div class="view-more-button-div">
                    <a href="{{ banner_dict.3.url }}">
                        <button class="view-more-button">{{ banner_dict.3.url_text }}</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% else %}
<section class="my-2rem lg-my-5rem">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <div>
            <span class="title-1">Our </span>
            <span class="title-2">Sketchbook </span>
        </div>
        <div class="banner-image-div" style="margin-top: 1rem; max-width: 1622px; padding: 0rem 0.7rem">
            <div style="position: relative" class="banner-image-div-main">
                <img style="width: 100%; max-width: 100%" src="{% static 'images/banners/book-banner.jpg' %}"
                    alt="Banner of Book" class="banner-image-global cursor-pointer" />
                <div class="view-more-button-div">
                    <a href="{% url 'publicationapp:publication_list' %}">
                        <button class="view-more-button">View More</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Top Baner Section End -->
<!-- BOOK SELLING SECTION -->

<!-- Skill Development Courses Stast -->
<section>
    <div class="wro">
        <div class="skil-development-section-container">
            <div class="skil-development-section">
                <div class="skil-develo-title">
                    <h2>
                        <a href="#"><span class="s-d-light-text">Our </span><span class="s-d-bold-text">Skill
                                Development
                            </span><span class="s-d-light-text">Courses</span></a>
                    </h2>
                </div>
                <div class="swiper swiper-infinite-loop-for-homepage-skill-development-course">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/blender_300x200.jpg' %}"
                                            alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Beginner’s Guide to Blender </a>
                                    </h3>
                                    <p>
                                        This carefully structured course will include the
                                        fundamentals of Blender 3.2 along with tips and tricks
                                        learned through years of experience.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/revit_300x200.jpg' %}" alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Introduction to BIM | Autodesk Revit</a>
                                    </h3>
                                    <p>
                                        This course will teach you how to use Autodesk Revit
                                        in an easy and straightforward manner.
                                        <!-- Also discussed
                          is how Autodesk Revit can be used to model shapes,
                          structures, and systems in 3D with parametric
                          accuracy, precision, and ease, as well as
                          documentation work, including quick modifications to
                          plans, elevations, schedules, and sections as projects
                          evolve. -->
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/photoshop_300x200.jpg' %}"
                                            alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Photoshop Essentials for Architectural
                                            Visualization</a>
                                    </h3>
                                    <p>
                                        This course is aimed to help you understand how you
                                        can use only photoshop to produce presentable drawings
                                        from generic 3D scene or hand drawings.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/lumion_300x200.jpg' %}" alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Lumion Essentials: Introduction to Architectural
                                            Rendering</a>
                                    </h3>
                                    <p>
                                        This course is designed to give a kickstarter to
                                        Lumion basics to help participants create a fluent
                                        relationship with rendering workflow.
                                        <!-- It will also
                          guide participants to create their desired rendering
                          style and atmosphere within the shortest possible
                          time. -->
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/blender_300x200.jpg' %}"
                                            alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Beginner’s Guide to Blender </a>
                                    </h3>
                                    <p>
                                        This carefully structured course will include the
                                        fundamentals of Blender 3.2 along with tips and tricks
                                        learned through years of experience.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/revit_300x200.jpg' %}" alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Introduction to BIM | Autodesk Revit</a>
                                    </h3>
                                    <p>
                                        This course will teach you how to use Autodesk Revit
                                        in an easy and straightforward manner.

                                        <!-- Also discussed
                          is how Autodesk Revit can be used to model shapes,
                          structures, and systems in 3D with parametric
                          accuracy, precision, and ease, as well as
                          documentation work, including quick modifications to
                          plans, elevations, schedules, and sections as projects
                          evolve. -->
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/photoshop_300x200.jpg' %}"
                                            alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Photoshop Essentials for Architectural
                                            Visualization</a>
                                    </h3>
                                    <p>
                                        This course is aimed to help you understand how you
                                        can use only photoshop to produce presentable drawings
                                        from generic 3D scene or hand drawings.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="padding: 0.5rem">
                            <div class="skil-development-single-crous height-24-rem max-h-fit-content">
                                <div class="s-d-s-c-img">
                                    <a href="#">
                                        <img src="{% static 'images/homepageapp_images/skill/lumion_300x200.jpg' %}"
                                            alt />
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a href="#">Lumion Essentials: Introduction to Architectural
                                            Rendering</a>
                                    </h3>
                                    <p>
                                        This course is designed to give a kickstarter to
                                        Lumion basics to help participants create a fluent
                                        relationship with rendering workflow.

                                        <!-- It will also
                          guide participants to create their desired rendering
                          style and atmosphere within the shortest possible
                          time. -->
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="view-all flex justify-center items-center gap-0-5rem">
                    <div class="homepage-skill-development-course-previous-button active-scale-0-9-5 cursor-pointer">
                        <button
                            class="bg-white border-2px border-solid border-black rounded-5px py-0-4-7rem md-py-0-4-7rem px-0-7rem md-px-1-3rem">
                            <img src="{% static 'images/icons/left-arrow.png' %}" alt class="w-0-8rem" />
                        </button>
                    </div>
                    <a href="#">
                        View All Courses
                        <i class="far fa-arrow-alt-circle-right"></i>
                    </a>
                    <div class="homepage-skill-development-course-next-button active-scale-0-9-5 cursor-pointer">
                        <button
                            class="bg-white border-2px border-solid border-black rounded-5px py-0-4-7rem md-py-0-4-7rem px-0-7rem md-px-1-3rem">
                            <img src="{% static 'images/icons/right-arrow.png' %}" alt class="w-0-8rem" />
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Skill Development Courses End -->

<!-- Project Srction Start -->
<section>
    <div class="wro">
        <div class="skil-development-section-container">
            <div class="skil-development-section Our-Projects">
                <div class="skil-develo-title">
                    <h2>
                        <a href="{% url 'projectapp:all_projects' %}"><span class="s-d-bold-text">Projects</span></a>
                    </h2>
                </div>
                <div class="swiper swiper-infinite-loop-for-homepage-projects">
                    <div class="swiper-wrapper">
                        {% for project in projects %}
                        <div class="swiper-slide p-0-5rem bg-color-project-section-homepage">
                            <div class="skil-development-single-crous project-box-shado h-26rem">
                                <div class="s-d-s-c-img">
                                    <a href="{% url 'projectapp:project_detail' project.slug %}">
                                        {% if project.get_cover_image %}
                                        <img src="{{project.get_cover_image.image.url}}" alt="{{project.title}}" />
                                        {% else %}
                                        <img src="{% static 'images/no-image.jpg' %}" alt="{{project.title}}" />
                                        {% endif %}
                                    </a>
                                </div>
                                <div class="s-d-s-c-titleAndDec">
                                    <h3>
                                        <a
                                            href="{% url 'projectapp:project_detail' project.slug %}">{{project.title|title}}</a>
                                    </h3>
                                    <p>
                                        {{project.description|truncatewords:20}}
                                    </p>
                                    <div class="p-visit-link">
                                        <a href="{% url 'projectapp:project_detail' project.slug %}"
                                            class="project-visit-link">Visit
                                            <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}

                    </div>
                </div>

                <div class="view-all flex justify-center items-center gap-0-5rem">
                    <div class="active-scale-0-9-5 cursor-pointer">
                        <button
                            class="homepage-projects-previous-button border-2px border-solid border-black rounded-5px py-0-4-7rem md-py-0-4-7rem px-0-7rem md-px-1-3rem">
                            <img src="{% static 'images/icons/left-arrow.png' %}" alt class="w-0-8rem" />
                        </button>
                    </div>
                    <a href="{% url 'projectapp:all_projects' %}">
                        View All Projects
                        <i class="far fa-arrow-alt-circle-right"></i>
                    </a>
                    <div class="active-scale-0-9-5 cursor-pointer">
                        <button
                            class="homepage-projects-next-button border-2px border-solid border-black rounded-5px py-0-4-7rem md-py-0-4-7rem px-0-7rem md-px-1-3rem">
                            <img src="{% static 'images/icons/right-arrow.png' %}" alt class="w-0-8rem" />
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Project Srction End -->

<!-- Jury Section Starts -->
<section class="jury-section">
    <div class="title">
        <span class="expert-text"> Expert </span>
        <span class="jury-panel-text"> Jury Panel </span>
    </div>
    <div>
        <div class="swiper expertJurors jury-card-container-parent">
            <div class="swiper-wrapper jury-card-container">
                {% for jury in juries %}

                <div class="swiper-slide jury-item">
                    <div class="jury-image-div">
                        {% if jury.image %}
                        <img src="{{ jury.image.url }}" class="jury-image" />
                        {% else %}
                        <img src="{% static 'images/no-image.jpg' %}" class="jury-image" />
                        {% endif %}
                    </div>
                    <div class="jury-name-div">{{jury.name|title}}</div>
                    <div class="jury-university-div">{{jury.subtitle|title}}, {{jury.school|upper}}</div>
                </div>
                {% endfor %}

            </div>
        </div>
    </div>
</section>
<!-- Jury Section Ends -->
<!-- INSTRUCTOR SECTION STARTS -->
{% if banner_dict.4 %}
<section class="my-5rem lg-my-5rem lg-mt-9rem">
    <div style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          ">
        <div style="text-align: center">
            <span class="title-1">{{ banner_dict.4.title|title }} </span>
            <span class="title-2">{{ banner_dict.4.subtitle|title }} </span>
        </div>
        <div class="instructor-banner-image-div">
            <img style="width: 100%" src="{{ banner_dict.4.image.url }}"
                alt="{{ banner_dict.4.title }} {{ banner_dict.4.subtitle|title }}" class="cursor-pointer" />
            <div class="upload-resume-button-div">
                <a href="{{ banner_dict.4.url }}">
                    <button class="upload-resume-button">{{ banner_dict.4.url_text }}</button>
                </a>
            </div>
        </div>
    </div>
</section>
{% else %}
<section class="my-5rem lg-my-5rem lg-mt-9rem">
    <div style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          ">
        <div style="text-align: center">
            <span class="title-1">Want to become an </span>
            <span class="title-2">Instructor?</span>
        </div>
        <div class="instructor-banner-image-div">
            <img style="width: 100%" src="{% static 'images/banners/instructor-banner.jpg' %}"
                alt="Banner of Instructor Image" class="cursor-pointer" />
            <div class="upload-resume-button-div">
                <a href="{% url 'projectapp:submission_create' %}">
                <button class="upload-resume-button">Upload Resume</button>
               </a>
            </div>
        </div>
    </div>
</section>
{% endif %}
<!-- INSTRUCTOR SECTION ENDS -->

{% endblock content %}

{% block page_js %}

{% include "script.html" %}

{% endblock page_js %}