HimanshuNarware · PSS2134 · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024
diff --git a/public/Preloader.mp4 b/public/Preloader.mp4
diff --git a/public/index.html b/public/index.html
@@ -28,38 +28,8 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>CareerZunction</title>
   <style>
-    .loading {
-      -webkit-animation: sk-scaleout 1s infinite ease-in-out;
-      animation: sk-scaleout 1s infinite ease-in-out;
-      background-color: rgb(148, 22, 233);
-      border-radius: 100%;
-      height: 6em;
-      width: 6em;
-
-    }
-
-    .container {
-      background-color: black;
-      height: 100vh;
-      width: 100vw;
-      justify-content: center;
-      align-items: center;
-
-    }
-
-    @keyframes sk-scaleout {
-      0% {
-        -webkit-transform: scale(0);
-        transform: scale(0);
-      }
-
-      100% {
-        -webkit-transform: scale(1);
-        opacity: 0.5;
-        transform: scale(1);
-      }
-    }
 
+
     .circle {
             position: absolute;
             width: 28px;
@@ -77,7 +47,7 @@
             width: 100%;
             height: 100%;
             pointer-events: none;
-            z-index: 9999;
+            z-index: 99999;
         } 
 
         @media (max-width: 768px) {
@@ -90,10 +60,6 @@
 </head>
 
 <body>
-  <div id="spinner" class="container">
-    <div class="loading"></div>
-  </div>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
 
   <div class="circle-container">
@@ -168,36 +134,6 @@
 
   </script>
 
-  <button id="scrollToTopBtn"><i class="fa-solid fa-arrow-up"></i></button>
-
-  <noscript>
-    <div class="noscript-message">
-      You need to enable JavaScript to run this app.
-    </div>
-  </noscript>
-
-  <script>
-    // Get the button
-    let mybutton = document.getElementById("scrollToTopBtn");
-
-    // When the user scrolls down 20px from the top of the document, show the button
-    window.onscroll = function () {
-      scrollFunction();
-    };
-
-    function scrollFunction() {
-      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-        mybutton.classList.add("show");
-      } else {
-        mybutton.classList.remove("show");
-      }
-    }
-
-    // When the user clicks on the button, scroll to the top of the document
-    mybutton.onclick = function () {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    };
-  </script>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.js b/src/App.js
@@ -17,16 +17,7 @@ import PrivacyPolicy from "./Component/PrivacyPolicy";
 import TermsAndConditions from "./Component/Terms";
 
 function App() {
-  const [loading, setLoading] = useState(true);
-  const spinner = document.getElementById("spinner");
-  if (spinner) {
-    setTimeout(() => {
-      spinner.style.display = "none";
-      setLoading(false);
-    }, 2000);
-  }
   return (
-    !loading && (
 
       <div>
         <Navbar />
@@ -46,7 +37,6 @@ function App() {
         </Routes>
         <Footer />
       </div>
-    )
 
   );
 }

diff --git a/src/Component/Contact.jsx b/src/Component/Contact.jsx
@@ -11,6 +11,7 @@ import { FaFacebookF } from "react-icons/fa";
 import { BsYoutube } from "react-icons/bs";
 import emailjs from "@emailjs/browser";
 import Tilt from "react-parallax-tilt";
+import Preloader from './Preloader';
 
 function Contact() {
   const [messageVisible, setMessageVisible] = useState(false);
@@ -49,6 +50,8 @@ function Contact() {
   };
 
   return (
+    <>
+    <Preloader />
     <div className="p" style={{display: 'flex'}}>
       <div className="card" style={{maxWidth:"30%",margin:"30px"}}>
       <Tilt>
@@ -126,6 +129,7 @@ function Contact() {
         )}
       </div>
     </div>
+    </>
   );
 }
 

diff --git a/src/Component/Contributors.jsx b/src/Component/Contributors.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import './Contributors.css';
+import Preloader from './Preloader';
 
 function Contributors() {
   const [contributors, setContributors] = useState([]);
@@ -20,6 +21,8 @@ function Contributors() {
   }, []);
 
   return (
+    <>
+    <Preloader />
     <div className="contributors-container">
       <h1 className="contributors-title">Our Contributors</h1>
       <div className="contributors-grid">
@@ -45,6 +48,7 @@ function Contributors() {
         ))}
       </div>
     </div>
+    </>
   );
 }
 

diff --git a/src/Component/Documetation/Blog.jsx b/src/Component/Documetation/Blog.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import './blog.css';
+import Preloader from '../Preloader';
 
 function Blog() {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth > 1024);
@@ -20,6 +21,9 @@ function Blog() {
   }
 
   return (
+
+    <>
+    <Preloader />
     <section className="testimonials" id="testimonials">
       <h2 className="testimonial-heading section__title" data-aos="fade-in">Testimonials</h2>
       <div className="testimonial-container">
@@ -62,6 +66,7 @@ function Blog() {
         ))}
       </div>
     </section>
+    </>
   );
 }
 

diff --git a/src/Component/Documetation/Doc.jsx b/src/Component/Documetation/Doc.jsx
@@ -1,6 +1,6 @@
 /** @format */
 
-
+import Preloader from '../Preloader';
 import React from 'react';
 import './Doc.css';
 import img1 from '../../image/Contribution/1.png';
@@ -16,6 +16,8 @@ import Detail from './Detail';
 
 function Doc() {
   return (
+    <>
+    <Preloader />
     <div
       className="document"
       style={{ backgroundColor: "black", overflow: "hidden" }}
@@ -195,6 +197,7 @@ function Doc() {
       <p className="line"></p>
       <Detail />
     </div>
+    </>
   );
 }
 

diff --git a/src/Component/Documetation/Internship/InternPage.jsx b/src/Component/Documetation/Internship/InternPage.jsx
@@ -4,6 +4,7 @@ import "./internpage.css";
 import { useRef, useState, useEffect } from "react";
 import PaginatedItems from "../../pagination";
 import internshipsData from "../../../DB/DataBase.json";
+import Preloader from "../../Preloader";
 
 let InternPage = () => {
   // Dispatch and Subscribe
@@ -121,6 +122,9 @@ let InternPage = () => {
   }
 
   return (
+
+    <>
+    <Preloader />
     <div style={{ background: "black" }}>
       <p className="page-summary">{pageSummary}</p>
       <div className="filterContainer">
@@ -191,6 +195,7 @@ let InternPage = () => {
         setPageSummary={setPageSummary}
       />
     </div>
+    </>
   );
 };
 

diff --git a/src/Component/Home.jsx b/src/Component/Home.jsx
@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import '../Style/Home.css';
 import '../Style/util.css';
+import Preloader from './Preloader';
 import bg from '../image/bg.gif';
 import code from '../image/code.jpg';
 import code1 from '../image/code1.jpg';
@@ -39,6 +40,8 @@ function Home() {
 
 
   return (
+    <>
+    <Preloader />
     <div>
       <div className="page_0">
         <div className="bx-1">
@@ -207,6 +210,7 @@ function Home() {
       <FAQ />
       <Testimonials />
     </div>
+    </>
   );
 }
 

diff --git a/src/Component/Preloader.css b/src/Component/Preloader.css
@@ -0,0 +1,46 @@
+.preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000000; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 99999; 
+    transition: opacity 0.5s ease-out; 
+    overflow: hidden; 
+  }
+
+  .preloader-video {
+    position: absolute; 
+    top: 50%;
+    left: 50%;
+    width: 100vw; 
+    height: 100vh; 
+    object-fit: cover; 
+    transform: translate(-50%, -50%);
+    filter: hue-rotate(200deg) saturate(2) brightness(1) contrast(1.2); 
+  }
+
+  .preloader.fade-out {
+    opacity: 0;
+  }
+
+
+  @media (max-width: 780px) {
+
+    .preloader-video {
+        position: absolute; 
+        top: 52%;
+        left: 52%;
+        width: 100vw; 
+        height: 100vh; 
+        object-fit: cover; 
+        transform: translate(-50%, -50%); 
+        filter: hue-rotate(200deg) saturate(2) brightness(1) contrast(1.2); 
+      }
+
+  }
+
diff --git a/src/Component/Preloader.jsx b/src/Component/Preloader.jsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import './Preloader.css'; 
+
+const Preloader = () => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [fadeOut, setFadeOut] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setFadeOut(true); 
+      setTimeout(() => setIsVisible(false), 500); 
+    }, 2500);
+
+    return () => clearTimeout(timer); 
+  }, []);
+
+  return (
+    isVisible && (
+      <div className={`preloader ${fadeOut ? 'fade-out' : ''}`}>
+        <video autoPlay muted loop className="preloader-video">
+          <source src="/preloader.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+    )
+  );
+};
+
+export default Preloader;
diff --git a/src/Component/ScrollToTop.jsx b/src/Component/ScrollToTop.jsx