Updates

nirajrajgor · Nov 19, 2024 · 64ae4f3 · 64ae4f3
1 parent bdac623
commit 64ae4f3
Show file tree

Hide file tree

Showing 5 changed files with 862 additions and 2 deletions.
diff --git a/assets/index-YfE_dPBQ.css → assets/index-BFYdhftS.css b/assets/index-YfE_dPBQ.css → assets/index-BFYdhftS.css
diff --git a/ecommerce-order-emailer.jpg b/ecommerce-order-emailer.jpg
diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" crossorigin href="/email-templates/assets/index-YfE_dPBQ.css">
+    <link rel="stylesheet" crossorigin href="/email-templates/assets/index-BFYdhftS.css">
   </head>
   <body class="dark:bg-gray-900">
     <header
@@ -191,6 +191,66 @@
           </div>
         </div>
         <!-- End of Product Confirmation Template -->
+        <div class="wrapper">
+          <div
+            class="relative dark:border rounded-lg dark:border-white/[0.1] overflow-hidden group-hover:shadow-xl transition duration-200 dark:bg-gray-800"
+            style="height: 500px; width: auto; background-color: #f4f4f4"
+          >
+            <img
+              alt="Ecommerce Order Thumbnail"
+              loading="lazy"
+              class="transition duration-300 blur-0 rounded-md group-hover:scale-105 w-full h-full object-contain"
+              style="color: transparent"
+              src="/email-templates/ecommerce-order-emailer.jpg"
+            />
+          </div>
+          <p
+            class="text-xl font-bold mt-4 mb-2 dark:text-neutral-100 text-neutral-700 animate-fade-down"
+          >
+            Ecommerce Order Emailer
+          </p>
+          <p
+            class="mt-2 text-sm font-normal dark:text-neutral-300 text-neutral-500 animate-fade-down"
+          >
+            This email template is a user-friendly order confirmation layout
+            with a clear message, timeline, and detailed order information. It
+            includes contact options, promotional sections, and a footer with
+            company details and an unsubscribe option.
+          </p>
+
+          <div class="mt-8 flex flex-col sm:flex-row gap-4">
+            <a
+              href="./templates/ecommerce-order.html"
+              download="ecommerce-order.html"
+              class="w-full"
+            >
+              <button
+                type="button"
+                class="text-white w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-md shadow-blue-500/50 dark:shadow-md dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
+              >
+                Download
+                <img
+                  src="/email-templates/download.svg"
+                  alt="Download"
+                  class="h-4 w-4"
+                  style="filter: brightness(0) invert(1)"
+                />
+              </button>
+            </a>
+            <a
+              class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background dark:bg-gray-800 dark:border-gray-700 shadow-sm hover:bg-accent hover:text-accent-foreground dark:hover:bg-gray-700 text-foreground dark:text-white h-11 rounded-xl px-8 group relative gap-2 w-full whitespace-nowrap"
+              target="_blank"
+              href="./templates/ecommerce-order.html"
+              >Live Preview
+              <img
+                src="data:image/svg+xml,%3csvg%20width='15'%20height='15'%20viewBox='0%200%2015%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20class='h-4%20w-4'%20%3e%3cpath%20d='M3%202C2.44772%202%202%202.44772%202%203V12C2%2012.5523%202.44772%2013%203%2013H12C12.5523%2013%2013%2012.5523%2013%2012V8.5C13%208.22386%2012.7761%208%2012.5%208C12.2239%208%2012%208.22386%2012%208.5V12H3V3L6.5%203C6.77614%203%207%202.77614%207%202.5C7%202.22386%206.77614%202%206.5%202H3ZM12.8536%202.14645C12.9015%202.19439%2012.9377%202.24964%2012.9621%202.30861C12.9861%202.36669%2012.9996%202.4303%2013%202.497L13%202.5V2.50049V5.5C13%205.77614%2012.7761%206%2012.5%206C12.2239%206%2012%205.77614%2012%205.5V3.70711L6.85355%208.85355C6.65829%209.04882%206.34171%209.04882%206.14645%208.85355C5.95118%208.65829%205.95118%208.34171%206.14645%208.14645L11.2929%203H9.5C9.22386%203%209%202.77614%209%202.5C9%202.22386%209.22386%202%209.5%202H12.4999H12.5C12.5678%202%2012.6324%202.01349%2012.6914%202.03794C12.7504%202.06234%2012.8056%202.09851%2012.8536%202.14645Z'%20fill='currentColor'%20fill-rule='evenodd'%20clip-rule='evenodd'%20%3e%3c/path%3e%3c/svg%3e"
+                alt="External Link"
+                class="h-4 w-4"
+              />
+            </a>
+          </div>
+        </div>
+        <!-- End of Ecommerce Order Template -->
       </div>
       <div class="mt-2 text-center">
         <p

diff --git a/size-chart.webp b/size-chart.webp