AI Toolkit – Homepage<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* --- GLOBAL & WRAPPER --- *\/\n #ai-toolkit-homepage {\n background-color: #050505;\n font-family: 'Inter', sans-serif;\n color: white;\n position: relative;\n padding: 0;\n box-sizing: border-box;\n \n \/* FORCE FULL WIDTH BREAKOUT *\/\n width: 100vw;\n margin-left: calc(50% - 50vw);\n margin-right: calc(50% - 50vw);\n overflow-x: hidden; \n max-width: 100vw;\n }\n\n #ai-toolkit-homepage * { box-sizing: border-box; }\n\n #ai-toolkit-homepage h1, \n #ai-toolkit-homepage h2, \n #ai-toolkit-homepage h3, \n #ai-toolkit-homepage h4 {\n font-family: 'Playfair Display', serif;\n }\n\n .custom-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n max-width: 1536px;\n position: relative;\n z-index: 10;\n }\n\n \/* --- DECORATIVE --- *\/\n \/* Updated Grid Pattern to be Fixed\/Global *\/\n .global-grid-pattern {\n background-image: \n linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\n background-size: 40px 40px;\n mask-image: radial-gradient(circle at 50% 0%, black 40%, transparent 100%);\n -webkit-mask-image: radial-gradient(circle at 50% 0%, black 40%, transparent 100%);\n position: absolute; \/* Changed to absolute within the relative wrapper *\/\n top: 0; \n left: 0; \n width: 100%; \n height: 100%;\n pointer-events: none; \n z-index: 0; \n opacity: 0.5;\n }\n\n \/* --- HERO SECTION --- *\/\n #hero-canvas {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; pointer-events: none;\n }\n \n .character-container { perspective: 1000px; transform-style: preserve-3d; }\n .character-card { transition: transform 0.1s ease-out; transform-style: preserve-3d; }\n .floating-anim { animation: float 6s ease-in-out infinite; }\n \n @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }\n \n \/* Floating Icons Animations *\/\n @keyframes float-icon-1 { 0%, 100% { transform: translate(0, 0) rotate(-5deg); } 50% { transform: translate(10px, -15px) rotate(5deg); } }\n @keyframes float-icon-2 { 0%, 100% { transform: translate(0, 0) rotate(5deg); } 50% { transform: translate(-10px, -20px) rotate(-5deg); } }\n @keyframes float-icon-3 { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(15px, -10px) rotate(0deg); } }\n\n \/* --- CATEGORIES BENTO GRID --- *\/\n .bento-card {\n background: rgba(15, 18, 25, 0.8);\n backdrop-filter: blur(12px);\n border-radius: 1.5rem;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative; overflow: hidden;\n border: 1px solid rgba(245, 158, 11, 0.4); \n box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);\n display: flex; flex-direction: column; justify-content: space-between; z-index: 10;\n }\n .bento-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.15);\n border-color: rgba(245, 158, 11, 0.8);\n background: rgba(20, 24, 33, 0.95);\n }\n .bento-card::before {\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);\n transition: left 0.6s; z-index: 1; pointer-events: none;\n }\n .bento-card:hover::before { left: 100%; }\n .bento-card > * { position: relative; z-index: 2; }\n\n .bento-icon {\n width: 50px; height: 50px; border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.25rem; color: white; margin-bottom: 1rem; transition: transform 0.3s ease;\n }\n @media (min-width: 768px) { .bento-icon { margin-bottom: 1.5rem; } }\n .bento-card:hover .bento-icon { transform: scale(1.1) rotate(5deg); }\n \n .icon-blue { background-color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }\n .icon-purple { background-color: #8b5cf6; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); }\n .icon-teal { background-color: #14b8a6; box-shadow: 0 0 15px rgba(20, 184, 166, 0.3); }\n .icon-green { background-color: #22c55e; box-shadow: 0 0 15px rgba(34, 197, 94, 0.3); }\n .icon-gold { background-color: #f59e0b; box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }\n\n .ghost-icon {\n position: absolute; right: -20px; top: 20px; font-size: 8rem; opacity: 0.05;\n transform: rotate(10deg); pointer-events: none; transition: transform 0.4s ease; z-index: 0; color: #f59e0b;\n }\n .bento-card:hover .ghost-icon { transform: rotate(0deg) scale(1.1); opacity: 0.1; }\n .bento-featured .ghost-icon { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); font-size: 15rem; opacity: 0.05; }\n .bento-featured { border: 1px solid rgba(245, 158, 11, 0.6); }\n .bento-featured::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1)); z-index: 0; pointer-events: none; }\n\n .bento-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; }\n @media (min-width: 768px) { .bento-grid { gap: 1.5rem; } }\n .bento-col-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }\n @media (min-width: 768px) { .bento-col-right { gap: 1.5rem; display: flex; flex-direction: column; } }\n @media (min-width: 1024px) { \n .bento-grid { grid-template-columns: 35% 1fr; } \n .bento-col-right { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; grid-template-rows: auto auto auto; }\n .span-full { grid-column: 1 \/ -1; }\n }\n\n \/* --- POST CAROUSEL --- *\/\n .carousel-container { position: relative; width: 100%; overflow: hidden; padding: 20px 0; }\n .carousel-track {\n display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.5rem;\n padding-bottom: 2rem; scrollbar-width: none; -ms-overflow-style: none;\n \/* scroll-behavior: smooth; REMOVED to allow instant JS jump for looping *\/\n padding-left: 0.5rem; padding-right: 0.5rem;\n }\n .carousel-track::-webkit-scrollbar { display: none; }\n\n .post-card {\n flex: 0 0 85%; max-width: 85%; scroll-snap-align: start; background: #0f1219;\n border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.25rem; overflow: hidden;\n transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; transform: translateZ(0);\n }\n @media (min-width: 640px) { .post-card { flex: 0 0 45%; max-width: 45%; } }\n @media (min-width: 1024px) { .post-card { flex: 0 0 30%; max-width: 30%; } }\n \n .post-card:hover { transform: translateY(-5px); border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }\n \n .post-image { height: 200px; width: 100%; position: relative; background: #0f1219; flex-shrink: 0; overflow: hidden; z-index: 1; }\n .post-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }\n .post-card:hover .post-image img { transform: scale(1.05); }\n \n .post-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 3; background: #0f1219; margin-top: -1px; }\n .post-tag { display: inline-block; padding: 0.25rem 0.75rem; background: rgba(245, 158, 11, 0.1); color: #f59e0b; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; margin-bottom: 0.75rem; width: fit-content; }\n\n .floating-nav-btn {\n position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;\n background-color: rgba(15, 18, 25, 0.8); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1);\n color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50;\n transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: auto;\n }\n .carousel-container:hover .floating-nav-btn { opacity: 1; }\n @media (max-width: 768px) { .floating-nav-btn { opacity: 1; width: 40px; height: 40px; background-color: rgba(15, 18, 25, 0.95); } }\n .floating-nav-btn:hover { background-color: #f59e0b; border-color: #f59e0b; color: black; transform: translateY(-50%) scale(1.1); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }\n .btn-prev { left: 10px; } .btn-next { right: 10px; }\n\n .spinner { border: 4px solid rgba(255, 255, 255, 0.1); border-left-color: #f59e0b; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\n \/* --- ABOUT ME --- *\/\n .avatar-glow {\n position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);\n filter: blur(40px); z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);\n }\n .avatar-img { position: relative; z-index: 2; width: 100%; max-width: 450px; height: auto; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); }\n \n .bio-card {\n background: rgba(15, 18, 25, 0.4); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05);\n border-left: 4px solid #f59e0b; border-radius: 1rem; padding: 2rem; position: relative;\n }\n .stat-badge {\n display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(245, 158, 11, 0.1);\n border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 9999px; color: #f59e0b; font-size: 0.875rem; font-weight: 600; margin-bottom: 1.5rem;\n }\n <\/style>\n<\/head>\n<body style=\"margin: 0; padding: 0;\">\n\n\n<div id=\"ai-toolkit-homepage\">\n\n \n <div class=\"global-grid-pattern\"><\/div>\n\n \n \n <section class=\"relative min-h-[60vh] flex items-center justify-center py-2 lg:py-8\">\n <canvas id=\"hero-canvas\"><\/canvas>\n <div class=\"custom-container\">\n <div class=\"flex flex-col-reverse lg:flex-row items-center justify-between\">\n \n \n <div class=\"w-full lg:w-1\/2 mb-8 lg:mb-0 text-center lg:text-left pt-0\">\n <div class=\"inline-block px-4 py-1.5 mb-6 md:mb-8 border border-yellow-500\/30 rounded-full bg-yellow-900\/10 backdrop-blur-md shadow-[0_0_15px_rgba(234,179,8,0.2)]\">\n <span class=\"text-[10px] md:text-xs text-yellow-400 uppercase tracking-[0.2em] font-bold flex items-center justify-center lg:justify-start gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-yellow-400 animate-ping\"><\/span>\n AI-Powered Dominion\n <\/span>\n <\/div>\n \n <h1 class=\"text-4xl md:text-5xl lg:text-7xl font-bold leading-[1.1] mb-6 md:mb-8 text-white tracking-tight font-serif\">\n Construct Your <br \/>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-orange-400 to-yellow-600 drop-shadow-lg filter\">Digital Empire<\/span>\n <\/h1>\n \n <p class=\"text-gray-300 text-base md:text-xl lg:text-2xl mb-8 md:mb-12 max-w-xl mx-auto lg:mx-0 leading-relaxed font-light opacity-90\">\n Stop competing. Start conquering. Unleash a fleet of autonomous AI agents to scour the market, predict winners, and scale your campaigns while you sleep.\n <\/p>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 flex justify-center items-center relative h-[480px] lg:h-[800px] character-container\" id=\"character-wrapper\">\n <div class=\"absolute w-[300px] h-[300px] md:w-[400px] md:h-[400px] lg:w-[600px] lg:h-[600px] border border-gray-800 rounded-full animate-[spin_20s_linear_infinite] opacity-30\"><\/div>\n <div class=\"absolute w-[250px] h-[250px] md:w-[350px] md:h-[350px] lg:w-[500px] lg:h-[500px] border border-dashed border-gray-700 rounded-full animate-[spin_15s_linear_infinite_reverse] opacity-20\"><\/div>\n\n <div class=\"character-card relative z-10 w-full max-w-[500px] lg:max-w-2xl floating-anim\" id=\"tilt-card\">\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[80%] h-[80%] bg-orange-500\/20 blur-[60px] md:blur-[80px] rounded-full\"><\/div>\n <img decoding=\"async\" src=\"http:\/\/theaitoolkit.org\/wp-content\/uploads\/2025\/12\/character_transparent.png\" alt=\"3D Tech Character\" class=\"w-full h-auto object-contain drop-shadow-2xl mask-image-gradient relative z-10 scale-110 md:scale-100 origin-bottom\" style=\"mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\">\n \n \n <div class=\"absolute top-24 right-8 md:top-20 md:right-16 w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-2xl flex items-center justify-center text-xl md:text-3xl text-white shadow-lg transform rotate-12 translate-z-20 animate-[float-icon-1_4s_ease-in-out_infinite] z-20\"><i class=\"fas fa-dollar-sign\"><\/i><\/div>\n <div class=\"absolute bottom-24 left-6 md:bottom-32 md:left-12 w-14 h-14 md:w-20 md:h-20 bg-gradient-to-br from-green-400 to-cyan-600 rounded-full flex items-center justify-center text-xl md:text-3xl text-white shadow-lg transform -rotate-12 translate-z-30 animate-[float-icon-2_5s_ease-in-out_infinite] z-20\"><i class=\"fas fa-chart-line\"><\/i><\/div>\n <div class=\"absolute top-1\/3 left-2 md:left-4 w-10 h-10 md:w-14 md:h-14 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg flex items-center justify-center text-lg md:text-2xl text-white shadow-lg transform rotate-6 translate-z-10 animate-[float-icon-3_4.5s_ease-in-out_infinite] z-20\"><i class=\"fas fa-users\"><\/i><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-8 md:py-20 relative z-20 w-full overflow-hidden\">\n \n <div class=\"custom-container relative z-10\">\n <div class=\"mb-8 md:mb-12 text-center md:text-left\">\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-2\">Browse by <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Category<\/span><\/h2>\n <p class=\"text-gray-400 text-base md:text-lg\">Find the specific tool for your workflow.<\/p>\n <\/div>\n\n <div class=\"bento-grid\">\n \n <a href=\"https:\/\/theaitoolkit.org\/category\/top-tools\/\" class=\"bento-card bento-featured h-64 md:h-96 lg:h-auto group p-6 md:p-8\">\n <i class=\"fas fa-crown ghost-icon\"><\/i>\n <div class=\"relative z-10 flex flex-col h-full justify-end\">\n <div class=\"bento-icon icon-gold mb-auto\"><i class=\"fas fa-crown\"><\/i><\/div>\n <div class=\"mt-2 md:mt-8\">\n <h3 class=\"text-2xl md:text-3xl font-bold text-white mb-2 md:mb-3\">Top Tools<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-xs md:text-sm md:text-base font-light\">The absolute best, highest-converting AI tools vetted for maximum ROI this month. We curate the winners so you don’t have to.<\/p>\n <\/div>\n <\/div>\n <\/a>\n\n \n <div class=\"bento-col-right\">\n <a href=\"https:\/\/theaitoolkit.org\/category\/video-generation\/\" class=\"bento-card span-full group h-auto md:h-48 p-6 md:p-8\">\n <i class=\"fas fa-video ghost-icon\"><\/i>\n <div class=\"flex flex-col md:flex-row justify-between items-start h-full relative z-10 gap-3 md:gap-0\">\n <div class=\"flex flex-col justify-between h-full max-w-full md:max-w-[70%]\">\n <div><h3 class=\"text-lg md:text-xl font-bold text-white mb-2\">Video Generation<\/h3><p class=\"text-gray-400 text-xs md:text-sm\">Discover the best AI video generation tools to create stunning videos in seconds. Explore top-rated platforms for ads, content creation, UGC, automation, and more\u2014tested and curated for modern creators and marketers.<\/p><\/div>\n <\/div>\n <div class=\"bento-icon icon-purple shrink-0\"><i class=\"fas fa-video\"><\/i><\/div>\n <\/div>\n <\/a>\n <a href=\"https:\/\/theaitoolkit.org\/category\/ai-copywriting\/\" class=\"bento-card span-full group h-auto md:h-48 p-6 md:p-8\">\n <i class=\"fas fa-pen-nib ghost-icon\"><\/i>\n <div class=\"flex flex-col md:flex-row justify-between items-start h-full relative z-10 gap-3 md:gap-0\">\n <div class=\"flex flex-col justify-between h-full max-w-full md:max-w-[70%]\">\n <div><h3 class=\"text-lg md:text-xl font-bold text-white mb-2\">AI Copywriting<\/h3><p class=\"text-gray-400 text-xs md:text-sm\">Discover the best AI copywriting tools to write faster, smarter, and more persuasively. Perfect for ads, landing pages, social posts, emails, and long-form content.<\/p><\/div>\n <\/div>\n <div class=\"bento-icon icon-blue shrink-0\"><i class=\"fas fa-pen-nib\"><\/i><\/div>\n <\/div>\n <\/a>\n <a href=\"https:\/\/theaitoolkit.org\/category\/image-ai\/\" class=\"bento-card group h-40 md:h-56 p-6 md:p-8\">\n <i class=\"fas fa-image ghost-icon\"><\/i>\n <div class=\"flex flex-col h-full justify-between relative z-10\">\n <div class=\"bento-icon icon-teal\"><i class=\"fas fa-image\"><\/i><\/div>\n <div><h3 class=\"text-base md:text-lg font-bold text-white mb-1\">Image AI<\/h3><p class=\"text-gray-400 text-[10px] md:text-xs\">Generative Art Tools<\/p><\/div>\n <\/div>\n <\/a>\n <a href=\"https:\/\/theaitoolkit.org\/category\/seo-tools\/\" class=\"bento-card group h-40 md:h-56 p-6 md:p-8\">\n <i class=\"fas fa-search-dollar ghost-icon\"><\/i>\n <div class=\"flex flex-col h-full justify-between relative z-10\">\n <div class=\"bento-icon icon-green\"><i class=\"fas fa-search-dollar\"><\/i><\/div>\n <div><h3 class=\"text-base md:text-lg font-bold text-white mb-1\">SEO Tools<\/h3><p class=\"text-gray-400 text-[10px] md:text-xs\">Rank Higher Faster<\/p><\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-12 md:py-20 relative z-20 w-full\">\n <div class=\"custom-container relative z-10\">\n <div class=\"flex flex-row justify-between items-end mb-8 md:mb-12\">\n <div class=\"max-w-2xl\">\n <h2 class=\"text-2xl md:text-4xl font-bold text-white\">Trending in <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Top Tools<\/span><\/h2>\n <\/div>\n <\/div>\n \n <div class=\"carousel-container group\">\n <button onclick=\"scrollCarousel('postCarousel-top', -1)\" class=\"floating-nav-btn btn-prev\" aria-label=\"Scroll Left\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n <button onclick=\"scrollCarousel('postCarousel-top', 1)\" class=\"floating-nav-btn btn-next\" aria-label=\"Scroll Right\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n \n <div class=\"carousel-track\" id=\"postCarousel-top\">\n \n <div id=\"loading-top\" class=\"w-full flex flex-col justify-center items-center py-12\">\n <div class=\"spinner mb-4\"><\/div>\n <p class=\"text-gray-500 text-sm\">Loading Top Tools…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-12 md:py-20 relative z-20 w-full\">\n <div class=\"custom-container relative z-10\">\n <div class=\"flex flex-row justify-between items-end mb-8 md:mb-12\">\n <div class=\"max-w-2xl\">\n <h2 class=\"text-2xl md:text-4xl font-bold text-white\">Check Out Our <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Latest Review<\/span><\/h2>\n <\/div>\n <\/div>\n \n <div class=\"carousel-container group\">\n <button onclick=\"scrollCarousel('postCarousel-latest', -1)\" class=\"floating-nav-btn btn-prev\" aria-label=\"Scroll Left\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n <button onclick=\"scrollCarousel('postCarousel-latest', 1)\" class=\"floating-nav-btn btn-next\" aria-label=\"Scroll Right\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n \n <div class=\"carousel-track\" id=\"postCarousel-latest\">\n \n <div id=\"loading-latest\" class=\"w-full flex flex-col justify-center items-center py-12\">\n <div class=\"spinner mb-4\"><\/div>\n <p class=\"text-gray-500 text-sm\">Loading Reviews…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 md:py-24 relative z-20 w-full overflow-hidden\">\n \n <div class=\"custom-container relative z-10\">\n <div class=\"flex flex-col md:flex-row items-center gap-12 md:gap-20\">\n \n \n <div class=\"w-full md:w-5\/12 avatar-container relative z-10 flex justify-center items-center\">\n <div class=\"avatar-glow\"><\/div>\n <img decoding=\"async\" src=\"http:\/\/theaitoolkit.org\/wp-content\/uploads\/2025\/12\/character_transparent.png\" \n alt=\"Imran Alam\" \n class=\"avatar-img mask-image-gradient\"\n style=\"mask-image: linear-gradient(to bottom, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\"\n >\n <\/div>\n\n \n <div class=\"w-full md:w-7\/12\">\n <div class=\"stat-badge\"><i class=\"fas fa-certificate\"><\/i> ClickBank Platinum Marketer<\/div>\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight\">\n Meet <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Imran Alam<\/span>\n <\/h2>\n <div class=\"bio-card\">\n <p class=\"text-gray-300 text-lg leading-relaxed mb-6\">I\u2019m the creator of <strong class=\"text-white\">The Ai Toolkit<\/strong> and a seasoned affiliate marketer with <span class=\"text-yellow-500 font-semibold\">6+ years of experience<\/span> across ClickBank, JVZoo, and WarriorPlus.<\/p>\n <p class=\"text-gray-400 text-base leading-relaxed mb-6\">Over the years, I\u2019ve tested hundreds of AI and digital tools\u2014learning exactly which ones deliver real results and which ones waste your time and money.<\/p>\n <p class=\"text-gray-400 text-base leading-relaxed\">I built The Ai Toolkit to help marketers, creators, and entrepreneurs make smarter decisions with honest, performance-based recommendations. Every tool listed here is personally evaluated for value, efficiency, and real-world impact\u2014so you can focus on growing your business with the right tools from day one.<\/p>\n <\/div>\n <div class=\"mt-8 flex items-center gap-6\">\n <div class=\"flex gap-4\">\n <a href=\"https:\/\/x.com\/ImranAlam_d\" target=\"_blank\" class=\"w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-yellow-600 hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/www.linkedin.com\/in\/imran-alam-019b551b1\/\" target=\"_blank\" class=\"w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-yellow-600 hover:text-white transition-all\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/imran_alam_d\/\" target=\"_blank\" class=\"w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-yellow-600 hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <\/div>\n <div class=\"h-px bg-gray-800 flex-grow\"><\/div>\n <span class=\"text-gray-500 font-serif italic\">The AI Toolkit<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<\/div>\n\n\n<script>\n \/\/ --- 1. THREE.JS & TILT (Hero) ---\n const initThreeJS = () => {\n const canvas = document.getElementById('hero-canvas');\n const wrapper = document.getElementById('ai-toolkit-homepage');\n if (!canvas || !wrapper || typeof THREE === 'undefined') return;\n\n const scene = new THREE.Scene();\n scene.fog = new THREE.FogExp2(0x050505, 0.002);\n const camera = new THREE.PerspectiveCamera(75, wrapper.clientWidth \/ window.innerHeight, 0.1, 1000);\n camera.position.z = 50;\n const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });\n \n const updateSize = () => {\n renderer.setSize(wrapper.clientWidth, window.innerHeight);\n camera.aspect = wrapper.clientWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n };\n updateSize();\n\n const particlesGeometry = new THREE.BufferGeometry();\n const particlesCount = 130;\n const posArray = new Float32Array(particlesCount * 3);\n for(let i = 0; i < particlesCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 150; }\n particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));\n const particlesMaterial = new THREE.PointsMaterial({ size: 0.4, color: 0xcd853f, transparent: true, opacity: 0.9 });\n const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\n scene.add(particlesMesh);\n\n let mouseX = 0; let mouseY = 0;\n const animate = () => {\n requestAnimationFrame(animate);\n particlesMesh.rotation.y += 0.001; particlesMesh.rotation.x += 0.0005;\n particlesMesh.rotation.x += mouseY * 0.00005; particlesMesh.rotation.y += mouseX * 0.00005;\n renderer.render(scene, camera);\n };\n animate();\n\n window.addEventListener('resize', updateSize);\n wrapper.addEventListener('mousemove', (e) => {\n const rect = wrapper.getBoundingClientRect();\n mouseX = (e.clientX - rect.left) - rect.width \/ 2; mouseY = (e.clientY - rect.top) - rect.height \/ 2;\n });\n };\n\n const initTilt = () => {\n const container = document.getElementById('character-wrapper');\n const card = document.getElementById('tilt-card');\n if (!container || !card) return;\n container.addEventListener('mousemove', (e) => {\n const rect = container.getBoundingClientRect();\n const x = e.clientX - rect.left; const y = e.clientY - rect.top;\n const rotateX = (0.5 - y \/ rect.height) * 20; const rotateY = (x \/ rect.width - 0.5) * 20;\n card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n });\n container.addEventListener('mouseleave', () => {\n card.style.transition = 'transform 0.5s ease'; card.style.transform = `rotateX(0deg) rotateY(0deg)`;\n setTimeout(() => { card.style.transition = 'transform 0.1s ease-out'; }, 500);\n });\n };\n\n \/\/ --- 2. CAROUSEL FETCHING & LOOPING ---\n const apiBase = 'https:\/\/theaitoolkit.org\/wp-json\/wp\/v2';\n\n \/\/ Scroll Function (Global) - Added behavior smooth explicitly here\n window.scrollCarousel = (id, direction) => {\n const container = document.getElementById(id);\n if(container) container.scrollBy({ left: direction * 350, behavior: 'smooth' });\n };\n\n async function fetchCategoryPosts(slug, containerId, loadingId, tagName) {\n const slider = document.getElementById(containerId);\n const spinner = document.getElementById(loadingId);\n \n try {\n const catResponse = await fetch(`${apiBase}\/categories?slug=${slug}`);\n const categories = await catResponse.json();\n\n if (!categories.length) {\n if(spinner) spinner.innerHTML = `<p class=\"text-gray-500\">Category \"${slug}\" not found.<\/p>`;\n return;\n }\n\n const categoryId = categories[0].id;\n const postsResponse = await fetch(`${apiBase}\/posts?categories=${categoryId}&per_page=20&_embed`);\n const posts = await postsResponse.json();\n\n if (spinner) spinner.style.display = 'none';\n\n if (posts.length === 0) {\n slider.innerHTML += '<p class=\"text-gray-500 p-4\">No posts found.<\/p>';\n return;\n }\n\n \/\/ 1. Build HTML string for cards\n let postsHTML = '';\n posts.forEach(post => {\n const title = post.title.rendered;\n const link = post.link;\n const tempDiv = document.createElement('div');\n tempDiv.innerHTML = post.excerpt.rendered || '';\n const excerpt = tempDiv.textContent.substring(0, 100) + '...';\n \n let imageUrl = 'https:\/\/via.placeholder.com\/400x250\/0f1219\/ffffff?text=AI+Toolkit'; \n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n imageUrl = post._embedded['wp:featuredmedia'][0].source_url;\n }\n\n postsHTML += `\n <a href=\"${link}\" class=\"post-card group\">\n <div class=\"post-image\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${title}\" loading=\"lazy\">\n <\/div>\n <div class=\"post-content\">\n <span class=\"post-tag\">${tagName}<\/span>\n <h3 class=\"text-xl font-bold text-white mb-2 leading-tight group-hover:text-yellow-400 transition-colors\">${title}<\/h3>\n <p class=\"text-gray-300 text-sm mb-4 line-clamp-2 font-light\">${excerpt}<\/p>\n <div class=\"mt-auto text-yellow-500 text-sm font-medium flex items-center gap-2\">Read Post <i class=\"fas fa-arrow-right transition-transform group-hover:translate-x-1\"><\/i><\/div>\n <\/div>\n <\/a>\n `;\n });\n\n \/\/ 2. DUPLICATE CONTENT FOR LOOPING\n \/\/ Append the original set AND a clone set to the slider\n slider.innerHTML = postsHTML + postsHTML;\n\n \/\/ 3. INFINITE LOOP SCROLL LISTENER\n \/\/ When we scroll past the end of the first set (approx half the scrollWidth),\n \/\/ reset to the beginning of the first set.\n slider.addEventListener('scroll', () => {\n \/\/ Determine the width of one set of posts\n \/\/ Since content is doubled, one set is roughly half the scrollWidth.\n \/\/ We use a small tolerance or just >= check.\n if (slider.scrollLeft >= (slider.scrollWidth \/ 2)) {\n \/\/ Instantly jump back to the start (minus the offset of the second set)\n \/\/ Because the sets are identical, this jump is invisible to the user.\n \/\/ NOTE: This works seamlessly because 'scroll-behavior: smooth' was removed from CSS.\n slider.scrollLeft = slider.scrollLeft - (slider.scrollWidth \/ 2);\n }\n });\n\n } catch (error) {\n console.error(`Error fetching ${slug}:`, error);\n if(spinner) spinner.innerHTML = `<p class=\"text-red-400 text-sm\">Failed to load content.<\/p>`;\n }\n }\n\n \/\/ --- INIT ---\n const startApp = () => {\n \/\/ Init 3D\n if (typeof THREE !== 'undefined') { initThreeJS(); initTilt(); } \n else { setTimeout(() => { if (typeof THREE !== 'undefined') { initThreeJS(); initTilt(); } }, 500); }\n\n \/\/ Fetch Posts\n fetchCategoryPosts('top-tools', 'postCarousel-top', 'loading-top', 'Top Tools');\n fetchCategoryPosts('latest-review', 'postCarousel-latest', 'loading-latest', 'Latest Review');\n };\n\n if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', startApp); } \n else { startApp(); }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AI Toolkit – Homepage AI-Powered Dominion Construct Your Digital Empire Stop competing. Start conquering. Unleash a fleet of autonomous AI […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olarvo.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=83"}],"version-history":[{"count":1,"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":83,"date":"2025-12-17T17:25:56","date_gmt":"2025-12-17T17:25:56","guid":{"rendered":"https:\/\/olarvo.in\/?page_id=83"},"modified":"2025-12-17T17:25:56","modified_gmt":"2025-12-17T17:25:56","slug":"front-page","status":"publish","type":"page","link":"https:\/\/olarvo.in\/?page_id=83","title":{"rendered":"front page"},"content":{"rendered":"\n\n\n\n \n \n AI Toolkit – Homepage<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* --- GLOBAL & WRAPPER --- *\/\n #ai-toolkit-homepage {\n background-color: #050505;\n font-family: 'Inter', sans-serif;\n color: white;\n position: relative;\n padding: 0;\n box-sizing: border-box;\n \n \/* FORCE FULL WIDTH BREAKOUT *\/\n width: 100vw;\n margin-left: calc(50% - 50vw);\n margin-right: calc(50% - 50vw);\n overflow-x: hidden; \n max-width: 100vw;\n }\n\n #ai-toolkit-homepage * { box-sizing: border-box; }\n\n #ai-toolkit-homepage h1, \n #ai-toolkit-homepage h2, \n #ai-toolkit-homepage h3, \n #ai-toolkit-homepage h4 {\n font-family: 'Playfair Display', serif;\n }\n\n .custom-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n max-width: 1536px;\n position: relative;\n z-index: 10;\n }\n\n \/* --- DECORATIVE --- *\/\n \/* Updated Grid Pattern to be Fixed\/Global *\/\n .global-grid-pattern {\n background-image: \n linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\n background-size: 40px 40px;\n mask-image: radial-gradient(circle at 50% 0%, black 40%, transparent 100%);\n -webkit-mask-image: radial-gradient(circle at 50% 0%, black 40%, transparent 100%);\n position: absolute; \/* Changed to absolute within the relative wrapper *\/\n top: 0; \n left: 0; \n width: 100%; \n height: 100%;\n pointer-events: none; \n z-index: 0; \n opacity: 0.5;\n }\n\n \/* --- HERO SECTION --- *\/\n #hero-canvas {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; pointer-events: none;\n }\n \n .character-container { perspective: 1000px; transform-style: preserve-3d; }\n .character-card { transition: transform 0.1s ease-out; transform-style: preserve-3d; }\n .floating-anim { animation: float 6s ease-in-out infinite; }\n \n @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }\n \n \/* Floating Icons Animations *\/\n @keyframes float-icon-1 { 0%, 100% { transform: translate(0, 0) rotate(-5deg); } 50% { transform: translate(10px, -15px) rotate(5deg); } }\n @keyframes float-icon-2 { 0%, 100% { transform: translate(0, 0) rotate(5deg); } 50% { transform: translate(-10px, -20px) rotate(-5deg); } }\n @keyframes float-icon-3 { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(15px, -10px) rotate(0deg); } }\n\n \/* --- CATEGORIES BENTO GRID --- *\/\n .bento-card {\n background: rgba(15, 18, 25, 0.8);\n backdrop-filter: blur(12px);\n border-radius: 1.5rem;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative; overflow: hidden;\n border: 1px solid rgba(245, 158, 11, 0.4); \n box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);\n display: flex; flex-direction: column; justify-content: space-between; z-index: 10;\n }\n .bento-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.15);\n border-color: rgba(245, 158, 11, 0.8);\n background: rgba(20, 24, 33, 0.95);\n }\n .bento-card::before {\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);\n transition: left 0.6s; z-index: 1; pointer-events: none;\n }\n .bento-card:hover::before { left: 100%; }\n .bento-card > * { position: relative; z-index: 2; }\n\n .bento-icon {\n width: 50px; height: 50px; border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.25rem; color: white; margin-bottom: 1rem; transition: transform 0.3s ease;\n }\n @media (min-width: 768px) { .bento-icon { margin-bottom: 1.5rem; } }\n .bento-card:hover .bento-icon { transform: scale(1.1) rotate(5deg); }\n \n .icon-blue { background-color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }\n .icon-purple { background-color: #8b5cf6; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); }\n .icon-teal { background-color: #14b8a6; box-shadow: 0 0 15px rgba(20, 184, 166, 0.3); }\n .icon-green { background-color: #22c55e; box-shadow: 0 0 15px rgba(34, 197, 94, 0.3); }\n .icon-gold { background-color: #f59e0b; box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }\n\n .ghost-icon {\n position: absolute; right: -20px; top: 20px; font-size: 8rem; opacity: 0.05;\n transform: rotate(10deg); pointer-events: none; transition: transform 0.4s ease; z-index: 0; color: #f59e0b;\n }\n .bento-card:hover .ghost-icon { transform: rotate(0deg) scale(1.1); opacity: 0.1; }\n .bento-featured .ghost-icon { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); font-size: 15rem; opacity: 0.05; }\n .bento-featured { border: 1px solid rgba(245, 158, 11, 0.6); }\n .bento-featured::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1)); z-index: 0; pointer-events: none; }\n\n .bento-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; }\n @media (min-width: 768px) { .bento-grid { gap: 1.5rem; } }\n .bento-col-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }\n @media (min-width: 768px) { .bento-col-right { gap: 1.5rem; display: flex; flex-direction: column; } }\n @media (min-width: 1024px) { \n .bento-grid { grid-template-columns: 35% 1fr; } \n .bento-col-right { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; grid-template-rows: auto auto auto; }\n .span-full { grid-column: 1 \/ -1; }\n }\n\n \/* --- POST CAROUSEL --- *\/\n .carousel-container { position: relative; width: 100%; overflow: hidden; padding: 20px 0; }\n .carousel-track {\n display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.5rem;\n padding-bottom: 2rem; scrollbar-width: none; -ms-overflow-style: none;\n \/* scroll-behavior: smooth; REMOVED to allow instant JS jump for looping *\/\n padding-left: 0.5rem; padding-right: 0.5rem;\n }\n .carousel-track::-webkit-scrollbar { display: none; }\n\n .post-card {\n flex: 0 0 85%; max-width: 85%; scroll-snap-align: start; background: #0f1219;\n border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.25rem; overflow: hidden;\n transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; transform: translateZ(0);\n }\n @media (min-width: 640px) { .post-card { flex: 0 0 45%; max-width: 45%; } }\n @media (min-width: 1024px) { .post-card { flex: 0 0 30%; max-width: 30%; } }\n \n .post-card:hover { transform: translateY(-5px); border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }\n \n .post-image { height: 200px; width: 100%; position: relative; background: #0f1219; flex-shrink: 0; overflow: hidden; z-index: 1; }\n .post-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }\n .post-card:hover .post-image img { transform: scale(1.05); }\n \n .post-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 3; background: #0f1219; margin-top: -1px; }\n .post-tag { display: inline-block; padding: 0.25rem 0.75rem; background: rgba(245, 158, 11, 0.1); color: #f59e0b; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; margin-bottom: 0.75rem; width: fit-content; }\n\n .floating-nav-btn {\n position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;\n background-color: rgba(15, 18, 25, 0.8); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1);\n color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50;\n transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: auto;\n }\n .carousel-container:hover .floating-nav-btn { opacity: 1; }\n @media (max-width: 768px) { .floating-nav-btn { opacity: 1; width: 40px; height: 40px; background-color: rgba(15, 18, 25, 0.95); } }\n .floating-nav-btn:hover { background-color: #f59e0b; border-color: #f59e0b; color: black; transform: translateY(-50%) scale(1.1); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }\n .btn-prev { left: 10px; } .btn-next { right: 10px; }\n\n .spinner { border: 4px solid rgba(255, 255, 255, 0.1); border-left-color: #f59e0b; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\n \/* --- ABOUT ME --- *\/\n .avatar-glow {\n position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);\n filter: blur(40px); z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);\n }\n .avatar-img { position: relative; z-index: 2; width: 100%; max-width: 450px; height: auto; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); }\n \n .bio-card {\n background: rgba(15, 18, 25, 0.4); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05);\n border-left: 4px solid #f59e0b; border-radius: 1rem; padding: 2rem; position: relative;\n }\n .stat-badge {\n display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(245, 158, 11, 0.1);\n border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 9999px; color: #f59e0b; font-size: 0.875rem; font-weight: 600; margin-bottom: 1.5rem;\n }\n <\/style>\n<\/head>\n<body style=\"margin: 0; padding: 0;\">\n\n\n<div id=\"ai-toolkit-homepage\">\n\n \n <div class=\"global-grid-pattern\"><\/div>\n\n \n \n <section class=\"relative min-h-[60vh] flex items-center justify-center py-2 lg:py-8\">\n <canvas id=\"hero-canvas\"><\/canvas>\n <div class=\"custom-container\">\n <div class=\"flex flex-col-reverse lg:flex-row items-center justify-between\">\n \n \n <div class=\"w-full lg:w-1\/2 mb-8 lg:mb-0 text-center lg:text-left pt-0\">\n <div class=\"inline-block px-4 py-1.5 mb-6 md:mb-8 border border-yellow-500\/30 rounded-full bg-yellow-900\/10 backdrop-blur-md shadow-[0_0_15px_rgba(234,179,8,0.2)]\">\n <span class=\"text-[10px] md:text-xs text-yellow-400 uppercase tracking-[0.2em] font-bold flex items-center justify-center lg:justify-start gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-yellow-400 animate-ping\"><\/span>\n AI-Powered Dominion\n <\/span>\n <\/div>\n \n <h1 class=\"text-4xl md:text-5xl lg:text-7xl font-bold leading-[1.1] mb-6 md:mb-8 text-white tracking-tight font-serif\">\n Construct Your <br \/>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-orange-400 to-yellow-600 drop-shadow-lg filter\">Digital Empire<\/span>\n <\/h1>\n \n <p class=\"text-gray-300 text-base md:text-xl lg:text-2xl mb-8 md:mb-12 max-w-xl mx-auto lg:mx-0 leading-relaxed font-light opacity-90\">\n Stop competing. Start conquering. Unleash a fleet of autonomous AI agents to scour the market, predict winners, and scale your campaigns while you sleep.\n <\/p>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 flex justify-center items-center relative h-[480px] lg:h-[800px] character-container\" id=\"character-wrapper\">\n <div class=\"absolute w-[300px] h-[300px] md:w-[400px] md:h-[400px] lg:w-[600px] lg:h-[600px] border border-gray-800 rounded-full animate-[spin_20s_linear_infinite] opacity-30\"><\/div>\n <div class=\"absolute w-[250px] h-[250px] md:w-[350px] md:h-[350px] lg:w-[500px] lg:h-[500px] border border-dashed border-gray-700 rounded-full animate-[spin_15s_linear_infinite_reverse] opacity-20\"><\/div>\n\n <div class=\"character-card relative z-10 w-full max-w-[500px] lg:max-w-2xl floating-anim\" id=\"tilt-card\">\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[80%] h-[80%] bg-orange-500\/20 blur-[60px] md:blur-[80px] rounded-full\"><\/div>\n <img decoding=\"async\" src=\"http:\/\/theaitoolkit.org\/wp-content\/uploads\/2025\/12\/character_transparent.png\" alt=\"3D Tech Character\" class=\"w-full h-auto object-contain drop-shadow-2xl mask-image-gradient relative z-10 scale-110 md:scale-100 origin-bottom\" style=\"mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\">\n \n \n <div class=\"absolute top-24 right-8 md:top-20 md:right-16 w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-2xl flex items-center justify-center text-xl md:text-3xl text-white shadow-lg transform rotate-12 translate-z-20 animate-[float-icon-1_4s_ease-in-out_infinite] z-20\"><i class=\"fas fa-dollar-sign\"><\/i><\/div>\n <div class=\"absolute bottom-24 left-6 md:bottom-32 md:left-12 w-14 h-14 md:w-20 md:h-20 bg-gradient-to-br from-green-400 to-cyan-600 rounded-full flex items-center justify-center text-xl md:text-3xl text-white shadow-lg transform -rotate-12 translate-z-30 animate-[float-icon-2_5s_ease-in-out_infinite] z-20\"><i class=\"fas fa-chart-line\"><\/i><\/div>\n <div class=\"absolute top-1\/3 left-2 md:left-4 w-10 h-10 md:w-14 md:h-14 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg flex items-center justify-center text-lg md:text-2xl text-white shadow-lg transform rotate-6 translate-z-10 animate-[float-icon-3_4.5s_ease-in-out_infinite] z-20\"><i class=\"fas fa-users\"><\/i><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-8 md:py-20 relative z-20 w-full overflow-hidden\">\n \n <div class=\"custom-container relative z-10\">\n <div class=\"mb-8 md:mb-12 text-center md:text-left\">\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-2\">Browse by <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Category<\/span><\/h2>\n <p class=\"text-gray-400 text-base md:text-lg\">Find the specific tool for your workflow.<\/p>\n <\/div>\n\n <div class=\"bento-grid\">\n \n <a href=\"https:\/\/theaitoolkit.org\/category\/top-tools\/\" class=\"bento-card bento-featured h-64 md:h-96 lg:h-auto group p-6 md:p-8\">\n <i class=\"fas fa-crown ghost-icon\"><\/i>\n <div class=\"relative z-10 flex flex-col h-full justify-end\">\n <div class=\"bento-icon icon-gold mb-auto\"><i class=\"fas fa-crown\"><\/i><\/div>\n <div class=\"mt-2 md:mt-8\">\n <h3 class=\"text-2xl md:text-3xl font-bold text-white mb-2 md:mb-3\">Top Tools<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-xs md:text-sm md:text-base font-light\">The absolute best, highest-converting AI tools vetted for maximum ROI this month. We curate the winners so you don’t have to.<\/p>\n <\/div>\n <\/div>\n <\/a>\n\n \n <div class=\"bento-col-right\">\n <a href=\"https:\/\/theaitoolkit.org\/category\/video-generation\/\" class=\"bento-card span-full group h-auto md:h-48 p-6 md:p-8\">\n <i class=\"fas fa-video ghost-icon\"><\/i>\n <div class=\"flex flex-col md:flex-row justify-between items-start h-full relative z-10 gap-3 md:gap-0\">\n <div class=\"flex flex-col justify-between h-full max-w-full md:max-w-[70%]\">\n <div><h3 class=\"text-lg md:text-xl font-bold text-white mb-2\">Video Generation<\/h3><p class=\"text-gray-400 text-xs md:text-sm\">Discover the best AI video generation tools to create stunning videos in seconds. Explore top-rated platforms for ads, content creation, UGC, automation, and more\u2014tested and curated for modern creators and marketers.<\/p><\/div>\n <\/div>\n <div class=\"bento-icon icon-purple shrink-0\"><i class=\"fas fa-video\"><\/i><\/div>\n <\/div>\n <\/a>\n <a href=\"https:\/\/theaitoolkit.org\/category\/ai-copywriting\/\" class=\"bento-card span-full group h-auto md:h-48 p-6 md:p-8\">\n <i class=\"fas fa-pen-nib ghost-icon\"><\/i>\n <div class=\"flex flex-col md:flex-row justify-between items-start h-full relative z-10 gap-3 md:gap-0\">\n <div class=\"flex flex-col justify-between h-full max-w-full md:max-w-[70%]\">\n <div><h3 class=\"text-lg md:text-xl font-bold text-white mb-2\">AI Copywriting<\/h3><p class=\"text-gray-400 text-xs md:text-sm\">Discover the best AI copywriting tools to write faster, smarter, and more persuasively. Perfect for ads, landing pages, social posts, emails, and long-form content.<\/p><\/div>\n <\/div>\n <div class=\"bento-icon icon-blue shrink-0\"><i class=\"fas fa-pen-nib\"><\/i><\/div>\n <\/div>\n <\/a>\n <a href=\"https:\/\/theaitoolkit.org\/category\/image-ai\/\" class=\"bento-card group h-40 md:h-56 p-6 md:p-8\">\n <i class=\"fas fa-image ghost-icon\"><\/i>\n <div class=\"flex flex-col h-full justify-between relative z-10\">\n <div class=\"bento-icon icon-teal\"><i class=\"fas fa-image\"><\/i><\/div>\n <div><h3 class=\"text-base md:text-lg font-bold text-white mb-1\">Image AI<\/h3><p class=\"text-gray-400 text-[10px] md:text-xs\">Generative Art Tools<\/p><\/div>\n <\/div>\n <\/a>\n <a href=\"https:\/\/theaitoolkit.org\/category\/seo-tools\/\" class=\"bento-card group h-40 md:h-56 p-6 md:p-8\">\n <i class=\"fas fa-search-dollar ghost-icon\"><\/i>\n <div class=\"flex flex-col h-full justify-between relative z-10\">\n <div class=\"bento-icon icon-green\"><i class=\"fas fa-search-dollar\"><\/i><\/div>\n <div><h3 class=\"text-base md:text-lg font-bold text-white mb-1\">SEO Tools<\/h3><p class=\"text-gray-400 text-[10px] md:text-xs\">Rank Higher Faster<\/p><\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-12 md:py-20 relative z-20 w-full\">\n <div class=\"custom-container relative z-10\">\n <div class=\"flex flex-row justify-between items-end mb-8 md:mb-12\">\n <div class=\"max-w-2xl\">\n <h2 class=\"text-2xl md:text-4xl font-bold text-white\">Trending in <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Top Tools<\/span><\/h2>\n <\/div>\n <\/div>\n \n <div class=\"carousel-container group\">\n <button onclick=\"scrollCarousel('postCarousel-top', -1)\" class=\"floating-nav-btn btn-prev\" aria-label=\"Scroll Left\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n <button onclick=\"scrollCarousel('postCarousel-top', 1)\" class=\"floating-nav-btn btn-next\" aria-label=\"Scroll Right\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n \n <div class=\"carousel-track\" id=\"postCarousel-top\">\n \n <div id=\"loading-top\" class=\"w-full flex flex-col justify-center items-center py-12\">\n <div class=\"spinner mb-4\"><\/div>\n <p class=\"text-gray-500 text-sm\">Loading Top Tools…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-12 md:py-20 relative z-20 w-full\">\n <div class=\"custom-container relative z-10\">\n <div class=\"flex flex-row justify-between items-end mb-8 md:mb-12\">\n <div class=\"max-w-2xl\">\n <h2 class=\"text-2xl md:text-4xl font-bold text-white\">Check Out Our <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Latest Review<\/span><\/h2>\n <\/div>\n <\/div>\n \n <div class=\"carousel-container group\">\n <button onclick=\"scrollCarousel('postCarousel-latest', -1)\" class=\"floating-nav-btn btn-prev\" aria-label=\"Scroll Left\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n <button onclick=\"scrollCarousel('postCarousel-latest', 1)\" class=\"floating-nav-btn btn-next\" aria-label=\"Scroll Right\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n \n <div class=\"carousel-track\" id=\"postCarousel-latest\">\n \n <div id=\"loading-latest\" class=\"w-full flex flex-col justify-center items-center py-12\">\n <div class=\"spinner mb-4\"><\/div>\n <p class=\"text-gray-500 text-sm\">Loading Reviews…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 md:py-24 relative z-20 w-full overflow-hidden\">\n \n <div class=\"custom-container relative z-10\">\n <div class=\"flex flex-col md:flex-row items-center gap-12 md:gap-20\">\n \n \n <div class=\"w-full md:w-5\/12 avatar-container relative z-10 flex justify-center items-center\">\n <div class=\"avatar-glow\"><\/div>\n <img decoding=\"async\" src=\"http:\/\/theaitoolkit.org\/wp-content\/uploads\/2025\/12\/character_transparent.png\" \n alt=\"Imran Alam\" \n class=\"avatar-img mask-image-gradient\"\n style=\"mask-image: linear-gradient(to bottom, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\"\n >\n <\/div>\n\n \n <div class=\"w-full md:w-7\/12\">\n <div class=\"stat-badge\"><i class=\"fas fa-certificate\"><\/i> ClickBank Platinum Marketer<\/div>\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight\">\n Meet <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500\">Imran Alam<\/span>\n <\/h2>\n <div class=\"bio-card\">\n <p class=\"text-gray-300 text-lg leading-relaxed mb-6\">I\u2019m the creator of <strong class=\"text-white\">The Ai Toolkit<\/strong> and a seasoned affiliate marketer with <span class=\"text-yellow-500 font-semibold\">6+ years of experience<\/span> across ClickBank, JVZoo, and WarriorPlus.<\/p>\n <p class=\"text-gray-400 text-base leading-relaxed mb-6\">Over the years, I\u2019ve tested hundreds of AI and digital tools\u2014learning exactly which ones deliver real results and which ones waste your time and money.<\/p>\n <p class=\"text-gray-400 text-base leading-relaxed\">I built The Ai Toolkit to help marketers, creators, and entrepreneurs make smarter decisions with honest, performance-based recommendations. Every tool listed here is personally evaluated for value, efficiency, and real-world impact\u2014so you can focus on growing your business with the right tools from day one.<\/p>\n <\/div>\n <div class=\"mt-8 flex items-center gap-6\">\n <div class=\"flex gap-4\">\n <a href=\"https:\/\/x.com\/ImranAlam_d\" target=\"_blank\" class=\"w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-yellow-600 hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/www.linkedin.com\/in\/imran-alam-019b551b1\/\" target=\"_blank\" class=\"w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-yellow-600 hover:text-white transition-all\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/imran_alam_d\/\" target=\"_blank\" class=\"w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-yellow-600 hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <\/div>\n <div class=\"h-px bg-gray-800 flex-grow\"><\/div>\n <span class=\"text-gray-500 font-serif italic\">The AI Toolkit<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<\/div>\n\n\n<script>\n \/\/ --- 1. THREE.JS & TILT (Hero) ---\n const initThreeJS = () => {\n const canvas = document.getElementById('hero-canvas');\n const wrapper = document.getElementById('ai-toolkit-homepage');\n if (!canvas || !wrapper || typeof THREE === 'undefined') return;\n\n const scene = new THREE.Scene();\n scene.fog = new THREE.FogExp2(0x050505, 0.002);\n const camera = new THREE.PerspectiveCamera(75, wrapper.clientWidth \/ window.innerHeight, 0.1, 1000);\n camera.position.z = 50;\n const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });\n \n const updateSize = () => {\n renderer.setSize(wrapper.clientWidth, window.innerHeight);\n camera.aspect = wrapper.clientWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n };\n updateSize();\n\n const particlesGeometry = new THREE.BufferGeometry();\n const particlesCount = 130;\n const posArray = new Float32Array(particlesCount * 3);\n for(let i = 0; i < particlesCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 150; }\n particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));\n const particlesMaterial = new THREE.PointsMaterial({ size: 0.4, color: 0xcd853f, transparent: true, opacity: 0.9 });\n const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\n scene.add(particlesMesh);\n\n let mouseX = 0; let mouseY = 0;\n const animate = () => {\n requestAnimationFrame(animate);\n particlesMesh.rotation.y += 0.001; particlesMesh.rotation.x += 0.0005;\n particlesMesh.rotation.x += mouseY * 0.00005; particlesMesh.rotation.y += mouseX * 0.00005;\n renderer.render(scene, camera);\n };\n animate();\n\n window.addEventListener('resize', updateSize);\n wrapper.addEventListener('mousemove', (e) => {\n const rect = wrapper.getBoundingClientRect();\n mouseX = (e.clientX - rect.left) - rect.width \/ 2; mouseY = (e.clientY - rect.top) - rect.height \/ 2;\n });\n };\n\n const initTilt = () => {\n const container = document.getElementById('character-wrapper');\n const card = document.getElementById('tilt-card');\n if (!container || !card) return;\n container.addEventListener('mousemove', (e) => {\n const rect = container.getBoundingClientRect();\n const x = e.clientX - rect.left; const y = e.clientY - rect.top;\n const rotateX = (0.5 - y \/ rect.height) * 20; const rotateY = (x \/ rect.width - 0.5) * 20;\n card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n });\n container.addEventListener('mouseleave', () => {\n card.style.transition = 'transform 0.5s ease'; card.style.transform = `rotateX(0deg) rotateY(0deg)`;\n setTimeout(() => { card.style.transition = 'transform 0.1s ease-out'; }, 500);\n });\n };\n\n \/\/ --- 2. CAROUSEL FETCHING & LOOPING ---\n const apiBase = 'https:\/\/theaitoolkit.org\/wp-json\/wp\/v2';\n\n \/\/ Scroll Function (Global) - Added behavior smooth explicitly here\n window.scrollCarousel = (id, direction) => {\n const container = document.getElementById(id);\n if(container) container.scrollBy({ left: direction * 350, behavior: 'smooth' });\n };\n\n async function fetchCategoryPosts(slug, containerId, loadingId, tagName) {\n const slider = document.getElementById(containerId);\n const spinner = document.getElementById(loadingId);\n \n try {\n const catResponse = await fetch(`${apiBase}\/categories?slug=${slug}`);\n const categories = await catResponse.json();\n\n if (!categories.length) {\n if(spinner) spinner.innerHTML = `<p class=\"text-gray-500\">Category \"${slug}\" not found.<\/p>`;\n return;\n }\n\n const categoryId = categories[0].id;\n const postsResponse = await fetch(`${apiBase}\/posts?categories=${categoryId}&per_page=20&_embed`);\n const posts = await postsResponse.json();\n\n if (spinner) spinner.style.display = 'none';\n\n if (posts.length === 0) {\n slider.innerHTML += '<p class=\"text-gray-500 p-4\">No posts found.<\/p>';\n return;\n }\n\n \/\/ 1. Build HTML string for cards\n let postsHTML = '';\n posts.forEach(post => {\n const title = post.title.rendered;\n const link = post.link;\n const tempDiv = document.createElement('div');\n tempDiv.innerHTML = post.excerpt.rendered || '';\n const excerpt = tempDiv.textContent.substring(0, 100) + '...';\n \n let imageUrl = 'https:\/\/via.placeholder.com\/400x250\/0f1219\/ffffff?text=AI+Toolkit'; \n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n imageUrl = post._embedded['wp:featuredmedia'][0].source_url;\n }\n\n postsHTML += `\n <a href=\"${link}\" class=\"post-card group\">\n <div class=\"post-image\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${title}\" loading=\"lazy\">\n <\/div>\n <div class=\"post-content\">\n <span class=\"post-tag\">${tagName}<\/span>\n <h3 class=\"text-xl font-bold text-white mb-2 leading-tight group-hover:text-yellow-400 transition-colors\">${title}<\/h3>\n <p class=\"text-gray-300 text-sm mb-4 line-clamp-2 font-light\">${excerpt}<\/p>\n <div class=\"mt-auto text-yellow-500 text-sm font-medium flex items-center gap-2\">Read Post <i class=\"fas fa-arrow-right transition-transform group-hover:translate-x-1\"><\/i><\/div>\n <\/div>\n <\/a>\n `;\n });\n\n \/\/ 2. DUPLICATE CONTENT FOR LOOPING\n \/\/ Append the original set AND a clone set to the slider\n slider.innerHTML = postsHTML + postsHTML;\n\n \/\/ 3. INFINITE LOOP SCROLL LISTENER\n \/\/ When we scroll past the end of the first set (approx half the scrollWidth),\n \/\/ reset to the beginning of the first set.\n slider.addEventListener('scroll', () => {\n \/\/ Determine the width of one set of posts\n \/\/ Since content is doubled, one set is roughly half the scrollWidth.\n \/\/ We use a small tolerance or just >= check.\n if (slider.scrollLeft >= (slider.scrollWidth \/ 2)) {\n \/\/ Instantly jump back to the start (minus the offset of the second set)\n \/\/ Because the sets are identical, this jump is invisible to the user.\n \/\/ NOTE: This works seamlessly because 'scroll-behavior: smooth' was removed from CSS.\n slider.scrollLeft = slider.scrollLeft - (slider.scrollWidth \/ 2);\n }\n });\n\n } catch (error) {\n console.error(`Error fetching ${slug}:`, error);\n if(spinner) spinner.innerHTML = `<p class=\"text-red-400 text-sm\">Failed to load content.<\/p>`;\n }\n }\n\n \/\/ --- INIT ---\n const startApp = () => {\n \/\/ Init 3D\n if (typeof THREE !== 'undefined') { initThreeJS(); initTilt(); } \n else { setTimeout(() => { if (typeof THREE !== 'undefined') { initThreeJS(); initTilt(); } }, 500); }\n\n \/\/ Fetch Posts\n fetchCategoryPosts('top-tools', 'postCarousel-top', 'loading-top', 'Top Tools');\n fetchCategoryPosts('latest-review', 'postCarousel-latest', 'loading-latest', 'Latest Review');\n };\n\n if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', startApp); } \n else { startApp(); }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AI Toolkit – Homepage AI-Powered Dominion Construct Your Digital Empire Stop competing. Start conquering. Unleash a fleet of autonomous AI […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olarvo.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=83"}],"version-history":[{"count":1,"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/olarvo.in\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/olarvo.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}