XMAN Replicator

Name	Size	Rights	Date	Actions
[.]	<DIR>	drwxr-x---	2026-04-14 10:50	🔄 🗑️ 🗑️📁 ⬇️ 🔒
[..]	<DIR>	drwx--x--x	2026-04-14 10:48	🔄 🗑️ 🗑️📁 ⬇️ 🔒
.eslintrc.json	921 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
.gitignore	791 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
[.well-known]	<DIR>	drwxr-xr-x	2025-08-11 19:53	🔄 🗑️ 🗑️📁 ⬇️ 🔒
App.tsx	37,535 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
Attributions.md	289 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
Guidelines.md	2,559 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
README.md	3,118 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
Trustonomy Corporate Website (1).zip	193,476 B	-rw-r--r--	2025-07-27 09:38	✏️ 🔄 🗑️ ⬇️ 🔒
[components]	<DIR>	drwxrwxrwx	2025-07-21 12:44	🔄 🗑️ 🗑️📁 ⬇️ 🔒
error_log	2,156 B	-rw-r--r--	2026-04-18 08:10	✏️ 🔄 🗑️ ⬇️ 🔒
freepalestine.html	8,012 B	-rw-r--r--	2026-04-14 10:50	✏️ 🔄 🗑️ ⬇️ 🔒
[imports]	<DIR>	drwxrwxrwx	2025-07-21 12:44	🔄 🗑️ 🗑️📁 ⬇️ 🔒
index.html	2,367 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
index.php	2,367 B	-rw-r--r--	2026-04-14 10:50	✏️ 🔄 🗑️ ⬇️ 🔒
main.tsx	369 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
package-lock.json	206,016 B	-rw-rw-rw-	2025-07-21 12:51	✏️ 🔄 🗑️ ⬇️ 🔒
package.json	3,322 B	-rw-rw-rw-	2025-07-21 12:51	✏️ 🔄 🗑️ ⬇️ 🔒
postcss.config.js	79 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
[styles]	<DIR>	drwxrwxrwx	2025-07-21 12:44	🔄 🗑️ 🗑️📁 ⬇️ 🔒
tailwind.config.js	3,369 B	-rw-rw-rw-	2025-07-21 12:52	✏️ 🔄 🗑️ ⬇️ 🔒
[translations]	<DIR>	drwxrwxrwx	2025-07-21 12:44	🔄 🗑️ 🗑️📁 ⬇️ 🔒
tsconfig.json	1,359 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
tsconfig.node.json	291 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒
vite.config.ts	2,173 B	-rw-rw-rw-	2025-07-21 12:44	✏️ 🔄 🗑️ ⬇️ 🔒

Edit: App.tsx

import React, { useState, createContext, useContext, useEffect } from 'react';

