### دکمه‌ها

    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Primary</button>
    <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Success</button>
    <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Danger</button>
    <button class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600">Warning</button>
    <button class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">Dark</button>
    <button class="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600">Light</button>

### کادر متن همراه با آیکون

نام کاربری یا شماره موبایل

لطفا نام کاربری یا شماره موبایل معتبر وارد کنید

    <div>
      <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        نام کاربری یا شماره موبایل
      </label>

      <div class="relative">
        <input
          type="text"
          id="username"
          class="w-full ps-12 ps-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
          placeholder="نام کاربری یا شماره موبایل"
          required
        >

        <div class="absolute input-icon top-1/2 transform -translate-y-1/2 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
          </svg>
        </div>
      </div>

      <p class="error-message hidden text-red-500 text-sm mt-1" id="username-error">
        لطفا نام کاربری یا شماره موبایل معتبر وارد کنید
      </p>
    </div>

### کادر متن ساده

نام و نام خانوادگی

    <div>
      <label
        for="name"
        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
      >
        نام و نام خانوادگی
      </label>

      <input
        id="name"
        type="text"
        placeholder="نام خود را وارد کنید"
        class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
      >
    </div>

### کادر متنی چندخطی (Textarea)

نظر

    <div>
      <label
        for="commentQ"
        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
      >
        نظر
      </label>

      <textarea
        id="commentQ"
        placeholder="متن نظر!"
        class="w-full px-3 py-3 border border-gray-300 rounded-lg h-32 mb-4 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
      ></textarea>
    </div>

### نقاط قوت و نقاط ضعف (تگ داینامیک)

نقاط قوت:
نقاط ضعف:

    <div class="grid sm:grid-cols-2 grid-cols-1 gap-4 mb-4">

      <!-- نقاط قوت -->
      <div class="w-full mx-auto">
        <label class="block mb-2 font-medium text-gray-700 dark:text-white">
          نقاط قوت:
        </label>
        <div class="tag-container flex flex-wrap gap-2 p-2 border border-gray-300 rounded-lg min-h-[50px] items-center dark:border-gray-600">
          <input
            type="text"
            placeholder="با کلیک اینتر اضافه کنید"
            class="tag-input placeholder-gray-500 flex-grow px-3 py-2 border-none outline-none min-w-[150px] bg-transparent dark:placeholder-gray-400 dark:text-white"
            data-color="bg-green-200"
          >
        </div>
      </div>

      <!-- نقاط ضعف -->
      <div class="w-full mx-auto">
        <label class="block mb-2 font-medium text-gray-700 dark:text-white">
          نقاط ضعف:
        </label>
        <div class="tag-container flex flex-wrap gap-2 p-2 border border-gray-300 rounded-lg min-h-[50px] items-center dark:border-gray-600">
          <input
            type="text"
            placeholder="با کلیک اینتر اضافه کنید"
            class="tag-input placeholder-gray-500 flex-grow px-3 py-2 border-none outline-none min-w-[150px] bg-transparent dark:placeholder-gray-400 dark:text-white"
            data-color="#fccee8"
          >
        </div>
      </div>

    </div>

### امتیاز ستاره‌ای

    <div class="flex space-x-2">
      <!-- Star 1 -->
      <input type="radio" id="star1" name="rating" class="hidden" value="1">
      <label for="star1" class="cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6 text-gray-400">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 17.27l6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73-1.64 7.03z" />
        </svg>
      </label>

      <!-- Star 2 -->
      <input type="radio" id="star2" name="rating" class="hidden" value="2">
      <label for="star2" class="cursor-pointer">
        <svg ... class="size-6 text-gray-400">...</svg>
      </label>

      <!-- Star 3 -->
      <input type="radio" id="star3" name="rating" class="hidden" value="3">
      <label for="star3" class="cursor-pointer">
        <svg ... class="size-6 text-gray-400">...</svg>
      </label>

      <!-- Star 4 -->
      <input type="radio" id="star4" name="rating" class="hidden" value="4">
      <label for="star4" class="cursor-pointer">
        <svg ... class="size-6 text-gray-400">...</svg>
      </label>

      <!-- Star 5 -->
      <input type="radio" id="star5" name="rating" class="hidden" value="5">
      <label for="star5" class="cursor-pointer">
        <svg ... class="size-6 text-gray-400">...</svg>
      </label>
    </div>

### انتخاب‌گر رنگ (Color Picker)

