BikerViking · BikerViking · Aug 27, 2025 · Aug 27, 2025
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/client/eslint.config.js b/client/eslint.config.js
diff --git a/client/src/modules/sections/Hero.tsx b/client/src/modules/sections/Hero.tsx
@@ -1,43 +1,63 @@
-import React, { useEffect, useRef } from 'react'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
-gsap.registerPlugin(ScrollTrigger)
+import React, { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+gsap.registerPlugin(ScrollTrigger);
 
-export function Hero(){
-  const ref = useRef<HTMLDivElement>(null)
-  useEffect(()=>{
-    const ctx = gsap.context(()=>{
-      const tl = gsap.timeline({
-        scrollTrigger: {
-          trigger: '#hero',
-          start: 'top top',
-          end: '+=120%',
-          scrub: true
-        }
-      })
-      tl.to('.layer--back', {yPercent:-20}, 0)
-      tl.to('.layer--mid', {yPercent:-12}, 0)
-      tl.to('.layer--front', {yPercent:-6}, 0)
-    }, ref)
-    return ()=> ctx.revert()
-  },[])
+export function Hero() {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const ctx = gsap.context((self) => {
+      const mm = gsap.matchMedia(self);
+      mm.add("(prefers-reduced-motion: no-preference)", () => {
+        const tl = gsap.timeline({
+          scrollTrigger: {
+            trigger: "#hero",
+            start: "top top",
+            end: "+=120%",
+            scrub: true,
+          },
+        });
+        tl.to(".layer--back", { yPercent: -20 }, 0);
+        tl.to(".layer--mid", { yPercent: -12 }, 0);
+        tl.to(".layer--front", { yPercent: -6 }, 0);
+      });
+    }, ref);
+    return () => ctx.revert();
+  }, []);
   return (
-    <section id="hero" ref={ref} className="relative min-h-[100svh] grid place-items-center overflow-hidden">
+    <section
+      id="hero"
+      ref={ref}
+      className="relative min-h-[100svh] grid place-items-center overflow-hidden"
+    >
       <div className="absolute inset-0 -z-10">
-        <div className="layer--back absolute inset-0 blur-2xl opacity-60 bg-[radial-gradient(60vw_60vh_at_20%_20%,#C0C0C0_35%,transparent),radial-gradient(60vw_60vh_at_80%_60%,#E5E4E2_30%,transparent)]"/>
-        <div className="layer--mid absolute inset-0 blur-xl opacity-40 bg-[radial-gradient(60vw_60vh_at_40%_80%,#E5E4E2_25%,transparent)] mix-blend-screen"/>
-        <div className="layer--front absolute inset-0 opacity-30"/>
+        <div className="layer--back absolute inset-0 blur-2xl opacity-60 bg-[radial-gradient(60vw_60vh_at_20%_20%,#C0C0C0_35%,transparent),radial-gradient(60vw_60vh_at_80%_60%,#E5E4E2_30%,transparent)]" />
+        <div className="layer--mid absolute inset-0 blur-xl opacity-40 bg-[radial-gradient(60vw_60vh_at_40%_80%,#E5E4E2_25%,transparent)] mix-blend-screen" />
+        <div className="layer--front absolute inset-0 opacity-30" />
       </div>
       <div className="text-center px-4">
         <h1 className="text-[clamp(40px,8vw,120px)] leading-[0.9] font-extrabold tracking-tight">
           Mobile. Certified. Insured. Precise.
         </h1>
-        <p className="text-muted mt-4 max-w-2xl mx-auto">On‑site notarization and loan signings—Hellertown, PA and surrounding areas. NNA Certified & insured.</p>
+        <p className="text-muted mt-4 max-w-2xl mx-auto">
+          On‑site notarization and loan signings—Hellertown, PA and surrounding
+          areas. NNA Certified & insured.
+        </p>
         <div className="mt-6 flex gap-3 justify-center flex-wrap">
-          <a className="bg-silver text-black font-extrabold rounded-lg shadow-glass px-4 py-2" href="#contact">Book a Signing</a>
-          <a className="border border-white/15 rounded-lg px-4 py-2" href="tel:+12673099000">Call (267) 309‑9000</a>
+          <a
+            className="bg-silver text-black font-extrabold rounded-lg shadow-glass px-4 py-2"
+            href="#contact"
+          >
+            Book a Signing
+          </a>
+          <a
+            className="border border-white/15 rounded-lg px-4 py-2"
+            href="tel:+12673099000"
+          >
+            Call (267) 309‑9000
+          </a>
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/client/src/modules/sections/Testimonials.tsx b/client/src/modules/sections/Testimonials.tsx
@@ -1,44 +1,103 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { gsap } from 'gsap'
+import React, { useEffect, useRef, useState } from "react";
+import { gsap } from "gsap";
 
-const DATA: {quote:string, author:string}[] = [
-  {quote: 'On time, professional, and kind. Got our refinance done flawlessly.', author: 'J. Ramirez'},
-  {quote: 'Showed up after hours at the hospital and handled everything smoothly.', author: 'K. Patel'},
-  {quote: 'As a title office, we need perfection. They delivered.', author: 'J. Li, Escrow Officer'},
-  {quote: 'Fast response, clear communication, zero errors.', author: 'M. O’Connor'},
-]
+const DATA: { quote: string; author: string }[] = [
+  {
+    quote:
+      "On time, professional, and kind. Got our refinance done flawlessly.",
+    author: "J. Ramirez",
+  },
+  {
+    quote:
+      "Showed up after hours at the hospital and handled everything smoothly.",
+    author: "K. Patel",
+  },
+  {
+    quote: "As a title office, we need perfection. They delivered.",
+    author: "J. Li, Escrow Officer",
+  },
+  {
+    quote: "Fast response, clear communication, zero errors.",
+    author: "M. O’Connor",
+  },
+];
 
-export function Testimonials(){
-  const [i, setI] = useState(0)
-  const [data, setData] = useState<{quote:string, author:string}[]>(DATA)
-  useEffect(()=>{ fetch('/api/cms/testimonials').then(r=>r.json()).then(j=> setData(j.data || DATA)) },[])
-  const wrapRef = useRef<HTMLDivElement>(null)
-  useEffect(()=>{
-    const el = wrapRef.current; if(!el) return
-    const tl = gsap.timeline({ repeat: -1 })
-    tl.to({}, { duration: 4 })
-      .add(()=> setI(prev => (prev + 1) % Math.max(1, data.length)))
-    return () => { tl.kill() }
-  },[data])
+export function Testimonials() {
+  const [i, setI] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const [data, setData] = useState<{ quote: string; author: string }[]>(DATA);
+  useEffect(() => {
+    fetch("/api/cms/testimonials")
+      .then((r) => r.json())
+      .then((j) => setData(j.data || DATA));
+  }, []);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const tlRef = useRef<gsap.core.Timeline | null>(null);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    tlRef.current = gsap
+      .timeline({
+        repeat: -1,
+        paused: paused,
+        onRepeat: () => setI((prev) => (prev + 1) % Math.max(1, data.length)),
+      })
+      .to({}, { duration: 4 });
+    return () => {
+      tlRef.current?.kill();
+    };
+  }, [data]);
 
-  useEffect(()=>{
-    const el = wrapRef.current; if(!el) return
-    gsap.fromTo(el.querySelector('.card'), { y: 20, opacity: 0 }, { y:0, opacity:1, duration:.6, ease:'power3.out' })
-  }, [i])
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    gsap.fromTo(
+      el.querySelector(".card"),
+      { y: 20, opacity: 0 },
+      { y: 0, opacity: 1, duration: 0.6, ease: "power3.out" },
+    );
+  }, [i]);
+
+  useEffect(() => {
+    if (tlRef.current) {
+      if (paused) tlRef.current.pause();
+      else tlRef.current.play();
+    }
+  }, [paused]);
 
   return (
-    <section id="testimonials" className="min-h-[80svh] grid place-items-center px-4">
+    <section
+      id="testimonials"
+      className="min-h-[80svh] grid place-items-center px-4"
+    >
       <div ref={wrapRef} className="w-full max-w-4xl">
-        <div className="card rounded-2xl border border-white/10 bg-white/5 p-8 shadow-glass text-center">
-          <p className="text-2xl leading-snug max-w-3xl mx-auto">“{(data[i]?.quote || 'Loading…')}”</p>
-          <p className="mt-4 text-muted">— {(data[i]?.author || '')}</p>
+        <div className="card rounded-2xl border border-white/10 bg-white/5 p-8 shadow-glass text-center relative">
+          <button
+            onClick={() => setPaused((p) => !p)}
+            aria-label={paused ? "Play testimonials" : "Pause testimonials"}
+            className="absolute top-4 right-4 text-muted hover:text-fg"
+          >
+            {paused ? "▶" : "❚❚"}
+          </button>
+          <p className="text-2xl leading-snug max-w-3xl mx-auto">
+            “{data[i]?.quote || "Loading…"}”
+          </p>
+          <p className="mt-4 text-muted">— {data[i]?.author || ""}</p>
           <div className="mt-6 flex gap-2 justify-center">
-            {data.map((_, idx)=>(
-              <button key={idx} aria-label={'Go to slide ' + (idx+1)} onClick={()=>setI(idx)} className={`w-2.5 h-2.5 rounded-full ${i===idx?'bg-platinum':'bg-white/20'}`}/>
+            {data.map((_, idx) => (
+              <button
+                key={idx}
+                aria-label={"Go to slide " + (idx + 1)}
+                onClick={() => {
+                  setI(idx);
+                  setPaused(true);
+                }}
+                className={`w-2.5 h-2.5 rounded-full ${i === idx ? "bg-platinum" : "bg-white/20"}`}
+              />
             ))}
           </div>
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,44 @@
+import tsParser from "@typescript-eslint/parser";
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import { fileURLToPath } from "url";
+import path from "path";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default [
+  {
+    ignores: [
+      "node_modules",
+      "dist",
+      "build",
+      "client/dist",
+      "client/postcss.config.js",
+      "client/tailwind.config.js",
+      "client/vite.config.ts",
+      "client/public/sw.js",
+      "server/uploads",
+      "server/tmp",
+      "eslint.config.js",
+    ],
+  },
+  {
+    files: ["**/*.js", "**/*.ts", "**/*.tsx"],
+    plugins: {
+      "@typescript-eslint": typescriptPlugin,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaFeatures: { modules: true },
+        tsconfigRootDir: __dirname,
+        project: ["./client/tsconfig.json", "./server/tsconfig.json"],
+      },
+    },
+    rules: {
+      ...typescriptPlugin.configs["eslint-recommended"].rules,
+      ...typescriptPlugin.configs.recommended.rules,
+      "@typescript-eslint/no-unused-vars": "warn",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+];
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "keystone-web",
   "private": true,
+  "type": "module",
   "devDependencies": {
     "eslint": "^8.57.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0"
   }
 }
-
diff --git a/server/eslint.config.js b/server/eslint.config.js