Security scan, dynamic property feed, advanced design & SEO #4517

Originally written by @ccantynz-alt on GitHub.
Imported from https://github.com/ccantynz-alt/sharon-maxwell-realestate/pull/1

Summary

Full security scan + three major upgrades to make the site hands-off for Sharon & Kirk, visually stunning, and SEO-optimised.

1. Security Scan & Auto-Repair (Commit 1)

• XSS fix (HIGH) — Sanitised all 12 onclick injection points in the CRM where imported data could execute arbitrary JavaScript
• Security headers — Added X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy to Vercel config
• Input validation — Added maxlength and pattern validation to all form fields
• Import sanitisation — JSON import now validates and sanitises record IDs
• View switching — Allowlisted valid view names to prevent DOM manipulation
• .gitignore — Prevents accidental commits of secrets/credentials

2. Dynamic Property Feed from CRM (Commit 2)

The big hands-off win: Sharon adds a property in the CRM dashboard, and it automatically appears on the main website. No developer needed.

• Website pulls from maxwell_crm_properties in localStorage
• Available/Under Offer properties show in the For Sale carousel
• Sold properties auto-populate the Sold grid
• Falls back to the hardcoded listings when no CRM data exists
• All dynamically rendered cards are XSS-safe (escaped output)

3. Advanced Design Upgrades (Commit 2)

• Cinematic Ken Burns — Each hero slide has a unique zoom+pan direction (not just a generic zoom)
• Hero text animation — Content fades and slides in when each slide activates
• Full-screen lightbox — Click any property image to see it full-screen with blur backdrop, close with Escape or click
• Parallax scrolling — Appraisal section background has subtle depth movement (respects prefers-reduced-motion)
• Enhanced card hover — Gold border + bottom accent line slides in on hover
• Glassmorphism — Testimonial cards get frosted glass effect on hover
• Gold section dividers — Subtle gold lines between major sections
• Shimmer section headers — Gold underline expands on hover

4. SEO Foundation (Commit 2)

• Meta tags — Description, keywords, robots, author, canonical URL, theme-color
• Open Graph — Full Facebook/LinkedIn sharing preview with image
• Twitter Cards — Large image card for Twitter sharing
• Schema.org JSON-LD — RealEstateAgent structured data with name, address, areas served, parent organisation (Ray White)
• Geo meta tags — Auckland coordinates for local search
• robots.txt — Allows all crawlers, points to sitemap
• sitemap.xml — Main site (priority 1.0, weekly) and CRM (priority 0.3, monthly)
• Aria labels — All sections have proper accessibility labels

What Sharon & Kirk see now

• Adding listings: Go to CRM > Properties > Add Property > it appears on the website instantly
• Property images: Visitors can click any property photo to see it full-screen
• Google: The site now has proper structured data so Google knows it's a real estate agent in Auckland
• Visual polish: Every scroll, hover, and transition feels premium and cinematic

Test plan

• Website loads with hardcoded listings when no CRM data exists
• Load demo data in CRM Settings > properties appear on main website
• Click property image > lightbox opens full-screen > Escape closes it
• Hero slides transition with different Ken Burns zoom/pan directions
• Hero text fades in with each slide change
• Hover over listing cards > gold border + bottom line appears
• Scroll to appraisal section > background has subtle parallax
• Hover over testimonials > glassmorphism effect
• Contact form still saves to CRM localStorage
• CRM edit/delete/pipeline all still work (security fixes)
• View page source > Schema.org JSON-LD is valid
• Check robots.txt and sitemap.xml load correctly

https://claude.ai/code/session_016WA3i3bfvDjg58tKuqR4L2