function MainComponent() { const [selectedDesigner, setSelectedDesigner] = React.useState(0); const randomColor = ()=>`hsl(${Math.random() * 360}, 70%, 60%)`; const designers = [ { id: 1, name: "Alice Mode", photo: "/designers/alice-mode.jpg", focusItem: "/items/alice-dress.jpg" }, { id: 2, name: "Bob Tailor", photo: "/designers/bob-tailor.jpg", focusItem: "/items/bob-suit.jpg" }, { id: 3, name: "Cindy Craft", photo: "/designers/cindy-craft.jpg", focusItem: "/items/cindy-skirt.jpg" } ]; const designerCardStyle = (selected)=>({ backgroundColor: selected ? randomColor() : 'transparent', transition: 'all 0.5s', margin: '10px' }); const inputStyle = { outline: 'none', padding: '10px', border: '1px solid #00FFFF', backgroundColor: 'rgba(0,0,0,0.8)', color: '#FFFFFF', fontFamily: 'font-roboto', marginBottom: '20px', width: '300px' }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000] min-h-screen flex flex-col items-center p-5 text-[#FFFFFF]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full flex justify-between items-center p-5", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-impact text-2xl text-[#FF00FF]", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Fashion Edge"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#FF00FF] rounded font-bebas-neue", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#FF00FF] rounded font-bebas-neue", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Trends"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#FF00FF] rounded font-bebas-neue", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Designers")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 bg-[#000000] border-b-2 border-[#FF00FF]", placeholder: "Search", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#FF00FF] rounded font-bebas-neue", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 39, columnNumber: 72 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "w-full mt-10 flex justify-center", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[60%] rounded", src: "/fashion-banner.jpg", alt: "Bold Fashion Banner", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center my-5", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, designers.map((designer)=>/*#__PURE__*/ React.createElement("div", { key: designer.id, className: "w-[300px] h-[300px] m-2", onMouseEnter: ()=>setSelectedDesigner(designer.id), onMouseLeave: ()=>setSelectedDesigner(0), style: designerCardStyle(selectedDesigner === designer.id), __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[200px] h-[200px] m-auto", src: designer.photo, alt: `Profile of ${designer.name}`, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center font-bebas-neue", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Designer Spotlight: ", designer.name)))), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center m-5", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mb-2 font-bold font-bebas-neue text-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Subscribe for Updates"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Enter your email", style: inputStyle, __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-3 bg-[#FF00FF] rounded text-white font-bebas-neue animate-pulse", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Subscribe"))); }