add: favicon & preload

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "bootstrap": "^5.1.3",
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",

src/App.css

@@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+:root {
+    --primary-color: #041C32;
+    --secondary-color: #04293A;
+    --third-color: #064663;
+    --white-color: #efefef;
+}
+
+.preload-screen {
+    background-color: var(--primary-color);
+    height: 100vh;
+    width: 100%;
+}
+
+img.logo-preload {
+    width: 200px;
+    height: 180px;
+}
+
+.title-preload {
+    font-family: 'Poppins', sans-serif;
+    color: var(--white-color);
+    margin-top: 8px;
+}

src/App.js

@@ -1,11 +1,39 @@
 import { Route, Routes } from "react-router-dom";
+import { Container } from "react-bootstrap";
+import { Helmet } from "react-helmet";
+import { useState } from "react";
 import NavbarTop from "./components/NavbarTop";
 import Surah from "./components/Surah";
 import Ayat from "./components/Ayat";
 import About from "./components/About";
 import NotFound from "./components/NotFound";
+import Logo from "./img/logo.png";
+import 'animate.css';
+import './App.css';
 
 function App() {
+  const [preload, setPreload] = useState(true);
+
+  setTimeout(function() {
+    setPreload(false);
+  }, 1500);
+
+  if(preload) {
+    return (
+      <>
+        <Helmet>
+          <title>Qur'an Digital</title>
+        </Helmet>
+        <Container fluid className="animate__animated animate__fadeOut animate__delay-1s preload-screen d-flex justify-content-center align-items-center">
+          <div className="logo-wrapper">
+            <img className="logo-preload" src={Logo} alt="Qur'an Digital" />
+            <h3 className="title-preload text-center">Qur'an Digital</h3>
+          </div>
+        </Container>
+      </>
+    )
+  }
+
   return (
     <>
       <NavbarTop />