Merge pull request #21 from hotosm/home/transparent-header-large-banner

Home/transparent header large banner

Makefile

@@ -19,6 +19,10 @@ makemessages:
 	@docker compose -f docker-compose.dev.yml run --rm web python manage.py makemessages -l fr
 	@docker compose -f docker-compose.dev.yml run --rm web python manage.py makemessages -l es
 
+makemigrations:
+	@docker compose -f docker-compose.dev.yml run --rm web python manage.py makemigrations
+	@docker compose -f docker-compose.dev.yml run --rm web python manage.py migrate
+
 makecompile:
 	@docker compose -f docker-compose.dev.yml run --rm web python manage.py compilemessages
 

container-entrypoint.sh

@@ -6,7 +6,9 @@
 #   phase facilities of your hosting platform. This is used only so the
 #   Wagtail instance can be started with a simple "docker run" command.
 
-# Apply database migrations
+# Migrate database
+echo "Create database migrations"
+python manage.py makemigrations
 echo "Apply database migrations"
 python manage.py migrate
 

home/migrations/0003_homepage_landing_page_cta.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-04-05 23:57
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0002_create_homepage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='landing_page_cta',
+            field=models.CharField(max_length=100, null=True),
+        ),
+    ]

home/migrations/0004_remove_homepage_landing_page_cta_homepage_hero_cta_and_more.py

@@ -0,0 +1,40 @@
+# Generated by Django 4.2.7 on 2024-04-06 23:44
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('home', '0003_homepage_landing_page_cta'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='homepage',
+            name='landing_page_cta',
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='hero_cta',
+            field=models.CharField(help_text='Write text for the Call to Action button', max_length=50, null=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='hero_cta_link',
+            field=models.ForeignKey(blank=True, help_text='Select a page to link to for the Call to Action button', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailcore.page'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='hero_text',
+            field=models.CharField(help_text='Write an introduction for the hero/landing page section', max_length=100, null=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='image',
+            field=models.ForeignKey(blank=True, help_text='Banner image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+    ]

home/migrations/0005_alter_homepage_hero_text.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-04-08 00:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0004_remove_homepage_landing_page_cta_homepage_hero_cta_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='hero_text',
+            field=models.CharField(help_text='Write an introduction for the hero/landing page section', max_length=500, null=True),
+        ),
+    ]

home/migrations/0006_homepage_carousel.py

@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-04-22 08:24
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0005_alter_homepage_hero_text'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='carousel',
+            field=wagtail.fields.StreamField([('slides', wagtail.blocks.StructBlock([('header', wagtail.blocks.CharBlock(help_text='Slide header', required=True)), ('body', wagtail.blocks.CharBlock(help_text='Slide body', required=True)), ('action_button', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock(help_text='Text to display on the button', required=True)), ('link', wagtail.blocks.URLBlock(help_text='URL to link to', required=True))], help_text='Button to display on the slide', required=False))]))], blank=True, use_json_field=True, verbose_name='Carousel'),
+        ),
+    ]

home/migrations/0007_alter_homepage_carousel.py

@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-04-22 08:43
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0006_homepage_carousel'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='carousel',
+            field=wagtail.fields.StreamField([('slides', wagtail.blocks.StructBlock([('header', wagtail.blocks.CharBlock(help_text='Slide header', required=True)), ('body', wagtail.blocks.CharBlock(help_text='Slide body', required=True)), ('action_button', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock(help_text='Text to display on the button', required=True)), ('link', wagtail.blocks.URLBlock(blank=True, help_text='URL to link to', required=False))], help_text='Button to display on the slide', required=False))]))], blank=True, use_json_field=True, verbose_name='Carousel'),
+        ),
+    ]

home/models.py

@@ -1,6 +1,70 @@
 from django.db import models
+from wagtail.admin.panels import FieldPanel, MultiFieldPanel
+from wagtail.blocks import CharBlock, StreamBlock, StructBlock, URLBlock
+from wagtail.fields import StreamField
 from wagtail.models import Page
 
 
+class ActionButtonBlock(StructBlock):
+    text = CharBlock(required=True, help_text="Text to display on the button")
+    link = URLBlock(required=False, blank=True, help_text="URL to link to")
+
+
+class SlideBlock(StructBlock):
+    header = CharBlock(required=True, help_text="Slide header")
+    body = CharBlock(required=True, help_text="Slide body")
+    action_button = ActionButtonBlock(required=False, help_text="Button to display on the slide")
+
+
+class CarouselBlock(StreamBlock):
+    slides = SlideBlock()
+
+
 class HomePage(Page):
