@salla.sa/twilight-components 1.0.58 → 1.0.61

package/example/index.html

@@ -13,11 +13,9 @@
     let url = window.location.href.split('/').slice(0, -1).join('/') + '/';
     salla.init({ debug: true, store: { api: url } });
   </script>
-  <script type="module" src="dist/twilight-components/twilight-components.esm.js"></script>
-  <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css"
-    rel="stylesheet">
+  <script type="module" src="./../dist/twilight-components/twilight-components.esm.js"></script>
+  <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css" rel="stylesheet">
   <link href="dist/tailwind.css" type="text/css" rel="stylesheet">
-  <link href="dist/intlTelInput.min.css" type="text/css" rel="stylesheet">
   <style>
     :root {
       --font-main: 'DINNextLTArabic-Regular';
@@ -55,13 +53,8 @@
         </a>
         <p class="hidden lg:block text-sm ml-6 border-l border-gray-200 pl-6">
           <a href="#" target="_blank"
-            class="relative flex items-center hover:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-teal-500" viewBox="0 0 20 20"
-              fill="currentColor">
-              <path fill-rule="evenodd"
-                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
-                clip-rule="evenodd"></path>
-            </svg>
+            class="relative flex items-center transition-colors text-gray-500 hover:text-primary">
+            <i class="sicon-layout-grid mr-2 text-gray-400"></i>
             Twilight Components
             <svg aria-hidden="true" width="11" height="11" fill="currentColor" class="ml-1.5">
               <path d="M5.593 10.139L10.232 5.5 5.593.862l-.895.89 3.107 3.102H0v1.292h7.805L4.698 9.254l.895.885z">
@@ -97,7 +90,7 @@
               style="display: none;">
               <p class="py-3 px-3.5 truncate">
                 <span class="block mb-0.5 text-xs text-gray-500">Hi there</span>
-                <span class="">Quick access to</span> 
+                <span class="">Quick access to</span>
               </p>
               <div class="py-1.5 px-3.5">
                 <a href="#" class="group flex sm:hidden items-center py-1.5 hover:text-teal-600">
@@ -219,322 +212,583 @@
 
 
   <!-- Components -->
-  <div id="components" class="container mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24 space-y-8">
-    <div class="pb-6">
+  <div id="components" class="container mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24">
+    <div class="pb-12">
       <h2 id="buttons-section-heading" class="text-3xl font-extrabold text-gray-900">Salla Twilight Components</h2>
       <p class="text-sm text-gray-500 mt-2">Buttons, popup modals, infinit scroll, branches, localization, login,
         offers, rating and much more -- everything you need to build beautiful E-commerce theme.</p>
     </div>
-    
-    <!-- Buttons Section -->
-    <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
-      style="scroll-margin-top:6.25rem">
-      <div class="pb-6">
-        <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Buttons</h2>
-        <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
-      </div>
 
-      <!-- Default -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Default</h3>
-          <p class="text-sm text-gray-500 mt-2">Without any props</p>
-        </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-            <salla-button>Primary</salla-button>
-            <salla-button color="success">success</salla-button>
-            <salla-button color="danger">danger</salla-button>
-            <salla-button color="warning">warning</salla-button>
-            <salla-button color="light">light</salla-button>
-            <salla-button color="gray">gray</salla-button>
-            <salla-button color="dark">dark</salla-button>
+    <div class="space-y-16">
+
+
+      <!-- Buttons Section -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Buttons</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
         </div>
-      </div>
 
-      <!-- Outine -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Outline</h3>
-          <p class="text-sm text-gray-500 mt-2">
-            <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
-          </p>
+        <!-- Default -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Default</h3>
+            <p class="text-sm text-gray-500 mt-2">Without any props</p>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button>Primary</salla-button>
+              <salla-button color="success">success</salla-button>
+              <salla-button color="danger">danger</salla-button>
+              <salla-button color="warning">warning</salla-button>
+              <salla-button color="light">light</salla-button>
+              <salla-button color="gray">gray</salla-button>
+              <salla-button color="dark">dark</salla-button>
+          </div>
         </div>
-        
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-            <salla-button fill="outline">Primary</salla-button>
-            <salla-button fill="outline" color="success">success</salla-button>
-            <salla-button fill="outline" color="danger">danger</salla-button>
-            <salla-button fill="outline" color="warning">warning</salla-button>
-            <salla-button fill="outline" color="light">light</salla-button>
-            <salla-button fill="outline" color="gray">gray</salla-button>
-            <salla-button fill="outline" color="dark">dark</salla-button>
+
+        <!-- Outine -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Outline</h3>
+            <p class="text-sm text-gray-500 mt-2">
+              <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
+            </p>
+          </div>
+
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button fill="outline">Primary</salla-button>
+              <salla-button fill="outline" color="success">success</salla-button>
+              <salla-button fill="outline" color="danger">danger</salla-button>
+              <salla-button fill="outline" color="warning">warning</salla-button>
+              <salla-button fill="outline" color="light">light</salla-button>
+              <salla-button fill="outline" color="gray">gray</salla-button>
+              <salla-button fill="outline" color="dark">dark</salla-button>
+          </div>
         </div>
-      </div>
 
-      <!-- Loading -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Loading</h3>
-        </div>
-        <div class="col-span-3 space-y-4">
-          <div class="flex flex-wrap items-center gap-2">
-            <salla-button loading>Primary</salla-button>
-            <salla-button color="success" loading>success</salla-button>
-            <salla-button color="danger" loading>danger</salla-button>
-            <salla-button color="warning" fill="outline" loading>warning</salla-button>
-            <salla-button color="light" fill="outline" loading>light</salla-button>
-            <salla-button color="gray" fill="outline" loading>gray</salla-button>
-          </div>
-          <div class="flex flex-wrap items-center gap-2">
-            <salla-button shape="icon" loading>Primary</salla-button>
-            <salla-button shape="icon" color="success" loading>success</salla-button>
-            <salla-button shape="icon" color="danger" loading>danger</salla-button>
-            <salla-button shape="icon" color="warning" fill="outline" loading>warning</salla-button>
-            <salla-button shape="icon" color="light" fill="outline" loading>light</salla-button>
-            <salla-button shape="icon" color="gray" fill="outline" loading>gray</salla-button>
-          </div>
-          <div class="flex flex-wrap items-center gap-2">
-            <salla-button shape="icon" size="small" loading>Primary</salla-button>
-            <salla-button shape="icon" size="small" color="success" loading>success</salla-button>
-            <salla-button shape="icon" size="small" color="danger" loading>danger</salla-button>
-            <salla-button shape="icon" size="small" color="warning" fill="outline" loading>warning</salla-button> 
-            <salla-button shape="icon" size="small" color="light" fill="outline" loading>light</salla-button>
-            <salla-button shape="icon" size="small" color="gray" fill="outline" loading>gray</salla-button>
+        <!-- Loading -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Loading</h3>
+          </div>
+          <div class="col-span-3 space-y-4">
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button loading>Primary</salla-button>
+              <salla-button color="success" loading>success</salla-button>
+              <salla-button color="danger" loading>danger</salla-button>
+              <salla-button color="warning" fill="outline" loading>warning</salla-button>
+              <salla-button color="light" fill="outline" loading>light</salla-button>
+              <salla-button color="gray" fill="outline" loading>gray</salla-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button shape="icon" loading>Primary</salla-button>
+              <salla-button shape="icon" color="success" loading>success</salla-button>
+              <salla-button shape="icon" color="danger" loading>danger</salla-button>
+              <salla-button shape="icon" color="warning" fill="outline" loading>warning</salla-button>
+              <salla-button shape="icon" color="light" fill="outline" loading>light</salla-button>
+              <salla-button shape="icon" color="gray" fill="outline" loading>gray</salla-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button shape="icon" size="small" loading>Primary</salla-button>
+              <salla-button shape="icon" size="small" color="success" loading>success</salla-button>
+              <salla-button shape="icon" size="small" color="danger" loading>danger</salla-button>
+              <salla-button shape="icon" size="small" color="warning" fill="outline" loading>warning</salla-button>
+              <salla-button shape="icon" size="small" color="light" fill="outline" loading>light</salla-button>
+              <salla-button shape="icon" size="small" color="gray" fill="outline" loading>gray</salla-button>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- Size -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Size</h3>
+        <!-- Size -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Size</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button size="large">Large</salla-button>
+            <salla-button >Default</salla-button>
+            <salla-button size="small">Small</salla-button>
+            <salla-button size="large" fill="outline">Large</salla-button>
+            <salla-button fill="outline">Default</salla-button>
+            <salla-button size="small" fill="outline">Small</salla-button>
+          </div>
         </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-          <salla-button size="large">Large</salla-button>
-          <salla-button >Default</salla-button>
-          <salla-button size="small">Small</salla-button>
-          <salla-button size="large" fill="outline">Large</salla-button>
-          <salla-button fill="outline">Default</salla-button>
-          <salla-button size="small" fill="outline">Small</salla-button>
+
+        <!-- Wide -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Wide Buttons</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button width="wide"><i class="sicon-shopping-bag mr-2"></i> Wide Button</salla-button>
+          </div>
         </div>
-      </div>
 
-      <!-- Wide -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Wide Buttons</h3>
+        <!-- Disabled -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Disabled</h3>
+          </div>
+          <div class="col-span-3 space-y-4">
+              <div class="flex flex-wrap items-center gap-2">
+                <salla-button disabled>Disabled</salla-button>
+                <salla-button disabled color="danger">Disabled</salla-button>
+                <salla-button disabled color="warning">Disabled</salla-button>
+                <salla-button fill="outline" disabled>Disabled</salla-button>
+                <salla-button fill="outline" disabled color="danger">Disabled</salla-button>
+                <salla-button fill="outline" disabled color="warning">Disabled</salla-button>
+              </div>
+              <div class="flex flex-wrap items-center gap-2">
+                <salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
+              </div>
+          </div>
+        </div>
+
+        <!-- Link -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Button as link</h3>
+            <p class="text-sm text-gray-500 mt-2">
+              <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">shape="link"</span> -->
+            </p>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button shape="link">Primary Link</salla-button>
+              <salla-button shape="link" color="success">success Link</salla-button>
+              <salla-button shape="link" color="danger">danger Link</salla-button>
+              <salla-button shape="link" color="warning">warning Link</salla-button>
+              <salla-button shape="link" color="light">light Link</salla-button>
+              <salla-button shape="link" color="gray">gray Link</salla-button>
+              <salla-button shape="link" color="dark">dark Link</salla-button>
+          </div>
         </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-          <salla-button width="wide"><i class="sicon-shopping-bag mr-2"></i> Wide Button</salla-button>
-        </div> 
-      </div>
 
-      <!-- Disabled -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Disabled</h3>
+        <!-- Icon -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Icon</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button shape="icon"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger"><i class="sicon-cancel"></i></salla-button>
+            <salla-button shape="icon" color="warning"><i class="sicon-shopping-bag"></i>
+            </salla-button>
+            <salla-button shape="icon" color="light"><i class="sicon-sync"></i></salla-button>
+            <salla-button shape="icon" color="gray"><i class="sicon-shipping-fast"></i>
+            </salla-button>
+            <salla-button shape="icon" color="dark"><i class="sicon-survey"></i></salla-button>
+          </div>
         </div>
-        <div class="col-span-3 space-y-4">
-            <div class="flex flex-wrap items-center gap-2">
-              <salla-button disabled>Disabled</salla-button>
-              <salla-button disabled color="danger">Disabled</salla-button>
-              <salla-button disabled color="warning">Disabled</salla-button>
-              <salla-button fill="outline" disabled>Disabled</salla-button>
-              <salla-button fill="outline" disabled color="danger">Disabled</salla-button>
-              <salla-button fill="outline" disabled color="warning">Disabled</salla-button>
-            </div>
-            <div class="flex flex-wrap items-center gap-2"> 
-              <salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
-              <salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
-              <salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
-              <salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
-              <salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
-              <salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
-            </div>
-        </div> 
-      </div>
 
-      <!-- Link -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Button as link</h3>
-          <p class="text-sm text-gray-500 mt-2">
-            <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">shape="link"</span> -->
-          </p>
-        </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-            <salla-button shape="link">Primary Link</salla-button>
-            <salla-button shape="link" color="success">success Link</salla-button>
-            <salla-button shape="link" color="danger">danger Link</salla-button>
-            <salla-button shape="link" color="warning">warning Link</salla-button>
-            <salla-button shape="link" color="light">light Link</salla-button>
-            <salla-button shape="link" color="gray">gray Link</salla-button>
-            <salla-button shape="link" color="dark">dark Link</salla-button>
+        <!-- Icon Outline -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Icon Outline</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button shape="icon" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger" fill="outline"><i class="sicon-cancel"></i></salla-button>
+            <salla-button shape="icon" color="warning" fill="outline"><i class="sicon-shopping-bag"></i>
+            </salla-button>
+            <salla-button shape="icon" color="light" fill="outline"><i class="sicon-sync"></i></salla-button>
+            <salla-button shape="icon" color="gray" fill="outline"><i class="sicon-shipping-fast"></i>
+            </salla-button>
+            <salla-button shape="icon" color="dark" fill="outline"><i class="sicon-survey"></i></salla-button>
+          </div>
         </div>
-      </div>
 
-      <!-- Icon -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Icon</h3>
-        </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-          <salla-button shape="icon"><i class="sicon-shopping-bag"></i></salla-button>
-          <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
-          <salla-button shape="icon" color="danger"><i class="sicon-cancel"></i></salla-button>
-          <salla-button shape="icon" color="warning"><i class="sicon-shopping-bag"></i>
-          </salla-button>
-          <salla-button shape="icon" color="light"><i class="sicon-sync"></i></salla-button>
-          <salla-button shape="icon" color="gray"><i class="sicon-shipping-fast"></i>
-          </salla-button>
-          <salla-button shape="icon" color="dark"><i class="sicon-survey"></i></salla-button>
-        </div> 
-      </div>
+        <!-- Icon Size -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Icon Size</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button shape="icon" size="large"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger" size="small"><i class="sicon-cancel"></i></salla-button>
+            <salla-button shape="icon" size="large" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i></salla-button>
+          </div>
+        </div>
+      </section>
 
-      <!-- Icon Outline -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Icon Outline</h3>
-        </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-          <salla-button shape="icon" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
-          <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
-          <salla-button shape="icon" color="danger" fill="outline"><i class="sicon-cancel"></i></salla-button>
-          <salla-button shape="icon" color="warning" fill="outline"><i class="sicon-shopping-bag"></i>
-          </salla-button>
-          <salla-button shape="icon" color="light" fill="outline"><i class="sicon-sync"></i></salla-button>
-          <salla-button shape="icon" color="gray" fill="outline"><i class="sicon-shipping-fast"></i>
-          </salla-button>
-          <salla-button shape="icon" color="dark" fill="outline"><i class="sicon-survey"></i></salla-button>
-        </div> 
-      </div>
 
-      <!-- Icon Size -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Icon Size</h3>
-        </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-          <salla-button shape="icon" size="large"><i class="sicon-shopping-bag"></i></salla-button>
-          <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
-          <salla-button shape="icon" color="danger" size="small"><i class="sicon-cancel"></i></salla-button>
-          <salla-button shape="icon" size="large" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
-          <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
-          <salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i></salla-button>
-        </div> 
-      </div>
-    </section>
-    
-    <!-- Modal Section -->
-    <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
-      style="scroll-margin-top:6.25rem">
-      <div class="pb-6">
-        <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Modals</h2>
-        <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
-      </div>
+      <!-- Modal Section -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Modals</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
+        </div>
 
-      <!-- Default -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Default</h3>
-          <p class="text-sm text-gray-500 mt-2">Without any props</p>
-        </div>
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-            <salla-button>Primary</salla-button>
-            <salla-button color="success">success</salla-button>
-            <salla-button color="danger">danger</salla-button>
-            <salla-button color="warning">warning</salla-button>
-            <salla-button color="light">light</salla-button>
-            <salla-button color="gray">gray</salla-button>
-            <salla-button color="dark">dark</salla-button>
+        <!-- Width -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ widths: [
+          { id: 'xs', label: 'Mini' },
+          { id: 'sm', label: 'Small' },
+          { id: 'md', label: 'Default' },
+          { id: 'full', label: 'Fullscreen' }
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Width</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+
+            <!-- Modal Size -->
+            <template x-for="width in widths" :key="width.id">
+              <salla-button :data-target="'modal-size-' + width.id" data-on-click="modal::open" x-text="width.label"></salla-button>
+            </template>
+
+            <template x-for="width in widths" :key="width.id">
+              <salla-modal :id="'modal-size-' + width.id" :width="width.id" title="Vitae atque quisquam ea rem" sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              </salla-modal>
+            </template>
+          </div>
         </div>
-      </div>
 
-      <!-- Outine -->
-      <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-        <div class="col-span-3 xl:col-span-1">
-          <h3 class="text-gray-900 font-semibold">Outline</h3>
-          <p class="text-sm text-gray-500 mt-2">
-            <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
-          </p>
+        <!-- Position -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'top', label: 'Top' },
+          { id: 'middle', label: 'Default' },
+          { id: 'bottom', label: 'Bottom' }
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Position</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-position-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+
+            <template x-for="item in items" :key="item.id">
+              <salla-modal 
+                :id="'modal-position-' + item.id" 
+                :position="item.id" 
+                size="sm"
+                title="Congratulations" 
+                sub-title="Good, you are right!">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod.</p>
+              </salla-modal>
+              </salla-modal>
+            </template>
+          </div>
+        </div>
+
+        <!-- Header Icon -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ icons: [
+          { id: 'noraml', label: 'Default', icon: 'sicon-shopping-bag' },
+          { id: 'primary', label: 'Primary', icon: 'sicon-shopping-bag' },
+          { id: 'success', label: 'Success', icon: 'sicon-check' },
+          { id: 'error', label: 'Error', icon: 'sicon-cancel' }
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Header Icon</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+
+            <template x-for="icon in icons" :key="icon.id">
+              <salla-button :data-target="'modal-icon-' + icon.id" data-on-click="modal::open" x-text="icon.label"></salla-button>
+            </template>
+            <salla-button data-target="modal-icon-image" data-on-click="modal::open">Image as Icon</salla-button>
+
+            <template x-for="icon in icons" :key="icon.id">
+              <salla-modal
+                :id="'modal-icon-' + icon.id"
+                :icon="icon.icon"
+                :icon-style="icon.id"
+                width="sm"
+                title="Vitae atque quisquam ea rem"
+                sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              </salla-modal>
+            </template>
+
+            <salla-modal
+              id="modal-icon-image"
+              image-icon="./assets/images/star.png"
+              width="sm"
+              sub-title-first
+              title="Good, You are right!"
+              sub-title="Congratulations">
+            </salla-modal>
+          </div>
+        </div>
+
+        <!-- Header Subtitle first -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'below', label: 'Below' },
+          { id: 'first', label: 'First'}
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Subtitle Position</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-subtitle-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+
+            <template x-for="item in items" :key="item.id">
+              <salla-modal
+                :id="'modal-subtitle-' + item.id"
+                :sub-title-first="item.id == 'first' ? true : false"
+                icon="sicon-shopping-bag"
+                title="Vitae atque quisquam ea rem"
+                icon-style="primary"
+                sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              </salla-modal>
+            </template>
+
+            <!-- Modal #7 -->
+            <salla-modal id="modal7" no-padding>
+              <img src="https://source.unsplash.com/ejhjSZKTeeg/1024x800">
+            </salla-modal>
+          </div>
+        </div>
+
+        <!-- No padding -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'nopadding', label: 'No Padding Modal'}
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Without Padding</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-padding-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+
+            <template x-for="item in items" :key="item.id">
+              <salla-modal
+                :id="'modal-padding-' + item.id"
+                :no-padding="item.id == 'nopadding' ? true : false">
+                <img src="https://source.unsplash.com/ejhjSZKTeeg/1024x800">
+              </salla-modal>
+            </template>
+          </div>
+        </div>
+
+        <!-- Is Closable -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Is Closable</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button data-target="modal-not-closable" data-on-click="modal::open">Not Closable</salla-button>
+              <salla-modal
+                icon="sicon-home"
+                icon-style="primary"
+                id="modal-not-closable"
+                title="Not Closable Molda"
+                sub-title="You can't close it by clicking the background overlay and there is'nt cloase button"
+                is-closable="false">
+                <div class="text-center">
+                  <p class="text-gray-500 mb-4">Close button below added as a modal content</p>
+                  <salla-button fill="outline" color="light" data-on-click="modal::close" data-target="modal-not-closable">Close</salla-button>
+                </div>
+              </salla-modal>
+          </div>
+        </div>
+
+        <!-- Modal Footer -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'noraml', label: 'Without Footer' },
+          { id: 'footer', label: 'With Footer'}
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Footer</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-footer-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+
+            <template x-for="item in items" :key="item.id">
+              <salla-modal
+                :id="'modal-footer-' + item.id"
+                icon="sicon-shopping-bag"
+                title="Vitae atque quisquam ea rem"
+                icon-style="primary"
+                sub-title="subtitle text here">
+                <p class="text-gray-500 mb-8 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+                <div x-show="item.id == 'footer'" slot="footer" class="grid grid-cols-2 gap-3">
+                  <salla-button class="w-full" fill="outline" color="light" data-on-click="modal::close" :data-target="'modal-footer-' + item.id">Cancel</salla-button>
+                  <salla-button class="w-full" data-on-click="modal::close" :data-target="'modal-footer-' + item.id">Ok</salla-button>
+                </div>
+              </salla-modal> 
+            </template>
+
+          </div>
+        </div>
+
+      </section>
+
+
+
+      <!-- Login Modal -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Login & Register Modal</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
+        </div>
+
+
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Login Modal</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2" x-data="{ method: 'both' }">
+            <salla-button data-on-click="login::show">Login with email</salla-button>
+            <salla-button data-on-click="login::show">Login with mobile</salla-button>
+            <salla-button data-on-click="login::show">Login with both</salla-button>
+            <salla-login-modal 
+              id="login-modal" 
+              is-email-allowed
+              is-mobile-allowed
+              is-email-required></salla-login-modal>
+            <!-- <salla-button x-on:click="method = 'email'" data-on-click="login::show">With email </salla-button>
+            <salla-button x-on:click="method = 'phone'" data-on-click="login::show">With phone</salla-button>
+            <salla-button x-on:click="method = 'both'" data-on-click="login::show">With both</salla-button>
+           
+            <salla-login-modal 
+              id="login-modal" 
+              :is-email-allowed="method == 'email' || method == 'both'" 
+              :is-mobile-allowed="method == 'phone' || method == 'both'" 
+              is-email-required></salla-login-modal> -->
+          </div>
+        </div>
+      </section>
+
+      <!-- Localization Modal -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Localization (Language & Currency) Modal</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
+        </div>
+
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Localization Modal</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button data-on-click="localization::show">Language & Currency</salla-button>
+            <salla-localization-modal currency="usd" lanuage="ar"></salla-localization-modal>
+          </div>
+        </div>
+      </section>
+
+      <!-- Search Component -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Search</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
+        </div>
+
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Search Modal</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button data-on-click="search::show">Search</salla-button>
+            <salla-search></salla-search>
+          </div>
         </div>
         
