s-platform-landing-section 0.1.32 → 0.1.34

package/dist/index.modern.js

@@ -1,25 +1,25 @@
 import React__default, { useState, useRef, useEffect, forwardRef, useImperativeHandle, createElement, memo } from 'react';
 import { IoCartOutline, IoChevronDownOutline, IoPersonCircleOutline, IoLogOutOutline, IoInformationCircleOutline, IoBagOutline, IoSearchOutline, IoChevronBackOutline, IoChevronForwardOutline } from 'react-icons/io5';
-import { FaUserCircle, FaRegNewspaper, FaFacebookF, FaFacebookMessenger, FaBoxOpen, FaAngleUp, FaAngleDown, FaCheckCircle, FaArrowRight, FaArrowLeft, FaPhoneAlt } from 'react-icons/fa';
+import { FaUserCircle, FaRegNewspaper, FaFacebookF, FaFacebookMessenger, FaBoxOpen, FaAngleUp, FaAngleDown, FaCheckCircle, FaArrowRight, FaArrowLeft, FaCcVisa, FaYoutube, FaTiktok, FaPhoneAlt } from 'react-icons/fa';
 import { FiMenu, FiLogIn, FiHome, FiBox, FiPhoneCall, FiShoppingCart, FiSearch } from 'react-icons/fi';
 import { RxCross2 } from 'react-icons/rx';
 import { PiHandHeartBold } from 'react-icons/pi';
 import { TbCategory } from 'react-icons/tb';
