feat(home): finalizando projeto e colocando o Coutdown editável

custom/react/components/Countdown/indext.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import styles from "./styles.css";
 import clock from "./assets/box-white.svg";
+import { useCssHandles } from "vtex.css-handles";
 interface CountdownProps {
     //formato: dd/mm/yyyy//hh:mm
     endDate: string;
@@ -69,26 +69,39 @@ const Countdown = ({ endDate }: CountdownProps) => {
     const minuteString = time.minute.toString().padStart(2, "0");
     const secondString = time.second.toString().padStart(2, "0");
 
+    const CSS_HANDLES = [
+        "countdown",
+        "countdownBadge",
+        "countdownBadgeClock",
+        "countdownTitle",
+        "countdownTitleHeading1",
+        "countdownTitleHeading3",
+        "countdownTitleHeading2",
+        "countdownText",
+    ];
+
+    const handles = useCssHandles(CSS_HANDLES);
+
     return (
-        <div className={styles.countdown}>
-            <div className={styles.countdownBadge}>
+        <div className={handles.countdown}>
+            <div className={handles.countdownBadge}>
                 <img
                     src={clock}
                     alt="Relógio"
-                    className={styles.countdownBadgeClock}
+                    className={handles.countdownBadgeClock}
                 />
             </div>
 
-            <div className={styles.countdownTitle}>
-                <h1 className={styles.countdownTitleHeading1}>ofertas</h1>
-                <h3 className={styles.countdownTitleHeading3}>
+            <div className={handles.countdownTitle}>
+                <h1 className={handles.countdownTitleHeading1}>ofertas</h1>
+                <h3 className={handles.countdownTitleHeading3}>
                     Não perca tempo,
                 </h3>
-                <h2 className={styles.countdownTitleHeading2}>
+                <h2 className={handles.countdownTitleHeading2}>
                     garanta agora!
                 </h2>
             </div>
-            <div className={styles.countdownText}>
+            <div className={handles.countdownText}>
                 {`${hourString}:${minuteString}:${secondString}`}
             </div>
         </div>
@@ -96,3 +109,15 @@ const Countdown = ({ endDate }: CountdownProps) => {
 };
 
 export default Countdown;
+
+Countdown.schema = {
+    title: "Countdown Academy",
+    type: "object",
+    properties: {
+        endDate: {
+            title: "Data final de countdown",
+            type: "string",
+            default: "21/01/2023/00:00",
+        },
+    },
+};

storefront/store/blocks/pages/home/home.jsonc

@@ -21,7 +21,8 @@
 
     "countdown-academy": {
         "props": {
-            "endDate": "21/01/2023/00:00"
+            "endDate": "21/01/2023/00:00",
+            "blockClass": "countdown-academy-teste"
         }
     },
 

storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss

@@ -0,0 +1,67 @@
+.countdown {
+    background-image: url('assets/imgs/brand-makup.png');
+    width: 414px;
+    height: 463px;
+    background-color: #4e1e52;
+    border-radius: 30px;
+    position: relative;
+    background-blend-mode: multiply;
+}
+
+.countdownTitle {
+    color: white;
+    padding-top: 40px;
+    text-align: center;
+}
+
+.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%);
+
+    color: white;
+    font-size: 24px;
+    font-weight: 200;
+    letter-spacing: 0.1em;
+
+    width: 170px;
+    height: 170px;
+    border-radius: 50%;
+
+    border: 2px solid #ffffff10;
+
+    display: grid;
+    place-items: center;
+}
+
+.countdownBadge {
+    position: absolute;
+    top: 30px;
+    right: 0;
+    background-color: #47bb77;
+    border-radius: 80px 0 0 80px;
+    padding: 8px 10px 6px 34px;
+}