سبز
آبی

    <div class="flex my-4 flex-wrap items-center space-x-3">

      <!-- سبز -->
      <div class="flex items-center">
        <input type="radio" name="color" checked id="greenColor" class="hidden peer" />
        <label
          for="greenColor"
          class="select-none dark:!text-white cursor-pointer flex items-center justify-center rounded-full border-2 border-gray-200 py-1 px-2 text-gray-700 transition-colors duration-200 ease-in-out peer-checked:text-gray-900 peer-checked:border-primary-500"
        >
          <span class="size-4 bg-green-600 rounded-full"></span>
          <span class="dir-ltr ms-2">سبز</span>
        </label>
      </div>

      <!-- آبی -->
      <div class="flex items-center">
        <input type="radio" name="color" id="blueColor" class="hidden peer" />
        <label
          for="blueColor"
          class="select-none dark:!text-white cursor-pointer flex items-center justify-center rounded-full border-2 border-gray-200 py-1 px-2 text-gray-700 transition-colors duration-200 ease-in-out peer-checked:text-gray-900 peer-checked:border-primary-500"
        >
          <span class="size-4 bg-blue-600 rounded-full"></span>
          <span class="dir-ltr ms-2">آبی</span>
        </label>
      </div>

    </div>

### شمارنده (Counter)

1

    <div class="flex space-x-1">
      <div class="inline-flex items-center space-x-2 border border-gray-200 dark:border-zinc-700 rounded-lg px-4 bg-white dark:bg-zinc-800 shadow">

        <!-- دکمه افزایش -->
        <button class="size-10 rounded-full flex items-center justify-center text-lg dark:text-white"
                onclick="increment('count1')">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
          </svg>
        </button>

        <!-- عدد شمارنده -->
        <span id="count1" class="text-lg px-5 inline-block dark:text-white">1</span>

        <!-- دکمه کاهش -->
        <button class="size-10 rounded-full flex items-center justify-center text-lg dark:text-white"
                onclick="decrement('count1')">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"/>
          </svg>
        </button>

      </div>
    </div>

### مدال کد تخفیف

باز کردن مدال

### وارد کردن کد تخفیف

کد تخفیف:

    <a
      href="#"
      data-modal-target="discountModal"
      class="modal-trigger bg-primary text-white py-1 px-5 cursor-pointer rounded-lg flex items-center"
    >
      باز کردن مدال
    </a>

    <div
      id="discountModal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="discountModalTitle"
      data-modal-id="discountModal"
      class="modal hidden fixed inset-0 z-50 overflow-auto backdrop-blur bg-opacity-50"
    >
      <div class="relative p-4 w-full max-w-md m-auto flex items-center min-h-screen">
        <div class="relative dark:bg-gray-800 border-gray-300 border bg-white rounded-lg shadow-lg w-full">

          <!-- Header -->
          <div class="flex justify-between items-center p-4 dark:border-b-white border-b">
            <h3 id="discountModalTitle" class="text-xl dark:text-white">
              وارد کردن کد تخفیف
            </h3>
            <button data-modal-close class="text-gray-500 hover:text-gray-700 cursor-pointer text-3xl">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 dark:text-white">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <!-- Content -->
          <div class="p-4">
            <form>
              <div class="mb-4">
                <label for="discountCode" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                  کد تخفیف:
                </label>
                <input
                  placeholder="کد تخفیف را وارد کنید:"
                  type="text"
                  id="discountCode"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-zinc-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                  required
                >
              </div>
              <button class="py-1 px-3 bg-primary text-white rounded">بررسی</button>
            </form>
          </div>

        </div>
      </div>
    </div>

### تولتیپ چهارجانبه

    <!-- تولتیپ بالا -->
    <button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
      تولتیپ بالا
      <span class="absolute bottom-full mb-2 end-1/2 -translate-x-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
        این تولتیپ بالاست
        <span class="absolute top-full end-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-gray-900"></span>
      </span>
    </button>

    <!-- تولتیپ پایین -->
    <button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
      تولتیپ پایین
      <span class="absolute top-full mt-2 end-1/2 -translate-x-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
        این تولتیپ پایینه
        <span class="absolute bottom-full end-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-b-4 border-b-gray-900"></span>
      </span>
    </button>

    <!-- تولتیپ چپ -->
    <button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
      تولتیپ چپ
      <span class="absolute start-full ms-2 top-1/2 -translate-y-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
        این تولتیپ چپه
        <span class="absolute end-full top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-e-4 border-e-gray-900"></span>
      </span>
    </button>

    <!-- تولتیپ راست -->
    <button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
      تولتیپ راست
      <span class="absolute end-full me-2 top-1/2 -translate-y-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
        این تولتیپ راسته
        <span class="absolute start-full top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-s-4 border-s-gray-900"></span>
      </span>
    </button>

### Select Box با آیکون داخلی

