function UserAuthenticationForm({ usernamePlaceholder, passwordPlaceholder, buttonLabel }) { return /*#__PURE__*/ React.createElement("section", { id: "login", className: "w-full min-h-screen bg-[#ffffff] flex justify-center items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: usernamePlaceholder, name: "username", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", type: "password", placeholder: passwordPlaceholder, name: "password", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "shadow bg-blue-500 hover:bg-blue-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded", type: "button", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, buttonLabel)))); } function UserAuthenticationFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserAuthenticationForm, { usernamePlaceholder: "Username", passwordPlaceholder: "Password", buttonLabel: "Login", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function RobotoNavigationMenu({ labels }) { return /*#__PURE__*/ React.createElement("ul", { className: "flex justify-around", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, labels.map((label)=>/*#__PURE__*/ React.createElement("li", { className: "font-roboto text-[#121212]", key: label, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, label))); } function RobotoNavigationMenuStory() { const labels = [ "Home", "About", "Portfolio", "Contact" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RobotoNavigationMenu, { labels: labels, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const labels = [ "Home", "About", "Portfolio", "Contact" ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#ffffff] shadow-md p-4 sticky top-0 z-50", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(RobotoNavigationMenu, { labels: labels, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "flex-1", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "home", className: "w-full min-h-screen bg-[#f0f0f0] flex justify-center items-center", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-4xl mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "Welcome to My Profile"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] max-w-2xl text-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "Explore my portfolio and get to know more about my work and skills."))), /*#__PURE__*/ React.createElement("section", { id: "about", className: "w-full min-h-screen bg-[#ffffff] flex justify-center items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl text-center", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] text-3xl mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "About Me"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "I am a software developer with a passion for creating beautiful and functional applications. With years of experience in various programming languages and frameworks, I strive to push the boundaries of what technology can achieve."))), /*#__PURE__*/ React.createElement("section", { id: "portfolio", className: "w-full min-h-screen bg-[#f0f0f0] flex justify-center items-center flex-wrap", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center max-w-4xl mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] text-3xl mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Portfolio"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Check out some of my projects below.")), /*#__PURE__*/ React.createElement("div", { className: "w-[90%] sm:w-[400px] h-[300px] m-4 bg-[#ffffff] shadow-lg flex justify-center items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Project 1")), /*#__PURE__*/ React.createElement("div", { className: "w-[90%] sm:w-[400px] h-[300px] m-4 bg-[#ffffff] shadow-lg flex justify-center items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Project 2")), /*#__PURE__*/ React.createElement("div", { className: "w-[90%] sm:w-[400px] h-[300px] m-4 bg-[#ffffff] shadow-lg flex justify-center items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Project 3"))), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "w-full min-h-screen bg-[#ffffff] flex justify-center items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-[#f0f0f0] p-8 shadow-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] text-3xl mb-4 text-center", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Contact Me"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:border-gray-500", type: "text", placeholder: "Name", name: "name", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500", type: "email", placeholder: "Email", name: "email", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 h-48 leading-tight focus:outline-none focus:border-gray-500", placeholder: "Message", name: "message", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "shadow bg-blue-500 hover:bg-blue-700 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded", type: "button", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Send"))))), /*#__PURE__*/ React.createElement("section", { id: "login", className: "w-full min-h-screen bg-[#f0f0f0] flex justify-center items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(UserAuthenticationForm, { usernamePlaceholder: "Username", passwordPlaceholder: "Password", buttonLabel: "Login", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })))); }