// Comprehensive error suppression - must be at the very top
(() => {
  try {
    const originalError = console.error;
    const originalWarn = console.warn;
    
    console.error = (...args) => {
      const message = args[0]?.toString() || '';
      if (message.includes('cssRules') || 
          message.includes('SecurityError') || 
          message.includes('Failed to read') ||
          message.includes('Cannot access rules') ||
          message.includes('stylesheet')) {
        return;
      }
      originalError.apply(console, args);
    };

console.warn = (...args) => {
      const message = args[0]?.toString() || '';
      if (message.includes('cssRules') || 
          message.includes('SecurityError') || 
          message.includes('stylesheet')) {
        return;
      }
      originalWarn.apply(console, args);
    };

if (typeof window !== 'undefined') {
      window.addEventListener('error', (event) => {
        if (event.error?.message?.includes('cssRules') || 
            event.error?.message?.includes('SecurityError') ||
            event.error?.message?.includes('stylesheet') ||
            event.message?.includes('cssRules') ||
            event.message?.includes('SecurityError') ||
            event.message?.includes('stylesheet')) {
          event.preventDefault();
          event.stopPropagation();
          return false;
        }
      }, true);

// Critical imports only - minimal for initial load
import { translations, Translations } from './translations/index';

// Defer heavy UI imports
let Button: any = null;
let Card: any = null;
let CardContent: any = null;
let Toaster: any = null;

// Defer heavy icon imports
let ArrowRight: any = null;
let CheckCircle: any = null;
let Target: any = null;
let Settings: any = null;

let ImageWithFallback: any = null;

// Progressive loading of dependencies
const loadCriticalUI = async () => {
  try {
    const [buttonModule, cardModule, sonnerModule] = await Promise.all([
      import('./components/ui/button'),
      import('./components/ui/card'),
      import('./components/ui/sonner')
    ]);
    
    Button = buttonModule.Button;
    Card = cardModule.Card;
    CardContent = cardModule.CardContent;
    Toaster = sonnerModule.Toaster;
  } catch (error) {
    console.warn('Failed to load UI components');
  }
};

// Critical components - load immediately but small
const Header = React.lazy(() => import('./components/Header'));
const SEOHead = React.lazy(() => import('./components/SEOHead'));

// Lightweight performance optimizer
const PerformanceOptimizer = React.lazy(() => 
  import('./components/PerformanceOptimizer').catch(() => 
    ({ default: ({ children }: { children: React.ReactNode }) => <>{children}</> })
  )
);

// Aggressive lazy loading - load only when needed
const HeroSection = React.lazy(() => 
  new Promise(resolve => {
    setTimeout(() => {
      import('./components/HeroSection')
        .then(module => resolve({ default: module.default }))
        .catch(() => resolve({ default: () => <div>Loading...</div> }));
    }, 100);
  })
);

// Language Context
interface LanguageContextType {
  language: 'ar' | 'en';
  translations: Translations;
  toggleLanguage: () => void;
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined);

export const useLanguage = () => {
  const context = useContext(LanguageContext);
  if (!context) {
    throw new Error('useLanguage must be used within a LanguageProvider');
  }
  return context;
};

// Ultra-minimal loading component
const MinimalLoader = React.memo(() => (
  <div className="w-full h-32 bg-gray-200 animate-pulse rounded" />
));

// Lightweight fallback button
const FallbackButton = ({ onClick, className, children }: any) => (
  <button onClick={onClick} className={className}>
    {children}
  </button>
);

// Error boundary component - minimal implementation
class AppErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

static getDerivedStateFromError() {
    return { hasError: true };
  }

componentDidCatch(error: Error) {
    if (!error.message.includes('cssRules') && 
        !error.message.includes('SecurityError') &&
        !error.message.includes('stylesheet')) {
      console.error('App Error:', error);
    }
  }

render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen bg-[#EBF5FF] flex items-center justify-center">
          <div className="text-center">
            <h2 className="text-2xl font-semibold text-[#002B5B] mb-4">
              Something went wrong
            </h2>
            <button 
              onClick={() => window.location.reload()}
              className="bg-[#00C897] hover:bg-[#00A577] text-white px-6 py-2 rounded-lg"
            >
              Refresh Page
            </button>
          </div>
        </div>
      );
    }

return this.props.children;
  }
}

// Comprehensive Industry Detail Page - Government Sector
const IndustryDetailPage = React.memo(({ industry, onBack }: { industry: any; onBack: () => void }) => {
  const { language, translations: t } = useLanguage();
  const [componentsLoaded, setComponentsLoaded] = useState(false);

// Load icons needed for this page
  let Shield: any = null;
  let Layers: any = null;
  let BarChart: any = null;
  let ArrowLeft: any = null;

useEffect(() => {
    const loadComponents = async () => {
      await Promise.all([loadCriticalUI(), loadPageIcons(), loadImageComponent()]);
      setComponentsLoaded(true);
    };
    loadComponents();
  }, []);

if (!componentsLoaded) {
    return <MinimalLoader />;
  }

const Icon = industry.icon;

return (
    <div className="min-h-screen bg-white" dir={language === 'ar' ? 'rtl' : 'ltr'}>
      <React.Suspense fallback={<MinimalLoader />}>
        <SEOHead 
          title={`${industry.title} - Trustonomy`}
          description={industry.description}
          type="article"
        />
        <Header onNavigateHome={onBack} />
      </React.Suspense>
      
      {/* Hero Section - Keep existing style */}
      <section className="relative bg-gradient-to-br from-[#002B5B] via-[#001a3d] to-[#16213e] text-white pt-32 pb-20">
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
          {Button ? (
            <Button
              onClick={onBack}
              variant="outline"
              className="mb-8 bg-white/10 border-white/20 text-white hover:bg-white/20"
            >
              {ArrowLeft && <ArrowLeft className={`h-4 w-4 ${language === 'ar' ? 'ml-2' : 'mr-2'}`} />}
              {language === 'ar' ? 'العودة للقطاعات' : 'Back to Industries'}
            </Button>
          ) : (
            <FallbackButton
              onClick={onBack}
              className="mb-8 bg-white/10 border border-white/20 text-white hover:bg-white/20 px-4 py-2 rounded"
            >
              {language === 'ar' ? 'العودة للقطاعات' : 'Back to Industries'}
            </FallbackButton>
          )}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="flex items-center mb-6">
                <div className="w-20 h-20 bg-gradient-to-br from-[#00C897] to-[#00A577] rounded-xl flex items-center justify-center ml-4 shadow-2xl ring-2 ring-white/20">
                  {Icon && <Icon className="h-10 w-10 text-white" />}
                </div>
                <h1 className="text-4xl md:text-5xl bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent">{industry.title}</h1>
              </div>
              
              <p className="text-xl text-white/90 mb-8 leading-relaxed">
                {industry.description}
              </p>
            </div>

<div className="relative">
              {ImageWithFallback && (
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=75"
                  alt={industry.title}
                  className="relative rounded-2xl shadow-2xl w-full h-80 object-cover ring-2 ring-white/10"
                  loading="lazy"
                />
              )}
            </div>
          </div>
        </div>
      </section>

{/* How We Support Government Digital Transformation */}
      <section className="py-20 bg-gradient-to-br from-gray-50 to-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl text-[#002B5B] mb-6">
              {language === 'ar' ? 'كيف ندعم التحول الرقمي الحكومي' : 'How We Support Government Digital Transformation'}
            </h2>
          </div>

{/* Three Feature Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            {/* Card 1: Secure Digital Infrastructure */}
            {Card && CardContent ? (
              <Card className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border-0">
                <CardContent className="p-8 text-center">
                  <div className="w-16 h-16 bg-gradient-to-br from-[#002B5B] to-[#001a3d] rounded-xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                    {Shield && <Shield className="h-8 w-8 text-white" />}
                  </div>
                  <h3 className="text-2xl text-[#002B5B] mb-4">
                    {language === 'ar' ? 'البنية التحتية الرقمية الآمنة' : 'Secure Digital Infrastructure'}
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    {language === 'ar' 
                      ? 'ضمان أن المنصات الحكومية تلبي أعلى معايير الأمان والامتثال.'
                      : 'Ensure government platforms meet the highest standards of security and compliance.'
                    }
                  </p>
                </CardContent>
              </Card>
            ) : (
              <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-[#002B5B] to-[#001a3d] rounded-xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                  {Shield && <Shield className="h-8 w-8 text-white" />}
                </div>
                <h3 className="text-2xl text-[#002B5B] mb-4">
                  {language === 'ar' ? 'البنية التحتية الرقمية الآمنة' : 'Secure Digital Infrastructure'}
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  {language === 'ar' 
                    ? 'ضمان أن المنصات الحكومية تلبي أعلى معايير الأمان والامتثال.'
                    : 'Ensure government platforms meet the highest standards of security and compliance.'
                  }
                </p>
              </div>
            )}

{/* Card 2: Seamless System Integration */}
            {Card && CardContent ? (
              <Card className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border-0">
                <CardContent className="p-8 text-center">
                  <div className="w-16 h-16 bg-gradient-to-br from-[#00C897] to-[#00A577] rounded-xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                    {Layers && <Layers className="h-8 w-8 text-white" />}
                  </div>
                  <h3 className="text-2xl text-[#002B5B] mb-4">
                    {language === 'ar' ? 'التكامل السلس للأنظمة' : 'Seamless System Integration'}
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    {language === 'ar' 
                      ? 'التكامل بسهولة مع أنظمة وقواعد بيانات القطاع العام الحالية.'
                      : 'Easily integrate with existing public sector systems and databases.'
                    }
                  </p>
                </CardContent>
              </Card>
            ) : (
              <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-[#00C897] to-[#00A577] rounded-xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                  {Layers && <Layers className="h-8 w-8 text-white" />}
                </div>
                <h3 className="text-2xl text-[#002B5B] mb-4">
                  {language === 'ar' ? 'التكامل السلس للأنظمة' : 'Seamless System Integration'}
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  {language === 'ar' 
                    ? 'التكامل بسهولة مع أنظمة وقواعد بيانات القطاع العام الحالية.'
                    : 'Easily integrate with existing public sector systems and databases.'
                  }
                </p>
              </div>
            )}

{/* Card 3: Data-Driven Governance */}
            {Card && CardContent ? (
              <Card className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border-0">
                <CardContent className="p-8 text-center">
                  <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                    {BarChart && <BarChart className="h-8 w-8 text-white" />}
                  </div>
                  <h3 className="text-2xl text-[#002B5B] mb-4">
                    {language === 'ar' ? 'الحوكمة المبنية على البيانات' : 'Data-Driven Governance'}
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    {language === 'ar' 
                      ? 'تمكين اتخاذ القرارات من خلال لوحات البيانات وأدوات التقارير في الوقت الفعلي.'
                      : 'Empower decision-making with real-time data dashboards and reporting tools.'
                    }
                  </p>
                </CardContent>
              </Card>
            ) : (
              <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                  {BarChart && <BarChart className="h-8 w-8 text-white" />}
                </div>
                <h3 className="text-2xl text-[#002B5B] mb-4">
                  {language === 'ar' ? 'الحوكمة المبنية على البيانات' : 'Data-Driven Governance'}
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  {language === 'ar' 
                    ? 'تمكين اتخاذ القرارات من خلال لوحات البيانات وأدوات التقارير في الوقت الفعلي.'
                    : 'Empower decision-making with real-time data dashboards and reporting tools.'
                  }
                </p>
              </div>
            )}
          </div>

{/* Testimonial Block */}
          <div className="bg-gradient-to-r from-[#EBF5FF] to-white rounded-2xl p-12 mb-16 border border-gray-100">
            <div className="max-w-4xl mx-auto text-center">
              <div className="text-6xl text-[#00C897] mb-6">"</div>
              <blockquote className="text-2xl text-gray-700 mb-8 leading-relaxed italic">
                {language === 'ar' 
                  ? '"ساعدت تراستونومي قسمنا في رقمنة أكثر من 80% من العمليات اليدوية خلال ستة أشهر."'
                  : '"Trustonomy helped our department digitize over 80% of manual processes within six months."'
                }
              </blockquote>
              <div className="flex items-center justify-center gap-4">
                <div className="w-16 h-16 bg-gradient-to-br from-[#002B5B] to-[#001a3d] rounded-full flex items-center justify-center">
                  <span className="text-white font-bold text-xl">وز</span>
                </div>
                <div className={`${language === 'ar' ? 'text-right' : 'text-left'}`}>
                  <div className="text-lg text-[#002B5B] font-medium">
                    {language === 'ar' ? 'وزارة الشؤون الرقمية' : 'Ministry of Digital Affairs'}
                  </div>
                  <div className="text-gray-600">
                    {language === 'ar' ? 'المملكة العربية السعودية' : 'Saudi Arabia'}
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Call to Action */}
          <div className="text-center">
            {Button ? (
              <Button 
                size="lg"
                className="bg-[#00C897] hover:bg-[#00A577] text-white px-12 py-6 text-xl rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
                onClick={() => {
                  onBack();
                  setTimeout(() => {
                    const contactSection = document.getElementById('contact');
                    if (contactSection) {
                      contactSection.scrollIntoView({ behavior: 'smooth' });
                    }
                  }, 100);
                }}
              >
                {language === 'ar' ? 'احجز عرضاً توضيحياً للجهات الحكومية' : 'Book a Demo for Government Entities'}
              </Button>
            ) : (
              <FallbackButton
                className="bg-[#00C897] hover:bg-[#00A577] text-white px-12 py-6 text-xl rounded-xl shadow-lg"
                onClick={() => {
                  onBack();
                  setTimeout(() => {
                    const contactSection = document.getElementById('contact');
                    if (contactSection) {
                      contactSection.scrollIntoView({ behavior: 'smooth' });
                    }
                  }, 100);
                }}
              >
                {language === 'ar' ? 'احجز عرضاً توضيحياً للجهات الحكومية' : 'Book a Demo for Government Entities'}
              </FallbackButton>
            )}
          </div>
        </div>
      </section>
      
      <React.Suspense fallback={<MinimalLoader />}>
        <Footer />
      </React.Suspense>
      {Toaster && <Toaster />}
    </div>
  );
});

// Lightweight service detail page
const ServiceDetailPage = React.memo(({ service, onBack }: { service: any; onBack: () => void }) => {
  const { language } = useLanguage();
  const [componentsLoaded, setComponentsLoaded] = useState(false);

useEffect(() => {
    const loadComponents = async () => {
      await Promise.all([loadCriticalUI(), loadIcons(), loadImageComponent()]);
      setComponentsLoaded(true);
    };
    loadComponents();
  }, []);

if (!componentsLoaded) {
    return <MinimalLoader />;
  }

const Icon = service.icon;

return (
    <div className="min-h-screen bg-white" dir={language === 'ar' ? 'rtl' : 'ltr'}>
      <React.Suspense fallback={<MinimalLoader />}>
        <SEOHead 
          title={`${service.title} - Trustonomy`}
          description={service.description}
          type="article"
        />
        <Header onNavigateHome={onBack} />
      </React.Suspense>
      
      <section className="relative bg-gradient-to-br from-[#0a0a0a] via-[#1a1a2e] to-[#16213e] text-white pt-32 pb-20">
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
          {Button ? (
            <Button
              onClick={onBack}
              variant="outline"
              className="mb-8 bg-white/10 border-white/20 text-white hover:bg-white/20"
            >
              {ArrowRight && <ArrowRight className="ml-2 h-4 w-4" />}
              العودة للخدمات
            </Button>
          ) : (
            <FallbackButton
              onClick={onBack}
              className="mb-8 bg-white/10 border border-white/20 text-white hover:bg-white/20 px-4 py-2 rounded"
            >
              العودة للخدمات
            </FallbackButton>
          )}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="flex items-center mb-6">
                <div className="w-20 h-20 bg-gradient-to-br from-[#00C897] to-[#00A577] rounded-xl flex items-center justify-center ml-4 shadow-2xl ring-2 ring-white/20">
                  {Icon && <Icon className="h-10 w-10 text-white" />}
                </div>
                <h1 className="text-4xl md:text-5xl bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent">{service.title}</h1>
              </div>
              
              <p className="text-xl text-white/90 mb-8 leading-relaxed">
                {service.description}
              </p>
            </div>

<div className="relative">
              {ImageWithFallback && (
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=75"
                  alt={service.title}
                  className="relative rounded-2xl shadow-2xl w-full h-80 object-cover ring-2 ring-white/10"
                  loading="lazy"
                />
              )}
            </div>
          </div>
        </div>
      </section>

<section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {Card && CardContent && CheckCircle && Settings ? (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
              <Card className="h-full">
                <CardContent className="p-8">
                  <div className="flex items-center mb-6">
                    <CheckCircle className="h-8 w-8 text-[#00C897] ml-3" />
                    <h3 className="text-2xl text-[#002B5B]">الميزات الرئيسية</h3>
                  </div>
                  <div className="space-y-4">
                    {service.features?.map((feature: string, index: number) => (
                      <div key={index} className="flex items-start">
                        <CheckCircle className="w-5 h-5 text-[#00C897] mt-1 ml-3 flex-shrink-0" />
                        <p className="text-gray-700">{feature}</p>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

<Card className="h-full">
                <CardContent className="p-8">
                  <div className="flex items-center mb-6">
                    <Settings className="h-8 w-8 text-[#002B5B] ml-3" />
                    <h3 className="text-2xl text-[#002B5B]">التقنيات المستخدمة</h3>
                  </div>
                  <div className="space-y-4">
                    <div className="flex items-start">
                      <div className="w-3 h-3 bg-[#002B5B] rounded-full mt-2 ml-3 flex-shrink-0"></div>
                      <p className="text-gray-700">تقنيات حديثة ومتطورة</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          ) : (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
              <div className="bg-white rounded-lg p-8 shadow">
                <h3 className="text-2xl text-[#002B5B] mb-6">الميزات الرئيسية</h3>
                <div className="space-y-4">
                  {service.features?.map((feature: string, index: number) => (
                    <p key={index} className="text-gray-700">• {feature}</p>
                  ))}
                </div>
              </div>
              <div className="bg-white rounded-lg p-8 shadow">
                <h3 className="text-2xl text-[#002B5B] mb-6">التقنيات المستخدمة</h3>
                <p className="text-gray-700">• تقنيات حديثة ومتطورة</p>
              </div>
            </div>
          )}

<div className="bg-gradient-to-r from-[#002B5B] to-[#001a3d] rounded-2xl p-12 text-center text-white">
            <h3 className="text-3xl md:text-4xl mb-4">هل تريد البدء في مشروعك؟</h3>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
              تواصل معنا اليوم لمناقشة متطلباتك وكيف يمكننا مساعدتك في تحقيق أهدافك
            </p>
            <div className="flex justify-center">
              {Button ? (
                <Button 
                  size="lg"
                  className="bg-[#00C897] hover:bg-[#00A577] text-white px-8 py-4"
                  onClick={() => {
                    onBack();
                    setTimeout(() => {
                      const contactSection = document.getElementById('contact');
                      if (contactSection) {
                        contactSection.scrollIntoView({ behavior: 'smooth' });
                      }
                    }, 100);
                  }}
                >
                  تواصل معنا
                </Button>
              ) : (
                <FallbackButton
                  className="bg-[#00C897] hover:bg-[#00A577] text-white px-8 py-4 rounded-lg"
                  onClick={() => {
                    onBack();
                    setTimeout(() => {
                      const contactSection = document.getElementById('contact');
                      if (contactSection) {
                        contactSection.scrollIntoView({ behavior: 'smooth' });
                      }
                    }, 100);
                  }}
                >
                  تواصل معنا
                </FallbackButton>
              )}
            </div>
          </div>
        </div>
      </section>
      
      <React.Suspense fallback={<MinimalLoader />}>
        <Footer />
      </React.Suspense>
      {Toaster && <Toaster />}
    </div>
  );
});

// Lazy load page components
const HomePage = React.lazy(() => import('./components/pages/HomePage'));
const AboutPage = React.lazy(() => import('./components/pages/AboutPage'));
const ServicesPage = React.lazy(() => import('./components/pages/ServicesPage'));
const IndustriesPage = React.lazy(() => import('./components/pages/IndustriesPage'));
const ContactPage = React.lazy(() => import('./components/pages/ContactPage'));
const RequestDemoPage = React.lazy(() => import('./components/pages/RequestDemoPage'));

// Main App Component - heavily optimized for mobile
const AppContent = React.memo(() => {
  const [language, setLanguage] = useState<'ar' | 'en'>('ar');
  const [currentPage, setCurrentPage] = useState<'home' | 'about' | 'services' | 'industries' | 'contact' | 'request-demo' | 'serviceDetail' | 'industryDetail'>('home');
  const [selectedService, setSelectedService] = useState<any>(null);
  const [selectedIndustry, setSelectedIndustry] = useState<any>(null);
  const [criticalLoaded, setCriticalLoaded] = useState(false);

const toggleLanguage = React.useCallback(() => {
    setLanguage(prev => prev === 'ar' ? 'en' : 'ar');
  }, []);

const contextValue: LanguageContextType = React.useMemo(() => ({
    language,
    translations: translations[language],
    toggleLanguage
  }), [language, toggleLanguage]);

const handleServiceClick = React.useCallback((service: any) => {
    setSelectedService(service);
    setCurrentPage('serviceDetail');
  }, []);

const handleIndustryClick = React.useCallback((industry: any) => {
    setSelectedIndustry(industry);
    setCurrentPage('industryDetail');
  }, []);

const handleBackToHome = React.useCallback(() => {
    setCurrentPage('home');
    setSelectedService(null);
    setSelectedIndustry(null);
  }, []);

const handleNavigateToPage = React.useCallback((page: string) => {
    setCurrentPage(page as any);
    setSelectedService(null);
    setSelectedIndustry(null);
  }, []);

// Load critical components after initial render
  useEffect(() => {
    const timer = setTimeout(() => {
      Promise.all([loadCriticalUI(), loadIcons(), loadImageComponent()])
        .then(() => setCriticalLoaded(true));
    }, 100);
    return () => clearTimeout(timer);
  }, []);

return (
    <LanguageContext.Provider value={contextValue}>
      <div className="min-h-screen bg-[#EBF5FF]" dir={language === 'ar' ? 'rtl' : 'ltr'}>
        <React.Suspense fallback={<MinimalLoader />}>
          <SEOHead />
        </React.Suspense>
        
        {/* Main Pages */}
        {currentPage === 'home' && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <HomePage 
                onServiceClick={handleServiceClick}
                onIndustryClick={handleIndustryClick}
                onNavigateToPage={handleNavigateToPage}
              />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}

{currentPage === 'about' && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <AboutPage onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}

{currentPage === 'services' && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <ServicesPage 
                onServiceClick={handleServiceClick}
                onNavigateToPage={handleNavigateToPage}
              />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}

{currentPage === 'industries' && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <IndustriesPage 
                onIndustryClick={handleIndustryClick}
                onNavigateToPage={handleNavigateToPage}
              />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}

{currentPage === 'contact' && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <ContactPage onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}

{currentPage === 'request-demo' && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <RequestDemoPage onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}

{/* Detail Pages */}
        {currentPage === 'serviceDetail' && selectedService && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <ServiceDetailPage service={selectedService} onBack={handleBackToHome} />
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}

{currentPage === 'industryDetail' && selectedIndustry && (
          <>
            <React.Suspense fallback={<MinimalLoader />}>
              <Header onNavigateToPage={handleNavigateToPage} />
            </React.Suspense>
            <IndustryDetailPage industry={selectedIndustry} onBack={handleBackToHome} />
            <React.Suspense fallback={<MinimalLoader />}>
              <Footer />
            </React.Suspense>
          </>
        )}
        
        {criticalLoaded && Toaster && <Toaster />}
      </div>
    </LanguageContext.Provider>
  );
});

export default function App() {
  // Ensure page is crawlable on load
  useEffect(() => {
    const blockingRobots = document.querySelector('meta[name="robots"][content*="noindex"]');
    if (blockingRobots) {
      blockingRobots.remove();
    }

const robotsTag = document.querySelector('meta[name="robots"]') as HTMLMetaElement;
    if (robotsTag) {
      robotsTag.content = 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1';
    }
  }, []);

return (
    <AppErrorBoundary>
      <React.Suspense fallback={<MinimalLoader />}>
        <PerformanceOptimizer>
          <AppContent />
        </PerformanceOptimizer>
      </React.Suspense>
    </AppErrorBoundary>
  );
}

🛸 XMAN Replicator

Edit: App.tsx

PHP Console

SQL Console