+
@@ -54,12 +54,12 @@
-
Unified platform
-
A fully integrated suite of payments products
+
Unified platform
+
A fully integrated suite of payments products
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Designed for developers
+
The world’s most powerful and easy-to-use APIs
+
+
+
+
+
+
+
+
+
+
+
+
Tools for every stack
+
+
+
+
+
+
+
+
+
Prebuilt integrations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Designed for developers
+
The world’s most powerful and easy-to-use APIs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Fastest-improving platform
+
+
+
+
+
+
+
+
Battle-tested reliability
+
+
+
+
+
+
+
+
Intelligent optimizations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Global Scale
+
The backbone for internet business
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e8a0a95..28ecce7 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -11,6 +11,12 @@
display: inline-flex;
}
+.o-button--none{
+ background: none;
+ padding: 0;
+ font-family: "Helvetica Neue Medium";
+}
+
.o-upTitle{
font-size: 18px;
line-height: 34px;
@@ -37,7 +43,8 @@
color: #393939;
}
-.o-title--white{
+.o-title--white,
+.o-subtitle--white{
color: #FFFFFF;
}
@@ -48,6 +55,18 @@
text-align: left;
}
+.o-bar{
+ width: 2px;
+ position: absolute;
+ height: 24px;
+ background: #01D4FF;
+ margin-left: -15px;
+}
+
+.o-bar--purple{
+ background: #635CFF;
+}
+
/* Selectores */
mat-icon{
@@ -76,6 +95,21 @@ mat-icon{
height: 535px;
clip-path: polygon(0 0, 100% 0%, 100% 23%, 0% 80%);
}
+.c-background__clip-blue{
+ height: 256px;
+ background: #092540;
+ margin: 0;
+ clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+}
+.c-background__clip-blue--reverse{
+ clip-path: polygon(0 0, 0% 100%, 100% 0%);
+}
+.c-background__clip-white{
+ height: 256px;
+ background: #FFFFFF;
+ margin: 0;
+ clip-path: polygon(0 0, 0% 100%, 100% 0%);
+}
.c-contenedor{
position: absolute;
top: 10%;
@@ -160,7 +194,7 @@ mat-icon{
}
#mobile{
position: absolute;
- top: 10%;
+ top: 1%;
right: 235px;
}
}
@@ -177,7 +211,6 @@ mat-icon{
}
}
.c-sections__two{
- margin-top: 80px;
margin-bottom: 128px;
#zoom{
height: 20px;
@@ -186,13 +219,97 @@ mat-icon{
}
.c-infoOne{
- margin-top: 80px;
+ padding-top: 80px;
+ background: linear-gradient(180deg, #FBFCFE 0%, #DDE0E5 84.45%), #F6F9FC;
.c-infoOne__button{
font-family: "Helvetica Neue Medium";
width: auto;
- margin: 30px 0px;
color: #FFFFFF;
background-color: #635CFF;
}
}
+.c-images{
+ margin-bottom: 80px;
+ .c-images__one{
+ text-align: center;
+ img:first-child {
+ margin-bottom: 50px;
+ margin-top: 180px;
+ }
+ }
+ .c-images__two{
+ display: inline-flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ img:first-child {
+ margin-right: 50px;
+ }
+ img:last-child {
+ margin-top: 50px;
+ width: 100%;
+ }
+ }
+ img{
+ object-fit: contain;
+ }
+}
+.c-infoTwo{
+ background-color: #092540;
+ .c-infoTwo__button{
+ background-color: #01D4FF;
+ color: #092540;
+ }
+ .c-infoTwo__infoDown{
+ color: #FFFFFF;
+ }
+ .c-infoTwo__image{
+ align-self: center;
+ margin-top: 150px;
+ }
+}
+
+.c-infoThree{
+ margin-top: -1px;
+}
+
+.c-infoFour{
+ background-color: #092540;
+ margin-top: -1px;
+ .c-infoFour__c-img{
+ position: absolute;
+ margin-left: 27px;
+ padding: 0;
+ .c-infoFour__img{
+ width: 300px;
+ height: 800px;
+ float: right;
+ }
+ }
+}
+
+/* Utilidades */
+
+.u-mb__32{
+ margin-bottom: 32px;
+}
+
+.u-mb-24{
+ margin-bottom: 24px;
+}
+
+.u-mb-37{
+ margin-bottom: 37px;
+}
+
+.u-pb-80{
+ padding-bottom: 80px;
+}
+
+.u-mt__80{
+ margin-top: 80px;
+}
+
+.u-inline-flex{
+ display: inline-flex;
+}
\ No newline at end of file
diff --git a/src/assets/images/code.png b/src/assets/images/code.png
new file mode 100644
index 0000000..6b5d8dd
Binary files /dev/null and b/src/assets/images/code.png differ
diff --git a/src/assets/images/icono1.png b/src/assets/images/icono1.png
new file mode 100644
index 0000000..8c2b667
Binary files /dev/null and b/src/assets/images/icono1.png differ
diff --git a/src/assets/images/icono2.png b/src/assets/images/icono2.png
new file mode 100644
index 0000000..b5b6a0e
Binary files /dev/null and b/src/assets/images/icono2.png differ
diff --git a/src/assets/images/icono3.png b/src/assets/images/icono3.png
new file mode 100644
index 0000000..ed461fc
Binary files /dev/null and b/src/assets/images/icono3.png differ
diff --git a/src/assets/images/icono4.png b/src/assets/images/icono4.png
new file mode 100644
index 0000000..52f70c8
Binary files /dev/null and b/src/assets/images/icono4.png differ
diff --git a/src/assets/images/icono5.png b/src/assets/images/icono5.png
new file mode 100644
index 0000000..0749ab7
Binary files /dev/null and b/src/assets/images/icono5.png differ
diff --git a/src/assets/images/producto1.png b/src/assets/images/producto1.png
new file mode 100644
index 0000000..8680387
Binary files /dev/null and b/src/assets/images/producto1.png differ
diff --git a/src/assets/images/producto2.png b/src/assets/images/producto2.png
new file mode 100644
index 0000000..ce3261a
Binary files /dev/null and b/src/assets/images/producto2.png differ
diff --git a/src/assets/images/producto3.png b/src/assets/images/producto3.png
new file mode 100644
index 0000000..181f831
Binary files /dev/null and b/src/assets/images/producto3.png differ
diff --git a/src/assets/images/producto4.png b/src/assets/images/producto4.png
new file mode 100644
index 0000000..4b41ff9
Binary files /dev/null and b/src/assets/images/producto4.png differ
diff --git a/src/assets/images/producto5.png b/src/assets/images/producto5.png
new file mode 100644
index 0000000..ecdf365
Binary files /dev/null and b/src/assets/images/producto5.png differ
diff --git a/src/assets/images/world.png b/src/assets/images/world.png
new file mode 100644
index 0000000..e7a30b7
Binary files /dev/null and b/src/assets/images/world.png differ
- 
+ 
+ 
+