function AfrobeatLoginForm({ logoSrc }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-yellow-400 to-red-600", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Afroverse logo prominently placed with Afrobeat elements", className: "w-[200px] h-[200px] mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "w-[300px] bg-[#222] p-6 rounded-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white font-bold mb-2 font-crimson-text", htmlFor: "email", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Email:"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded mb-4 text-black", type: "email", name: "email", id: "email", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-white font-bold mb-2 font-crimson-text", htmlFor: "password", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Password:"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded mb-6 text-black", type: "password", name: "password", id: "password", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-full mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google text-white text-2xl", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-white text-2xl", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-white text-2xl", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, ` body { background-image: url('/patterns/african-pattern.png'); background-repeat: no-repeat; background-size: cover; background-blend-mode: overlay; } `)); } function AfrobeatLoginFormStory() { const logoSrc = "/images/afrobeat-logo.png"; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AfrobeatLoginForm, { logoSrc: logoSrc, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function MainComponent({ logoSrc }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-yellow-400 to-red-600", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Afroverse logo prominently placed with Afrobeat elements", className: "w-[200px] h-[200px] mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "w-[300px] bg-[#222] p-6 rounded-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white font-bold mb-2 font-crimson-text", htmlFor: "email", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Email:"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded mb-4 text-black", type: "email", name: "email", id: "email", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-white font-bold mb-2 font-crimson-text", htmlFor: "password", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Password:"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded mb-6 text-black", type: "password", name: "password", id: "password", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-full mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google text-white text-2xl", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-white text-2xl", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-white text-2xl", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, ` body { background-image: url('/patterns/african-pattern.png'); background-repeat: no-repeat; background-size: cover; background-blend-mode: overlay; } `)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { logoSrc: "logo.png", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); }