diff --git a/public/images/icon_app_store.png b/public/images/icon_app_store.png new file mode 100644 index 0000000..6a04f6f Binary files /dev/null and b/public/images/icon_app_store.png differ diff --git a/public/images/plandy_mockup_en.png b/public/images/plandy_mockup_en.png new file mode 100644 index 0000000..f28a1cb Binary files /dev/null and b/public/images/plandy_mockup_en.png differ diff --git a/public/images/plandy_mockup_ko.png b/public/images/plandy_mockup_ko.png new file mode 100644 index 0000000..fadb2af Binary files /dev/null and b/public/images/plandy_mockup_ko.png differ diff --git a/src/pages/_components/Intro/Intro.styles.ts b/src/pages/_components/Intro/Intro.styles.ts index 2e27c91..7c2b469 100644 --- a/src/pages/_components/Intro/Intro.styles.ts +++ b/src/pages/_components/Intro/Intro.styles.ts @@ -9,6 +9,7 @@ export const StyledIntro = styled.section` @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) { flex-direction: column; + margin: 0 -24px; } `; @@ -24,6 +25,8 @@ export const TitleBox = styled.div` @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) { padding: 0; + align-items: center; + text-align: center; } `; @@ -43,7 +46,8 @@ export const Title = styled.h1` }) => ({ fontSize: display.large.size, fontWeight: 700, - letterSpacing: display.large.letterSpacing + letterSpacing: display.large.letterSpacing, + lineHeight: "70px" })}; @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) { @@ -65,9 +69,9 @@ export const SubTitle = styled.h2` typography: { headline } } }) => ({ - fontSize: headline.large.size, + fontSize: headline.small.size, fontWeight: 500, - letterSpacing: headline.large.letterSpacing + letterSpacing: headline.small.letterSpacing })}; @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) { @@ -84,9 +88,27 @@ export const SubTitle = styled.h2` `; export const ImageBox = styled.div` - text-align: center; + text-align: right; flex-grow: 1; - padding: ${({ theme: { spacing } }) => `${spacing(20)}px ${spacing(10)}px`}; - border: 1px solid ${({ theme: { palette } }) => palette.box.border}; - border-radius: ${({ theme: { spacing } }) => `${spacing(1)}px`}; + padding: ${({ theme: { spacing } }) => `${spacing(10)}px 0 ${spacing(10)}px ${spacing(8)}px`}; + background-color: ${({ theme: { palette } }) => palette.grey["100"]}; + border-radius: ${({ theme: { spacing } }) => `${spacing(4)}px`}; + overflow: hidden; + + & > img { + max-width: 750px; + width: 100%; + max-height: 574px; + height: auto; + + @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) { + width: 120%; + } + } + + @media (max-width: ${({ theme: { breakpoints } }) => `${breakpoints.sm}px`}) { + text-align: center; + padding: 0; + border-radius: 0; + } `; diff --git a/src/pages/_components/Intro/Intro.tsx b/src/pages/_components/Intro/Intro.tsx index 8c048aa..2e8b2de 100644 --- a/src/pages/_components/Intro/Intro.tsx +++ b/src/pages/_components/Intro/Intro.tsx @@ -2,9 +2,10 @@ import { useTranslation } from "react-i18next"; import Box from "@components/atoms/Box"; import Button from "@components/atoms/Button"; -import Icon from "@components/atoms/Icon"; import Typography from "@components/atoms/Typography"; +import i18n from "@utils/i18n"; + import { ImageBox, StyledIntro, SubTitle, Title, TitleBox } from "./Intro.styles"; function Intro() { @@ -18,18 +19,19 @@ function Intro() { - + );