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

custom/react/Countdown.tsx

@@ -0,0 +1,3 @@
+import Countdown from "./components/Countdown/indext";
+
+export default Countdown;

custom/react/Main.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Main = () => {
+    return <div>Main</div>;
+};
+
+export default Main;

custom/react/components/Countdown/assets/box-white.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M23.9953 5.91909C23.9673 5.66095 23.8069 5.43248 23.5671 5.32059L12.3171 0.0705918C12.1161 -0.0232051 11.8838 -0.0232051 11.6828 0.0705918L0.432797 5.32059C0.193078 5.43248 0.0326719 5.6609 0.00459375 5.91909C0.00398437 5.92448 0 5.99629 0 6.00023V18.7502C0 19.0569 0.186703 19.3327 0.471469 19.4466L11.7215 23.9466C11.8109 23.9823 11.9055 24.0002 12 24.0002C12.0945 24.0002 12.1891 23.9824 12.2785 23.9466L23.5285 19.4466C23.8133 19.3327 24 19.0569 24 18.7502V6.00023C24 5.99629 23.9959 5.92444 23.9953 5.91909ZM12 1.57786L21.363 5.94726L17.7577 7.38942L8.21845 3.34261L12 1.57786ZM6.38953 4.19611L15.7808 8.18015L12 9.69244L2.637 5.94726L6.38953 4.19611ZM1.5 7.10798L11.25 11.008V22.1424L1.5 18.2424V7.10798ZM12.75 22.1425V11.008L22.5 7.10798V18.2424L12.75 22.1425Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

custom/react/components/Countdown/indext.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import clock from "./assets/box-white.svg";
+import { useCssHandles } from "vtex.css-handles";
+interface CountdownProps {
+    //formato: dd/mm/yyyy//hh:mm
+    endDate: string;
+}
+
+interface ITime {
+    hour: number;
+    minute: number;
+    second: number;
+}
+
+const Countdown = ({ endDate }: CountdownProps) => {
+    const [time, setTime] = useState<ITime>({
+        hour: 0,
+        minute: 0,
+        second: 0,
+    });
+
+    const [day, month, year, hourMinute] = endDate.split("/");
+    const [hour, minute] = hourMinute.split(":");
+
+    const updateTime = () => {
+        const finalDate = new Date(
+            parseInt(year),
+            parseInt(month) - 1,
+            parseInt(day),
+            parseInt(hour),
+            parseInt(minute)
+        ).getTime();
+
+        const atualDate = new Date().getTime();
+
+        // eslint-disable-next-line prefer-const
+        let difference = finalDate - atualDate;
+
+        const hours = Math.floor(difference / (1000 * 60 * 60));
+
+        difference = difference - hours * 60 * 60 * 1000;
+
+        const minutes = Math.floor(difference / (1000 * 60));
+
+        difference = difference - minutes * 60 * 1000;
+
+        const seconds = Math.floor(difference / 1000);
+
+        if (hours <= 0) {
+            setTime({
+                hour: 0,
+                minute: 0,
+                second: 0,
+            });
+        } else {
+            setTime({
+                hour: hours,
+                minute: minutes,
+                second: seconds,
+            });
+        }
+    };
+
+    useEffect(() => {
+        setInterval(updateTime, 1000);
+    }, []);
+
+    const hourString = time.hour.toString().padStart(2, "0");
+    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={handles.countdown}>
+            <div className={handles.countdownBadge}>
+                <img
+                    src={clock}
+                    alt="Relógio"
+                    className={handles.countdownBadgeClock}
+                />
+            </div>
+
+            <div className={handles.countdownTitle}>
+                <h1 className={handles.countdownTitleHeading1}>ofertas</h1>
+                <h3 className={handles.countdownTitleHeading3}>
+                    Não perca tempo,
+                </h3>
+                <h2 className={handles.countdownTitleHeading2}>
+                    garanta agora!
+                </h2>
+            </div>
+            <div className={handles.countdownText}>
+                {`${hourString}:${minuteString}:${secondString}`}
+            </div>
+        </div>
+    );
+};
+
+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",
+        },
+    },
+};

custom/react/components/Countdown/styles.css

@@ -0,0 +1,67 @@
+.countdown {
+    background-image: url('./assets/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;
+}

custom/react/index.d.ts

@@ -0,0 +1 @@
+declare module "*.svg";

custom/store/interfaces.json

@@ -23,5 +23,11 @@
         "content": {
             "$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
         }
+    },
+    "main-academy": {
+        "component": "Main"
+    },
+    "countdown-academy": {
+        "component": "Countdown"
     }
 }

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

