diff --git a/src/components/Landing/BackgroundCloud.tsx b/src/components/Landing/BackgroundCloud.tsx index fa78caa..9ebce84 100644 --- a/src/components/Landing/BackgroundCloud.tsx +++ b/src/components/Landing/BackgroundCloud.tsx @@ -11,7 +11,7 @@ const Background = styled.div` bottom: 0px; position: absolute; - width: 100vw; + width: 100%; height: 100%; `; diff --git a/src/components/Landing/FifthSection.tsx b/src/components/Landing/FifthSection.tsx index c92bf54..a24ae36 100644 --- a/src/components/Landing/FifthSection.tsx +++ b/src/components/Landing/FifthSection.tsx @@ -31,7 +31,7 @@ const Title = styled.h2` `; const LottieSection = styled(Lottie)` - margin-top: 90px; + margin-top: 150px; `; const Summary = styled.p` diff --git a/src/components/Landing/Layout.tsx b/src/components/Landing/Layout.tsx index 7292973..1f36acd 100644 --- a/src/components/Landing/Layout.tsx +++ b/src/components/Landing/Layout.tsx @@ -1,11 +1,13 @@ import { ReactElement } from 'react'; import styled from 'styled-components'; +import { useResponsive } from '../../hooks/useResponsive'; interface LandingLayoutProps { children: React.ReactNode; backgroundColor?: string; paddingBottom?: number; backgroundImage?: ReactElement; + isMobile?: boolean; } const LandingLayout = ({ @@ -14,28 +16,31 @@ const LandingLayout = ({ paddingBottom = 0, backgroundImage, }: LandingLayoutProps) => { + const { isMobile } = useResponsive(); + return ( - {children} + + {children} + {backgroundImage} ); }; const LayoutContainer = styled.section` + position: relative; width: 100%; height: 100vh; position: relative; - background-color: ${(props) => props.backgroundColor}; `; const Wrapper = styled.div` width: 100%; - max-width: 100vw; overflow: hidden; height: 100%; - padding-top: 61px; + ${({ isMobile }) => !isMobile && 'padding-top: 61px;'}; display: flex; flex-direction: column; diff --git a/src/components/Landing/ThirdSection.tsx b/src/components/Landing/ThirdSection.tsx index e139195..81b3cfb 100644 --- a/src/components/Landing/ThirdSection.tsx +++ b/src/components/Landing/ThirdSection.tsx @@ -32,10 +32,11 @@ const Title = styled.h2` font-style: normal; font-weight: 700; line-height: normal; + margin-top: 34px; `; const LottieSection = styled(Lottie)` - margin-top: 30px; + margin-top: 100px; `; const Summary = styled.p`