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}

frontend/src/components/tools/BarcodeGenerator.tsx

@@ -98,7 +98,7 @@ export default function BarcodeGenerator() {
         {phase === 'done' && downloadUrl && (
           <div className="space-y-4 text-center">
             <div className="rounded-2xl bg-white p-6 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
-              <img src={downloadUrl} alt="Barcode" loading="lazy" decoding="async" className="mx-auto max-w-full" />
+              <img src={downloadUrl} alt="Barcode" loading="lazy" decoding="async" className="mx-auto max-w-full" width="300" height="100" style={{aspectRatio:'3/1'}} />
             </div>
             <div className="flex gap-3">
               <a href={downloadUrl} download className="btn-primary flex-1">{t('common.download')}</a>

frontend/src/components/tools/QrCodeGenerator.tsx

@@ -113,7 +113,7 @@ export default function QrCodeGenerator() {
         {phase === 'done' && result && result.status === 'completed' && downloadUrl && (
           <div className="space-y-6 text-center">
             <div className="rounded-2xl bg-white p-8 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
-              <img src={downloadUrl} alt="QR Code" loading="lazy" decoding="async" className="mx-auto max-w-[300px] rounded-lg" />
+              <img src={downloadUrl} alt="QR Code" loading="lazy" decoding="async" className="mx-auto max-w-[300px] rounded-lg" width={size} height={size} style={{aspectRatio:'1/1'}} />
             </div>
             <div className="flex gap-3">
               <a href={downloadUrl} download={result.filename || 'qrcode.png'}

frontend/src/styles/global.css

@@ -29,6 +29,22 @@
     text-rendering: optimizeLegibility;
   }
 
+  /* تحسين تحميل الخطوط لتقليل CLS */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Inter'), url('/fonts/Inter.woff2') format('woff2');
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Tajawal';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Tajawal'), url('/fonts/Tajawal.woff2') format('woff2');
+    font-display: swap;
+  }
+
   /* RTL Support */
   [dir="rtl"] body {
     font-family: 'Tajawal', 'Inter', system-ui, sans-serif;