function MainComponent() { const products = [ { id: 1, name: "Quartz Countertop", price: "From $120", imgPath: "./images/quartz-countertop.jpg", alt: "Quartz kitchen countertop" }, { id: 2, name: "Granite Countertop", price: "From $140", imgPath: "./images/granite-countertop.jpg", alt: "Granite kitchen countertop" }, { id: 3, name: "Marble Countertop", price: "From $200", imgPath: "./images/marble-countertop.jpg", alt: "Marble kitchen countertop" } ]; const colors = [ { id: 1, color: "#847a7a", imgPath: "./images/countertop-color1.jpg", alt: "Light grey countertop sample" }, { id: 2, color: "#5b4b4b", imgPath: "./images/countertop-color2.jpg", alt: "Dark grey countertop sample" }, { id: 3, color: "#3e2723", imgPath: "./images/countertop-color3.jpg", alt: "Brown countertop sample" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#343a40] mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Artificial Stone Products"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "border border-gray-300 p-4 rounded-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.imgPath, alt: product.alt, className: "w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto my-2", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#6c757d]", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, product.price))))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 mt-10 md:mt-0 md:ml-10", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#343a40] mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Customize Your Countertop"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 p-4 rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./images/kitchen-project.jpg", alt: "Kitchen project for countertop color customization", className: "w-full h-[200px] md:h-[400px] object-cover rounded-md mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, colors.map((color)=>/*#__PURE__*/ React.createElement("img", { key: color.id, src: color.imgPath, alt: color.alt, className: "w-10 h-10 rounded-full", style: { borderWidth: "2px", borderColor: color.color }, __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this })))))); }