-import { SiZalo, SiVisa } from 'react-icons/si';
-import { IoIosStar, IoIosArrowBack, IoIosArrowForward, IoMdCheckmark, IoIosHeartEmpty } from 'react-icons/io';
+import { SiZalo } from 'react-icons/si';
+import { IoIosStar, IoIosArrowBack, IoIosArrowForward, IoMdCheckmark, IoIosHeartEmpty, IoMdCheckmarkCircleOutline } from 'react-icons/io';
 import { FaMinus, FaRegEyeSlash, FaPlus, FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
 import 'react-icons/ci';
 import { BsCurrencyDollar } from 'react-icons/bs';
-import { LuSearch, LuShoppingCart } from 'react-icons/lu';
+import { LuSearch, LuShoppingCart, LuShoppingBag } from 'react-icons/lu';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import { AiOutlineShoppingCart, AiOutlinePhone } from 'react-icons/ai';
+import { AiOutlineShoppingCart, AiOutlineInfoCircle, AiOutlinePhone } from 'react-icons/ai';
 import { GoCreditCard, GoClock } from 'react-icons/go';
+import { RiMessengerFill, RiDoubleQuotesL, RiDeleteBin7Line } from 'react-icons/ri';
 import { HiOutlineLocationMarker, HiOutlineArrowNarrowLeft, HiOutlineArrowNarrowRight } from 'react-icons/hi';
-import { RiDeleteBin7Line } from 'react-icons/ri';
 import { GiNewspaper } from 'react-icons/gi';
 
 var Button = function Button(props) {
@@ -425,18 +425,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) {
@@ -496,11 +495,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() {
@@ -528,12 +526,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() {
@@ -727,11 +725,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) {
@@ -789,11 +787,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() {
@@ -821,12 +819,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() {
@@ -962,6 +960,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 = forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -1270,7 +1286,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,
@@ -1287,7 +1303,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,
@@ -1299,7 +1317,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;
@@ -1394,7 +1456,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",
@@ -7499,7 +7561,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) {
@@ -7550,7 +7612,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({
@@ -7645,9 +7707,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;
@@ -8061,7 +8120,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 = useState(),
     displayPrice = _useState[0],
     setDisplayPrice = _useState[1];
@@ -8096,12 +8159,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) {
@@ -10092,6 +10155,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,
@@ -10151,7 +10247,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, {
@@ -10160,14 +10256,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
   }));
 };
@@ -10430,7 +10526,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() {
@@ -10767,6 +10863,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 = 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,
@@ -11020,7 +11190,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
@@ -11811,57 +11981,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 = 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 = useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  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 = 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, {
+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 = useState(defaultValue),
+    listProductSelected = _useState[0],
+    setListProductSelected = _useState[1];
+  var inputNameRef = useRef(null);
+  var inputDateRef = useRef(null);
+  var inputPhoneNumberRef = useRef(null);
+  var inputQuantityRef = useRef(null);
+  var _useState2 = useState(false),
+    isOpenPopup = _useState2[0],
+    setIsOpenPopup = _useState2[1];
+  var _useState3 = 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(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 = 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,
@@ -12151,6 +12618,101 @@ function SvgVnpay(props) {
   }))));
 }
 
+var dataFake = [{
+  title: "Đa dạng thanh toán",
+  data: [{
+    svgImage: "",
+    srcImage: /*#__PURE__*/React__default.createElement(FaArrowsRotate, null),
+    label: "Chuyển khoản",
+    link: ""
+  }, {
+    svgImage: "",
+    srcImage: /*#__PURE__*/React__default.createElement(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(GoCreditCard, null),
+    svgImage: "",
+    label: "Thẻ ATM",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(FaCcVisa, null),
+    svgImage: "",
+    label: "Thẻ Quốc tế",
+    link: ""
+  }]
+}, {
+  title: "Thông tin hữu ích",
+  data: [{
+    srcImage: /*#__PURE__*/React__default.createElement(IoMdCheckmarkCircleOutline, null),
+    svgImage: "",
+    label: "Chính sách bảo hành",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(FaArrowsRotate, null),
+    svgImage: "",
+    label: "Chính sách đổi trả",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(LuShoppingBag, null),
+    svgImage: "",
+    label: "Hướng dẫn mua hàng online",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(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(FaFacebookF, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Facebook",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(FaYoutube, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Youtube",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(FaTiktok, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Tiktok",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(RiMessengerFill, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Messenger",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(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,
@@ -12164,26 +12726,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(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(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(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(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);
+    })));
   })));
 };
 
@@ -12229,11 +12788,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
     }
@@ -12374,11 +12932,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
     }
@@ -12638,6 +13195,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(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(RiDoubleQuotesL, {
+      className: " mt-auto text-gray3",
+      size: 36
+    })));
+  }))));
+};
+
 var CustomerRating10 = function CustomerRating10(props) {
   var _data$data;
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -12812,7 +13409,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;
@@ -12828,7 +13483,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 = useState([]),
+    items = _useState[0],
+    setItems = _useState[1];
+  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) {
@@ -12843,7 +13594,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
     }
@@ -12868,7 +13619,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: {
@@ -12876,7 +13627,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"
   })));
 };
 
@@ -12955,62 +13706,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 = useState([]),
-    items = _useState[0],
-    setItems = _useState[1];
-  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",
@@ -13128,96 +13823,6 @@ var RegionController = function RegionController(props) {
   };
 };
 
-var TextArea = 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 = useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  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 = forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -14291,6 +14896,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,
@@ -14850,5 +15486,5 @@ var NewsDetail1 = function NewsDetail1(props) {
   }))));
 };
 
-export { About1, About5, About6, Address1, Banner1, Banner2, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductDetail11, ProductHighlight1, ProductHot1, ProductHot3, ProductImage, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products11, Products2, Products3, Products9, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
+export { About1, About5, About6, Address1, Banner1, Banner2, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, BookingTable1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, CustomerRating8, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Gallery1$1 as Gallery2, Hero1, Hero10, Hero11, Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, PageTitle2, PageTitle3, Partner1, ProductCategory2, ProductDetail10, ProductDetail11, ProductHighlight1, ProductHot1, ProductHot3, ProductImage, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductItem8, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products11, Products12, Products2, Products3, Products9, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, SectionTitle4, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, ShopHighlights8, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
 //# sourceMappingURL=index.modern.js.map