Enhance UI components and styles for better performance and accessibility

- Added a fixed minimum height to the AdSlot component to reduce Cumulative Layout Shift (CLS) and adjusted styles for better layout consistency.
- Specified width and height attributes for the Barcode and QR Code images to improve rendering performance and maintain aspect ratios.
- Introduced font-face declarations in global CSS for 'Inter' and 'Tajawal' fonts with 'swap' display to optimize font loading and reduce CLS.

frontend/src/components/layout/AdSlot.tsx

@@ -92,11 +92,18 @@ export default function AdSlot({
   // Pro users see no ads
   if (user?.plan === 'pro') return null;
 
+  // حجز مساحة ثابتة لتقليل CLS
+  // يمكن تخصيص الارتفاع حسب نوع الإعلان
+  const minHeight = format === 'horizontal' ? 90 : format === 'rectangle' ? 250 : 120;
   return (
-    <div ref={containerRef} className={`ad-slot ${className}`}>
+    <div
+      ref={containerRef}
+      className={`ad-slot ${className}`}
+      style={{ minHeight, position: 'relative' }}
+    >
       <ins
         className="adsbygoogle"
-        style={{ display: 'block' }}
+        style={{ display: 'block', width: '100%', minHeight }}
         data-ad-client={clientId}
         data-ad-slot={resolvedSlot}
         data-ad-format={format}