From fe2e1216b570367f38f1d7a7c4b1532ded20fd2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ail=C3=A9n=20Grimaldi?=
 <63558201+ail3ngrimaldi@users.noreply.github.com>
Date: Sat, 11 Nov 2023 07:25:07 -0300
Subject: [PATCH] Fix styles (#90)

Fix style according to partners' reviews. Change in

Co-authored-by: ailen grimaldi <ailenrgrimaldi@ailens-MacBook-Air.local>
---
 _includes/in_progress.svg | 25 ++-------------------
 services.liquid           |  2 +-
 usecases.liquid           | 47 ++++++++++++++++++++++-----------------
 3 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/_includes/in_progress.svg b/_includes/in_progress.svg
index bf51579..9c0b7b6 100644
--- a/_includes/in_progress.svg
+++ b/_includes/in_progress.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" id="Capa_1" x="0px" y="0px"
 	 viewBox="0 0 619.92 467.43" style="enable-background:new 0 0 619.92 467.43;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#10352B;}
@@ -13,28 +12,8 @@
 	.st7{fill:#F3F5F4;}
 	.st8{fill:#F2E770;}
 	.st9{fill:#FFFFFF;}
-	.st10{fill:#F2D54C;}
-	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:#F2E770;}
-	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:#C8AFE7;}
-	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#915FD0;}
-	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#FD6085;}
-	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#DECFF1;}
-	.st16{fill:#00A8E3;}
-	.st17{fill:#59A57C;}
-	.st18{fill:#7ED4A7;}
-	.st19{fill:#EDDFCE;}
-	.st20{fill:#DBCBB9;}
-	.st21{fill:#FDCE5E;}
-	.st22{fill-rule:evenodd;clip-rule:evenodd;fill:#A8E6A5;}
-	.st23{fill-rule:evenodd;clip-rule:evenodd;fill:#51CB59;}
-	.st24{fill-rule:evenodd;clip-rule:evenodd;fill:#EBFDFF;}
-	.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#7DB8B5;}
-	.st26{fill-rule:evenodd;clip-rule:evenodd;fill:#9CDAD7;}
-	.st27{fill-rule:evenodd;clip-rule:evenodd;fill:#007976;}
-	.st28{fill-rule:evenodd;clip-rule:evenodd;fill:#2C4B5F;}
-	.st29{fill-rule:evenodd;clip-rule:evenodd;fill:#182F3B;}
 </style>
-<path class="st2" d="M599.17,286.86l-19.1,6.04c-0.64,0.2-1.23,0.46-1.81,0.76c-5.75-9.89-13.13-18.5-21.67-25.6
+<path class="st1" d="M599.17,286.86l-19.1,6.04c-0.64,0.2-1.23,0.46-1.81,0.76c-5.75-9.89-13.13-18.5-21.67-25.6
 	c0.4-0.53,0.77-1.08,1.08-1.68l9.15-17.82c2.85-5.54,0.65-12.37-4.89-15.22l-17.82-9.15c-5.54-2.85-12.37-0.65-15.22,4.89
 	l-9.15,17.82c-0.31,0.6-0.54,1.22-0.73,1.85c-10.46-2.73-21.44-3.73-32.53-2.77c-0.09-0.64-0.22-1.28-0.42-1.91l-6.04-19.1
 	c-1.88-5.94-8.24-9.25-14.19-7.37l-19.1,6.04c-5.94,1.88-9.25,8.25-7.37,14.19l6.04,19.1c0.2,0.64,0.46,1.23,0.76,1.81
diff --git a/services.liquid b/services.liquid
index 30928d6..89e6e50 100644
--- a/services.liquid
+++ b/services.liquid
@@ -22,7 +22,7 @@ data:
 	h1, h2 { font-weight: 500; line-heigh: 100%; }
 	h3 { font-weight: 400; line-height: 120%; }
 	
-	#services { max-height: 80vh; }
+	#services { max-height: 90vh; }
 	#services article { flex-direction: row; flex-wrap: wrap; }
 	#services div { display: flex; flex-direction: column; max-width: 650px; justify-content: center;}
 
diff --git a/usecases.liquid b/usecases.liquid
index 9fe4aa4..079ae71 100644
--- a/usecases.liquid
+++ b/usecases.liquid
@@ -20,50 +20,55 @@ data:
 	button { margin: 1em 0; font-weight: 400; }
 	h1, h2 { font-weight: 500; line-heigh: 100%; }
 	h3 { font-weight: 400; line-height: 120%; }
+
 	.text-section a, article> h3 a { font-size: var(--font-size-subtitle); text-decoration: underline; }
-	
-	#use-cases figure.lavender-arrow svg { width: clamp(200px, 25vw, 300px);  }
 	.text-section { max-width: 800px; }
 	figure.logo svg { width: clamp(250px, 35vw, 800px); }
+	
+	#use-cases figure.lavender-arrow svg { width: clamp(200px, 25vw, 300px); }
 
 	#cubo { justify-content: flex-end; }
 	figure.hand svg { width: clamp(250px, 35vw, 400px); }
 	.hand { position: absolute; left: 0; }
 
+	figure.cube svg, figure.wallet svg  {
+    	width: clamp(200px, 15vw, 300px);
+	}
+
 	#cubo-benefits { max-height: fit-content; flex-direction: column; }
 	#cubo-benefits ul { list-style: none; display: flex; gap: 2em; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 2em; }
 	#cubo-benefits ul li { display: flex; flex-direction: column; flex: 30%; height: 300px; padding: 1.5em; text-align: center; align-content: center; gap: 1em; border-radius: 5px; }
 	i { font-style: normal; font-size: 2em; }
 
-	figure.cube svg {
-    	width: clamp(200px, 15vw, 300px);
-		margin-top: 1em;
-	}
-
 	.cta > article, #cubo > article {
 		flex-direction: column;
 		align-items: center;
 		max-width: 700px;
 	}
 	.cta > article { max-width: 1000px; }
-	
+
+	#bloque .text-section {  min-width: 100px; max-width: 700px; width: 100%; }
 	.split-title {
 		display: inline-block;
 		position: relative;
 	}
-
 	.title-bg {
 		color: var(--clr-green-lighter);
 		padding: 5px 0;
 		padding-left: 5px;
 		border-radius: 5px;
 	}
-
-	figure.develop svg { width: clamp(200px, 15vw, 400px); }
+	figure.develop svg { width: clamp(250px, 15vw, 400px); }
+  	figure.logo.develop { display: flex; justify-content: center; }
+	#bloque .text-section h3.end { margin-top: auto; }
 
 	#bloque-benefits li { display: flex; align-items: center; margin-bottom: 1em; }
 	#bloque-benefits li img { margin-right: 10px; }
-
+	.wallet {  
+		position: relative;
+  		top: 0%;
+  		transform: translateY(25%); 
+	}
 
 	@media (max-width: 1250px) {
 		#cubo > article { justify-content: flex-start; }
@@ -74,8 +79,8 @@ data:
 		article { flex-direction: column; margin: 2em 1em;}
 		#use-cases { overflow: hidden; flex-direction: column-reverse; }
 		.text-container > * { margin: .5em 0; }
-		.cube { align-self: center; }
-		figure, button { align-self: center; }
+		figure, button, .cube { align-self: center; }
+		.wallet { transform: translateY(0%); }
 	}
 
 </style>
@@ -144,7 +149,7 @@ data:
 	</article>
 </section>
 
-<section class="light-green-bg">
+<section id="bloque" class="light-green-bg">
 	<article class="animated">
 	<div class="text-section">
 		<h2 class="split-title">
@@ -152,21 +157,21 @@ data:
 		</h2>
 		<h3>Bloque te permitirá <strong>crear tu propia tienda online e importar tu catálogo desde redes sociales</strong> como Instagram, con todos tus productos de manera sencilla y rápida.</h3>
 		<button>Marketplace descentralizado
-		<br>Proximamente</button>
+		<br>Próximamente</button>
 	</div>
 	<div class="text-section">
 		<figure class="logo develop">
 				{% include "in_progress.svg" %}
 		</figure>
-		<h3><strong>Nuestra plataforma genera trazabilidad en los procesos de venta</strong>, para que sepas exactamente de dónde viene cada producto.
+		<h3 class="end"><strong>Nuestra plataforma genera trazabilidad en los procesos de venta</strong>, para que sepas exactamente de dónde viene cada producto.
 		</h3>
 	</div>
 	</article>
 </section>
 
-<section class="white-bg">
+<section class="white-bg dark-olive-text">
 	<article class="animated">		
-		<figure class="logo cube">
+		<figure class="logo wallet">
 				{% include "wallet.svg" %}
 		</figure>
 	<div class="text-section">
@@ -186,7 +191,7 @@ data:
 <section class="cta light-lavender-bg">
 	<article class="animated dark-olive-text">
 	<h3 class="center">Asi, ayudamos a los negocios a reducir costos, optimizar la eficiencia operativa y potenciar sus ingresos.</h3>
-		<h2>¡Únete a nosotros!</h2>
-		<button class="dark-olive-text" type="button" disabled><a href="https://forms.gle/hSjzyETwuGMadsaU8">Crea tu tienda online</a></button>
+		<h2 class="center">¡Únete a nosotros!</h2>
+		<button class="dark-olive-text" type="button"><a href="https://forms.gle/hSjzyETwuGMadsaU8">Crea tu tienda online</a></button>
 	</article>
 </section>
\ No newline at end of file