Merge pull request 'feat: rebrand to H.A.I Learning with updated loader and assets' (#34) from fea/bao-05032026-hailearning into main

Reviewed-on: UKSOURCE/hailearning.edu.vn#34

app/components/Loader.tsx

@@ -3,47 +3,72 @@
 import { useEffect, useState } from "react";
 
 export default function Loader() {
-    const [show, setShow] = useState(true);
+  const [show, setShow] = useState(true);
 
-    useEffect(() => {
+  useEffect(() => {
-        const timer = setTimeout(() => setShow(false), 700);
+    const timer = setTimeout(() => setShow(false), 1100);
-        return () => clearTimeout(timer);
+    return () => clearTimeout(timer);
-    }, []);
+  }, []);
 
-    if (!show) return null;
+  if (!show) return null;
 
-    return (
+  return (
-        <div id="preloader" className="preloader">
+    <div id="preloader" className="preloader">
-            <div className="animation-preloader">
+      <div className="animation-preloader">
-                <div className="spinner"></div>
+        <div className="spinner"></div>
-                <div className="txt-loading">
+        <div className="txt-loading">
-                    <span data-text-preloader="V" className="letters-loading">V</span>
+          <span data-text-preloader="H" className="letters-loading">
-                    <span data-text-preloader="I" className="letters-loading">I</span>
+            H
-                    <span data-text-preloader="S" className="letters-loading">S</span>
+          </span>
-                    <span data-text-preloader="A" className="letters-loading">A</span>
+          <span data-text-preloader="A" className="letters-loading">
-                    <span data-text-preloader="W" className="letters-loading">W</span>
+            A
-                    <span data-text-preloader="A" className="letters-loading">A</span>
+          </span>
-                    <span data-text-preloader="Y" className="letters-loading">Y</span>
+          <span data-text-preloader="I" className="letters-loading">
-                </div>
+            I
-                <p className="text-center">Loading</p>
+          </span>
-            </div>
+          <span data-text-preloader="L" className="letters-loading">
-            <div className="loader">
+            L
-                <div className="row">
+          </span>
-                    <div className="col-3 loader-section section-left">
+          <span data-text-preloader="E" className="letters-loading">
-                        <div className="bg"></div>
+            E
-                    </div>
+          </span>
-                    <div className="col-3 loader-section section-left">
+          <span data-text-preloader="A" className="letters-loading">
-                        <div className="bg"></div>
+            A
-                    </div>
+          </span>
-                    <div className="col-3 loader-section section-right">
+          <span data-text-preloader="R" className="letters-loading">
-                        <div className="bg"></div>
+            R
-                    </div>
+          </span>
-                    <div className="col-3 loader-section section-right">
+          <span data-text-preloader="N" className="letters-loading">
-                        <div className="bg"></div>
+            N
-                    </div>
+          </span>
-                </div>
+          <span data-text-preloader="I" className="letters-loading">
-            </div>
+            I
+          </span>
+          <span data-text-preloader="N" className="letters-loading">
+            N
+          </span>
+          <span data-text-preloader="G" className="letters-loading">
+            G
+          </span>
         </div>
-    );
+        <p className="text-center">Loading</p>
+      </div>
+      <div className="loader">
+        <div className="row">
+          <div className="col-3 loader-section section-left">
+            <div className="bg"></div>
+          </div>
+          <div className="col-3 loader-section section-left">
+            <div className="bg"></div>
+          </div>
+          <div className="col-3 loader-section section-right">
+            <div className="bg"></div>
+          </div>
+          <div className="col-3 loader-section section-right">
+            <div className="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
-

app/layout.tsx

@@ -9,8 +9,8 @@ import MouseCursor from "./components/MouseCursor";
 import Script from "next/script";
 
 export const metadata: Metadata = {
-  title: "Visaway – Immigration & Visa Consulting HTML Template",
+  title: "H.A.I Learning",
-  description: "Visaway – Immigration & Visa Consulting HTML Template",
+  description: "H.A.I Learning",
 };
 
 export default function RootLayout({

public/assets/css/main.css

@@ -7264,43 +7264,67 @@ html.lenis body {
   .animation-preloader
   .txt-loading
   .letters-loading:nth-child(2):before {
-  animation-delay: 0.2s;
+  animation-delay: 0.1s;
 }
 .preloader
   .animation-preloader
   .txt-loading
   .letters-loading:nth-child(3):before {
-  animation-delay: 0.4s;
+  animation-delay: 0.2s;
 }
 .preloader
   .animation-preloader
   .txt-loading
   .letters-loading:nth-child(4):before {
-  animation-delay: 0.6s;
+  animation-delay: 0.3s;
 }
 .preloader
   .animation-preloader
   .txt-loading
   .letters-loading:nth-child(5):before {
-  animation-delay: 0.8s;
+  animation-delay: 0.4s;
 }
 .preloader
   .animation-preloader
   .txt-loading
   .letters-loading:nth-child(6):before {
-  animation-delay: 1s;
+  animation-delay: 0.5s;
 }
 .preloader
   .animation-preloader
   .txt-loading
   .letters-loading:nth-child(7):before {
-  animation-delay: 1.2s;
+  animation-delay: 0.6s;
 }
 .preloader
   .animation-preloader
   .txt-loading
   .letters-loading:nth-child(8):before {
-  animation-delay: 1.4s;
+  animation-delay: 0.7s;
+}
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(8):before {
+  animation-delay: 0.8s;
+}
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(9):before {
+  animation-delay: 0.9s;
+}
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(10):before {
+  animation-delay: 1s;
+}
+.preloader
+  .animation-preloader
+  .txt-loading
+  .letters-loading:nth-child(11):before {
+  animation-delay: 1.1s;
 }
 .preloader .animation-preloader .txt-loading .letters-loading::before {
   animation: letters-loading 4s infinite;