s-platform-landing-section 0.1.32 → 0.1.34

package/dist/index.js

@@ -21,8 +21,8 @@ require('slick-carousel/slick/slick.css');
 require('slick-carousel/slick/slick-theme.css');
 var ai = require('react-icons/ai');
 var go = require('react-icons/go');
-var hi = require('react-icons/hi');
 var ri = require('react-icons/ri');
+var hi = require('react-icons/hi');
 var gi = require('react-icons/gi');
 
 var Button = function Button(props) {
@@ -428,18 +428,17 @@ var NavBar7 = function NavBar7(props) {
       position: "fixed",
       top: "-100px"
     }
-  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.defaultDomain, " | ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName), /*#__PURE__*/React__default.createElement("div", {
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20"
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: "/",
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-12 max-h-12",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-primary text-wrap line-clamp-2 leading-tight"
+    className: "text-xl md:text-2xl text-primary font-headingFont text-wrap line-clamp-2 leading-tight"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex flex-1 items-center gap-4"
   }, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB === void 0 ? void 0 : (_shopConfigStyle$navB2 = _shopConfigStyle$navB.filter(function (e) {
@@ -499,11 +498,10 @@ var NavBar7 = function NavBar7(props) {
     href: "/",
     className: "flex flex-1 gap-2 items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-12 max-h-12",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-wrap text-primary line-clamp-2"
+    className: "text-xl md:text-2xl font-headingFont text-wrap text-primary line-clamp-2"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: function onClick() {
@@ -531,12 +529,12 @@ var NavBar7 = function NavBar7(props) {
       return setIsOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 items-center"
+    className: "flex gap-2 items-center mb-2"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    className: "h-14 w-14 bg-cover bg-no-repeat"
+    className: "max-h-14 w-14 object-cover"
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl font-semibold line-clamp-1"
+    className: "text-xl font-headingFont text-primary line-clamp-1"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName))), /*#__PURE__*/React__default.createElement("button", {
     className: "text-gray4",
     onClick: function onClick() {
@@ -730,11 +728,11 @@ var NavBar1 = function NavBar1(props) {
     href: "/",
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
+    className: "object-cover w-12 max-h-12",
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-wrap  font-fredoka text-primary"
+    className: "text-xl md:text-2xl text-wrap font-headingFont  text-primary"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex flex-1 items-center gap-4"
   }, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB === void 0 ? void 0 : (_shopConfigStyle$navB2 = _shopConfigStyle$navB.filter(function (e) {
@@ -792,11 +790,11 @@ var NavBar1 = function NavBar1(props) {
     href: "/",
     className: "flex flex-1 gap-2 items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
+    className: "object-cover w-12  max-h-12",
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-wrap text-primary"
+    className: "text-xl md:text-2xl text-wrap text-primary font-headingFont"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: function onClick() {
@@ -824,12 +822,12 @@ var NavBar1 = function NavBar1(props) {
       return setIsOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 items-center"
+    className: "flex gap-2 items-center mb-2"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    className: "h-14 w-14 bg-cover bg-no-repeat"
+    className: "max-h-14 w-14 bg-cover bg-no-repeat"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl line-clamp-1"
+    className: "text-xl font-headingFont text-primary line-clamp-1"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName))), /*#__PURE__*/React__default.createElement("button", {
     className: "text-gray4",
     onClick: function onClick() {
@@ -965,6 +963,24 @@ var SectionTitle3 = function SectionTitle3(props) {
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
+var SectionTitle4 = function SectionTitle4(props) {
+  var _data$sectionTitle;
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: true
+  }, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-center items-center gap-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "border w-32 border-primary"
+  }), /*#__PURE__*/React__default.createElement("h2", {
+    className: "font-headingFont !leading-relaxed text-primary text-center text-2xl md:text-4xl"
+  }, data === null || data === void 0 ? void 0 : (_data$sectionTitle = data.sectionTitle) === null || _data$sectionTitle === void 0 ? void 0 : _data$sectionTitle.toUpperCase()), /*#__PURE__*/React__default.createElement("div", {
+    className: "border w-32 border-primary"
+  })) : null, data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("p", {
+    className: "text-xl text-center font-medium leading-relaxed text-secondary mt-2"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
+};
+
 var Input = React.forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -1273,7 +1289,7 @@ var Hero6 = function Hero6(props) {
 };
 
 var Hero10 = function Hero10(props) {
-  var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$2$button;
+  var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$3, _sectionData$4, _sectionData$4$button;
   var shopConfigStyle = props.shopConfigStyle,
     data = props.data,
     _props$Link = props.Link,
@@ -1290,7 +1306,9 @@ var Hero10 = function Hero10(props) {
     className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
-  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : (_sectionData$2$button = _sectionData$2.buttons) === null || _sectionData$2$button === void 0 ? void 0 : _sectionData$2$button.map(function (button, index) {
+  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData !== null && sectionData !== void 0 && (_sectionData$2 = sectionData[0]) !== null && _sectionData$2 !== void 0 && _sectionData$2.description ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg text-center text-white md:text-2xl"
+  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$3 = sectionData[0]) === null || _sectionData$3 === void 0 ? void 0 : _sectionData$3.description) : null, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$4 = sectionData[0]) === null || _sectionData$4 === void 0 ? void 0 : (_sectionData$4$button = _sectionData$4.buttons) === null || _sectionData$4$button === void 0 ? void 0 : _sectionData$4$button.map(function (button, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       key: "gdf-" + index,
@@ -1302,7 +1320,51 @@ var Hero10 = function Hero10(props) {
   })));
 };
 
+var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
+var SECTION_CLASS = "my-6 md:my-12 px-4 xl:px-20 bg-background";
+
 var Hero11 = function Hero11(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data2$$title, _data$data3, _data$data3$;
+  var _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-2 py-12 !bg-bgSecondary gap-6 md:gap-12"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "bg-primary w-4 h-1/2 mt-6 "
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "h-[45%]"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0],
+    className: "object-cover max-w-full h-auto"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-[45%]"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "bg-primary w-4 h-1/2 mb-6"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative flex flex-col justify-center gap-6 lg:gap-10"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-2xl md:text-4xl !leading-[1.6] font-headingFont w-max text-center text-primary"
+  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : (_data$data2$$title = _data$data2$.title) === null || _data$data2$$title === void 0 ? void 0 : _data$data2$$title.toUpperCase()), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg md:text-xl lg:text-2xl"
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description), /*#__PURE__*/React__default.createElement(Button, {
+    label: "\u0110\u1EB7t b\xE0n ngay",
+    shopConfigStyle: shopConfigStyle,
+    className: "!font-normal w-max",
+    sho: true
+  })));
+};
+
+var Hero12 = function Hero12(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
@@ -1397,7 +1459,7 @@ var CarouselItem = function CarouselItem(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "w-full overflow-hidden "
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex overflow-x-auto gap-2 no-scrollbar items-center",
+    className: "flex overflow-x-auto gap-2 " + (isNavigateButton ? "no-scrollbar" : "scroll-custom pb-2") + " items-center",
     ref: listRef
   }, isAll ? /*#__PURE__*/React__default.createElement("div", {
     className: " " + ((Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0 ? "bg-primary text-textButton" : "bg-background") + " w-max border border-primary p-1 md:p-2 rounded-lg cursor-pointer whitespace-nowrap",
@@ -7502,7 +7564,7 @@ var lib = {
 };
 
 var getBaseUrl = function getBaseUrl() {
-  return process.env.NEXT_PUBLIC_BASE_URL || "https://proapi.sspa.com.vn";
+  return process.env.NEXT_PUBLIC_BASE_URL || "https://test-apigateway.sfin.vn";
 };
 var request = axios.create();
 request.interceptors.request.use(function (config) {
@@ -7553,7 +7615,7 @@ var getYoutubeVideoIdByUrl = function getYoutubeVideoIdByUrl(url) {
 var linkPagePolicy = "https://sites.google.com/view/sodofin-landing-page-policy";
 var endpointLandingShop = "/landing-shop/v2";
 var endpointLanding = "/landing/v2";
-var baseURL = process.env.NEXT_PUBLIC_BASE_URL || "https://proapi.sspa.com.vn";
+var baseURL = process.env.NEXT_PUBLIC_BASE_URL || "https://test-apigateway.sfin.vn";
 
 var getShopCategoriesApi = function getShopCategoriesApi(shopId, types) {
   return api({
@@ -7648,9 +7710,6 @@ var Hero13 = function Hero13(props) {
   }));
 };
 
-var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
-var SECTION_CLASS = "my-6 md:my-12 px-4 xl:px-20 bg-background";
-
 var Features2 = function Features2(props) {
   var data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
@@ -8064,7 +8123,11 @@ var ProductPrice = function ProductPrice(props) {
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
     _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style;
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$priceClassName = props.priceClassName,
+    priceClassName = _props$priceClassName === void 0 ? "" : _props$priceClassName,
+    _props$priceBeforeDis = props.priceBeforeDiscountClassName,
+    priceBeforeDiscountClassName = _props$priceBeforeDis === void 0 ? "" : _props$priceBeforeDis;
   var _useState = React.useState(),
     displayPrice = _useState[0],
     setDisplayPrice = _useState[1];
@@ -8099,12 +8162,12 @@ var ProductPrice = function ProductPrice(props) {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-gray3 line-through mr-2"
-  }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
-    className: "text-primary font-semibold",
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-primary font-semibold  mr-4 " + priceClassName,
     style: style
-  }, displayPrice));
+  }, displayPrice), displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-gray3 line-through " + priceBeforeDiscountClassName + " "
+  }, "200,000\u0111") : null);
 };
 
 var ProductItem1 = function ProductItem1(props) {
@@ -10095,6 +10158,39 @@ var ProductItem7 = function ProductItem7(props) {
   }, 1 - 100 * (product === null || product === void 0 ? void 0 : product.price) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount)) : null));
 };
 
+var ProductItem8 = function ProductItem8(props) {
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center rounded relative group " + className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative "
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "min-h-[360px] md:min-h-[400px] xl:min-h-[440px] !object-cover !rounded"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute bottom-0 rounded-b pb-6 px-4 bg-gradient-to-t from-black/50 to-transparent flex flex-col items-center h-1/2 gap-2 w-full justify-end "
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg text-textButton"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    priceClassName: "text-textButton !font-normal",
+    priceBeforeDiscountClassName: "text-textButton !font-normal"
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Th\xEAm v\xE0o gi\u1ECF",
+    shopConfigStyle: shopConfigStyle,
+    className: "hidden group-hover:block transition-all duration-300 !font-normal"
+  })))));
+};
+
 var TreatmentItem1 = function TreatmentItem1(props) {
   var product = props.product,
     _props$Link = props.Link,
@@ -10154,7 +10250,7 @@ var ProductList7 = function ProductList7(props) {
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
   }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
@@ -10163,14 +10259,14 @@ var ProductList7 = function ProductList7(props) {
       key: index,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
-  })), (products === null || products === void 0 ? void 0 : products.length) > 4 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), (products === null || products === void 0 ? void 0 : products.length) > 4 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
     href: "/san-pham",
     Link: Link
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Xem tất cả",
     shopConfigStyle: shopConfigStyle,
     className: "mt-12"