-        <div class="col-span-3 flex flex-wrap items-center gap-2">
-            <salla-button fill="outline">Primary</salla-button>
-            <salla-button fill="outline" color="success">success</salla-button>
-            <salla-button fill="outline" color="danger">danger</salla-button>
-            <salla-button fill="outline" color="warning">warning</salla-button>
-            <salla-button fill="outline" color="light">light</salla-button>
-            <salla-button fill="outline" color="gray">gray</salla-button>
-            <salla-button fill="outline" color="dark">dark</salla-button>
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Inline Search</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-search inline height="50" class="w-full"></salla-search>
+          </div>
         </div>
-      </div>
 
-    </section>
-  </div>
+      </section>
 
+      <!-- Offers Component -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Offers Modal</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
+        </div>
 
-  <div class="container py-10 grid-cols-2 grid gap-4">
-    <div class="p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Modal</h1>
-      <p class="my-4">Description</p>
-      <salla-button data-target="modal1" data-on-click="modal::open">Modal</salla-button>
-      <salla-button btn-style="danger" data-target="modal2" data-on-click="modal::open">Error</salla-button>
-      <salla-button data-target="modal3" data-on-click="modal::open">Success</salla-button>
-      <salla-button data-target="modal4" data-on-click="modal::open">Small</salla-button>
-      <salla-button btn-style="outline-primary" data-target="modal5" data-on-click="modal::open">Full</salla-button>
-      <salla-button data-target="modal6" data-on-click="modal::open">With footer</salla-button>
-      <salla-button btn-style="outline" data-target="modal7" data-on-click="modal::open">No Padding</salla-button>
-      <salla-modal id="modal1">Your Awesome Content</salla-modal>
-      <salla-modal id="modal2" title="Error!" sub-title="Whoops! Error happened" error></salla-modal>
-      <salla-modal id="modal3" title="Congratulations" sub-title="Good, You are awesome!" success></salla-modal>
-      <salla-modal id="modal4" width="xs">Small Modal</salla-modal>
-      <salla-modal id="modal5" width="full">Full Modal</salla-modal>
-      <salla-modal id="modal6">
-        Modal Body
-        <p slot="footer" class="text-gray-500 mt-4">
-          <salla-button data-on-click="modal::close" data-target="modal6" wide>Close</salla-button>
-        </p>
-      </salla-modal>
-      <salla-modal id="modal7" no-padding>Small Modal</salla-modal>
-    </div>
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Offer Modal</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button onClick="showOffer()">Offer Modal</salla-button>
+            <salla-offer-modal></salla-offer-modal>
+          </div>
+        </div>
 
