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

update

Browse Source
This commit is contained in:
lizandrogd
2023-08-07 10:54:36 -05:00
parent f4022720ad
commit 5872949870
6 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
img/bg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

img/p1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 KiB

img/p2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 703 KiB

img/p3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 KiB

img/p4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 648 KiB

index.html
+58 -49
View File
@@ -5,20 +5,20 @@
<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>
<title>ProsApp</title>
</head>
<body>
<body class="bg-[url('./img/bg.jpg')] bg-cover bg-center">
<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="hidden lg:flex lg:items-center lg:justify-between py-3 px-10 max-w-7xl mx-auto " >
<div class="w-48">
<img src="./img/logo_prosapp.png" alt="logo">
</div>
<nav>
<ul class="flex items-center [&>li]:inline-block [&>li]:mx-6 [&>li]:cursor-pointer text-gray-400">
<ul class="flex items-center [&>li]:inline-block [&>li]:mx-6 [&>li]:cursor-pointer text-gray-600">
<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>
<li class="font-semibold px-3 py-2 bg-[#1A8BE4] rounded-lg text-white"><a target="_blank" href="https://app.prosapp.co">Prosapp WEB</a></li>
</ul>
</nav>
</div>
@@ -47,17 +47,17 @@
<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>
<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 target="_blank" href="https://app.prosapp.co">Prosapp WEB</a></li>
</ul>
</div>
</header>
<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>
<section id="inicio" class="h-screen grid md:content-center pt-16 mx-auto">
<div class="md:flex justify-between w-full max-w-7xl mx-auto ">
<div class="md:pl-8 align-middle my-auto">
<h1 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">ProsApp</h1>
<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>
<p class="text-gray-600 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">
@@ -70,28 +70,29 @@
</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 class="flex items-center justify-center md:pr-8 align-middle my-auto">
<div class="rounded-full bg-gray-300 overflow-hidden max-w-2xl w-full">
<img src="./img/p1.png" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
</div>
</section>
<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">
<img src="" alt="Imagen" class="w-full h-full object-cover"/>
<div class="flex justify-between w-full max-w-7xl mx-auto ">
<div class="md:pr-8 align-middle my-auto">
<div class="rounded-full bg-gray-300 overflow-hidden max-w-lg">
<img src="./img/p2.png" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
<div class="md:pr-8">
<h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para usuarios</h2>
<div class=" items-center justify-center md:pl-8 align-middle my-auto">
<h2 class="text-gray-600 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
<p class="text-gray-600 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 lg:[&>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-600 [&>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" />
@@ -121,13 +122,13 @@
</div>
</section>
<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">
<h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para profesionales de la salud</h2>
<section id="profesionales" class=" h-screen flex justify-center w-full max-w-7xl mx-auto ">
<div class="md:flex flex-col justify-start md:justify-center md:col-span-2 lg:col-span-3 mx-4 md:mx-8 my-auto">
<h2 class="text-gray-600 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>
<p class="text-gray-600 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 lg:[&>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-600 [&>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" />
@@ -154,54 +155,62 @@
</li>
</ul>
</div>
<div class="hidden md:block bg-gray-300">
<div class="flex items-center justify-center md:pr-8 align-middle my-auto">
<div class="rounded-full bg-gray-300 overflow-hidden max-w-2xl w-full">
<img src="./img/p4.png" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
</section>
<section class="h-screen grid md:content-center overflow-auto mb-6 md:mb-0">
<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 class="md:flex justify-between w-full max-w-7xl mx-auto my-auto">
<div class="flex items-center justify-center md:pr-8">
<div class="rounded-2xl overflow-hidden">
<img src="./img/p3.png" alt="Imagen" class="w-full h-full object-cover"/>
</div>
</div>
<div class="md:pr-8">
<h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h2>
<div class="md:pl-8 my-auto">
<h2 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h2>
<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">
<li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold bg-white my-2">
<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>
<p class="text-lg text-gray-600 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-semibold">
<li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold bg-white my-2">
<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>
<p class="text-lg text-gray-600 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-semibold">
<li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold bg-white my-2">
<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>
<p class="text-lg text-gray-600 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>
</ul>
</div>
</div>
</section>
<section class="h-screen grid md:content-center">
<section class="grid md:content-center">
<div class="grid grid-cols-1 mx-4 md:mx-0">
<div class="md:pr-8 text-center">
<h3 class="text-gray-400 font-semibold text-2xl lg:text-3xl mb-4 transition-all mb-16">
ACERCA DE PROSAPP
<h3 class="text-gray-600 font-semibold text-2xl lg:text-3xl mb-4 transition-all mb-16 ">
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 class="text-2xl rounded-2xl p-24 xl:text-4xl mb-4 transition-all shadow-md border-2 md:w-1/2 lg:w-3/4 mx-8 md:mx-auto mt-8 text-center text-white bg-[#1A8BE4]">
<p class="font-serif italic">ProsApp conecta a</p>
<p class="font-sans font-bold text-4xl mb-6">profesionales de la salud</p>
<p class="font-serif italic">altamente calificados</p>
<p class="font-sans font-bold text-4xl mb-6">con usuarios que buscan</p>
<p class="font-serif italic">servicios médicos y asesoramiento confiable.</p>
</div>
<div class="flex justify-center gap-6 mt-16">
<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"
@@ -344,9 +353,9 @@
</g>
</svg>
</div>
<div class="md:absolute md:bottom-16 w-full">
<div class="md:bottom-16 w-full">
<div class="text-center border-t-2 pt-4 mt-8 mx-8">
<h3 class="text-gray-400 font-semibold text-md lg:text-xl mb-4 transition-all" >
<h3 class="text-gray-400 text-md mb-4 transition-all" >
Desarrollado por U-site
</h3>
</div>