<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متجر مستحضرات تجميل فاخر</title>
    <!-- تضمين Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></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;
            background-color: #fcf8f7; /* لون خلفية ناعم */
        }
        /* تصميم زر رئيسي جذاب */
        .btn-primary {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(239, 100, 150, 0.1), 0 2px 4px -2px rgba(239, 100, 150, 0.1);
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(239, 100, 150, 0.3), 0 4px 6px -4px rgba(239, 100, 150, 0.3);
        }
    </style>
</head>
<body class="text-gray-800">

    <!-- شريط التنقل (Header) -->
    <header class="shadow-md bg-white sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                <!-- الشعار -->
                <a href="#" class="text-3xl font-extrabold text-[#ef476f] tracking-widest">
                    <span class="text-pink-500">BEAUTY</span> BLISS
                </a>
                
                <!-- قائمة التنقل للديسكتوب -->
                <nav class="hidden md:flex space-x-8 space-x-reverse">
                    <a href="#" class="text-gray-600 hover:text-[#ef476f] transition duration-150 p-2 rounded-lg">الرئيسية</a>
                    <a href="#" class="text-gray-600 hover:text-[#ef476f] transition duration-150 p-2 rounded-lg">المنتجات</a>
                    <a href="#" class="text-gray-600 hover:text-[#ef476f] transition duration-150 p-2 rounded-lg">المدونة</a>
                    <a href="#" class="text-gray-600 hover:text-[#ef476f] transition duration-150 p-2 rounded-lg">اتصل بنا</a>
                </nav>
                
                <!-- أيقونة سلة التسوق (Placeholder) -->
                <div class="flex items-center space-x-4 space-x-reverse">
                    <button class="text-gray-600 hover:text-[#ef476f] transition duration-150 relative">
                        <!-- أيقونة سلة (يمكن استبدالها بأيقونة Lucide-React أو FontAwesome في تطبيقات React) -->
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        <span class="absolute top-0 left-0 bg-[#ef476f] text-white text-xs font-medium px-2 py-0.5 rounded-full transform translate-x-1/2 -translate-y-1/2">3</span>
                    </button>
                    <!-- قائمة الجوال (Hamburger) -->
                    <button class="md:hidden text-gray-600 hover:text-[#ef476f]">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
                    </button>
                </div>
            </div>
        </div>
        <!-- قائمة الجوال المنبثقة (يمكن تفعيلها بالـ JS) -->
        <div id="mobile-menu" class="hidden md:hidden absolute w-full bg-white shadow-lg border-t border-gray-100">
            <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-pink-50 transition">الرئيسية</a>
            <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-pink-50 transition">المنتجات</a>
            <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-pink-50 transition">المدونة</a>
            <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-pink-50 transition">اتصل بنا</a>
        </div>
    </header>

    <main>
        <!-- قسم البطل (Hero Section) -->
        <section class="relative bg-white pt-16 pb-24 md:pt-24 md:pb-32 overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-2 gap-12 items-center">
                <!-- المحتوى النصي -->
                <div class="md:order-last">
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-4 text-[#ef476f]">
                        جمالك الطبيعي يبدأ هنا
                    </h1>
                    <p class="text-lg text-gray-600 mb-8 max-w-lg">
                        اكتشفي مجموعتنا الفاخرة من مستحضرات التجميل العضوية والمصنوعة يدوياً، التي تغذي بشرتكِ وتبرز إشراقتكِ.
                    </p>
                    <a href="#" class="btn-primary inline-block bg-[#ef476f] text-white font-semibold py-3 px-8 rounded-full shadow-lg hover:bg-pink-600 transform transition duration-300 ease-in-out">
                        تسوقي مجموعة الخريف
                    </a>
                </div>

                <!-- الصورة (Placeholder) -->
                <div class="relative w-full h-96 rounded-3xl overflow-hidden shadow-2xl">
                    <img src="https://placehold.co/800x600/fec8c8/7c0c1b?text=Luxury+Cosmetics" 
                         alt="صورة لمجموعة مستحضرات تجميل فاخرة" 
                         class="absolute inset-0 w-full h-full object-cover"
                         onerror="this.onerror=null;this.src='https://placehold.co/800x600/fef3f7/ef476f?text=Beauty+Bliss';">
                    <!-- تأثير تدرج لوني خفيف فوق الصورة -->
                    <div class="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent"></div>
                </div>
            </div>
        </section>
        
        <!-- قسم المنتجات المميزة (Featured Products) -->
        <section class="py-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-4xl font-bold text-center mb-12 text-gray-800">منتجاتنا الأكثر مبيعاً</h2>
                
                <!-- شبكة المنتجات -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    
                    <!-- بطاقة المنتج 1 -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                        <div class="relative overflow-hidden">
                            <img src="https://placehold.co/600x450/f0e6e7/ef476f?text=Lipstick" 
                                 alt="أحمر شفاه كريمي" 
                                 class="w-full h-64 object-cover transform group-hover:scale-105 transition duration-500"
                                 onerror="this.onerror=null;this.src='https://placehold.co/600x450/fff0f5/ef476f?text=Product+1';">
                            <div class="absolute top-3 right-3 bg-[#ef476f] text-white text-xs font-bold py-1 px-3 rounded-full">جديد</div>
                        </div>
                        <div class="p-5 text-center">
                            <h3 class="text-xl font-semibold mb-2 hover:text-[#ef476f] transition">أحمر شفاه كريمي</h3>
                            <p class="text-gray-500 mb-4">تركيبة مرطبة وغنية باللون.</p>
                            <div class="flex justify-center items-center mb-4">
                                <span class="text-2xl font-bold text-[#ef476f]">95 ر.س</span>
                            </div>
                            <button class="btn-primary w-full bg-pink-100 text-[#ef476f] font-medium py-2.5 rounded-full hover:bg-pink-200 transition">
                                أضف إلى السلة
                            </button>
                        </div>
                    </div>
                    
                    <!-- بطاقة المنتج 2 -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                        <div class="relative overflow-hidden">
                            <img src="https://placehold.co/600x450/e8f7f2/4ecdc4?text=Serum" 
                                 alt="سيروم فيتامين سي" 
                                 class="w-full h-64 object-cover transform group-hover:scale-105 transition duration-500"
                                 onerror="this.onerror=null;this.src='https://placehold.co/600x450/fff0f5/ef476f?text=Product+2';">
                        </div>
                        <div class="p-5 text-center">
                            <h3 class="text-xl font-semibold mb-2 hover:text-[#ef476f] transition">سيروم فيتامين C</h3>
                            <p class="text-gray-500 mb-4">لإشراقة يومية وتوحيد لون البشرة.</p>
                            <div class="flex justify-center items-center mb-4">
                                <span class="text-2xl font-bold text-[#ef476f]">180 ر.س</span>
                            </div>
                            <button class="btn-primary w-full bg-pink-100 text-[#ef476f] font-medium py-2.5 rounded-full hover:bg-pink-200 transition">
                                أضف إلى السلة
                            </button>
                        </div>
                    </div>
                    
                    <!-- بطاقة المنتج 3 -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                        <div class="relative overflow-hidden">
                            <img src="https://placehold.co/600x450/f7e8f0/8338ec?text=Palette" 
                                 alt="باليت ظلال عيون" 
                                 class="w-full h-64 object-cover transform group-hover:scale-105 transition duration-500"
                                 onerror="this.onerror=null;this.src='https://placehold.co/600x450/fff0f5/ef476f?text=Product+3';">
                            <div class="absolute top-3 right-3 bg-green-500 text-white text-xs font-bold py-1 px-3 rounded-full">تخفيض</div>
                        </div>
                        <div class="p-5 text-center">
                            <h3 class="text-xl font-semibold mb-2 hover:text-[#ef476f] transition">باليت ظلال عيون</h3>
                            <p class="text-gray-500 mb-4">ألوان ترابية غنية تدوم طويلاً.</p>
                            <div class="flex justify-center items-center mb-4">
                                <span class="text-xl text-gray-400 line-through ml-3">150 ر.س</span>
                                <span class="text-2xl font-bold text-[#ef476f]">120 ر.س</span>
                            </div>
                            <button class="btn-primary w-full bg-pink-100 text-[#ef476f] font-medium py-2.5 rounded-full hover:bg-pink-200 transition">
                                أضف إلى السلة
                            </button>
                        </div>
                    </div>

                    <!-- بطاقة المنتج 4 -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                        <div class="relative overflow-hidden">
                            <img src="https://placehold.co/600x450/e7f0f7/3a86ff?text=Cleanser" 
                                 alt="غسول وجه لطيف" 
                                 class="w-full h-64 object-cover transform group-hover:scale-105 transition duration-500"
                                 onerror="this.onerror=null;this.src='https://placehold.co/600x450/fff0f5/ef476f?text=Product+4';">
                        </div>
                        <div class="p-5 text-center">
                            <h3 class="text-xl font-semibold mb-2 hover:text-[#ef476f] transition">غسول وجه لطيف</h3>
                            <p class="text-gray-500 mb-4">ينظف بعمق دون تجفيف البشرة.</p>
                            <div class="flex justify-center items-center mb-4">
                                <span class="text-2xl font-bold text-[#ef476f]">75 ر.س</span>
                            </div>
                            <button class="btn-primary w-full bg-pink-100 text-[#ef476f] font-medium py-2.5 rounded-full hover:bg-pink-200 transition">
                                أضف إلى السلة
                            </button>
                        </div>
                    </div>
                    
                </div>
                
                <div class="text-center mt-12">
                    <a href="#" class="btn-primary inline-block text-lg bg-pink-500 text-white font-semibold py-3 px-10 rounded-full shadow-md hover:bg-pink-600">
                        شاهد كل المنتجات
                    </a>
                </div>
            </div>
        </section>

        <!-- قسم الاشتراك في النشرة البريدية (CTA) -->
        <section class="bg-[#ef476f] py-16">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl font-bold text-white mb-4">كوني أول من يعلم!</h2>
                <p class="text-white/90 mb-8 max-w-2xl mx-auto">
                    اشتركي في نشرتنا البريدية لتحصلي على أحدث العروض، ونصائح الجمال، وإطلاق المنتجات الجديدة.
                </p>
                <form class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 sm:space-x-reverse">
                    <input type="email" placeholder="أدخلي بريدك الإلكتروني هنا" required
                           class="w-full sm:w-80 px-5 py-3 rounded-full border-2 border-white focus:outline-none focus:ring-2 focus:ring-pink-300 text-gray-800 placeholder-gray-500 transition">
                    <button type="submit" class="btn-primary bg-white text-[#ef476f] font-semibold py-3 px-8 rounded-full hover:bg-pink-100 transition">
                        اشتركي الآن
                    </button>
                </form>
            </div>
        </section>
        
    </main>

    <!-- تذييل الصفحة (Footer) -->
    <footer class="bg-gray-800 text-white pt-12 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
                <!-- نبذة عنا -->
                <div>
                    <h3 class="text-xl font-bold mb-4 text-[#ef476f]">Beauty Bliss</h3>
                    <p class="text-sm text-gray-400">
                        مهمتنا هي توفير مستحضرات تجميل آمنة وفعالة، مصنوعة بحب وشغف لجمالك.
                    </p>
                </div>
                
                <!-- روابط سريعة -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 border-b-2 border-[#ef476f] pb-1 inline-block">روابط سريعة</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-[#ef476f] transition">حسابي</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-[#ef476f] transition">تتبع الطلب</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-[#ef476f] transition">سياسة الاسترجاع</a></li>
                    </ul>
                </div>

                <!-- الدعم -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 border-b-2 border-[#ef476f] pb-1 inline-block">الدعم</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-[#ef476f] transition">الأسئلة الشائعة</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-[#ef476f] transition">تواصل معنا</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-[#ef476f] transition">شروط الاستخدام</a></li>
                    </ul>
                </div>

                <!-- التواصل -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 border-b-2 border-[#ef476f] pb-1 inline-block">التواصل</h3>
                    <p class="text-sm text-gray-400">
                        الرياض، المملكة العربية السعودية<br>
                        البريد الإلكتروني: info@beautybliss.com
                    </p>
                    <!-- أيقونات التواصل الاجتماعي (Placeholder) -->
                    <div class="flex space-x-3 space-x-reverse mt-4">
                        <a href="#" class="text-gray-400 hover:text-[#ef476f] transition">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><!-- Facebook --></svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-[#ef476f] transition">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><!-- Instagram --></svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-[#ef476f] transition">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><!-- Twitter --></svg>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- حقوق النشر -->
            <div class="text-center border-t border-gray-700 pt-6 mt-6">
                <p class="text-sm text-gray-500">
                    &copy; 2025 Beauty Bliss. جميع الحقوق محفوظة.
                </p>
            </div>
        </div>
    </footer>

    <script>
        // دالة بسيطة لتفعيل قائمة الجوال (Hamburger Menu)
        document.addEventListener('DOMContentLoaded', () => {
            const mobileMenuButton = document.querySelector('header button:last-child');
            const mobileMenu = document.getElementById('mobile-menu');

            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        });
    </script>
</body>
</html>
