diff --git a/src/App.jsx b/src/App.jsx index 69fa699..9049cf2 100644 --- a/src/App.jsx +++ b/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); + -
- - - - - - - -
- ) + return () => { + clearTimeout(loaderTimeout); + clearTimeout(contentTimeout); + }; + }, []); + +return ( +
+
+ + {loading ? : ( +
+ + + + + + +
+ )} +
+
+); + } export default App; \ No newline at end of file diff --git a/src/Components/Loader.jsx b/src/Components/Loader.jsx deleted file mode 100644 index 832f7a2..0000000 --- a/src/Components/Loader.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import { Html } from '@react-three/drei' - -const Loader = () => { - return ( - -
-
-
- - ) -} - -export default Loader diff --git a/src/Components/Loader/Loader.jsx b/src/Components/Loader/Loader.jsx new file mode 100644 index 0000000..5c3a7d0 --- /dev/null +++ b/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 ( +
+ + +
+
+
+
+
+
+
+
+
+ We're here +
+
+ + + + 1st Rule Of Programming: If it Works, Don't Touch It. + +
+ + + ); +}; + +export default Loader; diff --git a/src/Loader.css b/src/Loader.css new file mode 100644 index 0000000..1c606bb --- /dev/null +++ b/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; + } + \ No newline at end of file diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..3748a44 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Execom/Execom.jsx b/src/components/Execom/Execom.jsx index c1bf8bc..23b23ca 100644 --- a/src/components/Execom/Execom.jsx +++ b/src/components/Execom/Execom.jsx @@ -98,11 +98,11 @@ function Execom() {
-
-
-
{d.name}
-
{d.review}
-
+
+ +
{d.name}
+
{d.review}
+
))} @@ -120,11 +120,11 @@ function Execom() {
-
-
+
+
{d1.name1}
{d1.review1}
-
+
))}