-  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null)), /*#__PURE__*/React__default.createElement(Dash, {
+  })) : null), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }));
 };
@@ -10433,7 +10529,7 @@ var Products3 = function Products3(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl"
   }, "Danh m\u1EE5c s\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
-    className: "overflow-y-auto max-h-96"
+    className: "overflow-y-auto max-h-96 scroll-container pr-3"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + (!(categorySelected !== null && categorySelected !== void 0 && categorySelected.categoryId) ? "text-primary" : "text-textSecondary"),
     onClick: function onClick() {
@@ -10770,6 +10866,80 @@ var Products11 = function Products11(props) {
   }) : null)));
 };
 
+var ProductItem9 = function ProductItem9(props) {
+  var product = props.product;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex border-b border-stroke items-center py-4"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "!w-24 rounded-lg"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-4 flex-1"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-2"
+  }, /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    priceClassName: "!font-normal text-lg"
+  }))));
+};
+
+var Products12 = function Products12(props) {
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var _useState = React.useState({
+      types: "0"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _CategoryController = CategoryController(_extends({}, props, {
+      types: "0"
+    })),
+    categories = _CategoryController.categories;
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  var handleFilterByCategory = function handleFilterByCategory(category) {
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        categoryId: category === null || category === void 0 ? void 0 : category.categoryId
+      });
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-6"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(CarouselItem, {
+    isNavigateButton: false,
+    data: categories,
+    onClick: handleFilterByCategory
+  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full justify-center p-12"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-x-12"
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      key: index,
+      Link: Link,
+      href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
+    }, /*#__PURE__*/React__default.createElement(ProductItem9, {
+      product: product === null || product === void 0 ? void 0 : product.productInfo
+    }));
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null)));
+};
+
 var ProductCategory2 = function ProductCategory2(props) {
   var _products$slice;
   var _props$Link = props.Link,
@@ -11023,7 +11193,7 @@ var ProductHot1 = function ProductHot1(props) {
     }));
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " flex flex-col gap-4 md:gap-8"
+    className: SECTION_CLASS + " flex flex-col gap-6 md:gap-12"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -11814,57 +11984,354 @@ var BookingForm6 = function BookingForm6(props) {
   })));
 };
 
