From 797dfa66cf67cb172bbd91669d89b28009a9f454 Mon Sep 17 00:00:00 2001
From: drgoodcat <60068941+drgoodcat@users.noreply.github.com>
Date: Tue, 5 Oct 2021 18:49:21 +0200
Subject: [PATCH] credits
---
client/src/App.js | 97 +++++++++++----------
client/src/components/Pop-up/index.scss | 18 ----
client/src/pages/Credits/Animation/index.js | 43 +++++++++
client/src/pages/Credits/Animation/team.svg | 26 ++++++
client/src/pages/Credits/index.js | 31 +++++++
client/src/pages/Credits/index.scss | 8 ++
6 files changed, 158 insertions(+), 65 deletions(-)
create mode 100644 client/src/pages/Credits/Animation/index.js
create mode 100644 client/src/pages/Credits/Animation/team.svg
create mode 100644 client/src/pages/Credits/index.js
create mode 100644 client/src/pages/Credits/index.scss
diff --git a/client/src/App.js b/client/src/App.js
index 4d11c4a..6426375 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Users } from "./pages/Users";
+import { Credits } from "./pages/Credits";
import { NotFound } from "./pages/NotFound";
import Logo from "./components/Logo";
import { CreateEvent } from "./pages/CreateEvent";
@@ -11,52 +12,54 @@ import { EVENT_CONTEXT } from "./constants";
import { LoginPage } from "./pages/Login";
export const App = (props) => {
- const [context, setContext] = useState({
- events: props.events,
- updateEvents: function (events = []) {
- if (!Array.isArray(events)) throw new TypeError("Events must come in array");
- setContext({
- events: events,
- updateEvents: this.updateEvents,
- });
- },
- });
+ const [context, setContext] = useState({
+ events: props.events,
+ updateEvents: function (events = []) {
+ if (!Array.isArray(events))
+ throw new TypeError("Events must come in array");
+ setContext({
+ events: events,
+ updateEvents: this.updateEvents,
+ });
+ },
+ });
- return (
-
-
-
-
-
-
-
-
-
-
-
- {Array.isArray(props.events) &&
- props.events.map((e) => {
- return (
-
-
-
- );
- })}
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.isArray(props.events) &&
+ props.events.map((e) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ );
};
diff --git a/client/src/components/Pop-up/index.scss b/client/src/components/Pop-up/index.scss
index 39f04cd..62f3996 100644
--- a/client/src/components/Pop-up/index.scss
+++ b/client/src/components/Pop-up/index.scss
@@ -1,21 +1,3 @@
-/* * {
- 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;
diff --git a/client/src/pages/Credits/Animation/index.js b/client/src/pages/Credits/Animation/index.js
new file mode 100644
index 0000000..0f3a40a
--- /dev/null
+++ b/client/src/pages/Credits/Animation/index.js
@@ -0,0 +1,43 @@
+import React, { useRef, useEffect } from "react";
+import { ReactComponent as Scene } from "./team.svg";
+import gsap from "gsap";
+
+function Team() {
+ const wrapper = useRef(null);
+
+ useEffect(() => {
+ const [elements] = wrapper.current.children;
+
+ const osoba1 = elements.getElementById("osoba1");
+ const osoba2 = elements.getElementById("osoba2");
+ const osoba3 = elements.getElementById("osoba3");
+
+ gsap.set([osoba1, osoba2, osoba3], { autoAlpha: 0 });
+
+ const tl = gsap.timeline({ defaults: { ease: "power3.inOut" } });
+
+ tl.fromTo(
+ osoba1,
+ { y: "-=300" },
+ { duration: 0.5, y: "+=300", autoAlpha: 1 }
+ );
+ tl.fromTo(
+ osoba2,
+ { y: "-=300" },
+ { duration: 0.5, y: "+=300", autoAlpha: 1 }
+ );
+ tl.fromTo(
+ osoba3,
+ { y: "-=300" },
+ { duration: 0.5, y: "+=300", autoAlpha: 1 }
+ );
+ });
+
+ return (
+
+
+
+ );
+}
+
+export default Team;
diff --git a/client/src/pages/Credits/Animation/team.svg b/client/src/pages/Credits/Animation/team.svg
new file mode 100644
index 0000000..c4ec188
--- /dev/null
+++ b/client/src/pages/Credits/Animation/team.svg
@@ -0,0 +1,26 @@
+
diff --git a/client/src/pages/Credits/index.js b/client/src/pages/Credits/index.js
new file mode 100644
index 0000000..e4f4ad7
--- /dev/null
+++ b/client/src/pages/Credits/index.js
@@ -0,0 +1,31 @@
+import "./index.scss";
+import Team from "./Animation/index.js";
+
+import React from "react";
+
+export const Credits = () => {
+ return (
+ //Icons
+
+ );
+};
diff --git a/client/src/pages/Credits/index.scss b/client/src/pages/Credits/index.scss
new file mode 100644
index 0000000..77499ed
--- /dev/null
+++ b/client/src/pages/Credits/index.scss
@@ -0,0 +1,8 @@
+.credits__icon {
+ padding: 32;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 50vh;
+}