امتیاز

    <div class="relative">
      <label for="filter-rating" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        امتیاز
      </label>
      <select
        id="filter-rating"
        class="w-full appearance-none border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
      >
        <option value="">همه امتیازها</option>
        <option value="5">5 ستاره</option>
        <option value="4">4 ستاره</option>
        <option value="3">3 ستاره</option>
        <option value="2">2 ستاره</option>
        <option value="1">1 ستاره</option>
      </select>
      <div class="absolute inset-y-0 top-1/3 end-3 flex items-center pointer-events-none">
        <svg class="w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </div>
    </div>

### دراپ‌دان کاربر

پروفایل
تنظیمات
خروج

    <div class="relative ms-3 inline-block text-end group">
      <button class="flex items-center focus:outline-none">
        <div class="relative">
          <img class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800 shadow" src="assets/images/user/user.png" alt="پروفایل کاربر">
          <span class="absolute bottom-0 start-0 w-2 h-2 rounded-full bg-green-500 dark:bg-green-400 border-2 border-white dark:border-gray-800"></span>
        </div>
        <span class="ms-2 text-sm font-medium text-gray-900 dark:text-white">مریم محمدی</span>
        <svg class="size-4 ms-2 transition-transform group-hover:rotate-180"></svg>
      </button>

      <div class="absolute end-0 top-full w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg z-[9999] shadow-lg hidden group-hover:block">
        <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 space-x-1 rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
          <svg ... class="size-6"></svg>
          <span>پروفایل</span>
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 space-x-1 rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
          <svg ... class="size-6"></svg>
          <span>تنظیمات</span>
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 space-x-1 rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
          <svg ... class="size-6"></svg>
          <span>خروج</span>
        </a>
      </div>
    </div>

### صفحه‌بندی (Pagination)

    <div class="flex space-x-1 justify-center">
      <button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
        قبلی
      </button>
      <button class="px-3 py-1 border rounded-lg text-sm font-medium text-white bg-primary dark:bg-primary-dark border-primary dark:border-primary-dark">
        1
      </button>
      <button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
        2
      </button>
      <button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
        3
      </button>
      <button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
        بعدی
      </button>
    </div>

### عنوان زیرخط‌دار

### محصولات پیشنهادی برای شما

    <h3 class="font-bold text-lg mb-4 relative pb-4
                before:absolute before:start-0 before:bottom-0 before:size-2 before:rounded-full before:bg-primary
                after:absolute after:w-40 after:h-2 after:bottom-0 after:start-4 after:bg-primary after:rounded-lg
                dark:before:bg-primary dark:after:bg-primary">
      محصولات پیشنهادی برای شما
    </h3>

### عنوان با آیکون

## دسته بندی فروشگاه

پربازدیدترین دسته بندی ها

    <div class="ps-15 section-heading before:z-10 sm:col-span-4 w-full col-span-6 relative space-y-3">
      <h2 class="font-black text-2xl">
        <span itemprop="name" class="dark:text-white">دسته بندی</span>
        <span class="text-primary font-bold">فروشگاه</span>
      </h2>
      <p class="text-neutral-600 dark:text-white" itemprop="description">
        پربازدیدترین دسته بندی ها
      </p>
    </div>

### جدول محصولات

| محصول | قیمت | وضعیت | عملیات
--- | --- | --- | --- | ---
| گوشی موبایل سامسونگ مدل Galaxy A23 رنگ: مشکی - حافظه: 128GB | 8,500,000 تومان 9,200,000 تومان | موجود در انبار |
| هدفون بی سیم مدل WH-CH510 رنگ: سفید | 1,250,000 تومان | آخرین موجودی |
| شارژر بی سیم 15 وات رنگ: سفید | 450,000 تومان | ناموجود |

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-800">
          ... کل هدینگ جدول ...
        </thead>
        <tbody class="bg-white dark:bg-zinc-800 divide-y divide-gray-200 dark:divide-gray-700">
          ... کل ردیف‌ها اینجاست (همین کد بالا) ...
        </tbody>
      </table>
    </div>

### جدول ساده

ردیف | نوع تراکنش | کارمزد | شرایط
--- | --- | --- | ---
۱ | فروش عادی | ۱۵٪ | مبلغ کمتر از ۱۰ میلیون تومان
۲ | فروش ویژه | ۱۰٪ | مبلغ بالای ۱۰ میلیون تومان

    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-custom-light dark:bg-zinc-800">
          <tr>
            <th class="px-4 py-3 text-start">ردیف</th>
            <th class="px-4 py-3 text-start">نوع تراکنش</th>
            <th class="px-4 py-3 text-start">کارمزد</th>
            <th class="px-4 py-3 text-start">شرایط</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-t border-gray-200 dark:border-gray-700">
            <td class="px-4 py-3">۱</td>
            <td class="px-4 py-3">فروش عادی</td>
            <td class="px-4 py-3">۱۵٪</td>
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400">مبلغ کمتر از ۱۰ میلیون تومان</td>
          </tr>
          <tr class="border-t border-gray-200 dark:border-gray-700">
            <td class="px-4 py-3">۲</td>
            <td class="px-4 py-3">فروش ویژه</td>
            <td class="px-4 py-3">۱۰٪</td>
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400">مبلغ بالای ۱۰ میلیون تومان</td>
          </tr>
        </tbody>
      </table>
    </div>