-var Banner1 = function Banner1(props) {
-  var data = props.data,
-    shopConfigStyle = props.shopConfigStyle,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+var TextArea = React.forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
+    _props$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    _props$textareaClassN = props.textareaClassName,
+    textareaClassName = _props$textareaClassN === void 0 ? "" : _props$textareaClassN,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
+  var _useState = React.useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
+  var _useState2 = React.useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  React.useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setValue: function setValue(text) {
+        return _setValue(text);
+      },
+      getValue: function getValue() {
+        return value;
+      },
+      setError: function setError(err) {
+        return _setError(err);
+      }
+    };
+  });
+  var _validateData = function _validateData() {
+    var count = 0;
+    for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
+      var _e$pattern;
+      var e = _step.value;
+      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      }
+    }
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
+    }
+  };
+  var handleOnChangeValue = function handleOnChangeValue(e) {
+    var value = e.target.value;
+    _setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
+    return (e === null || e === void 0 ? void 0 : e.type) === "required";
+  }));
+  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-danger"
+  }, " *") : null;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "" + SECTION_DEFAULT_CLASS
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 sm:grid-cols-3 gap-4 lg:gap-6 mt-6"
-  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("img", {
-      src: item === null || item === void 0 ? void 0 : item.srcImage,
-      alt: "",
-      className: "rounded-2xl",
-      key: "hnfhn-" + index
-    });
-  })));
-};
+    className: "" + className
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-1 " + labelClassName
+  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("textarea", {
+    name: "",
+    id: "",
+    className: "focus:outline-none focus:ring-0 border rounded-xl min-h-24 " + textareaClassName,
+    placeholder: placeholder,
+    value: value,
+    onChange: function onChange(e) {
+      handleOnChangeValue(e);
+    }
+  }), error ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-danger"
+  }, error) : null);
+});
 
