function MainComponent({ apps, onCompare, onFilter, onSearch, onReview }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1A73E8] text-white py-4 px-8", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Security SaaS Compare"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:underline", __source: { fileName: "", lineNumber: 9, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/apps", className: "hover:underline", __source: { fileName: "", lineNumber: 10, columnNumber: 19 }, __self: this }, "App List")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/compare", className: "hover:underline", __source: { fileName: "", lineNumber: 11, columnNumber: 19 }, __self: this }, "Comparison Tool")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/reviews", className: "hover:underline", __source: { fileName: "", lineNumber: 12, columnNumber: 19 }, __self: this }, "Reviews")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "hover:underline", __source: { fileName: "", lineNumber: 13, columnNumber: 19 }, __self: this }, "Contact Us")))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "rounded-full py-2 px-4 w-[300px] text-[#202124]", placeholder: "Search apps...", onChange: onSearch, __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute right-0 top-0 bottom-0 bg-[#F1F3F4] text-[#202124] rounded-r-full px-4 font-medium", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Search")))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto my-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Featured Apps"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, apps.slice(0, 3).map((app)=>/*#__PURE__*/ React.createElement("div", { key: app.id, className: "bg-white shadow rounded-lg p-6", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: app.logo, alt: `${app.name} logo`, className: "h-[50px] mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, app.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#202124] mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, app.description), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1A73E8] hover:bg-[#1669D1] text-white font-medium py-2 px-4 rounded", onClick: ()=>onCompare(app), __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Compare"))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "All Apps"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "filter", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Filter by:"), /*#__PURE__*/ React.createElement("select", { id: "filter", name: "filter", className: "w-[200px] py-2 px-4 border rounded", onChange: onFilter, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "All"), /*#__PURE__*/ React.createElement("option", { value: "price", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("option", { value: "rating", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Rating"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, apps.map((app)=>/*#__PURE__*/ React.createElement("div", { key: app.id, className: "bg-white shadow rounded-lg p-6", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: app.logo, alt: `${app.name} logo`, className: "h-[50px] mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, app.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#202124] mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, app.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, "$", app.price, "/mo"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, app.rating, "/5")), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#1A73E8] hover:bg-[#1669D1] text-white font-medium py-2 px-4 rounded", onClick: ()=>onCompare(app), __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "Compare")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#F1F3F4] py-8", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Security SaaS Compare"), /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/sitemap", className: "hover:underline", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, "Sitemap")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/privacy", className: "hover:underline", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, "Privacy Policy")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/terms", className: "hover:underline", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "Terms of Use")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-0", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Connect With Us"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://facebook.com", "aria-label": "Facebook", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-square text-2xl text-[#1877F2]", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com", "aria-label": "Twitter", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter-square text-2xl text-[#1DA1F2]", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://linkedin.com", "aria-label": "LinkedIn", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin text-2xl text-[#0A66C2]", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }))))))); } function StoryComponent() { const apps = [ { id: 1, name: 'GuardDog', description: 'Comprehensive security management for enterprises', logo: '/images/guarddog.png', price: 99, rating: 4.5 }, { id: 2, name: 'SentryPro', description: 'AI-powered threat detection and response', logo: '/images/sentrypro.png', price: 149, rating: 4.8 }, { id: 3, name: 'VanguardShield', description: 'End-to-end security orchestration platform', logo: '/images/vanguardshield.png', price: 199, rating: 4.9 }, { id: 4, name: 'FortressX', description: 'Automated compliance and risk management', logo: '/images/fortressx.png', price: 79, rating: 4.3 } ]; const handleCompare = (app)=>{ console.log(`Comparing ${app.name}`); // TODO: Implement comparison logic }; const handleFilter = (e)=>{ console.log(`Filtering by ${e.target.value}`); // TODO: Implement filter logic }; const handleSearch = (e)=>{ console.log(`Searching for ${e.target.value}`); // TODO: Implement search logic }; const handleReview = (app, rating, comment)=>{ console.log(`Reviewing ${app.name}: ${rating} stars, ${comment}`); // TODO: Implement review submission logic }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 176, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { apps: apps, onCompare: handleCompare, onFilter: handleFilter, onSearch: handleSearch, onReview: handleReview, __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this })); }