function NavigationBar({ onLogClick }) { const [isMenuOpen, setIsMenuOpen] = useState(false); return /*#__PURE__*/ React.createElement("nav", { className: "bg-[#f8f9fa] p-4 shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-8", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Cycle List"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Payment"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Maps"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Weather")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onLogClick, className: "bg-[#007bff] text-white font-roboto px-6 py-2 rounded-lg hover:bg-[#0056b3] transition-colors duration-300", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Login / Sign up")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "md:hidden text-[#333]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-xl", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden mt-4 space-y-4 p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Cycle List"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Payment"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Maps"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-[#333] font-roboto hover:text-[#007bff]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Weather"), /*#__PURE__*/ React.createElement("button", { onClick: onLogClick, className: "w-full bg-[#007bff] text-white font-roboto px-6 py-2 rounded-lg hover:bg-[#0056b3] transition-colors duration-300", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Login / Sign up"))); } function NavigationBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { onLogClick: ()=>alert("Login clicked"), __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this })); } function PaymentForm({ deposit = 1000, hourlyRate = 49 }) { const [hours, setHours] = useState(1); const [formData, setFormData] = useState({ cardNumber: "", expiryDate: "", cvv: "", name: "" }); const total = deposit + hourlyRate * hours; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-6 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Payment Details"), /*#__PURE__*/ React.createElement("div", { className: "mb-6 bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Deposit: ₹", deposit), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 my-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Hours:"), /*#__PURE__*/ React.createElement("select", { value: hours, onChange: (e)=>setHours(Number(e.target.value)), className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4, 5, 6, 7, 8 ].map((h)=>/*#__PURE__*/ React.createElement("option", { key: h, value: h, __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, h)))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Rate: ₹", hourlyRate, "/hour"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold mt-2 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Total: ₹", total)), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Cardholder Name", value: formData.name, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2", required: true, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardNumber", placeholder: "Card Number", value: formData.cardNumber, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2", maxLength: "16", required: true, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "expiryDate", placeholder: "MM/YY", value: formData.expiryDate, onChange: handleInputChange, className: "px-4 py-2 border rounded-lg focus:outline-none focus:ring-2", maxLength: "5", required: true, __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cvv", placeholder: "CVV", value: formData.cvv, onChange: handleInputChange, className: "px-4 py-2 border rounded-lg focus:outline-none focus:ring-2", maxLength: "3", required: true, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white py-2 rounded-lg mt-6 hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "Pay ₹", total))); } function PaymentFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen p-8", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PaymentForm, { __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this })); } function CycleCard({ image, model, condition, hourlyRate }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md w-[300px] overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image || "/cycle1.jpg", alt: "Rental bicycle", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, model || "Mountain Bike"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Condition: ", condition || "Excellent"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg font-bold text-[#2563eb] mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "₹", hourlyRate || "49", "/hour"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#2563eb] text-white font-roboto py-2 px-4 rounded-lg w-full hover:bg-[#1d4ed8]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Book Now"))); } function CycleCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex gap-4 flex-wrap", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CycleCard, { image: "/cycle1.jpg", model: "Mountain Explorer", condition: "Excellent", hourlyRate: "49", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CycleCard, { image: "/cycle2.jpg", model: "City Cruiser", condition: "Good", hourlyRate: "39", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CycleCard, { image: "/cycle3.jpg", model: "Sport Rider", condition: "Like New", hourlyRate: "59", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isHovered, setIsHovered] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#1a1a1a] to-[#2d2d2d]", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center py-20 px-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-6xl md:text-8xl font-bold text-white mb-8 tracking-wider ${isHovered ? "scale-105" : "scale-100"} transition-transform duration-300`, onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "CYPICK"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] hover:bg-[#45a049] text-white font-bold text-xl py-4 px-8 rounded-lg transform hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Get Started")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, ` @keyframes logoFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } `)); }