changes in animation

IEDCMEC · May 12, 2024 · 8b9737f · 8b9737f
1 parent b54f96c
commit 8b9737f
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 3 deletions.
diff --git a/src/Components/Animation/Animation.js b/src/Components/Animation/Animation.js
@@ -1,4 +1,4 @@
-import "./Animation.scss";
+/*import "./Animation.scss";
 import bubble8 from "../../assets/bubble_8.svg";
 import iedclogo from "../../assets/logo_1.svg";
 import animation from "../../animations/landing.json";
@@ -68,4 +68,71 @@ const Animation = () => {
     </>
   );
 };
+export default Animation;*/
+
+import "./Animation.scss";
+import bubble8 from "../../assets/bubble_8.svg";
+import iedclogo from "../../assets/logo_1.svg";
+import animation from "../../animations/landing.json";
+import Lottie from "react-lottie";
+import { signIn } from "../../Firebase/firebase";
+import { useContext } from "react";
+import { AuthContext } from "../../Firebase/Auth/Auth";
+import { useHistory } from "react-router-dom";
+import { useEffect } from "react";
+import { FcGoogle } from "react-icons/fc";
+import { useState } from "react";
+import { ProjectContext } from "../../contexts/ProjectContext";
+
+const Animation = () => {
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: animation,
+    rendererSettings: { preserveAspectRatio: "xMidYMid slice" },
+  };
+  const { profile } = useContext(ProjectContext);
+  const [clicked, setClicked] = useState(false);
+  const history = useHistory();
+  const newprojectClick = async () => {
+    setClicked(true);
+    try {
+      await signIn().then(() => history.push('/projects'))
+    } catch (error) {
+      // console.log(error);
+    }
+  };
+  return (
+    <>
+      <div className="animation_main">
+        <div className="left-section">
+          <div className="content">
+            <h1 className="title" data-aos="zoom-in" data-aos-duration="2000">
+            IEDC MEC COLLAB
+            </h1>
+            <p className="description" data-aos="zoom-in" data-aos-duration="2000">
+            description here...
+            </p>
+            {!profile && (
+              <div className="signin_btn" onClick={newprojectClick}>
+                <FcGoogle size={35} /> Sign in with Google
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="right-section">
+          <img src={bubble8} alt="" className="bubble_8" />
+          <img src={iedclogo} alt="" className="iedc_logo" />
+          <Lottie
+            animationData={animation}
+            loop={true}
+            autoPlay={true}
+            options={defaultOptions}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
 export default Animation;
+
diff --git a/src/Components/Animation/Animation.scss b/src/Components/Animation/Animation.scss
@@ -1,4 +1,4 @@
-.animation_main {
+/*.animation_main {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -128,4 +128,122 @@
 }
 .google_logo {
   pointer-events: none;
+}*/
+
+.animation_main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 8rem;
+  position: relative;
+
+  .left-section {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0 2rem;
+
+    .content {
+      text-align: left;
+
+      .title {
+        font-size: 46px;
+        color: #850000;
+        font-weight: 800;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        margin-bottom: 1rem;
+      }
+
+      .description {
+        font-size: 18px;
+        color: #333;
+        margin-bottom: 2rem;
+      }
+
+      .signin_btn {
+        background-color: #850000;
+        color: white;
+        height: 60px;
+        width: 250px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: 15px;
+        font-weight: 600;
+        font-size: 18px;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        gap: 0.6rem;
+        transition: background-color 0.3s ease;
+        margin-top:1rem;
+
+        &:hover {
+          background-color: #a50000;
+        }
+      }
+    }
+  }
+
+  .right-section {
+    position: relative;
+    width: 60%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .bubble_8 {
+      z-index: -1;
+      pointer-events: none;
+      position: absolute;
+      bottom: -10px;
+      width: 102%;
+    }
+
+    .iedc_logo {
+      pointer-events: none;
+      position: absolute;
+      top: 22%;
+      right: 26%;
+      z-index: 2;
+    }
+  }
+
+  @media (max-width: 1065px) {
+    .left-section {
+      width: 80%;
+    }
+  }
+
+  @media (max-width: 882px) {
+    flex-direction: column;
+
+    .left-section,
+    .right-section {
+      width: 100%;
+    }
+
+    .left-section {
+      align-items: center;
+    }
+
+    .right-section {
+      margin-top: 2rem;
+      order: -1;
+    }
+
+    .iedc_logo {
+      display: none;
+    }
+
+    .signin_btn {
+      width: 220px;
+      height: 50px;
+      font-size: 16px;
+    }
+  }
 }
diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css
@@ -17,7 +17,7 @@
   list-style: none;
   display: grid;
   grid-template-columns: repeat(6, auto);
-  grid-gap: 20px;
+  grid-gap: 30px;
   text-align: center;
   height: 100%;
 }