+
+
+
+
+
+
+
Ofertas
+ Não perca tempo,
+ garanta agora!
+
+
+
+ {`${hourString}:${minuteString}:${secondString}`}
+
+
+
+ );
+};
+
+export default TwoCountdown;
+
+TwoCountdown.schema = {
+ title: "Countdown-2 Academy",
+ type: "object",
+ properties: {
+ endDate: {
+ title: "Data final de countdown",
+ type: "string",
+ default: "31/01/2023/12:30"
+ }
+ }
+};
diff --git a/custom/store/interfaces.json b/custom/store/interfaces.json
index 5b6e52f..f312d84 100644
--- a/custom/store/interfaces.json
+++ b/custom/store/interfaces.json
@@ -27,5 +27,9 @@
"countdown-academy": {
"component": "Countdown"
+ },
+
+ "countdown-academy-2": {
+ "component": "TwoCountdown"
}
}
diff --git a/storefront/assets/imgs/textura.jpg b/storefront/assets/imgs/textura.jpg
new file mode 100644
index 0000000..261682d
Binary files /dev/null and b/storefront/assets/imgs/textura.jpg differ
diff --git a/storefront/store/blocks/pages/home/home.jsonc b/storefront/store/blocks/pages/home/home.jsonc
index 193296d..6e3c93e 100644
--- a/storefront/store/blocks/pages/home/home.jsonc
+++ b/storefront/store/blocks/pages/home/home.jsonc
@@ -5,7 +5,8 @@
"flex-layout.row#deals",
"__fold__",
"flex-layout.row#faixa-de-imagens",
- "countdown-academy",
+ //"countdown-academy",
+ "countdown-academy-2",
"rich-text#m3-shelf-title",
"flex-layout.row#m3-shelf",
"info-card#m3-middle-card",
@@ -18,6 +19,13 @@
// }
},
+ "countdown-academy-2": {
+ "props" : {
+ // "blockClass": "countdown-academy-teste",
+ "endDate": "31/01/2023/12:30"
+ }
+ },
+
"countdown-academy": {
"props" : {
"endDate": "31/01/2023/12:30"
diff --git a/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss b/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss
new file mode 100644
index 0000000..82dddb7
--- /dev/null
+++ b/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss
@@ -0,0 +1,79 @@
+
+.CountdownWrapper {
+ background-image: url(assets/imgs/textura.jpg);
+ background-repeat: no-repeat;
+ background-size: contain;
+
+ background-color: #c70042;
+ width: 414px;
+ height: 414px;
+ border-radius: 30px;
+ background-blend-mode: multiply;
+
+ position: relative;
+
+ margin: 30px auto 0 auto;
+}
+
+.CountdownTitle {
+ color: white;
+ text-align: center;
+ padding-top: 20px;
+}
+
+.CountdownHeading1 {
+ margin: 0;
+ font-size: 40px;
+ line-height: 48px;
+ letter-spacing: -0,05em;
+}
+
+.CountdownHeading3 {
+ margin: 0;
+ font-size: 18px;
+ line-height: 20px;
+ letter-spacing: -0,05em;
+ font-weight: 300;
+}
+
+.CountdownHeading2 {
+ margin: 0;
+ font-size: 26px;
+ line-height: 30px;
+ letter-spacing: -0,05em;
+}
+
+.CountdownText {
+ position: absolute;
+
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ font-size: 24px;
+ font-weight: 200;
+ letter-spacing: 0.1em;
+ color: white;
+
+ width: 170px;
+ height: 170px;
+ border-radius: 50%;
+
+ border: 2px solid #ffffff15;
+
+ display: grid;
+ place-items: center;
+
+ margin-top: 60px;
+}
+
+.CountdownBadge {
+ position: absolute;
+ top: 30px;
+ right: 0;
+
+ background-color: rgb(1, 185, 185);
+ border-radius: 80px 0 0 80px;
+
+ padding: 10px 10px 6px 34px;
+}