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() {
}
+ startIcon={
}
onClick={() => window.open("https://apps.apple.com/us/app/id6736831438")}
>
- Download On the
-
- App store
+
+ App Store
-
+
);