function Button({ text, keyboardCommand, highlighted = false, onClick }) { const baseClasses = "inline-block px-4 py-2 rounded-lg border text-sm font-medium transition-colors duration-200 ease-in-out"; const regularClasses = "border-[#E2E2E1] text-[#191919]"; const highlightedClasses = "bg-[#6567EF] border-[#6567EF] text-white"; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: `${baseClasses} ${highlighted ? highlightedClasses : regularClasses}`, __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, text, keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: `ml-2 px-1.5 py-0.5 text-xs rounded ${highlighted ? "bg-[#7A7CF0] text-white" : "bg-[#F6F6F6] text-[#8C8C8C]"}`, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start space-y-4 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Regular Button", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "With Keyboard Command", keyboardCommand: "Ctrl+S", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Highlighted Button", highlighted: true, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Highlighted with Command", keyboardCommand: "Cmd+P", highlighted: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function VerticalSidePanel({ icons, activeIcon, avatarSrc, logoSrc = "https://cdn-icons-png.flaticon.com/512/5149/5149019.png" }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen w-20 bg-white border-r border-gray-200", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Company logo", className: "w-10 h-10", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col items-center space-y-4 py-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, icons.map((icon, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `p-2 rounded-md ${icon === activeIcon ? "bg-gray-200" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} text-gray-600`, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: avatarSrc, alt: "User avatar", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }))); } function VerticalSidePanelStory() { const icons = [ "fa-comment", "fa-user", "fa-bell", "fa-cog" ]; const activeIcon = "fa-comment"; const avatarSrc = "/path/to/avatar.jpg"; return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VerticalSidePanel, { icons: icons, activeIcon: activeIcon, avatarSrc: avatarSrc, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function Button2({ text, keyboardCommand, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "inline-flex items-center justify-center px-4 py-2 bg-[#1E1E1E] text-white border border-[#2A2A2A] rounded-lg hover:bg-[#2A2A2A] transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, text), keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-1.5 py-0.5 text-xs bg-[#2A2A2A] text-white rounded", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, keyboardCommand)); } function Button2Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button2, { text: "Click me", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button2, { text: "Save", keyboardCommand: "⌘S", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button2, { text: "Open", keyboardCommand: "⌘O", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function NewComponent({ logoSrc, altText = "Company logo", size = "w-10 h-10" }) { return /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: altText, className: size, __source: { fileName: "", lineNumber: 2, columnNumber: 10 }, __self: this }); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { logoSrc: "https://cdn-icons-png.flaticon.com/512/5149/5149019.png", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { logoSrc: "https://cdn-icons-png.flaticon.com/512/5149/5149019.png", altText: "Alternate company logo", size: "w-14 h-14", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "font-inter", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white border-b border-[#E4E7EA]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 flex items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "h-8 w-auto", src: "https://cdn-icons-png.flaticon.com/512/5149/5149019.png", alt: "SkyTask logo", __source: { fileName: "", lineNumber: 9, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-xl font-medium text-[#191919]", __source: { fileName: "", lineNumber: 10, columnNumber: 17 }, __self: this }, "SkyTask"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Log in", onClick: ()=>{}, __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Sign up", highlighted: true, onClick: ()=>{}, __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("header", { className: "bg-white py-16", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 mb-8 md:mb-0", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-medium mb-4 text-[#191919]", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "Elevate Your Workflow with SkyTask"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-8 text-[#5D646C]", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Cloud-Based Task Management for Seamless Productivity"), /*#__PURE__*/ React.createElement(Button, { text: "Start Free Trial", highlighted: true, onClick: ()=>{}, __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://images.pexels.com/photos/123335/pexels-photo-123335.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Cloudy sky representing cloud-based task management", className: "w-full h-auto", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "py-16 px-4 md:px-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "max-w-7xl mx-auto mb-16", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-medium mb-8 text-center text-[#191919]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Why Choose SkyTask?"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(FeatureCard, { icon: "fa-cloud", title: "Cloud-Powered Efficiency", description: "Access your tasks from anywhere, anytime, with our robust cloud infrastructure.", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(FeatureCard, { icon: "fa-users", title: "Team Synergy", description: "Collaborate seamlessly with your team, assigning tasks and tracking progress in real-time.", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(FeatureCard, { icon: "fa-chart-line", title: "Insightful Analytics", description: "Gain valuable insights into your productivity with our comprehensive analytics dashboard.", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-medium mb-8 text-center text-[#191919]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Ready to skyrocket your productivity?"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Get Started Now", highlighted: true, onClick: ()=>{}, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#F6F6F6] py-8 px-4 mt-16", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto text-center text-[#5D646C]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "© 2024 SkyTask. All rights reserved.")))); } function FeatureCard({ icon, title, description }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 border border-[#E4E7EA]", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} text-4xl text-[#6567EF] mb-4`, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-2 text-[#191919]", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-[#5D646C]", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, description)); }