<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MNDDTWSM');</script>
    <!-- End Google Tag Manager -->
    
<!-- HTML Meta Tags -->
<title>Imators</title>
<meta name="description" content="Imators هي شركة تكنولوجية تأسست في بداية عام 2024 من قبل إسحاق أكتاس. هدفنا هو وضع أسس المرحلة التكنولوجية الثانية التي سيشهدها العالم. سيتم ذلك تدريجياً حتى تتمكنوا من الاستفادة منه.">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://imators.com/ar">
<meta property="og:type" content="website">
<meta property="og:title" content="Imators">
<meta property="og:description" content="Imators هي شركة تكنولوجية تأسست في بداية عام 2024 من قبل إسحاق أكتاس. هدفنا هو وضع أسس المرحلة التكنولوجية الثانية التي سيشهدها العالم. سيتم ذلك تدريجياً حتى تتمكنوا من الاستفادة منه.">
<meta property="og:image" content="https://opengraph.b-cdn.net/production/images/c2346076-5c2d-4af5-bc04-93187bd10074.png?token=htWPJq1jtmC6T1l0lrysm0HzFmIEpPZpdfjbd2qnjX8&height=630&width=1200&expires=33264233001">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="imators.com">
<meta property="twitter:url" content="https://imators.com/ar">
<meta name="twitter:title" content="Imators">
<meta name="twitter:description" content="Imators هي شركة تكنولوجية تأسست في بداية عام 2024 من قبل إسحاق أكتاس. هدفنا هو وضع أسس المرحلة التكنولوجية الثانية التي سيشهدها العالم. سيتم ذلك تدريجياً حتى تتمكنوا من الاستفادة منه.">
<meta name="twitter:image" content="https://opengraph.b-cdn.net/production/images/c2346076-5c2d-4af5-bc04-93187bd10074.png?token=htWPJq1jtmC6T1l0lrysm0HzFmIEpPZpdfjbd2qnjX8&height=630&width=1200&expires=33264233001">

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Princess+Sofia&family=Space+Grotesk:wght@300;400;500;600;700&family=Fredoka:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://cdn.imators.com/logo.png" rel="icon" type="image/png" />

    <style>
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: #000;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        .fredoka {
            font-family: "Fredoka", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            font-variation-settings: "wdth" 100;
        }

        .Montserrat {
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
        }
		        

        .gemance {
            font-family: "Princess Sofia", cursive;
            font-weight: 400;
            font-style: normal;
        }


        .header {
            z-index: 1000;
        }

        .zajidhiadj {
            z-index: 1001;
            position: relative;
        }

    </style>
</head>
<body class="bg-black">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MNDDTWSM"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <?php include 'src/header.php'; ?>

<div id="slider" class="w-full min-h-screen">
   <div class="container relative mx-auto pt-32 pb-24 px-8">
       
       <!-- Loading Spinner -->
       <div id="loader" class="absolute inset-0 bg-black z-50 flex items-center justify-center">
           <div class="loader-spin"></div>
       </div>

       <!-- Slides Container -->
       <div class="slides-container h-[750px] relative">

       <div class="slide absolute inset-0 invisible opacity-0">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 h-full">
        <div class="flex flex-col justify-center slide-content">
            <span class="text-purple-500 text-sm font-semibold tracking-[0.2em] uppercase">النسخة التطبيقية والمزيد متوفرة في 15 فبراير 2025</span>
            <h1 class="text-6xl lg:text-7xl text-white font-bold mt-4">Academ</h1>
            <p class="text-lg text-gray-400 mt-6 max-w-xl">اعثر على معلم موثوق بنسبة 99٪، لمساعدة طفلك بشكل تدريجي وإيجابي مع شخص جدير بالثقة.</p>
            <div class="flex flex-wrap gap-4 mt-8">
                <a href="https://academ.my" class="inline-flex items-center gap-2 border border-purple-500/20 text-purple-500 hover:bg-purple-500/10 px-8 py-4 rounded-xl transition-all hover:-translate-y-0.5">الوصول إلى العرض التجريبي</a>
            </div>
        </div>
        <div class="relative h-full rounded-2xl overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent z-10"></div>
            <img src="./design45.webp" class="w-full h-full object-cover scale-110" alt="أكاديم">
        </div>
    </div>
