Finalize accessibility, performance, and tooling

.github/workflows/ci.yml

@@ -19,5 +19,5 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 18
-      - run: npm install
+      - run: npm install --no-audit --no-fund
       - run: npm run lint

client/index.html

@@ -10,7 +10,7 @@
   "@context": "https://schema.org",
   "@type": "Notary",
   "name": "Keystone Notary Group, LLC",
-  "image": "https://www.keystonenotarygroup.com/logo.png",
+  "image": "https://www.keystonenotarygroup.com/assets/logo_1.webp",
   "url": "https://www.keystonenotarygroup.com",
   "telephone": "+1-267-309-9000",
   "email": "info@keystonenotarygroup.com",
@@ -31,7 +31,8 @@
 <meta property="og:description" content="NNA certified & insured notary signing agents. We come to you.">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://www.keystonenotarygroup.com">
-<meta property="og:image" content="/assets/icon-512.png">
+<meta property="og:image" content="https://www.keystonenotarygroup.com/assets/icon-512.webp">
+<meta name="twitter:image" content="https://www.keystonenotarygroup.com/assets/icon-512.webp">
 <meta name="twitter:card" content="summary_large_image">
 
     <!-- Optional analytics & reCAPTCHA -->
@@ -57,7 +58,7 @@
   "@context": "https://schema.org",
   "@type": "LocalBusiness",
   "name": "Keystone Notary Group, LLC",
-  "image": "https://www.keystonenotarygroup.com/logo.png",
+  "image": "https://www.keystonenotarygroup.com/assets/logo_1.webp",
   "url": "https://www.keystonenotarygroup.com",
   "telephone": "+1-267-309-9000",
   "email": "info@keystonenotarygroup.com",

client/public/manifest.webmanifest

@@ -7,14 +7,14 @@
   "theme_color": "#0b0b0d",
   "icons": [
     {
-      "src": "/assets/icon-192.png",
+      "src": "https://www.keystonenotarygroup.com/assets/icon-192.webp",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/webp"
     },
     {
-      "src": "/assets/icon-512.png",
+      "src": "https://www.keystonenotarygroup.com/assets/icon-512.webp",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/webp"
     }
   ]
 }

client/src/modules/sections/Coverage.tsx

@@ -6,13 +6,19 @@ gsap.registerPlugin(ScrollTrigger)
 export function Coverage(){
   const lineRef = useRef<SVGPathElement>(null)
   useEffect(()=>{
-    if (!lineRef.current) return
-    const length = 800
-    gsap.set(lineRef.current, { strokeDasharray: length, strokeDashoffset: length })
-    gsap.to(lineRef.current, {
-      strokeDashoffset: 0,
-      scrollTrigger: { trigger: '#coverage', start: 'top 70%', end: 'bottom top', scrub: true }
+    const ctx = gsap.context(() => {
+      if (!lineRef.current) return
+      const mm = gsap.matchMedia()
+      mm.add("(prefers-reduced-motion: no-preference)", () => {
+        const length = 800
+        gsap.set(lineRef.current, { strokeDasharray: length, strokeDashoffset: length })
+        gsap.to(lineRef.current, {
+          strokeDashoffset: 0,
+          scrollTrigger: { trigger: '#coverage', start: 'top 70%', end: 'bottom top', scrub: true }
+        })
+      })
     })
+    return () => ctx.revert()
   },[])
   return (
     <section id="coverage" className="min-h-[100svh] grid place-items-center px-4 text-center">

client/src/modules/sections/Credentials.tsx

@@ -6,12 +6,15 @@ gsap.registerPlugin(ScrollTrigger)
 export function Credentials(){
   const ref = useRef<HTMLDivElement>(null)
   useEffect(()=>{
-    const ctx = gsap.context(()=>{
-      const panes = gsap.utils.toArray<HTMLElement>('.pane')
-      panes.forEach((pane, i)=>{
-        gsap.fromTo(pane, {y:(i-1)*60, opacity:.6, rotateX:8, z:0}, {
-          y:0, z: i===1? 120 : (i===0? 40 : 0), opacity:1,
-          scrollTrigger: { trigger: '#credentials', start: 'top 75%', end: 'bottom top', scrub: true }
+    const ctx = gsap.context((self) => {
+      const mm = gsap.matchMedia(self)
+      mm.add("(prefers-reduced-motion: no-preference)", () => {
+        const panes = gsap.utils.toArray<HTMLElement>('.pane')
+        panes.forEach((pane, i)=>{
+          gsap.fromTo(pane, {y:(i-1)*60, opacity:.6, rotateX:8, z:0}, {
+            y:0, z: i===1? 120 : (i===0? 40 : 0), opacity:1,
+            scrollTrigger: { trigger: '#credentials', start: 'top 75%', end: 'bottom top', scrub: true }
+          })
         })
       })
     }, ref)
@@ -25,7 +28,7 @@ export function Credentials(){
         <div className="pane rounded-2xl border border-white/15 bg-white/5 h-[22vh] grid place-items-center text-4xl font-extrabold">Background‑Checked</div>
       </div>
       <figure className="mt-8 opacity-90">
-        <img src="/assets/nna_badge.png" alt="NNA Certified Notary Signing Agent badge for 2025" className="h-24 w-auto mx-auto"/>
+        <img src="https://www.keystonenotarygroup.com/assets/nna_badge.webp" alt="NNA Certified Notary Signing Agent badge for 2025" className="h-24 w-auto mx-auto"/>
         <figcaption className="text-center text-muted mt-2">NNA Notary Signing Agent — 2025</figcaption>
       </figure>
     </section>

client/src/modules/sections/Services.tsx

@@ -7,15 +7,21 @@ export function Services(){
   const [items, setItems] = useState<{title:string, body:string}[]>([])
   useEffect(()=>{ fetch('/api/cms/services').then(r=>r.json()).then(j=> setItems(j.data || [])) },[])
   useEffect(()=>{
-    const cards = gsap.utils.toArray<HTMLElement>('#services .card')
-    cards.forEach((el, i)=>{
-      gsap.fromTo(el, {y:30, opacity:0, clipPath:'inset(0 0 100% 0 round 16px)'}, {
-        y:0, opacity:1, clipPath:'inset(0 0 0% 0 round 16px)',
-        duration:0.9, ease:'power3.out',
-        scrollTrigger: { trigger: el, start: 'top 85%', toggleActions: 'play none none reverse' }
+    const ctx = gsap.context(() => {
+      const mm = gsap.matchMedia()
+      mm.add("(prefers-reduced-motion: no-preference)", () => {
+        const cards = gsap.utils.toArray<HTMLElement>('#services .card')
+        cards.forEach((el) => {
+          gsap.fromTo(el, {y:30, opacity:0, clipPath:'inset(0 0 100% 0 round 16px)'}, {
+            y:0, opacity:1, clipPath:'inset(0 0 0% 0 round 16px)',
+            duration:0.9, ease:'power3.out',
+            scrollTrigger: { trigger: el, start: 'top 85%', toggleActions: 'play none none reverse' }
+          })
+        })
       })
     })
-  },[])
+    return () => ctx.revert()
+  },[items])
   const display = items.length ? items : [
     {title:'Loan Signings', body:'Purchase, refinance, HELOC, reverse—error‑free, lender‑friendly packages.'},
     {title:'General Notary Work', body:'POAs, affidavits, deeds, titles, I‑9s, and more—mobile to you.'},