From 26237d3b979f9055386a1bae100dfaaa7fec54ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Owsiak?= <owsiakl@outlook.com>
Date: Wed, 7 Feb 2024 18:31:56 +0200
Subject: [PATCH] Improved landing page mobile (#972)

---
 web/landing/assets/app.js            |  1 -
 web/landing/templates/base.html.twig | 21 +++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/web/landing/assets/app.js b/web/landing/assets/app.js
index 63d203b2f..9defcc554 100644
--- a/web/landing/assets/app.js
+++ b/web/landing/assets/app.js
@@ -1,4 +1,3 @@
-import '@fontsource-variable/cabin/index.min.css';
 import '@oddbird/popover-polyfill';
 import './bootstrap.js';
 import 'htmx.org'
diff --git a/web/landing/templates/base.html.twig b/web/landing/templates/base.html.twig
index 21f245335..fda03e542 100644
--- a/web/landing/templates/base.html.twig
+++ b/web/landing/templates/base.html.twig
@@ -15,6 +15,7 @@
     <link rel="preload" fetchpriority="high" href="{{ asset('vendor/@fontsource-variable/cabin/files/cabin-latin-wght-normal.woff2') }}" as="font" crossorigin>
 
     {% block stylesheets %}
+        <style>@font-face{font-family:'Cabin Variable';font-style:normal;font-display:swap;font-weight:400 700;src:url("{{ asset('vendor/@fontsource-variable/cabin/files/cabin-vietnamese-wght-normal.woff2') }}") format('woff2-variations');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Cabin Variable';font-style:normal;font-display:swap;font-weight:400 700;src:url("{{ asset('vendor/@fontsource-variable/cabin/files/cabin-latin-ext-wght-normal.woff2') }}") format('woff2-variations');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cabin Variable';font-style:normal;font-display:swap;font-weight:400 700;src:url("{{ asset('vendor/@fontsource-variable/cabin/files/cabin-latin-wght-normal.woff2') }}") format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style>
         <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
     {% endblock %}
 
@@ -38,14 +39,14 @@
             </a>
 
             <button popovertarget="main-nav" popovertargetaction="show" class="sm:hidden">
-                <img src="{{ asset('images/icons/menu.svg') }}" alt="menu">
+                <img src="{{ asset('images/icons/menu.svg') }}" alt="menu" width="32" height="32">
             </button>
 
             <nav popover id="main-nav" class="max-sm:absolute border-0 p-0 m-0 max-sm:top-0 max-sm:right-0 sm:relative sm:block text-white bg-blue-200 unset">
                 <ul class="sm:flex flex-nowrap whitespace-nowrap">
                     <li class="sm:hidden text-right">
                         <button popovertarget="main-nav" popovertargetaction="hide" class="sm:hidden h-16 pr-4">
-                            <img src="{{ asset('images/icons/close.svg') }}" alt="close">
+                            <img src="{{ asset('images/icons/close.svg') }}" alt="close" width="32" height="32">
                         </button>
                     </li>
                     <li>
@@ -86,24 +87,28 @@
         </div>
 
         <div class="bg-blue-200">
-            <div class="mx-auto max-w-screen-xl py-4 flex sm:items-start justify-center text-center max-sm:flex-col lg:pr-[550px]">
-                <div class="basis-1/3">
+            <div class="mx-auto max-w-screen-xl max-sm:px-2 py-4 flex flex-wrap sm:flex-nowrap items-start text-center lg:pr-[550px]">
+                <div class="basis-2/5 sm:basis-1/3">
                     <img src="{{ asset('images/icons/extract.svg') }}" alt="extract" width="64" height="64" class="inline">
                     <h2 class="my-2 text-2xl font-semibold tracking-wide">Extracts</h2>
                     <p>Read from various data sources.</p>
                 </div>
 
-                <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" width="32" height="32" class="max-sm:rotate-90 max-sm:my-4 mx-2 self-center">
+                <span class="basis-1/5 self-center sm:flex-none sm:mx-2">
+                    <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow" width="32" height="32" class="mx-auto">
+                </span>
 
-                <div class="basis-1/3">
+                <div class="basis-2/5 sm:basis-1/3">
                     <img src="{{ asset('images/icons/transform.svg') }}" alt="transform" width="64" height="64" class="inline">
                     <h2 class="my-2 text-2xl font-semibold tracking-wide">Transforms</h2>
                     <p>Shape and optimize for your needs</p>
                 </div>
 
-                <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" width="32" height="32" class="max-sm:rotate-90 max-sm:my-4 mx-2 self-center">
+                <span class="basis-2/5 self-center ml-auto mt-6 sm:flex-none sm:my-0 sm:mx-2">
+                    <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow" width="32" height="32" class="max-sm:rotate-[135deg]">
+                </span>
 
-                <div class="basis-1/3">
+                <div class="basis-full sm:basis-1/3">
                     <img src="{{ asset('images/icons/load.svg') }}" alt="load" width="64" height="64" class="inline">
                     <h2 class="my-2 text-2xl font-semibold tracking-wide">Loads</h2>
                     <p>Store and secure in one of many available data sinks.</p>