-var Banner2 = function Banner2(props) {
-  var data = props.data,
-    shopConfigStyle = props.shopConfigStyle,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  var _useState = React.useState(0),
-    currentSlide = _useState[0],
-    setCurrentSlide = _useState[1];
-  function RenderArrow(props) {
-    var className = props.className,
-      style = props.style,
-      onClick = props.onClick;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className,
-      style: _extends({}, style, {
-        display: "none"
-      }),
-      onClick: onClick
-    });
-  }
-  return /*#__PURE__*/React__default.createElement("div", {
+var BookingFoodForm = function BookingFoodForm(props) {
+  var _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$onCloseFormBoo = props.onCloseFormBooking,
+    onCloseFormBooking = _props$onCloseFormBoo === void 0 ? function () {} : _props$onCloseFormBoo,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$isModalBooking = props.isModalBooking,
+    isModalBooking = _props$isModalBooking === void 0 ? false : _props$isModalBooking;
+  var _useState = React.useState(defaultValue),
+    listProductSelected = _useState[0],
+    setListProductSelected = _useState[1];
+  var inputNameRef = React.useRef(null);
+  var inputDateRef = React.useRef(null);
+  var inputPhoneNumberRef = React.useRef(null);
+  var inputQuantityRef = React.useRef(null);
+  var _useState2 = React.useState(false),
+    isOpenPopup = _useState2[0],
+    setIsOpenPopup = _useState2[1];
+  var _useState3 = React.useState(false),
+    isHiddenForm = _useState3[0],
+    setIsHiddenForm = _useState3[1];
+  var _BookingController = BookingController(props),
+    _BookingController$cr = _BookingController.createSchedule,
+    createSchedule = _BookingController$cr === void 0 ? function () {} : _BookingController$cr;
+  var checkDateBooking = function checkDateBooking() {
+    var _inputDateRef$current;
+    var scheduleDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current = inputDateRef.current) === null || _inputDateRef$current === void 0 ? void 0 : _inputDateRef$current.getValue();
+    return scheduleDate && scheduleDate >= Date.now();
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      var _inputNameRef$current, _inputPhoneNumberRef$, _inputDateRef$current2, _inputQuantityRef$cur;
+      var validateName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current = inputNameRef.current) === null || _inputNameRef$current === void 0 ? void 0 : _inputNameRef$current.validateData();
+      var validatePhoneNumber = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$ = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$ === void 0 ? void 0 : _inputPhoneNumberRef$.validateData();
+      var validateDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current2 = inputDateRef.current) === null || _inputDateRef$current2 === void 0 ? void 0 : _inputDateRef$current2.validateData();
+      var validateQuantity = inputQuantityRef === null || inputQuantityRef === void 0 ? void 0 : (_inputQuantityRef$cur = inputQuantityRef.current) === null || _inputQuantityRef$cur === void 0 ? void 0 : _inputQuantityRef$cur.validateData();
+      var _temp = function () {
+        if (validateName && validatePhoneNumber && validateDate && validateQuantity) {
+          var _inputPhoneNumberRef$2, _inputNameRef$current2, _inputDateRef$current3;
+          var customerPhone = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$2 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$2 === void 0 ? void 0 : _inputPhoneNumberRef$2.getValue();
+          var customerName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current2 = inputNameRef.current) === null || _inputNameRef$current2 === void 0 ? void 0 : _inputNameRef$current2.getValue();
+          var scheduleDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current3 = inputDateRef.current) === null || _inputDateRef$current3 === void 0 ? void 0 : _inputDateRef$current3.getValue();
+          var services = listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.map(function (item) {
+            var _item$technical;
+            return {
+              productId: item === null || item === void 0 ? void 0 : item.value,
+              technicalStaffIds: [item === null || item === void 0 ? void 0 : (_item$technical = item.technical) === null || _item$technical === void 0 ? void 0 : _item$technical.sysUserId],
+              quantity: item === null || item === void 0 ? void 0 : item.quantity,
+              oldService: item === null || item === void 0 ? void 0 : item.oldService
+            };
+          });
+          var shopId = shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId;
+          console.log("check payload:::", services);
+          return Promise.resolve(createSchedule(customerName, customerPhone, scheduleDate, services, shopId)).then(function (response) {
+            var _response$data, _response$data$status;
+            if ((response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$status = _response$data.status) === null || _response$data$status === void 0 ? void 0 : _response$data$status.code) === '200') {
+              var _inputPhoneNumberRef$3, _inputNameRef$current3, _inputDateRef$current4;
+              if (isModalBooking) {
+                setIsHiddenForm(true);
+              }
+              setIsOpenPopup(true);
+              inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$3 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$3 === void 0 ? void 0 : _inputPhoneNumberRef$3.setValue("");
+              inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current3 = inputNameRef.current) === null || _inputNameRef$current3 === void 0 ? void 0 : _inputNameRef$current3.setValue("");
+              inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current4 = inputDateRef.current) === null || _inputDateRef$current4 === void 0 ? void 0 : _inputDateRef$current4.setValue(new Date());
+              setListProductSelected([]);
+            }
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleClosePopup = function handleClosePopup() {
+    setIsOpenPopup(false);
+    setIsHiddenForm(false);
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isHiddenForm ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-4 rounded-2xl p-6 border bg-white  " + className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    ref: inputNameRef,
+    label: "Họ và tên",
+    placeholder: "Nhập họ tên",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập họ tên"
+    }],
+    className: "w-full rounded-lg bg-white",
+    inputClassName: "w-full focus:outline-none focus:ring-0"
+  }), /*#__PURE__*/React__default.createElement(InputPhoneNumber, {
+    ref: inputPhoneNumberRef,
+    name: "customerPhone",
+    label: "Số điện thoại",
+    placeholder: "Nhập số điện thoại",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập số điện thoại"
+    }, {
+      type: "pattern",
+      pattern: pattern === null || pattern === void 0 ? void 0 : pattern.phoneNumberPattern,
+      message: "Số điện thoại không hợp lệ!"
+    }],
+    className: "bg-bgSecondary"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    ref: inputQuantityRef,
+    label: "Số người",
+    placeholder: "Nhập số người",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập số người"
+    }],
+    className: "w-full rounded-lg bg-white",
+    inputClassName: "w-full focus:outline-none focus:ring-0"
+  }), /*#__PURE__*/React__default.createElement(DateTimePicker, {
+    ref: inputDateRef,
+    label: "Thời gian",
+    className: "w-full rounded-lg",
+    placeholder: "Chọn thời gian",
+    time: true,
+    rules: [{
+      type: "required",
+      message: "Bắt buộc chọn ngày đặt"
+    }, {
+      type: "validate",
+      message: "Thời gian không hợp lệ",
+      validate: checkDateBooking
+    }]
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 gap-6"
+  }, /*#__PURE__*/React__default.createElement(TextArea, {
+    label: "Ghi ch\xFA",
+    placeholder: "Nh\u1EADp ghi ch\xFA (n\u1EBFu c\xF3)",
+    className: " w-full ",
+    textareaClassName: "px-4 py-3 w-full min-h-32"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Đặt lịch ngay",
+    shopConfigStyle: shopConfigStyle,
+    onClick: handleSubmit
+  }))) : null, isOpenPopup && /*#__PURE__*/React__default.createElement(ModalNotification, {
+    onCloseFormBooking: onCloseFormBooking,
+    onClose: handleClosePopup
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "bg-white rounded-lg shadow-lg p-6 lg:px-16 lg:pb-10 max-w-sm flex gap-4 flex-col items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement(fa.FaCheckCircle, {
+    className: "h-full text-green-500",
+    style: {
+      fontSize: "56px"
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "font-medium text-2xl"
+  }, "\u0110\u1EB7t l\u1ECBch th\xE0nh c\xF4ng"), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center"
+  }, "Ch\xFAng t\xF4i \u0111\xE3 ghi nh\u1EADn th\xF4ng tin c\u1EE7a b\u1EA1n v\xE0 s\u1EBD li\xEAn h\u1EC7 l\u1EA1i ngay"))));
+};
+
+var BookingTable1 = function BookingTable1(props) {
+  var _data$data, _data$data$, _data$data2, _data$data2$, _data$data3, _data$data3$, _data$data4, _data$data4$, _data$data5, _data$data5$, _data$data6, _data$data6$;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  console.log("booking data", data);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full px-4 xl:px-20 py-12"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-6 md:mt-12 grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-12"
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    href: convertURL(data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.route) || (data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.link) || "#"
+  }, data !== null && data !== void 0 && (_data$data3 = data.data) !== null && _data$data3 !== void 0 && (_data$data3$ = _data$data3[0]) !== null && _data$data3$ !== void 0 && _data$data3$.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-primary w-full h-auto"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: configSvg(data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : _data$data4$.svgImage)
+    }
+  })) : /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : (_data$data5$ = _data$data5[0]) === null || _data$data5$ === void 0 ? void 0 : _data$data5$.srcImage,
+    className: "w-full h-auto"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-4 whitespace-pre-line"
+  }, data === null || data === void 0 ? void 0 : (_data$data6 = data.data) === null || _data$data6 === void 0 ? void 0 : (_data$data6$ = _data$data6[0]) === null || _data$data6$ === void 0 ? void 0 : _data$data6$.description)), /*#__PURE__*/React__default.createElement(BookingFoodForm, {
+    shopConfigStyle: shopConfigStyle,
+    shopConfig: shopConfig,
+    className: "col-span-2"
+  })));
+};
+
+var Banner1 = function Banner1(props) {
+  var data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 sm:grid-cols-3 gap-4 lg:gap-6 mt-6"
+  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      alt: "",
+      className: "rounded-2xl",
+      key: "hnfhn-" + index
+    });
+  })));
+};
+
+var Banner2 = function Banner2(props) {
+  var data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var _useState = React.useState(0),
+    currentSlide = _useState[0],
+    setCurrentSlide = _useState[1];
+  function RenderArrow(props) {
+    var className = props.className,
+      style = props.style,
+      onClick = props.onClick;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      style: _extends({}, style, {
+        display: "none"
+      }),
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement(Slider, {
-    className: "center",
+    className: "center mt-6 lg:mt-12",
     infinite: false,
     slidesToShow: 2,
     speed: 500,
@@ -12154,6 +12621,101 @@ function SvgVnpay(props) {
   }))));
 }
 
