Loading added

package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^1.3.2",
     "jquery": "^3.7.0",
     "react": "^18.2.0",
     "react-animated-cursor": "^2.7.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1",
+    "react-icons": "^4.10.1",
     "react-router-dom": "^6.8.0"
   },
   "devDependencies": {

src/App.css

@@ -1,4 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;400;500&display=swap");
+@import "animate.css";
+
+:root {
+  --anidelay: 5;
+}
 
 body {
   /* width: 100%; */
@@ -20,6 +25,82 @@ body {
   color: #c90076;
 }
 
+.loading-box {
+  width: 300px;
+  position: relative;
+  animation: fadeOut 0.5s 1.1s forwards;
+}
+
+.loading-text-box {
+  position: relative;
+  overflow: hidden;
+}
+
+.loading-text {
+  color: white;
+  text-align: left;
+  font-size: 30px;
+  letter-spacing: 2px;
+  animation: fadeDown 0.8s 1s forwards;
+}
+
+.loading-underline {
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: -15px;
+  width: 0%;
+  height: 2px;
+  background-color: white;
+  animation: widthChange 0.8s 0.2s forwards;
+}
+
+@keyframes widthChange {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 87%;
+  }
+}
+
+@keyframes fadeDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 100;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* .animate__animated.animate__fadeInUp{
+  --animate-duration: 7s;
+} */
+
+/* .line-box .line{
+  animation: fullWidth;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+  color:white;
+}   */
+/* @keyframes fullWidth {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 50%;
+  }
+} */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/App.jsx

@@ -1,12 +1,30 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Layout from "./components/Layout";
 
+import "./App.css";
+
 const App = () => {
-  return (
-    <Layout>
-
-    </Layout>
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(
+    () =>
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 2000),
+    []
   );
+  if (isLoading) {
+    return (
+      <div className="w-full h-screen flex justify-center items-center bg-black ">
+        <div className="loading-box">
+          <div className="loading-text-box">
+            <h3 className="loading-text">Raphtalia Kay</h3>
+          </div>
+          <span className="loading-underline"> </span>
+        </div>
+      </div>
+    );
+  }
+  return <Layout></Layout>;
 };
 
 export default App;

src/components/Cursor.jsx

@@ -10,7 +10,7 @@ const Cursor = () => {
       outerScale={2}
       outerAlpha={0}
       hasBlendMode={true}
-      trailingSpeed={3}
+      trailingSpeed={10}
       innerStyle={{
         backgroundColor: "#c90076",
       }}

src/components/Layout.jsx

@@ -16,7 +16,7 @@ const Layout = ({ children }) => {
         </div>
 
         <div className="absolute top-0 left-0 w-full h-full flex justify-end bg-[#000] bg-opacity-30">
-          <div className="h-full w-[30%] bg-[#ebf6f7] backdrop-blur-[7px] bg-opacity-5"></div>
+          {/* <div className="h-full w-[30%] bg-[#ebf6f7] backdrop-blur-[7px] bg-opacity-5"></div> */}
         </div>
       </div>
     </div>