function MainComponent() { const [error, setError] = useState(null); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [selectedTag, setSelectedTag] = useState(""); const [currentPage, setCurrentPage] = useState(1); const [loading, setLoading] = useState(true); const [blogPosts, setBlogPosts] = useState([]); const [headerScrolled, setHeaderScrolled] = useState(false); const [headerHidden, setHeaderHidden] = useState(false); const [activeSection, setActiveSection] = useState("blog"); const postsPerPage = 6; // Fetch blog posts from database const fetchBlogPosts = async ()=>{ try { setLoading(true); const response = await fetch("/api/get-blogs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }); if (!response.ok) { throw new Error(`Failed to fetch blogs: ${response.status} ${response.statusText}`); } const data = await response.json(); setBlogPosts(data.blogs || []); } catch (err) { console.error("Error fetching blogs:", err); setError("Failed to load blog posts. Please try again later."); } finally{ setLoading(false); } }; // Load blogs on component mount React.useEffect(()=>{ fetchBlogPosts(); }, []); // Header scroll behavior - updated to match homepage React.useEffect(()=>{ let lastScrollY = window.scrollY; let ticking = false; const updateHeader = ()=>{ const scrollY = window.scrollY; const scrollDelta = scrollY - lastScrollY; // Shrink header after 40px setHeaderScrolled(scrollY > 40); // Auto-hide on fast scroll down, show on scroll up if (Math.abs(scrollDelta) > 5) { setHeaderHidden(scrollDelta > 0 && scrollY > 100); } lastScrollY = scrollY; ticking = false; }; const onScroll = ()=>{ if (!ticking) { requestAnimationFrame(updateHeader); ticking = true; } }; window.addEventListener("scroll", onScroll, { passive: true }); return ()=>window.removeEventListener("scroll", onScroll); }, []); // Keyboard navigation const handleKeyDown = (event)=>{ if (event.key === "Escape" && mobileMenuOpen) { setMobileMenuOpen(false); } }; React.useEffect(()=>{ document.addEventListener("keydown", handleKeyDown); return ()=>document.removeEventListener("keydown", handleKeyDown); }, [ mobileMenuOpen ]); // Prevent scroll when mobile menu is open React.useEffect(()=>{ if (mobileMenuOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } return ()=>{ document.body.style.overflow = ""; }; }, [ mobileMenuOpen ]); const allTags = [ ...new Set(blogPosts.flatMap((post)=>post.tags || [])) ].sort(); const filteredPosts = blogPosts.filter((post)=>{ const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) || post.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) || (post.tags || []).some((tag)=>tag.toLowerCase().includes(searchTerm.toLowerCase())); const matchesTag = selectedTag === "" || (post.tags || []).includes(selectedTag); return matchesSearch && matchesTag && post.status === "published"; }); const totalPages = Math.ceil(filteredPosts.length / postsPerPage); const startIndex = (currentPage - 1) * postsPerPage; const currentPosts = filteredPosts.slice(startIndex, startIndex + postsPerPage); const featuredPost = blogPosts.find((post)=>post.featured); const formatDate = (dateString)=>{ const date = new Date(dateString); return date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); }; const generateSlug = (title)=>{ return title.toLowerCase().replace(/[^a-z0-9 -]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#0a0a2e] via-[#16213e] to-[#0f3460] font-inter", __source: { fileName: "", lineNumber: 148, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: `fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-out ${headerHidden ? "-translate-y-full" : "translate-y-0"} ${headerScrolled ? "h-[68px]" : "h-[96px]"}`, style: { background: "rgba(10, 14, 32, 0.8)", backdropFilter: "blur(16px)", borderBottom: "1px solid rgba(6, 182, 212, 0.2)" }, __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-full", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3 group", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold bg-gradient-to-r from-cyan-400 to-pink-500 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, "Talent XYZ")), /*#__PURE__*/ React.createElement("nav", { className: "hidden lg:flex items-center space-x-8", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, [ { href: "/", label: "HOME", section: "home" }, { href: "/about", label: "ABOUT", section: "about" }, { href: "/services", label: "SERVICES", section: "services" }, { href: "/why-us", label: "WHY US", section: "why-us" }, { href: "/open-roles", label: "ROLES", section: "open-roles" }, { href: "/blog", label: "BLOG", section: "blog" }, { href: "/contact", label: "CONTACT", section: "contact" } ].map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.section, href: item.href, className: `relative text-sm font-medium tracking-wider transition-colors duration-300 ease-out group focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-[rgba(10,14,32,0.8)] rounded px-2 py-1 ${activeSection === item.section ? "text-cyan-400" : "text-cyan-200 hover:text-cyan-400"}`, "aria-label": `Navigate to ${item.label.toLowerCase()}`, __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, item.label, /*#__PURE__*/ React.createElement("span", { className: `absolute -bottom-2 left-0 h-0.5 bg-gradient-to-r from-cyan-400 to-pink-500 transition-all duration-300 ease-out ${activeSection === item.section ? "w-full" : "w-0 group-hover:w-full"}`, __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "hidden lg:flex items-center space-x-4", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://calendly.com/keaton-talent-xyz/15min", target: "_blank", rel: "noopener noreferrer", className: "relative inline-flex items-center px-6 py-3 text-sm font-semibold text-white rounded-full bg-gradient-to-r from-purple-500 to-cyan-500 transition-all duration-300 ease-out hover:from-purple-600 hover:to-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-[rgba(10,14,32,0.8)] group overflow-hidden", "aria-label": "Schedule a call with Talent XYZ", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-check mr-2 text-xs", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }), "Schedule Call")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMobileMenuOpen(!mobileMenuOpen), className: "lg:hidden relative w-10 h-10 flex items-center justify-center text-cyan-300 hover:text-cyan-400 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-[rgba(10,14,32,0.8)] rounded-lg", "aria-label": mobileMenuOpen ? "Close menu" : "Open menu", "aria-expanded": mobileMenuOpen, __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-6 h-6", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `absolute top-2 left-0 w-6 h-0.5 bg-current transition-all duration-300 ease-out ${mobileMenuOpen ? "rotate-45 translate-y-1" : ""}`, __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `absolute top-1/2 left-0 w-6 h-0.5 bg-current transition-all duration-300 ease-out ${mobileMenuOpen ? "opacity-0" : "-translate-y-0.25"}`, __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `absolute bottom-2 left-0 w-6 h-0.5 bg-current transition-all duration-300 ease-out ${mobileMenuOpen ? "-rotate-45 -translate-y-1" : ""}`, __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: `lg:hidden absolute top-full left-0 right-0 bg-[rgba(10,14,32,0.95)] backdrop-blur-xl border-b border-cyan-500/20 transition-all duration-300 ease-out ${mobileMenuOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 -translate-y-4 pointer-events-none"}`, __source: { fileName: "", lineNumber: 245, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "px-4 py-6 space-y-4", __source: { fileName: "", lineNumber: 252, columnNumber: 11 }, __self: this }, [ { href: "/", label: "Home" }, { href: "/about", label: "About" }, { href: "/services", label: "Services" }, { href: "/why-us", label: "Why Us" }, { href: "/open-roles", label: "Open Roles" }, { href: "/blog", label: "Blog" }, { href: "/contact", label: "Contact" } ].map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.href, href: item.href, className: "block text-lg font-medium text-cyan-200 hover:text-cyan-400 transition-colors duration-300 py-3 border-b border-cyan-500/10 last:border-b-0 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-[rgba(10,14,32,0.95)] rounded px-2", onClick: ()=>setMobileMenuOpen(false), __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, item.label)), /*#__PURE__*/ React.createElement("div", { className: "pt-6", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://calendly.com/keaton-talent-xyz/15min", target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-full px-6 py-4 text-base font-semibold text-white rounded-2xl bg-gradient-to-r from-purple-500 to-cyan-500 transition-all duration-300 ease-out hover:from-purple-600 hover:to-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-[rgba(10,14,32,0.95)]", onClick: ()=>setMobileMenuOpen(false), __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-check mr-3", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }), "Schedule Call"))))), /*#__PURE__*/ React.createElement("div", { className: `transition-all duration-300 ease-out ${headerScrolled ? "pt-[68px]" : "pt-[96px]"}`, __source: { fileName: "", lineNumber: 290, columnNumber: 7 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "bg-pink-500/10 border-l-4 border-pink-400 p-4 mx-4 mb-4", __source: { fileName: "", lineNumber: 294, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-pink-300", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }, error)), /*#__PURE__*/ React.createElement("section", { className: "relative py-16 sm:py-24 lg:py-32 overflow-hidden", __source: { fileName: "", lineNumber: 300, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-pink-500/10", __source: { fileName: "", lineNumber: 301, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 302, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-20 left-10 w-80 h-80 bg-cyan-500/5 rounded-full blur-3xl animate-pulse", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-20 right-10 w-96 h-96 bg-pink-500/5 rounded-full blur-3xl animate-pulse", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10", __source: { fileName: "", lineNumber: 306, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-cyan-500/20 to-pink-500/20 rounded-3xl mb-8 border border-cyan-500/30", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-blog text-3xl bg-gradient-to-r from-cyan-400 to-pink-500 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 308, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-8 leading-tight", __source: { fileName: "", lineNumber: 310, columnNumber: 13 }, __self: this }, "Talent XYZ", /*#__PURE__*/ React.createElement("span", { className: "block bg-gradient-to-r from-cyan-400 via-pink-500 to-purple-500 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 312, columnNumber: 15 }, __self: this }, "Blog")), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-cyan-100 mb-8 max-w-3xl mx-auto leading-relaxed", __source: { fileName: "", lineNumber: 316, columnNumber: 13 }, __self: this }, "Insights, strategies, and trends in recruiting, hiring, and building exceptional teams"))), /*#__PURE__*/ React.createElement("section", { className: "py-8 bg-gradient-to-br from-[#16213e] to-[#0a0a2e]", __source: { fileName: "", lineNumber: 324, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-8", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex-1", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-cyan-400", __source: { fileName: "", lineNumber: 328, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search articles...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full pl-12 pr-4 py-3 bg-gradient-to-r from-[#1a2332] to-[#0f1419] border border-cyan-500/20 rounded-xl text-white placeholder-cyan-300 focus:outline-none focus:border-cyan-400/50 transition-colors", __source: { fileName: "", lineNumber: 329, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedTag, onChange: (e)=>setSelectedTag(e.target.value), className: "w-full md:w-48 px-4 py-3 bg-gradient-to-r from-[#1a2332] to-[#0f1419] border border-cyan-500/20 rounded-xl text-white focus:outline-none focus:border-cyan-400/50 transition-colors appearance-none", __source: { fileName: "", lineNumber: 338, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 343, columnNumber: 19 }, __self: this }, "All Topics"), allTags.map((tag)=>/*#__PURE__*/ React.createElement("option", { key: tag, value: tag, __source: { fileName: "", lineNumber: 345, columnNumber: 21 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down absolute right-4 top-1/2 transform -translate-y-1/2 text-cyan-400 pointer-events-none", __source: { fileName: "", lineNumber: 350, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("section", { className: "py-16 bg-gradient-to-br from-[#0a0a2e] to-[#16213e]", __source: { fileName: "", lineNumber: 357, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 358, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-20", __source: { fileName: "", lineNumber: 360, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-cyan-500/20 to-pink-500/20 rounded-2xl mb-4 border border-cyan-500/30", __source: { fileName: "", lineNumber: 361, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-cyan-400", __source: { fileName: "", lineNumber: 362, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-cyan-200 text-lg", __source: { fileName: "", lineNumber: 364, columnNumber: 17 }, __self: this }, "Loading articles...")) : filteredPosts.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-20", __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-pink-500/20 to-purple-500/20 rounded-2xl mb-4 border border-pink-500/30", __source: { fileName: "", lineNumber: 368, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-2xl text-pink-400", __source: { fileName: "", lineNumber: 369, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 371, columnNumber: 17 }, __self: this }, "No articles found"), /*#__PURE__*/ React.createElement("p", { className: "text-cyan-200", __source: { fileName: "", lineNumber: 374, columnNumber: 17 }, __self: this }, "Try adjusting your search terms or filters.")) : /*#__PURE__*/ React.createElement(React.Fragment, null, featuredPost && /*#__PURE__*/ React.createElement("div", { className: "mb-16", __source: { fileName: "", lineNumber: 382, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/blog-post?slug=${featuredPost.slug || generateSlug(featuredPost.title)}`, className: "block bg-gradient-to-br from-[#1a2332] to-[#0f1419] rounded-3xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/40 transition-all duration-500 hover:shadow-2xl hover:shadow-cyan-500/10 cursor-pointer", __source: { fileName: "", lineNumber: 383, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-64 md:h-96", __source: { fileName: "", lineNumber: 387, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: featuredPost.featured_image_url || "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&h=400&fit=crop", alt: featuredPost.title, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 388, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent", __source: { fileName: "", lineNumber: 396, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-6 md:p-8", __source: { fileName: "", lineNumber: 397, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 398, columnNumber: 27 }, __self: this }, (featuredPost.tags || []).map((tag)=>/*#__PURE__*/ React.createElement("span", { key: tag, className: "px-3 py-1 bg-gradient-to-r from-cyan-500/20 to-pink-500/20 text-cyan-300 rounded-full text-sm border border-cyan-500/30", __source: { fileName: "", lineNumber: 400, columnNumber: 31 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-4xl font-bold text-white mb-4 leading-tight hover:text-cyan-100 transition-colors", __source: { fileName: "", lineNumber: 408, columnNumber: 27 }, __self: this }, featuredPost.title), /*#__PURE__*/ React.createElement("p", { className: "text-cyan-100 mb-6 text-lg leading-relaxed", __source: { fileName: "", lineNumber: 411, columnNumber: 27 }, __self: this }, featuredPost.excerpt), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-6 text-cyan-200", __source: { fileName: "", lineNumber: 414, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 415, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 416, columnNumber: 31 }, __self: this }), featuredPost.author), /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 419, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar mr-2", __source: { fileName: "", lineNumber: 420, columnNumber: 31 }, __self: this }), formatDate(featuredPost.published_at)), featuredPost.reading_time && /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 424, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2", __source: { fileName: "", lineNumber: 425, columnNumber: 33 }, __self: this }), featuredPost.reading_time, " min read")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 inline-flex items-center text-cyan-400 hover:text-pink-400 transition-colors", __source: { fileName: "", lineNumber: 430, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 431, columnNumber: 29 }, __self: this }, "Read Full Article"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right", __source: { fileName: "", lineNumber: 432, columnNumber: 29 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 441, columnNumber: 17 }, __self: this }, currentPosts.map((post)=>/*#__PURE__*/ React.createElement("article", { key: post.id, __source: { fileName: "", lineNumber: 443, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/blog-post?slug=${post.slug || generateSlug(post.title)}`, className: "block group bg-gradient-to-br from-[#1a2332] to-[#0f1419] rounded-3xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/40 transition-all duration-500 hover:shadow-2xl hover:shadow-cyan-500/10 hover:scale-105 cursor-pointer", __source: { fileName: "", lineNumber: 444, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-48 overflow-hidden", __source: { fileName: "", lineNumber: 448, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.featured_image_url || "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&h=400&fit=crop", alt: post.title, className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-500", __source: { fileName: "", lineNumber: 449, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 457, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 459, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 460, columnNumber: 27 }, __self: this }, (post.tags || []).slice(0, 2).map((tag)=>/*#__PURE__*/ React.createElement("span", { key: tag, className: "px-2 py-1 bg-gradient-to-r from-cyan-500/10 to-pink-500/10 text-cyan-300 rounded-full text-xs border border-cyan-500/20", __source: { fileName: "", lineNumber: 462, columnNumber: 31 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-3 group-hover:text-cyan-100 transition-colors leading-tight", __source: { fileName: "", lineNumber: 470, columnNumber: 27 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "text-cyan-200 mb-4 leading-relaxed text-sm", __source: { fileName: "", lineNumber: 473, columnNumber: 27 }, __self: this }, post.excerpt), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-xs text-cyan-300 mb-4", __source: { fileName: "", lineNumber: 476, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 477, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-1", __source: { fileName: "", lineNumber: 478, columnNumber: 31 }, __self: this }), post.author), /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 481, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar mr-1", __source: { fileName: "", lineNumber: 482, columnNumber: 31 }, __self: this }), formatDate(post.published_at)), post.reading_time && /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 486, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1", __source: { fileName: "", lineNumber: 487, columnNumber: 33 }, __self: this }), post.reading_time, "m")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-cyan-400 group-hover:text-pink-400 transition-colors text-sm", __source: { fileName: "", lineNumber: 492, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 493, columnNumber: 29 }, __self: this }, "Read More"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right group-hover:translate-x-1 transition-transform", __source: { fileName: "", lineNumber: 494, columnNumber: 29 }, __self: this }))))))), totalPages > 1 && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2 mt-16", __source: { fileName: "", lineNumber: 504, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(Math.max(1, currentPage - 1)), disabled: currentPage === 1, className: "px-4 py-2 bg-gradient-to-r from-[#1a2332] to-[#0f1419] border border-cyan-500/20 rounded-xl text-cyan-300 hover:border-cyan-400/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 505, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 512, columnNumber: 23 }, __self: this })), Array.from({ length: totalPages }, (_, i)=>i + 1).map((page)=>/*#__PURE__*/ React.createElement("button", { key: page, onClick: ()=>setCurrentPage(page), className: `px-4 py-2 rounded-xl transition-colors ${currentPage === page ? "bg-gradient-to-r from-cyan-500 to-pink-500 text-white" : "bg-gradient-to-r from-[#1a2332] to-[#0f1419] border border-cyan-500/20 text-cyan-300 hover:border-cyan-400/40"}`, __source: { fileName: "", lineNumber: 516, columnNumber: 25 }, __self: this }, page)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(Math.min(totalPages, currentPage + 1)), disabled: currentPage === totalPages, className: "px-4 py-2 bg-gradient-to-r from-[#1a2332] to-[#0f1419] border border-cyan-500/20 rounded-xl text-cyan-300 hover:border-cyan-400/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 529, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 536, columnNumber: 23 }, __self: this })))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#0a0a2e] py-8 border-t border-cyan-500/20", __source: { fileName: "", lineNumber: 545, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", __source: { fileName: "", lineNumber: 546, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-cyan-300", __source: { fileName: "", lineNumber: 547, columnNumber: 13 }, __self: this }, "© 2025 Talent XYZ. All rights reserved."))))); }

Talent XYZBlog