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`