Spaces:

sarayhfdyyh
/

lebanon-ikea

Running

App Files Files Community

sarayhfdyyh commited on May 18

Commit

2f2053b

verified ·

1 Parent(s): 1a8e6a6

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +747 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Lebanon Ikea
-emoji: 👁
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: lebanon-ikea
+emoji: 🐳
+colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,747 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Here’s a complete prompt you can use to brief a web designer, developer, or AI website builder to create the official IKEA Lebanon website. It integrates all the ideas and localizations from this chat — in English, with headers also provided in Arabic and French for a trilingual user experience: --- WEBSITE CREATION PROMPT: IKEA LEBANON — 2025 LAUNCH Main Language: English Secondary Languages: Arabic, French (user can switch with a top-right language toggle) Tone: Warm, witty, welcoming — true to IKEA’s global spirit, with strong Lebanese cultural fusion Visual Identity: Bold blue and yellow color palette, clean lines, local photography, and regional illustrations --- HOMEPAGE SECTIONS 1. Hero Banner “Ahlan w Sahlan IKEA Lebanon!” CTA: Browse the 2025 Lebanese Catalogue Visual: Split image of a Swedish cinnamon bun and a zaatar man’oushe Language Toggle: EN | AR | FR --- 2. What's New? (Section title in Arabic & French below) “Shou Jdid?” | “Quoi de neuf ?” Rotating tiles: IKEA Lebanon Forest (Baabda) Free Tuk-Tuks & Shuttle Buses Fix Your IKEA corner: local artisans + repair culture AR room visualizer (scan & style your home) Pet Corner (cozy + functional designs for cats & dogs) IKEA x LEGO: Build your dream room challenge IKEA Hack UGC Contest --- 3. Featured Campaigns “Sofas & Sarcasm” — Watch the Sitcom Series Meet Teta Zaynab vs. the IKEA catalogue Weekly IGTV episodes embedded on the site CTA: Watch Now “Swednese Kitchen Tales” Lebanese + Swedish chefs cook fusion dishes QR recipes linked to cookware CTA: Try it at home --- 4. Lebanese Forest at IKEA Fayadieh “A Forest is Growing in Baabda…” Immersive visuals of AR troll corners, storytelling nooks, and stuga playhouse CTA: Plan Your Visit + Free Family Shuttle Info --- 5. Catalogues 2025 Global IKEA Catalogue (flipbook view) 2025 Lebanese Special Edition – Coming Soon (signup for release notification) Highlight: “Local homes. Local tastes. Global design.” --- 6. User Section – Hack Your IKEA UGC upload form: “Show us your transformation” Gallery of best DIYs and IKEA hacks CTA: Submit Your IKEA Hack #HackYourIKEA #IKEAWithSoul --- 7. Community Vibes Split section: Lebanese + Swedish Dance Circle from opening event Highlights of IKEA Family events CTA: Join the Family --- 8. Footer Store Hours Directions (with shuttle & tuk-tuk info) Language switcher Social Links Contact IKEA Lebanon --- Would you like me to turn this into a clickable prototype layout (Figma-style), or generate visuals or copy for any specific section above?