feat: add new theme assets, snippets, and styling components for Theme Alan

This commit is contained in:
hoangvv
2026-08-13 16:33:26 +07:00
parent 4d9da4d492
commit 49226d0343
1255 changed files with 67605 additions and 0 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 465 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

@@ -0,0 +1,3 @@
<svg width="230" height="9" viewBox="0 0 230 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M229.739 6.75471C157.106 1.35913 -8.45492 -4.39418 0.487881 5.84833C6.27817 12.4801 145.087 5.03625 229.739 6.75471Z" fill="#D5FE5E"/>
</svg>

After

Width:  |  Height:  |  Size: 247 B

@@ -0,0 +1,137 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 450">
<defs>
<g id="gradients">
<linearGradient id="gradient_1" x1="306.5" y1="110.8" x2="100.54" y2="417.02" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#F36D30" style="stop-opacity:0"/>
<stop offset="1" stop-color="#F36D30"/>
</linearGradient>
<linearGradient id="gradient_2" x1="39.43" y1="19" x2="118.98" y2="107.27" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#D5FE5F" style="stop-opacity:0"/>
<stop offset="1" stop-color="#D5FE5F"/>
</linearGradient>
<linearGradient id="gradient_2-2" x1="49.76" y1="9.69" x2="129.31" y2="97.96" xlink:href="#gradient_2"/>
<linearGradient id="gradient_2-3" x1="60.09" y1="0.39" x2="139.64" y2="88.65" xlink:href="#gradient_2"/>
<linearGradient id="gradient_2-4" x1="30.12" y1="27.39" x2="109.67" y2="115.66" xlink:href="#gradient_2"/>
<linearGradient id="gradient_2-5" x1="40.45" y1="18.08" x2="120" y2="106.35" xlink:href="#gradient_2"/>
<linearGradient id="gradient_2-6" x1="50.78" y1="8.77" x2="130.33" y2="97.04" xlink:href="#gradient_2"/>
<linearGradient id="gradient_2-7" x1="20.81" y1="35.78" x2="100.37" y2="124.05" xlink:href="#gradient_2"/>
<linearGradient id="gradient_2-8" x1="31.14" y1="26.47" x2="110.69" y2="114.74" xlink:href="#gradient_2"/>
<linearGradient id="gradient_2-9" x1="41.47" y1="17.16" x2="121.02" y2="105.43" xlink:href="#gradient_2"/>
<linearGradient id="gradient_3" x1="1208.09" y1="-11.9" x2="1440.2" y2="267.4" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#F36D30"/>
<stop offset="1" stop-color="#D5FE5F" style="stop-opacity:0"/>
</linearGradient>
</g>
</defs>
<polygon id="shape_1" points="1314.26 29.42 1349.55 80.57 1400.7 115.86 1349.55 151.15 1314.26 202.3 1278.97 151.15 1227.82 115.86 1278.97 80.57 1314.26 29.42" fill="url(#gradient_3)">
<animate attributeName="points" dur="45s" repeatCount="indefinite"
values="
1314.26 29.42 1349.55 80.57 1400.7 115.86 1349.55 151.15 1314.26 202.3 1278.97 151.15 1227.82 115.86 1278.97 80.57 1314.26 29.42;
1293.88 103.21 1372.04 104.76 1373.58 182.91 1372.04 261.07 1293.88 262.62 1215.72 261.07 1214.18 182.91 1215.72 104.76 1293.88 103.21;
1238.95 152.19 1306.99 177.84 1332.64 245.88 1306.99 313.93 1238.95 339.57 1170.91 313.93 1145.26 245.88 1170.91 177.84 1238.95 152.19;
1231.12 48.94 1302.76 80.23 1274.34 153.05 1243.05 224.69 1170.23 196.26 1098.59 164.98 1127.02 92.16 1158.3 20.51 1231.12 48.94;
1314.26 29.42 1349.55 80.57 1400.7 115.86 1349.55 151.15 1314.26 202.3 1278.97 151.15 1227.82 115.86 1278.97 80.57 1314.26 29.42"
calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95;.445 .05 .55 .95;.445 .05 .55 .95"/>
</polygon>
<path id="shape_2" d="M262.66 299.63c.66 31.1-22.32 61.4-54.7 85.85C175.74 410 134.35 428.59 107.1 415.87C79.85 403.15 66.59 359 71.82 326.48c5.14-32.79 28.63-54.1 55.14-72.32c26.75-18.31 56.37-33.59 83.53-25.49C237.56 236.94 262 268.53 262.66 299.63Z" fill="url(#gradient_1)">
<animate attributeName="d" dur="30s" repeatCount="indefinite"
values="
M262.66 299.63c.66 31.1-22.32 61.4-54.7 85.85C175.74 410 134.35 428.59 107.1 415.87C79.85 403.15 66.59 359 71.82 326.48c5.14-32.79 28.63-54.1 55.14-72.32c26.75-18.31 56.37-33.59 83.53-25.49C237.56 236.94 262 268.53 262.66 299.63Z;
M238.16 203.32c18.77 25.63 7 75.79-17.68 107.91c-24.68 32.12-62.25 46.19-92 41.5c-29.59-4.51-51.6-27.61-67.12-54.49c-15.52-26.71-24.54-57.38-13.71-78.5c11-21.11 42-32.84 82.28-38.07C170 176.44 219.22 177.52 238.16 203.32Z;
M294.9 176.2c19.88 37.27 33.59 75 20.55 95.26c-13.04 20.26-52.64 22.73-93.42 23.4c-40.78.67-82.73-.5-93.92-19.72c-11.37-19.22 8.18-56.32 29.08-94.26c21.05-37.77 43.62-76.21 67.68-77.21C249.1 102.67 275 139.1 294.9 176.2Z;
M262.66 299.63c.66 31.1-22.32 61.4-54.7 85.85C175.74 410 134.35 428.59 107.1 415.87C79.85 403.15 66.59 359 71.82 326.48c5.14-32.79 28.63-54.1 55.14-72.32c26.75-18.31 56.37-33.59 83.53-25.49C237.56 236.94 262 268.53 262.66 299.63Z"
calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95;.445 .05 .55 .95"/>
</path>
<line id="line_1" x1="335.3" y1="106.6" x2="208.7" y2="233.2" fill="none" stroke="#CF85F8" opacity="0.1" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s" values="0 0;10 -10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95"/>
</line>
<line id="line_2" x1="335.3" y1="121.31" x2="208.7" y2="247.91" fill="none" stroke="#CF85F8" opacity="0.1" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s" begin="1s" values="0 0;10 -10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95"/>
</line>
<line id="line_3" x1="335.3" y1="136.02" x2="208.7" y2="262.62" fill="none" stroke="#CF85F8" opacity="0.1" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s" begin="2s" values="0 0;10 -10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95"/>
</line>
<line id="line_4" x1="335.3" y1="150.73" x2="208.7" y2="277.33" fill="none" stroke="#CF85F8" opacity="0.1" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s" begin="3s" values="0 0;10 -10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95"/>
</line>
<g id="circles" style="transform-box: fill-box;">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="15s" values="0;15;0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="15s" values="0 0;5 15;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95" additive="sum"/>
<circle cx="73.33" cy="56.62" r="4.36" fill="url(#gradient_2)"/>
<circle cx="92.05" cy="56.62" r="4.36" fill="url(#gradient_2-2)"/>
<circle cx="110.77" cy="56.62" r="4.36" fill="url(#gradient_2-3)"/>
<circle cx="73.33" cy="75.34" r="4.36" fill="url(#gradient_2-4)"/>
<circle cx="92.05" cy="75.34" r="4.36" fill="url(#gradient_2-5)"/>
<circle cx="110.77" cy="75.34" r="4.36" fill="url(#gradient_2-6)"/>
<circle cx="73.33" cy="94.05" r="4.36" fill="url(#gradient_2-7)"/>
<circle cx="92.05" cy="94.05" r="4.36" fill="url(#gradient_2-8)"/>
<circle cx="110.77" cy="94.05" r="4.36" fill="url(#gradient_2-9)"/>
</g>
<g id="squares" style="transform-box: fill-box;" transform-origin="right bottom">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="15s" values="0;-2;0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="15s" values="0;-20;0" repeatCount="indefinite" calcMode="spline" keySplines=".445 .05 .55 .95;.445 .05 .55 .95" additive="sum"/>
<rect id="square_1" x="1242.56" y="352.31" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_2" x="1266.49" y="352.31" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.1s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_3" x="1290.41" y="352.31" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.2s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_4" x="1314.33" y="352.31" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.3s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_5" x="1338.26" y="352.31" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.4s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_6" x="1362.18" y="352.31" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.5s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_7" x="1386.1" y="352.31" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.6s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_8" x="1242.56" y="375.01" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.7s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_9" x="1266.49" y="375.01" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.8s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_10" x="1290.41" y="375.01" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="0.9s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_11" x="1314.33" y="375.01" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_12" x="1338.26" y="375.01" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.1s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_13" x="1362.18" y="375.01" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.2s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_14" x="1386.1" y="375.01" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.3s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_15" x="1242.56" y="397.7" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.4s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_16" x="1266.49" y="397.7" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.5s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_17" x="1290.41" y="397.7" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.6s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_18" x="1314.33" y="397.7" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.7s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_19" x="1338.26" y="397.7" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.8s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_20" x="1362.18" y="397.7" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="1.9s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
<rect id="square_21" x="1386.1" y="397.7" width="7" height="7" fill="#D5FE5F">
<animate attributeName="opacity" dur="5s" begin="2s" repeatCount="indefinite" values="1;0;1;1;1"/>
</rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 679 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

