diff --git a/src/patterns/ScreenHeroContainer/index.tsx b/src/patterns/ScreenHeroContainer/index.tsx index 5b320ee95..f6ad33576 100644 --- a/src/patterns/ScreenHeroContainer/index.tsx +++ b/src/patterns/ScreenHeroContainer/index.tsx @@ -39,6 +39,10 @@ export default function ScreenHeroContainer({ xs: "1rem", md: "2.5rem", }, + paddingBottom: { + xs: "4rem", + md: "6rem", + }, }} > @@ -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/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 index 8b51833e5..4508765a2 100644 --- a/src/patterns/ScreenHeroContainer/patterns/ThirdContentSection/ThirdContentSection.tsx +++ b/src/patterns/ScreenHeroContainer/patterns/ThirdContentSection/ThirdContentSection.tsx @@ -27,6 +27,7 @@ export function ThirdContentSection() { styleSheet={{ alignItems: "center", justifyContent: "center", + paddingHorizontal: "20px", maxWidth: "80rem", width: "100%", margin: "0 auto", @@ -138,6 +139,10 @@ export function ThirdContentSection() { fontSize: "16px", lineHeight: "180%", color: "#8992A1", + textAlign: { + xs: "center", + md: "left", + }, }} i18nKey="7DAYSOFCODE.DESCRIPTION" />