usite-sas-bic/prosapp_landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Felipe
2023-07-28 16:20:55 -05:00
commit 421e3da87f
4 changed files with 229 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitattributes
+2
View File
@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto
img/logo_prosapp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

img/principal-img.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 KiB

index.html
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>Document</title>
</head>
<body>
<header class="fixed top-0 bg-white w-full" x-data="{ open: false }">
<div class="hidden lg:flex lg:items-center lg:justify-between py-3 px-10" >
<div class="w-48">
<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>
</nav>
</div>
<div class="w-full lg:w-48 flex justify-between items-center">
<div class="flex lg:hidden justify-center text-center">
<h1 class="px-4">
<img src="./img/logo_prosapp.png" alt="" class="w-24 lg:w-full">
</h1>
</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">
<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" />
<path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<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>
</ul>
</div>
</header>
<section 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>
<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">
<button class="hover:bg-[#177dcd] hover:scale-105 active:bg-[#1A8BE4] font-semibold px-3 md:px-6 py-2 text-sm md:text-lg">
<svg class="w-4 md:w-6" 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=".032" y2="511.968" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00bffc"></stop><stop offset="1" stop-color="#0073f6"></stop></linearGradient><path fill="url(#a)" d="M408.525.032H103.411C46.266.032 0 46.298 0 103.443v305.178c0 57.081 46.266 103.347 103.411 103.347h305.178C465.67 511.968 512 465.702 512 408.557V103.443C511.936 46.298 465.67.032 408.525.032z" data-original="url(#a)" class=""></path><g fill="#fff"><path d="m253.792 117.649 10.367-17.918c6.399-11.199 20.669-14.974 31.868-8.575s14.974 20.669 8.575 31.868L204.71 295.931h72.247c23.421 0 36.539 27.517 26.365 46.586H91.509c-12.926 0-23.293-10.367-23.293-23.293s10.367-23.293 23.293-23.293h59.385l76.023-131.76-23.741-41.211c-6.399-11.199-2.624-25.341 8.575-31.868 11.199-6.399 25.341-2.624 31.868 8.575zM163.948 366.514l-22.397 38.843c-6.399 11.199-20.669 14.974-31.868 8.575s-14.974-20.669-8.575-31.868l16.638-28.796c18.813-5.823 34.107-1.344 46.202 13.246z" fill="#ffffff" data-original="#ffffff" class=""></path><path d="M356.819 296.059h60.6c12.926 0 23.293 10.367 23.293 23.293s-10.367 23.293-23.293 23.293h-33.66l22.717 39.419c6.399 11.199 2.624 25.341-8.575 31.868-11.199 6.399-25.341 2.624-31.868-8.575-38.267-66.36-67-116.017-86.069-149.101-19.518-33.66-5.567-67.448 8.191-78.902 15.295 26.237 38.14 65.848 68.664 118.705z" fill="#ffffff" data-original="#ffffff"></path></g></g></svg>
App store
</button>
<button class="hover:bg-[#177dcd] hover:scale-105 active:bg-[#1A8BE4] font-semibold px-3 md:px-6 py-2 text-sm md:text-lg">
<svg class="w-5 md:w-7" 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 100 100" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><linearGradient id="a" x1="-2.254" x2="35.739" y1="68.986" y2="30.992" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00e2ff"></stop><stop offset="1" stop-color="#00c5ff"></stop></linearGradient><path fill="#ffce00" d="m81.939 44.002-13.548-7.825-13.87 13.87L68.39 63.916l13.595-7.851c2.12-1.288 3.385-3.538 3.385-6.018s-1.266-4.73-3.431-6.045z" data-original="#ffce00"></path><path fill="url(#a)" d="M54.521 50.047 16.742 11.996a7.13 7.13 0 0 0-2.112 5.068v65.85c0 1.971.798 3.754 2.112 5.069z" data-original="url(#a)" class=""></path><path fill="#00f076" d="m54.521 50.047 13.87-13.87.022-.022-18.584-10.7-24.498-14.398c-2.206-1.361-4.881-1.408-7.134-.141-.516.328-.986.657-1.455 1.079z" data-original="#00f076"></path><path fill="#f63448" d="M16.742 87.982c.469.422.939.751 1.455 1.079 1.126.61 2.3.939 3.473.939 1.267 0 2.487-.375 3.614-1.032l24.544-14.329 18.584-10.7-.022-.022-13.869-13.87z" data-original="#f63448"></path></g></svg>
Play store
</button>
</div>
</div>
<div class="flex items-center justify-center md:pr-8">
<div class="rounded-full bg-gray-300 overflow-hidden">
<img src="" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
</div>
</section>
<section 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">
<img src="" alt="Imagen" class="w-full h-full object-cover"/>
</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>
<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">
<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" />
</svg>
Agenda sin complicaciones
</li>
<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" />
</svg>
Variedad de servicios disponibles
</li>
<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" />
</svg>
Servicio en casa
</li>
<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" />
</svg>
Servicios profesionales
</li>
</ul>
</div>
</div>
</section>
<section 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>
<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">
<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" />
</svg>
Adaptabilidad de la carga de trabajo
</li>
<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" />
</svg>
Flexibilidad en horarios y ubicaciones de trabajo
</li>
<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" />
</svg>
Mayor alcance y visibilidad
</li>
<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" />
</svg>
Comunicación mejorada con tus pacientes
</li>
</ul>
</div>
<div class="hidden md:block bg-gray-300">
</div>
</section>
<section 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">
<img src="" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
<div class="md:pr-8">
<h1 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h1>
<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
</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
</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
</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>
</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">
</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>
</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>
</footer>
</body>
</html>