+441
View File
@@ -0,0 +1,441 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Theme Alan New</title>
<link type="text/css" rel="stylesheet" href="https://apps.odoo.com/web/assets/15380454-60c4580/1/web.assets_common.min.css" data-asset-bundle="web.assets_common" data-asset-version="60c4580"/>
<link type="text/css" rel="stylesheet" href="https://apps.odoo.com/web/assets/15380466-e7e0d1a/1/web.assets_frontend.min.css" data-asset-bundle="web.assets_frontend" data-asset-version="e7e0d1a"/>
<style>
html, body {
overflow: inherit;
}
</style>
</head>
<body>
<div class="container position-relative py-3">
<div class="position-absolute d-none d-lg-block" style="background-color:#F7FFDF; width:100vw; height:100%; margin-left:calc((1080px - 100vw) / 2); margin-top:-30px">
<img src="home-effect-1.svg" title="" alt="">
</div>
<!-- 1st panel start -->
<div class="my-5 position-relative">
<div>
<img class="w-100" src="section-1-header.png" title="" alt="">
</div>
<div style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<div class="text-center p-4">
<img class="w-100" src="preview.png">
</div>
<div class="text-center py-4">
<h1 class="text-white fw-bold m-0 p-0">Why Choose Alan</h1>
<img src="heading-bg.svg">
</div>
<div class="text-center p-3">
<img src="why-choose.png">
</div>
<div style="padding: 40px 5% 0;">
<div class="p-3" style="background-color: #D5FE5F;border-radius: 15px;">
<h3 class="m-0 text-center" style="color: #000;">Time to unleash <b>Theme ALAN's</b> design powers!</h3>
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">The Most Powerful Features</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">You don't require the technical knowledge as you can create your web pages in a few clicks only.</p>
<img src="section-2.png">
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Powerful Alan Frame Builder</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Let's bring the next level of creativity to your e-Commerce using Alan frame builder. Frame builder gives you the ability to create a customized grid view in which you can put all your dynamic and static snippets. Frame builder is activated by default in all Mega-menu, Dynamic and static snippets. Store your frame creativity so you can use it later on.</p>
<img class="w-100" src="section-2-flow.png">
<div class="my-4 overflow-hidden" style="border-radius: 20px;">
<img class="w-100" src="frm.png">
</div>
<img class="w-100" src="section-3-flow.png">
<div class="pt-4">
<img class="w-100" src="section-4-flow.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Powerful Mega Menu</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Alan comes with the most advanced mega menu integrated with a frame builder by which creativity never ends.</p>
<div class="pt-4">
<img class="w-100" src="mega-menu.png">
</div>
<div class="pt-4">
<img class="w-100" src="mega-menu-featurs.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Powerful Product Card</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Alan comes with a stunning product card in which users can see features like Product Labels, Images Swatches, Stock Availability, Quick View, Offer Timers, Product Discounts and Product Ratings with different awesome styles.</p>
<div class="pt-4">
<img class="w-100" src="product-card.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">B2B Mode</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">B2B mode gives you the ability to hide product price and add to cart from the guest user in just one click.</p>
<div class="pt-4">
<img class="w-100" src="b2b.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Dynamic Hotspot</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Dynamic Image Hotspot allows you to show the hotspot on the images shown on your Odoo Website. These hotspots can be linked with the URL hence it offers an interactive way of marketing.</p>
<div class="pt-4">
<img class="w-100" src="hotspot.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Advance Shop Filter</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<div class="pt-4">
<img class="w-100" src="shop-filter.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Advance Clear Filter</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">The Clear Advanced Filter gives you super customer experience for filtering products quickly and efficiently.</p>
<div class="pt-4">
<img class="w-100" src="clear-filter.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Advance Shop Page Design</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Alan comes with 6 stunning shop design which gives different look and feel to your website.</p>
<div class="pt-4">
<img class="w-100" src="shop-pages.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 py-3">
<img class="w-100" src="tabs.png">
</div>
<div class="col-md-6 py-3">
<img class="w-100" src="sticky-card.png">
</div>
<div class="col-md-6 py-3">
<img class="w-100" src="offer-timer.png">
</div>
<div class="col-md-6 py-3">
<img class="w-100" src="product-info.png">
</div>
<div class="col-md-6 py-3">
<img class="w-100" src="user-guides.png">
</div>
<div class="col-md-6 py-3">
<img class="w-100" src="brand.png">
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Alternative / Accessory Products</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Show the attractive alternative and accessory products slider on product page.</p>
<div class="pt-4">
<img class="w-100" src="alt-acc.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 py-3">
<img class="w-100" src="login.png">
</div>
<div class="col-md-6 py-3">
<img class="w-100" src="snippet.png">
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">11 Header Options</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Alan comes with 11 different types of header which make different looks and feels to your website.</p>
<div class="pt-4">
<img class="w-100" src="header-op.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">13 Footer Options</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Alan comes with 13 different types of footer which make different looks and feels to your website.</p>
<div class="pt-4">
<img class="w-100" src="footer-op.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Multi website Compatible</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Allow to create mutliple websites.</p>
<div class="pt-4">
<img class="w-100" src="websites.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Fully Mobile Responsive</h1>
</div>
<div class="p-5" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<div class="pt-4">
<img class="w-100" src="responsive.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Product Sales Count</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">show how many units of a product were sold last month with our 'Last Month Sale Count' feature</p>
<div class="pt-4">
<img class="w-100" src="sales-count.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Buy more Save more</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Show the amazing discounts on buying bulk quantity of product to the end users</p>
<div class="pt-4">
<img class="w-100" src="save-more.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Frequently Asked Questions</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Display quick answers to commonly asked questions in FAQs tab</p>
<div class="pt-4">
<img class="w-100" src="faq.png">
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Colour Variant Popup</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<p class="text-white lead fw-normal">Display our color variant popup for color comparison, allowing you to view all color options instantly for quick and easy decision-making</p>
<div class="pt-4">
<img class="w-100" src="variant-popup.png">
</div>
</div>
</div>
<div class="my-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -210px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Why Choose Theme Alan?</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<div class="nav bg-transparent flex-row nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a style="border-radius:0; padding-bottom:2px !important" class="nav-link p-0 border-bottom col active" id="v-al-why-01" data-toggle="pill" href="#v-al-why-01in" role="tab" aria-controls="v-al-why-01in" aria-selected="true">
<div class="align-items-center px-2 py-3 justify-content-center" style="background-color: #000;">
<div class="pl-2 pr-3 position-relative">
<h5 class="h6 d-flex align-items-center m-0 text-center justify-content-center" style="color:#fff">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff" class="bi bi-question-circle-fill mr-2" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
Why Choose us?</h5>
</div>
</div>
</a>
<a style="border-radius:0; padding-bottom:2px !important" class="nav-link p-0 border-bottom col" id="v-al-why-03" data-toggle="pill" href="#v-al-why-03in" role="tab" aria-controls="v-al-why-03in" aria-selected="false">
<div class="align-items-center px-2 py-3 justify-content-center" style="background-color: #000;">
<div class="pl-2 pr-3 position-relative">
<h5 class="h6 d-flex align-items-center m-0 text-center justify-content-center" style="color:#fff">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="1=20" fill="#fff" class="bi bi-ui-checks-grid mr-2" viewBox="0 0 16 16">
<path d="M2 10h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1zm9-9h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-3zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-3zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.354.854a.5.5 0 1 0-.708-.708L3 3.793l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0l2-2z" />
</svg>
FAQs</h5>
</div>
</div>
</a>
</div>
<div class="tab-content p-md-4 p-2" style="" id="v-pills-tabContent" style="background-color: #000;">
<div class="tab-pane fade active show" id="v-al-why-01in" role="tabpanel" aria-labelledby="v-al-why-01">
<div class="row">
<div class="col-lg-6">
<h3 class="font-weight-bold h4 mb-4 text-white">Why Choose Theme Alan?</h3>
<p class="text-white">Alan is one of the most powerful, amazing, and flexible theme in Odoo store. Alan is the professional and multipurpose bootstrap base theme for any business and website. The code is very well organized and modular so you can build any layout with your imagination.</p>
<p class="text-white">Some salient features of Alan are flexible design, advanced mega menu, drag and drop snippets, HTML builder block, amazing header footer options, beautiful shop details page, shop full-width options with the list and grid view, optimized responsive behavior, infinite product loader, Product Quick Overview.</p>
</div>
<div class="col-lg-6">
<img src="faq-pre.png" class="img-fluid" />
</div>
</div>
</div>
<div class="tab-pane fade" id="v-al-why-03in" role="tabpanel" aria-labelledby="v-al-why-03">
<div class="accordion s_faq bg-transparent" id="as_al_faq">
<div class="card shadow-light mb-2 bg-transparent">
<div class="card-header p-3" id="as_faq_1" style="border-radius: 6px;margin-bottom: 10px;border: 1px solid rgba(255, 255, 255, 0.3);cursor: pointer;">
<span data-toggle="collapse" data-target="#as_faq__1" aria-expanded="false" aria-controls="as_faq__1" style="position: relative;display: inline-block;width: 100%;" class="font-weight-bold text-white collapsed text-decoration-none">
<img src="ellipse-icon.svg" width="12px;" height="12px;" class="mr-2"> Is this theme compatible with Odoo Enterprise as well as Community and odoo.sh?
</span>
</div>
<div id="as_faq__1" class="collapse show" aria-labelledby="as_faq_1" data-parent="#as_al_faq" style="border-top: 0px solid #dee2e640!important;">
<div class="card-body text-white" style="background-color:transparent !important;">
Yes! The theme perfectly works fine with Odoo Enterprise and odoo.sh version.
</div>
</div>
</div>
<div class="card shadow-light mb-2 bg-transparent">
<div class="card-header p-3" id="as_faq_2" style="border-radius: 6px;margin-bottom: 10px;border: 1px solid rgba(255, 255, 255, 0.3);cursor: pointer;">
<span data-toggle="collapse" data-target="#as_faq__2" aria-expanded="false" aria-controls="as_faq__2" style="position: relative;display: inline-block;width: 100%;" class="font-weight-bold text-white collapsed text-decoration-none">
<img src="ellipse-icon.svg" width="12px;" height="12px;" class="mr-2"> Is this theme One-click installable?
</span>
</div>
<div id="as_faq__2" class="collapse" aria-labelledby="as_faq_2" data-parent="#as_al_faq" style="border-top: 0px solid #dee2e640!important;">
<div class="card-body text-white" style="background-color:transparent !important;">
<p>Yes! You can install this theme in just one-click. Theme installation is very simple.</p>
<p>Login into your website and just install the Atharva Theme General module and Go to Website --&gt; Configuration --&gt; Settings. Select the Website and then click on the "Choose a Theme" button. You will be redirected to the available themes. and from there you can use "Theme Alan".</p>
</div>
</div>
</div>
<div class="card shadow-light mb-2 bg-transparent">
<div class="card-header p-3" id="as_faq_3" style="border-radius: 6px;margin-bottom: 10px;border: 1px solid rgba(255, 255, 255, 0.3);cursor: pointer;">
<span data-toggle="collapse" data-target="#as_faq__3" aria-expanded="false" aria-controls="as_faq__3" style="position: relative;display: inline-block;width: 100%;" class="font-weight-bold text-white collapsed text-decoration-none">
<img src="ellipse-icon.svg" width="12px;" height="12px;" class="mr-2"> Do I resell or distribute the theme?
</span>
</div>
<div id="as_faq__3" class="collapse" aria-labelledby="as_faq_3" data-parent="#as_al_faq" style="border-top: 0px solid #dee2e640!important;">
<div class="card-body text-white" style="background-color:transparent !important;">
No! You can not resell or distribute this theme. You can use this theme only for your website.
</div>
</div>
</div>
<div class="card shadow-light mb-2 bg-transparent">
<div class="card-header p-3" id="as_faq_4" style="border-radius: 6px;margin-bottom: 10px;border: 1px solid rgba(255, 255, 255, 0.3);cursor: pointer;">
<span data-toggle="collapse" data-target="#as_faq__4" aria-expanded="false" aria-controls="as_faq__4" style="position: relative;display: inline-block;width: 100%;" class="font-weight-bold text-white collapsed text-decoration-none">
<img src="ellipse-icon.svg" width="12px;" height="12px;" class="mr-2"> Do I request for extra customization in theme after purchase?
</span>
</div>
<div id="as_faq__4" class="collapse" aria-labelledby="as_faq_4" data-parent="#as_al_faq" style="border-top: 0px solid #dee2e640!important;">
<div class="card-body text-white" style="background-color:transparent !important;">
Yes! We would love to provide you the best services possible. You can provide all customization requests on <a href="mailto:support@atharvasystem.com"></a> email and our technical team will get back to.
</div>
</div>
</div>
<div class="card shadow-light mb-2 bg-transparent">
<div class="card-header p-3" id="as_faq_5" style="border-radius: 6px;margin-bottom: 10px;border: 1px solid rgba(255, 255, 255, 0.3);cursor: pointer;">
<span data-toggle="collapse" data-target="#as_faq__5" aria-expanded="false" aria-controls="as_faq__5" style="position: relative;display: inline-block;width: 100%;" class="font-weight-bold text-white collapsed text-decoration-none">
<img src="ellipse-icon.svg" width="12px;" height="12px;" class="mr-2"> Do I get free updates and upgrades?
</span>
</div>
<div id="as_faq__5" class="collapse" aria-labelledby="as_faq_5" data-parent="#as_al_faq" style="border-top: 0px solid #dee2e640!important;">
<div class="card-body text-white" style="background-color:transparent !important;">
Yes, we provide free upgrades to our theme for the same Odoo Version. You can always download the latest version of the theme, replace your old theme module with the latest theme module and update the Theme. <u>Starting version 13, every version of Theme Alan will be sold separately</u>.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-4">
<img src="header-bg.png">
<div class="position-relative p-4" style="margin-top: -194px;color: #fff;max-width: 670px;">
<h1 class="text-white display-2 fw-bold m-0" style="font-weight: 600;">Release Note</h1>
</div>
<div class="p-4" style="background-color: #000;padding-bottom: 50px;border-radius: 0 0 30px 30px;">
<h4 class="pb-2 text-white">
<span class="pr-2">Version 1.0</span>-<span class="pl-2 small font-weight-normal">01 JAN 2024</span>
</h4>
<ul class="list-unstyled">
<li class="d-flex align-items-start mb-2 text-white">V17 Initial Release</li>
</ul>
</div>
</div>
<div class="py-4 px-md-5 p-3 my-4" style="background-color: #000;border-radius: 20px;">
<div class="row">
<div class="col-12 p-4 deep-2 text-center overflow-hidden" style="border-radius:10px">
<h2 class="text-white h1">Technical Help, Queries & Support</h2>
<p class="text-white">Please feel free to contact for any suggestion, issue & queries</p>
<div class="d-flex mt-4 justify-content-center">
<a href="mailto:support@atharvasystem.com?subject=Free Demo of Theme Alan 17" class="mr-4" style="background-color: #000;color: #fff;border: 1px solid #fff;border-radius: 10px;padding: 10px 25px;text-transform: uppercase;font-size: 15px;font-weight: 500;text-decoration: none;">
<img src="mail-icon.svg" class="mr-2" /> Support
</a>
<a href="skype:live:support_53719?chat" style="background-color: #000;color: #fff;border: 1px solid #fff;border-radius: 10px;padding: 10px 25px;text-transform: uppercase;font-size: 15px;font-weight: 500;text-decoration: none;">
<img src="skype-logo.svg" class="mr-2" /> Skype
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 1st panel end -->
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

@@ -0,0 +1,3 @@
<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.76025 19.1667C1.30192 19.1667 0.900879 18.9948 0.557129 18.6511C0.213379 18.3073 0.0415039 17.9063 0.0415039 17.4479V2.55209C0.0415039 2.09376 0.213379 1.69272 0.557129 1.34897C0.900879 1.00522 1.30192 0.833344 1.76025 0.833344H21.2394C21.6978 0.833344 22.0988 1.00522 22.4425 1.34897C22.7863 1.69272 22.9582 2.09376 22.9582 2.55209V17.4479C22.9582 17.9063 22.7863 18.3073 22.4425 18.6511C22.0988 18.9948 21.6978 19.1667 21.2394 19.1667H1.76025ZM11.4998 10.5156L1.76025 4.12761V17.4479H21.2394V4.12761L11.4998 10.5156ZM11.4998 8.79689L21.1248 2.55209H1.90348L11.4998 8.79689ZM1.76025 4.12761V2.55209V17.4479V4.12761Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 748 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 760 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5898 10.7109C16.7031 10.1641 16.7734 9.58203 16.7734 9C16.7734 4.56641 13.1836 0.980469 8.75391 0.980469C8.17188 0.980469 7.59375 1.04688 7.04297 1.16406C6.30078 0.589844 5.37891 0.25 4.375 0.25C1.96094 0.25 0 2.21094 0 4.625C0 5.62891 0.339844 6.55078 0.910156 7.28906C0.796875 7.83594 0.726562 8.41797 0.726562 9C0.726562 13.4336 4.31641 17.0195 8.74609 17.0195C9.32812 17.0195 9.90625 16.9531 10.457 16.8359C11.1992 17.4062 12.1211 17.7461 13.1211 17.7461C15.5352 17.7461 17.4961 15.7852 17.4961 13.3711C17.5 12.3711 17.1602 11.4492 16.5898 10.7109ZM8.98828 14.2852C6.42578 14.2852 4.28125 13.1445 4.28125 11.7461C4.28125 11.1211 4.63281 10.5508 5.43359 10.5508C6.65234 10.5508 6.76562 12.3047 8.875 12.3047C9.87891 12.3047 10.5273 11.8594 10.5273 11.2773C10.5273 10.5469 9.90234 10.4336 8.88672 10.1836C6.44531 9.58203 4.28516 9.32422 4.28516 6.77734C4.28516 4.46484 6.57422 3.60938 8.54688 3.60938C10.6992 3.60938 12.875 4.46484 12.875 5.77344C12.875 6.43359 12.4297 7.01562 11.6914 7.01562C10.5859 7.01562 10.5508 5.70703 8.76172 5.70703C7.75781 5.70703 7.12109 5.98047 7.12109 6.58594C7.12109 7.35938 7.93359 7.4375 9.82031 7.875C11.4375 8.23828 13.3633 8.92188 13.3633 10.9062C13.3633 13.2148 11.1328 14.2852 8.98828 14.2852Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB