function ProductImageDisplay({ productImage, productName }) { return /*#__PURE__*/ React.createElement("img", { src: productImage, alt: `Image of ${productName}`, className: "w-full h-[200px] object-cover mb-4 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ProductImageDisplayStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProductImageDisplay, { productImage: "/path/to/product1.jpg", productName: "Product 1", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProductImageDisplay, { productImage: "/path/to/product2.jpg", productName: "Product 2", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProductImageDisplay, { productImage: "/path/to/product3.jpg", productName: "Product 3", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent({ title, description, productName, productImage, productPrice }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-4 font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ProductImageDisplay, { productImage: productImage, productName: productName, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, productName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 text-lg font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, productPrice), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full py-2 bg-blue-500 text-white font-roboto rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Add to Cart"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Exclusive Offer", description: "Get the best products at unbeatable prices!", productName: "Comfortable Chair", productImage: "/images/comfortable-chair.jpg", productPrice: "$149.99", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { title: "Limited Time Deal", description: "Hurry up before the stock runs out!", productName: "Stylish Lamp", productImage: "/images/stylish-lamp.jpg", productPrice: "$39.99", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); }