function NavBar() { return /*#__PURE__*/ React.createElement("nav", { className: "bg-[#008080] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-2xl font-poppins", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Logo")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-white hover:text-[#e6e6e6] font-poppins", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-[#e6e6e6] font-poppins", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-[#e6e6e6] font-poppins", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-[#e6e6e6] font-poppins", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/login", className: "bg-white text-[#008080] px-4 py-2 rounded hover:bg-[#e6e6e6] font-poppins", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("a", { href: "/signup", className: "bg-white text-[#008080] px-4 py-2 rounded hover:bg-[#e6e6e6] font-poppins", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Sign Up")), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-2xl", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }))))); } function NavBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavBar, { __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function PricingCard({ title, price, features, isHighlighted }) { return /*#__PURE__*/ React.createElement("div", { className: `w-[300px] rounded-lg shadow-xl p-6 ${isHighlighted ? "bg-[#FFD700] border-[#008080]" : "bg-white border-[#FFD700]"} border-2`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-2xl font-bold mb-4 text-center font-roboto ${isHighlighted ? "text-[#008080]" : "text-[#FFD700]"}`, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "$", price), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "/month")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3 mb-6", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, features.map((feature, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2 text-[#008080]", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, feature)))), /*#__PURE__*/ React.createElement("button", { className: `w-full py-2 px-4 rounded-md font-semibold transition-colors ${isHighlighted ? "bg-[#008080] text-white hover:bg-[#006666]" : "bg-[#FFD700] text-[#008080] hover:bg-[#FFC700]"}`, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Subscribe")); } function PricingCardStory() { const basicFeatures = [ "Basic Access", "1 User", "Support 9-5" ]; const proFeatures = [ "Full Access", "Unlimited Users", "24/7 Support", "Premium Features" ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6 items-center justify-center p-8", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PricingCard, { title: "Basic Plan", price: 29, features: basicFeatures, isHighlighted: false, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PricingCard, { title: "Pro Plan", price: 99, features: proFeatures, isHighlighted: true, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); } function Footer() { const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [file, setFile] = useState(null); const [image, setImage] = useState(null); const onSubmit = useCallback(async ()=>{ const { url, mimeType, error } = await upload({ file }); if (error) { setError(error); return; } if (mimeType.startsWith("image/")) { setImage(imageUrl); } }, [ file ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>{ if (e.target.files) { setFile(e.target.files[0]); } }, __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 21 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: onSubmit, disabled: loading, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, loading ? "Uploading..." : "Upload Image"), image && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Uploaded preview", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#008080] text-white py-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Main Pages"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/services", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "Services")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/blog", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, "Blog")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Contact Info"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone mr-2", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }), "+1 (555) 123-4567"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope mr-2", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }), "info@example.com"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }), "123 Main St, City, Country"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Follow Us"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-2xl hover:text-gray-300", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-2xl hover:text-gray-300", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-2xl hover:text-gray-300", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-2xl hover:text-gray-300", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this })))))))); } function FooterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this })); } function MainComponent() { const [formData, setFormData] = useState({ restaurantName: "", email: "", password: "", confirmation: "" }); const [error, setError] = useState(""); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); if (formData.password !== formData.confirmation) { setError("Passwords do not match"); return; } setError(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavBar, { __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow bg-gray-50 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-8 mx-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-3xl font-extrabold text-gray-900 font-poppins", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Sign up your restaurant")), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm space-y-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "restaurantName", type: "text", required: true, className: "appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "Restaurant Name", value: formData.restaurantName, onChange: handleChange, __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", required: true, className: "appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "Email address", value: formData.email, onChange: handleChange, __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", required: true, className: "appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "Password", value: formData.password, onChange: handleChange, __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "confirmation", type: "password", required: true, className: "appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "Confirm Password", value: formData.confirmation, onChange: handleChange, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }))), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm text-center", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Sign up"))))), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this })); }