diff --git a/src/components/hero/HeroDesktop.tsx b/src/components/hero/HeroDesktop.tsx index 19c120e..86a3cf9 100644 --- a/src/components/hero/HeroDesktop.tsx +++ b/src/components/hero/HeroDesktop.tsx @@ -84,6 +84,7 @@ const useStyles = makeStyles((theme: Theme) => ({ justifyContent: "space-between", borderRadius: 8, padding: 22, + color: "#939598", }, logoEdition: { zIndex: 1, @@ -256,7 +257,8 @@ const LoggedView = (user: UserProps) => { const ProgressMessage = (props: any) => (
- + + {" "} Você tem {props.opened} pull requests enviados e{" "} {props.merged} aceito(s) {" "} @@ -265,7 +267,8 @@ const ProgressMessage = (props: any) => ( const ConfirmMessage = () => (
- + + {" "} Parabéns! Você concluiu o desafio Hacktoberfest. Confirme o endereço de envio no minha área.{" "} @@ -274,7 +277,8 @@ const ConfirmMessage = () => ( const CongratsMessage = () => (
- + + {" "} Parabéns! Você concluiu o desafio Hacktoberfest.{" "} Agora é só esperar sua camiseta chegar{" "} diff --git a/src/components/hero/HeroSmart.tsx b/src/components/hero/HeroSmart.tsx index 21b5eb4..1d91228 100644 --- a/src/components/hero/HeroSmart.tsx +++ b/src/components/hero/HeroSmart.tsx @@ -1,328 +1,328 @@ -import React from "react" -import Spacing from "@components/spacing" -import { Grid, Typography, Button } from "@material-ui/core" -import { Image } from "@components/image" -import { makeStyles, Theme } from "@material-ui/core/styles" -import { Edition, UserProps } from "@services/user" - -const useStyles = makeStyles((theme: Theme) => ({ - button: { - width: "100%", - height: "44px", - fontFamily: "Globotipo Variable", - fontSize: "16px", - fontWeight: 400, - fontStyle: "normal", - lineHeight: "100%", - letterSpacing: "0%", - borderRadius: "40px", - border: "none", - background: "transparent", - color: "#FFFFFF", - textAlign: "center", - textTransform: "none", - opacity: 1, - transform: "rotate(0deg)", - position: "relative", - transition: "all 0.3s ease", - marginTop: "44px", - "&::before": { - content: '""', - position: "absolute", - top: 0, - left: 0, - right: 0, - bottom: 0, - borderRadius: "40px", - padding: "1px", - background: "linear-gradient(90deg, #FFBD09 0%, #FF111E 100%)", - mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)", - maskComposite: "xor", - WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)", - WebkitMaskComposite: "xor", - zIndex: -1, - }, - "&:hover": { - background: "linear-gradient(90deg, #FFBD09 0%, #FF111E 100%)", - color: "#FFFFFF", - "&::before": { - display: "none", - }, - }, - }, - howWorks: { - position: 'absolute', - width: "100%", - fontWeight: 100, - display: `inline-flex`, - justifyContent: `center`, - bottom: '30px' - }, - progressionContainer: { - display: 'block', - margin: '0px auto 0px auto', - [theme.breakpoints.between("sm", "md")]: { - width: '91vw', - } - }, - progression: { - border: '2px solid #fff', - backgroundColor: '#05A6FF', - display: 'flex', - justifyContent: 'space-between', - borderRadius: 8, - padding: '10px 30px' - }, - textProgress: { - width: '60vw', - display: 'block', - margin: '0px auto', - [theme.breakpoints.between("sm", "md")]: { - - } - }, - loggedViewContainer: { - marginTop: 40, - marginBottom: 10, - alignItems: 'flex-start', - color: '#000', - [theme.breakpoints.between("sm", "md")]: { - color: '#fff' - } - }, - titleData: { - fontSize: '7.5vw', - width: '100%', - margin: 0, - fontWeight: 100, - marginTop: '1.2vw', - [theme.breakpoints.between("sm", "md")]: { - fontSize: '5.95vw', - } - }, - active: { - borderBottom: `2px solid ${theme.palette.secondary.main}`, - }, - logoEdition: { - width: "380px", - marginTop: "32px", - marginBottom: "16px", - }, - logoGlobo: { - width: '180px', - display: 'block', - textAlign: 'left', - }, - contentCenter: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - textAlign: 'center', - }, - character: { - marginTop: '16%', - width: '100%' - }, - drone: { - width: '50%', - height: '50%', - }, - messageImage:{ - marginTop: '40px', - display: "flex", - justifyContent: "center", - }, - droneAnimation: { - animation: `$MoveUpDown 3000ms cubic-bezier(0.65, 0, 0.35, 1) 0s infinite` - }, - droneAnimation2: { - animation: `$MoveLeftRight 5000ms cubic-bezier(0.65, 0, 0.35, 1) 0s infinite` - }, - "@keyframes MoveUpDown": { - "0%, 100%": { - transform: "translateY(0)", - }, - "50%": { - transform: "translateY(-50px)", - }, - }, - "@keyframes MoveLeftRight": { - "0%, 100%": { - transform: "rotate(-2deg)", - }, - "50%": { - transform: "rotate(2deg)", - }, - }, -})) - -const getEditionState = (currentEdition: Edition | undefined): number => { - if (!currentEdition?.approved && !currentEdition?.completed) { - //Approved e Completed false - return 0; - } else if (currentEdition?.approved && !currentEdition.completed) { - //Approved true e completed false - return 1; - } - - return 2; -} - -const LoggedView = (user: UserProps) => { - const classes = useStyles() - const currentEdition = - user.editions?.[Math.max(...Object.keys(user.editions))] - const opened = currentEdition?.totalMergeRequests || 0 - const merged = currentEdition?.totalMergeRequestsMerged || "nenhum" - const state = getEditionState(currentEdition); - let TextComponent; - - switch (state) { - case 0: - TextComponent = () => - break; - case 1: - TextComponent = () => - break; - case 2: - TextComponent = () => - break; - default: - TextComponent = () => - break; - } - - return ( - - - - - Olá @{user.githubUser}! - - - - -
-
- {/** Ativo se Approved e Completed for false */} - {/** Ativo se Approved true e completed false */} - {/* Ativo se completed e aproved for true*/} -
-
- - ) -} - -const ProgressMessage = (props: any) => ( - Você tem {props.opened} PRs enviados e {props.merged} aceito(s) -) - -const ConfirmMessage = () => ( -
- Parabéns! Você concluiu o desafio Hacktoberfest. Confirme o endereço de envio no minha área. -
-) - - -const CongratsMessage = () => ( -
- Parabéns! Você concluiu o desafio Hacktoberfest. Agora é só esperar sua camiseta chegar! -
-) - -const UnloggedView = () => { - const classes = useStyles() - return ( - - - {/* - - - contribua e ganhe uma camiseta exclusiva - - - */} - - - - - - ) -} - - -const SmartView = (props: SmartViewProps) => { - const classes = useStyles() - return ( - - - - -
- - - 01.10.2025 — 31.10.2025 - - - O Hacktober está aberto a todos os que desejam trilhar o caminho da colaboração e deixar sua marca nos projetos open source. - - {props.user ? : } -
- - - - - {/*
- -
*/} - - - - ) -} - -interface SmartViewProps { - user?: UserProps -} - -export default SmartView +import React from "react" +import Spacing from "@components/spacing" +import { Grid, Typography, Button } from "@material-ui/core" +import { Image } from "@components/image" +import { makeStyles, Theme } from "@material-ui/core/styles" +import { Edition, UserProps } from "@services/user" + +const useStyles = makeStyles((theme: Theme) => ({ + button: { + width: "100%", + height: "44px", + fontFamily: "Globotipo Variable", + fontSize: "16px", + fontWeight: 400, + fontStyle: "normal", + lineHeight: "100%", + letterSpacing: "0%", + borderRadius: "40px", + border: "none", + background: "transparent", + color: "#FFFFFF", + textAlign: "center", + textTransform: "none", + opacity: 1, + transform: "rotate(0deg)", + position: "relative", + transition: "all 0.3s ease", + marginTop: "44px", + "&::before": { + content: '""', + position: "absolute", + top: 0, + left: 0, + right: 0, + bottom: 0, + borderRadius: "40px", + padding: "1px", + background: "linear-gradient(90deg, #FFBD09 0%, #FF111E 100%)", + mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)", + maskComposite: "xor", + WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)", + WebkitMaskComposite: "xor", + zIndex: -1, + }, + "&:hover": { + background: "linear-gradient(90deg, #FFBD09 0%, #FF111E 100%)", + color: "#FFFFFF", + "&::before": { + display: "none", + }, + }, + }, + howWorks: { + position: 'absolute', + width: "100%", + fontWeight: 100, + display: `inline-flex`, + justifyContent: `center`, + bottom: '30px' + }, + progressionContainer: { + display: 'block', + margin: '0px auto 0px auto', + [theme.breakpoints.between("sm", "md")]: { + width: '91vw', + } + }, + progression: { + border: '2px solid #fff', + backgroundColor: '#05A6FF', + display: 'flex', + justifyContent: 'space-between', + borderRadius: 8, + padding: '10px 30px' + }, + textProgress: { + width: '60vw', + display: 'block', + margin: '0px auto', + [theme.breakpoints.between("sm", "md")]: { + + } + }, + loggedViewContainer: { + marginTop: 40, + marginBottom: 10, + alignItems: 'flex-start', + color: '#000', + [theme.breakpoints.between("sm", "md")]: { + color: '#fff' + } + }, + titleData: { + fontSize: '7.5vw', + width: '100%', + margin: 0, + fontWeight: 100, + marginTop: '1.2vw', + [theme.breakpoints.between("sm", "md")]: { + fontSize: '5.95vw', + } + }, + active: { + borderBottom: `2px solid ${theme.palette.secondary.main}`, + }, + logoEdition: { + width: "380px", + marginTop: "32px", + marginBottom: "16px", + }, + logoGlobo: { + width: '180px', + display: 'block', + textAlign: 'left', + }, + contentCenter: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center', + }, + character: { + marginTop: '16%', + width: '100%' + }, + drone: { + width: '50%', + height: '50%', + }, + messageImage:{ + marginTop: '40px', + display: "flex", + justifyContent: "center", + }, + droneAnimation: { + animation: `$MoveUpDown 3000ms cubic-bezier(0.65, 0, 0.35, 1) 0s infinite` + }, + droneAnimation2: { + animation: `$MoveLeftRight 5000ms cubic-bezier(0.65, 0, 0.35, 1) 0s infinite` + }, + "@keyframes MoveUpDown": { + "0%, 100%": { + transform: "translateY(0)", + }, + "50%": { + transform: "translateY(-50px)", + }, + }, + "@keyframes MoveLeftRight": { + "0%, 100%": { + transform: "rotate(-2deg)", + }, + "50%": { + transform: "rotate(2deg)", + }, + }, +})) + +const getEditionState = (currentEdition: Edition | undefined): number => { + if (!currentEdition?.approved && !currentEdition?.completed) { + //Approved e Completed false + return 0; + } else if (currentEdition?.approved && !currentEdition.completed) { + //Approved true e completed false + return 1; + } + + return 2; +} + +const LoggedView = (user: UserProps) => { + const classes = useStyles() + const currentEdition = + user.editions?.[Math.max(...Object.keys(user.editions))] + const opened = currentEdition?.totalMergeRequests || 0 + const merged = currentEdition?.totalMergeRequestsMerged || "nenhum" + const state = getEditionState(currentEdition); + let TextComponent; + + switch (state) { + case 0: + TextComponent = () => + break; + case 1: + TextComponent = () => + break; + case 2: + TextComponent = () => + break; + default: + TextComponent = () => + break; + } + + return ( + + + + + Olá @{user.githubUser}! + + + + +
+
+ {/** Ativo se Approved e Completed for false */} + {/** Ativo se Approved true e completed false */} + {/* Ativo se completed e aproved for true*/} +
+
+ + ) +} + +const ProgressMessage = (props: any) => ( + Você tem {props.opened} PRs enviados e {props.merged} aceito(s) +) + +const ConfirmMessage = () => ( +
+ Parabéns! Você concluiu o desafio Hacktoberfest. Confirme o endereço de envio no minha área. +
+) + + +const CongratsMessage = () => ( +
+ Parabéns! Você concluiu o desafio Hacktoberfest. Agora é só esperar sua camiseta chegar! +
+) + +const UnloggedView = () => { + const classes = useStyles() + return ( + + + {/* + + + contribua e ganhe uma camiseta exclusiva + + + */} + + + + + + ) +} + + +const SmartView = (props: SmartViewProps) => { + const classes = useStyles() + return ( + + + + +
+ + + 01.10.2025 — 31.10.2025 + + + O Hacktober está aberto a todos os que desejam trilhar o caminho da colaboração e deixar sua marca nos projetos open source. + + {props.user ? : } +
+ + + + + {/*
+ +
*/} + + + + ) +} + +interface SmartViewProps { + user?: UserProps +} + +export default SmartView