-    <div class=" p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Login</h1>
-      <p class="my-4">Description</p>
-      <salla-button wide data-on-click="login::show">Login Component</salla-button>
-      <salla-login is-email-allowed is-mobile-allowed is-email-required></salla-login>
-    </div>
+      </section>
 
-    <div class=" p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Localization</h1>
-      <p class="my-4">Description</p>
-      <salla-button wide data-on-click="localization::show">Localization Component</salla-button>
+      <!-- Branches Component -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Branches Modal</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
+        </div>
 
-      <salla-localization></salla-localization>
-    </div>
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Branches Modal</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button data-target="branches-header" data-on-click="branches::show">Choose branche</salla-button>
+            <salla-button data-target="branches-single" data-on-click="branches::show">Products availability</salla-button>
 
-    <div class=" p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Search</h1>
-      <p class="my-4">Description</p>
-      <salla-button btn-style="outline-primary" wide data-on-click="search::show">Search Component</salla-button>
-      <salla-search></salla-search>
-    </div>
+            <salla-branches id="branches-header" position="header"></salla-branches>
+            <salla-branches id="branches-single" position="single"></salla-branches>
+          </div>
+        </div>
 
-    <div class=" p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Branches</h1>
-      <p class="my-4">Description</p>
-      <salla-button wide btn-style="danger" data-on-click="branches::show">Branches Component</salla-button>
-      <salla-branches></salla-branches>
-    </div>
+      </section>
+
+      <!-- Product Availability Component -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Product Availability
+          </h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
+        </div>
+
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Product Availability Modal</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-product-availability channels="sms,email"></salla-product-availability>
+          </div>
+        </div>
+
+      </section>
 
-    <div class=" p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Offer</h1>
-      <p class="my-4">Description</p>
-      <salla-button wide btn-style="outline" onClick="showOffer()">Offer</salla-button>
-      <salla-offer></salla-offer>
     </div>
+  </div>
 
+
+  <div class="container py-10 grid-cols-2 grid gap-4">
     <div class="p-3 rounded-md bg-white shadow-sm">
       <h1 class="text-primary border-b border-dashed mb-4">Product Availability</h1>
       <p class="my-4">Description</p>
@@ -574,4 +828,4 @@
   <script src="dist/demo.js"></script>
 </body>
 
-</html>
+</html>