From dacc6c2ba0fbfd035a175aeeebee67d7f6baeb4d Mon Sep 17 00:00:00 2001
From: Rallenson
Date: Sat, 14 Jan 2023 23:59:57 -0300
Subject: [PATCH] feat(footer):footerBottom desktop finalizado
---
.../src/components/assets/icons/Boleto.svg | 9 +++
.../src/components/assets/icons/Diners.svg | 9 +++
desafio-5/src/components/assets/icons/Elo.svg | 9 +++
.../src/components/assets/icons/Hiper.svg | 9 +++
.../src/components/assets/icons/Master.svg | 9 +++
.../src/components/assets/icons/Pagseguro.svg | 9 +++
.../src/components/assets/icons/Visa.svg | 9 +++
.../components/assets/icons/vtex-pci-200.svg | 9 +++
.../src/components/modules/footer.module.scss | 78 ++++++++++++++-----
.../scripts/células/FooterBottom.tsx | 5 +-
.../components/scripts/células/FooterTop.tsx | 6 +-
desafio-5/src/components/scripts/footer.tsx | 3 +-
.../components/scripts/moleculas/Authors.tsx | 4 +-
.../scripts/moleculas/PaymentsMethod.tsx | 28 +++++--
14 files changed, 162 insertions(+), 34 deletions(-)
create mode 100644 desafio-5/src/components/assets/icons/Boleto.svg
create mode 100644 desafio-5/src/components/assets/icons/Diners.svg
create mode 100644 desafio-5/src/components/assets/icons/Elo.svg
create mode 100644 desafio-5/src/components/assets/icons/Hiper.svg
create mode 100644 desafio-5/src/components/assets/icons/Master.svg
create mode 100644 desafio-5/src/components/assets/icons/Pagseguro.svg
create mode 100644 desafio-5/src/components/assets/icons/Visa.svg
create mode 100644 desafio-5/src/components/assets/icons/vtex-pci-200.svg
diff --git a/desafio-5/src/components/assets/icons/Boleto.svg b/desafio-5/src/components/assets/icons/Boleto.svg
new file mode 100644
index 0000000..c88b339
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Boleto.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Diners.svg b/desafio-5/src/components/assets/icons/Diners.svg
new file mode 100644
index 0000000..3c46e2b
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Diners.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Elo.svg b/desafio-5/src/components/assets/icons/Elo.svg
new file mode 100644
index 0000000..2044f5e
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Elo.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Hiper.svg b/desafio-5/src/components/assets/icons/Hiper.svg
new file mode 100644
index 0000000..4ca33b2
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Hiper.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Master.svg b/desafio-5/src/components/assets/icons/Master.svg
new file mode 100644
index 0000000..ce0592d
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Master.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Pagseguro.svg b/desafio-5/src/components/assets/icons/Pagseguro.svg
new file mode 100644
index 0000000..5f54700
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Pagseguro.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Visa.svg b/desafio-5/src/components/assets/icons/Visa.svg
new file mode 100644
index 0000000..789568e
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Visa.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/vtex-pci-200.svg b/desafio-5/src/components/assets/icons/vtex-pci-200.svg
new file mode 100644
index 0000000..6c91706
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/vtex-pci-200.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/modules/footer.module.scss b/desafio-5/src/components/modules/footer.module.scss
index 411a462..fd7e6b0 100644
--- a/desafio-5/src/components/modules/footer.module.scss
+++ b/desafio-5/src/components/modules/footer.module.scss
@@ -70,45 +70,85 @@
}
}
}
+ &_Top{
+ width: 100%;
+ }
&_bottom{
background: $-black;
width: 100%;
+ height: 100%;
display: flex;
justify-content: space-between;
+ align-items: center;
padding: 15px 100px;
- height: 64px;
p{
color: $-white;
- width: 100%;
+ font-family: 'Roboto',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 12px;
+ text-transform: capitalize;
+ width: 234px;
+ }
+
+ &__Payments{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 36.852%;
+ min-height: 100%;
+ fieldset{
+
+ width: 100%;
+ min-width: 83.42%;
+ display: flex;
+ align-items: center;
+ min-height: 20px;
+ gap: 12px;
+ padding-right: 12px;
+ border: none;
+ border-right: 1px solid $-gray-300;
+
+ &[datatype=Payments]{
+ border: none;
+ width: 100%;
+ padding-right: 0;
+ min-width: 16%;
+ min-height: 34px;
+ }
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
}
&_Authors{
display: flex;
align-items: center;
gap: 12px;
- width: 100%;
+ width: 20.926%;
+ height: 2.965vh;
p{
- font-family: 'Roboto',sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 10px;
- line-height: 12px;
- text-transform: capitalize;
width: auto;
+ white-space: nowrap;
}
a{
width: 100%;
- background: pink;
- max-width: 8.89%;
- min-width: 5.188%;
- img{
- &[datatype=VtexLogo]{
- width: 100%;
- }
+ height: 100%;
+ width: 100%;
+ &[datatype=LinkVtex]{
+ width: 19.47%;
+ }
- &[datatype=M3]{
- width: 100%;
- }
+ &[datatype=LinkM3]{
+ width: 12.39%;
+ }
+
+ img{
+ width: 100%;
+ height: 100%;
}
}
}
diff --git a/desafio-5/src/components/scripts/células/FooterBottom.tsx b/desafio-5/src/components/scripts/células/FooterBottom.tsx
index 79e6064..2c1bca6 100644
--- a/desafio-5/src/components/scripts/células/FooterBottom.tsx
+++ b/desafio-5/src/components/scripts/células/FooterBottom.tsx
@@ -1,10 +1,12 @@
import React from "react";
import { Author } from "../moleculas/Authors";
+import { PaymentsMethod } from "../moleculas/PaymentsMethod";
interface Calsses {
Dadclass?: string;
Authorclass?: string;
wraaperclass?: string;
+ Paymentsclass?: string;
}
interface TopFooterProps extends Calsses {
@@ -15,7 +17,7 @@ interface TopFooteratrr extends TopFooterProps {
}
export const BottomFooter: React.FC = (
- {Dadclass,wraaperclass,Authorclass}
+ {Dadclass,wraaperclass,Authorclass,Paymentsclass}
) => {
@@ -25,6 +27,7 @@ export const BottomFooter: React.FC = (
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor
+
)
diff --git a/desafio-5/src/components/scripts/células/FooterTop.tsx b/desafio-5/src/components/scripts/células/FooterTop.tsx
index 3eb41fc..042f922 100644
--- a/desafio-5/src/components/scripts/células/FooterTop.tsx
+++ b/desafio-5/src/components/scripts/células/FooterTop.tsx
@@ -1,7 +1,7 @@
import React from "react";
interface Calsses {
- wraaperclass?: string;
+ DadClass?: string;
}
interface TopFooterProps extends Calsses {
@@ -12,12 +12,12 @@ interface TopFooteratrr extends TopFooterProps {
}
export const TopFooter: React.FC = (
- {wraaperclass}
+ {DadClass}
) => {
return(
-
+
Footer top
)
diff --git a/desafio-5/src/components/scripts/footer.tsx b/desafio-5/src/components/scripts/footer.tsx
index 9911947..926c7a2 100644
--- a/desafio-5/src/components/scripts/footer.tsx
+++ b/desafio-5/src/components/scripts/footer.tsx
@@ -14,8 +14,9 @@ const Footer = () =>{
FormClass={FooterStyles.footer_wrapper_Form__Newsletter}
Errorclass={FooterStyles.hiden}
/>
-
+
diff --git a/desafio-5/src/components/scripts/moleculas/Authors.tsx b/desafio-5/src/components/scripts/moleculas/Authors.tsx
index 19358fb..72664ee 100644
--- a/desafio-5/src/components/scripts/moleculas/Authors.tsx
+++ b/desafio-5/src/components/scripts/moleculas/Authors.tsx
@@ -16,11 +16,11 @@ export const Author: React.FC = (
return(
Powered by
-
+
Developed by
-
+
diff --git a/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx b/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx
index 9df32a4..1c6ed70 100644
--- a/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx
+++ b/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx
@@ -1,4 +1,12 @@
import React from "react";
+import Master from "../../assets/icons/Master.svg"
+import Visa from "../../assets/icons/Visa.svg"
+import AmericanExpress from "../../assets/icons/Diners.svg"
+import Elo from "../../assets/icons/Elo.svg"
+import HiperCard from "../../assets/icons/Hiper.svg"
+import Pagseguro from "../../assets/icons/Pagseguro.svg"
+import Boleto from "../../assets/icons/Boleto.svg"
+import Vtex from "../../assets/icons/vtex-pci-200.svg"
interface Calsses {
Paymentsclass?: string;
@@ -16,14 +24,18 @@ export const PaymentsMethod: React.FC = (
) => {
return(
)
};
\ No newline at end of file