</div>


       
                  <!-- Something -->
       <div class="slide absolute inset-0 invisible opacity-0">
           <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 h-full">
               <div class="flex flex-col justify-center slide-content">
                   <span class="text-white text-sm font-semibold tracking-[0.2em] uppercase">متاح في 18 فبراير 2025</span>
                   <h1 class="text-6xl lg:text-7xl text-white font-bold mt-4">Something</h1>
                   <p class="text-lg text-gray-400 mt-6 max-w-xl">تمكين كل نادٍ من أن يكون متاحًا للآباء والمنظمين والأطفال في نفس المكان</p>
                   <div class="flex flex-wrap gap-4 mt-8">
                       <a href="/ar/waitlist" class="inline-flex items-center gap-2 border border-white text-white px-8 py-4 rounded-xl transition-all hover:-translate-y-0.5">التسجيل في قائمة الانتظار</a>
                   </div>
               </div>
               <div class="relative h-full rounded-2xl overflow-hidden">
                   <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent z-10"></div>
                   <img src="something_cube.webp" class="w-full h-full object-cover scale-110" alt="شيء ما">
               </div>
           </div>
       </div>


       <!-- OhMyPanel -->
       <div class="slide absolute inset-0 invisible opacity-0">
           <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 h-full">
               <div class="flex flex-col justify-center slide-content">
                   <span class="text-indigo-500 text-sm font-semibold tracking-[0.2em] uppercase">قريبًا متاح</span>
                   <h1 class="text-6xl lg:text-7xl text-white font-bold mt-4">OhMyPanel</h1>
                   <p class="text-lg text-gray-400 mt-6 max-w-xl">شيء يمكن أن يقلب التجارة رأسًا على عقب للأبد</p>
                   <div class="flex flex-wrap gap-4 mt-8">
                       <button class="group inline-flex items-center gap-2 bg-indigo-500/50 px-8 py-4 rounded-xl text-white font-medium transition-all cursor-not-allowed opacity-75">
                           <span>قريبًا متاح</span>
                       </button>
                       <a href="/ar/waitlist" class="inline-flex items-center gap-2 border border-indigo-500/20 text-indigo-500 hover:bg-indigo-500/10 px-8 py-4 rounded-xl transition-all hover:-translate-y-0.5">التسجيل في قائمة الانتظار</a>
                   </div>
               </div>
               <div class="relative h-full rounded-2xl overflow-hidden">
                   <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent z-10"></div>
                   <img src="design3.png" class="w-full h-full object-cover scale-110" alt="OhMyPanel">
               </div>
           </div>
       </div>
   </div>

       <!-- Navigation -->
       <div class="flex gap-4 mt-12">
           <button class="w-3 h-3 rounded-full bg-white/20 hover:bg-white/40 transition-all" data-slide="0"></button>
           <button class="w-3 h-3 rounded-full bg-white/20 hover:bg-white/40 transition-all" data-slide="1"></button>
           <button class="w-3 h-3 rounded-full bg-white/20 hover:bg-white/40 transition-all" data-slide="2"></button>
       </div>

       <!-- Arrows -->
       <button id="prevSlide" class="absolute top-1/2 -translate-y-1/2 -left-16 p-2 text-white/50 hover:text-white transition-all hover:scale-110">
           <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
           </svg>
       </button>
       <button id="nextSlide" class="absolute top-1/2 -translate-y-1/2 -right-16 p-2 text-white/50 hover:text-white transition-all hover:scale-110">
           <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
           </svg>
       </button>
   </div>
</div>



<style>
.loader-spin {
   width: 48px;
   height: 48px;
   border: 5px solid #fff;
   border-bottom-color: transparent;
   border-radius: 50%;
   animation: rotation 1s linear infinite;
}

@keyframes rotation {
   0% { transform: rotate(0deg) }
   100% { transform: rotate(360deg) }
}

