Revert "Merge pull request #158 from calmery-chan/published-content-lp"

This reverts commit 4476c51, reversing
changes made to bf6ad99.

src/components/lp/Badge.tsx

@@ -12,7 +12,7 @@ export default function Badge() {
   return (
     <Wrapper ref={targetRef} isIntersected={isIntersected}>
       <Bg src="/lp/story/badge-bg.svg" isIntersected={isIntersected} />
-      <Text src="/lp/story/badge-text-published.svg" />
+      <Text src="/lp/story/badge-text.svg" />
     </Wrapper>
   );
 }
@@ -92,6 +92,6 @@ const Text = styled.img`
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 68%;
+  width: 85%;
   transform: translate(-50%, -50%);
 `;

src/components/lp/MainContentLink.tsx

@@ -32,12 +32,10 @@ export default function MainContentLink() {
               src="/lp/decoration/triangle.svg"
             />
           </div>
-          <Anchor href="/exhibition">
-            <Button
-              src="/lp/main-content-link/button.svg"
-              isIntersected={isIntersected}
-            />
-          </Anchor>
+          <Button
+            src="/lp/main-content-link/coming-soon.svg"
+            isIntersected={isIntersected}
+          />
         </ButtonWrapper>
       </Inner>
     </Wrapper>
@@ -141,32 +139,14 @@ const popin = keyframes`
 
 const ButtonWrapper = styled.div`
   position: relative;
-  padding: 60px;
-`;
-
-const Anchor = styled.a`
-  display: block;
-  transition: transform 0.16s ease-out;
-
-  &:hover {
-    transform: scale(1.04);
-  }
-
-  &:active {
-    transform: scale(0.96);
-  }
 `;
 
 const Button = styled.img<{ isIntersected: boolean }>`
   position: relative;
   display: block;
-  height: 56px;
+  height: 180px;
   opacity: 0;
 
-  ${media.smallDown} {
-    height: 50px;
-  }
-
   ${({ isIntersected }) =>
     isIntersected &&
     css`

src/components/lp/MainVisual.tsx

@@ -25,9 +25,11 @@ const Wrapper = styled.div`
 const scaleIn = keyframes`
   from {
     transform: scale(1.09);
+    opacity: 0;
   }
   to {
     transform: scale(1);
+    opacity: 1;
   }
 `;
 
@@ -54,7 +56,8 @@ const Image = styled.div`
     width: 100%;
     height: 100%;
     background: url(/lp/main-illust-min.jpg) center / cover no-repeat;
-    animation: ${scaleIn} 2s cubic-bezier(0, 0, 0.19, 1.01) 2.4s both;
+    opacity: 0;
+    animation: ${scaleIn} 2s cubic-bezier(0, 0, 0.19, 1.01) 0s both;
   }
 `;
 
@@ -71,13 +74,13 @@ const Logo = styled.img`
   position: absolute;
   bottom: 10%;
   left: 10%;
-  width: 38%;
+  width: 42%;
   opacity: 0;
-  animation: ${fadeIn} 2s cubic-bezier(0, 0, 0.19, 1.01) 2.8s both;
+  animation: ${fadeIn} 2s cubic-bezier(0, 0, 0.19, 1.01) 0.8s both;
 
   ${media.smallDown} {
-    bottom: 10%;
+    bottom: 13%;
     left: 4%;
-    width: 50%;
+    width: 54%;
   }
 `;

src/pages/index.tsx

@@ -1,14 +1,12 @@
 import styled from "@emotion/styled";
 import { NextPage } from "next";
 import React from "react";
-import LoadingIcon from "../components/lp/LoadingIcon";
 import MainVisual from "../components/lp/MainVisual";
 
 const Home: NextPage = () => {
   return (
     <Wrapper>
       <MainVisual />
-      <LoadingIcon />
     </Wrapper>
   );
 };