Added popup component

<popupv2> jak coś

src/components/Starter/AnimatedHand/Hand.js

@@ -1,29 +1,29 @@
-import React, { useRef, useEffect } from "react";
-import { ReactComponent as Scene } from "./reka.svg";
-import gsap from "gsap";
-
-function HoldingPlant() {
-  const wrapper = useRef(null);
-
-  useEffect(() => {
-    const [elements] = wrapper.current.children;
-
-    const plant = elements.getElementById("plant");
-    const hand = elements.getElementById("hand");
-
-    gsap.set([plant, hand], { autoAlpha: 0 });
-
-    const tl = gsap.timeline({ defaults: { ease: "power3.inOut" } });
-
-    tl.fromTo(hand, { x: "-=300" }, { duration: 1, x: "+=300", autoAlpha: 1 });
-    tl.fromTo(plant, { y: "+=10" }, { duration: 1, y: "-=10", autoAlpha: 1 });
-  });
-
-  return (
-    <div ref={wrapper} className="App">
-      <Scene />
-    </div>
-  );
-}
-
-export default HoldingPlant;
+import React, { useRef, useEffect } from "react";
+import { ReactComponent as Scene } from "./reka.svg";
+import gsap from "gsap";
+
+function HoldingPlant() {
+  const wrapper = useRef(null);
+
+  useEffect(() => {
+    const [elements] = wrapper.current.children;
+
+    const plant = elements.getElementById("plant");
+    const hand = elements.getElementById("hand");
+
+    gsap.set([plant, hand], { autoAlpha: 0 });
+
+    const tl = gsap.timeline({ defaults: { ease: "power3.inOut" } });
+
+    tl.fromTo(hand, { x: "-=300" }, { duration: 1, x: "+=300", autoAlpha: 1 });
+    tl.fromTo(plant, { y: "+=10" }, { duration: 1, y: "-=10", autoAlpha: 1 });
+  });
+
+  return (
+    <div ref={wrapper} className="App">
+      <Scene />
+    </div>
+  );
+}
+
+export default HoldingPlant;

src/components/Starter/Popup.css

@@ -0,0 +1,52 @@
+/* * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+  font-family: "Fira Sans", sans-serif;
+}
+
+main {
+  padding: 32;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+*/
+
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popup-inner {
+  position: relative;
+  padding-top: 64px;
+  width: 100%;
+  max-width: 440px;
+  background-color: white;
+}
+.popup-text {
+  text-align: center;
+  padding: 32px;
+  width: 100%;
+  background-color: white;
+}
+
+/*.close-btn {
+}*/
+
+.popup-inner .Animation {
+  text-align: left;
+  padding-bottom: 32px;
+}

src/components/Starter/Popup.js

@@ -0,0 +1,32 @@
+import React from "react";
+import "./Popup.css";
+import Hand from "./AnimatedHand/Hand";
+
+function Popup(props) {
+  return props.trigger ? (
+    <div className="popup">
+      <div className="popup-inner">
+        <div className="popup-text">
+          {props.children}
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <button className="close-btn" onClick={() => props.setTrigger(false)}>
+            Zaczynamy!
+          </button>
+          <br />
+          <br />
+        </div>
+        <div className="Animation">
+          <Hand></Hand>
+        </div>
+      </div>
+    </div>
+  ) : (
+    ""
+  );
+}
+
+export default Popup;

src/components/Starter/Popupv2.js

@@ -0,0 +1,30 @@
+import Popup from "./Popup.js";
+import { useState, useEffect } from "react";
+
+function Popupv2() {
+  const [timedPopup, setTimedPopup] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setTimedPopup(true);
+    }, 3000);
+  }, []);
+
+  return (
+    <div className="App">
+      <Popup trigger={timedPopup} setTrigger={setTimedPopup}>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </Popup>
+    </div>
+  );
+}
+
+export default Popupv2;

src/index.js

@@ -1,12 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.scss";
-import { App } from "./App.js";
+import App from "./App.js";
 import "bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-    document.getElementById("root")
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
 );