+var dataFake = [{
+  title: "Đa dạng thanh toán",
+  data: [{
+    svgImage: "",
+    srcImage: /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, null),
+    label: "Chuyển khoản",
+    link: ""
+  }, {
+    svgImage: "",
+    srcImage: /*#__PURE__*/React__default.createElement(bs.BsCurrencyDollar, null),
+    label: "Tiền mặt",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(SvgVnpay, null),
+    svgImage: "",
+    label: "VNPay",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(SvgVietQr, null),
+    svgImage: "",
+    label: "VietQR",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(go.GoCreditCard, null),
+    svgImage: "",
+    label: "Thẻ ATM",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaCcVisa, null),
+    svgImage: "",
+    label: "Thẻ Quốc tế",
+    link: ""
+  }]
+}, {
+  title: "Thông tin hữu ích",
+  data: [{
+    srcImage: /*#__PURE__*/React__default.createElement(io.IoMdCheckmarkCircleOutline, null),
+    svgImage: "",
+    label: "Chính sách bảo hành",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, null),
+    svgImage: "",
+    label: "Chính sách đổi trả",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(lu.LuShoppingBag, null),
+    svgImage: "",
+    label: "Hướng dẫn mua hàng online",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(ai.AiOutlineInfoCircle, null),
+    svgImage: "",
+    label: "Giới thiệu về chúng tôi",
+    link: ""
+  }]
+}, {
+  title: "Mạng xã hội",
+  data: [{
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaFacebookF, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Facebook",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaYoutube, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Youtube",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaTiktok, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Tiktok",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(ri.RiMessengerFill, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Messenger",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(si.SiZalo, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Zalo",
+    link: ""
+  }]
+}];
 var Links1 = function Links1(props) {
   var data = props.data,
     _props$SectionTitle = props.SectionTitle,
@@ -12167,26 +12729,23 @@ var Links1 = function Links1(props) {
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8 w-full bg-background"
-  }, [1, 2, 3].map(function (item, index) {
+  }, dataFake === null || dataFake === void 0 ? void 0 : dataFake.map(function (item, index) {
+    var _item$data;
     return /*#__PURE__*/React__default.createElement("div", {
-      key: "qwikf-" + index + " "
+      key: "qwikf-" + index + " ",
+      className: "h-full overflow-hidden rounded-b-xl"
     }, /*#__PURE__*/React__default.createElement("h3", {
       className: "text-lg md:text-2xl font-semibold mb-4"
-    }, "\u0110a d\u1EA1ng thanh to\xE1n"), /*#__PURE__*/React__default.createElement("div", {
-      className: "leading-10 flex flex-col bg-background2 p-4 rounded-xl bg-bgSecondary "
-    }, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), "  Chuy\u1EC3n kho\u1EA3n"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(bs.BsCurrencyDollar, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), " Ti\u1EC1n m\u1EB7t"), /*#__PURE__*/React__default.createElement("label", {
-      className: "flex items-center gap-[18px]"
-    }, /*#__PURE__*/React__default.createElement(SvgVietQr, null), "VietQR"), /*#__PURE__*/React__default.createElement("label", {
-      className: "flex items-center gap-[18px]"
-    }, /*#__PURE__*/React__default.createElement(SvgVnpay, null), "VNPay"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(go.GoCreditCard, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), " Th\u1EBB ATM"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(si.SiVisa, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), " Th\u1EBB Qu\u1ED1c t\u1EBF")));
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "leading-10 flex flex-col bg-background2 p-4 rounded-xl bg-bgSecondary h-full"
+    }, item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.map(function (it, idx) {
+      return /*#__PURE__*/React__default.createElement("label", {
+        className: "flex gap-4 items-center",
+        key: "ikgf-" + idx
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "text-primary text-2xl"
+      }, it === null || it === void 0 ? void 0 : it.srcImage), it === null || it === void 0 ? void 0 : it.label);
+    })));
   })));
 };
 
@@ -12232,11 +12791,10 @@ var Footer1 = function Footer1(props) {
     href: "/",
     className: "flex items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-16 h-16",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-14 max-h-14",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: " text-2xl md:text-3xl font-semibold ms-2",
+    className: "text-2xl md:text-3xl ms-2 font-headingFont ",
     style: {
       color: primary
     }
@@ -12377,11 +12935,10 @@ var Footer7 = function Footer7(props) {
     href: "/",
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-14",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-14  max-h-14",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: " text-2xl md:text-3xl ms-2",
+    className: " text-2xl md:text-3xl ms-2 font-headingFont ",
     style: {
       color: primary
     }
@@ -12641,6 +13198,46 @@ var CustomerRating6 = function CustomerRating6(props) {
   }))));
 };
 
