From f84db3795faf9bb0a2eca4fa94fcc054280304da Mon Sep 17 00:00:00 2001
From: Felipe <felipeduarteuts@gmail.com>
Date: Sat, 5 Aug 2023 15:51:29 -0500
Subject: [PATCH] update

---
 index.html | 116 +++++++++++++++++++++++++++--------------------------
 1 file changed, 60 insertions(+), 56 deletions(-)

diff --git a/index.html b/index.html
index 4fe9426..ac488b0 100644
--- a/index.html
+++ b/index.html
@@ -14,12 +14,11 @@
                 <img src="./img/logo_prosapp.png" alt="logo">
             </div>
             <nav>
-                <ul class="flex [&>li]:inline-block [&>li]:mx-6 [&>li]:cursor-pointer [&>li]:text-gray-400">
-                    <li>Inicio</li>
-                    <li>App</li>
-                    <li>Nosotros</li>
-                    <li>Contacto</li>
-                    <li>Centro de ayuda</li>
+                <ul class="flex items-center [&>li]:inline-block [&>li]:mx-6 [&>li]:cursor-pointer text-gray-400">
+                    <li><a href="#inicio">Inicio</a></li>
+                    <li><a href="#usuarios">Usuarios</a></li>
+                    <li><a href="#profesionales">Profesionales</a></li>
+                    <li class="font-semibold px-3 py-2 bg-[#1A8BE4] rounded-lg text-white">Prosapp WEB</li>
                 </ul>
             </nav>
         </div>
@@ -32,8 +31,7 @@
             </div>
     
             <div class="flex items-center lg:hidden">
