Mobile Furniture Shop App UI Screen

<article class="relative bg-black rounded-[60px] px-2 py-2" style="width: 393px; height: 854px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.4);">
        <div class="relative h-full w-full rounded-[52px] overflow-hidden bg-white">
          <!-- Dynamic Island -->
          
          
          <!-- Status Bar -->
          <div class="relative z-40 flex pt-4 pr-6 pb-4 pl-6 items-center justify-between">
            <span class="sf-display text-lg font-semibold text-black font-sans">9:41</span>
            <div class="flex items-center gap-1">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal w-4 h-4 text-black"><path d="M2 20h.01" class=""></path><path d="M7 20v-4" class=""></path><path d="M12 20v-8" class=""></path><path d="M17 20V8" class=""></path><path d="M22 4v16" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-black"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
              <div class="relative">
                <div class="w-6 h-3 border rounded-sm border-black"></div>
                <div class="absolute top-0.5 left-0.5 w-4 h-2 bg-gray-950 rounded-[1px]"></div>
              </div>
            </div>
          </div>

          <!-- Navigation -->
          <div class="px-6 pb-4">
            <div class="flex items-center justify-between mb-4">
              <button class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" class="lucide lucide-arrow-left w-5 h-5 text-gray-700"><path d="m12 19-7-7 7-7" class=""></path><path d="M19 12H5" class=""></path></svg>
              </button>
              <h1 class="sf-display text-lg font-semibold text-black font-sans">Furniture Collection</h1>
              <button class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sliders-horizontal" class="lucide lucide-sliders-horizontal w-5 h-5 text-gray-700"><line x1="21" x2="14" y1="4" y2="4" class=""></line><line x1="10" x2="3" y1="4" y2="4" class=""></line><line x1="21" x2="12" y1="12" y2="12" class=""></line><line x1="8" x2="3" y1="12" y2="12" class=""></line><line x1="21" x2="16" y1="20" y2="20" class=""></line><line x1="12" x2="3" y1="20" y2="20" class=""></line><line x1="14" x2="14" y1="2" y2="6" class=""></line><line x1="8" x2="8" y1="10" y2="14" class=""></line><line x1="16" x2="16" y1="18" y2="22" class=""></line></svg>
              </button>
            </div>

            <!-- Search Bar -->
            <div class="relative">
              <div class="absolute left-3 top-1/2 -translate-y-1/2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search w-4 h-4 text-gray-500"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
              </div>
              <input type="text" placeholder="Search furniture" class="w-full placeholder-gray-500 text-black bg-gray-100 border-gray-200 border rounded-xl pt-3 pr-4 pb-3 pl-10">
            </div>
          </div>

          <!-- Content -->
          <div class="flex-1 overflow-auto">
            <div class="pr-6 pb-32 pl-6">
              <!-- Filter Tags -->
              <div class="flex gap-2 overflow-x-auto mb-6">
                <button class="flex-shrink-0 px-4 py-2 rounded-full font-medium bg-blue-600 text-white font-sans">All</button>
                <button class="flex-shrink-0 font-medium text-gray-700 bg-gray-100 rounded-full pt-2 pr-4 pb-2 pl-4">Seating</button>
                <button class="flex-shrink-0 px-4 py-2 rounded-full font-medium bg-gray-100 text-gray-700 font-sans">Tables</button>
                <button class="flex-shrink-0 px-4 py-2 rounded-full font-medium bg-gray-100 text-gray-700 font-sans">Lighting</button>
              </div>

              <!-- Product Grid -->
              <div class="grid grid-cols-2 gap-4">
                <div class="bg-gray-100 border-gray-200 border rounded-3xl pt-2 pr-2 pb-2 pl-2">
                  <div class="h-32 bg-gradient-mesh rounded-2xl mb-3 overflow-hidden">
                    <img src="https://cdn.midjourney.com/4ee350d7-3402-4e36-88e9-4badc6a08409/0_0.png?w=800&amp;q=80" alt="Sculptural Chair" class="w-full h-full object-cover" style="">
                  </div>
                  <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                      <h4 class="font-semibold text-sm text-black font-sans">Sculptural Chair</h4>
                      <p class="text-xs text-gray-500 font-sans">Organic design</p>
                    </div>
                    
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="font-bold text-black font-sans">$299</span>
                    <button class="w-7 h-7 rounded-full flex items-center justify-center bg-blue-600">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-3 h-3 text-white"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                    </button>
                  </div>
                </div>

                <div class="bg-gray-100 border-gray-200 border rounded-3xl pt-2 pr-2 pb-2 pl-2">
                  <div class="h-32 bg-gradient-mesh rounded-2xl mb-3 overflow-hidden">
                    <img alt="Modern Side Table" class="w-full h-full object-cover" src="https://cdn.midjourney.com/a50f9d26-47aa-4a33-a9b7-db9192d42744/0_2.png?w=800&amp;q=80" style="">
                  </div>
                  <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                      <h4 class="font-semibold text-sm text-black font-sans">Modern Side Table</h4>
                      <p class="text-xs text-gray-500 font-sans">Minimalist wood</p>
                    </div>
                    
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="font-bold text-black font-sans">$189</span>
                    <button class="w-7 h-7 rounded-full flex items-center justify-center bg-blue-600">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-3 h-3 text-white"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                    </button>
                  </div>
                </div>

                <div class="bg-gray-100 border-gray-200 border rounded-3xl pt-2 pr-2 pb-2 pl-2">
                  <div class="h-32 bg-gradient-mesh rounded-2xl mb-3 overflow-hidden">
                    <img alt="Designer Floor Lamp" class="w-full h-full object-cover" src="https://cdn.midjourney.com/3f024edd-4c1b-433c-b4a3-46bd832f2a4f/0_0.png?w=800&amp;q=80" style="">
                  </div>
                  <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                      <h4 class="text-sm font-semibold text-black">Japanese Chair</h4>
                      <p class="text-xs text-gray-500 font-sans">Brass &amp; marble</p>
                    </div>
                    
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="font-bold text-black font-sans">$425</span>
                    <button class="w-7 h-7 rounded-full flex items-center justify-center bg-blue-600">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-3 h-3 text-white"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                    </button>
                  </div>
                </div>

                <div class="bg-gray-100 border-gray-200 border rounded-3xl pt-2 pr-2 pb-2 pl-2">
                  <div class="h-32 bg-gradient-mesh rounded-2xl mb-3 overflow-hidden">
                    <img src="https://cdn.midjourney.com/f152fe09-de1e-41a0-8b75-4ddb8e040e99/0_0.png?w=800&amp;q=80" alt="Dining Table" class="w-full h-full object-cover" style="">
                  </div>
                  <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                      <h4 class="font-semibold text-sm text-black font-sans">Walnut Dining Table</h4>
                      <p class="text-xs text-gray-500 font-sans">Solid wood</p>
                    </div>
                    
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="font-bold text-black font-sans">$1,250</span>
                    <button class="w-7 h-7 rounded-full flex items-center justify-center bg-blue-600">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-3 h-3 text-white"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Tab Bar -->
          <div class="absolute bottom-0 left-0 right-0 ios-blur border-t bg-white/95 border-gray-200">
            <div class="flex items-center justify-around py-2">
              <button class="flex flex-col gap-1 pt-2 pb-2 items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="home" class="lucide lucide-home w-6 h-6 text-gray-500"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg>
                <span class="text-xs font-medium text-gray-500 font-sans">Home</span>
              </button>
              <button class="flex flex-col items-center gap-1 py-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grid-3x3" class="lucide lucide-grid-3x3 w-6 h-6 text-blue-600"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M3 15h18" class=""></path><path d="M9 3v18" class=""></path><path d="M15 3v18" class=""></path></svg>
                <span class="text-xs font-medium text-blue-600 font-sans">Shop</span>
              </button>
              <button class="flex flex-col items-center gap-1 py-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search w-6 h-6 text-gray-500"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
                <span class="text-xs font-medium text-gray-500 font-sans">Search</span>
              </button>
              <button class="flex flex-col items-center gap-1 py-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag w-6 h-6 text-gray-500"><path d="M16 10a4 4 0 0 1-8 0" class=""></path><path d="M3.103 6.034h17.794" class=""></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" class=""></path></svg>
                <span class="text-xs font-medium text-gray-500 font-sans">Cart</span>
              </button>
              <button class="flex flex-col items-center gap-1 py-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user w-6 h-6 text-gray-500"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
                <span class="text-xs font-medium text-gray-500 font-sans">Profile</span>
              </button>
            </div>
            <!-- Home Indicator -->
            <div class="flex justify-center pb-2">
              <div class="home-indicator"></div>
            </div>
          </div>
        </div>
      </article>