Execom-Loader

src/App.jsx

@@ -1,8 +1,11 @@
 import './App.css'
+import { useState, useEffect } from "react";
+import Loader from './components/Loader/Loader'
 import Events from './Pages/LandingPages/Events'
 import Featuring from './Pages/LandingPages/Featuring'
 import HeroSection from './Pages/LandingPage/HeroSection/HeroSection'
 import Footer from './Pages/LandingPage/Footer/Footer'
+import ContactUs from './components/ContactUs/ContactUs';
 import AboutUs from  './Components/AboutUs/AboutUs';
 import Execom from './components/Execom/Execom';
 import Navbar from './Pages/LandingPage/Navbar/Navbar'
@@ -16,20 +19,46 @@ AOS.init({
 });
 
 function App() {
-
-  return (
+  const [loading, setLoading] = useState(true);
+  const [loaderOpacity, setLoaderOpacity] = useState(1);
+
+  useEffect(() => {
+    const loaderTimeout = setTimeout(() => {
+      setLoaderOpacity(0.5); 
+    }, 4000);
+
+    const contentTimeout = setTimeout(() => {
+      setLoading(false); 
+    },5000);
+
 
-    <div className={`App bg-[#101011] cursor-none`}>
-      <Cursor />
-      <Navbar />
-      <HeroSection />
-      <AboutUs />
-      <Featuring/>
-      <Events  />
-      <Execom/>
-      <Footer/>
-      </div>
-  )
+    return () => {
+      clearTimeout(loaderTimeout);
+      clearTimeout(contentTimeout);
+    };
+  }, []);
+
+return (
+  <div className={`App bg-[#101011] cursor-none`}>
+          <div className={`transition-opacity duration-1000`} style={{ opacity: loading ? loaderOpacity : 1 }}>
+
+      {loading ? <Loader /> : (
+        <div>
+          <Cursor />
+          <Navbar/>
+          <HeroSection />
+          <AboutUs />
+          <ContactUs />
+          <Featuring />
+          <Footer />
+          <Events />
+          <Execom />
+        </div>
+      )}
+    </div>
+  </div>
+);
+
 }
 
 export default App;

src/Components/Loader/Loader.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import '../../Loader.css';
+import logo from '../../assets/logo.svg';
+
+const Loader = () => {
+  return (
+    <div className=' flex flex-col items-center justify-center  h-screen'>
+
+
+      <div className="relative">
+        <div className="coffee ">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <div className='absolute top-0 left-0 right-0 bottom-0 p-2'>
+          <img className='w-full h-full' src={logo} alt="We're here" />
+        </div>
+      </div>
+
+
+        <span className='text-white p-5' >
+            1st Rule Of Programming: If it Works, Don't Touch It.
+        </span>
+    </div>
+
+
+  );
+};
+
+export default Loader;

src/Loader.css

@@ -0,0 +1,86 @@
+/**
+  * Coffee
+  *
+  * @author jh3y - jheytompkins.com
+*/
+@-webkit-keyframes coffee {
+    100% {
+      opacity: 0;
+      -webkit-transform: translateY(-200%);
+              transform: translateY(-200%); } }
+  @keyframes coffee {
+    100% {
+      opacity: 0;
+      -webkit-transform: translateY(-200%);
+              transform: translateY(-200%); } }
+
+  .coffee {
+    background: #fff;
+    display: grid;
+    border-radius: 4px;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 1fr;
+    height: 60px;
+    position: relative;
+    width: 60px;
+    padding: 2px;
+    justify-items: center; }
+    .coffee:before {
+      -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+      content: '';
+      height: 20px;
+      width: 20px;
+      border: 4px solid #fff;
+      position: absolute;
+      top: 50%;
+      margin-top: -13px;
+      margin-left: -10px;
+      left: 100%;
+      border-radius: 4px; }
+    .coffee div {
+      height:30px;
+      width: 8px;
+      background: #fff;
+      opacity: 0.6;
+      -webkit-animation: coffee 2s infinite;
+              animation: coffee 2s infinite;
+
+            }
+              .coffee div:nth-child(1) {
+                -webkit-animation-delay: 0.4s;
+                animation-delay: 0.4s;
+              }
+
+              .coffee div:nth-child(2) {
+                -webkit-animation-delay: 0.6s;
+                animation-delay: 0.8s;
+              }
+
+              .coffee div:nth-child(3) {
+                -webkit-animation-delay: 1.2s;
+                animation-delay: 1.2s;
+              }
+
+              .coffee div:nth-child(4) {
+                -webkit-animation-delay: 1.6s;
+                animation-delay: 1.6s;
+              }
+
+              .coffee div:nth-child(5) {
+                -webkit-animation-delay: 2s;
+                animation-delay: 2s;
+              }
+
+              .transition-opacity {
+                transition: opacity 1s ease-in-out;
+              }
+
+              .opacity-0 {
+                opacity: 0;
+              }
+
+              .opacity-100 {
+                opacity: 1;
+              }
+

src/components/Execom/Execom.jsx

@@ -98,11 +98,11 @@ function Execom() {
               <div key={index} className="relative cardSize bg-container card-hover">
                 <div className="absolute blueBox  rectangle  bg-[#080AA4]" />
                 <img className="absolute imgSize -ml-2 " src={d.img} alt="" />
-                <div className="absolute blackBox   bottom-0 w-full">
-                  <div className="bg-black  bg-opacity-60 w-full">
-                    <div className="text-white   text-[15px] font-bold">{d.name}</div>
-                    <div className="text-white   text-[15px] font-light">{d.review}</div>
-                  </div>
+                <div className="absolute left-0 flex flex-col items-center bottom-0 bg-black bg-opacity-60 w-full">
+
+                    <div className="text-white text-[15px] font-bold">{d.name}</div>
+                    <div className="text-white text-[15px] font-light">{d.review}</div>
+
                 </div>
               </div>
             ))}
@@ -120,11 +120,11 @@ function Execom() {
               <div key={index} className="relative cardSize bg-container card-hover">
                 <div className="absolute blueBox  rectangle   bg-[#080AA4]" />
                 <img className="absolute imgSize -ml-2  bottom-0" src={d1.img1} alt="" />
-                <div className="absolute blackBox   bottom-0 w-full">
-                  <div className="bg-black  bg-opacity-60 w-full ">
+                <div className="absolute left-0 flex flex-col items-center bottom-0 bg-black bg-opacity-60 w-full">
+
                     <div className="text-white  text-[15px] font-bold">{d1.name1}</div>
                     <div className="text-white text-[15px] font-light">{d1.review1}</div>
-                  </div>
+
                 </div>
               </div> 
             ))}