-                <button @click="open = ! open"
-                    class="inline-flex items-center justify-center p-2 rounded-md text-[#177dcd] hover:text-[#177dcd] hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-[#177dcd] transition duration-150 ease-in-out">
+                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-[#177dcd] hover:text-[#177dcd] hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-[#177dcd] transition duration-150 ease-in-out">
                     <svg class="h-8 w-8" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
                             stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -46,20 +44,19 @@
 
         <div :class="{ 'block': open, 'hidden': !open }" class="hidden lg:hidden">
             <ul class="select-none font-semibold">
-                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Inicio</li>
-                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">App</li>
-                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Nosotros</li>
-                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Contacto</li>
-                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Centro de ayuda</li>
+                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"><a href="#inicio">Inicio</a></li>
+                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"><a href="#usuarios">Usuarios</a></li>
+                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"><a href="#profesionales">Profesionales</a></li>
+                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Prosapp WEB</li>
             </ul>
         </div>
     </header>
 
-    <section class="h-screen grid md:content-center pt-16">
+    <section id="inicio" class="h-screen grid md:content-center pt-16">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10 mx-4 md:mx-0 ">
             <div class="md:pl-8">
                 <h1 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp</h1>
-                <h2 class="text-xl md:text-5xl xl:text-7xl mb-4 transition-all">Tu aliado de confianza en servicios de salud</h2>
+                <h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">Tu aliado de confianza en servicios de salud</h2>
                 <p class="text-gray-400 text-sm md:text-lg mb-8 transition-all">Reservas rápidas y sencillas con profesionales verificados, disponibles 24/7.</p>
 
                 <div class="flex gap-2 sm:gap-6 md:gap-8 mt-4 [&>button]:flex [&>button]:justify-center [&>button]:items-center [&>button]:gap-2 [&>button]:bg-[#1A8BE4] [&>button]:rounded-lg [&>button]:text-white [&>button]:transition-all">
@@ -81,7 +78,7 @@
         </div>
     </section>
 
-    <section class="h-screen grid md:content-center">
+    <section id="usuarios" class="h-screen grid md:content-center">
         <div class="grid grid-cols-1 md:grid-cols-2 mx-4 md:mx-0">
             <div class="flex items-center justify-center md:pl-8">
                 <div class="rounded-full bg-gray-300 overflow-hidden">
@@ -89,12 +86,12 @@
                 </div>
             </div>  
             <div class="md:pr-8">
-                <h1 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp</h1>
-                <h2 class="text-xl md:text-5xl xl:text-7xl mb-4 transition-all">La atención que mereces</h2>
+                <h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para usuarios</h2>
+                <h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">La atención que mereces</h2>
                 <p class="text-gray-400 text-sm md:text-lg mb-16 transition-all">Tu bienestar es nuestra prioridad, encuentra los mejores profesionales 
                     certificados.</p>
 
-                <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 [&>li]:text-xl [&>li]:text-gray-500 [&>li]:py-1">
+                <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-500 [&>li]:py-1">
                     <li>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 text-[#1A8BE4]">
                             <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
@@ -124,13 +121,13 @@
         </div>
     </section>
 
-    <section class="h-screen grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
+    <section id="profesionales" class="h-screen grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
         <div class="flex flex-col justify-start md:justify-center md:col-span-2 lg:col-span-3 mx-4 md:mx-8"> 
-            <h1 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp</h1>
-            <h2 class="text-xl md:text-5xl xl:text-7xl mb-4 transition-all">Expande tu alcance profesional</h2>
+            <h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para profesionales de la salud</h2>
+            <h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">Expande tu alcance profesional</h2>
             <p class="text-gray-400 text-sm md:text-lg mb-16 transition-all">Amplía tu base de pacientes y llega a más personas con ProsApp.</p>
 
-            <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 [&>li]:text-xl [&>li]:text-gray-500 [&>li]:py-1">
+            <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-500 [&>li]:py-1">
                 <li>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 text-[#1A8BE4]">
                         <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
@@ -169,59 +166,66 @@
                 </div>
             </div>  
             <div class="md:pr-8">
-                <h1 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h1>
+                <h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h2>
     
-                <ol class="[&>li]:text-xl [&>li]:text-gray-500 [&>li]:py-1 list-decimal mx-8 md:mx-0">
-                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-bold">
-                        <h2 class="pt-8">
-                            Confianza
+                <ul class="[&>li]:text-xl [&>li]:py-1 mx-8 md:mx-0">
+                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold">
+                        <h2 class="pt-8 mb-3">
+                            1. Confianza
                         </h2>
                         <p class="text-lg text-gray-400 mb-6 font-normal">Brindamos confianza y seguridad en la atención médica proporcionada.</p>
                     </li>
-                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-bold">
-                        <h2 class="pt-8">
-                            Calidad
+                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold">
+                        <h2 class="pt-8 mb-3">
+                            2. Calidad
                         </h2>
                         <p class="text-lg text-gray-400 mb-6 font-normal">Garantizamos altos estándares de atención médica.</p>
                     </li>
-                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-bold">
-                        <h2 class="pt-8">
-                            Responsabilidad
+                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold">
+                        <h2 class="pt-8 mb-3">
+                            3. Responsabilidad
                         </h2>
                         <p class="text-lg text-gray-400 mb-6 font-normal"> Cumplimos con los más altos estándares éticos y legales en la prestación de servicios médicos.</p>
                     </li>
-                </ol>
+                </ul>
             </div>
         </div>
     </section>
 
-    <section class="grid md:content-center">
-        <h1 class="text-gray-400 font-semibold lg:text-2xl mb-4 transition-all text-center">¿POR QUÉ PROSAPP?</h1>
-        <h2 class="text-xl md:text-5xl xl:text-6xl mb-4 transition-all text-center">Texto editable</h2>
-        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-8 lg:gap-24 my-6 mx-8">
-            <div class="rounded-lg shadow-lg w-full h-48 shadow-gray-300">
-                
+    <section class="h-screen grid md:content-center mt-8 md:mt-0 relative">
+        <div class="grid grid-cols-1">            
+            <div class="text-center">
+                <h3 class="text-gray-400 font-semibold text-2xl lg:text-3xl mb-4 transition-all">ACERCA DE PROSAPP</h3>
+                <p class="text-xl xl:text-3xl mb-4 transition-all shadow-md border-2 rounded-lg md:w-1/2 lg:w-3/4 mx-8 md:mx-auto mt-8 px-8 py-4">
+                    ProsApp Conecta a profesionales de la salud altamente calificados con usuarios que buscan servicios médicos y asesoramiento confiable
+                </p>
+            </div> 
+            <div class="flex justify-center gap-6 md:mt-8">
+                <svg class="w-10 cursor-pointer hover:scale-105 transition-all" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" ><g><path fill="#1877f2" d="M512 256c0 127.78-93.62 233.69-216 252.89V330h59.65L367 256h-71v-48.02c0-20.25 9.92-39.98 41.72-39.98H370v-63s-29.3-5-57.31-5c-58.47 0-96.69 35.44-96.69 99.6V256h-65v74h65v178.89C93.62 489.69 0 383.78 0 256 0 114.62 114.62 0 256 0s256 114.62 256 256z" data-original="#1877f2" class=""></path><path fill="#ffffff" d="M355.65 330 367 256h-71v-48.021c0-20.245 9.918-39.979 41.719-39.979H370v-63s-29.296-5-57.305-5C254.219 100 216 135.44 216 199.6V256h-65v74h65v178.889c13.034 2.045 26.392 3.111 40 3.111s26.966-1.066 40-3.111V330z" data-original="#ffffff"></path></g></svg>
+                <svg class="w-10 cursor-pointer hover:scale-105 transition-all" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 152 152" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><linearGradient id="a" x1="22.26" x2="129.74" y1="22.26" y2="129.74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fae100"></stop><stop offset=".15" stop-color="#fcb720"></stop><stop offset=".3" stop-color="#ff7950"></stop><stop offset=".5" stop-color="#ff1c74"></stop><stop offset="1" stop-color="#6c1cd1"></stop></linearGradient><g data-name="Layer 2"><g data-name="03.Instagram"><rect width="152" height="152" fill="url(#a)" rx="76" data-original="url(#a)" class=""></rect><g fill="#fff"><path d="M133.2 26c-11.08 20.34-26.75 41.32-46.33 60.9S46.31 122.12 26 133.2q-1.91-1.66-3.71-3.46A76 76 0 1 1 129.74 22.26q1.8 1.8 3.46 3.74z" opacity=".1" fill="#ffffff" data-original="#ffffff" class=""></path><path d="M94 36H58a22 22 0 0 0-22 22v36a22 22 0 0 0 22 22h36a22 22 0 0 0 22-22V58a22 22 0 0 0-22-22zm15 54.84A18.16 18.16 0 0 1 90.84 109H61.16A18.16 18.16 0 0 1 43 90.84V61.16A18.16 18.16 0 0 1 61.16 43h29.68A18.16 18.16 0 0 1 109 61.16z" fill="#ffffff" data-original="#ffffff" class=""></path><path d="m90.59 61.56-.19-.19-.16-.16A20.16 20.16 0 0 0 76 55.33 20.52 20.52 0 0 0 55.62 76a20.75 20.75 0 0 0 6 14.61 20.19 20.19 0 0 0 14.42 6 20.73 20.73 0 0 0 14.55-35.05zM76 89.56A13.56 13.56 0 1 1 89.37 76 13.46 13.46 0 0 1 76 89.56zM102.43 54.38a4.88 4.88 0 0 1-4.85 4.92 4.81 4.81 0 0 1-3.42-1.43 4.93 4.93 0 0 1 3.43-8.39 4.82 4.82 0 0 1 3.09 1.12l.1.1a3.05 3.05 0 0 1 .44.44l.11.12a4.92 4.92 0 0 1 1.1 3.12z" fill="#ffffff" data-original="#ffffff" ></path></g></g></g></g></svg>
+                <svg class="w-10 cursor-pointer hover:scale-105 transition-all" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><path d="M256.064 0h-.128C114.784 0 0 114.816 0 256c0 56 18.048 107.904 48.736 150.048l-31.904 95.104 98.4-31.456C155.712 496.512 204 512 256.064 512 397.216 512 512 397.152 512 256S397.216 0 256.064 0z" style="" fill="#4caf50" data-original="#4caf50" class=""></path><path d="M405.024 361.504c-6.176 17.44-30.688 31.904-50.24 36.128-13.376 2.848-30.848 5.12-89.664-19.264-75.232-31.168-123.68-107.616-127.456-112.576-3.616-4.96-30.4-40.48-30.4-77.216s18.656-54.624 26.176-62.304c6.176-6.304 16.384-9.184 26.176-9.184 3.168 0 6.016.16 8.576.288 7.52.32 11.296.768 16.256 12.64 6.176 14.88 21.216 51.616 23.008 55.392 1.824 3.776 3.648 8.896 1.088 13.856-2.4 5.12-4.512 7.392-8.288 11.744-3.776 4.352-7.36 7.68-11.136 12.352-3.456 4.064-7.36 8.416-3.008 15.936 4.352 7.36 19.392 31.904 41.536 51.616 28.576 25.44 51.744 33.568 60.032 37.024 6.176 2.56 13.536 1.952 18.048-2.848 5.728-6.176 12.8-16.416 20-26.496 5.12-7.232 11.584-8.128 18.368-5.568 6.912 2.4 43.488 20.48 51.008 24.224 7.52 3.776 12.48 5.568 14.304 8.736 1.792 3.168 1.792 18.048-4.384 35.52z" style="" fill="#fafafa" data-original="#fafafa" class=""></path></g></svg>
+                <svg class="w-10 cursor-pointer hover:scale-105 transition-all" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><linearGradient id="a" x1="256" x2="256" y1="512" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6c54a3"></stop><stop offset="1" stop-color="#00b1d2"></stop></linearGradient><path fill="url(#a)" fill-rule="evenodd" d="M256 0c141.385 0 256 114.615 256 256S397.385 512 256 512 0 397.385 0 256 114.615 0 256 0zm142.186 157.122H113.814v5.532L256 267.54l142.186-104.886zM312.3 251.261l85.891 90.829V187.912zm-96.121 12.153-86.467 91.464h252.58l-86.467-91.464-28.051 20.678a19.723 19.723 0 0 1-23.548 0l-28.052-20.678zm-102.36-75.5V342.09l85.9-90.829-85.9-63.349zm285.533-51.105H112.653A19.2 19.2 0 0 0 93.5 155.988v200.024a19.2 19.2 0 0 0 19.155 19.181h286.692a19.2 19.2 0 0 0 19.153-19.181V155.988a19.2 19.2 0 0 0-19.153-19.181z" data-original="url(#a)" class=""></path></g></svg>
             </div>
-            <div class="rounded-lg shadow-lg w-full h-48 shadow-gray-300">
-
-            </div>
-            <div class="rounded-lg shadow-lg w-full h-48 shadow-gray-300">
-
-            </div>
-            <div class="rounded-lg shadow-lg w-full h-48 shadow-gray-300">
-
-            </div>
-            <div class="rounded-lg shadow-lg w-full h-48 shadow-gray-300">
-
-            </div>
-            <div class="rounded-lg shadow-lg w-full h-48 shadow-gray-300">
-
+            <div class="md:absolute md:bottom-16 w-full">
+                <div class="text-center border-t-2 pt-4 md:mt-8 mx-8">
+                    <h3 class="text-gray-400 font-semibold text-md lg:text-xl mb-4 transition-all">Desarrollado por U-site</h3>
+                </div>
             </div>
         </div>
     </section>
     
     <footer class="fixed bottom-10 right-10">
-        <a href="" class="block bg-[#319CF1] w-24 h-24 rounded-full drop-shadow-lg"></a>
+        <svg class="w-20 lg:w-24 block drop-shadow-lg cursor-pointer" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 176 176" style="enable-background:new 0 0 512 512" xml:space="preserve">
+            <g data-name="Layer 2">
+                <g data-name="09.whatsapp">
+                    <circle cx="88" cy="88" r="88" fill="#319CF1" data-original="#29a71a" class=""></circle>
+                    <g fill="#fff">
+                        <path d="M126.8 49.2a54.57 54.57 0 0 0-87.42 63.13l-5.79 28.11a2.08 2.08 0 0 0 .33 1.63 2.11 2.11 0 0 0 2.24.87l27.55-6.53A54.56 54.56 0 0 0 126.8 49.2zm-8.59 68.56a42.74 42.74 0 0 1-49.22 8l-3.84-1.9-16.89 4 .05-.21 3.5-17-1.88-3.71a42.72 42.72 0 0 1 7.86-49.59 42.73 42.73 0 0 1 60.42 0 2.28 2.28 0 0 0 .22.22 42.72 42.72 0 0 1-.22 60.19z" fill="#ffffff" data-original="#ffffff" class=""></path>
+                        <path d="M116.71 105.29c-2.07 3.26-5.34 7.25-9.45 8.24-7.2 1.74-18.25.06-32-12.76l-.17-.15C63 89.41 59.86 80.08 60.62 72.68c.42-4.2 3.92-8 6.87-10.48a3.93 3.93 0 0 1 6.15 1.41l4.45 10a3.91 3.91 0 0 1-.49 4l-2.25 2.92a3.87 3.87 0 0 0-.35 4.32c1.26 2.21 4.28 5.46 7.63 8.47 3.76 3.4 7.93 6.51 10.57 7.57a3.82 3.82 0 0 0 4.19-.88l2.61-2.63a4 4 0 0 1 3.9-1l10.57 3a4 4 0 0 1 2.24 5.91z" fill="#ffffff" data-original="#ffffff" class=""></path>
+                    </g>
+                </g>
+            </g>
+        </svg>
     </footer>
 </body>
 </html>
\ No newline at end of file