function RibbonImageGallery({ images }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-[${image.bgColor}] p-4 w-[220px] h-[220px] flex items-center justify-center`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.src, alt: image.alt, className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })))); } function RibbonImageGalleryStory() { const images = [ { src: "/path/to/ribbons1.jpg", alt: "Image of ribbons", bgColor: "#faede5" }, { src: "/path/to/ribbons2.jpg", alt: "Another image of ribbons", bgColor: "#e7b464" }, { src: "/path/to/ribbons3.jpg", alt: "A different image of ribbons", bgColor: "#e49480" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RibbonImageGallery, { images: images, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const images = [ { src: "/path/to/ribbons1.jpg", alt: "Image of ribbons", bgColor: "#faede5" }, { src: "/path/to/ribbons2.jpg", alt: "Another image of ribbons", bgColor: "#e7b464" }, { src: "/path/to/ribbons3.jpg", alt: "A different image of ribbons", bgColor: "#e49480" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-white p-8", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl text-[#a22a25] mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "Aniversário de 1 Ano da Maria Luiza"), /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-3xl text-[#7c7758] mb-8", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Meus Primeiros 365 Laços"), /*#__PURE__*/ React.createElement(RibbonImageGallery, { images: images, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mt-8", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ae6d3b] p-6 w-[220px] h-[300px] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl text-[#faede5]", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Detalhes do Evento"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#faede5] text-center mt-4", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Data: 25 de Dezembro", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 16, columnNumber: 98 }, __self: this }), "Horário: 16:00")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#7a8ea5] p-6 w-[220px] h-[300px] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl text-[#e4e4dd]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Local"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#e4e4dd] text-center mt-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Rua das Flores, 123, Cidade")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ad544b] p-6 w-[220px] h-[300px] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl text-[#e7b464]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Contato"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#e7b464] text-center mt-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Telefone: (12) 3456-7890")))); }