@@ -4,6 +4,9 @@
             "list-context.image-list#demo",
             "flex-layout.row#deals",
             "__fold__",
+            "flex-layout.row#faixa-de-imagens",
+            "main-academy",
+            "countdown-academy",
             "rich-text#m3-shelf-title",
             "flex-layout.row#m3-shelf",
             "info-card#m3-middle-card",
@@ -15,6 +18,78 @@
         //   "challenge": "challenge.trade-policy-condition"
         // }
     },
+
+    "countdown-academy": {
+        "props": {
+            "endDate": "21/01/2023/00:00",
+            "blockClass": "countdown-academy-teste"
+        }
+    },
+
+    "flex-layout.row#faixa-de-imagens": {
+        "props": {
+            "blockClass": "faixa-de-imagens"
+        },
+        "children": [
+            "image#imagem-1",
+            "flex-layout.col#image-meio",
+            "image#imagem-2"
+        ]
+
+    },
+
+    "flex-layout.col#image-meio": {
+        "props":{
+            "blockClass": "faixa-de-imagens"
+        },
+        "children": [
+            "image#imagem-3",
+            "flex-layout.col#conteudo-meio"
+        ]
+    },
+    "flex-layout.col#conteudo-meio": {
+        "children": [
+            "rich-text#text-meio",
+            "link#link-meio"
+        ],
+        "props": {
+            "blockClass": "conteudo-meio",
+            "preventVerticalStretch": "auto"
+        }
+    },
+
+    "rich-text#text-meio": {
+        "props":{
+            "text": "### Qual produto \n # ideal para você? \n lorem ipsum dolor sit amet, consecteur",
+            "blockClass": "texto-meio"
+        }
+    },
+
+    "link#link-meio": {
+        "props": {
+            "href": "/",
+            "label": "RESPONDA NOSSO QUIZ E DESCUBRA",
+            "blockClass": "link-meio"
+
+        }
+    },
+
+    "image#imagem-1":{
+        "props": {
+            "src": "assets/imgs/products.png"
+        }
+    },
+    "image#imagem-2":{
+        "props": {
+            "src": "assets/imgs/products.png"
+        }
+    },
+    "image#imagem-3":{
+        "props": {
+            "src": "assets/imgs/products.png"
+        }
+    },
+
     "challenge.trade-policy-condition": {
         "props": {
             "redirectPath": "/registration",

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;
+}

storefront/styles/sass/pages/home/vtex.flex-layout.scss

@@ -0,0 +1,29 @@
+.flexRowContent--faixa-de-imagens {
+    margin-top: 5rem;
+
+    :global(.vtex-store-components-3-x-imageElement) {
+        height: 100%;
+        width: 100%;
+    }
+
+    .stretchChildrenWidth {
+        margin: 0 8px;
+    }
+}
+
+.flexColChild--faixa-de-imagens {
+    :global(.vtex-store-components-3-x-imageElement) {
+        filter: brightness(70%);
+    }
+}
+
+.flexCol--faixa-de-imagens {
+    position: relative;
+}
+
+.flexCol--conteudo-meio {
+    position: absolute;
+    inset: 0;
+
+    justify-content: center;
+}

storefront/styles/sass/pages/home/vtex.rich-text.scss

@@ -0,0 +1,32 @@
+.container--texto-meio {
+    justify-content: center;
+    color: #ffffff;
+    font-family: "Oxygen";
+}
+
+.wrapper--texto-meio {
+    width: 100%;
+    margin: 0 24px;
+}
+
+.headingLevel3--texto-meio,
+.headingLevel1--texto-meio,
+.paragraph--texto-meio  {
+    margin: 0;
+}
+
+.headingLevel3--texto-meio {
+    font-size: 32px;
+    font-weight: 600;
+    letter-spacing: -0.05em;
+}
+.headingLevel1--texto-meio {
+    font-size: 46px;
+    font-weight: 600;
+    letter-spacing: -0.05em;
+}
+.paragraph--texto-meio {
+    font-size: 18px;
+    font-weight: 300;
+    letter-spacing: 0.05em;
+}

storefront/styles/sass/pages/home/vtex.store-link.scss

@@ -0,0 +1,12 @@
+.link--link-meio {
+    color: #fff;
+    text-decoration: underline;
+    padding: 16px 22px;
+    background-color: #4e1d52;
+    border-radius: 30px;
+    margin: 2rem 24px;
+    display: block;
+    width: fit-content;
+    font-size: 14px;
+    letter-spacing: 0.05em;
+}