fix: keynote section mobile ui (#85)

* fix: keynote section mobile ui

* fix: improve layout for medium and small devices

Author: Ketan-Karki

src/_includes/landing/keynotes.njk

@@ -41,52 +41,52 @@
     <!-- Medium Devices -->
     <div class="md:flex flex-col pt-36 pb-20 pl-12 space-y-44 lg:hidden hidden">
         <div class="flex justify-start">
-            <div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out">    
-                <p class="-translate-y-8 -translate-x-8 text-center">Creator, Calibre & Kitty</p>
+            <div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out">
                 {% call cube(dimen=200, bg="purple") -%}
                     <div class="flex items-center justify-center w-full h-full">
                         <img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
+                <p>Announcing Soon!</p>
             </div>
-            <div class="group relative motion-safe:transform motion-safe:translate-y-24 motion-safe:hover:translate-y-48 -ml-10 transition duration-700 ease-in-out">    
-                <p class="-translate-y-8 -translate-x-8 text-center">AI Developer & Autism Advocate</p>
+            <div class="group relative motion-safe:transform motion-safe:hover:translate-y-48 ml-28 transition duration-700 ease-in-out">
                 {% call cube(dimen=200, bg="lime") -%}
                     <div class="flex items-center justify-center w-full h-full">
                         <img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
+                <p>Announcing Soon!</p>
             </div>
         </div>
         <div class="flex justify-start">
-            <div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out">    
-                <p class="-translate-y-8 -translate-x-8 text-center">Creator, Calibre & Kitty</p>
+            <div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out">
                 {% call cube(dimen=200, bg="purple") -%}
                     <div class="flex items-center justify-center w-full h-full">
                         <img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
+                <p>Announcing Soon!</p>
             </div>
-            <div class="group relative motion-safe:transform motion-safe:translate-y-24 motion-safe:hover:translate-y-48 -ml-10 transition duration-700 ease-in-out">    
-                <p class="-translate-y-8 -translate-x-8 text-center">AI Developer & Autism Advocate</p>
+            <div class="group relative motion-safe:transform motion-safe:hover:translate-y-48 ml-28 transition duration-700 ease-in-out">
                 {% call cube(dimen=200, bg="lime") -%}
                     <div class="flex items-center justify-center w-full h-full">
                         <img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
+                <p>Announcing Soon!</p>
             </div>
         </div>
     </div>
     <!-- Small Devices -->
-    <div class="flex flex-col overflow-y-auto h-80 space-y-40 px-4 pt-16 items-center lg:hidden md:hidden scrollbar-hide">
+    <div class="flex flex-col space-y-20 px-4 pt-16 pb-16 items-center md:hidden">
         <div class="flex-shrink-0">
             <div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out" data-cube="1">    
                 {% call cube(width=214, height=208, depth=31, bg="purple") -%}
                     <div class="flex items-center justify-center w-full h-full">
                         <img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
-                <p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>
+                <p>Announcing Soon!</p>
             </div>
         </div>
         <div class="flex-shrink-0">
@@ -96,7 +96,7 @@
                         <img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
-                <p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>
+                <p>Announcing Soon!</p>
             </div>
         </div>
         <div class="flex-shrink-0">
@@ -106,7 +106,7 @@
                         <img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
-                <p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>
+                <p>Announcing Soon!</p>
             </div>
         </div>
         <div class="flex-shrink-0">
@@ -116,7 +116,7 @@
                         <img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
                     </div>
                 {%- endcall %}
-                <p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>
+                <p>Announcing Soon!</p>
             </div>
         </div>
     </div>