diff --git a/custom/react/components/Countdown/assets/box.svg b/custom/react/components/Countdown/assets/box.svg
new file mode 100644
index 0000000..9eb9c2f
--- /dev/null
+++ b/custom/react/components/Countdown/assets/box.svg
@@ -0,0 +1,3 @@
+
diff --git a/custom/react/components/Countdown/index.tsx b/custom/react/components/Countdown/index.tsx
index b67bc19..fd0a45b 100644
--- a/custom/react/components/Countdown/index.tsx
+++ b/custom/react/components/Countdown/index.tsx
@@ -1,4 +1,7 @@
import React, { useState, useEffect } from "react";
+// import styles from "./styles.css";
+import clock from "./assets/box.svg";
+import { useCssHandles } from "vtex.css-handles";
interface CountdownProps {
//formato: dd/mm/yyyy/hh:mm
@@ -35,7 +38,7 @@ const Countdown = ({ endDate }: CountdownProps) => {
difference = difference - minutes * 1000 * 60;
const seconds = Math.floor(difference / 1000);
- if (hours <= 0 && minutes <= 0 && seconds <= 0) {
+ if (hours <= 0) {
setTime({ hour: 0, minute: 0, second: 0 });
} else {
setTime({ hour: hours, minute: minutes, second: seconds });
@@ -50,7 +53,73 @@ const Countdown = ({ endDate }: CountdownProps) => {
const minuteString = time.minute.toString().padStart(2, "0");
const secondString = time.second.toString().padStart(2, "0");
- return
{`${hourString}:${minuteString}:${secondString}`}
;
+ const CSS__HANDLES = [
+ "CountdownWrapper",
+ "CountdownBadge",
+ "CountdownTitle",
+ "CountdownText",
+ "CountdownBadgeClock",
+ "CountdownTitleHeading1",
+ "CountdownTitleHeading2",
+ "CountdownTitleHeading3",
+ ];
+
+ const handles = useCssHandles(CSS__HANDLES);
+
+ return (
+ //
+ //
+ //
+ //
+ //
+ //
ofertas
+ //
+ // Não perca tempo,
+ //
+ // garanta agora
+ //
+ //
+ // {`${hourString}:${minuteString}:${secondString}`}
+ //
+ //
+
+
+
+
+
+
ofertas
+
+ Não perca tempo,
+
+
+ garanta agora
+
+
+
+ {`${hourString}:${minuteString}:${secondString}`}
+
+
+ );
};
export default Countdown;
+
+Countdown.schema = {
+ title: "Countdown Academy",
+ type: "object",
+ properties: {
+ endDate: {
+ title: "Data final de countdown",
+ type: "string",
+ default: "20/01/2023/00:00",
+ },
+ },
+};
diff --git a/custom/react/components/Countdown/styles.css b/custom/react/components/Countdown/styles.css
new file mode 100644
index 0000000..6b5d0c1
--- /dev/null
+++ b/custom/react/components/Countdown/styles.css
@@ -0,0 +1,57 @@
+.CountdownWrapper{
+ background-image: linear-gradient(to top, #4e1d52 0%, #7b049f 100%);
+ width: 414px;
+ height: 463px;
+ border-radius: 30px;
+ position: relative;
+}
+
+.CountdownTitle{
+ color: white;
+ text-align: center;
+ padding-top: 40px;
+}
+
+.CountdownTitleHeading1{
+ margin: 0;
+ font-size: 40px;
+ line-height: 48px;
+ letter-spacing: -0.05em;
+}
+.CountdownTitleHeading3{
+ margin: 0;
+ font-size: 18px;
+ line-height: 20px;
+ letter-spacing: -0.05em;
+ font-weight: 300;
+}
+.CountdownTitleHeading2{
+ margin: 0;
+ font-size: 26px;
+ line-height: 20px;
+ 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 #ffffff10;
+ display: grid;
+ place-items: center;
+}
+.CountdownBadge{
+ position: absolute;
+ top: 30px;
+ right: 0;
+ background: #47bb77;
+ border-radius: 80px 0 0 80px;
+ padding: 8px 10px 6px 34px;
+}
diff --git a/storefront/store/blocks/pages/home/home.jsonc b/storefront/store/blocks/pages/home/home.jsonc
index 9f4e719..e3ce1be 100644
--- a/storefront/store/blocks/pages/home/home.jsonc
+++ b/storefront/store/blocks/pages/home/home.jsonc
@@ -17,9 +17,10 @@
// "challenge": "challenge.trade-policy-condition"
// }
},
- "countdown-academy":{
- "props":{
- "endDate": "20/01/2023/00:00"
+ "countdown-academy": {
+ "props": {
+ "endDate": "20/01/2023/00:00",
+ "blockClass": "countdown-academy-teste"
}
},
"flex-layout.row#faixa-de-imagens": {
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..9e7e53f
--- /dev/null
+++ b/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss
@@ -0,0 +1,57 @@
+.CountdownWrapper {
+ background-image: linear-gradient(to top, #4e1d52 0%, #7b049f 100%);
+ width: 414px;
+ height: 463px;
+ border-radius: 30px;
+ position: relative;
+}
+
+.CountdownTitle {
+ color: white;
+ text-align: center;
+ padding-top: 40px;
+}
+
+.CountdownTitleHeading1 {
+ margin: 0;
+ font-size: 40px;
+ line-height: 48px;
+ letter-spacing: -0.05em;
+}
+.CountdownTitleHeading3 {
+ margin: 0;
+ font-size: 18px;
+ line-height: 20px;
+ letter-spacing: -0.05em;
+ font-weight: 300;
+}
+.CountdownTitleHeading2 {
+ margin: 0;
+ font-size: 26px;
+ line-height: 20px;
+ 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 #ffffff10;
+ display: grid;
+ place-items: center;
+}
+.CountdownBadge {
+ position: absolute;
+ top: 30px;
+ right: 0;
+ background: #47bb77;
+ border-radius: 80px 0 0 80px;
+ padding: 8px 10px 6px 34px;
+}