.slide {
   opacity: 0;
   visibility: hidden;
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide.active {
   opacity: 1;
   visibility: visible;
   z-index: 1;
}

.slide-content > * {
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide.active .slide-content > * {
   opacity: 1;
   transform: translateY(0);
}

.slide.active .slide-content > *:nth-child(1) { transition-delay: 200ms; }
.slide.active .slide-content > *:nth-child(2) { transition-delay: 300ms; }
.slide.active .slide-content > *:nth-child(3) { transition-delay: 400ms; }
.slide.active .slide-content > *:nth-child(4) { transition-delay: 500ms; }

.slide img {
   transform: scale(1.1);
   transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide.active img {
   transform: scale(1);
}

@media (max-width: 1024px) {
   .slides-container {
       height: auto;
       min-height: 600px;
   }
   
   #prevSlide, #nextSlide {
       display: none;
   }
}
</style>

<script>
const slider = {
   container: document.querySelector('#slider'),
   slides: document.querySelectorAll('.slide'),
   dots: document.querySelectorAll('[data-slide]'),
   prevBtn: document.getElementById('prevSlide'),
   nextBtn: document.getElementById('nextSlide'),
   loader: document.getElementById('loader'),
   currentSlide: 0,
   isAnimating: false,
   autoplayInterval: null,

   init() {
       // Wait for images to load
       Promise.all(Array.from(document.images).map(img => {
           if (img.complete) return Promise.resolve();
           return new Promise(resolve => img.addEventListener('load', resolve));
       })).then(() => {
           this.loader.style.display = 'none';
           this.showSlide(0);
           this.bindEvents();
           this.startAutoplay();
       });
   },

   showSlide(index) {
       if (this.isAnimating) return;
       this.isAnimating = true;

       this.slides[this.currentSlide]?.classList.remove('active');
       this.dots[this.currentSlide]?.classList.remove('bg-white');

       this.currentSlide = index;
       
       this.slides[this.currentSlide].classList.add('active');
       this.dots[this.currentSlide].classList.add('bg-white');

       setTimeout(() => {
           this.isAnimating = false;
       }, 600);
   },

   next() {
       const nextIndex = (this.currentSlide + 1) % this.slides.length;
       this.showSlide(nextIndex);
   },

   prev() {
       const prevIndex = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
       this.showSlide(prevIndex);
   },

   startAutoplay() {
       this.autoplayInterval = setInterval(() => this.next(), 5000);
   },

   stopAutoplay() {
       if (this.autoplayInterval) {
           clearInterval(this.autoplayInterval);
           this.autoplayInterval = null;
       }
   },

   bindEvents() {
       this.dots.forEach((dot, index) => {
           dot.addEventListener('click', () => {
               this.stopAutoplay();
               this.showSlide(index);
               this.startAutoplay();
           });
       });

       this.prevBtn?.addEventListener('click', () => {
           this.stopAutoplay();
           this.prev();
           this.startAutoplay();
       });

       this.nextBtn?.addEventListener('click', () => {
           this.stopAutoplay();
           this.next();
           this.startAutoplay();
       });

       document.addEventListener('keydown', (e) => {
           if (e.key === 'ArrowRight') {
               this.stopAutoplay();
               this.next();
               this.startAutoplay();
           }
           if (e.key === 'ArrowLeft') {
               this.stopAutoplay();
               this.prev();
               this.startAutoplay();
           }
       });

       let touchStartX = 0;
       this.container.addEventListener('touchstart', e => {
           touchStartX = e.changedTouches[0].screenX;
       });

       this.container.addEventListener('touchend', e => {
           const touchEndX = e.changedTouches[0].screenX;
           const diff = touchStartX - touchEndX;

           if (Math.abs(diff) > 50) {
               this.stopAutoplay();
               if (diff > 0) this.next();
               else this.prev();
               this.startAutoplay();
           }
       });

       this.slides.forEach(slide => {
           slide.addEventListener('mouseenter', () => this.stopAutoplay());
           slide.addEventListener('mouseleave', () => this.startAutoplay());
       });

       document.addEventListener('visibilitychange', () => {
           if (document.hidden) this.stopAutoplay();
           else this.startAutoplay();
       });
   }
};

window.addEventListener('load', () => slider.init());
</script>

 </a></div></div><!-- Footer Links --><div class="w-full md:w-1/3 p-5"><h5 class="text-xs uppercase font-medium mb-6">اكتشف</h5><a href="/ar/privacy" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700"> سياسة الخصوصية </a><a href="/ar/terms-of-use" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700"> شروط الاستخدام </a><a href="/ar/" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700"> الصفحة الرئيسية </a><a href="/ar/about-us" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700"> معلومات عنا </a><a href="/ar/contact-us" class="my-3 block hover:text-gray-100 text-sm font-medium duration-700"> اتصل بنا </a></div><!-- Footer description --><div class="w-full md:w-1/3 p-5"><h5 class="text-xs uppercase font-medium mb-6">آمن بنفسك</h5><p class="text-sm"> جميع الصور ومقاطع الفيديو والمحتوى على هذا الموقع هي ملك Imators. </p></div></div><div class="text-center py-4 border-t border-gray-800"><p class="text-sm mb-2"> &copy; 2025 Imators. جميع الحقوق محفوظة. </p><p class="text-xs"> Imators هي شركة ذات مسؤولية محدودة (LLC). جميع منتجاتنا، سواء كانت تكنولوجيًا ماديًا أو متوفرة عبر الإنترنت فقط، تخضع لقواعدنا التي يمكنكم الوصول إليها. </p></div></footer>
  

</body>
</html>