جديد

<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, virtual-scale=1.0"> <title>تصميم متجر صحة وجمال</title>  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap" rel="stylesheet">  <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { Extend: {colors: { الجمال: { 50: '#FFF5F7'، 100: '#FFE5EC'، 500: '#F43F5E', // الجمالي الوردي الأساسي 600: '#E11D48', 900: '#881337', } }, FontFamily: { sans: ['Tajawal', 'sans-serif'], } } } </script> </head> <body class="bg-slate-50 text-slate-800 Font-sans min-h-screen">  <header class="bg-white/80 خلفية-blur-md مثبت أعلى-0 z-50 border-b border-beauty-100 Shadow-sm"> <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">  <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-beauty-500 flex items-center justify-center text-white font-bold text-lg shadow-md shadow-beauty-100">ص</div> <span class="text-2xl font-black text-slate-800 tracking-wide">صحة <span class="text-beauty-500">وجمال</span></span> </div>  <div class="flex items-center gap-2 bg-slate-100 p-1 rounded-xl text-xs font-bold"> <button onclick="switchLanguage('saudi')" id="btn-saudi" class="px-3 py-1.5 rounded-lg bg-white text-beauty-600 Shadow-sm Transition-all">لهجة سعودية ��</button> <button onclick="switchLanguage('fusha')" id="btn-fusha" class="px-3 py-1.5 rounded-lg text-slate-500 Transition-all">عربية فصحى ��</button> </div> </div> </header>  <section class="max-w-6xl mx-auto px-4 mt-8"> <div class="relative rounded-3xl overflow-hidden bg-gradient-to-l from-beauty-900 to-beauty-600 text-white p-8 md:p-12 Shadow-xl Shadow-beauty-100">  <div class="absolute -يمين-10 -أسفل-10 ث-40 h-40 bg-white/10 rounded-full Blur-2xl"></div> <div class="max-w-md النسبي z-10"> <span class="bg-white/20 text-white text-xs Font-bold px-3 py-1 rounded-fullكبيرة تتبع-واسعة خلفية-blur-sm">أفضل خيار لكِ</span>  <h1 معرف = "بطل العنوان" فئة = "نص-3xl مد:text-5xlfont-black mt-4 الرائدة-tight"> دلّعي نفسك.. زينك يستاهل أكثر! ✨ </h1>  <p id="hero-desc" class="mt-4 text-beauty-100 text-sm md:text-base القيادة-relaxed"> وفرنا لك قوي منتجات العناية بالبشرة والشعر وتعطي تكلفة سريعة لباب بيتك. </p> <div class="mt-8 flex trap-4"> <button class="bg-white text-beauty-600font-bold px-6 py-3 rounded-full Shadow-lg hover:scale-105 Transform-transform text-sm">تسوقي الآن</button> <button class="bg-transparent border border-white/40 text-white الخط غامق px-6 py-3 rounded-full hover:bg-white/10 Transition-colors text-sm">أحدث العروض</button> </div> </div> </section>  <main class="max-w-6xl mx-auto px-4 py-12"> <h2 class="text-2xl Font-black mb-8 border-r-4 border-beauty-500 pr-3">الأكثر مخزوناً هذا الأسبوع</h2> <div class="gridgrid-cols-1 sm:grid-cols-2 lg:grid-cols-3 فجوة-6">  <div class="bg-white rounded-2xl Shadow-sm border border-slate-100 overflow-hidden group hover:shadow-md Transition-all"> <div class="الجانب المخفي للتجاوز النسبي-[4/3] bg-slate-100"> <img src="https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=500&auto=format&fit=crop&q=60" alt="سيروم" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"> <span class="absolute top-3 right-3 bg-rose-500 text-white text-xs font-bold px-2.5 py-1 rounded-full">خصم 30%</span> </div> <div class="p-5"> <span class="text-xs text-beauty-500 font-bold uppercase tracking-wider">عناية بالآخرين</span> <h3 class="font-bold text-lg text-slate-800 mt-1">سيروم فيتامين C للنضارة</h3>  <p id="prod-desc-1" class="text-xs text-slate-500 my-3 bg-beauty-50/50 p-2 rounded-lg border-r-2 border-beauty-500 italic"> لا تدعي لك مع هالسيروم.. نضارة تفتح النفس! �� </p> <div class="flex items-baseline الفجوة-2 mt-4"> <span class="text-2xlfont-black text-beauty-600">89 ر.س</span> <span class="text-sm text-slate-400 line-through">120 ر.س</span> </div> <button class="w-full mt-5 بي جي-بيوتي-500 hover:bg-beauty-600 text-white font-bold py-3 rounded-xl transition-colors text-sm flex items-center justify-center gap-2"> حفه سحلة </button> </div> </div>  <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden group hover:shadow-md transition-all"> <div class="relative overflow-hidden aspect-[4/3] bg-slate-100"> <img src="https://images.unsplash.com/photo-1608248597481-