Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IKEA Lebanon - 2025 Launch</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans:wght@400;700&display=swap'); | |
| :root { | |
| --ikea-blue: #0058a3; | |
| --ikea-yellow: #ffdb00; | |
| } | |
| body { | |
| font-family: 'Noto Sans', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .arabic { | |
| font-family: 'Noto Sans Arabic', sans-serif; | |
| direction: rtl; | |
| } | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 88, 163, 0.7), rgba(0, 88, 163, 0.7)), | |
| url('https://images.unsplash.com/photo-1556909212-d5b604d0c90d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .language-toggle { | |
| transition: all 0.3s ease; | |
| } | |
| .language-toggle:hover { | |
| background-color: var(--ikea-yellow); | |
| color: var(--ikea-blue); | |
| } | |
| .active-language { | |
| background-color: var(--ikea-yellow); | |
| color: var(--ikea-blue); | |
| font-weight: bold; | |
| } | |
| .catalog-card { | |
| perspective: 1000px; | |
| } | |
| .catalog-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .catalog-card:hover .catalog-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .catalog-front, .catalog-back { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .catalog-back { | |
| transform: rotateY(180deg); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: var(--ikea-yellow); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .ugc-gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 1rem; | |
| } | |
| @media (max-width: 768px) { | |
| .hero-content { | |
| flex-direction: column; | |
| } | |
| .language-toggle-container { | |
| flex-direction: row; | |
| justify-content: center; | |
| margin-top: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Language Toggle --> | |
| <div class="fixed top-4 right-4 z-50 flex space-x-2 language-toggle-container"> | |
| <button id="en-toggle" class="language-toggle active-language px-3 py-1 rounded-full bg-yellow-400 text-blue-800 font-medium">EN</button> | |
| <button id="ar-toggle" class="language-toggle px-3 py-1 rounded-full bg-blue-800 text-white">AR</button> | |
| <button id="fr-toggle" class="language-toggle px-3 py-1 rounded-full bg-blue-800 text-white">FR</button> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-800 text-white shadow-lg sticky top-0 z-40"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-2xl font-bold flex items-center"> | |
| <span class="text-yellow-400">IKEA</span> | |
| <span class="ml-2">Lebanon</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#new" class="nav-link hover:text-yellow-400">What's New?</a> | |
| <a href="#campaigns" class="nav-link hover:text-yellow-400">Campaigns</a> | |
| <a href="#forest" class="nav-link hover:text-yellow-400">Lebanese Forest</a> | |
| <a href="#catalog" class="nav-link hover:text-yellow-400">Catalogues</a> | |
| <a href="#hacks" class="nav-link hover:text-yellow-400">Hack Your IKEA</a> | |
| <a href="#community" class="nav-link hover:text-yellow-400">Community</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="#new" class="block py-2 hover:text-yellow-400">What's New?</a> | |
| <a href="#campaigns" class="block py-2 hover:text-yellow-400">Campaigns</a> | |
| <a href="#forest" class="block py-2 hover:text-yellow-400">Lebanese Forest</a> | |
| <a href="#catalog" class="block py-2 hover:text-yellow-400">Catalogues</a> | |
| <a href="#hacks" class="block py-2 hover:text-yellow-400">Hack Your IKEA</a> | |
| <a href="#community" class="block py-2 hover:text-yellow-400">Community</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Banner --> | |
| <section class="hero-bg text-white py-20 md:py-32 relative"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4" data-en="Welcome to IKEA Lebanon!" data-ar="أهلاً وسهلاً في ايكيا لبنان!" data-fr="Bienvenue chez IKEA Liban!">Welcome to IKEA Lebanon!</h1> | |
| <p class="text-xl mb-8" data-en="Swedish design meets Lebanese soul" data-ar="التصميم السويدي يلتقي بالروح اللبنانية" data-fr="Design suédois rencontre l'âme libanaise">Swedish design meets Lebanese soul</p> | |
| <button class="bg-yellow-400 text-blue-800 font-bold py-3 px-8 rounded-full hover:bg-yellow-300 transition duration-300"> | |
| <span data-en="Browse the 2025 Lebanese Catalogue" data-ar="تصفح كتالوج ايكيا لبنان 2025" data-fr="Parcourir le catalogue libanais 2025">Browse the 2025 Lebanese Catalogue</span> | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <img src="https://images.unsplash.com/photo-1562440499-64c9a111f713?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Swedish cinnamon bun" class="w-1/2 absolute left-0 top-0 rounded-lg shadow-lg border-4 border-white"> | |
| <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Zaatar man'oushe" class="w-1/2 absolute right-0 bottom-0 rounded-lg shadow-lg border-4 border-white"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What's New Section --> | |
| <section id="new" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-2" data-en="What's New?" data-ar="شو جديد؟" data-fr="Quoi de neuf ?">What's New?</h2> | |
| <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-tree text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="IKEA Lebanon Forest" data-ar="غابة ايكيا لبنان" data-fr="Forêt IKEA Liban">IKEA Lebanon Forest</h3> | |
| <p class="text-gray-600 mb-4" data-en="Our reforestation project in Baabda" data-ar="مشروعنا لإعادة التشجير في بعبدا" data-fr="Notre projet de reboisement à Baabda">Our reforestation project in Baabda</p> | |
| <a href="#forest" class="text-blue-800 font-medium hover:underline" data-en="Learn more" data-ar="المزيد" data-fr="En savoir plus">Learn more</a> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-bus text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="Free Tuk-Tuks & Shuttles" data-ar="تكتك ومكوكات مجانية" data-fr="Tuk-Tuks et navettes gratuits">Free Tuk-Tuks & Shuttles</h3> | |
| <p class="text-gray-600 mb-4" data-en="Convenient transport to our store" data-ar="مواصلات مريحة إلى متجرنا" data-fr="Transport pratique vers notre magasin">Convenient transport to our store</p> | |
| <a href="#footer" class="text-blue-800 font-medium hover:underline" data-en="See schedule" data-ar="راجع الجدول" data-fr="Voir l'horaire">See schedule</a> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-tools text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="Fix Your IKEA Corner" data-ar="زاوية إصلاح ايكيا" data-fr="Coin Réparer votre IKEA">Fix Your IKEA Corner</h3> | |
| <p class="text-gray-600 mb-4" data-en="Local artisans + repair culture" data-ar="حرفيون محليون + ثقافة الإصلاح" data-fr="Artisans locaux + culture de réparation">Local artisans + repair culture</p> | |
| <a href="#" class="text-blue-800 font-medium hover:underline" data-en="Visit corner" data-ar="زيارة الزاوية" data-fr="Visiter le coin">Visit corner</a> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-mobile-alt text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="AR Room Visualizer" data-ar="مصور غرف بالواقع المعزز" data-fr="Visualiseur de pièce en AR">AR Room Visualizer</h3> | |
| <p class="text-gray-600 mb-4" data-en="Scan & style your home with our app" data-ar="صور منزلك وصممه بتطبيقنا" data-fr="Scannez et stylisez votre maison avec notre application">Scan & style your home with our app</p> | |
| <a href="#" class="text-blue-800 font-medium hover:underline" data-en="Try it now" data-ar="جربه الآن" data-fr="Essayez maintenant">Try it now</a> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-paw text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="Pet Corner" data-ar="زاوية الحيوانات الأليفة" data-fr="Coin pour animaux">Pet Corner</h3> | |
| <p class="text-gray-600 mb-4" data-en="Cozy + functional designs for cats & dogs" data-ar="تصاميم مريحة ووظيفية للقطط والكلاب" data-fr="Designs confortables et fonctionnels pour chats et chiens">Cozy + functional designs for cats & dogs</p> | |
| <a href="#" class="text-blue-800 font-medium hover:underline" data-en="See products" data-ar="راجع المنتجات" data-fr="Voir les produits">See products</a> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-puzzle-piece text-blue-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="IKEA x LEGO Challenge" data-ar="تحدي ايكيا x ليغو" data-fr="Défi IKEA x LEGO">IKEA x LEGO Challenge</h3> | |
| <p class="text-gray-600 mb-4" data-en="Build your dream room challenge" data-ar="تحدي بناء غرفتك المثالية" data-fr="Défi de construction de votre pièce de rêve">Build your dream room challenge</p> | |
| <a href="#" class="text-blue-800 font-medium hover:underline" data-en="Join now" data-ar="انضم الآن" data-fr="Rejoignez maintenant">Join now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Campaigns --> | |
| <section id="campaigns" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-2" data-en="Featured Campaigns" data-ar="حملات مميزة" data-fr="Campagnes en vedette">Featured Campaigns</h2> | |
| <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Campaign 1 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Sofas & Sarcasm" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-blue-800 opacity-30"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-white text-6xl opacity-90 hover:opacity-100 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-blue-800 mb-2" data-en="Sofas & Sarcasm" data-ar="أرائك وسخرية" data-fr="Canapés et sarcasme">Sofas & Sarcasm</h3> | |
| <p class="text-gray-600 mb-4" data-en="Watch our sitcom series: Teta Zaynab vs. the IKEA catalogue" data-ar="شاهد مسلسلنا الكوميدي: تيتا زينب ضد كتالوج ايكيا" data-fr="Regardez notre série comique : Teta Zaynab contre le catalogue IKEA">Watch our sitcom series: Teta Zaynab vs. the IKEA catalogue</p> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-blue-800 text-white font-medium py-2 px-6 rounded-full hover:bg-blue-700 transition duration-300"> | |
| <span data-en="Watch Now" data-ar="شاهد الآن" data-fr="Regarder maintenant">Watch Now</span> | |
| </button> | |
| <span class="text-gray-500" data-en="Weekly episodes" data-ar="حلقات أسبوعية" data-fr="Épisodes hebdomadaires">Weekly episodes</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign 2 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Swednese Kitchen Tales" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-yellow-400 opacity-30"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-blue-800 mb-2" data-en="Swednese Kitchen Tales" data-ar="حكايات مطبخ سويدني" data-fr="Contes de cuisine suédnoise">Swednese Kitchen Tales</h3> | |
| <p class="text-gray-600 mb-4" data-en="Lebanese + Swedish chefs cook fusion dishes with QR recipes linked to cookware" data-ar="طهاة لبنانيون وسويديون يطهون أطباق مدمجة مع وصفات QR مرتبطة بأدوات الطهي" data-fr="Chefs libanais et suédois cuisinent des plats fusion avec des recettes QR liées aux ustensiles de cuisine">Lebanese + Swedish chefs cook fusion dishes with QR recipes linked to cookware</p> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-yellow-400 text-blue-800 font-medium py-2 px-6 rounded-full hover:bg-yellow-300 transition duration-300"> | |
| <span data-en="Try it at home" data-ar="جربها في المنزل" data-fr="Essayez à la maison">Try it at home</span> | |
| </button> | |
| <div class="bg-blue-800 text-white p-2 rounded-lg"> | |
| <i class="fas fa-qrcode"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lebanese Forest Section --> | |
| <section id="forest" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-4" data-en="A Forest is Growing in Baabda..." data-ar="غابة تنمو في بعبدا..." data-fr="Une forêt pousse à Baabda...">A Forest is Growing in Baabda...</h2> | |
| <p class="text-gray-600 mb-6" data-en="Our immersive IKEA forest at Fayadieh features AR troll corners, storytelling nooks, and stuga playhouses where families can connect with nature and Lebanese folklore." data-ar="تتميز غابة ايكيا الغامرة في الفياضية بزوايا ترول بالواقع المعزز، وزوايا سرد القصص، وبيوت اللعب حيث يمكن للعائلات التواصل مع الطبيعة والفولكلور اللبناني." data-fr="Notre forêt IKEA immersive à Fayadieh comprend des coins troll en AR, des recoins de contes et des maisons de jeu stuga où les familles peuvent se connecter avec la nature et le folklore libanais.">Our immersive IKEA forest at Fayadieh features AR troll corners, storytelling nooks, and stuga playhouses where families can connect with nature and Lebanese folklore.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-400 p-2 rounded-full mr-4"> | |
| <i class="fas fa-tree text-blue-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-800" data-en="AR Troll Hunt" data-ar="مطاردة الترول بالواقع المعزز" data-fr="Chasse au troll en AR">AR Troll Hunt</h4> | |
| <p class="text-gray-600" data-en="Find hidden trolls and learn Lebanese environmental wisdom" data-ar="ابحث عن التماثيل المخفية وتعلم الحكمة البيئية اللبنانية" data-fr="Trouvez des trolls cachés et apprenez la sagesse environnementale libanaise">Find hidden trolls and learn Lebanese environmental wisdom</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-400 p-2 rounded-full mr-4"> | |
| <i class="fas fa-book text-blue-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-800" data-en="Storytelling Nooks" data-ar="زوايا سرد القصص" data-fr="Coins de contes">Storytelling Nooks</h4> | |
| <p class="text-gray-600" data-en="Daily sessions of Lebanese folk tales and Swedish sagas" data-ar="جلسات يومية من الحكايات الشعبية اللبنانية والملاحم السويدية" data-fr="Séances quotidiennes de contes populaires libanais et de sagas suédoises">Daily sessions of Lebanese folk tales and Swedish sagas</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-400 p-2 rounded-full mr-4"> | |
| <i class="fas fa-home text-blue-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-800" data-en="Stuga Playhouses" data-ar="بيوت اللعب" data-fr="Maisons de jeu Stuga">Stuga Playhouses</h4> | |
| <p class="text-gray-600" data-en="Miniature Swedish cabins with Lebanese decorative touches" data-ar="أكواخ سويدية مصغرة مع لمسات زخرفية لبنانية" data-fr="Cabanes suédoises miniatures avec des touches décoratives libanaises">Miniature Swedish cabins with Lebanese decorative touches</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-8 bg-blue-800 text-white font-medium py-3 px-8 rounded-full hover:bg-blue-700 transition duration-300"> | |
| <span data-en="Plan Your Visit" data-ar="خطط لزيارتك" data-fr="Planifiez votre visite">Plan Your Visit</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80" alt="IKEA Forest" class="w-full rounded-lg shadow-lg"> | |
| <div class="absolute -bottom-4 -right-4 bg-yellow-400 p-4 rounded-lg shadow-lg"> | |
| <div class="text-center"> | |
| <div class="text-blue-800 font-bold text-xl" data-en="Free" data-ar="مجاناً" data-fr="Gratuit">Free</div> | |
| <div class="text-blue-800" data-en="Family Shuttle" data-ar="مكوك عائلي" data-fr="Navette familiale">Family Shuttle</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Catalogues Section --> | |
| <section id="catalog" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-2" data-en="Our Catalogues" data-ar="كتالوجاتنا" data-fr="Nos catalogues">Our Catalogues</h2> | |
| <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4" data-en="Local homes. Local tastes. Global design." data-ar="منازل محلية. أذواق محلية. تصميم عالمي." data-fr="Maisons locales. Goûts locaux. Design global.">Local homes. Local tastes. Global design.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <!-- Global Catalogue --> | |
| <div class="catalog-card bg-white rounded-lg shadow-lg overflow-hidden h-96 relative"> | |
| <div class="catalog-inner h-full"> | |
| <div class="catalog-front h-full"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Global Catalogue" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2">2025 Global IKEA Catalogue</h3> | |
| <p class="text-gray-600 mb-4" data-en="Explore our worldwide collection" data-ar="استكشف مجموعتنا العالمية" data-fr="Découvrez notre collection mondiale">Explore our worldwide collection</p> | |
| <button class="text-blue-800 font-medium hover:underline" data-en="Flipbook View" data-ar="عرض الكتاب الرقمي" data-fr="Vue flipbook">Flipbook View</button> | |
| </div> | |
| </div> | |
| <div class="catalog-back bg-blue-800 text-white p-6 h-full flex flex-col justify-center items-center"> | |
| <h3 class="text-xl font-bold mb-4">2025 Global IKEA Catalogue</h3> | |
| <p class="text-center mb-6" data-en="Available in-store and online" data-ar="متوفر في المتجر وعبر الإنترنت" data-fr="Disponible en magasin et en ligne">Available in-store and online</p> | |
| <button class="bg-yellow-400 text-blue-800 font-medium py-2 px-6 rounded-full hover:bg-yellow-300 transition duration-300"> | |
| <span data-en="View Online" data-ar="عرض عبر الإنترنت" data-fr="Voir en ligne">View Online</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lebanese Catalogue --> | |
| <div class="catalog-card bg-white rounded-lg shadow-lg overflow-hidden h-96 relative"> | |
| <div class="catalog-inner h-full"> | |
| <div class="catalog-front h-full"> | |
| <img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1738&q=80" alt="Lebanese Catalogue" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2">2025 Lebanese Special Edition</h3> | |
| <p class="text-gray-600 mb-4" data-en="Coming soon - sign up for notification" data-ar="قريباً - سجل للحصول على إشعار" data-fr="Bientôt disponible - inscrivez-vous pour une notification">Coming soon - sign up for notification</p> | |
| <div class="flex items-center"> | |
| <input type="email" placeholder="Your email" class="border border-gray-300 rounded-l-full py-2 px-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-800"> | |
| <button class="bg-blue-800 text-white py-2 px-4 rounded-r-full hover:bg-blue-700 transition duration-300"> | |
| <span data-en="Notify" data-ar="أخبرني" data-fr="Notifier">Notify</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="catalog-back bg-yellow-400 text-blue-800 p-6 h-full flex flex-col justify-center items-center"> | |
| <h3 class="text-xl font-bold mb-4">2025 Lebanese Special Edition</h3> | |
| <p class="text-center mb-6" data-en="Featuring Lebanese homes with IKEA solutions" data-ar="يضم منازل لبنانية مع حلول ايكيا" data-fr="Présentant des maisons libanaises avec des solutions IKEA">Featuring Lebanese homes with IKEA solutions</p> | |
| <button class="bg-blue-800 text-white font-medium py-2 px-6 rounded-full hover:bg-blue-700 transition duration-300"> | |
| <span data-en="Preview" data-ar="معاينة" data-fr="Aperçu">Preview</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hack Your IKEA Section --> | |
| <section id="hacks" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-2" data-en="Hack Your IKEA" data-ar="اخترع ايكيا الخاص بك" data-fr="Hackez votre IKEA">Hack Your IKEA</h2> | |
| <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4" data-en="Show us your transformation with #HackYourIKEA" data-ar="أرنا تحويلك مع #اخترع_ايكيا_الخاص_بك" data-fr="Montrez-nous votre transformation avec #HackezVotreIKEA">Show us your transformation with #HackYourIKEA</p> | |
| </div> | |
| <div class="ugc-gallery mb-12"> | |
| <!-- UGC Images --> | |
| <div class="rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1616486334422-ef10e5a87d3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="IKEA Hack" class="w-full h-48 object-cover"> | |
| <div class="p-4 bg-gray-50"> | |
| <p class="text-gray-600" data-en="Bookshelf turned room divider" data-ar="رف كتب تحول إلى فاصل غرف" data-fr="Étagère transformée en séparateur de pièce">Bookshelf turned room divider</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-800 flex items-center justify-center text-white mr-2">JD</div> | |
| <span class="text-sm text-gray-500">Jana D.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1617806118233-18e1de247200?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="IKEA Hack" class="w-full h-48 object-cover"> | |
| <div class="p-4 bg-gray-50"> | |
| <p class="text-gray-600" data-en="Kitchen island with Lebanese tiles" data-ar="جزيرة مطبخ مع بلاط لبناني" data-fr="Îlot de cuisine avec carreaux libanais">Kitchen island with Lebanese tiles</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-800 flex items-center justify-center text-white mr-2">MA</div> | |
| <span class="text-sm text-gray-500">Maya A.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" alt="IKEA Hack" class="w-full h-48 object-cover"> | |
| <div class="p-4 bg-gray-50"> | |
| <p class="text-gray-600" data-en="Bedside table with mosaic top" data-ar="طاولة سرير مع سطح فسيفساء" data-fr="Table de chevet avec plateau en mosaïque">Bedside table with mosaic top</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-800 flex items-center justify-center text-white mr-2">KH</div> | |
| <span class="text-sm text-gray-500">Karim H.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1616486333187-64749d459c6a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="IKEA Hack" class="w-full h-48 object-cover"> | |
| <div class="p-4 bg-gray-50"> | |
| <p class="text-gray-600" data-en="Desk with built-in zaatar garden" data-ar="مكتب مع حديقة زعتر مدمجة" data-fr="Bureau avec jardin de zaatar intégré">Desk with built-in zaatar garden</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-800 flex items-center justify-center text-white mr-2">LS</div> | |
| <span class="text-sm text-gray-500">Lina S.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-2xl mx-auto bg-gray-50 p-8 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4 text-center" data-en="Submit Your IKEA Hack" data-ar="قدم اختراع ايكيا الخاص بك" data-fr="Soumettez votre hack IKEA">Submit Your IKEA Hack</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" data-en="Your Name" data-ar="اسمك" data-fr="Votre nom">Your Name</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-800"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" data-en="Email" data-ar="البريد الإلكتروني" data-fr="Email">Email</label> | |
| <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-800"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" data-en="Description of Your Hack" data-ar="وصف اختراعك" data-fr="Description de votre hack">Description of Your Hack</label> | |
| <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-800" rows="3"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" data-en="Upload Photo" data-ar="رفع صورة" data-fr="Télécharger une photo">Upload Photo</label> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center"> | |
| <i class="fas fa-cloud-upload-alt text-blue-800 text-3xl mb-2"></i> | |
| <p class="text-gray-500" data-en="Drag & drop your photo here or click to browse" data-ar="اسحب وأفلت صورتك هنا أو انقر للتصفح" data-fr="Glissez-déposez votre photo ici ou cliquez pour parcourir">Drag & drop your photo here or click to browse</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-800 text-white font-medium py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-300"> | |
| <span data-en="Submit" data-ar="إرسال" data-fr="Soumettre">Submit</span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-2" data-en="Community Vibes" data-ar="أجواء المجتمع" data-fr="Ambiance communautaire">Community Vibes</h2> | |
| <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4" data-en="Join the IKEA Lebanon family" data-ar="انضم إلى عائلة ايكيا لبنان" data-fr="Rejoignez la famille IKEA Liban">Join the IKEA Lebanon family</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1547153760-18fc86324498?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80" alt="Lebanese + Swedish Dance Circle" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="Lebanese + Swedish Dance Circle" data-ar="دائرة رقص لبنانية سويدية" data-fr="Cercle de danse libano-suédois">Lebanese + Swedish Dance Circle</h3> | |
| <p class="text-gray-600 mb-4" data-en="From our opening event - dabke meets Scandinavian folk dance" data-ar="من حدث الافتتاح - الدبكة تلتقي بالرقص الشعبي الاسكندنافي" data-fr="De notre événement d'ouverture - dabke rencontre la danse folklorique scandinave">From our opening event - dabke meets Scandinavian folk dance</p> | |
| <div class="flex space-x-4"> | |
| <button class="flex items-center text-blue-800 hover:underline"> | |
| <i class="fas fa-play mr-2"></i> | |
| <span data-en="Watch Video" data-ar="شاهد الفيديو" data-fr="Voir la vidéo">Watch Video</span> | |
| </button> | |
| <button class="flex items-center text-blue-800 hover:underline"> | |
| <i class="fas fa-images mr-2"></i> | |
| <span data-en="View Photos" data-ar="عرض الصور" data-fr="Voir les photos">View Photos</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="IKEA Family Events" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-2" data-en="IKEA Family Events" data-ar="فعاليات عائلة ايكيا" data-fr="Événements famille IKEA">IKEA Family Events</h3> | |
| <p class="text-gray-600 mb-4" data-en="Highlights from our community workshops and family days" data-ar="أبرز ما في ورش العمل المجتمعية وأيام العائلة" data-fr="Points forts de nos ateliers communautaires et journées familiales">Highlights from our community workshops and family days</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-400 text-blue-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-blue-800" data-en="Upcoming: DIY Workshop" data-ar="القادم: ورشة عمل افعلها بنفسك" data-fr="À venir : Atelier DIY">Upcoming: DIY Workshop</h4> | |
| <p class="text-sm text-gray-500" data-en="June 15, 2025" data-ar="15 يونيو 2025" data-fr="15 juin 2025">June 15, 2025</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-400 text-blue-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-child"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-blue-800" data-en="Kids Design Challenge" data-ar="تحدي تصميم الأطفال" data-fr="Défi de design pour enfants">Kids Design Challenge</h4> | |
| <p class="text-sm text-gray-500" data-en="July 3, 2025" data-ar="3 يوليو 2025" data-fr="3 juillet 2025">July 3, 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="bg-blue-800 text-white font-medium py-3 px-8 rounded-full hover:bg-blue-700 transition duration-300"> | |
| <span data-en="Join the IKEA Family" data-ar="انضم إلى عائلة ايكيا" data-fr="Rejoignez la famille IKEA">Join the IKEA Family</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="footer" class="bg-blue-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4" data-en="Store Hours" data-ar="ساعات العمل" data-fr="Heures d'ouverture">Store Hours</h3> | |
| <ul class="space-y-2"> | |
| <li data-en="Monday - Friday: 10AM - 10PM" data-ar="الإثنين - الجمعة: 10 صباحاً - 10 مساءً" data-fr="Lundi - Vendredi : 10h - 22h">Monday - Friday: 10AM - 10PM</li> | |
| <li data-en="Saturday - Sunday: 9AM - 11PM" data-ar="السبت - الأحد: 9 صباحاً - 11 مساءً" data-fr="Samedi - Dimanche : 9h - 23h">Saturday - Sunday: 9AM - 11PM</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4" data-en="Directions" data-ar="الاتجاهات" data-fr="Itinéraire">Directions</h3> | |
| <p class="mb-2" data-en="Fayadieh, Baabda" data-ar="الفياضية، بعبدا" data-fr="Fayadieh, Baabda">Fayadieh, Baabda</p> | |
| <p class="mb-4" data-en="Free shuttles from Beirut every hour" data-ar="مكوكات مجانية من بيروت كل ساعة" data-fr="Navettes gratuites de Beyrouth toutes les heures">Free shuttles from Beirut every hour</p> | |
| <button class="text-yellow-400 hover:underline flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span data-en="View on Map" data-ar="عرض على الخريطة" data-fr="Voir sur la carte">View on Map</span> | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4" data-en="Contact Us" data-ar="اتصل بنا" data-fr="Contactez-nous">Contact Us</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2 text-yellow-400"></i> | |
| <span>+961 1 234 567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-yellow-400"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4" data-en="Follow Us" data-ar="تابعنا" data-fr="Suivez-nous">Follow Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-blue-800 transition duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-blue-800 transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-blue-800 transition duration-300"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-blue-800 transition duration-300"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium mb-2" data-en="Newsletter" data-ar="النشرة الإخبارية" data-fr="Newsletter">Newsletter</h4> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="bg-blue-800 text-white py-2 px-4 rounded-l-full focus:outline-none w-full placeholder-gray-400"> | |
| <button class="bg-yellow-400 text-blue-800 py-2 px-4 rounded-r-full hover:bg-yellow-300 transition duration-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold flex items-center"> | |
| <span class="text-yellow-400">IKEA</span> | |
| <span class="ml-2">Lebanon</span> | |
| </a> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <span data-en="© 2025 IKEA Lebanon. All rights reserved." data-ar="© 2025 ايكيا لبنان. جميع الحقوق محفوظة." data-fr="© 2025 IKEA Liban. Tous droits réservés.">© 2025 IKEA Lebanon. All rights reserved.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Language Toggle Functionality | |
| const enToggle = document.getElementById('en-toggle'); | |
| const arToggle = document.getElementById('ar-toggle'); | |
| const frToggle = document.getElementById('fr-toggle'); | |
| function setLanguage(lang) { | |
| // Update toggle buttons | |
| enToggle.classList.remove('active-language'); | |
| arToggle.classList.remove('active-language'); | |
| frToggle.classList.remove('active-language'); | |
| if (lang === 'en') { | |
| enToggle.classList.add('active-language'); | |
| document.body.classList.remove('arabic'); | |
| } else if (lang === 'ar') { | |
| arToggle.classList.add('active-language'); | |
| document.body.classList.add('arabic'); | |
| } else if (lang === 'fr') { | |
| frToggle.classList.add('active-language'); | |
| document.body.classList.remove('arabic'); | |
| } | |
| // Update all elements with data attributes | |
| document.querySelectorAll('[data-en]').forEach(element => { | |
| if (lang === 'en') { | |
| element.textContent = element.getAttribute('data-en'); | |
| } else if (lang === 'ar') { | |
| element.textContent = element.getAttribute('data-ar'); | |
| } else if (lang === 'fr') { | |
| element.textContent = element.getAttribute('data-fr'); | |
| } | |
| }); | |
| // Store preference in localStorage | |
| localStorage.setItem('ikea-lb-lang', lang); | |
| } | |
| enToggle.addEventListener('click', () => setLanguage('en')); | |
| arToggle.addEventListener('click', () => setLanguage('ar')); | |
| frToggle.addEventListener('click', () => setLanguage('fr')); | |
| // Check for saved language preference | |
| const savedLang = localStorage.getItem('ikea-lb-lang'); | |
| if (savedLang) { | |
| setLanguage(savedLang); | |
| } else { | |
| // Default to English | |
| setLanguage('en'); | |
| } | |
| // Mobile Menu Toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuToggle.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Scroll to top button could be added here if needed | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sarayhfdyyh/lebanon-ikea" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |