diff --git a/website_product_quotation/__init__.py b/website_product_quotation/__init__.py
new file mode 100644
index 00000000000..e046e49fbe2
--- /dev/null
+++ b/website_product_quotation/__init__.py
@@ -0,0 +1 @@
+from . import controllers
diff --git a/website_product_quotation/__manifest__.py b/website_product_quotation/__manifest__.py
new file mode 100644
index 00000000000..d13ef2639df
--- /dev/null
+++ b/website_product_quotation/__manifest__.py
@@ -0,0 +1,22 @@
+{
+ "name": "Website Product Quotation",
+ "category": "Website/Website",
+ "description": "A website page to display set of products",
+ "author": "Darpan",
+ "depends": ["website", "website_sale", "crm"],
+ "application": True,
+ "installable": True,
+ "auto_install": ["website"],
+ "data": [
+ "demo/product_attributes_demo.xml",
+ "demo/product_demo.xml",
+ "views/product_quote_template.xml",
+ ],
+ "assets": {
+ "web.assets_frontend": [
+ "website_product_quotation/static/src/scss/product_quote_template.scss",
+ "website_product_quotation/static/src/interactions/product_quote.js",
+ ]
+ },
+ "license": "AGPL-3",
+}
diff --git a/website_product_quotation/controllers/__init__.py b/website_product_quotation/controllers/__init__.py
new file mode 100644
index 00000000000..6fdbd8eb6de
--- /dev/null
+++ b/website_product_quotation/controllers/__init__.py
@@ -0,0 +1 @@
+from . import product_quotation_controller
diff --git a/website_product_quotation/controllers/product_quotation_controller.py b/website_product_quotation/controllers/product_quotation_controller.py
new file mode 100644
index 00000000000..035bca6a20b
--- /dev/null
+++ b/website_product_quotation/controllers/product_quotation_controller.py
@@ -0,0 +1,68 @@
+from odoo import http
+from odoo.http import Controller, request
+
+
+class ProductQuotationController(Controller):
+ @http.route("/product_quotation", type="http", auth="public", website=True)
+ def show_page(self):
+ product_names = [
+ "Product A",
+ "Product B",
+ "Product C",
+ "Product D",
+ "Product E",
+ "Product F",
+ "Product G",
+ "Product H",
+ ]
+
+ products = (
+ request.env["product.template"]
+ .sudo()
+ .search([("name", "in", product_names)], limit=8)
+ )
+
+ product_data = []
+ website = request.website
+
+ for product in products:
+ extra_images = (
+ request.env["product.image"]
+ .sudo()
+ .search([("product_tmpl_id", "=", product.id)])
+ )
+
+ extra_image_data = [
+ {
+ "url": website.image_url(img, "image_1024"),
+ "name": img.name if img.name else "Untitled Image",
+ }
+ for img in extra_images
+ ]
+
+ product_data.append(
+ {
+ "id": product.id,
+ "name": product.name,
+ "image_url": website.image_url(product, "image_1024"),
+ "extra_images": extra_image_data,
+ "size": product.attribute_line_ids.filtered(
+ lambda l: l.attribute_id.name == "SizeW"
+ ).mapped("value_ids.name"),
+ "color": product.attribute_line_ids.filtered(
+ lambda l: l.attribute_id.name == "Color"
+ ).mapped("value_ids.name"),
+ "fabric": product.attribute_line_ids.filtered(
+ lambda l: l.attribute_id.name == "Fabric"
+ ).mapped("value_ids.name"),
+ "print": product.attribute_line_ids.filtered(
+ lambda l: l.attribute_id.name == "Print"
+ ).mapped("value_ids.name"),
+ "url": f"/shop/product/{product.id}",
+ }
+ )
+
+ return request.render(
+ "website_product_quotation.product_quote_template",
+ {"products": product_data},
+ )
diff --git a/website_product_quotation/demo/product_attributes_demo.xml b/website_product_quotation/demo/product_attributes_demo.xml
new file mode 100644
index 00000000000..43f170fe8f7
--- /dev/null
+++ b/website_product_quotation/demo/product_attributes_demo.xml
@@ -0,0 +1,79 @@
+
+
+
+
+
+ SizeW
+
+
+ S
+
+
+
+ M
+
+
+
+ L
+
+
+
+ XL
+
+
+
+
+
+ Color
+
+
+ White
+
+
+
+ Black
+
+
+
+ Wood
+
+
+
+
+
+ Fabric
+
+
+ Plastic
+
+
+
+ Leather
+
+
+
+ Custom
+
+
+
+
+
+ Print
+
+
+ Text
+
+
+
+ Graphics
+
+
+
+ Pattern
+
+
+
+ Solid
+
+
+
diff --git a/website_product_quotation/demo/product_demo.xml b/website_product_quotation/demo/product_demo.xml
new file mode 100644
index 00000000000..d12a5ac9087
--- /dev/null
+++ b/website_product_quotation/demo/product_demo.xml
@@ -0,0 +1,277 @@
+
+
+
+
+
+ Product A
+
+
+
+
+
+
+ Product B
+
+
+
+
+
+
+ Product C
+
+
+
+
+
+
+ Product D
+
+
+
+
+
+
+ Product E
+
+
+
+
+
+
+ Product F
+
+
+
+
+
+
+ Product G
+
+
+
+
+
+
+ Product H
+
+
+
+
+
+
+
+ 9.jpg
+
+
+
+
+
+ 10.jpg
+
+
+
+
+
+ 11.jpg
+
+
+
+
+
+ 12.jpg
+
+
+
+
+
+ 13.jpg
+
+
+
+
+
+ 14.jpg
+
+
+
+
+
+ 15.jpg
+
+
+
+
+
+ 16.jpg
+
+
+
+
+
+ 17.jpg
+
+
+
+
+
+ 18.jpg
+
+
+
+
+
+ 19.jpg
+
+
+
+
+
+ 20.jpg
+
+
+
+
+
+ 21.jpg
+
+
+
+
+
+ 22.jpg
+
+
+
+
+
+ 23.jpg
+
+
+
+
+
+ 24.jpg
+
+
+
+
+
+ 25.jpg
+
+
+
+
+
+ 26.jpg
+
+
+
+
+
+ 27.jpg
+
+
+
+
+
+ 28.jpg
+
+
+
+
+
+ 29.jpg
+
+
+
+
+
diff --git a/website_product_quotation/static/src/img/arrows/previous-arrow-blue.png b/website_product_quotation/static/src/img/arrows/previous-arrow-blue.png
new file mode 100644
index 00000000000..65ae944b8aa
Binary files /dev/null and b/website_product_quotation/static/src/img/arrows/previous-arrow-blue.png differ
diff --git a/website_product_quotation/static/src/img/default/odoo.png b/website_product_quotation/static/src/img/default/odoo.png
new file mode 100644
index 00000000000..d3de67c2c56
Binary files /dev/null and b/website_product_quotation/static/src/img/default/odoo.png differ
diff --git a/website_product_quotation/static/src/img/demo/1.jpg b/website_product_quotation/static/src/img/demo/1.jpg
new file mode 100644
index 00000000000..df98a061b78
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/1.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/10.jpg b/website_product_quotation/static/src/img/demo/10.jpg
new file mode 100644
index 00000000000..380a121c98a
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/10.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/11.jpg b/website_product_quotation/static/src/img/demo/11.jpg
new file mode 100644
index 00000000000..3b8f4686385
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/11.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/12.jpg b/website_product_quotation/static/src/img/demo/12.jpg
new file mode 100644
index 00000000000..875ce2f14b2
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/12.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/13.jpg b/website_product_quotation/static/src/img/demo/13.jpg
new file mode 100644
index 00000000000..8dba7186b4e
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/13.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/14.jpg b/website_product_quotation/static/src/img/demo/14.jpg
new file mode 100644
index 00000000000..e24a884501c
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/14.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/15.jpg b/website_product_quotation/static/src/img/demo/15.jpg
new file mode 100644
index 00000000000..e1230e5044c
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/15.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/16.jpg b/website_product_quotation/static/src/img/demo/16.jpg
new file mode 100644
index 00000000000..0cd0aaab330
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/16.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/17.jpg b/website_product_quotation/static/src/img/demo/17.jpg
new file mode 100644
index 00000000000..9c11470dff8
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/17.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/18.jpg b/website_product_quotation/static/src/img/demo/18.jpg
new file mode 100644
index 00000000000..bc91a1f64ef
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/18.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/19.jpg b/website_product_quotation/static/src/img/demo/19.jpg
new file mode 100644
index 00000000000..b64d4f3a382
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/19.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/2.jpg b/website_product_quotation/static/src/img/demo/2.jpg
new file mode 100644
index 00000000000..670e6adb4a9
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/2.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/20.jpg b/website_product_quotation/static/src/img/demo/20.jpg
new file mode 100644
index 00000000000..5f56399148b
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/20.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/21.jpg b/website_product_quotation/static/src/img/demo/21.jpg
new file mode 100644
index 00000000000..93179bf49be
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/21.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/22.jpg b/website_product_quotation/static/src/img/demo/22.jpg
new file mode 100644
index 00000000000..7b01b2a76d0
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/22.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/23.jpg b/website_product_quotation/static/src/img/demo/23.jpg
new file mode 100644
index 00000000000..add0901a5b0
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/23.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/24.jpg b/website_product_quotation/static/src/img/demo/24.jpg
new file mode 100644
index 00000000000..feee31af7df
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/24.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/25.jpg b/website_product_quotation/static/src/img/demo/25.jpg
new file mode 100644
index 00000000000..fc460cddc95
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/25.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/26.jpg b/website_product_quotation/static/src/img/demo/26.jpg
new file mode 100644
index 00000000000..3314c8a31ba
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/26.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/27.jpg b/website_product_quotation/static/src/img/demo/27.jpg
new file mode 100644
index 00000000000..2e215586460
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/27.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/28.jpg b/website_product_quotation/static/src/img/demo/28.jpg
new file mode 100644
index 00000000000..7b691cd9a39
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/28.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/29.jpg b/website_product_quotation/static/src/img/demo/29.jpg
new file mode 100644
index 00000000000..31513776223
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/29.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/3.jpg b/website_product_quotation/static/src/img/demo/3.jpg
new file mode 100644
index 00000000000..3a39b419d70
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/3.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/4.jpg b/website_product_quotation/static/src/img/demo/4.jpg
new file mode 100644
index 00000000000..58fd44d7695
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/4.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/5.jpg b/website_product_quotation/static/src/img/demo/5.jpg
new file mode 100644
index 00000000000..ac2c1ddceed
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/5.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/6.jpg b/website_product_quotation/static/src/img/demo/6.jpg
new file mode 100644
index 00000000000..a67446c90ce
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/6.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/7.jpg b/website_product_quotation/static/src/img/demo/7.jpg
new file mode 100644
index 00000000000..75befe4b759
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/7.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/8.jpg b/website_product_quotation/static/src/img/demo/8.jpg
new file mode 100644
index 00000000000..50edd03a8f9
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/8.jpg differ
diff --git a/website_product_quotation/static/src/img/demo/9.jpg b/website_product_quotation/static/src/img/demo/9.jpg
new file mode 100644
index 00000000000..234bdb8a726
Binary files /dev/null and b/website_product_quotation/static/src/img/demo/9.jpg differ
diff --git a/website_product_quotation/static/src/img/wheel/wheel.gif b/website_product_quotation/static/src/img/wheel/wheel.gif
new file mode 100644
index 00000000000..127dc3bfda2
Binary files /dev/null and b/website_product_quotation/static/src/img/wheel/wheel.gif differ
diff --git a/website_product_quotation/static/src/interactions/product_quote.js b/website_product_quotation/static/src/interactions/product_quote.js
new file mode 100644
index 00000000000..a0eca80320b
--- /dev/null
+++ b/website_product_quotation/static/src/interactions/product_quote.js
@@ -0,0 +1,223 @@
+import { Interaction } from "@web/public/interaction";
+import { registry } from "@web/core/registry";
+
+export class ProductQuote extends Interaction {
+ static selector = ".o_product_quote";
+
+ dynamicContent = {
+ ".o_next": {
+ "t-on-click": () => {
+ this.rotateToIndex(this.currentIndex + 1);
+ },
+ },
+ ".o_prev": {
+ "t-on-click": () => {
+ this.rotateToIndex(this.currentIndex - 1);
+ },
+ },
+ ".o_extra_image": {
+ "t-on-click": (event) => {
+ this.imageUpdater(event);
+ },
+ },
+ ".o_copy_link": {
+ "t-on-click": (event) => {
+ this.copyShareLink(event);
+ },
+ },
+ ".o_get_quote_btn": {
+ "t-on-click": () => {
+ this.isShown = false;
+ this.updateFormDetails();
+ },
+ },
+ ".o_form_section": {
+ "t-att-class": () => ({ "d-none": this.isShown }),
+ "t-on-click": (ev) => {
+ const form_container =
+ this.el.querySelector(".o_form_container");
+ if (form_container && !form_container.contains(ev.target)) {
+ this.isShown = true;
+ }
+ },
+ },
+ // To make Form Invisible as soon as submit button is clicked
+ // ".o_form_submit": {
+ // "t-on-click": () => {
+ // this.isShown = true;
+ // this.updateFormDetails();
+ // },
+ // },
+ };
+
+ setup() {
+ this.ul = this.el.querySelector("#circle--rotate");
+ this.lis = this.ul.querySelectorAll("li");
+ this.totalItems = this.lis.length;
+ this.step = 360 / this.totalItems;
+ this.animates = this.el.querySelectorAll(".animate");
+ this.currentIndex = 0;
+ this.angle = 0;
+ this.isShown = true;
+ this.positionListItems();
+ }
+
+ positionListItems() {
+ const center = {
+ x: this.ul.clientWidth / 2,
+ y: this.ul.clientHeight / 2,
+ };
+ const radius =
+ (Math.min(this.ul.clientWidth, this.ul.clientHeight) / 2) * 0.82;
+ const emBase = parseFloat(getComputedStyle(this.ul).fontSize);
+
+ this.lis.forEach((li, index) => {
+ const itemAngle =
+ (index / this.totalItems) * 2 * Math.PI - Math.PI / 2;
+ const x = (center.x + radius * Math.cos(itemAngle)) / emBase;
+ const y = (center.y + radius * Math.sin(itemAngle)) / emBase;
+
+ li.style.left = `${x}em`;
+ li.style.top = `${y}em`;
+
+ const degrees = (itemAngle * 180) / Math.PI + 90;
+ li.style.transform = `translate(-50%, -50%) rotate(${degrees}deg)`;
+
+ const icon = li.querySelector(".icon");
+ if (icon) {
+ icon.style.transform = `rotate(0deg)`;
+ }
+
+ li.addEventListener("click", () => this.rotateToIndex(index));
+ });
+ }
+
+ rotateToIndex(index) {
+ if (index < 0) index = this.totalItems - 1;
+ if (index >= this.totalItems) index = 0;
+
+ this.currentIndex = index;
+ this.angle = -index * this.step;
+ this.ul.style.transform = `rotate(${this.angle}deg)`;
+ this.lis.forEach((li, i) => li.classList.toggle("active", i === index));
+ this.animates.forEach((animate, i) => {
+ if (i === index) {
+ animate.classList.add("active");
+ } else {
+ animate.classList.remove("active");
+ }
+ });
+ }
+
+ imageUpdater(event) {
+ const element = event.target;
+ let parentContainer = element.closest(".product-category-slider");
+
+ let mainImage = parentContainer.querySelector(".img-fluid");
+ let mainImageName = parentContainer.querySelector(".extra-img-name");
+ let activeImages = parentContainer.querySelectorAll(".thumb-item");
+
+ if (mainImage) {
+ mainImage.src = element.getAttribute("src");
+ }
+
+ if (mainImageName) {
+ mainImageName.textContent = element.getAttribute("data-name") || "";
+ }
+
+ activeImages.forEach((img) => img.classList.remove("activeimg"));
+ element.classList.add("activeimg");
+ }
+
+ copyShareLink(event) {
+ event.preventDefault();
+ const element = event.target;
+ const link = element.href;
+ navigator.clipboard.writeText(link);
+ alert("Copied the text: \n" + link);
+ }
+
+ updateFormDetails() {
+ this.active_animate_wrapper = this.el.querySelectorAll(".active")[1];
+ this.product = this.active_animate_wrapper.getAttribute("data-key");
+ this.product = JSON.parse(this.product.replace(/'/g, '"'));
+
+ this.product_name =
+ this.active_animate_wrapper.querySelector(
+ ".o_product_name"
+ ).textContent;
+ this.el.querySelector("#product_name").value = this.product.name || "";
+
+ this.populateOptions("Size", this.product.size || []);
+ this.populateOptions("Fabric", this.product.fabric || []);
+ this.populateOptions("Color", this.product.color || []);
+ this.populateOptions("Print", this.product.print || []);
+ }
+
+ populateOptions(fieldName, options) {
+ const formContainer = this.el.querySelector("form .row");
+ if (!formContainer) return;
+
+ const submitButtonContainer = formContainer.querySelector(
+ ".s_website_form_submit"
+ );
+
+ if (!options.length) {
+ const existingBlock = formContainer.querySelector(
+ `.s_website_form_field[data-name='${fieldName}']`
+ );
+ if (existingBlock) existingBlock.remove();
+ return;
+ }
+
+ let fieldBlock = formContainer.querySelector(
+ `.s_website_form_field[data-name='${fieldName}']`
+ );
+
+ if (!fieldBlock) {
+ fieldBlock = document.createElement("div");
+ fieldBlock.className =
+ "s_website_form_field mb-3 col-12 s_website_form_custom col-lg-11";
+ fieldBlock.setAttribute("data-name", fieldName);
+ fieldBlock.setAttribute("data-type", "one2many");
+
+ fieldBlock.innerHTML = `
+
+
+
+ `;
+
+ formContainer.insertBefore(fieldBlock, submitButtonContainer);
+ }
+
+ const container = fieldBlock.querySelector(`.s_website_form_multiple`);
+ container.innerHTML = "";
+
+ const fragment = document.createDocumentFragment();
+ options.forEach((option, index) => {
+ const newCheckbox = document.createElement("div");
+ newCheckbox.className = "checkbox col-12 col-lg-4 col-md-6";
+ newCheckbox.innerHTML = `
+
+
+
+
+ `;
+ fragment.appendChild(newCheckbox);
+ });
+
+ container.appendChild(fragment);
+ }
+}
+
+registry
+ .category("public.interactions")
+ .add("website_product_quotation.product_quote", ProductQuote);
diff --git a/website_product_quotation/static/src/scss/product_quote_template.scss b/website_product_quotation/static/src/scss/product_quote_template.scss
new file mode 100644
index 00000000000..8ebfb58fc88
--- /dev/null
+++ b/website_product_quotation/static/src/scss/product_quote_template.scss
@@ -0,0 +1,307 @@
+* {
+ -webkit-tap-highlight-color: transparent;
+ font-family: "Questrial", Helvetica, Arial, Lucida, sans-serif;
+}
+
+ol,
+ul {
+ list-style: none;
+}
+
+a,
+div {
+ display: block;
+ unicode-bidi: isolate;
+}
+
+h1,
+h4 {
+ font-weight: normal;
+ color: #333;
+ padding-bottom: 10px;
+ line-height: 1em;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+.product-section {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+ background-color: transparent;
+}
+
+.circle--slider {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding: 3rem;
+ flex-direction: row-reverse;
+ justify-content: space-evenly;
+
+ @media (max-width: 991px) {
+ flex-direction: column;
+ gap: 50px;
+ justify-content: space-between;
+ }
+
+ .rotate--circle {
+ margin: auto;
+ width: 40%;
+ aspect-ratio: 1/1;
+ background: radial-gradient(
+ 72.99% 72.99% at 36.8% 27.01%,
+ #1d2248 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ radial-gradient(
+ 104.96% 105.78% at 0% 100%,
+ #0d143e 2.02%,
+ #171d45 21.78%,
+ #6b6980 57.29%,
+ #010935 75%,
+ #0d143e 94.65%
+ );
+ background-size: 100% 100%;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ border-radius: 50%;
+ position: relative;
+ @media (max-width: 425px) {
+ width: 80%;
+ }
+
+ .circle--rotate {
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ position: relative;
+ transform-origin: center;
+ padding: 0;
+ transition: transform 0.5s ease-in-out;
+ > li {
+ position: absolute;
+ display: block;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: all 500ms ease;
+ transform-origin: center center;
+ transform: translate(-50%, -50%);
+ width: 50%;
+ }
+ > li .icon {
+ visibility: visible;
+ cursor: pointer;
+ border-radius: 50%;
+ width: 20%;
+ aspect-ratio: 1 / 1;
+ margin: auto;
+ filter: grayscale(100%);
+ }
+ > li.active img {
+ font-size: 20px;
+ opacity: 1;
+ filter: drop-shadow(0 0 15px rgb(255, 255, 255));
+ transition: all 1s;
+ }
+ > li img {
+ opacity: 0.5;
+ transition: all 1s;
+ }
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 15%;
+ right: 15%;
+ bottom: 15%;
+ left: 15%;
+ background-image: url("/website_product_quotation/static/src/img/wheel/wheel.gif");
+ border-radius: inherit;
+ background-position: center;
+ background-size: 105% 105%;
+ mix-blend-mode: luminosity;
+ background-repeat: no-repeat;
+ }
+ }
+}
+
+.animate-wrapper {
+ width: 40%;
+ margin: auto;
+ transition: all 3s ease;
+ @media (max-width: 425px) {
+ width: 100%;
+ }
+}
+
+.animate {
+ transform-origin: center center;
+ display: flex;
+ justify-content: center;
+ button {
+ margin: 10px;
+ display: block;
+ background: #161c47;
+ padding: 1rem;
+ width: 90%;
+ text-align: center;
+ border-radius: 5px;
+ font-size: 0.8rem;
+ color: white;
+ font-weight: bold;
+ border: none;
+ justify-self: center;
+ }
+}
+
+.animate.active {
+ display: flex;
+ transform: scale(1);
+}
+
+.animate:not(.active) {
+ display: none;
+ transform: scale(0.5);
+}
+
+.product-info {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+.product-category-slider {
+ overflow: auto;
+ overflow-x: hidden;
+}
+.slider {
+ display: flex;
+ justify-content: center;
+ padding-bottom: 20px;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.123);
+ margin: 0 10%;
+}
+
+.slick-list {
+ overflow: auto;
+ display: flex;
+ justify-content: start;
+ gap: 20px;
+ img {
+ cursor: pointer;
+ display: block;
+ aspect-ratio: 1/1;
+ }
+}
+
+.product-description {
+ text-align: center;
+ color: #545454;
+ font-size: 1em;
+ line-height: 1.4em;
+ padding: 0 10px;
+ img {
+ display: inline-block;
+ aspect-ratio: 1/1;
+ max-height: 512px;
+ margin: 10px 0;
+ transition: all 1s ease-in-out;
+ }
+ > a {
+ display: block;
+ text-align: center;
+ font-size: 0.8rem;
+ color: black;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ h4 {
+ padding: 10px 0;
+ margin: auto;
+ }
+}
+
+.diamond-info {
+ justify-content: center;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ color: #848181;
+ transform: scaleX(1.1);
+}
+
+.diamond-meta {
+ padding: 1rem;
+ border: 2px solid #bdbaba;
+}
+
+.diamond-meta-title {
+ font-size: 1rem;
+ line-height: 0.8rem;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+.diamond-meta-detail {
+ font-size: 0.8rem;
+ line-height: 0.8rem;
+}
+
+.product-category-slider > .learn_more {
+ padding-top: 10px;
+ display: block;
+ text-align: center;
+ font-size: 12px;
+ color: black;
+ text-decoration: underline;
+}
+
+.circle--slider .prev {
+ left: -50px;
+}
+.circle--slider .next {
+ right: -50px;
+}
+.circle--slider .prev,
+.circle--slider .next {
+ position: absolute;
+ top: 50%;
+ margin: auto;
+ display: block;
+ height: 37px;
+ width: 37px;
+ cursor: pointer;
+ transform: translateY(-50%);
+}
+
+// Form Section
+.form-container {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-color: #9e9b9bc9;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+}
+
+.o_form_container {
+ width: 80%;
+ background: rgb(165, 161, 161);
+ margin: auto;
+ padding: 30px;
+ border-radius: 20px;
+ box-shadow: 0 4px 10px rgba(70, 69, 69, 0.432);
+ border-radius: 20px;
+}
diff --git a/website_product_quotation/views/product_quote_template.xml b/website_product_quotation/views/product_quote_template.xml
new file mode 100644
index 00000000000..363fdcacc31
--- /dev/null
+++ b/website_product_quotation/views/product_quote_template.xml
@@ -0,0 +1,382 @@
+
+
+
+
+
+
+
+ crm.lead
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+