Added buddy-system drawing animated drawing to homepage

fiesta/apps/accounts/templates/fiesta/parts/footer.html

@@ -16,6 +16,9 @@
                     @esnvutbrno
                 </a>
             </p>
+            <span class="mx-auto">
+                <a class="text-gray-600" href="{% url "team" %}">Our Team</a>
+            </span>
             <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
                 <a class="text-gray-500">
                     <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">

fiesta/apps/utils/templatetags/breadcrumbs.py

@@ -5,6 +5,7 @@
 from django import template
 from django.template.loader import render_to_string
 from django.views import View
+from django.utils.translation import gettext_lazy as _
 
 from apps.plugins.middleware.plugin import HttpRequest
 
@@ -34,7 +35,10 @@ def breadcrumbs(context: dict):
                     None,
                     [
                         # TODO: slash is not always the home page?
-                        BreadcrumbTitle(req.membership.section, "/"),
+                        BreadcrumbTitle(
+                            req.membership.section if req.membership else _('Home'),
+                            "/"
+                        ),
                         BreadcrumbTitle(apps.title, f"/{apps.url_prefix}")
                         if (plugin := req.plugin) and (apps := plugin.app_config)
                         else None,

fiesta/fiesta/settings.py

@@ -216,6 +216,7 @@
 
 STATICFILES_DIRS = [
     (BASE_DIR / "static").as_posix(),
+    (BASE_DIR / "templates/static").as_posix(),
 ]
 
 # Default primary key field type

fiesta/fiesta/urls.py

@@ -19,7 +19,8 @@
     )
     for app in all_plugin_apps()
 ] + [
-    path("", TemplateView.as_view(template_name="fiesta/public.html")),
+    path("", TemplateView.as_view(template_name="fiesta/pages/public.html"), name='home'),
+    path("team", TemplateView.as_view(template_name="fiesta/pages/team.html"), name='team'),
     path("admin/", admin.site.urls),
     path("auth/", include("allauth.urls")),
 ]

fiesta/templates/fiesta/base.html

@@ -10,6 +10,8 @@
     {% render_bundle 'main' 'css' %}
     {# TODO: include with webpack #}
     <script src="https://unpkg.com/[email protected]"></script>
+    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
+
 
     {% django_htmx_script %}
 </head>

fiesta/templates/fiesta/pages/public.html

@@ -0,0 +1,215 @@
+{% extends "fiesta/base.html" %}
+{% load static %}
+
+{% block breadcrumbs_container %}
+{% endblock breadcrumbs_container %}
+
+{% block main_container %}
+    <section class="text-gray-600 body-font">
+        <div class="container px-5 pt-24 pb-12 mx-auto">
+            <div class="flex flex-wrap w-full mb-20">
+                <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
+                    <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
+                        Your ESN Section Assistant
+                    </h1>
+                    <div class="h-1 w-20 bg-primary rounded"></div>
+                </div>
+                <p class="lg:w-1/2 w-full leading-relaxed text-gray-500 max-w-xl">
+                    Tired of manual buddy matching, disoriented international students in the streets of your city,
+                    overwhelmed by tones of handwritten ESNcards, or students lost in your office open hours?
+                    <span class="font-bold text-primary text-xl block">No more!</span>
+                </p>
+            </div>
+        </div>
+    </section>
+    <section class="bg-primary">
+        <div class="container px-5 py-12 mx-auto">
+            <div class="flex flex-wrap -m-4">
+                <div class="xl:w-1/4 md:w-1/2 p-4">
+                    <div class="bg-gray-100 p-6 rounded-lg shadow relative
+                                transition-all duration-200 ease-in-out
+                                hover:shadow-xl hover:-translate-y-2">
+                        <img class="h-40 rounded w-full object-cover object-center mb-6"
+                            src="http://placeimg.com/720/400/people" alt="content">
+                        <h3 class="tracking-widest text-red-500 text-xs font-medium title-font">AUTOMATIC</h3>
+                        <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Buddy System</h2>
+                        <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat.
+                            Distillery hexagon disrupt edison bulbche.</p>
+                    </div>
+                </div>
+                <div class="xl:w-1/4 md:w-1/2 p-4">
+                    <div class="bg-gray-100 p-6 rounded-lg shadow relative
+                                transition-all duration-200 ease-in-out
+                                hover:shadow-xl hover:-translate-y-2">
+                        <h3 class="tracking-widest text-primary text-xs font-medium title-font">INTUITIVE</h3>
+                        <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Events Management</h2>
+                        <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat.
+                            Distillery hexagon disrupt edison bulbche.</p>
+                        <img class="h-40 rounded w-full object-cover object-center mt-6"
+                            src="http://placeimg.com/721/401/animal" alt="content">
+                    </div>
+                </div>
+                <div class="xl:w-1/4 md:w-1/2 p-4">
+                    <div class="bg-gray-100 p-6 rounded-lg shadow relative
+                                transition-all duration-200 ease-in-out
+                                hover:shadow-xl hover:-translate-y-2">
+                        <img class="h-40 rounded w-full object-cover object-center mb-6"
+                            src="http://placeimg.com/722/402/tech" alt="content">
+                        <h3 class="tracking-widest text-red-500 text-xs font-medium title-font">EASY TO USE</h3>
+                        <h2 class="text-lg text-gray-900 font-medium title-font mb-4">ESNcards System</h2>
+                        <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat.
+                            Distillery hexagon disrupt edison bulbche.</p>
+                    </div>
+                </div>
+                <div class="xl:w-1/4 md:w-1/2 p-4">
+                    <div class="bg-gray-100 p-6 rounded-lg shadow relative
+                                transition-all duration-200 ease-in-out
+                                hover:shadow-xl hover:-translate-y-2">
+                        <h3 class="tracking-widest text-red-500 text-xs font-medium title-font">PUBLIC</h3>
+                        <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Office Open Hours</h2>
+                        <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat.
+                            Distillery hexagon disrupt edison bulbche.</p>
+                        <img class="h-40 rounded w-full object-cover object-center mt-6"
+                            src="http://placeimg.com/723/403/arch" alt="content">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section>
+        <div class="container px-5 py-12 mx-auto">
+            <h2 class="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20">
+                Pitch Perfect Buddy System
+            </h2>
+            <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
+                <div class="p-4 lg:w-1/3 flex">
+                    <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary text-white mb-4 flex-shrink-0">
+                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
+                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+                        </svg>
+                    </div>
+                    <div class="flex-grow pl-6">
+                        <h2 class="text-gray-900 text-lg title-font font-medium mb-2">Intuitive</h2>
+                        <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar
+                            toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS
+                            try-hard ugh iceland kickstarter tumblr live-edge tilde.</p>
+                        <a class="mt-3 text-primary inline-flex items-center">Learn More
+                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
+                                <path d="M5 12h14M12 5l7 7-7 7"></path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="p-4 lg:w-1/3 flex">
+                    <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary text-white mb-4 flex-shrink-0">
+                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
+                            <circle cx="6" cy="6" r="3"></circle>
+                            <circle cx="6" cy="18" r="3"></circle>
+                            <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
+                        </svg>
+                    </div>
+                    <div class="flex-grow pl-6">
+                        <h2 class="text-gray-900 text-lg title-font font-medium mb-2">Easy to Use</h2>
+                        <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar
+                            toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS
+                            try-hard ugh iceland kickstarter tumblr live-edge tilde.</p>
+                        <a class="mt-3 text-primary inline-flex items-center">Learn More
+                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
+                                <path d="M5 12h14M12 5l7 7-7 7"></path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="p-4 lg:w-1/3 flex">
+                    <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary text-white
+                    mb-4 flex-shrink-0">
+                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
+                            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
+                            <circle cx="12" cy="7" r="4"></circle>
+                        </svg>
+                    </div>
+                    <div class="flex-grow pl-6">
+                        <h2 class="text-gray-900 text-lg title-font font-medium mb-2">Automatic</h2>
+                        <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar
+                            toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS
+                            try-hard ugh iceland kickstarter tumblr live-edge tilde.</p>
+                        <a class="mt-3 text-primary inline-flex items-center">Learn More
+                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
+                                <path d="M5 12h14M12 5l7 7-7 7"></path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section
+        x-data="{buddies: false, internationals: false, matching: false}"
+        :class="{
+            'hover': buddies | internationals | matching,
+            'hover--buddies': buddies,
+            'hover--internationals': internationals,
+            'hover--matching': matching,
+        }"
+        class="bg-gray-100 BuddySystem__drawing"
+    >
+        <div class="container px-5 py-20 mx-auto flex flex-col xl:flex-row justify-between xl:items-start items-center">
+            <div
+                @mouseover="buddies = true" @mouseleave="buddies = false"
+                class="w-full xl:w-1/4 bg-white p-6 rounded-lg
+                        transition-all duration-200 ease-in-out
+                        hover:shadow hover:translate-y-2 xl:hover:translate-x-2 xl:hover:translate-y-0"
+            >
+                <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Buddies</h2>
+                <p class="leading-relaxed text-base">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam autem cumque dolores.
+                    <span class="border border-gray-50 my-4 hidden xl:block"></span>
+                    Wanna appreciate your best and most kind buddies? No problem, statistics included.
+                </p>
+            </div>
+            <div class="w-full lg:w-2/3 xl:w-1/2 xl:mx-12 py-8 flex flex-col items-center">
+                <div class="pb-12">
+                    {% include "static/buddy-system-drawing.svg" %}
+                </div>
+                {#                <svg viewBox="0 0 682 390">#}
+                {#                    <use href="{% static "buddy-system-drawing.svg" %}#buddy-system"></use>#}
+                {##}
+                {#                </svg>#}
+                <div
+                    @mouseover="matching = true" @mouseleave="matching = false"
+                    class="w-full bg-white p-6 rounded-lg
+                        transition-all duration-200 ease-in-out
+                        hover:shadow hover:-translate-y-2 xl:hover:-translate-y-2"
+                >
+                    <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Auto or full manual matching?</h2>
+                    <p class="leading-relaxed text-base">
+                        <span class="font-semibold">Up to you!</span> Fiesta can run in various modes,
+                        starting by manual mode by
+                        editors, through faculty-limited matching, to automatic matching by common
+                        interests of your buddies and students.
+                    </p>
+                </div>
+            </div>
+            <div
+                @mouseover="internationals = true" @mouseleave="internationals = false"
+                class="w-full xl:w-1/4 bg-white p-6 rounded-lg
+                        transition-all duration-200 ease-in-out
+                        hover:shadow hover:-translate-y-2 xl:hover:-translate-x-2 xl:hover:translate-y-0"
+            >
+                <h2 class="text-lg text-gray-900 font-medium title-font mb-4">International Students</h2>
+                <p class="leading-relaxed text-base">
+                    Eaque iste laboriosam odio officiis quis?
+                    Assumenda deleniti ducimus ipsa mollitia natus officia.
+                    <span class="border border-gray-50 my-4 hidden xl:block"></span>
+                    Fingerstache flexitarian street art 8-bit waistcoat.
+                    Distillery hexagon disrupt edison bulbche.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <div class="bg-fixed backdrop-blur-sm h-64 bg-top"
+        style="background-image: url(https://lh3.googleusercontent.com/pw/AM-JKLVxiXVXhp2hlpkTlZDXsdUnXaBDYXJy6KBksbqnN0jczR2P1PhsznIgFIf-VTwK2pZxCGNGcQ0xz5Clg6waz6FkifYLixKDwF9h9akbtWfZo-rHrD4o5HMiSNHOciszJUeTuf-A_47Z_R3Qkfy96W86Tg=w2200-h1468-no?authuser=0)"></div>
+{% endblock main_container %}