+var CustomerRating8 = function CustomerRating8(props) {
+  var _data$data;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " !my-0 py-12 bg-bgSecondary"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: " mt-6 md:mt-12  grid grid-cols-1 md:grid-cols-3 gap-6"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col items-center gap-2 p-4 border border-stroke rounded-2xl ",
+      key: "ht-" + index
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.avatar,
+      className: "w-40 h-40 rounded-full object-cover border-8 border-stroke"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "text-xl text-primary"
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("div", {
+      className: "text-gray3"
+    }, item === null || item === void 0 ? void 0 : item.description), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-2 "
+    }, /*#__PURE__*/React__default.createElement(ri.RiDoubleQuotesL, {
+      className: "text-gray3",
+      size: 36
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "pt-4"
+    }, item === null || item === void 0 ? void 0 : item.content), /*#__PURE__*/React__default.createElement(ri.RiDoubleQuotesL, {
+      className: " mt-auto text-gray3",
+      size: 36
+    })));
+  }))));
+};
+
 var CustomerRating10 = function CustomerRating10(props) {
   var _data$data;
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -12815,7 +13412,65 @@ var Gallery1 = function Gallery1(props) {
   }));
 };
 
-var PageTitle1 = function PageTitle1(props) {
+var Gallery1$1 = function Gallery1(props) {
+  var _data$data, _data$data$slice, _data$data2, _data$data2$slice, _data$data3, _data$data3$slice;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-3 gap-2 md:gap-6 mt-6 md:mt-12"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 md:gap-4"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$slice = _data$data.slice(0, 2)) === null || _data$data$slice === void 0 ? void 0 : _data$data$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-full h-full object-cover rounded-xl md:rounded-2xl"
+    });
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 md:gap-4"
+  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$slice = _data$data2.slice(2, 4)) === null || _data$data2$slice === void 0 ? void 0 : _data$data2$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-full h-full object-cover rounded-xl md:rounded-2xl odd:h-[130%]"
+    });
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 md:gap-4"
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$slice = _data$data3.slice(4, 6)) === null || _data$data3$slice === void 0 ? void 0 : _data$data3$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-full h-full object-cover rounded-xl md:rounded-2xl even:h-[130%]"
+    });
+  })))));
+};
+
+var PageTitle1 = function PageTitle1(props) {
+  var _sectionData$;
+  var data = props.data,
+    route = props.route;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full bg-cover bg-center bg-no-repeat ",
+    style: {
+      backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage) + ")"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 w-full h-full bg-black opacity-40 z-0"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full p-20 z-10 flex flex-col gap-6 items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement("h2", {
+    className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
+  }, data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : route === null || route === void 0 ? void 0 : route.label)));
+};
+
+var PageTitle2 = function PageTitle2(props) {
   var _sectionData$;
   var data = props.data,
     route = props.route;
@@ -12831,7 +13486,103 @@ var PageTitle1 = function PageTitle1(props) {
     className: "relative w-full p-20 z-10 flex flex-col gap-6 items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("h2", {
     className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
-  }, sectionData !== null && sectionData !== void 0 && sectionData.sectionTitle ? sectionData === null || sectionData === void 0 ? void 0 : sectionData.sectionTitle : route === null || route === void 0 ? void 0 : route.label)));
+  }, data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : route === null || route === void 0 ? void 0 : route.label), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg md:text-2xl text-white"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null));
+};
+
+var Breadcrumb1 = function Breadcrumb1(props) {
+  var shopConfigStyle = props.shopConfigStyle,
+    route = props.route,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$routeClassName = props.routeClassName,
+    routeClassName = _props$routeClassName === void 0 ? "" : _props$routeClassName;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
+    textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  var _useState = React.useState([]),
+    items = _useState[0],
+    setItems = _useState[1];
+  React.useEffect(function () {
+    getItems();
+  }, [route]);
+  var getItems = function getItems() {
+    var _route$route, _route$route$split, _route$route$split$fi, _items, _items2;
+    var items = route === null || route === void 0 ? void 0 : (_route$route = route.route) === null || _route$route === void 0 ? void 0 : (_route$route$split = _route$route.split("/")) === null || _route$route$split === void 0 ? void 0 : (_route$route$split$fi = _route$route$split.filter(function (e) {
+      return e === null || e === void 0 ? void 0 : e.length;
+    })) === null || _route$route$split$fi === void 0 ? void 0 : _route$route$split$fi.slice(0, 2);
+    items = (_items = items) === null || _items === void 0 ? void 0 : _items.map(function (e) {
+      var _e, _e$replace, _e$replace$replace, _e$replace$replace$re;
+      if (e === "product") e = "products";else if (e === "service") e = "services";
+      return (routes === null || routes === void 0 ? void 0 : routes.find(function (r) {
+        return (r === null || r === void 0 ? void 0 : r.name) === e;
+      })) || {
+        label: (_e = e) === null || _e === void 0 ? void 0 : (_e$replace = _e.replace(/-{3}/g, "###")) === null || _e$replace === void 0 ? void 0 : (_e$replace$replace = _e$replace.replace(/-/g, " ")) === null || _e$replace$replace === void 0 ? void 0 : (_e$replace$replace$re = _e$replace$replace.replace(/###/g, "-")) === null || _e$replace$replace$re === void 0 ? void 0 : _e$replace$replace$re.replace(/~/g, "/")
+      };
+    });
+    (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2.unshift({
+      name: "home",
+      label: "Trang chủ",
+      route: "/"
+    });
+    console.log(items);
+    setItems(items);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " !my-6 flex gap-2 overflow-x-auto scroll-custom " + className
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "flex gap-2 flex-shrink-0"
+    }, index ? /*#__PURE__*/React__default.createElement("div", {
+      className: "text-gray4"
+    }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || "#",
+      style: {
+        color: textHeading
+      },
+      className: routeClassName
+    }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.label));
+  }));
+};
+
+var PageTitle3 = function PageTitle3(props) {
+  var _sectionData$, _route$route, _route$route$split, _route$route$split$fi, _route$route$split$fi2, _route$route$split$fi3, _route$route$split$fi4, _route$route$split$fi5;
+  var data = props.data,
+    route = props.route,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full bg-cover bg-center bg-no-repeat mb-6 md:mb-12 ",
+    style: {
+      backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage) + ")"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 w-full h-full bg-black opacity-60 z-0"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full p-20 z-10 flex flex-col items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement("h2", {
+    className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
+  }, route === null || route === void 0 ? void 0 : (_route$route = route.route) === null || _route$route === void 0 ? void 0 : (_route$route$split = _route$route.split("/")) === null || _route$route$split === void 0 ? void 0 : (_route$route$split$fi = _route$route$split.filter(function (e) {
+    return e === null || e === void 0 ? void 0 : e.length;
+  })) === null || _route$route$split$fi === void 0 ? void 0 : (_route$route$split$fi2 = _route$route$split$fi.at(-1)) === null || _route$route$split$fi2 === void 0 ? void 0 : (_route$route$split$fi3 = _route$route$split$fi2.replace(/-{3}/g, "###")) === null || _route$route$split$fi3 === void 0 ? void 0 : (_route$route$split$fi4 = _route$route$split$fi3.replace(/-/g, " ")) === null || _route$route$split$fi4 === void 0 ? void 0 : (_route$route$split$fi5 = _route$route$split$fi4.replace(/###/g, "-")) === null || _route$route$split$fi5 === void 0 ? void 0 : _route$route$split$fi5.replace(/~/g, "/")), /*#__PURE__*/React__default.createElement(Breadcrumb1, {
+    className: "!bg-transparent !text-gray4",
+    routeClassName: "!text-textButton",
+    shopConfigStyle: shopConfigStyle,
+    route: route,
+    routes: routes,
+    Link: Link
+  })));
 };
 
 var About1 = function About1(props) {
@@ -12846,7 +13597,7 @@ var About1 = function About1(props) {
     data: data,
     shopConfigStyle: shopConfigStyle
   }) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-wrap",