### آپلود و پیش‌نمایش لوگو

فرمت‌های مجاز: JPG, PNG, GIF

حداکثر سایز: 2MB

    <script>
      // Logo upload preview
      document.getElementById('store-logo').addEventListener('change', function(e) {
          const preview = document.getElementById('store-logo-preview');
          const file = e.target.files[0];
          const reader = new FileReader();

          reader.onload = function(e) {
              preview.src = e.target.result;
          }

          if (file) {
              reader.readAsDataURL(file);
          }
      });

      // Click on logo upload button
      document.querySelector('#store-logo-preview + button').addEventListener('click', function() {
          document.getElementById('store-logo').click();
      });
    </script>

    <div class="flex flex-col items-center">
      <div class="relative mb-4">
        <img id="store-logo-preview" class="h-32 w-32 rounded-full border-4 border-white dark:border-gray-800 shadow-lg" src="assets/images/logo/digikala.webp" alt="لوگوی فروشگاه">
        <button class="absolute bottom-0 end-0 bg-primary-600 text-white p-2 rounded-full shadow-md hover:bg-primary-700">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
        </button>
      </div>

      <div class="text-center">
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">فرمت‌های مجاز: JPG, PNG, GIF</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">حداکثر سایز: 2MB</p>
      </div>

      <input type="file" id="store-logo" class="hidden" accept="image/*">
    </div>

### سوییچ روشن/خاموش

    <label class="relative inline-flex items-center cursor-pointer">
      <input type="checkbox" class="sr-only peer" checked>
      <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-400 rounded-full peer dark:bg-gray-600 peer-checked:bg-blue-600 transition-all duration-300"></div>
      <span class="absolute end-0.5 top-0.5 w-5 h-5 bg-white dark:bg-gray-200 rounded-full transition-transform duration-300 peer-checked:translate-x-full"></span>
    </label>

### منوی کشویی (Offcanvas Cart)

## سبد خرید شما

### ساعت مچی عقربه‌ای مردانه اینویکتا مدل Automatico Ghost Reserve

5,000,000 2,500,000 تومان
تعداد: 3

    <!-- ================= start cart offcanvas ================= -->
    <button onclick="toggleOffcanvas('offcanvas-left')" class="relative flex items-center gap-2 py-2 px-4 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow hover:bg-gray-50 dark:hover:bg-gray-700 transition">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
      </svg>
      <span>منوی کشویی</span>
      <span class="size-5 text-xs absolute -top-2 -end-2 bg-red-500 text-white font-bold rounded-full text-center leading-5">2</span>
    </button>

    <div id="offcanvas-left" class="offcanvas invisible dark:bg-zinc-900 dark:text-white fixed top-0 end-0 sm:w-100 w-[80%] h-full bg-white shadow-lg transform -translate-x-full transition-transform opacity-0 z-50" role="dialog" aria-labelledby="cart-title" aria-modal="true">
      ...
    </div>

    <div class="overlay transition fixed inset-0 z-40 bg-black/70 hidden" onclick="closeOffcanvas()" role="presentation" aria-hidden="true"></div>
    <!-- ================= end cart offcanvas ================= -->

### ساعت مچی عقربه‌ای مردانه اینویکتا مدل Automatico Ghost Reserve

5,000,000 2,500,000 تومان
تعداد: 3

## ورود / ثبت نام

برای ثبت نام یا ورود، شماره موبایل خود را وارد کنید

شماره موبایل

یا ورود با
حساب کاربری گوگل
رمز عبور

کد تایید برای 09******123 ارسال شد

نام

نام خانوادگی

رمز عبور
○حداقل 8 کاراکتر
○حرف بزرگ (A-Z)
○حرف کوچک (a-z)
○عدد (0-9)

برای بازیابی رمز عبور، کد تایید به شماره 09******123 ارسال خواهد شد.

### تنظیم رمز عبور جدید

رمز عبور جدید
○حداقل 8 کاراکتر
○حرف بزرگ (A-Z)
○حرف کوچک (a-z)
○عدد (0-9)

تکرار رمز عبور جدید