diff --git a/_data/cards/pt_BR/penetration-testing-fundamentals.yaml b/_data/cards/pt_BR/penetration-testing-fundamentals.yaml
index f554389be..700e3c350 100644
--- a/_data/cards/pt_BR/penetration-testing-fundamentals.yaml
+++ b/_data/cards/pt_BR/penetration-testing-fundamentals.yaml
@@ -24,10 +24,10 @@ contents:
link: https://www.youtube.com/watch?v=H1auWPjioeU
- type: YOUTUBE
title: "Qual a diferença entre Pentest e Bug Bounty?"
- link: https://www.youtube.com/watch?v=ee4Yw8SNvis:
+ link: https://www.youtube.com/watch?v=ee4Yw8SNvis
- type: COURSE
title: "[FIAP] Cyber Security Fundamentals & Skills"
link: https://www.fiap.com.br/shift/curso/tecnologia/cyber-security-fundamentals-e-skills-online/
- type: COURSE
title: "[FIAP] DPO - Data Protection Officer"
- link: https://www.fiap.com.br/shift/curso/tecnologia/dpo-4-0/
\ No newline at end of file
+ link: https://www.fiap.com.br/shift/curso/tecnologia/dpo-4-0/
diff --git a/_data/locale/en-US.ts b/_data/locale/en-US.ts
index 6a5c52cc6..720b65f4a 100644
--- a/_data/locale/en-US.ts
+++ b/_data/locale/en-US.ts
@@ -118,6 +118,12 @@ export default {
},
],
"IMAGES.DISCOVER_IMAGE": "/assets/image/discover-illustration-en.svg",
+ "7DAYSOFCODE.PRE_TITLE": " Challenge Yourself!",
+ "7DAYSOFCODE.TITLE": "Put your knowledge into practice in daily challenges",
+ "7DAYSOFCODE.DESCRIPTION": "Seven challenges. In the technology you are learning. Practice, study and show your portfolio.",
+ "7DAYSOFCODE.CTA": "Practice now!",
+ "7DAYSOFCODE.CTA_LINK": "https://7daysofcode.io/",
+ "7DAYSOFCODE.IMAGE": "/assets/image/home-illustration-three.svg",
"FOOTER.YOUTUBE": "https://youtube.com/aluracursosonline",
"FOOTER.FACEBOOK": "https://www.facebook.com/AluraCursosOnline/",
diff --git a/_data/locale/es.ts b/_data/locale/es.ts
index f8b96989f..058fe4cc1 100644
--- a/_data/locale/es.ts
+++ b/_data/locale/es.ts
@@ -117,6 +117,12 @@ export default {
},*/
],
"IMAGES.DISCOVER_IMAGE": "/assets/image/discover-illustration-es.svg",
+ "7DAYSOFCODE.PRE_TITLE": " ¡Retarte a ti mismo!",
+ "7DAYSOFCODE.TITLE": "Pon en práctica tus conocimientos en desafíos diarios",
+ "7DAYSOFCODE.DESCRIPTION": "Siete desafíos. En la tecnología estás aprendiendo. Practica, estudia y muestra tu portafolio.",
+ "7DAYSOFCODE.CTA": "¡Practica ahora!",
+ "7DAYSOFCODE.CTA_LINK": "https://7daysofcode.io/",
+ "7DAYSOFCODE.IMAGE": "/assets/image/home-illustration-three.svg",
"FOOTER.YOUTUBE": "https://www.youtube.com/@AluraLatam",
"FOOTER.FACEBOOK": "https://www.facebook.com/aluracursoslatam/",
diff --git a/_data/locale/pt-BR.ts b/_data/locale/pt-BR.ts
index c516403b0..e1f2c6cec 100644
--- a/_data/locale/pt-BR.ts
+++ b/_data/locale/pt-BR.ts
@@ -122,6 +122,12 @@ export default {
},
],
"IMAGES.DISCOVER_IMAGE": "/assets/image/discover-illustration.svg",
+ "7DAYSOFCODE.PRE_TITLE": " Desafie-se!",
+ "7DAYSOFCODE.TITLE": "Coloque em prática os seus conhecimentos em desafios diários",
+ "7DAYSOFCODE.DESCRIPTION": "Desafios em 7 dias. Na tecnologia que você está aprendendo. Pratique, estude e mostre seu portfolio.",
+ "7DAYSOFCODE.CTA": "Pratique agora!",
+ "7DAYSOFCODE.CTA_LINK": "https://7daysofcode.io/",
+ "7DAYSOFCODE.IMAGE": "/assets/image/home-illustration-three.svg",
"FOOTER.YOUTUBE": "https://youtube.com/aluracursosonline",
"FOOTER.FACEBOOK": "https://www.facebook.com/AluraCursosOnline/",
"FOOTER.INSTAGRAM": "https://www.instagram.com/aluraonline/",
diff --git a/public/assets/image/home-illustration-three.svg b/public/assets/image/home-illustration-three.svg
new file mode 100644
index 000000000..e47cb40d6
--- /dev/null
+++ b/public/assets/image/home-illustration-three.svg
@@ -0,0 +1,1587 @@
+
+
\ No newline at end of file
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index ac073410f..73835b88f 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -17,6 +17,8 @@ function withLocalePrefix(
locale: string,
isExternalURL: boolean
) {
+ const isAnchor = href?.startsWith("#");
+ if (isAnchor) return href;
if (isExternalURL) return href;
const urlLocale = urlLocaleBySiteLocale[locale];
@@ -31,13 +33,24 @@ function withLocalePrefix(
interface LinkProps {
href: string;
target?: string;
+ locale?: SiteLocale;
children: React.ReactNode;
styleSheet?: StyleSheet;
}
-function Link({ href, children, styleSheet, ...props }: LinkProps) {
+function Link({
+ href,
+ children,
+ locale: receivedLocale,
+ styleSheet,
+ ...props
+}: LinkProps) {
const locale = useI18nLocale();
const isExternalURL = href?.startsWith("http");
- const hrefNormalized = withLocalePrefix(href, locale, isExternalURL);
+ const hrefNormalized = withLocalePrefix(
+ href,
+ receivedLocale || locale,
+ isExternalURL
+ );
return (
diff --git a/src/patterns/ScreenHeroContainer/index.tsx b/src/patterns/ScreenHeroContainer/index.tsx
index 945a64c27..f6ad33576 100644
--- a/src/patterns/ScreenHeroContainer/index.tsx
+++ b/src/patterns/ScreenHeroContainer/index.tsx
@@ -7,6 +7,8 @@ import SecondContentSection from "./patterns/SecondContentSection";
import FAQContentSection from "./patterns/FAQContentSection";
import HeroTitle from "./patterns/HeroTitle";
import { PathScreenGetGuideBySlugQuery } from "@src/gql_types";
+import { LanguageSwitch } from "./patterns/LanguageSwitch/LanguageSwitch";
+import { ThirdContentSection } from "./patterns/ThirdContentSection/ThirdContentSection";
interface ScreenHeroContainerProps {
guide?: PathScreenGetGuideBySlugQuery["guide"];
@@ -28,6 +30,7 @@ export default function ScreenHeroContainer({
overflow: "hidden",
}}
>
+
@@ -105,6 +108,7 @@ export default function ScreenHeroContainer({
+
>
diff --git a/src/patterns/ScreenHeroContainer/patterns/FirstContentSection/index.tsx b/src/patterns/ScreenHeroContainer/patterns/FirstContentSection/index.tsx
index b7a0845d8..d16980863 100644
--- a/src/patterns/ScreenHeroContainer/patterns/FirstContentSection/index.tsx
+++ b/src/patterns/ScreenHeroContainer/patterns/FirstContentSection/index.tsx
@@ -117,11 +117,15 @@ export default function FirstContentSection() {
lineHeight: "180%",
backgroundColor: {
xs: "rgba(0, 0, 0, 0.5)",
- md: "transparent",
+ md: "#080F1B",
+ },
+ width: {
+ xs: "275px",
+ md: "auto",
},
- width: "275px",
borderRadius: "1000px",
paddingVertical: "9px",
+ paddingHorizontal: "20px",
}}
i18nKey="SCREEN_HERO_CONTAINER.PRE_TITLE"
/>
@@ -155,6 +159,7 @@ export default function FirstContentSection() {
fontFamily: "'Inter', sans-serif",
fontSize: "1rem",
color: "#8992a1",
+ lineHeight: "1.8",
marginBottom: "2.5em",
width: {
xs: "240px",
diff --git a/src/patterns/ScreenHeroContainer/patterns/LanguageSwitch/LanguageSwitch.tsx b/src/patterns/ScreenHeroContainer/patterns/LanguageSwitch/LanguageSwitch.tsx
new file mode 100644
index 000000000..d0aef6591
--- /dev/null
+++ b/src/patterns/ScreenHeroContainer/patterns/LanguageSwitch/LanguageSwitch.tsx
@@ -0,0 +1,211 @@
+import React from "react";
+import { Box, Link } from "@src/components";
+import { useI18n, useI18nLocale } from "@src/infra/i18n";
+import { SiteLocale } from "@src/gql_types";
+
+const languages = [
+ {
+ label: "PT",
+ link: "/",
+ locale: "PT_BR",
+ flag: (
+
+ ),
+ },
+ {
+ label: "EN",
+ link: "/",
+ locale: "EN_US",
+ flag: (
+
+ ),
+ },
+ {
+ label: "ES",
+ link: "/",
+ locale: "ES",
+ flag: (
+
+ ),
+ },
+];
+
+export function LanguageSwitch() {
+ const i18n = useI18n();
+ const siteLocale = useI18nLocale();
+ return (
+
+
+
+ {i18n.content("7DAYSOFCODE.CTA")}
+
+
+ {languages.map(({ label, flag, link, locale }) => {
+ return (
+
+
+ {flag}
+
+ {label}
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/patterns/ScreenHeroContainer/patterns/SecondContentSection/index.tsx b/src/patterns/ScreenHeroContainer/patterns/SecondContentSection/index.tsx
index 1455b022b..aae0e85ba 100644
--- a/src/patterns/ScreenHeroContainer/patterns/SecondContentSection/index.tsx
+++ b/src/patterns/ScreenHeroContainer/patterns/SecondContentSection/index.tsx
@@ -34,7 +34,8 @@ export default function SecondContentSection() {
md: "0",
},
paddingHorizontal: {
- xs: "1.875rem",
+ xs: "0",
+ md: "1.875rem",
},
alignItems: {
xs: "center",
@@ -86,11 +87,11 @@ export default function SecondContentSection() {
lineHeight: "180%",
backgroundColor: {
xs: "rgba(0, 0, 0, 0.5)",
- md: "transparent",
+ md: "#080F1B",
},
- width: "275px",
borderRadius: "1000px",
paddingVertical: "9px",
+ paddingHorizontal: "20px",
}}
i18nKey="SCREEN_HERO_CONTAINER.PRE_TITLE"
/>
@@ -126,6 +127,7 @@ export default function SecondContentSection() {
fontSize: "1rem",
color: "#8992a1",
marginBottom: "2.5em",
+ lineHeight: "1.8",
width: {
xs: "240px",
md: "auto",
diff --git a/src/patterns/ScreenHeroContainer/patterns/ThirdContentSection/ThirdContentSection.tsx b/src/patterns/ScreenHeroContainer/patterns/ThirdContentSection/ThirdContentSection.tsx
new file mode 100644
index 000000000..038db8126
--- /dev/null
+++ b/src/patterns/ScreenHeroContainer/patterns/ThirdContentSection/ThirdContentSection.tsx
@@ -0,0 +1,184 @@
+import React from "react";
+import { Box, Image, Link, Text } from "@src/components";
+import { useI18n } from "@src/infra/i18n";
+
+export function ThirdContentSection() {
+ const i18n = useI18n();
+ return (
+
+
+
+
+
+
+
+
+ (
+
+ {children}
+
+ ),
+ }}
+ />
+
+
+ {i18n.content("7DAYSOFCODE.CTA")}
+
+
+
+
+
+ );
+}