Deploy

Author: CompuIves

packages/homepage/src/pages/ide/_elements.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { HeroWrapper } from '../../screens/home/hero/elements';
 import { H2 } from '../../components/Typography';
 import Button from '../../components/Button';
 import Collaborate from '../../assets/icons/Collaborate';
@@ -41,7 +40,9 @@ export const Title = styled(H2)`
   }
 `;
 
-export const MacBookWrapper = styled(HeroWrapper)`
+export const MacBookWrapper = styled.div`
+  text-align: center;
+
   margin-top: 0;
   overflow: visible;
   margin-bottom: 8rem;
@@ -294,3 +295,10 @@ export const Border = styled.div`
   left: 50%;
   transform: translateX(-50%);
 `;
+
+export const ImageWrapper = styled.div`
+  img {
+    display: block;
+    box-shadow: 0 -8px 120px #1d1d1d;
+  }
+`;

packages/homepage/src/pages/ide/index.js

@@ -5,7 +5,6 @@ import Layout from '../../components/layout';
 import PageContainer from '../../components/PageContainer';
 import TitleAndMetaTags from '../../components/TitleAndMetaTags';
 import hero from '../../assets/images/hero.png';
-import { ImageWrapper } from '../../screens/home/hero/elements';
 import { P } from '../../components/Typography';
 import tweets from './_tweets';
 
@@ -32,6 +31,7 @@ import {
   ManageIcon,
   HeartIcon,
   Border,
+  ImageWrapper,
 } from './_elements';
 import TemplateUniverse from '../../assets/images/TemplateUniverse.png';
 import containers from '../../assets/images/containers.png';

packages/homepage/src/screens/home/hero/elements.js

@@ -22,16 +22,6 @@ const dropIn = (offset = 100) => keyframes`
   }
 `;
 
-const fadeIn = () => keyframes`
-  0% { 
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-`;
-
 export const EditorElement = styled.img`
   animation: ${props => dropIn(props.i * 250)} 3s;
   animation-delay: ${props => props.i * 100}ms;
@@ -66,41 +56,6 @@ export const SignUp = styled.p`
   margin-bottom: 2.5rem;
 `;
 
-export const ImageWrapper = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-
-  text-align: left;
-  transform-origin: 50% 50%;
-  transform: scale(0.75, 0.75) translate(500px, -250px) rotateY(-10deg)
-    rotateX(5deg);
-  perspective: 100;
-  border-radius: 2px;
-
-  &::after {
-    animation: ${fadeIn()} 1s;
-    animation-delay: 3s;
-    animation-fill-mode: backwards;
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 0,
-      #040404 90%,
-      #040404 100%
-    );
-
-    height: 800px;
-    width: 100%;
-
-    z-index: 10;
-  }
-`;
-
 export const Border = styled.div`
   position: absolute;
   background: ${props => props.theme.homepage.grey};

packages/homepage/src/screens/home/hero/index.js

@@ -22,38 +22,58 @@ import BoxAnimation from './BoxAnimation';
 import { applyParallax } from '../../../utils/parallax';
 
 export default () => {
-  const [boxes, setBoxes] = useState([
-    { position: [0, 0, 10], rotation: [1.2, 0, 0], key: 'initial' },
-  ]);
-  const [sandboxesCreatedCount, setSandboxesCreatedCount] = useState(1);
+  const [boxes, setBoxes] = useState([]);
+  const [sandboxesCreatedCount, setSandboxesCreatedCount] = useState(0);
   const [showPlane, setShowPlane] = useState(true);
 
-  const createBox = React.useCallback(() => {
-    setBoxes(b => {
-      if (b.length > 10) {
-        setShowPlane(false);
-        setTimeout(() => {
-          setShowPlane(true);
-
-          setBoxes(bb => {
-            const newBoxes = [...bb];
-            newBoxes.length = 1;
-            return newBoxes;
-          });
-        }, 1000);
-      }
-      const newBoxes = [
-        {
-          key: Math.floor(Math.random() * 10000) + '',
-          position: [-5 + Math.random() * 10, 0 + Math.random() * 2.5, 15],
-          rotation: [Math.random() * 1, Math.random() * 1, Math.random() * 1],
-        },
-        ...b,
-      ];
-
-      return newBoxes;
-    });
-  }, [setBoxes]);
+  const createBox = React.useCallback(
+    ({ position, rotation } = {}) => {
+      setBoxes(b => {
+        if (b.length > 10) {
+          setShowPlane(false);
+          setTimeout(() => {
+            setShowPlane(true);
+
+            setBoxes(bb => {
+              const newBoxes = [...bb];
+              newBoxes.length = 1;
+              return newBoxes;
+            });
+          }, 1000);
+        }
+        const newBoxes = [
+          {
+            key: Math.floor(Math.random() * 10000) + '',
+            position: position || [
+              -5 + Math.random() * 10,
+              0 + Math.random() * 2.5,
+              15,
+            ],
+            rotation: rotation || [
+              Math.random() * 1,
+              Math.random() * 1,
+              Math.random() * 1,
+            ],
+          },
+          ...b,
+        ];
+
+        return newBoxes;
+      });
+    },
+    [setBoxes]
+  );
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      createBox({ position: [0, 0, 10], rotation: [1.2, 0, 0] });
+      setSandboxesCreatedCount(i => i + 1);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [createBox]);
 
   const socketRef = useRef(
     typeof window === 'undefined'