+    className: "text-wrap ck-content",
     dangerouslySetInnerHTML: {
       __html: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAbout
     }
@@ -12871,7 +13622,7 @@ var About5 = function About5(props) {
     className: "grid grid-cols-1 lg:grid-cols-2 gap-12 mt-4 md:mt-6"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage,
-    className: "w-full hidden lg:block rounded-xl"
+    className: "w-full object-cover hidden lg:block rounded-xl"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "ck-content text-wrap",
     dangerouslySetInnerHTML: {
@@ -12879,7 +13630,7 @@ var About5 = function About5(props) {
     }
   }), /*#__PURE__*/React__default.createElement("img", {
     src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : _sectionData$2.srcImage,
-    className: "w-full block lg:hidden rounded-xl"
+    className: "w-full block object-cover lg:hidden rounded-xl"
   })));
 };
 
@@ -12958,62 +13709,6 @@ var Contact1 = function Contact1(props) {
   }) : null));
 };
 
-var Breadcrumb1 = function Breadcrumb1(props) {
-  var shopConfigStyle = props.shopConfigStyle,
-    route = props.route,
-    _props$routes = props.routes,
-    routes = _props$routes === void 0 ? [] : _props$routes,
-    _props$Link = props.Link,
-    Link = _props$Link === void 0 ? null : _props$Link;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
-    textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  var _useState = React.useState([]),
-    items = _useState[0],
-    setItems = _useState[1];
-  React.useEffect(function () {
-    getItems();
-  }, [route]);
-  var getItems = function getItems() {
-    var _route$route, _route$route$split, _route$route$split$fi, _items, _items2;
-    var items = route === null || route === void 0 ? void 0 : (_route$route = route.route) === null || _route$route === void 0 ? void 0 : (_route$route$split = _route$route.split("/")) === null || _route$route$split === void 0 ? void 0 : (_route$route$split$fi = _route$route$split.filter(function (e) {
-      return e === null || e === void 0 ? void 0 : e.length;
-    })) === null || _route$route$split$fi === void 0 ? void 0 : _route$route$split$fi.slice(0, 2);
-    items = (_items = items) === null || _items === void 0 ? void 0 : _items.map(function (e) {
-      var _e, _e$replace, _e$replace$replace, _e$replace$replace$re;
-      if (e === "product") e = "products";else if (e === "service") e = "services";
-      return (routes === null || routes === void 0 ? void 0 : routes.find(function (r) {
-        return (r === null || r === void 0 ? void 0 : r.name) === e;
-      })) || {
-        label: (_e = e) === null || _e === void 0 ? void 0 : (_e$replace = _e.replace(/-{3}/g, "###")) === null || _e$replace === void 0 ? void 0 : (_e$replace$replace = _e$replace.replace(/-/g, " ")) === null || _e$replace$replace === void 0 ? void 0 : (_e$replace$replace$re = _e$replace$replace.replace(/###/g, "-")) === null || _e$replace$replace$re === void 0 ? void 0 : _e$replace$replace$re.replace(/~/g, "/")
-      };
-    });
-    (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2.unshift({
-      name: "home",
-      label: "Trang chủ",
-      route: "/"
-    });
-    console.log(items);
-    setItems(items);
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " !my-6 flex gap-2 overflow-x-auto scroll-custom"
-  }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index,
-      className: "flex gap-2 flex-shrink-0"
-    }, index ? /*#__PURE__*/React__default.createElement("div", {
-      className: "text-gray4"
-    }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement(LinkToPage, {
-      Link: Link,
-      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || "#",
-      style: {
-        color: textHeading
-      }
-    }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.label));
-  }));
-};
-
 var getRegionApi = function getRegionApi(parentId) {
   return api({
     method: "get",
@@ -13131,96 +13826,6 @@ var RegionController = function RegionController(props) {
   };
 };
 
-var TextArea = React.forwardRef(function (props, ref) {
-  var _props$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
-    _props$rules = props.rules,
-    rules = _props$rules === void 0 ? [] : _props$rules,
-    _props$textareaClassN = props.textareaClassName,
-    textareaClassName = _props$textareaClassN === void 0 ? "" : _props$textareaClassN,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
-    _props$labelClassName = props.labelClassName,
-    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    _props$onChange = props.onChange,
-    onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
-  var _useState = React.useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = React.useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  React.useImperativeHandle(ref, function () {
-    return {
-      validateData: function validateData() {
-        return _validateData();
-      },
-      setValue: function setValue(text) {
-        return _setValue(text);
-      },
-      getValue: function getValue() {
-        return value;
-      },
-      setError: function setError(err) {
-        return _setError(err);
-      }
-    };
-  });
-  var _validateData = function _validateData() {
-    var count = 0;
-    for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
-      var _e$pattern;
-      var e = _step.value;
-      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      }
-    }
-    if (count) {
-      return false;
-    } else {
-      _setError('');
-      return true;
-    }
-  };
-  var handleOnChangeValue = function handleOnChangeValue(e) {
-    var value = e.target.value;
-    _setValue(value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(value);
-  };
-  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
-    return (e === null || e === void 0 ? void 0 : e.type) === "required";
-  }));
-  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-danger"
-  }, " *") : null;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "" + className
-  }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1 " + labelClassName
-  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("textarea", {
-    name: "",
-    id: "",
-    className: "focus:outline-none focus:ring-0 " + textareaClassName,
-    placeholder: placeholder,
-    value: value,
-    onChange: function onChange(e) {
-      handleOnChangeValue(e);
-    }
-  }), error ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-danger"
-  }, error) : null);
-});
-
 var FormCheckout = React.forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -14294,6 +14899,37 @@ var ShopHighlights7 = function ShopHighlights7(props) {
   }));
 };
 