-    pass
+    templates = "home/home_page.html"
+
+    # Hero section
+    image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Banner image",
+    )
+    hero_text = models.CharField(
+        max_length=500,
+        blank=False,
+        null=True,
+        help_text="Write an introduction for the hero/landing page section",
+    )
+    hero_cta = models.CharField(
+        max_length=50, blank=False, null=True, help_text="Write text for the Call to Action button"
+    )
+    hero_cta_link = models.ForeignKey(
+        "wagtailcore.Page",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Select a page to link to for the Call to Action button",
+    )
+    carousel = StreamField(
+        CarouselBlock(max_num=3, min_num=3),
+        verbose_name="Carousel",
+        blank=True,
+        use_json_field=True,
+    )
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel(
+            [
+                FieldPanel("image"),
+                FieldPanel("hero_text"),
+                FieldPanel("hero_cta"),
+                FieldPanel("hero_cta_link"),
+            ],
+            heading="Hero Section",
+        ),
+        FieldPanel("carousel"),
+    ]

home/templates/home/home_page.html

@@ -1,22 +1,88 @@
 {% extends "base.html" %}
 {% load static %}
 {% load compress %}
+{% load wagtailimages_tags %}
 {% block body_class %}
     template-homepage
 {% endblock body_class %}
 {% block extra_css %}
-    {% comment %}
-Delete the line below if you're just getting started and want to remove the welcome screen!
-    {% endcomment %}
     {% compress css %}
-        {% comment %} <link rel="stylesheet" href="{% static 'css/welcome_page_processed.css' %}"> {% endcomment %}
     {% endcompress css %}
 {% endblock extra_css %}
 {% block content %}
-    {% comment %} <p class="bg-hot-red">Home weeee</p>
-    <p class="bg-violet-50">This is the homepage</p> {% endcomment %}
-    {% comment %}
-Delete the line below if you're just getting started and want to remove the welcome screen!
-    {% endcomment %}
-    {% comment %} {% include "home/welcome_page.html" %} {% endcomment %}
+    <div x-data="{isLandingPage: true}"
+         class="relative isolate overflow-hidden pt-14">
+        {% if page.image %}
+            {% image page.image fill-2830x2130 class="absolute inset-0 -z-10 h-full w-full object-cover" %}
+        {% endif %}
+        <!-- Banner -->
+        <div class="mx-auto max-w-7xl text-hot-white py-32 px-12 sm:py-48 lg:py-56 xl:px-0 space-y-28">
+            <!-- Call to action components-->
+            <div class="flex flex-col lg:flex-row lg:justify-between">
+                <!-- Static CTA -->
+                <div class="w-128 lg:w-1/2">
+                    <div class="font-semibold text-h2 md:text-center lg:text-left leading-tight sm:text-h3">{{ page.hero_text }}</div>
+                    <div class="mt-10 md:text-center lg:text-left">
+                        {% include "components/branded_elements/button.html" with link="" text=page.hero_cta %}
+                    </div>
+                </div>
+                <!-- Carousel CTA -->
+                <div x-data="{ slide: 0, slides: [] }"
+                     x-init="slides = [...$el.children];"
+                     class="w-full lg:w-1/2 flex flex-col lg:flex-row justify-center">
+                    {% for block in page.carousel %}
+                        <div x-show="slide === {{ forloop.counter0 }}"
+                             class="sm:mt-30 lg:mt-0 lg:w-[398px] mt-20 space-y-4 backdrop-blur-md px-5 pt-7 pb-12 shadow-2xl h-[300px] flex flex-col justify-center">
+                            <div class="text-h4 font-bold h-fit">{{ block.value.header }}</div>
+                            <div class="text-lg font-regular h-fit">{{ block.value.body }}</div>
+                            <a href="{{ block.value.action_button.link }}">
+                                <div class="text-intro font-medium inline-flex space-x-5 items-center">
+                                    <span>{{ block.value.action_button.text }}</span>
+                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                         width="10.689"
+                                         height="16.819"
+                                         viewBox="0 0 10.689 16.819">
+                                        <path id="Path_4671" data-name="Path 4671" d="M0,8.28,7,0l7,8.28" transform="translate(9.689 1.409) rotate(90)" fill="none" stroke="#d43f3f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+                                    </svg>
+                                </div>
+                            </a>
+                        </div>
+                    {% endfor %}
+                    <div class="flex flex-row lg:flex-col">
+                        <button @click="slide=0"
+                                x-bind:class="{'bg-hot-red shadow w-[45px] h-[45px] text-2xl text-hot-white font-bold flex items-center justify-center': slide === 0, 'backdrop-blur-lg shadow w-[45px] h-[45px] text-2xl text-hot-white font-regular flex items-center justify-center': slide !== 0}">
+                            1
+                        </button>
+                        <button @click="slide=1"
+                                x-bind:class="{'bg-hot-red shadow w-[45px] h-[45px] text-2xl text-hot-white font-bold flex items-center justify-center': slide === 1, 'backdrop-blur-lg shadow w-[45px] h-[45px] text-2xl text-hot-white font-regular flex items-center justify-center': slide !== 1}">
+                            2
+                        </button>
+                        <button @click="slide=2"
+                                x-bind:class="{'bg-hot-red shadow w-[45px] h-[45px] text-2xl text-hot-white font-bold flex items-center justify-center': slide === 2, 'backdrop-blur-lg shadow w-[45px] h-[45px] text-2xl text-hot-white font-regular flex items-center justify-center': slide !== 2}">
+                            3
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!--CTA Statistics, TODO: Use HTMX to query endpoint for stats once the endpoint exists  -->
+            <div class="flex flex-row justify-center items-center space-x-5 h-full">
+                <div class="backdrop-blur-lg shadow flex flex-col justify-center text-center w-52 h-32">
+                    <div class="font-barlow font-semibold text-h4">468K</div>
+                    <div class="font-regular text-base-18">Total Mappers ⓘ</div>
+                </div>
+                <div class="backdrop-blur-lg shadow flex flex-col justify-center text-center w-52 h-32">
+                    <div class="font-barlow font-semibold text-h4">246.7M</div>
+                    <div class="font-regular text-base-18">Total Map Edits ⓘ</div>
+                </div>
+                <div class="backdrop-blur-lg shadow flex flex-col justify-center text-center w-52 h-32">
+                    <div class="font-barlow font-semibold text-h4">147.5M</div>
+                    <div class="font-regular text-base-18">Buildings Mapped ⓘ</div>
+                </div>
+                <div class="backdrop-blur-lg shadow flex flex-col justify-center items-center text-center w-52 h-32">
+                    <div class="font-barlow font-semibold text-h4">2.7M</div>
+                    <div class="font-regular text-base-18">Roads Mapped(KM) ⓘ</div>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock content %}

hot_osm/settings/base.py

@@ -36,6 +36,7 @@
     "utils",
     "wagtail.contrib.forms",
     "wagtail.contrib.redirects",
+    "wagtail.contrib.settings",
     "wagtail.embeds",
     "wagtail.sites",
     "wagtail.users",
@@ -86,6 +87,7 @@
                 "django.template.context_processors.request",
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
+                "wagtail.contrib.settings.context_processors.settings",
             ],
         },
     },
@@ -194,6 +196,7 @@
 # Wagtail settings
 
 WAGTAIL_SITE_NAME = "hot_osm"
+WAGTAILIMAGES_MAX_UPLOAD_SIZE = 20 * 1024 * 1024  # 20MB
 
 # Search
 # https://docs.wagtail.org/en/stable/topics/search/backends.html

hot_osm/templates/base.html

@@ -36,10 +36,15 @@
                 src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
     </head>
     <body class="min-h-screen {% block body_class %}{% endblock body_class %}">
-        {% include "components/header/header.html" %}
-        {% block content %}
-        {% endblock content %}
-        {% django_browser_reload_script %}
-        {% wagtailuserbar %}
+        <div x-data="{ isMenuOpen: false, isSearchClicked: false, isLandingPage: false }">
+            {% include "components/nav/secondary_desktop_nav.html" %}
+            <div class="relative">
+                {% include "components/header/header.html" %}
+                {% block content %}
+                {% endblock content %}
+            </div>
+            {% django_browser_reload_script %}
+            {% wagtailuserbar %}
+        </div>
     </body>
 </html>

hot_osm/templates/components/branded_elements/button.html

@@ -1,5 +1,5 @@
 <!-- Resolution: Added 'tabindex=0' to the element to fix an issue where the focus ring was not appearing in Safari. This makes the element focusable and ensures the focus ring is displayed. -->
 <button tabindex="0"
-        class="font-medium font-barlow h-hot-4 text-base-18 bg-hot-red text-hot-white px-hot-3 rounded-lg hover:bg-hot-off-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset lg:ml-3 {{ classes }}">
+        class="font-regular font-archivo h-hot-4 text-base-18 bg-hot-red text-hot-white px-hot-3 hover:bg-hot-off-white hover:text-hot-red focus:bg-transparent focus:text-hot-red focus:ring-2 focus:ring-hot-red focus:ring-inset {{ classes }}">
     {{ text }}
 </button>

hot_osm/templates/components/branded_elements/link.html

@@ -1,16 +1,15 @@
 <a href="{{ link }}"
-   class="hover:underline inline-block font-medium font-barlow text-hot-black {{ classes }}"
+   x-bind:class="{'hover:underline inline-block font-regular font-archivo text-hot-white {{ classes }}': isLandingPage, 'hover:underline inline-block font-regular font-archivo text-hot-black {{ classes }}': !isLandingPage}"
    aria-label="{{ text }}{% if parent|default:False %}, submenu{% endif %}">
     <span class="flex items-center">
         {{ text }}
         {% if parent|default:False %}
             <svg xmlns="http://www.w3.org/2000/svg"
-                 width="15px"
-                 height="15px"
-                 viewBox="0 0 24 24"
-                 fill="currentColor"
-                 class="ml-0.5">
-                <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" />
+                 width="12.816"
+                 height="8.406"
+                 viewBox="0 0 12.816 8.406"
+                 class="ml-2.5">
+                <path id="Path_4533" data-name="Path 4533" d="M-21684.635-21196.645l5-6,5,6" transform="translate(-21673.227 -21195.236) rotate(180)" fill="none" stroke="#d23f3f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
             </svg>
         {% endif %}
     </span>