update miletruth page and remove unwanted files

src/components/layout/Header.tsx

@@ -7,7 +7,7 @@
  * Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
  */
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -48,7 +48,7 @@ export default function Header() {
   //   - on doc.ready: $('.header-hide-until-scroll').addClass('header-visible-scrolled')
   //   - on scroll:   toggleClass('dm-header-scrolled', scrollTop > 50)
   const [visibleScrolled, setVisibleScrolled] = useState(false);
-  const [dmHeaderScrolled, setDmHeaderScrolled] = useState(false);
+  const isScrolledRef = useRef(false);
 
   useEffect(() => {
     const handle = requestAnimationFrame(() => {
@@ -58,10 +58,31 @@ export default function Header() {
   }, []);
 
   useEffect(() => {
-    const onScroll = () => setDmHeaderScrolled(window.scrollY > 50);
+    let rafId: number | null = null;
+    const onScroll = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        const scrolled = window.scrollY > 50;
+        if (isScrolledRef.current !== scrolled) {
+          isScrolledRef.current = scrolled;
+          const headerEl = document.querySelector(".header-hide-until-scroll");
+          if (headerEl) {
+            if (scrolled) {
+              headerEl.classList.add("dm-header-scrolled");
+            } else {
+              headerEl.classList.remove("dm-header-scrolled");
+            }
+          }
+        }
+        rafId = null;
+      });
+    };
     onScroll();
     window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
   }, []);
 
   // Mirror of header.php $header_style (line 21): inline opacity:0;visibility:hidden on home (before JS adds .header-visible-scrolled)
@@ -78,7 +99,7 @@ export default function Header() {
     "e-parent",
     "header-hide-until-scroll",
     visibleScrolled ? "header-visible-scrolled" : "",
-    dmHeaderScrolled ? "dm-header-scrolled" : "",
+    isScrolledRef.current ? "dm-header-scrolled" : "",
   ]
     .filter(Boolean)
     .join(" ");

src/components/layout/LoadingScreen.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+
+/**
+ * LoadingScreen
+ * ---------------------------------------------------------------------------
+ * Native reimplementation of the legacy WordPress page-loader: a black
+ * full-screen overlay with a centered, pulsing Doormile logo that fades out.
+ *
+ * Shows on initial load (until the window finishes loading, min ~450ms to avoid
+ * a flash, capped at 2.5s so it never blocks) and again briefly on each route
+ * navigation. CWV-safe: fixed/out-of-flow (no layout shift), logo is priority,
+ * and it never delays hydration.
+ */
+type Phase = "visible" | "hiding" | "gone";
+
+const MIN_SHOW_MS = 450;
+const MAX_SHOW_MS = 2500;
+const NAV_SHOW_MS = 520;
+
+export default function LoadingScreen() {
+  const pathname = usePathname();
+  const [phase, setPhase] = useState<Phase>("visible");
+  const isFirstRender = useRef(true);
+
+  // Initial load: hide once the page is ready.
+  useEffect(() => {
+    const start = performance.now();
+    let began = false;
+    let fadeTimer: ReturnType<typeof setTimeout>;
+
+    const begin = () => {
+      if (began) return;
+      began = true;
+      const wait = Math.max(0, MIN_SHOW_MS - (performance.now() - start));
+      fadeTimer = setTimeout(() => setPhase("hiding"), wait);
+    };
+
+    const cap = setTimeout(begin, MAX_SHOW_MS);
+    const onReady = () => begin();
+
+    if (document.readyState === "complete") begin();
+    else window.addEventListener("load", onReady, { once: true });
+
+    return () => {
+      clearTimeout(cap);
+      clearTimeout(fadeTimer);
+      window.removeEventListener("load", onReady);
+    };
+  }, []);
+
+  // Route navigations: flash the loader briefly for an app-like transition.
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    setPhase("visible");
+    const t = setTimeout(() => setPhase("hiding"), NAV_SHOW_MS);
+    return () => clearTimeout(t);
+  }, [pathname]);
+
+  if (phase === "gone") return null;
+
+  return (
+    <div
+      className={`dm-loader${phase === "hiding" ? " is-hiding" : ""}`}
+      role="status"
+      aria-live="polite"
+      aria-label="Loading"
+      onTransitionEnd={(e) => {
+        if (e.propertyName === "opacity" && phase === "hiding") setPhase("gone");
+      }}
+    >
+      <div className="dm-loader__pulse">
+        <Image
+          src="/images/preloader.png"
+          alt="Doormile"
+          width={200}
+          height={38}
+          priority
+          className="dm-loader__logo"
+        />
+      </div>
+
+      <style>{`
+        .dm-loader {
+          position: fixed;
+          inset: 0;
+          z-index: 100000;
+          display: grid;
+          place-items: center;
+          background: #000;
+          opacity: 1;
+          transition: opacity 0.32s ease;
+          will-change: opacity;
+        }
+        .dm-loader.is-hiding { opacity: 0; pointer-events: none; }
+        .dm-loader__pulse { animation: dmLoaderPulse 1.5s linear infinite; }
+        .dm-loader__logo { width: clamp(140px, 18vw, 200px); height: auto; }
+        @keyframes dmLoaderPulse {
+          50%  { transform: scale(0.85); }
+          100% { transform: scale(1); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .dm-loader__pulse { animation: none; }
+        }
+      `}</style>
+    </div>
+  );
+}