Add secret management guide, client-side performance monitoring, and search accessibility enhancements

- Introduced a comprehensive Secret Management Guide detailing best practices, secret classification, development setup, production management, rotation procedures, and emergency protocols.
- Implemented a client-side performance monitoring script to track various metrics including page load performance, paint metrics, layout shifts, and memory usage.
- Enhanced search accessibility with keyboard navigation support for search results, ensuring compliance with WCAG standards and improving user experience.

backend/templates/components/lazy_image.html

@@ -0,0 +1,50 @@
+{#
+Reusable lazy loading image component with progressive enhancement.
+
+Parameters:
+    - image_url: The URL of the image to load
+    - alt_text: Alt text for accessibility (required)
+    - css_classes: Additional CSS classes (optional)
+    - width: Image width (optional)
+    - height: Image height (optional)
+    - loading: "lazy" (default) or "eager" for above-fold images
+    - placeholder: Custom placeholder URL (optional, defaults to inline SVG)
+    - srcset: Responsive image srcset (optional)
+    - sizes: Responsive image sizes (optional)
+    - full_src: Full-size image URL for lightbox (optional)
+
+Usage:
+    {% include "components/lazy_image.html" with image_url=park.image_url alt_text=park.name %}
+    {% include "components/lazy_image.html" with image_url=ride.thumbnail alt_text=ride.name loading="eager" %}
+    {% include "components/lazy_image.html" with image_url=photo.url alt_text=photo.caption css_classes="rounded-lg shadow" %}
+
+Cloudflare Images responsive example:
+    {% include "components/lazy_image.html" with
+        image_url=photo.url|add:"?width=800"
+        srcset=photo.url|add:"?width=400 400w, "|add:photo.url|add:"?width=800 800w, "|add:photo.url|add:"?width=1200 1200w"
+        sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
+        alt_text=photo.caption
+    %}
+#}
+
+{% load static %}
+
+{# Default placeholder: inline SVG with aspect ratio preservation #}
+{% with placeholder_default="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect fill='%23f3f4f6' width='16' height='9'/%3E%3C/svg%3E" %}
+
+<img
+    src="{{ placeholder|default:placeholder_default }}"
+    data-src="{{ image_url }}"
+    {% if srcset %}data-srcset="{{ srcset }}"{% endif %}
+    {% if sizes %}sizes="{{ sizes }}"{% endif %}
+    alt="{{ alt_text|default:'' }}"
+    class="lazy {{ css_classes|default:'' }}"
+    loading="{{ loading|default:'lazy' }}"
+    {% if width %}width="{{ width }}"{% endif %}
+    {% if height %}height="{{ height }}"{% endif %}
+    {% if full_src %}data-full-src="{{ full_src }}"{% endif %}
+    decoding="async"
+    fetchpriority="{% if loading == 'eager' %}high{% else %}low{% endif %}"
+>
+
+{% endwith %}