update

alura · Feb 24, 2024 · 3d0a8a5 · 3d0a8a5
1 parent d873fcd
commit 3d0a8a5
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 96 deletions.
diff --git 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": "<Emoji name='star'/> Challenge Yourself!",
+  "7DAYSOFCODE.TITLE": "Put your knowledge into practice in <strong>daily challenges</strong>",
+  "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
@@ -117,6 +117,12 @@ export default {
     },*/
   ],
   "IMAGES.DISCOVER_IMAGE": "/assets/image/discover-illustration-es.svg",
+  "7DAYSOFCODE.PRE_TITLE": "<Emoji name='star'/> ¡Retarte a ti mismo!",
+  "7DAYSOFCODE.TITLE": "Pon en práctica tus conocimientos en <strong>desafíos diarios</strong>",
+  "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/src/patterns/ScreenHeroContainer/patterns/LanguageSwitch/LanguageSwitch.tsx b/src/patterns/ScreenHeroContainer/patterns/LanguageSwitch/LanguageSwitch.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Box, Link } from "@src/components";
+import { useI18n } from "@src/infra/i18n";
 
 const languages = [
   {
@@ -114,6 +115,7 @@ const languages = [
 ];
 
 export function LanguageSwitch() {
+  const i18n = useI18n();
   return (
     <Box
       styleSheet={{
@@ -139,7 +141,7 @@ export function LanguageSwitch() {
             alignItems: "flex-start",
           }}
         >
-          <Link href="#7days-of-code">Pratique Agora!</Link>
+          <Link href="#7days-of-code">{i18n.content("7DAYSOFCODE.CTA")}</Link>
         </Box>
         <Box
           tag="nav"

diff --git a/src/patterns/ScreenHeroContainer/patterns/ThirdContentSection/ThirdContentSection.tsx b/src/patterns/ScreenHeroContainer/patterns/ThirdContentSection/ThirdContentSection.tsx
@@ -12,115 +12,167 @@ export function ThirdContentSection() {
         color: "#FFFFFF",
         backgroundColor: "#060C14",
         paddingTop: {
-          md: "3.5em",
-          lg: "4.5em",
+          xs: "56px",
+          md: "130px",
+          lg: "130px",
         },
         paddingBottom: {
-          md: "3.5em",
-          lg: "4.5em",
+          xs: "56px",
+          md: "130px",
+          lg: "130px",
         },
-        alignItems: "center",
-        flexDirection: "row",
-        justifyContent: "center",
-        gap: "73px",
       }}
     >
-      <Box>
-        <Image
-          src={i18n.content("7DAYSOFCODE.IMAGE")}
-          alt="Descubra!"
-          styleSheet={{
-            width: {
-              xs: "300px",
-              sm: "400px",
-              md: "400px",
-              lg: "auto",
-            },
-          }}
-        />
-      </Box>
       <Box
         styleSheet={{
-          alignItems: "flex-start",
+          alignItems: "center",
+          justifyContent: "center",
+          maxWidth: "80rem",
+          width: "100%",
+          margin: "0 auto",
+          flexDirection: {
+            xs: "column-reverse",
+            md: "row",
+            lg: "row",
+          },
+          gap: {
+            xs: "40px",
+            md: "53px",
+            lg: "73px",
+          },
         }}
       >
-        <Text
+        <Box
           styleSheet={{
-            alignSelf: {
-              xs: "center",
-              md: "flex-start",
-            },
-            gap: "0.5em",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: {
-              xs: "center",
-              md: "flex-start",
-            },
-            justifyContent: {
-              xs: "center",
-              md: "flex-start",
-            },
-            textTransform: "uppercase",
-            color: "#8992a1",
-            fontWeight: "600",
-            fontSize: "0.875rem",
-            lineHeight: "180%",
-            backgroundColor: "#141C2B",
-            width: "275px",
-            borderRadius: "1000px",
-            paddingVertical: "9px",
+            flex: 1,
+            alignItems: "flex-start",
           }}
-          i18nKey="7DAYSOFCODE.PRE_TITLE"
-        />
-        <Text
-          i18nKey="7DAYSOFCODE.TITLE"
-          i18nKeyReplace={{
-            strong: ({ children }) => (
-              <Text
-                tag="strong"
-                styleSheet={{
-                  color: "#F9FF00",
-                  fontWeight: "600",
-                  fontSize: "0.875rem",
-                  lineHeight: "180%",
-                }}
-              >
-                {children}
-              </Text>
-            ),
-          }}
-        />
-        <Text i18nKey="7DAYSOFCODE.DESCRIPTION" />
-        <Link
-          href={i18n.content("7DAYSOFCODE.CTA_LINK")}
+        >
+          <Image
+            src={i18n.content("7DAYSOFCODE.IMAGE")}
+            alt="Descubra!"
+            styleSheet={{
+              width: {
+                xs: "300px",
+                sm: "400px",
+                md: "380px",
+                lg: "476px",
+              },
+            }}
+          />
+        </Box>
+        <Box
           styleSheet={{
-            alignSelf: {
-              xs: "center",
-              md: "flex-start",
-            },
-            textDecoration: "none",
-            color: "#07080A",
-            backgroundColor: "#F9FF00",
-            border: "1px solid #F9FF00",
-            paddingVertical: "16px",
-            paddingHorizontal: "32px",
-            fontSize: "16px",
-            transition: ".3s",
-            borderRadius: "8px",
-            hover: {
-              opacity: 1,
-              color: "#FFFFFF",
-              backgroundColor: "transparent",
-            },
-            focus: {
-              opacity: 1,
-              backgroundColor: "transparent",
-            },
+            flex: 1,
+            alignItems: "flex-end",
           }}
         >
-          {i18n.content("7DAYSOFCODE.CTA")}
-        </Link>
+          <Box
+            styleSheet={{
+              maxWidth: "525px",
+            }}
+          >
+            <Text
+              styleSheet={{
+                alignSelf: {
+                  xs: "center",
+                  md: "flex-start",
+                },
+                gap: "0.5em",
+                display: "flex",
+                flexDirection: "row",
+                alignItems: {
+                  xs: "center",
+                  md: "flex-start",
+                },
+                justifyContent: {
+                  xs: "center",
+                  md: "flex-start",
+                },
+                textTransform: "uppercase",
+                color: "#8992a1",
+                fontWeight: "600",
+                fontSize: "0.875rem",
+                lineHeight: "180%",
+                backgroundColor: "#141C2B",
+                borderRadius: "1000px",
+                paddingVertical: "9px",
+                paddingHorizontal: "20px",
+              }}
+              i18nKey="7DAYSOFCODE.PRE_TITLE"
+            />
+            <Text
+              styleSheet={{
+                marginTop: "24px",
+                fontWeight: "600",
+                fontSize: {
+                  xs: "24px",
+                  sm: "32px",
+                  md: "38px",
+                  lg: "48px",
+                },
+                textAlign: {
+                  xs: "center",
+                  sm: "center",
+                  md: "left",
+                },
+                lineHeight: "1",
+              }}
+              i18nKey="7DAYSOFCODE.TITLE"
+              i18nKeyReplace={{
+                strong: ({ children }) => (
+                  <Text
+                    tag="strong"
+                    styleSheet={{
+                      color: "#F9FF00",
+                    }}
+                  >
+                    {children}
+                  </Text>
+                ),
+              }}
+            />
+            <Text
+              styleSheet={{
+                marginTop: "24px",
+                fontSize: "16px",
+                lineHeight: "180%",
+                color: "#8992A1",
+              }}
+              i18nKey="7DAYSOFCODE.DESCRIPTION"
+            />
+            <Link
+              href={i18n.content("7DAYSOFCODE.CTA_LINK")}
+              styleSheet={{
+                marginTop: "40px",
+                alignSelf: {
+                  xs: "center",
+                  md: "flex-start",
+                },
+                textDecoration: "none",
+                color: "#07080A",
+                backgroundColor: "#F9FF00",
+                border: "1px solid #F9FF00",
+                paddingVertical: "16px",
+                paddingHorizontal: "32px",
+                fontSize: "16px",
+                transition: ".3s",
+                borderRadius: "8px",
+                hover: {
+                  opacity: 1,
+                  color: "#FFFFFF",
+                  backgroundColor: "transparent",
+                },
+                focus: {
+                  opacity: 1,
+                  backgroundColor: "transparent",
+                },
+              }}
+            >
+              {i18n.content("7DAYSOFCODE.CTA")}
+            </Link>
+          </Box>
+        </Box>
       </Box>
     </Box>
   );