From 6489d8516c0b9bd7fff6b327e6763fcb0cd991ea Mon Sep 17 00:00:00 2001
From: jatiny <jatiny@consultbop.com>
Date: Tue, 26 Nov 2024 06:44:15 +0000
Subject: [PATCH] chore: add video on landing page

---
 templates/layouts/layout-both-columns.tpl | 24 ++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl
index 6550c36..50c4262 100644
--- a/templates/layouts/layout-both-columns.tpl
+++ b/templates/layouts/layout-both-columns.tpl
@@ -79,15 +79,15 @@
           Start Customization</h2>
           <h3 class="text-lg font-semibold text-center mb-12">Tailored to you, at no extra cost.</h3>
         <div class="flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
-          <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=74"> <img id=shirtImage
-                class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
-                src="https://brooksbingham.com/111-home_default/business-shirt.jpg" alt="business-shirt.jpg" /></a>
+          <div>
+		<a href="https://brooksbingham.com/module/thob/configurator?id_product=74">
+		<img id="shirtImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/111-home_default/business-shirt.jpg" alt="business-shirt.jpg" /></a>
             <div class="flex flex-col pt-4 items-start">
               <h3 class="text-center text-lg font-bold">$99.00</h3>
               <h3 class="text-center text-lg font-semibold">Shirts</h3>
             </div>
           </div>
-          <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=75"> <img id=suitImage
+          <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=75"> <img id="suitImage"
                 class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
                 src="https://brooksbingham.com/107-home_default/business-suit.jpg" alt="business-suit.jpg" /></a>
             <div class="flex flex-col pt-4 items-start">
@@ -95,7 +95,7 @@
               <h3 class="text-center text-lg font-semibold">Suits</h3>
             </div>
           </div>
-          <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=76"> <img id=sportsjacketImage
+          <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=76"> <img id="sportsjacketImage"
                 class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
                 src="https://brooksbingham.com/108-home_default/sports-jacket.jpg" alt="sports-jacket.jpg" /></a>
             <div class="flex flex-col pt-4 items-start">
@@ -103,9 +103,9 @@
               <h3 class="text-center text-lg font-semibold">Sports Jackets</h3>
             </div>
           </div>
-          <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=77"> <img id=tuxImage
-                class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
-                src="https://brooksbingham.com/112-home_default/tuxedo.jpg" alt="tuxedo.jpg" /></a>
+          <div><a href="https://brooksbingham.com/module/thob/configurator?id_product=77">
+		<img id="tuxImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/112-home_default/tuxedo.jpg" alt="tuxedo.jpg" />
+		</a>
             <div class="flex flex-col pt-4 items-start">
               <h3 class="text-center text-lg font-bold">$995.00</h3>
               <h3 class="text-center text-lg font-semibold">Tuxedos</h3>
@@ -116,9 +116,11 @@
       <div class="lg:mb-32 mb-20">
         <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
         <h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you</h3>
-        <a href="https://brooksbingham.com/module/thob/configurator?id_product=75"> <img
-            src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"
-            alt="widget-screenshot.png" /> </a>
+        <a href="https://brooksbingham.com/module/thob/configurator?id_product=75">
+			<video autoplay="autoplay" muted loop width="100%" height="auto">
+				<source src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooksbingham_configurator_demo_video_compressed.mp4" />
+			</video>
+</a>
       </div>
       <div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1">
         <div class="row-span-3 col-start-1 row-end-2 relative">