Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>سوق RT الإلكتروني - ASOS</title> | |
| <link rel="icon" type="image/x-icon" href="http://static.photos/retail/64x64/101"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); | |
| body { font-family: 'Tajawal', sans-serif; } | |
| .hero-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } | |
| .glass { backdrop-filter: blur(10px); background: rgba(255,255,255,0.1); } | |
| .card-hover { transition: all 0.3s ease; } | |
| .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } | |
| .search-glow:focus { box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2); } | |
| .animate-bounce-slow { animation: bounce 2s infinite; } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .float { animation: float 3s ease-in-out infinite; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass shadow-lg" data-aos="fade-down"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center space-x-4 space-x-reverse"> | |
| <div class="text-2xl font-bold text-purple-600">RT سوق</div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6 space-x-reverse"> | |
| <a href="#home" class="text-gray-700 hover:text-purple-600 transition">الرئيسية</a> | |
| <a href="#categories" class="text-gray-700 hover:text-purple-600 transition">الفئات</a> | |
| <a href="#deals" class="text-gray-700 hover:text-purple-600 transition">العروض</a> | |
| <a href="#contact" class="text-gray-700 hover:text-purple-600 transition">تواصل معنا</a> | |
| </div> | |
| <div class="flex items-center space-x-4 space-x-reverse"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 transition"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 transition"> | |
| <i data-feather="shopping-cart"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 transition"> | |
| <i data-feather="user"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient min-h-screen flex items-center relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="float absolute top-20 right-20 w-32 h-32 bg-white rounded-full"></div> | |
| <div class="float absolute bottom-20 left-20 w-48 h-48 bg-white rounded-full" style="animation-delay: 1s;"></div> | |
| </div> | |
| <div class="container mx-auto px-4 text-center text-white relative z-10"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6" data-aos="fade-up"> | |
| مرحباً بك في سوق RT | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200"> | |
| اكتشف أفضل المنتجات من ASOS مع تجربة تسوق فريدة وأسعار لا تقبل المنافسة | |
| </p> | |
| <div class="flex flex-col md:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="400"> | |
| <input type="text" placeholder="ابحث عن منتجك المفضل..." | |
| class="px-6 py-4 rounded-full w-full md:w-96 text-gray-800 search-glow focus:outline-none"> | |
| <button class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition transform hover:scale-105"> | |
| بحث | |
| </button> | |
| </div> | |
| <div class="mt-12 animate-bounce-slow"> | |
| <i data-feather="chevron-down" class="w-8 h-8 mx-auto"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section id="categories" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-12 text-gray-800" data-aos="fade-up"> | |
| فئات ASOS | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <a href="https://salla.sa/th66" target="_blank" class="card-hover bg-gradient-to-br from-pink-400 to-purple-600 rounded-2xl p-8 text-white text-center cursor-pointer block" data-aos="fade-up" data-aos-delay="100"> | |
| <i data-feather="shopping-bag" class="w-16 h-16 mx-auto mb-4"></i> | |
| <h3 class="text-2xl font-bold mb-2">ملابس نسائية</h3> | |
| <p class="text-sm opacity-90">أحدث صيحات الموضة</p> | |
| </a> | |
| <a href="https://salla.sa/th66" target="_blank" class="card-hover bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl p-8 text-white text-center cursor-pointer block" data-aos="fade-up" data-aos-delay="200"> | |
| <i data-feather="user" class="w-16 h-16 mx-auto mb-4"></i> | |
| <h3 class="text-2xl font-bold mb-2">ملابس رجالية</h3> | |
| <p class="text-sm opacity-90">أناقة العصرية</p> | |
| </a> | |
| <div class="card-hover bg-gradient-to-br from-green-400 to-teal-600 rounded-2xl p-8 text-white text-center cursor-pointer" data-aos="fade-up" data-aos-delay="300"> | |
| <i data-feather="heart" class="w-16 h-16 mx-auto mb-4"></i> | |
| <h3 class="text-2xl font-bold mb-2">إكسسوارات</h3> | |
| <p class="text-sm opacity-90">تفاصيل مميزة</p> | |
| </div> | |
| <div class="card-hover bg-gradient-to-br from-yellow-400 to-orange-600 rounded-2xl p-8 text-white text-center cursor-pointer" data-aos="fade-up" data-aos-delay="400"> | |
| <i data-feather="star" class="w-16 h-16 mx-auto mb-4"></i> | |
| <h3 class="text-2xl font-bold mb-2">مبيعات خاصة</h3> | |
| <p class="text-sm opacity-90">خصومات حتى 70%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-12 text-gray-800" data-aos="fade-up"> | |
| منتجات مميزة | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="http://static.photos/fashion/640x360/201" alt="منتج 1" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">فستان سهرة أسود</h3> | |
| <p class="text-gray-600 mb-4">تصميم عصري وأنيق لإطلالة مميزة</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-purple-600">299 ر.س</span> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="http://static.photos/fashion/640x360/202" alt="منتج 2" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">بدلة رجالية كلاسيكية</h3> | |
| <p class="text-gray-600 mb-4">أناقة رجالية لا تضاهى</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-purple-600">599 ر.س</span> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover" data-aos="fade-up" data-aos-delay="300"> | |
| <img src="http://static.photos/accessories/640x360/203" alt="منتج 3" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">ساعة يد فاخرة</h3> | |
| <p class="text-gray-600 mb-4">إكسسوار يكمل إطلالتك</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-purple-600">399 ر.س</span> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Deals Section --> | |
| <section id="deals" class="py-20 hero-gradient"> | |
| <div class="container mx-auto px-4 text-center text-white"> | |
| <h2 class="text-4xl font-bold mb-8" data-aos="fade-up">عروض اليوم</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-8" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-5xl font-bold mb-2">50%</div> | |
| <p class="text-xl mb-4">خصم على الملابس النسائية</p> | |
| <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition"> | |
| تسوق الآن | |
| </button> | |
| </div> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-8" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-5xl font-bold mb-2">30%</div> | |
| <p class="text-xl mb-4">خصم على الإكسسوارات</p> | |
| <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition"> | |
| تسوق الآن | |
| </button> | |
| </div> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-8" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-5xl font-bold mb-2">شحن مجاني</div> | |
| <p class="text-xl mb-4">للطلبات فوق 200 ريال</p> | |
| <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition"> | |
| استفد الآن | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4">سوق RT</h3> | |
| <p class="text-gray-400">وجهتك الأولى للتسوق الإلكتروني من ASOS</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">روابط سريعة</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">من نحن</a></li> | |
| <li><a href="#" class="hover:text-white transition">الشروط والأحكام</a></li> | |
| <li><a href="#" class="hover:text-white transition">سياسة الخصوصية</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">خدمة العملاء</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">تواصل معنا</a></li> | |
| <li><a href="#" class="hover:text-white transition">الأسئلة الشائعة</a></li> | |
| <li><a href="#" class="hover:text-white transition">الإرجاع والاستبدال</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">تابعنا</h4> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="p-2 bg-gray-800 rounded-full hover:bg-purple-600 transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-gray-800 rounded-full hover:bg-purple-600 transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-gray-800 rounded-full hover:bg-purple-600 transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 سوق RT. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script>AOS.init({ duration: 1000, once: true });</script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |