function PostHogAnalytics1() { React.useEffect(()=>{ if (typeof window !== "undefined") { !function(t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function(i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function() { t.push([ e ].concat(Array.prototype.slice.call(arguments, 0))); }; } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for(void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function(t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e; }, u.people.toString = function() { return u.toString(1) + ".people (stub)"; }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([ i, s, a ]); }, e.__SV = 1); }(document, window.posthog || []); window.posthog.init(process.env.POSTHOG_KEY, { api_host: process.env.POSTHOG_HOST }); } }, []); return null; } PostHogAnalytics1.captureViewTool = (toolId, toolTitle)=>{ if (typeof window !== "undefined" && window.posthog) { window.posthog.capture("view_tool", { tool_id: toolId, tool_title: toolTitle }); } }; PostHogAnalytics1.captureClickToolLink = (toolId, toolTitle, linkType)=>{ if (typeof window !== "undefined" && window.posthog) { window.posthog.capture("click_tool_link", { tool_id: toolId, tool_title: toolTitle, link_type: linkType }); } }; PostHogAnalytics1.captureSuggestTool = ()=>{ if (typeof window !== "undefined" && window.posthog) { window.posthog.capture("suggest_tool"); } }; function PostHogAnalytics1Story() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-6 bg-gray-100", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "PostHog Analytics Component"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "This component adds the PostHog analytics script to your application and provides methods for tracking events."), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(PostHogAnalytics1, { __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "The PostHog script has been loaded. This component doesn't render anything visible."))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Available Tracking Methods"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "PostHogAnalytics1.captureOpenContactForm()")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "PostHogAnalytics1.captureSubmitContact(properties)")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, "PostHogAnalytics1.captureSubscribeNewsletter(properties)")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "PostHogAnalytics1.captureSuggestTool(properties)")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, "PostHogAnalytics1.captureFilterByTag(tagName)")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, "PostHogAnalytics1.captureViewTool(toolId, toolName)")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, "PostHogAnalytics1.captureClickToolLink(toolId, toolName, linkType)"))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, "Usage Example"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-3 rounded overflow-x-auto text-sm", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, `// Import the component import PostHogAnalytics from './PostHogAnalytics'; // Add it to your app function App() { return ( <> {/* rest of your app */} ); } // Track events function ContactButton() { return ( ); }`)))); } function Analytics() { return null; } function AnalyticsStory() { return null; } function Input({ tags, selectedTags, onTagClick }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-700 font-medium mb-3", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Filter by tags"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, tags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag.id, onClick: ()=>onTagClick(tag.key), className: `px-3 py-1.5 rounded-full transition-all duration-200 ${selectedTags.includes(tag.key) ? "bg-blue-500 text-white shadow-sm" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, tag.name)))); } function InputStory() { const exampleTags = [ { id: 1, key: "tag1", name: "Tag 1" }, { id: 2, key: "tag2", name: "Tag 2" } ]; const [selectedTags, setSelectedTags] = React.useState([]); const handleTagClick = (key)=>{ setSelectedTags((prevSelectedTags)=>prevSelectedTags.includes(key) ? prevSelectedTags.filter((tag)=>tag !== key) : [ ...prevSelectedTags, key ]); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Input, { tags: exampleTags, selectedTags: selectedTags, onTagClick: handleTagClick, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function ToolCard({ tool, isFeatured, isNew }) { const [visibleTags, setVisibleTags] = React.useState([]); const tagsContainerRef = React.useRef(null); const generateColor = (id)=>{ const colors = [ "from-blue-400 to-blue-600", "from-purple-400 to-purple-600", "from-green-400 to-green-600", "from-red-400 to-red-600", "from-yellow-400 to-yellow-600", "from-indigo-400 to-indigo-600" ]; return colors[id % colors.length]; }; const isFaviconOrIcon = (url)=>{ if (!url) return false; return url.includes("favicon") || url.includes("icon") || url.endsWith(".ico") || url.includes("/apple-touch-icon") || url.includes("/site-icon"); }; React.useEffect(()=>{ if (!tagsContainerRef.current || !tool.tags?.length) return; const calculateVisibleTags = ()=>{ const container = tagsContainerRef.current; const containerWidth = container.offsetWidth; let currentRow = 0; let currentWidth = 0; const visible = []; const measureElement = document.createElement("div"); measureElement.style.position = "absolute"; measureElement.style.visibility = "hidden"; measureElement.style.display = "inline-block"; container.appendChild(measureElement); for (const tag of tool.tags){ measureElement.className = "px-2 py-1 text-xs rounded-full"; measureElement.textContent = tag.emoji ? `${tag.emoji} ${tag.name}` : tag.name; const tagWidth = measureElement.offsetWidth + 8; if (currentWidth + tagWidth > containerWidth) { currentRow++; currentWidth = tagWidth; } else { currentWidth += tagWidth; } if (currentRow < 2) { visible.push(tag); } else { break; } } container.removeChild(measureElement); setVisibleTags(visible); }; const observer = new ResizeObserver(calculateVisibleTags); observer.observe(tagsContainerRef.current); calculateVisibleTags(); return ()=>observer.disconnect(); }, [ tool.tags ]); return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, isFeatured && /*#__PURE__*/ React.createElement("div", { className: "absolute m-4 top-0 right-0 z-10", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-[#9333EA] text-white", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Featured")), isNew && /*#__PURE__*/ React.createElement("div", { className: "absolute m-4 top-0 left-0 z-10", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "New")), /*#__PURE__*/ React.createElement("a", { href: `/tool?id=${tool.id}`, className: `block bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden ${isFeatured ? "ring-2 ring-[#9333EA] ring-offset-2" : ""}`, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[32rem] flex flex-col", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-48 w-full flex-shrink-0 bg-gray-50 border border-[#1A1D27]/20 relative", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, tool.image ? /*#__PURE__*/ React.createElement("img", { src: tool.image, alt: tool.title, className: `${isFaviconOrIcon(tool.image) ? "w-8 h-8 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" : "w-full h-full object-cover"}`, onError: (e)=>{ e.target.parentElement.classList.add("bg-gradient-to-br", ...generateColor(tool.id).split(" ")); e.target.style.display = "none"; }, __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: `h-full w-full bg-gradient-to-br ${generateColor(tool.id)}`, __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6 flex flex-col flex-1", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "group relative", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 truncate", title: tool.title, __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, tool.title), /*#__PURE__*/ React.createElement("div", { className: "opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 absolute z-10 bottom-full left-0 mb-2 p-2 bg-gray-900 text-white text-sm rounded-lg whitespace-normal max-w-xs", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, tool.title, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-4 -mb-2 border-8 border-transparent border-t-gray-900", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 group relative", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[4.5rem] overflow-hidden relative", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, tool.description), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-white to-transparent", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 absolute z-10 bottom-full left-0 mb-2 p-2 bg-gray-900 text-white text-sm rounded-lg whitespace-normal max-w-xs", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, tool.description, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-4 -mb-2 border-8 border-transparent border-t-gray-900", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-h-[56px]", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: tagsContainerRef, className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, visibleTags.map((tag)=>/*#__PURE__*/ React.createElement("span", { key: tag.key, className: "inline-flex items-center px-2 py-1 text-xs bg-[#1A1D27] text-gray-300 rounded-full", __source: { fileName: "", lineNumber: 157, columnNumber: 19 }, __self: this }, tag.emoji && /*#__PURE__*/ React.createElement("span", { className: "mr-1", __source: { fileName: "", lineNumber: 161, columnNumber: 35 }, __self: this }, tag.emoji), tag.name)), visibleTags.length < (tool.tags?.length || 0) && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2 py-1 text-xs bg-[#1A1D27] text-gray-300 rounded-full", __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, "..."))), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t border-gray-100 mt-auto", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this }, tool.url_github && /*#__PURE__*/ React.createElement("a", { href: tool.url_github, target: "_blank", rel: "noopener noreferrer", onClick: (e)=>e.stopPropagation(), className: "text-gray-600 hover:text-gray-900 transition-colors", __source: { fileName: "", lineNumber: 177, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", __source: { fileName: "", lineNumber: 184, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z", __source: { fileName: "", lineNumber: 189, columnNumber: 25 }, __self: this }))), tool.url_twitter && /*#__PURE__*/ React.createElement("a", { href: tool.url_twitter, target: "_blank", rel: "noopener noreferrer", onClick: (e)=>e.stopPropagation(), className: "text-gray-600 hover:text-gray-900 transition-colors", __source: { fileName: "", lineNumber: 194, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", __source: { fileName: "", lineNumber: 201, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z", __source: { fileName: "", lineNumber: 206, columnNumber: 25 }, __self: this }))), tool.url_docs && /*#__PURE__*/ React.createElement("a", { href: tool.url_docs, target: "_blank", rel: "noopener noreferrer", onClick: (e)=>e.stopPropagation(), className: "text-gray-600 hover:text-gray-900 transition-colors", __source: { fileName: "", lineNumber: 211, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", __source: { fileName: "", lineNumber: 218, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253", __source: { fileName: "", lineNumber: 224, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.preventDefault(); e.stopPropagation(); window.open(tool.url, "_blank"); }, className: "inline-flex items-center gap-2 text-blue-600 hover:text-blue-700", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, "Visit Tool", /*#__PURE__*/ React.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 20 20", fill: "currentColor", __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { fillRule: "evenodd", d: "M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z", __source: { fileName: "", lineNumber: 249, columnNumber: 21 }, __self: this }))))))))); } function ToolCardStory() { const exampleTools = [ { id: 1, title: "Normal Card with Image", description: "This is a regular card with normal length description and few tags.", url: "https://example.com", url_github: "https://github.com/example/repo", url_twitter: "https://twitter.com/example", url_docs: "https://docs.example.com", image: "https://picsum.photos/400/300", tags: [ { key: "tag1", name: "Tag 1", emoji: "🚀" }, { key: "tag2", name: "Tag 2", emoji: "💡" } ] }, { id: 2, title: "Card with Long Title That Should Be Truncated With Ellipsis Because It's Too Long", description: "This is a description that should be truncated after exactly three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.", url: "https://example.com", url_github: "https://github.com/example/repo", image: "favicon.ico", tags: [ { key: "tag1", name: "Machine Learning", emoji: "🤖" }, { key: "tag2", name: "AI", emoji: "🧠" } ] }, { id: 3, title: "Card with Many Tags", description: "This card demonstrates tag truncation. It should show only two lines of tags and an ellipsis.", url: "https://example.com", url_twitter: "https://twitter.com/example", url_docs: "https://docs.example.com", image: "/icon.png", tags: [ { key: "tag1", name: "React", emoji: "⚛️" }, { key: "tag2", name: "JavaScript", emoji: "🟨" }, { key: "tag3", name: "TypeScript", emoji: "🔷" }, { key: "tag4", name: "Node.js", emoji: "💚" }, { key: "tag5", name: "Python", emoji: "🐍" }, { key: "tag6", name: "Machine Learning", emoji: "🤖" }, { key: "tag7", name: "AI", emoji: "🧠" }, { key: "tag8", name: "Web Dev", emoji: "🌐" }, { key: "tag9", name: "Mobile", emoji: "📱" }, { key: "tag10", name: "Database", emoji: "💾" } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#0F1117] p-8", __source: { fileName: "", lineNumber: 320, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 321, columnNumber: 7 }, __self: this }, exampleTools.map((tool, index)=>/*#__PURE__*/ React.createElement(ToolCard, { key: tool.id, tool: tool, isFeatured: index === 0, isNew: index === 0, __source: { fileName: "", lineNumber: 323, columnNumber: 11 }, __self: this })))); } function SuggestToolForm() { const [url, setUrl] = React.useState(""); const [status, setStatus] = React.useState("idle"); const [errorMessage, setErrorMessage] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); setStatus("loading"); try { const response = await fetch("/api/suggest-tool", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); const data = await response.json(); if (!response.ok) throw new Error(data.message || "Failed to submit suggestion"); if (data.error === "already_exists") { setStatus("already_exists"); setErrorMessage(data.message); } else { setStatus("success"); setUrl(""); } } catch (error) { setStatus("error"); setErrorMessage("Something went wrong. Please try again."); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white/80 backdrop-blur-sm rounded-2xl shadow-sm p-8", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, status === "success" ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-8 h-8 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Thank You!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Your tool suggestion has been submitted successfully. We'll review it soon."), /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-block px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Back to Home")) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Tool URL"), /*#__PURE__*/ React.createElement("input", { type: "url", id: "url", name: "url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "https://example.com", required: true, className: "w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", disabled: status === "loading", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-gray-500", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Please enter the full URL including https://")), (status === "error" || status === "already_exists") && /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-lg ${status === "already_exists" ? "bg-blue-50 text-blue-700" : "bg-red-50 text-red-700"}`, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, errorMessage), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: status === "loading", className: `w-full px-6 py-3 rounded-lg font-medium transition-all duration-200 ${status === "loading" ? "bg-gray-300 text-gray-500 cursor-not-allowed" : "bg-blue-500 text-white hover:bg-blue-600"}`, __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, status === "loading" ? "Submitting..." : "Submit Suggestion"))); } function SuggestToolFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 118, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SuggestToolForm, { __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this })); } function FormContact() { const [formData, setFormData] = React.useState({ name: "", email: "", message: "" }); const [status, setStatus] = React.useState("idle"); const [errorMessage, setErrorMessage] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); setStatus("loading"); try { const response = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); const data = await response.json(); if (!response.ok) throw new Error(data.message || "Failed to send message"); setStatus("success"); setFormData({ name: "", email: "", message: "" }); } catch (error) { setStatus("error"); setErrorMessage("Something went wrong. Please try again."); } }; const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-6 max-w-lg mx-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, status === "success" ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#9333EA]/20 rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-8 h-8 text-[#9333EA]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-200 mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Thank You!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Your message has been sent successfully. We'll get back to you soon.")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-200 mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Get in Touch"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Questions, partnerships, tool promotion inquiries or feedback? We'd love to hear from you!")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleChange, placeholder: "Your name", required: true, className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", disabled: status === "loading", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, placeholder: "Your email", required: true, className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", disabled: status === "loading", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", value: formData.message, onChange: handleChange, placeholder: "Your message", required: true, rows: 4, className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500 resize-none", disabled: status === "loading", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this })), status === "error" && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-500/10 text-red-400 rounded-lg", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, errorMessage), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: status === "loading", className: `w-full px-6 py-3 rounded-lg font-medium transition-all duration-200 ${status === "loading" ? "bg-[#9333EA]/50 text-white/50 cursor-not-allowed" : "bg-[#9333EA] text-white hover:bg-[#7928CA]"}`, __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, status === "loading" ? "Sending..." : "Send Message")))); } function FormContactStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 bg-[#0F1117] p-8", __source: { fileName: "", lineNumber: 144, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-200 mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(FormContact, { __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-200 mb-4", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-6 max-w-lg mx-auto", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-200 mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, "Get in Touch"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "Questions, partnerships, tool promotion inquiries or feedback? We'd love to hear from you!")), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: "John Doe", placeholder: "Your name", disabled: true, className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: "john@example.com", placeholder: "Your email", disabled: true, className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", value: "This is a test message", placeholder: "Your message", rows: 4, disabled: true, className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500 resize-none", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { disabled: true, className: "w-full px-6 py-3 rounded-lg font-medium bg-[#9333EA]/50 text-white/50 cursor-not-allowed", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, "Sending...")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-200 mb-4", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, "Success State"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-6 max-w-lg mx-auto", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#9333EA]/20 rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-8 h-8 text-[#9333EA]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-200 mb-2", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "Thank You!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, "Your message has been sent successfully. We'll get back to you soon.")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 243, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-200 mb-4", __source: { fileName: "", lineNumber: 244, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-6 max-w-lg mx-auto", __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-200 mb-2", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, "Get in Touch"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }, "Questions, partnerships, tool promotion inquiries or feedback? We'd love to hear from you!")), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 258, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: "John Doe", placeholder: "Your name", className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: "john@example.com", placeholder: "Your email", className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", value: "This is a test message", placeholder: "Your message", rows: 4, className: "w-full bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500 resize-none", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-500/10 text-red-400 rounded-lg", __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, "Something went wrong. Please try again."), /*#__PURE__*/ React.createElement("button", { className: "w-full px-6 py-3 rounded-lg font-medium bg-[#9333EA] text-white hover:bg-[#7928CA]", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, "Send Message"))))); } function FormSubscription() { const [email, setEmail] = React.useState(""); const [status, setStatus] = React.useState("idle"); const [errorMessage, setErrorMessage] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); setStatus("loading"); try { const response = await fetch("/api/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email }) }); const data = await response.json(); if (!response.ok) throw new Error(data.message || "Subscription failed"); if (data.error === "already_subscribed") { setStatus("already_subscribed"); setErrorMessage(data.message); } else { setStatus("success"); setEmail(""); } } catch (error) { setStatus("error"); setErrorMessage("Something went wrong. Please try again."); } }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-xl mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Stay updated with new AI tools", required: true, className: "flex-1 bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", disabled: status === "loading" || status === "success", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: status === "loading" || status === "success", className: `w-full sm:w-auto px-6 py-3 rounded-lg font-medium transition-all duration-200 ${status === "loading" ? "bg-[#9333EA]/50 text-white/50 cursor-not-allowed" : status === "success" ? "bg-green-500 text-white" : "bg-[#9333EA] text-white hover:bg-[#7928CA]"}`, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, status === "loading" ? "Subscribing..." : status === "success" ? "Subscribed!" : "Subscribe")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm mt-2 text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "once a week max, no spam"), (status === "error" || status === "already_subscribed") && /*#__PURE__*/ React.createElement("p", { className: `text-sm mt-2 text-center ${status === "already_subscribed" ? "text-blue-400" : "text-red-400"}`, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, errorMessage))); } function FormSubscriptionStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(FormSubscription, { __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: "test@example.com", placeholder: "Stay updated with new AI tools", disabled: true, className: "flex-1 bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { disabled: true, className: "w-full sm:w-auto px-6 py-3 rounded-lg font-medium bg-[#9333EA]/50 text-white/50 cursor-not-allowed", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Subscribing...")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm mt-2 text-center", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "once a week max, no spam"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "Success State"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-4", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: "", placeholder: "Stay updated with new AI tools", disabled: true, className: "flex-1 bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { disabled: true, className: "w-full sm:w-auto px-6 py-3 rounded-lg font-medium bg-green-500 text-white", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Subscribed!")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm mt-2 text-center", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "once a week max, no spam"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-4", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: "test@example.com", placeholder: "Stay updated with new AI tools", className: "flex-1 bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full sm:w-auto px-6 py-3 rounded-lg font-medium bg-[#9333EA] text-white hover:bg-[#7928CA]", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, "Subscribe")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm mt-2 text-center", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, "once a week max, no spam"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2 text-center text-red-400", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, "Something went wrong. Please try again."))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 165, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, "Already Subscribed State"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-xl p-4", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: "existing@example.com", placeholder: "Stay updated with new AI tools", className: "flex-1 bg-[#0F1117] text-gray-300 px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full sm:w-auto px-6 py-3 rounded-lg font-medium bg-[#9333EA] text-white hover:bg-[#7928CA]", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "Subscribe")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm mt-2 text-center", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, "once a week max, no spam"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2 text-center text-blue-400", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, "You're already subscribed to our updates! Thanks for your enthusiasm!")))); } const FilterBar = React.forwardRef(({ tags, onTagsChange }, ref)=>{ const [searchTerm, setSearchTerm] = React.useState(""); const [selectedTags, setSelectedTags] = React.useState([]); React.useImperativeHandle(ref, ()=>({ resetFilters: ()=>{ setSearchTerm(""); setSelectedTags([]); onTagsChange([], ""); } })); function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = React.useState(value); React.useEffect(()=>{ const timer = setTimeout(()=>{ setDebouncedValue(value); }, delay); return ()=>clearTimeout(timer); }, [ value, delay ]); return debouncedValue; } const debouncedSearch = useDebounce(searchTerm, 300); React.useEffect(()=>{ onTagsChange(selectedTags, debouncedSearch); }, [ debouncedSearch, selectedTags, onTagsChange ]); const handleTagClick = (tag)=>{ const newSelectedTags = selectedTags.includes(tag) ? selectedTags.filter((t)=>t !== tag) : [ ...selectedTags, tag ]; setSelectedTags(newSelectedTags); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full bg-[#1A1D27] text-gray-300 px-4 py-3 rounded-xl border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent placeholder-gray-500", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 pt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, tags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag.id, onClick: ()=>handleTagClick(tag.key), className: `px-3 py-1.5 rounded-xl transition-all duration-200 ${selectedTags.includes(tag.key) ? "bg-[#9333EA] text-white" : "bg-[#1A1D27] text-gray-300 border border-gray-700 hover:border-gray-600"}`, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, tag.emoji && /*#__PURE__*/ React.createElement("span", { className: "mr-1", __source: { fileName: "", lineNumber: 62, columnNumber: 29 }, __self: this }, tag.emoji), tag.name))))); }); function FilterBarStory() { const filterBarRef = React.useRef(); const [tags, setTags] = React.useState([]); const [tools, setTools] = React.useState([]); const [error, setError] = React.useState(null); const fetchToolsAndTags = async (selectedTags = [], searchTerm = "")=>{ try { const response = await fetch("/api/fetch-tools-tags", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ selectedTags, searchTerm }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setTags(data.tags); setTools(data.tools); } catch (error) { console.error("Error fetching data:", error); setError("Failed to load data"); } }; React.useEffect(()=>{ fetchToolsAndTags(); }, []); const handleTagsChange = (newSelectedTags, searchTerm = "")=>{ fetchToolsAndTags(newSelectedTags, searchTerm); }; const handleReset = ()=>{ filterBarRef.current?.resetFilters(); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FilterBar, { ref: filterBarRef, tags: tags, onTagsChange: handleTagsChange, __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "px-4 py-2 bg-[#1A1D27] text-gray-300 rounded-lg hover:bg-[#2A2D37]", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "Reset Filters")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mt-4", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, tools.map((tool)=>/*#__PURE__*/ React.createElement("div", { key: tool.id, className: "border p-4 rounded shadow", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, tool.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, tool.description))))); } function MainComponent() { const [tools, setTools] = React.useState([]); const [filteredTools, setFilteredTools] = React.useState([]); const [featuredTools, setFeaturedTools] = React.useState([]); const [recentTools, setRecentTools] = React.useState([]); const [tags, setTags] = React.useState([]); const [isLoading, setIsLoading] = React.useState(true); const [error, setError] = React.useState(null); const filterBarRef = React.useRef(null); const fetchToolsAndTags = async ()=>{ setIsLoading(true); try { const response = await fetch("/api/fetch-tools-tags", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setTools(data.tools || []); setFilteredTools(data.tools || []); setFeaturedTools(data.featuredTools || []); setTags(data.tags || []); const tenDaysAgo = new Date(); tenDaysAgo.setDate(tenDaysAgo.getDate() - 10); const recent = data.tools.filter((tool)=>new Date(tool.created_at) >= tenDaysAgo); setRecentTools(recent); } catch (error) { console.error("Error fetching tools and tags:", error); setError("Could not load tools and tags"); } finally{ setIsLoading(false); } }; const resetFilters = ()=>{ setFilteredTools(tools); if (filterBarRef.current) { filterBarRef.current.resetFilters(); } }; const [isContactModalOpen, setIsContactModalOpen] = React.useState(false); React.useEffect(()=>{ fetchToolsAndTags(); }, []); React.useEffect(()=>{ const favicon = document.createElement("link"); favicon.rel = "icon"; favicon.href = "data:image/svg+xml,"; const existingFavicon = document.querySelector('link[rel="icon"]'); if (existingFavicon) { existingFavicon.remove(); } document.head.appendChild(favicon); }, []); const handleTagsChange = (selectedTags, search = "")=>{ if (selectedTags.length === 0 && !search) { setFilteredTools(tools); return; } const searchLower = search.toLowerCase(); const filtered = tools.filter((tool)=>{ const matchesSearch = !search || tool.title.toLowerCase().includes(searchLower) || tool.description && tool.description.toLowerCase().includes(searchLower); const matchesTags = selectedTags.length === 0 || tool.tags?.some((tag)=>selectedTags.includes(tag.key)); return matchesSearch && matchesTags; }); setFilteredTools(filtered); }; const handleToolClick = (tool)=>{}; const displayTools = filteredTools; const displayFeaturedTools = featuredTools.filter((tool)=>displayTools.some((t)=>t.id === tool.id)); if (error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0F1117]", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 max-w-6xl", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-red-500 bg-[#1A1D27] p-4 rounded-lg mb-6", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, error))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0F1117]", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 max-w-6xl", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl bg-gradient-to-r from-[#9333EA] to-[#E11D48] text-transparent bg-clip-text font-bold", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "Vibe Coding Directory"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-6", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/suggest", className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Suggest Tool"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsContactModalOpen(true), className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-20 text-center", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/9dfa51ab-2f3f-4895-86fb-f399a53b7f03/-/format/auto/", alt: "Vibe Bot", className: "w-24 h-24 mx-auto mb-8", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold mb-4 bg-gradient-to-r from-[#9333EA] to-[#E11D48] text-transparent bg-clip-text leading-normal", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "Vibe Coding Directory"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-xl mb-8", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, "Discover +70 AI tools to build amazing websites and applications"), /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(FormSubscription, { __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto py-2", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(FilterBar, { ref: filterBarRef, tags: tags, onTagsChange: handleTagsChange, __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this })), isLoading ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1D27] rounded-lg p-8 mb-8", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-4", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-[#9333EA]", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, "Loading tools..."))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, [ 1, 2, 3, 4, 5, 6 ].map((n)=>/*#__PURE__*/ React.createElement("div", { key: n, className: "bg-[#1A1D27] rounded-lg h-64 animate-pulse", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this })))) : filteredTools.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 px-4 bg-[#1A1D27] rounded-lg", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "mx-auto h-12 w-12 text-gray-400 mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-gray-300 mb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, "No tools found"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 mb-6", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, "We couldn't find any tools with the current filters. Please review your search criteria."), /*#__PURE__*/ React.createElement("button", { onClick: resetFilters, className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-[#9333EA] hover:bg-[#7928CA] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#9333EA]", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "mr-2 -ml-1 h-5 w-5", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this })), "Clear filters and show all")) : /*#__PURE__*/ React.createElement(React.Fragment, null, displayFeaturedTools.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-12 mb-12", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-gray-200", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, "Featured Tools"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, displayFeaturedTools.map((tool)=>/*#__PURE__*/ React.createElement(ToolCard, { key: tool.id, tool: tool, isFeatured: true, __source: { fileName: "", lineNumber: 232, columnNumber: 21 }, __self: this })))), recentTools.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-12 mb-12", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-gray-200", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, "Recently Added Tools"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, recentTools.map((tool)=>/*#__PURE__*/ React.createElement(ToolCard, { key: tool.id, tool: tool, isNew: true, __source: { fileName: "", lineNumber: 245, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-gray-200", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, "All Tools"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, displayTools.map((tool)=>/*#__PURE__*/ React.createElement("div", { key: tool.id, onClick: ()=>handleToolClick(tool), __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement(ToolCard, { tool: tool, isFeatured: displayFeaturedTools.some((f)=>f.id === tool.id), isNew: recentTools.some((r)=>r.id === tool.id), __source: { fileName: "", lineNumber: 258, columnNumber: 21 }, __self: this }))))))), /*#__PURE__*/ React.createElement("footer", { className: "py-8 mt-12 text-center text-gray-400", __source: { fileName: "", lineNumber: 273, columnNumber: 7 }, __self: this }, "Built by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.linkedin.com/in/calirenato82/", target: "_blank", rel: "noopener noreferrer", className: "text-[#9333EA] hover:text-[#7928CA] transition-colors", __source: { fileName: "", lineNumber: 275, columnNumber: 9 }, __self: this }, "Cali"), " ", "from Brazil with ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 283, columnNumber: 26 }, __self: this }, "❤")), isContactModalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 287, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-lg", __source: { fileName: "", lineNumber: 288, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsContactModalOpen(false), className: "absolute -top-12 right-0 text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 293, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement(FormContact, { __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this })))); }