Compare commits
4 Commits
Author | SHA1 | Date | |
---|---|---|---|
75c612a279 | |||
caa82b24e3 | |||
9a37d95bb5 | |||
14baf029d2 |
3
custom/react/Countdown.tsx
Normal file
3
custom/react/Countdown.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import Countdown from "./components/Countdown/indext";
|
||||
|
||||
export default Countdown;
|
7
custom/react/Main.tsx
Normal file
7
custom/react/Main.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
const Main = () => {
|
||||
return <div>Main</div>;
|
||||
};
|
||||
|
||||
export default Main;
|
10
custom/react/components/Countdown/assets/box-white.svg
Normal file
10
custom/react/components/Countdown/assets/box-white.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 1022 B |
BIN
custom/react/components/Countdown/assets/brand-makup.png
Normal file
BIN
custom/react/components/Countdown/assets/brand-makup.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 316 B |
123
custom/react/components/Countdown/indext.tsx
Normal file
123
custom/react/components/Countdown/indext.tsx
Normal file
@ -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",
|
||||
},
|
||||
},
|
||||
};
|
67
custom/react/components/Countdown/styles.css
Normal file
67
custom/react/components/Countdown/styles.css
Normal file
@ -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;
|
||||
}
|
1
custom/react/index.d.ts
vendored
Normal file
1
custom/react/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module "*.svg";
|
@ -23,5 +23,11 @@
|
||||
"content": {
|
||||
"$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
|
||||
}
|
||||
},
|
||||
"main-academy": {
|
||||
"component": "Main"
|
||||
},
|
||||
"countdown-academy": {
|
||||
"component": "Countdown"
|
||||
}
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
}
|
29
storefront/styles/sass/pages/home/vtex.flex-layout.scss
Normal file
29
storefront/styles/sass/pages/home/vtex.flex-layout.scss
Normal file
@ -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;
|
||||
}
|
32
storefront/styles/sass/pages/home/vtex.rich-text.scss
Normal file
32
storefront/styles/sass/pages/home/vtex.rich-text.scss
Normal file
@ -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;
|
||||
}
|
12
storefront/styles/sass/pages/home/vtex.store-link.scss
Normal file
12
storefront/styles/sass/pages/home/vtex.store-link.scss
Normal file
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user