feat(image): enhance image handling with focal points and responsive support

- Added support for extracting focal points and alt text from CMS image fields.
- Introduced responsive image handling in TopBanner component, allowing for AVIF/WebP sources and LQIP placeholders.
- Updated image transformation functions to accommodate focal point parameters for better cropping.
- Refactored image URL resolution logic across various components and routes to utilize new image field structure.

src/routes/cms-images/+server.ts

@@ -44,6 +44,8 @@ export const GET: RequestHandler = async ({ url }) => {
   const format = url.searchParams.get('format');
   const fit = url.searchParams.get('fit');
   const ar = url.searchParams.get('ar');
+  const fx = url.searchParams.get('fx');
+  const fy = url.searchParams.get('fy');
 
   if (w) {
     const n = Number(w);
@@ -60,6 +62,14 @@ export const GET: RequestHandler = async ({ url }) => {
   if (format) params.format = format;
   if (fit) params.fit = fit;
   if (ar) params.ar = ar;
+  if (fx) {
+    const n = Number(fx);
+    if (Number.isFinite(n)) params.fx = n;
+  }
+  if (fy) {
+    const n = Number(fy);
+    if (Number.isFinite(n)) params.fy = n;
+  }
 
   const key = buildCacheKey(src, params);
 
@@ -80,6 +90,8 @@ export const GET: RequestHandler = async ({ url }) => {
   if (params.format) transformParams.set('format', params.format);
   if (params.fit) transformParams.set('fit', params.fit);
   if (params.ar) transformParams.set('ar', params.ar);
+  if (params.fx != null) transformParams.set('fx', String(params.fx));
+  if (params.fy != null) transformParams.set('fy', String(params.fy));
 
   const transformUrl = `${cmsBase}/api/transform?${transformParams.toString()}`;