function MainComponent() { const [showOwnerPlatform, setShowOwnerPlatform] = React.useState(false); const togglePlatform = ()=>setShowOwnerPlatform(!showOwnerPlatform); const perfumes = [ { id: 1, name: 'Eau de Toilette', price: '50.00', img: 'perfume_1.jpg', description: 'A light, fresh fragrance' }, { id: 2, name: 'Eau de Parfum', price: '75.00', img: 'perfume_2.jpg', description: 'A robust and long-lasting scent' }, { id: 3, name: 'Cologne', price: '35.00', img: 'perfume_3.jpg', description: 'A clean and crisp aroma' } ]; const ownerPlatformContent = /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f8f8] p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Owner's Platform"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#007BFF] text-white rounded hover:bg-[#0056b3] transition duration-300", onClick: togglePlatform, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Close Platform")); const shopContent = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl text-[#121212] mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Exclusive Perfumes"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, perfumes.map((perfume)=>/*#__PURE__*/ React.createElement("div", { className: "border border-[#ddd] rounded-lg overflow-hidden", key: perfume.id, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: perfume.img, alt: `Bottle of ${perfume.name}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, perfume.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", "aria-label": `Description of ${perfume.name}`, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, perfume.description), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "$", perfume.price), /*#__PURE__*/ React.createElement("button", { className: "mt-3 w-full py-2 bg-[#007BFF] text-white font-roboto rounded hover:bg-[#0056b3] transition duration-300", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Add to Cart"))))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#32CD32] text-white rounded hover:bg-[#228B22] transition duration-300 mt-10", onClick: togglePlatform, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "Owner's Platform")); return /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, showOwnerPlatform ? ownerPlatformContent : shopContent, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-enter { animation: fadeIn 0.5s ease forwards; } `)); }