feat: aula 7.7 treinando vtex io

custom/package.json

@@ -22,6 +22,7 @@
     },
     "dependencies": {
         "husky": "^5.2.0",
-        "react": "^17.0.2"
+        "react": "^17.0.2",
+        "scss": "^0.2.4"
     }
 }

custom/react/components/Countdown/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import styles from "./styles.css";
 
 interface CountdownProps {
     // Fortmato: dd/mm/aaaa/hr:min
@@ -65,12 +66,25 @@ const Countdown = ({endDate}:CountdownProps) => {
 
 
     return (
-        <div>
-            {`
-            ${time.hour.toString().padStart(2, "0")}:
-            ${time.minute.toString().padStart(2, "0")}:
-            ${time.second.toString().padStart(2, "0")}
-            `}
+
+        <div className={styles.CountdownWrapper}>
+
+            <div className={styles.CountdownTitle}>
+                <h1 className={styles.texth1}>TEXTO H1</h1>
+                <h3 className={styles.texth3}>TEXTO H3</h3>
+                <h2 className={styles.texth2}>TEXTO H2</h2>
+            </div>
+
+            <div className={styles.hora}>
+
+                {`
+                ${time.hour.toString().padStart(2, "0")}:
+                ${time.minute.toString().padStart(2, "0")}:
+                ${time.second.toString().padStart(2, "0")}
+                `}
+
+            </div>
+
         </div>
     );
 };

custom/react/components/Countdown/styles.css

@@ -0,0 +1,43 @@
+.CountdownWrapper{
+    border-radius: 5px;
+    background-color: black;
+    color: white;
+    width: 414px ;
+    position: relative;
+    height: 463px;
+    margin-top: 30px;
+    margin-left: 15px;
+}
+.CountdownTitle{
+    color: white;
+    text-align: center;
+    padding-top: 15px;
+}
+.texth1{
+    font-size: 40px;
+    line-height: 48px;
+}
+.texth3{
+    font-size: 18px;
+    line-height: 20px;
+}
+.texth2{
+    font-size: 26px;
+    line-height: 26px;
+}
+.hora{
+    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;
+}