+var ShopHighlights8 = function ShopHighlights8(props) {
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-6 md:gap-10"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-10"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
+      key: "kdf-" + index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col h-full gap-3"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "object-cover"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "text-2xl text-textBody"
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex-grow text-textBody leading-relaxed"
+    }, item === null || item === void 0 ? void 0 : item.description)));
+  })));
+};
+
 var VideoFull1 = function VideoFull1(props) {
   var _data$data, _data$data$;
   var shopConfigStyle = props.shopConfigStyle,
@@ -14865,6 +15501,7 @@ exports.BannerFull1 = BannerFull1;
 exports.BannerFull2 = BannerFull2;
 exports.Booking1 = Booking1;
 exports.BookingForm6 = BookingForm6;
+exports.BookingTable1 = BookingTable1;
 exports.Breadcrumb1 = Breadcrumb1;
 exports.Button = Button;
 exports.Carts1 = Carts1;
@@ -14873,6 +15510,7 @@ exports.CustomerRating1 = CustomerRating1;
 exports.CustomerRating10 = CustomerRating10;
 exports.CustomerRating5 = CustomerRating5;
 exports.CustomerRating6 = CustomerRating6;
+exports.CustomerRating8 = CustomerRating8;
 exports.DateTimePicker = DateTimePicker;
 exports.Employees1 = Employees1;
 exports.Features2 = Features2;
@@ -14880,9 +15518,11 @@ exports.Features3 = Features3;
 exports.Footer1 = Footer1;
 exports.Footer7 = Footer7;
 exports.Gallery1 = Gallery1;
+exports.Gallery2 = Gallery1$1;
 exports.Hero1 = Hero1;
 exports.Hero10 = Hero10;
-exports.Hero12 = Hero11;
+exports.Hero11 = Hero11;
+exports.Hero12 = Hero12;
 exports.Hero13 = Hero13;
 exports.Hero2 = Hero2;
 exports.Hero5 = Hero5;
@@ -14897,6 +15537,8 @@ exports.News1 = News1;
 exports.NewsDetail1 = NewsDetail1;
 exports.NewsHighlight1 = NewsHighlight1;
 exports.PageTitle1 = PageTitle1;
+exports.PageTitle2 = PageTitle2;
+exports.PageTitle3 = PageTitle3;
 exports.Partner1 = Partner1;
 exports.ProductCategory2 = ProductCategory2;
 exports.ProductDetail10 = ProductDetail10;
@@ -14911,12 +15553,14 @@ exports.ProductItem4 = ProductItem4;
 exports.ProductItem5 = ProductItem5;
 exports.ProductItem6 = ProductItem6;
 exports.ProductItem7 = ProductItem7;
+exports.ProductItem8 = ProductItem8;
 exports.ProductList5 = ProductList5;
 exports.ProductList7 = ProductList7;
 exports.ProductSale2 = ProductSale2;
 exports.ProductSearch1 = ProductSearch1;
 exports.Products10 = Products10;
 exports.Products11 = Products11;
+exports.Products12 = Products12;
 exports.Products2 = Products2;
 exports.Products3 = Products3;
 exports.Products9 = Products9;
@@ -14928,12 +15572,14 @@ exports.SearchProduct1 = SearchProduct1;
 exports.SectionTitle1 = SectionTitle1;
 exports.SectionTitle2 = SectionTitle2;
 exports.SectionTitle3 = SectionTitle3;
+exports.SectionTitle4 = SectionTitle4;
 exports.Select = Select$1;
 exports.ServiceDetail1 = ServiceDetail1;
 exports.ShopHighlights2 = ShopHighlights2;
 exports.ShopHighlights5 = ShopHighlights5;
 exports.ShopHighlights6 = ShopHighlights6;
 exports.ShopHighlights7 = ShopHighlights7;
+exports.ShopHighlights8 = ShopHighlights8;
 exports.TextArea = TextArea;
 exports.TreatmentDetail1 = TreatmentDetail1;
 exports.TreatmentItem1 = TreatmentItem1;