From 4512701f592d2ae0bd8c55daed361176c8452e11 Mon Sep 17 00:00:00 2001
From: timurgordon <timurgordon@gmail.com>
Date: Wed, 26 Oct 2022 09:35:16 +0300
Subject: [PATCH] mobile view fixes

---
 index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 2960597..271eed8 100644
--- a/index.html
+++ b/index.html
@@ -7,23 +7,23 @@
 <body>
   <div style="background-image: url(/static/images/ruins_bg1.jpg)" class="relative h-full overflow-hidden bg-cover">
     <div class="relative pt-6 pb-16 md:pb-20 lg:pb-24 xl:pb-32">
-      <main class="mt-8 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">
+      <main class="mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">
         <div class="lg:grid lg:grid-cols-12 lg:gap-8">
           <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 bg-white p-4 lg:px-12 lg:py-8 rounded lg:text-left">
-            <h2 class="mt-1 text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-5xl">
+            <h2 class="sm:mt-1 text-3xl tracking-tight leading-8 sm:leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-5xl">
               Register for the
               <br class="hidden md:inline" />
               <span class="text-indigo-600">Ourworld Mkusanyiko </span>
             </h2>
-            <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+            <p class="mt-3 text- text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
                 Located at Mbweni Ruins, Jungle Paradise Resort - Ourworld Mkusanyiko will bring together Africa's emerging leaders that shape  the regenerative, inclusive and empowering digital future of Africa.            </p>
-            <div class="mt-5 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
+            <div class="mt-3 sm:mt-5 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
               <form hx-post="/register" class="mt-3 sm:flex flex-col">
                   <div>
                     <div class="md:flex">
                         <div class="flex-col md:mr-2">
                             <label for="name" class="block text-sm font-medium leading-5 text-gray-700">Name</label>
-                            <input id="name" name="name" aria-label="Name" class="appearance-none block w-full mt-1 px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Name Surname" />
+                            <input id="name" name="name" aria-label="Name" class="appearance-none block w-full mt-1 px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Name Surname" />
                         </div>
                         <div class="md:ml-2">
                         <label for="company_website" class="mt-1 lg:mt-0 block text-sm font-medium leading-5 text-gray-700">Organization Website</label>
@@ -33,18 +33,18 @@
                               http://
                             </span>
                           </div>
-                          <input id="company_website" name="org_website" class="form-input pl-16 sm:pl-14 appearance-none block w-full px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="www.example.com" />
+                          <input id="company_website" name="org_website" class="form-input pl-16 sm:pl-14 appearance-none block w-full px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="www.example.com" />
                         </div>
                     </div>
                     </div>
                     </div>
                     <div class="mt-3 sm:flex">
-                        <input aria-label="Email" name="email" class="appearance-none block w-full px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Enter your email" />
-                        <button type="submit" class="mt-3 w-full px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto">
+                        <input aria-label="Email" name="email" class="appearance-none block w-full px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Enter your email" />
+                        <button type="submit" class="mt-3 w-full px-6 py-2 sm:py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto">
                             Register
                         </button>
                     </div>
-                    <div class="relative mt-4 flex">
+                    <div class="relative mt-2 sm:mt-4 flex">
                         <div class="flex items-center h-5">
                           <input id="settings-option-0" name="plus_one" type="checkbox" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out cursor-pointer" />
                         </div>
@@ -55,21 +55,21 @@
                           </span>
                         </label>
                       </div>
-                    <div class="relative mt-4 flex">
+                    <div class="relative mt-2 sm:mt-4 flex">
                         <div class="flex items-center h-5">
                           <input id="settings-option-1" name="receive_communication" type="checkbox" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out cursor-pointer" checked />
                         </div>
                         <label for="settings-option-1" class="ml-3 flex flex-col cursor-pointer">
                           <!-- On: "text-indigo-900", Off: "text-gray-900" -->
                           <span class="block text-sm leading-5 font-normal">
-                            I want to receive communication and e-mails about Ourworld. 
+                            I want to receive communication about Ourworld. 
                           </span>
                         </label>
                       </div>
               </form>
-              <p class="mt-3 text-sm leading-5 text-gray-500">
+              <p class="mt-2 sm:mt-3 text-sm leading-5 text-gray-500">
                 We care about the protection of your data. Read our
-                <a href="#" class="font-medium text-gray-900 underline">Privacy Policy</a>.
+                <a href="https://library.threefold.me/info/legal/#/legal__privacypolicy" target="_blank" class="font-medium text-gray-900 underline">Privacy Policy</a>.
               </p>
             </div>
           </div>
