Merge pull request #2 from team-xquare/dev

Develop
team-xquare · Mar 11, 2024 · 600827e · 600827e
2 parents 0e3c44d + 5660446
commit 600827e
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 85 deletions.
diff --git a/src/assets/Docker.svg b/src/assets/Docker.svg
diff --git a/src/components/Main/firstContainer.tsx b/src/components/Main/firstContainer.tsx
@@ -0,0 +1,89 @@
+import styled from '@emotion/styled';
+import MainImg from '@/assets/Main.svg';
+
+export const FirstContainer = () => {
+  return (
+    <Container>
+      <ImgWrapper>
+        <Img src={MainImg} />
+      </ImgWrapper>
+      <MainContainer>
+        <div>
+          프로젝트를 빠르게
+          <br />
+          배포하는 경험을 할 수 있습니다.
+        </div>
+        <div>스퀘어는 보다 쉬운 방법으로 배포할 수 있고 쉽게 모니터링 할 수 있습니다.</div>
+        <div>자세히 보기</div>
+      </MainContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+`;
+
+const MainContainer = styled.div`
+  width: 1170px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  position: absolute;
+  top: 250px;
+  left: auto;
+  right: auto;
+  color: white;
+  z-index: 3;
+  > div:nth-child(1) {
+    font-size: 48px;
+    font-weight: 700;
+  }
+  > div:nth-child(2) {
+    margin: 32px 0 64px 0;
+    font-size: 20px;
+  }
+  > div:nth-child(3) {
+    width: 190px;
+    height: 64px;
+    border: 1px white solid;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 700;
+  }
+`;
+
+const ImgWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3); /* 빨간색으로 변경 */
+    z-index: 2;
+  }
+`;
+
+const Img = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: relative;
+  z-index: 1;
+`;
diff --git a/src/components/Main/secondContainer.tsx b/src/components/Main/secondContainer.tsx
@@ -0,0 +1,109 @@
+import styled from '@emotion/styled';
+
+export const SecondContainer = () => {
+  return (
+    <Container>
+      <LeftBox>
+        <div>
+          스퀘어로 애플리케이션을
+          <br />
+          빠르게 배포하세요.
+        </div>
+        <div>기능에 대해 더 알아보세요</div>
+      </LeftBox>
+      <RightBox>
+        <DescriptionBox>
+          <div>실시간 모니터링</div>
+          <div>
+            스퀘어는 배포한 애플리케이션을 실시간으로
+            <br />
+            지표를 수집하고 제공합니다.
+          </div>
+        </DescriptionBox>
+        <DescriptionBox>
+          <div>실시간 모니터링</div>
+          <div>
+            스퀘어는 배포한 애플리케이션을 실시간으로
+            <br />
+            지표를 수집하고 제공합니다.
+          </div>
+        </DescriptionBox>
+        <DescriptionBox>
+          <div>실시간 모니터링</div>
+          <div>
+            스퀘어는 배포한 애플리케이션을 실시간으로
+            <br />
+            지표를 수집하고 제공합니다.
+          </div>
+        </DescriptionBox>
+        <DescriptionBox>
+          <div>실시간 모니터링</div>
+          <div>
+            스퀘어는 배포한 애플리케이션을 실시간으로
+            <br />
+            지표를 수집하고 제공합니다.
+          </div>
+        </DescriptionBox>
+      </RightBox>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+`;
+
+const LeftBox = styled.div`
+  width: 500px;
+  height: 560px;
+  padding: 32px 0 0 26px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  color: #17181a;
+  > div:nth-child(1) {
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 42px;
+    margin-top: -12px;
+  }
+  > div:nth-child(2) {
+    font-size: 16px;
+    font-weight: 600;
+    color: #9245db;
+    margin-top: 40px;
+    cursor: pointer;
+  }
+`;
+
+const RightBox = styled.div`
+  width: 700px;
+  height: 560px;
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const DescriptionBox = styled.div`
+  width: 350px;
+  height: 280px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: start;
+  color: #17181a;
+  > div:nth-child(1) {
+    font-size: 20px;
+    font-weight: 700;
+  }
+  > div:nth-child(2) {
+    font-size: 16px;
+    line-height: 24px;
+  }
+`;
diff --git a/src/components/Main/thirdContainer.tsx b/src/components/Main/thirdContainer.tsx
@@ -0,0 +1,83 @@
+import styled from '@emotion/styled';
+import DockerImg from '@/assets/Docker.svg';
+
+export const ThirdContainer = () => {
+  return (
+    <Container>
+      <Text>지원 플랫폼</Text>
+      <CardContainer>
+        <CardBox>
+          <div>
+            <img src={DockerImg} />
+          </div>
+          <div>Dockerfile</div>
+          <div>
+            스퀘어에서는 Dockefile을 통해
+            <br />
+            어플리케이션을 컨테이너화할 수 있다면
+            <br />
+            어떤 어플리케이션이든 배포할 수 있으며
+            <br />
+            개발자는 다양한 환경에 대해 고민할
+            <br />
+            필요 없이 배포에 집중할 수 있습니다.
+          </div>
+        </CardBox>
+      </CardContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+`;
+
+const Text = styled.div`
+  font-size: 32px;
+  font-weight: 700;
+  margin-top: 138px;
+  text-align: center;
+`;
+
+const CardContainer = styled.div`
+  height: 472px;
+  margin-top: 92px;
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+`;
+
+const CardBox = styled.div`
+  width: 274px;
+  height: 472px;
+  border: 1px #dcd5e4 solid;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  > div:nth-child(1) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 208px;
+    height: 192px;
+    border-bottom: 1px #dcd5e4 solid;
+    > img {
+      width: 208px;
+    }
+  }
+  > div:nth-child(2) {
+    font-size: 20px;
+    font-weight: 700;
+    margin-top: 26px;
+  }
+  > div:nth-child(3) {
+    font-size: 16px;
+    margin-top: 22px;
+    text-align: center;
+    line-height: 24px;
+  }
+`;
diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx
@@ -63,7 +63,7 @@ const WrapperBackground = styled.div<{ scroll: number }>`
   position: absolute;
   transition:
     opacity 0.25s linear,
-    height 0.5s ease-in-out;
+    height 0.6s ease-out;
   top: 0px;
   left: 0px;
   width: 100vw;