LIVRESQ – eLearning Course Creator<\/title>\n <meta name=\"description\" content=\"Create eLearning courses and interactive lessons directly in the browser. No installation required. SCORM compatible.\">\n \n \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=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n midnight: '#0F1623',\n livresq: {\n fucsia: '#D91278',\n 'fucsia-dark': '#b00e60',\n albastru: '#6fccf0',\n darkblue: '#2c3e50',\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n heading: ['Roboto', 'sans-serif'],\n },\n backgroundImage: {\n 'grid-pattern': \"radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px)\",\n 'grid-pattern-dark': \"linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px)\",\n },\n animation: {\n 'float': 'float 6s ease-in-out infinite',\n 'scroll': 'scroll 40s linear infinite',\n 'scroll-y': 'scrollY 20s linear infinite',\n 'scroll-y-reverse': 'scrollY 25s linear infinite reverse',\n 'fade-in-up': 'fadeInUp 0.8s ease-out forwards',\n 'shimmer': 'shimmer 2.5s infinite',\n 'spin-slow': 'spin 60s linear infinite',\n 'spin-reverse-slow': 'spin 80s linear infinite reverse',\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n 'gradient-x': 'gradient-x 15s ease infinite',\n 'ping-slow': 'ping 3s cubic-bezier(0, 0, 0.2, 1) infinite',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-10px)' },\n },\n scroll: {\n '0%': { transform: 'translateX(0)' },\n '100%': { transform: 'translateX(-50%)' },\n },\n scrollY: {\n '0%': { transform: 'translateY(0)' },\n '100%': { transform: 'translateY(-50%)' },\n },\n fadeInUp: {\n '0%': { opacity: '0', transform: 'translateY(20px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n shimmer: {\n '100%': { transform: 'translateX(100%)' }\n },\n 'gradient-x': {\n '0%, 100%': {\n 'background-size': '200% 200%',\n 'background-position': 'left center'\n },\n '50%': {\n 'background-size': '200% 200%',\n 'background-position': 'right center'\n },\n },\n }\n }\n }\n }\n <\/script>\n\n <style>\n html { scroll-behavior: smooth; }\n \n .bg-grid-overlay {\n background-size: 50px 50px;\n background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\n }\n\n .glass-panel-midnight {\n background: rgba(15, 22, 35, 0.6);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n }\n \n .glass-panel-light {\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.5);\n }\n\n \/* Spotlight Effect *\/\n .spotlight-card { position: relative; overflow: hidden; }\n .spotlight-card::after {\n content: \"\"; position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.06), transparent 40%);\n opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 2;\n }\n .spotlight-group:hover .spotlight-card::after { opacity: 1; }\n\n \/* Reveal Animation Classes *\/\n .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }\n .reveal.active { opacity: 1; transform: translate(0); }\n \n \/* Delays *\/\n .delay-100 { transition-delay: 0.1s; }\n .delay-200 { transition-delay: 0.2s; }\n .delay-300 { transition-delay: 0.3s; }\n .delay-400 { transition-delay: 0.4s; }\n\n details > summary { list-style: none; }\n details > summary::-webkit-details-marker { display: none; }\n \n .text-glow-blue { text-shadow: 0 0 20px rgba(59,130,246,0.5); }\n .perspective-1000 { perspective: 1000px; }\n .perspective-2000 { perspective: 2000px; }\n .transform-style-3d { transform-style: preserve-3d; }\n \n \/* Pause scroll on hover *\/\n .hover-pause:hover .animate-scroll-y,\n .hover-pause:hover .animate-scroll-y-reverse {\n animation-play-state: paused;\n }\n \n \/* Border Beam Animation *\/\n @keyframes border-beam {\n 100% { offset-distance: 100%; }\n }\n .border-beam {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n border: 1px solid transparent;\n mask: linear-gradient(transparent, transparent), linear-gradient(white, white);\n mask-clip: padding-box, border-box;\n mask-composite: intersect;\n -webkit-mask-composite: source-in;\n }\n \n \/* Hide scrollbar for clean look *\/\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #0f172a; }\n ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; border: 2px solid #0f172a; }\n ::-webkit-scrollbar-thumb:hover { background: #64748b; }\n <\/style>\n<\/head>\n<body class=\"font-sans text-slate-900 antialiased bg-slate-50 flex flex-col min-h-screen selection:bg-fuchsia-500 selection:text-white\">\n\n \n <nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 bg-[#1379D1] h-[48px] transition-all duration-300\">\n \n <div class=\"absolute top-0 left-0 h-full z-0 pointer-events-none overflow-hidden w-[600px]\">\n <div id=\"nav-skew\" class=\"absolute top-0 left-[-50px] h-full transform -skew-x-[20deg] transition-all duration-500 ease-out bg-white w-[360px]\"><\/div>\n <\/div>\n \n <div class=\"w-full h-full max-w-[1920px] mx-auto flex items-center justify-between relative z-10 pl-0 pr-[8px]\">\n \n <div class=\"flex items-center flex-shrink-0 relative z-20 pl-10 transition-all duration-300\" id=\"nav-logo-container\">\n <a href=\"#\" class=\"block group relative transform transition-transform duration-300 hover:scale-105 origin-left\">\n <img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\" alt=\"LIVRESQ\" class=\"w-auto object-contain h-[32px] filter contrast-125\">\n <\/a>\n <\/div>\n \n \n <div class=\"hidden xl:flex items-center gap-1 pl-12\">\n <a href=\"https:\/\/livresq.com\/ro\/publish-library\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Community<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/blog\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Blog<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/academic\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Academic<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/training\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Training<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/faq\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">FAQ<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/pricing\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Buy<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/despre-noi\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">About Us<\/a>\n <\/div>\n\n \n <div class=\"hidden lg:flex items-center h-full\">\n <a href=\"https:\/\/library.livresq.com\/\" class=\"flex items-center gap-2 px-[8px] py-[6px] h-[36.5px] cursor-pointer hover:bg-white\/10 rounded-md transition-colors group text-white\">\n <img decoding=\"async\" src=\"https:\/\/livresq.com\/wp-content\/uploads\/2026\/01\/auto_stories_24dp_E3E3E3_FILL1_wght0_GRAD0_opsz24.svg\" class=\"w-6 h-6 brightness-0 invert\">\n <span class=\"text-[14px] font-bold\">Library<\/span>\n <\/a>\n \n <div class=\"relative group\">\n <button class=\"flex items-center gap-2 px-[8px] py-[6px] h-[36.5px] mr-[4px] min-w-[122px] justify-between cursor-pointer hover:bg-white\/10 rounded-md transition-colors text-white\">\n <div class=\"flex items-center gap-2\"><img decoding=\"async\" src=\"https:\/\/livresq.com\/wp-content\/uploads\/2026\/01\/translate_24dp_E3E3E3_FILL1_wght0_GRAD0_opsz24.svg\" class=\"w-6 h-6 brightness-0 invert\"><span class=\"text-[14px] font-bold\">English<\/span><\/div>\n <i data-lucide=\"chevron-down\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n\n <a href=\"https:\/\/livresq.com\/ro\/contul-meu\/\" class=\"flex items-center gap-2 px-4 py-[6px] h-[36.5px] bg-[#D91278] hover:bg-[#b00e60] text-white rounded-md shadow-md hover:shadow-lg transition-all border border-white\/10\">\n <img decoding=\"async\" src=\"https:\/\/livresq.com\/wp-content\/uploads\/2026\/01\/account_circle_24dp_E3E3E3_FILL1_wght0_GRAD0_opsz24.svg\" class=\"w-6 h-6 brightness-0 invert\">\n <span class=\"text-[14px] font-bold\">My Account<\/span>\n <\/a>\n <\/div>\n \n \n <div class=\"xl:hidden flex items-center gap-2\">\n <button class=\"p-1.5 rounded-md bg-white\/10 text-white\"><i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <div id=\"hero-section\" class=\"relative border-b border-slate-200 py-24 lg:py-32 overflow-hidden bg-slate-50 text-slate-900 perspective-1000 group\/hero spotlight-group\">\n <div class=\"absolute inset-0 overflow-hidden pointer-events-none\">\n \n <div class=\"absolute inset-0 bg-gradient-to-b from-blue-50\/80 via-white to-white\"><\/div>\n \n <div class=\"absolute inset-0 opacity-[0.4]\" style=\"-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%)\">\n <div class=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] origin-top transform-gpu\" style=\"transform: perspective(1000px) rotateX(60deg) scale(2.5) translateY(-100px)\"><\/div>\n <\/div>\n \n <div id=\"hero-spotlight\" class=\"absolute inset-0 opacity-0 group-hover\/hero:opacity-100 transition-opacity duration-1000 ease-out pointer-events-none\"><\/div>\n \n <div class=\"absolute top-[15%] left-[5%] animate-float opacity-60 mix-blend-multiply\"><div class=\"w-24 h-24 bg-gradient-to-br from-blue-200 to-purple-200 rounded-3xl blur-xl rotate-12\"><\/div><\/div>\n <div class=\"absolute bottom-[20%] right-[5%] animate-float opacity-60 mix-blend-multiply\" style=\"animation-delay: 2s\"><div class=\"w-32 h-32 bg-gradient-to-tr from-fuchsia-200 to-pink-200 rounded-full blur-2xl\"><\/div><\/div>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col lg:flex-row items-center gap-12 lg:gap-16\">\n \n \n <div class=\"w-full lg:w-1\/2 relative z-20 text-left\">\n <a href=\"https:\/\/author.livresq.com\/organizer\/templates\" class=\"group inline-flex items-center p-1.5 pr-5 rounded-md transition-all duration-300 mb-8 cursor-pointer animate-fade-in-up bg-white\/60 backdrop-blur-xl border border-white\/60 shadow-sm hover:shadow-md hover:bg-white hover:scale-105\" style=\"animation-delay: 0.1s\">\n <span class=\"px-3 py-1 bg-gradient-to-r from-livresq-fucsia to-purple-600 text-white text-[10px] font-bold rounded-md uppercase tracking-wide mr-3 shadow-sm group-hover:shadow-md transition-all\">New<\/span>\n <span class=\"text-sm font-bold transition-colors text-slate-600 group-hover:text-livresq-fucsia\">20 new business templates released<\/span>\n <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-2 transition-transform text-slate-400 group-hover:text-livresq-fucsia group-hover:translate-x-1\"><\/i>\n <\/a>\n \n <h1 class=\"text-5xl lg:text-7xl font-black mb-6 font-heading leading-[1.1] animate-fade-in-up text-slate-900 drop-shadow-sm tracking-tight\" style=\"animation-delay: 0.2s\">\n Create <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia via-pink-600 to-purple-600\">stunning<\/span><br\/>\n courses and lessons.\n <\/h1>\n \n <p class=\"mt-4 text-xl font-medium leading-relaxed mb-10 animate-fade-in-up max-w-lg text-slate-600\" style=\"animation-delay: 0.3s\">Build SCORM and HTML5 compatible materials. No technical barriers.<\/p>\n <div class=\"flex flex-col sm:flex-row gap-5 mb-10 animate-fade-in-up\" style=\"animation-delay: 0.4s\">\n <a href=\"https:\/\/livresq.com\/en\/my-account\/\" class=\"relative flex items-center justify-center px-10 py-4 text-base font-bold rounded-md text-white hover:text-white transition-all duration-300 shadow-lg shadow-fuchsia-900\/20 hover:shadow-xl hover:shadow-fuchsia-900\/30 transform hover:-translate-y-1 active:translate-y-0 overflow-hidden group bg-livresq-fucsia\">\n <span class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white\/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1s_infinite]\"><\/span>\n <div class=\"relative flex items-center\"><i data-lucide=\"zap\" class=\"w-5 h-5 mr-2 fill-current text-white\"><\/i> Start for Free<\/div>\n <\/a>\n <a href=\"#how-it-works\" class=\"flex items-center justify-center px-8 py-4 bg-white\/50 backdrop-blur-sm border border-slate-200 text-base font-bold rounded-md transition-all text-slate-600 hover:text-blue-600 hover:bg-white hover:shadow-lg hover:border-blue-100 transform hover:-translate-y-1\">\n <i data-lucide=\"play-circle\" class=\"w-5 h-5 mr-2\"><\/i> View Features\n <\/a>\n <\/div>\n \n <div class=\"flex items-center gap-6 text-xs font-bold mb-10 animate-fade-in-up pl-2 text-slate-500 uppercase tracking-wide\" style=\"animation-delay: 0.45s\">\n <span class=\"flex items-center gap-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-500\"><\/i> NO CARD REQUIRED<\/span>\n <span class=\"flex items-center gap-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-500\"><\/i> SETUP IN 30 SEC<\/span>\n <\/div>\n\n \n <div class=\"group relative rounded-2xl animate-fade-in-up p-[1px] bg-gradient-to-br from-slate-200 to-transparent hover:from-blue-200 transition-colors duration-500 w-full max-w-lg\" style=\"animation-delay: 0.5s\">\n <div class=\"relative rounded-2xl bg-white\/60 backdrop-blur-xl p-5 border border-white\/50 shadow-sm hover:shadow-lg transition-all duration-300\">\n <div class=\"flex flex-col gap-5 text-left\">\n <div class=\"flex items-center gap-4\">\n <div class=\"flex -space-x-3\">\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/21.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/22.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/23.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/24.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <\/div>\n <div class=\"flex flex-col\">\n <div class=\"flex text-amber-400 text-xs mb-0.5\"><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><\/div>\n <p class=\"text-xs font-bold text-slate-600\">Join <strong class=\"text-slate-900\">158,900+ creators<\/strong> from 7200+ institutions and companies<\/p>\n <\/div>\n <\/div>\n <div class=\"w-full h-px bg-slate-200\/60\"><\/div>\n <div class=\"flex flex-col gap-2\">\n <p class=\"text-[10px] font-extrabold uppercase tracking-widest text-slate-400\">Supported by<\/p>\n <div class=\"flex flex-wrap items-center gap-4 opacity-60 grayscale hover:grayscale-0 transition-all\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/96\/Microsoft_logo_%282012%29.svg\" alt=\"Microsoft\" class=\"h-4 w-auto\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg\" alt=\"Google\" class=\"h-4 w-auto\">\n <span class=\"font-bold text-xs tracking-tight text-slate-700 whitespace-nowrap\">ElevenLabs<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"w-full lg:w-1\/2 relative z-20 flex flex-col justify-center h-[500px] perspective-2000 animate-fade-in-up\" style=\"animation-delay: 0.6s\">\n <div class=\"relative w-full h-full transform-style-3d\" id=\"hero-carousel-container\">\n \n \n \n <button onclick=\"prevSlide()\" class=\"absolute left-2 md:left-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/50 md:bg-white\/30 border border-white\/60 md:border-white\/40 backdrop-blur-md text-slate-800 md:text-slate-700 hover:bg-blue-600 hover:text-white hover:border-blue-500 hover:scale-110 active:scale-95 transition-all shadow-lg flex items-center justify-center group cursor-pointer\" style=\"transform: translateY(-50%) translateZ(100px);\"><i data-lucide=\"chevron-left\" class=\"w-5 h-5 md:w-6 md:h-6 group-hover:-translate-x-0.5 transition-transform\"><\/i><\/button>\n <button onclick=\"nextSlide()\" class=\"absolute right-2 md:right-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/50 md:bg-white\/30 border border-white\/60 md:border-white\/40 backdrop-blur-md text-slate-800 md:text-slate-700 hover:bg-blue-600 hover:text-white hover:border-blue-500 hover:scale-110 active:scale-95 transition-all shadow-lg flex items-center justify-center group cursor-pointer\" style=\"transform: translateY(-50%) translateZ(100px);\"><i data-lucide=\"chevron-right\" class=\"w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-0.5 transition-transform\"><\/i><\/button>\n\n \n <div id=\"card-prev\" onclick=\"prevSlide()\" class=\"absolute top-[20%] left-[-5%] w-[30%] aspect-video bg-[#0f172a] rounded-xl border border-white\/10 shadow-2xl overflow-hidden transform-style-3d transition-all duration-500 ease-out z-20 cursor-pointer hover:opacity-100 opacity-60 grayscale hover:grayscale-0\">\n <img decoding=\"async\" id=\"img-prev\" src=\"\" class=\"w-full h-full object-cover\">\n <div class=\"absolute inset-0 bg-black\/50 flex items-center justify-center group-hover:bg-black\/20 transition-colors\"><i data-lucide=\"chevron-left\" class=\"w-6 h-6 text-white\"><\/i><\/div>\n <\/div>\n\n \n <div id=\"card-active\" class=\"absolute top-1\/2 left-1\/2 w-[85%] aspect-video bg-[#1E293B] rounded-2xl shadow-2xl border-2 overflow-hidden transform-style-3d transition-transform duration-500 ease-out z-30\">\n \n <div class=\"h-8 bg-black\/40 border-b border-white\/5 flex items-center px-4 gap-2 backdrop-blur-md\">\n <div class=\"flex gap-1.5\"><div class=\"w-2.5 h-2.5 rounded-full bg-red-500\"><\/div><div class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"><\/div><div class=\"w-2.5 h-2.5 rounded-full bg-green-500\"><\/div><\/div>\n <div class=\"ml-4 px-3 py-0.5 bg-white\/10 rounded-full text-[10px] text-slate-400 font-mono flex items-center gap-2 w-full max-w-[200px]\">\n <div id=\"dot-active\" class=\"w-2 h-2 rounded-full animate-pulse\"><\/div> <span id=\"text-active\">template.html<\/span>\n <\/div>\n <\/div>\n <div class=\"relative w-full h-full group\">\n <img decoding=\"async\" id=\"img-active\" src=\"\" class=\"w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700\">\n \n <div class=\"absolute top-[20%] left-[10%] bg-white\/90 backdrop-blur-xl p-3 rounded-xl border border-white\/50 shadow-xl animate-float\">\n <div class=\"flex items-center gap-2 mb-1\" id=\"icon-container\"><\/div>\n <h3 id=\"title-active\" class=\"text-sm font-bold text-slate-900\">Title<\/h3>\n <div id=\"bar-active\" class=\"h-1 w-16 rounded-full mt-2\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"card-next\" onclick=\"nextSlide()\" class=\"absolute bottom-[20%] right-[-5%] w-[30%] aspect-video bg-[#0f172a] rounded-xl shadow-2xl border border-white\/10 overflow-hidden transform-style-3d transition-all duration-500 ease-out z-20 cursor-pointer hover:opacity-100 opacity-60 grayscale hover:grayscale-0\">\n <img decoding=\"async\" id=\"img-next\" src=\"\" class=\"w-full h-full object-cover\">\n <div class=\"absolute inset-0 bg-black\/50 flex items-center justify-center group-hover:bg-black\/20 transition-colors\"><i data-lucide=\"chevron-right\" class=\"w-6 h-6 text-white\"><\/i><\/div>\n <\/div>\n\n \n <div id=\"badge-scorm\" class=\"absolute top-[10%] right-[10%] px-3 py-1.5 bg-white\/80 backdrop-blur rounded-lg shadow-lg border border-slate-200 flex items-center gap-2 z-10 transition-transform duration-100 ease-out\">\n <i data-lucide=\"check-circle-2\" class=\"w-3 h-3 text-green-500\"><\/i><span class=\"text-[10px] font-bold text-slate-700\">SCORM Compliant<\/span>\n <\/div>\n \n <div id=\"badge-start\" class=\"absolute bottom-[10%] left-[10%] px-3 py-1.5 bg-white\/80 backdrop-blur rounded-lg shadow-lg border border-slate-200 flex items-center gap-2 z-50 transition-transform duration-100 ease-out\">\n <i data-lucide=\"star\" class=\"w-3 h-3 text-yellow-400 fill-current\"><\/i><span class=\"text-[10px] font-bold text-slate-700\">Don’t start from scratch<\/span>\n <\/div>\n\n <\/div>\n \n \n <div class=\"absolute top-1\/2 left-1\/2 w-[500px] h-[500px] bg-gradient-to-tr from-orange-500\/20 to-purple-500\/20 rounded-full blur-[80px] -translate-x-1\/2 -translate-y-1\/2 -z-10 pointer-events-none\"><\/div>\n\n \n <div class=\"absolute -top-6 -right-6 p-4 rounded-2xl bg-white\/80 backdrop-blur-xl border border-white\/60 shadow-[0_8px_30px_rgba(0,0,0,0.04)] animate-float z-40 hidden md:flex items-center gap-3 hover:scale-105 transition-transform cursor-default\">\n <div class=\"w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-blue-500\/20\"><i data-lucide=\"eye\" class=\"w-5 h-5\"><\/i><\/div>\n <div><p class=\"text-[9px] uppercase font-extrabold tracking-wider text-slate-400\">Impact<\/p><p class=\"text-sm font-black text-slate-900 leading-tight\">1.5M Monthly Visits<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full h-[1px] bg-gradient-to-r from-transparent via-livresq-fucsia to-transparent shadow-sm relative z-20 opacity-80\"><\/div>\n\n \n <section class=\"py-10 border-b border-slate-200 relative z-20 overflow-hidden bg-white\">\n <div class=\"reveal\">\n <div class=\"max-w-7xl mx-auto px-4 mb-8 text-center\">\n <p class=\"text-xs font-bold text-slate-400 uppercase tracking-[0.3em] opacity-80\">Trusted Partner for TOP Organizations<\/p>\n <\/div>\n \n <div class=\"absolute left-0 top-0 h-full w-20 md:w-40 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"absolute right-0 top-0 h-full w-20 md:w-40 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"flex w-full overflow-hidden select-none\">\n <div class=\"flex animate-scroll items-center\" id=\"partners-track\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 border-b border-white\/5 relative z-20 overflow-hidden bg-midnight bg-grid-overlay spotlight-group\">\n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none\">\n <div class=\"absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-purple-900\/10 rounded-full blur-[100px]\"><\/div>\n <div class=\"absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-900\/10 rounded-full blur-[100px]\"><\/div>\n <\/div>\n <div class=\"max-w-7xl mx-auto px-4 relative z-10 reveal\">\n <div class=\"flex flex-col items-center justify-center text-center mb-16 relative\">\n <div class=\"inline-flex items-center gap-2 mb-3 bg-[#1F2937]\/50 backdrop-blur-md px-4 py-1.5 rounded-md border border-slate-700 shadow-sm\">\n <span class=\"text-slate-400 font-medium text-sm\">Google<\/span>\n <span class=\"text-white font-bold text-sm\">Reviews<\/span>\n <\/div>\n <div class=\"flex items-center justify-center gap-3 mb-2\">\n <span class=\"text-5xl font-black text-white tracking-tight\">5.0<\/span>\n <div class=\"flex text-amber-400 gap-1\"><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><\/div>\n <\/div>\n <p class=\"text-slate-400 text-sm font-medium\">Based on <strong class=\"text-white\">614 reviews<\/strong><\/p>\n <\/div>\n <div id=\"reviews-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12 relative z-10\"><\/div>\n \n <div class=\"reveal delay-300\">\n <div class=\"max-w-5xl mx-auto spotlight-card bg-[#111827] border border-slate-800 rounded-[2rem] p-8 md:px-12 md:py-8 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden group shadow-2xl\">\n <div class=\"flex flex-col gap-2 text-center md:text-left relative z-10\">\n <a href=\"https:\/\/www.google.com\/search?q=livresq+reviews\" target=\"_blank\" rel=\"noreferrer\" class=\"text-xl md:text-2xl font-bold text-white flex items-center justify-center md:justify-start gap-3 hover:text-blue-400 transition-colors group\/link\">See all reviews on Google <i data-lucide=\"external-link\" class=\"w-5 h-5 opacity-50 group-hover\/link:opacity-100 transition-opacity\"><\/i><\/a>\n <p class=\"text-slate-500 text-sm font-medium\">100% transparency from real users.<\/p>\n <\/div>\n <div class=\"hidden md:block w-px h-16 bg-gradient-to-b from-transparent via-slate-700 to-transparent relative z-10\"><\/div>\n <div class=\"flex items-center gap-6 relative z-10\">\n <div class=\"flex flex-col items-end\">\n <div class=\"flex items-center gap-3\"><span class=\"text-3xl font-black text-white leading-none\">4.9<\/span><div class=\"flex text-amber-500 gap-1\"><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><\/div><\/div>\n <span class=\"text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] mt-1.5\">Capterra Score<\/span>\n <div class=\"flex items-center gap-1.5 mt-1 text-amber-500\"><i data-lucide=\"trophy\" class=\"w-3.5 h-3.5\"><\/i><span class=\"text-xs font-bold\">„Best Ease of Use”<\/span><\/div>\n <\/div>\n <div class=\"h-20 w-auto relative group\/badge\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2024\/09\/aeb0fd70-304e-49d6-87e7-f596e09f8509.png?w=670&ssl=1\" alt=\"Capterra Badge\" class=\"h-full w-auto object-contain hover:scale-110 transition-transform duration-300 drop-shadow-xl\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-32 bg-slate-50 relative overflow-hidden text-slate-900 border-t border-slate-200\">\n <canvas id=\"constellation-canvas\" class=\"absolute inset-0 w-full h-full z-0 cursor-crosshair\"><\/canvas>\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-50 via-transparent to-slate-50 pointer-events-none z-10\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 relative z-20 pointer-events-none text-center\">\n <div class=\"reveal\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-md bg-white\/10 backdrop-blur-md border border-slate-200 mb-8 pointer-events-auto shadow-sm\">\n <i data-lucide=\"link-2\" class=\"w-4 h-4 text-livresq-fucsia\"><\/i>\n <span class=\"text-xs font-bold uppercase tracking-widest text-slate-600\">Centralized Hub<\/span>\n <\/div>\n <h2 class=\"text-4xl md:text-6xl font-black mb-8 leading-tight text-slate-900\">\n Don’t give up on anything.<br\/>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Connect Everything.<\/span>\n <\/h2>\n <p class=\"text-slate-600 text-xl leading-relaxed mb-12\">\n LIVRESQ works perfectly with the tools you already love. Integrate quizzes from <strong>Quizlet<\/strong>, videos from <strong>EdPuzzle<\/strong> or <strong>PhET<\/strong> simulations directly into your lessons, without the student leaving the page.\n <\/p>\n <div class=\"grid md:grid-cols-3 gap-6 pointer-events-auto mt-12 text-left\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 hover:border-pink-200 hover:shadow-lg transition-all duration-300 group shadow-sm text-left\">\n <div class=\"w-12 h-12 bg-pink-50 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\"><i data-lucide=\"box\" class=\"w-6 h-6 text-pink-500\"><\/i><\/div>\n <h3 class=\"text-lg font-bold mb-2 text-slate-900\">Universal Embed<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">If your resource has an „Embed” or „Iframe” code, it works in LIVRESQ instantly.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 hover:border-blue-200 hover:shadow-lg transition-all duration-300 group shadow-sm text-left\">\n <div class=\"w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\"><i data-lucide=\"link-2\" class=\"w-6 h-6 text-blue-500\"><\/i><\/div>\n <h3 class=\"text-lg font-bold mb-2 text-slate-900\">Uninterrupted Flow<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Learners interact with external resources (e.g., Wordwall, LearningApps) directly in the course window.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 hover:border-purple-200 hover:shadow-lg transition-all duration-300 group shadow-sm text-left\">\n <div class=\"w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\"><i data-lucide=\"layers\" class=\"w-6 h-6 text-purple-500\"><\/i><\/div>\n <h3 class=\"text-lg font-bold mb-2 text-slate-900\">30+ Validated Platforms<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">From StoryJumper to Genially, we tested compatibility so you don’t have surprises.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"how-it-works\" class=\"py-24 relative overflow-hidden bg-midnight bg-grid-overlay text-white spotlight-group\">\n \n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none\">\n <div class=\"absolute top-[-20%] right-[-10%] w-[500px] h-[500px] bg-purple-900\/20 rounded-full blur-[100px]\"><\/div>\n <div class=\"absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] bg-blue-900\/20 rounded-full blur-[100px]\"><\/div>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 relative z-10\">\n <div class=\"text-center mb-20 reveal\">\n <span class=\"inline-block py-1.5 px-5 rounded-md bg-livresq-fucsia\/20 border border-livresq-fucsia text-livresq-fucsia text-xs font-black uppercase tracking-[0.2em] mb-6 shadow-sm cursor-default\">Simple. Fast. Efficient.<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black mb-6 font-heading text-white tracking-tight text-glow-blue\">How does it work?<\/h2>\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto font-light leading-relaxed\">Transform educational content into digital experiences in just 3 simple steps.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8 mb-24 relative z-20\">\n <div class=\"reveal delay-100 h-full\">\n <div class=\"spotlight-card glass-panel-midnight p-8 rounded-2xl border border-white\/10 hover:border-blue-500\/50 transition-colors duration-300 h-full flex flex-col items-center text-center hover:shadow-xl hover:shadow-blue-500\/10 group relative overflow-hidden\">\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-blue-500\/10 rounded-2xl flex items-center justify-center text-blue-400 mb-6 group-hover:scale-110 transition-transform duration-300 border border-blue-500\/20 mx-auto shadow-[0_0_20px_rgba(59,130,246,0.2)]\"><i data-lucide=\"log-in\" class=\"w-8 h-8\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-3 text-white\">1. Authentication<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Log in directly from the browser. No complicated installations. Everything is in the cloud, accessible 24\/7.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reveal delay-200 h-full\">\n <div class=\"spotlight-card glass-panel-midnight p-8 rounded-2xl border border-white\/10 hover:border-livresq-fucsia\/50 transition-colors duration-300 h-full flex flex-col items-center text-center hover:shadow-xl hover:shadow-pink-500\/10 group relative overflow-hidden\">\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-pink-500\/10 rounded-2xl flex items-center justify-center text-livresq-fucsia mb-6 group-hover:scale-110 transition-transform duration-300 border border-pink-500\/20 mx-auto shadow-[0_0_20px_rgba(217,18,120,0.2)]\"><i data-lucide=\"pen-tool\" class=\"w-8 h-8\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-3 text-white\">2. Create<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Use the drag-and-drop editor, import existing resources, or let AI generate the structure.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reveal delay-300 h-full\">\n <div class=\"spotlight-card glass-panel-midnight p-8 rounded-2xl border border-white\/10 hover:border-emerald-500\/50 transition-colors duration-300 h-full flex flex-col items-center text-center hover:shadow-xl hover:shadow-emerald-500\/10 group relative overflow-hidden\">\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-emerald-500\/10 rounded-2xl flex items-center justify-center text-emerald-400 mb-6 group-hover:scale-110 transition-transform duration-300 border border-emerald-500\/20 mx-auto shadow-[0_0_20px_rgba(16,185,129,0.2)]\"><i data-lucide=\"upload-cloud\" class=\"w-8 h-8\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-3 text-white\">3. Publish<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Export the SCORM or HTML5 package for any LMS or publish instantly to the LIVRESQ Library.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reveal delay-300 relative max-w-6xl mx-auto group\">\n <div class=\"absolute -inset-1 bg-gradient-to-r from-blue-600 via-livresq-fucsia to-purple-600 rounded-2xl blur-xl opacity-20 group-hover:opacity-40 transition duration-700\"><\/div>\n <div class=\"relative z-10 bg-slate-900 rounded-xl border border-slate-700 shadow-2xl overflow-hidden\">\n <div class=\"h-10 bg-slate-800 border-b border-slate-700 flex items-center px-4 gap-3\">\n <div class=\"flex gap-2\"><div class=\"w-3 h-3 rounded-full bg-[#FF5F56] border border-[#E0443E]\"><\/div><div class=\"w-3 h-3 rounded-full bg-[#FFBD2E] border border-[#DEA123]\"><\/div><div class=\"w-3 h-3 rounded-full bg-[#27C93F] border border-[#1AAB29]\"><\/div><\/div>\n <div class=\"flex-1 max-w-2xl mx-auto bg-slate-900 rounded-md h-6 flex items-center justify-center text-[10px] text-slate-500 font-mono border border-slate-700\/50\"><span class=\"text-green-500 mr-2\">\ud83d\udd12<\/span> https:\/\/author.livresq.com<\/div>\n <\/div>\n <div class=\"relative bg-slate-900 aspect-video\">\n <video autoplay muted loop playsinline class=\"w-full h-full object-cover opacity-95 hover:opacity-100 transition-opacity duration-500\">\n <source src=\"https:\/\/livresq.com\/wp-content\/uploads\/2021\/04\/Livresq-Skyline-Template.mp4\" type=\"video\/mp4\">\n <\/video>\n <\/div>\n <\/div>\n <div class=\"text-center mt-8 text-slate-400 text-sm font-bold tracking-widest uppercase flex justify-center items-center gap-3\">\n <span class=\"relative flex h-3 w-3\"><span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-livresq-fucsia opacity-75\"><\/span><span class=\"relative inline-flex rounded-full h-3 w-3 bg-livresq-fucsia\"><\/span><\/span>\n Template example from LIVRESQ editor\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-32 relative overflow-hidden bg-slate-50\" id=\"templates-section\">\n <div class=\"max-w-7xl mx-auto px-4 relative z-10\">\n <div class=\"text-center mb-16 reveal\">\n <span class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-md bg-purple-100 border border-purple-200 text-purple-700 text-xs font-bold uppercase tracking-widest shadow-sm mb-6\"><i data-lucide=\"library\" class=\"w-3 h-3\"><\/i> Premium Collection<\/span>\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-slate-900 mb-6 font-heading tracking-tight\">Premium <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Templates<\/span><\/h2>\n <p class=\"text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed\">Choose from our vast collection of professional templates, optimized for Business and Academic environments. Top design, ready to use.<\/p>\n <\/div>\n <div class=\"flex justify-center mb-16 reveal\">\n <div class=\"inline-flex bg-white backdrop-blur-xl p-1.5 rounded-lg border border-slate-200 shadow-lg gap-2\">\n <button id=\"tab-business\" onclick=\"switchTab('business')\" class=\"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 bg-livresq-fucsia text-white shadow-lg font-bold transform scale-105 border-none outline-none ring-0\"><i data-lucide=\"briefcase\" class=\"w-4 h-4\"><\/i> Business<\/button>\n <button id=\"tab-academic\" onclick=\"switchTab('academic')\" class=\"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 text-slate-500 hover:text-slate-900 hover:bg-slate-50 font-medium border-none outline-none ring-0\"><i data-lucide=\"graduation-cap\" class=\"w-4 h-4\"><\/i> Academic<\/button>\n <\/div>\n <\/div>\n <div id=\"content-business\" class=\"animate-fade-in-up\">\n <div class=\"flex items-center gap-4 mb-10 pl-2 opacity-80\"><div class=\"h-px flex-grow bg-gradient-to-r from-transparent via-slate-300 to-transparent\"><\/div><h3 class=\"text-2xl font-bold text-slate-700 bg-white\/50 backdrop-blur px-6 py-2 rounded-md border border-slate-200 shadow-sm\">Business Education & Retail<\/h3><div class=\"h-px flex-grow bg-gradient-to-r from-transparent via-slate-300 to-transparent\"><\/div><\/div>\n <div id=\"templates-grid\" class=\"grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-16\">\n \n <a href=\"https:\/\/library.livresq.com\/details\/6891e920017749000957c1aa\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png?fit=800%2C664&ssl=1\" alt=\"Glassmorphism\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Modern & Intuitive<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Glassmorphism<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Modern design with glass effects and vivid colors. Ideal for onboarding and product presentations.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6891e890017749000957c1a8\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.1s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/Neomemphis.png?fit=800%2C664&ssl=1\" alt=\"Neomemphis\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Bold & Energetic<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Neomemphis<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Geometric shapes and energetic colors. Perfect for ‘soft skills’ training, customer experience and compliance.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6891e95d017749000957c1ab\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.2s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/2.png?fit=800%2C664&ssl=1\" alt=\"Dark Cinematic\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Dramatic Impact<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Dark Cinematic<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">High contrast and dramatic lighting. Excellent for storytelling, premium product launches and sales scenarios.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/688dbbb6017749000957b87a\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.3s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/3.png?fit=800%2C664&ssl=1\" alt=\"Minimalism\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Clarity & Efficiency<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Minimalism<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Clean lines, ample white spaces and natural elements. Ideal for sustainable practices, inventory management and safety.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6891e837017749000957c1a4\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.4s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/1.png?fit=800%2C664&ssl=1\" alt=\"Soft Glass Realism\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Elegance & Texture<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Soft Glass Realism<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Subtle frosted glass panels and fresh palette. Suitable for seasonal microlearning and culture programs.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6942858d507a550009c83e64\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.5s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Bauhaus_LIVRESQ.png?w=800&ssl=1\" alt=\"Bauhaus\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Geometric & Functional<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Bauhaus<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Bold geometric style with strong contrast. Clear structure, ideal for corporate courses.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/693aac01507a550009c815eb\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.6s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Black_Gold.png?w=800&ssl=1\" alt=\"Black and Gold\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">High-Tech Science<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Black and Gold<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Dark-mode elegance with gold accents and scientific layout. Perfect for pharma and biotech.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6941208f507a550009c837b0\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.7s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Biophilic.png?w=800&ssl=1\" alt=\"Biophilic\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Organic & Natural<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Biophilic<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Organic design blending nature with medicine. Botanical photos for health courses.<\/p><\/div><\/a>\n <\/div>\n <div class=\"mt-20 text-center reveal\">\n <a href=\"https:\/\/author.livresq.com\/organizer\/templates\" class=\"inline-flex items-center px-8 py-4 text-sm font-bold text-slate-600 bg-white border border-slate-200 rounded-md hover:bg-slate-50 hover:text-livresq-fucsia hover:border-livresq-fucsia transition-all duration-300 shadow-sm hover:shadow-lg hover:-translate-y-1 group\">See all templates <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform\"><\/i><\/a>\n <\/div>\n <\/div>\n <div id=\"content-academic\" class=\"hidden animate-fade-in-up\">\n <div class=\"glass-panel-light rounded-[2.5rem] p-8 md:p-12 relative overflow-hidden shadow-2xl bg-white border border-slate-200 hover-pause\">\n <div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-br from-blue-100\/40 via-indigo-50\/40 to-white rounded-full blur-[80px] -translate-y-1\/2 translate-x-1\/3 pointer-events-none\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-gradient-to-tr from-cyan-50\/40 to-white rounded-full blur-[80px] translate-y-1\/3 -translate-x-1\/3 pointer-events-none\"><\/div>\n \n <div class=\"relative z-10 flex flex-col lg:flex-row items-center gap-16 lg:gap-24\">\n <div class=\"w-full lg:w-1\/2 space-y-8\">\n <div>\n <div class=\"inline-flex items-center gap-2 px-4 py-2 bg-blue-50 border border-blue-100 rounded-md text-blue-700 font-bold text-xs uppercase tracking-wider mb-6 shadow-sm\"><i data-lucide=\"book-open-check\" class=\"w-4 h-4\"><\/i> Public Library & OER<\/div>\n <h3 class=\"text-4xl md:text-5xl font-black text-slate-900 mb-6 leading-[1.15] tracking-tight\">Free Access to <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600\">17,000+ Sources<\/span><\/h3>\n <p class=\"text-lg text-slate-600 leading-relaxed font-medium\">Instant access to over <strong>20,000 free educational materials<\/strong>. Explore a growing collection of interactive lessons, courses, and Open Educational Resources (OER).<\/p>\n <\/div>\n <div class=\"p-6 rounded-2xl bg-white border border-slate-100 shadow-sm hover:border-blue-200 transition-colors\">\n <div class=\"flex items-center gap-4 mb-3\">\n <div class=\"w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600 shadow-sm\"><i data-lucide=\"download\" class=\"w-5 h-5\"><\/i><\/div>\n <div><span class=\"text-2xl font-black text-slate-900\">17.000+<\/span><h4 class=\"font-bold text-slate-700 text-sm leading-none\">Editable Sources<\/h4><\/div>\n <\/div>\n <p class=\"text-slate-600 font-medium border-t border-slate-100 pt-3 mt-1 text-sm\">Access, modify, and adapt any source for your needs.<\/p>\n <\/div>\n <div class=\"pt-2\">\n <a href=\"https:\/\/livresq.com\/en\/publish-library\/\" class=\"inline-flex items-center justify-center w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white hover:text-white font-bold rounded-md transition-all shadow-lg shadow-blue-500\/25 transform hover:-translate-y-1 group\"><i data-lucide=\"search\" class=\"w-5 h-5 mr-2\"><\/i> Search Library <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-2 opacity-70 group-hover:translate-x-1 transition-transform\"><\/i><\/a>\n <\/div>\n <\/div>\n <div class=\"w-full lg:w-1\/2 relative h-[500px] flex items-center justify-center\">\n <div class=\"relative w-full h-full bg-slate-50\/50 rounded-3xl overflow-hidden shadow-inner border border-slate-200 hover-pause\">\n <div class=\"absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"grid grid-cols-2 gap-4 p-4 h-full\">\n <div class=\"relative h-full overflow-hidden\"><div class=\"animate-scroll-y flex flex-col gap-4\" id=\"aca-col-1\"><\/div><\/div>\n <div class=\"relative h-full overflow-hidden pt-12\"><div class=\"animate-scroll-y-reverse flex flex-col gap-4\" id=\"aca-col-2\"><\/div><\/div>\n <\/div>\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[85%] z-20\">\n <div class=\"bg-white\/90 backdrop-blur-md p-2 rounded-2xl shadow-2xl border border-slate-200 flex items-center gap-3 animate-float\">\n <div class=\"w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center shrink-0\"><i data-lucide=\"search\" class=\"w-5 h-5\"><\/i><\/div>\n <div class=\"flex-1\"><div class=\"h-2 w-20 bg-slate-200 rounded-full mb-1.5\"><\/div><div class=\"h-2 w-32 bg-slate-100 rounded-full\"><\/div><\/div>\n <div class=\"pr-3\"><div class=\"w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center\"><i data-lucide=\"arrow-right\" class=\"w-3 h-3 text-slate-400\"><\/i><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"use-cases\" class=\"py-24 relative overflow-hidden bg-midnight bg-grid-overlay text-white spotlight-group\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent pointer-events-none\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-12 reveal\">\n <span class=\"text-indigo-300 font-bold tracking-widest uppercase text-xs border border-indigo-500\/30 px-3 py-1 rounded-md bg-indigo-900\/20 mb-4 inline-block shadow-sm\">Segmentation & Personalization<\/span>\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-white mb-6 font-heading text-glow-blue\">LIVRESQ for Your Domain<\/h2>\n \n \n <div class=\"flex items-center justify-center gap-4 mb-8\">\n <span class=\"text-sm font-bold transition-colors cursor-pointer text-slate-500\" id=\"cycle-monthly\" onclick=\"setBilling('monthly')\">Monthly<\/span>\n <button onclick=\"toggleBilling()\" class=\"w-16 h-8 rounded-md bg-slate-800 border border-slate-600 relative flex items-center p-1 transition-colors hover:border-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500\/50\">\n <div id=\"cycle-toggle-ball\" class=\"w-6 h-6 rounded-md bg-white shadow-md transform transition-transform duration-300 translate-x-8\"><\/div>\n <\/button>\n <span class=\"text-sm font-bold transition-colors cursor-pointer text-white\" id=\"cycle-yearly\" onclick=\"setBilling('yearly')\">Yearly<\/span>\n <\/div>\n <p class=\"text-slate-400 max-w-2xl mx-auto text-lg\">The platform adapts to your needs, offering specific plans and functionalities.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8 mb-16\">\n <div class=\"contents\" id=\"pricing-grid\">\n \n <div class=\"spotlight-card glass-panel-midnight rounded-[2rem] p-8 relative flex flex-col h-full hover:-translate-y-2 transition-all duration-500 group shadow-[0_0_30px_rgba(59,130,246,0.1)]\">\n <div class=\"border-beam\"><\/div>\n <div class=\"absolute top-0 left-8 w-20 h-1 bg-blue-500 shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div>\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex justify-between items-start mb-6 pt-4\">\n <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md bg-blue-500\/10 text-blue-400 border-blue-500\/20 shadow-inner group-hover:scale-110 transition-transform duration-500\">\n <i data-lucide=\"building-2\" class=\"w-7 h-7\"><\/i>\n <\/div>\n <div class=\"flex flex-col items-end gap-1\">\n <div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border border-blue-500\/30 text-blue-300 bg-blue-500\/10 shadow-sm\">FOR COMPANIES<\/div>\n <span id=\"badge-corp\" class=\"text-[9px] text-slate-400 font-bold uppercase tracking-wider hidden\">Yearly Only<\/span>\n <\/div>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Corporate & L&D<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">Digitize induction and compliance training. Complete SCORM reporting.<\/p>\n <div class=\"border-t border-slate-700\/50 py-6 mb-2\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-xs text-slate-500 font-bold uppercase\">Price<\/span>\n <span class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">845.79\u20ac<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <span class=\"text-xs text-slate-500 font-medium\">\/ seat \/ year<\/span>\n <\/div>\n <\/div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Team seats management<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Onboarding & Training<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Dedicated customer success<\/span><\/li>\n <\/ul>\n <a href=\"https:\/\/livresq.com\/en\/pricing\/\" class=\"w-full py-4 px-6 rounded-md font-bold text-center text-white hover:text-white transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 group-hover:scale-[1.02] border border-white\/10 bg-blue-600 hover:bg-blue-500 mt-auto\">\n Activate Enterprise Premium Account <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"spotlight-card glass-panel-midnight rounded-[2rem] p-8 relative flex flex-col h-full hover:-translate-y-2 transition-all duration-500 group shadow-[0_0_30px_rgba(217,18,120,0.1)]\">\n <div class=\"border-beam\"><\/div>\n <div class=\"absolute top-0 left-8 w-20 h-1 bg-livresq-fucsia shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div>\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex justify-between items-start mb-6 pt-4\">\n <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md bg-pink-500\/10 text-pink-400 border-pink-500\/20 shadow-inner group-hover:scale-110 transition-transform duration-500\">\n <i data-lucide=\"graduation-cap\" class=\"w-7 h-7\"><\/i>\n <\/div>\n <div class=\"flex flex-col items-end gap-1\">\n <div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border border-pink-500\/30 text-pink-300 bg-pink-500\/10 shadow-sm\">FOR TEACHERS<\/div>\n <span id=\"badge-aca\" class=\"text-[9px] text-slate-400 font-bold uppercase tracking-wider hidden\">Yearly Only<\/span>\n <\/div>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Academic & K-12<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">Create lessons that keep students engaged. Access the public library with free resources.<\/p>\n <div class=\"border-t border-slate-700\/50 py-6 mb-2\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-xs text-slate-500 font-bold uppercase\">Price<\/span>\n <span class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">35.26\u20ac<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <span class=\"text-xs text-slate-500 font-medium\">\/ user \/ year<\/span>\n <span class=\"flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-500\/10 border border-emerald-500\/30 px-2 py-0.5 rounded-md font-bold shadow-[0_0_10px_rgba(16,185,129,0.2)]\"><i data-lucide=\"star\" class=\"w-3 h-3 fill-current\"><\/i> Subsidized<\/span>\n <\/div>\n <\/div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Unlimited projects<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Subsidized Academic Licenses<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Library with over 17k educational material sources<\/span><\/li>\n <\/ul>\n <a href=\"https:\/\/livresq.com\/en\/pricing\/\" class=\"w-full py-4 px-6 rounded-md font-bold text-center text-white hover:text-white transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 group-hover:scale-[1.02] border border-white\/10 bg-livresq-fucsia hover:bg-pink-500 mt-auto\">\n Activate Academic Premium Account <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"spotlight-card glass-panel-midnight rounded-[2rem] p-8 relative flex flex-col h-full hover:-translate-y-2 transition-all duration-500 group shadow-[0_0_30px_rgba(249,115,22,0.1)]\">\n <div class=\"border-beam\"><\/div>\n <div class=\"absolute top-0 left-8 w-20 h-1 bg-orange-500 shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div>\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex justify-between items-start mb-6 pt-4\">\n <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md bg-orange-500\/10 text-orange-400 border-orange-500\/20 shadow-inner group-hover:scale-110 transition-transform duration-500\">\n <i data-lucide=\"pen-tool\" class=\"w-7 h-7\"><\/i>\n <\/div>\n <div class=\"flex flex-col items-end gap-1\">\n <div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border border-orange-500\/30 text-orange-300 bg-orange-500\/10 shadow-sm\">FOR FREELANCERS<\/div>\n <\/div>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Freelancers<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">Deliver projects to clients quickly. No installation, work from anywhere.<\/p>\n <div class=\"border-t border-slate-700\/50 py-6 mb-2\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-xs text-slate-500 font-bold uppercase\">Price<\/span>\n <span id=\"price-free\" class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">397\u20ac<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <span id=\"period-free\" class=\"text-xs text-slate-500 font-medium\">\/ user \/ year<\/span>\n <\/div>\n <\/div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Unlimited projects<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Customize with any logos you want<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Do what you want with created material, sell it, offer it for free, it’s your choice<\/span><\/li>\n <\/ul>\n <a href=\"https:\/\/livresq.com\/en\/pricing\/\" class=\"w-full py-4 px-6 rounded-md font-bold text-center text-white hover:text-white transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 group-hover:scale-[1.02] border border-white\/10 bg-orange-600 hover:bg-orange-500 mt-auto\">\n Activate Freelance Premium Account <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"grid grid-cols-1 lg:grid-cols-5 gap-8\">\n <div class=\"lg:col-span-3 reveal h-full\">\n <div class=\"spotlight-card glass-panel-midnight rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden group flex flex-col h-full hover:border-blue-500\/30 transition-all duration-500\">\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-blue-900\/10 rounded-bl-full -mr-10 -mt-10 transition-transform group-hover:scale-110 pointer-events-none blur-3xl\"><\/div>\n <div class=\"flex items-center gap-4 mb-8 relative z-10\">\n <div class=\"w-12 h-12 bg-blue-500\/10 border border-blue-500\/20 rounded-2xl flex items-center justify-center text-blue-400 shadow-[0_0_20px_rgba(59,130,246,0.1)]\"><i data-lucide=\"building-2\" class=\"w-6 h-6\"><\/i><\/div>\n <div><h3 class=\"text-2xl font-bold text-white\">Companies & Trainers<\/h3><p class=\"text-xs text-blue-400 uppercase tracking-widest font-bold mt-1\">Industry-tailored solutions<\/p><\/div>\n <\/div>\n <p class=\"text-slate-400 text-lg mb-10 max-w-2xl relative z-10 leading-relaxed\">Complete training solutions adapted for specific industries. From regulated banking processes to occupational safety in factories.<\/p>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10 relative z-10\" id=\"industry-grid\"><\/div>\n \n <div class=\"mt-auto bg-white p-8 rounded-3xl border border-slate-200 relative z-10 shadow-lg transition-colors group-hover:border-slate-300\">\n <div class=\"absolute top-8 right-8 text-slate-100 w-10 h-10 transform -scale-x-100\"><i data-lucide=\"quote\" class=\"w-10 h-10 fill-current\"><\/i><\/div>\n <p class=\"text-slate-600 italic mb-6 leading-relaxed relative z-10 font-medium\">„CEC Bank used LIVRESQ to customize internal courses, ensuring relevance and perfect alignment with the organization’s strategic objectives. We managed to build a partnership relationship with Ascendia centered on both their and our concern for developing our colleagues’ skills.”<\/p>\n <div class=\"flex items-start gap-4 border-t border-slate-100 pt-6\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Cezar_B.png?w=800&ssl=1\" alt=\"Cezar Barladeanu\" class=\"w-16 h-16 rounded-full border-2 border-slate-100 object-cover shadow-sm\">\n <div>\n <p class=\"text-base font-bold text-slate-900 leading-tight\">Cezar Barladeanu<\/p>\n <p class=\"text-sm text-slate-500 mb-1\">HR Strategy & Operations<\/p>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_LOGO.png?w=800&ssl=1\" alt=\"CEC Bank\" class=\"h-8 w-auto opacity-90 mix-blend-multiply\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"lg:col-span-2 reveal h-full delay-200\">\n <div class=\"spotlight-card glass-panel-midnight rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden group flex flex-col h-full hover:border-pink-500\/30 transition-all duration-500\">\n <div class=\"absolute top-0 right-0 w-48 h-48 bg-pink-900\/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110 pointer-events-none blur-3xl\"><\/div>\n <div class=\"flex items-center gap-4 mb-8 relative z-10\">\n <div class=\"w-12 h-12 bg-pink-500\/10 border border-pink-500\/20 rounded-2xl flex items-center justify-center text-pink-400 shadow-[0_0_20px_rgba(236,72,153,0.1)]\"><i data-lucide=\"graduation-cap\" class=\"w-6 h-6\"><\/i><\/div>\n <div><h3 class=\"text-2xl font-bold text-white\">Education<\/h3><p class=\"text-xs text-pink-400 uppercase tracking-widest font-bold mt-1\">K-12 & Universities<\/p><\/div>\n <\/div>\n <div class=\"space-y-4 mb-10 relative z-10\" id=\"edu-features\"><\/div>\n \n <div class=\"mt-auto bg-white p-8 rounded-3xl border border-slate-200 relative z-10 shadow-lg transition-colors group-hover:border-slate-300\">\n <div class=\"absolute top-8 right-8 text-slate-100 w-8 h-8 transform -scale-x-100\"><i data-lucide=\"quote\" class=\"w-8 h-8 fill-current\"><\/i><\/div>\n <p class=\"text-slate-600 italic mb-6 leading-relaxed relative z-10 font-medium\">„What we appreciate most about LIVRESQ is flexibility and interactivity. Many of the over <strong class=\"text-pink-600\">20,000 enrolled teachers<\/strong> appreciated how the course was created.”<\/p>\n <div class=\"flex items-start gap-4 border-t border-slate-100 pt-6\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Andreea_Hu.jpg?w=800&ssl=1\" alt=\"Andreea Hurezeanu\" class=\"w-16 h-16 rounded-full border-2 border-slate-100 object-cover shadow-sm\">\n <div>\n <p class=\"text-base font-bold text-slate-900 leading-tight\">Andreea Hurezeanu<\/p>\n <p class=\"text-sm text-slate-500 mb-2\">Strategic Partnership Coordinator<\/p>\n <div class=\"bg-slate-50 px-3 py-1.5 rounded shadow-sm inline-block border border-slate-100\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Logo_SavetheChildren.png?w=800&ssl=1\" alt=\"Save the Children\" class=\"h-10 w-auto mix-blend-multiply\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-slate-50 border-t border-slate-200\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\"><h2 class=\"text-3xl md:text-5xl font-black text-slate-900 mb-4 font-heading tracking-tight\">Features<\/h2><p class=\"text-slate-500 max-w-2xl mx-auto text-lg font-light\">A complete ecosystem of tools for any educational scenario.<\/p><\/div>\n <div class=\"space-y-6 max-w-5xl mx-auto\" id=\"features-accordion\">\n \n <div class=\"reveal bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 delay-100\">\n <details class=\"group\" open>\n <summary class=\"flex justify-between items-center cursor-pointer p-6 hover:bg-slate-50 transition-colors duration-200 list-none select-none\">\n <div class=\"flex items-center gap-5\"><div class=\"p-3 bg-fuchsia-50 rounded-xl text-fuchsia-600 border border-fuchsia-100\"><i data-lucide=\"layout-template\" class=\"w-6 h-6\"><\/i><\/div><span class=\"text-xl font-bold text-slate-900 tracking-tight\">Design & Structure<\/span><\/div>\n <span class=\"transition-transform duration-300 group-open:rotate-180 bg-slate-100 p-2 rounded-md\"><i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-500\"><\/i><\/span>\n <\/summary>\n <div class=\"p-6 pt-0 border-t border-slate-100 bg-slate-50\/50\"><div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6\"><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Templates<\/h4><p class=\"text-sm text-slate-500 font-medium\">Ready-made editable content.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Images & Galleries<\/h4><p class=\"text-sm text-slate-500 font-medium\">Own upload or library.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Text Cells<\/h4><p class=\"text-sm text-slate-500 font-medium\">Advanced formatting editor.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Tables & iFrames<\/h4><p class=\"text-sm text-slate-500 font-medium\">Organize data and content.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Math Editor<\/h4><p class=\"text-sm text-slate-500 font-medium\">Complex formulas (TeX\/MathJax).<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Content Import<\/h4><p class=\"text-sm text-slate-500 font-medium\">Import resources from other sources.<\/p><\/div><\/div><\/div><\/div><\/div>\n <\/details>\n <\/div>\n <div class=\"reveal bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 delay-200\">\n <details class=\"group\">\n <summary class=\"flex justify-between items-center cursor-pointer p-6 hover:bg-slate-50 transition-colors duration-200 list-none select-none\">\n <div class=\"flex items-center gap-5\"><div class=\"p-3 bg-blue-50 rounded-xl text-blue-600 border border-blue-100\"><i data-lucide=\"mouse-pointer-click\" class=\"w-6 h-6\"><\/i><\/div><span class=\"text-xl font-bold text-slate-900 tracking-tight\">Interactivity & Engagement<\/span><\/div>\n <span class=\"transition-transform duration-300 group-open:rotate-180 bg-slate-100 p-2 rounded-md\"><i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-500\"><\/i><\/span>\n <\/summary>\n <div class=\"p-6 pt-0 border-t border-slate-100 bg-slate-50\/50\"><div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6\"><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Quizzes<\/h4><p class=\"text-sm text-slate-500 font-medium\">Multiple types of interactive tests.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Gamification<\/h4><p class=\"text-sm text-slate-500 font-medium\">Crosswords and word games.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Video & Audio<\/h4><p class=\"text-sm text-slate-500 font-medium\">Natively integrated multimedia.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Pop-ups & Hyperlinks<\/h4><p class=\"text-sm text-slate-500 font-medium\">Additional layers of information.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Virtual Assistants<\/h4><p class=\"text-sm text-slate-500 font-medium\">Guide characters for feedback.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Navigation Control<\/h4><p class=\"text-sm text-slate-500 font-medium\">Barriers and path conditioning.<\/p><\/div><\/div><\/div><\/div><\/div>\n <\/details>\n <\/div>\n <div class=\"reveal bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 delay-300\">\n <details class=\"group\">\n <summary class=\"flex justify-between items-center cursor-pointer p-6 hover:bg-slate-50 transition-colors duration-200 list-none select-none\">\n <div class=\"flex items-center gap-5\"><div class=\"p-3 bg-emerald-50 rounded-xl text-emerald-600 border border-emerald-100\"><i data-lucide=\"cpu\" class=\"w-6 h-6\"><\/i><\/div><span class=\"text-xl font-bold text-slate-900 tracking-tight\">Technology & Distribution<\/span><\/div>\n <span class=\"transition-transform duration-300 group-open:rotate-180 bg-slate-100 p-2 rounded-md\"><i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-500\"><\/i><\/span>\n <\/summary>\n <div class=\"p-6 pt-0 border-t border-slate-100 bg-slate-50\/50\"><div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6\"><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Full AI Suite<\/h4><p class=\"text-sm text-slate-500 font-medium\">Lesson generator, DALL-E, Avatar Video.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">SCORM Export<\/h4><p class=\"text-sm text-slate-500 font-medium\">Compatible 1.2 & 2004.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">SCORM Import<\/h4><p class=\"text-sm text-slate-500 font-medium\">Edit existing packages.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Translation & TTS<\/h4><p class=\"text-sm text-slate-500 font-medium\">Automatic localization.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Live Collaboration<\/h4><p class=\"text-sm text-slate-500 font-medium\">Real-time teamwork.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Certificates<\/h4><p class=\"text-sm text-slate-500 font-medium\">Automatic diploma generation.<\/p><\/div><\/div><\/div><\/div><\/div>\n <\/details>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-24 bg-midnight bg-grid-overlay text-white spotlight-group relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none\"><div class=\"absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-purple-900\/20 rounded-full blur-[100px]\"><div class=\"absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-900\/20 rounded-full blur-[100px]\"><\/div><\/div><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"flex flex-col md:flex-row items-center justify-between gap-16\">\n <div class=\"w-full md:w-7\/12\">\n <span class=\"text-fuchsia-300 font-bold tracking-widest uppercase text-xs border border-fuchsia-500\/30 px-3 py-1 rounded-md bg-fuchsia-900\/20 mb-6 inline-block shadow-[0_0_15px_rgba(217,70,239,0.3)]\">Easy Migration<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold mb-6 font-heading text-white text-glow-blue tracking-tight\">Import Existing <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 to-purple-400\">SCORM<\/span> Packages<\/h2>\n <p class=\"text-lg text-slate-400 mb-10 leading-relaxed font-medium max-w-xl\">Have content stuck in other platforms (e.g., Rise)? LIVRESQ gives you the freedom to import and edit exported packages. Don’t lose previous work \u2013 transform it.<\/p>\n <div class=\"grid sm:grid-cols-2 gap-4\">\n <div class=\"spotlight-card glass-panel-midnight p-5 rounded-2xl border border-white\/5 hover:border-white\/20 transition-all duration-300 group cursor-default relative overflow-hidden\"><div class=\"relative z-10\"><div class=\"w-10 h-10 bg-orange-500\/10 rounded-lg flex items-center justify-center text-orange-400 mb-3 border border-orange-500\/20 shadow-sm\"><i data-lucide=\"file-archive\" class=\"w-5 h-5\"><\/i><\/div><h4 class=\"text-white font-bold mb-1\">Keep Structure<\/h4><p class=\"text-xs text-slate-500 font-medium\">Import chapter organization intact.<\/p><\/div><\/div>\n <div class=\"spotlight-card glass-panel-midnight p-5 rounded-2xl border border-white\/5 hover:border-white\/20 transition-all duration-300 group cursor-default relative overflow-hidden\"><div class=\"relative z-10\"><div class=\"w-10 h-10 bg-blue-500\/10 rounded-lg flex items-center justify-center text-blue-400 mb-3 border border-blue-500\/20 shadow-sm\"><i data-lucide=\"edit-3\" class=\"w-5 h-5\"><\/i><\/div><h4 class=\"text-white font-bold mb-1\">Full Editing<\/h4><p class=\"text-xs text-slate-500 font-medium\">Modify texts, images, and quizzes.<\/p><\/div><\/div>\n <div class=\"spotlight-card glass-panel-midnight p-5 rounded-2xl border border-white\/5 hover:border-white\/20 transition-all duration-300 group cursor-default relative overflow-hidden sm:col-span-2\"><div class=\"flex items-center gap-4 relative z-10\"><div class=\"w-10 h-10 bg-emerald-500\/10 rounded-lg flex items-center justify-center text-emerald-400 shrink-0 border border-emerald-500\/20 shadow-sm\"><i data-lucide=\"refresh-cw\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"text-white font-bold\">Automatic Conversion<\/h4><p class=\"text-xs text-slate-500 font-medium\">Transform static packages into editable LIVRESQ projects in minutes.<\/p><\/div><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"w-full md:w-5\/12 flex justify-center perspective-1000\">\n <div class=\"relative w-64 h-64 animate-float\">\n <div class=\"absolute inset-0 rounded-full border border-fuchsia-500\/20 animate-spin-slow\"><\/div>\n <div class=\"absolute inset-4 rounded-full border border-blue-500\/20 animate-spin-reverse-slow border-dashed\"><\/div>\n <div class=\"absolute inset-8 rounded-[2rem] glass-panel-midnight flex items-center justify-center border border-white\/10 shadow-[0_0_50px_rgba(168,85,247,0.15)] group hover:shadow-[0_0_80px_rgba(168,85,247,0.3)] transition-shadow duration-500\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-fuchsia-500\/10 to-blue-500\/10 rounded-[2rem] opacity-50\"><\/div>\n <div class=\"flex flex-col items-center gap-3 relative z-10\">\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-slate-800 to-black border border-white\/10 flex items-center justify-center shadow-inner\"><i data-lucide=\"arrow-down-circle\" class=\"w-8 h-8 text-fuchsia-400\"><\/i><\/div>\n <div class=\"h-1 w-12 bg-slate-700 rounded-full overflow-hidden\"><div class=\"h-full bg-fuchsia-500 w-2\/3 animate-pulse\"><\/div><\/div>\n <span class=\"text-[10px] font-mono text-fuchsia-300 tracking-widest uppercase\">Processing…<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section class=\"py-24 bg-white relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-blue-50 rounded-full blur-3xl opacity-60 translate-x-1\/3 -translate-y-1\/3 pointer-events-none\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-indigo-50 rounded-full blur-3xl opacity-60 -translate-x-1\/3 translate-y-1\/3 pointer-events-none\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"flex flex-col items-center text-center mb-16\">\n <span class=\"text-blue-600 font-bold tracking-widest uppercase text-xs border border-blue-200 px-3 py-1 rounded-md bg-blue-50 inline-block mb-6 shadow-sm\">Compliance & Standards<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 font-heading leading-[1.15]\">Publish <span class=\"text-blue-600\">SCORM<\/span> Packages<\/h2>\n <p class=\"text-slate-600 leading-relaxed text-lg font-medium max-w-3xl mx-auto\">We know compliance is critical for organizations. LIVRESQ generates native compatible code, ensuring seamless integration with any modern or legacy LMS.<\/p>\n <\/div>\n <div class=\"w-full max-w-5xl mx-auto mb-16 relative perspective-1000\">\n <div class=\"relative rounded-2xl bg-white p-2 shadow-2xl border border-slate-200 transform hover:scale-[1.01] transition-transform duration-500 transform-style-3d\">\n <div class=\"h-10 bg-slate-50 border-b border-slate-100 rounded-t-xl flex items-center px-4 gap-2 mb-0\"><div class=\"flex gap-1.5\"><div class=\"w-3 h-3 rounded-full bg-slate-300\"><\/div><div class=\"w-3 h-3 rounded-full bg-slate-300\"><\/div><div class=\"w-3 h-3 rounded-full bg-slate-300\"><\/div><\/div><div class=\"flex-1 text-center\"><div class=\"inline-block px-4 py-1 bg-white border border-slate-200 rounded text-[10px] font-mono text-slate-400\">scorm-preview.html<\/div><\/div><\/div>\n <div class=\"relative rounded-b-xl overflow-hidden bg-slate-900 aspect-video group shadow-inner\"><video controls autoplay muted loop playsinline class=\"w-full h-full object-cover\"><source src=\"https:\/\/livresq.com\/wp-content\/uploads\/2022\/11\/Scorm_livresq_all.mp4\" type=\"video\/mp4\"><\/video><\/div>\n <\/div>\n \n <div class=\"absolute top-1\/2 -translate-y-1\/2 -right-6 md:-right-12 bg-white p-4 rounded-xl shadow-xl border border-slate-100 hidden md:flex items-center gap-3 animate-float z-20\" style=\"animation-delay: 1.5s\"><div class=\"w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-200\"><i data-lucide=\"layers\" class=\"w-6 h-6\"><\/i><\/div><div><p class=\"text-xs uppercase font-bold text-slate-400 tracking-wider\">SCORM<\/p><p class=\"text-sm font-black text-slate-900\">Export\/Import<\/p><\/div><\/div>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-6 max-w-5xl mx-auto\">\n <div class=\"flex flex-col items-center text-center p-6 rounded-2xl bg-white border border-slate-100 shadow-sm hover:shadow-md hover:border-blue-100 transition-all group\"><div class=\"w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center text-slate-600 mb-4 group-hover:bg-slate-200 transition-colors\"><i data-lucide=\"check-circle\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 text-lg mb-2\">SCORM 1.2<\/h4><p class=\"text-sm text-slate-500 font-medium leading-relaxed\">Maximum compatibility with old systems and legacy platforms.<\/p><\/div>\n <div class=\"flex flex-col items-center text-center p-6 rounded-2xl bg-emerald-50 border border-emerald-100 shadow-md hover:shadow-lg transition-all group relative overflow-hidden transform md:-translate-y-4\"><div class=\"absolute right-0 top-0 p-2 opacity-10 pointer-events-none\"><i data-lucide=\"check-circle\" class=\"w-32 h-32 text-emerald-500\"><\/i><\/div><div class=\"w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center text-emerald-600 mb-4 relative z-10 shadow-sm\"><i data-lucide=\"check-circle\" class=\"w-6 h-6\"><\/i><\/div><div class=\"relative z-10\"><h4 class=\"font-bold text-slate-900 text-lg mb-2\">SCORM 2004 3rd Edition<\/h4><p class=\"text-sm text-emerald-700 font-bold leading-relaxed\">Industry gold standard. Advanced reporting and sequencing.<\/p><\/div><\/div>\n <div class=\"flex flex-col items-center text-center p-6 rounded-2xl bg-white border border-slate-100 shadow-sm hover:shadow-md hover:border-blue-100 transition-all group\"><div class=\"w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-blue-600 mb-4 group-hover:bg-blue-100 transition-colors\"><i data-lucide=\"check-circle\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 text-lg mb-2\">SCORM 2004 4th Edition<\/h4><p class=\"text-sm text-slate-500 font-medium leading-relaxed\">The latest version of the standard for modern platforms.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative bg-midnight bg-grid-overlay border-t border-slate-800 spotlight-group\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-bold text-blue-200\/50 uppercase tracking-widest mb-2\">International Recognition<\/h2>\n <h3 class=\"text-2xl md:text-3xl font-extrabold text-white font-heading text-glow-blue\">Trusted Partner in the European Innovation Ecosystem<\/h3>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <div class=\"reveal delay-100 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><svg class=\"absolute -right-10 -bottom-10 w-64 h-64 text-blue-500\/5 opacity-20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"><\/path><\/svg><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-blue-500\/10 border border-blue-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"flag\" class=\"w-7 h-7 fill-current\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-blue-500\/10 border border-blue-400\/20 rounded-md text-blue-300 text-[10px] font-bold uppercase tracking-wider\">DEC Member<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">European Commission<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Member of the Digital Education Content (DEC) expert group of the European Commission, actively contributing to the standardization and modernization of educational resources at the EU level.<\/p><\/div><\/div><\/div><\/div>\n <div class=\"reveal delay-200 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-indigo-500\/10 border border-indigo-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"landmark\" class=\"w-7 h-7\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-indigo-500\/10 border border-indigo-400\/20 rounded-md text-indigo-300 text-[10px] font-bold uppercase tracking-wider\">Official Provider<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">Council of Europe<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">The LIVRESQ platform is used for creating and providing services for the development and maintenance of e-learning modules and associated training services. We are official providers for the Council of Europe.<\/p><\/div><\/div><\/div><\/div>\n <div class=\"reveal delay-300 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-green-500\/10 border border-green-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"cpu\" class=\"w-7 h-7\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-green-500\/10 border border-green-400\/20 rounded-md text-green-300 text-[10px] font-bold uppercase tracking-wider\">AI for GovTech<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">Google Accelerator<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">LIVRESQ selected for innovation in the public sector by integrating advanced Artificial Intelligence technologies into educational processes.<\/p><\/div><\/div><\/div><\/div>\n <div class=\"reveal delay-400 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-sky-500\/10 border border-sky-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"accessibility\" class=\"w-7 h-7\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-sky-500\/10 border border-sky-400\/20 rounded-md text-sky-300 text-[10px] font-bold uppercase tracking-wider\">AI Hall of Fame<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">Microsoft<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Global recognition for LIVRESQ’s impact in facilitating access to digital education for people with disabilities.<\/p><\/div><\/div><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-slate-50 border-t border-slate-200\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"reveal\">\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-16 gap-6\">\n <div class=\"max-w-3xl\">\n <span class=\"text-emerald-600 font-bold tracking-widest uppercase text-xs border border-emerald-200 px-3 py-1 rounded-md bg-emerald-50 mb-6 inline-block shadow-sm\">Security-First Architecture<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black text-slate-900 leading-tight font-heading\">Armored Infrastructure.<br\/><span class=\"text-emerald-600\">Zero Compromises.<\/span><\/h2>\n <\/div>\n <div class=\"max-w-sm text-left md:text-right\"><p class=\"text-slate-500 font-medium text-sm leading-relaxed\">Built on banking standards. Audited for GDPR compliance. Hosted exclusively in the EU.<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n <div class=\"reveal delay-100\">\n <div class=\"bg-white rounded-[2.5rem] p-8 border border-slate-200 shadow-xl relative overflow-hidden h-full\">\n <div class=\"absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:20px_20px]\"><\/div>\n <div class=\"relative z-10 flex flex-col gap-6 h-full justify-center\">\n <div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm flex items-center gap-4 hover:shadow-md transition-shadow\"><div class=\"w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 shrink-0\"><i data-lucide=\"server\" class=\"w-6 h-6\"><\/i><\/div><div class=\"flex-1\"><div class=\"flex justify-between items-center mb-1\"><h4 class=\"font-bold text-slate-800 text-sm\">Physical Infrastructure<\/h4><span class=\"text-[10px] font-mono text-slate-400 border border-slate-200 px-1.5 rounded\">MS AZURE<\/span><\/div><div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden mb-1\"><div class=\"h-full w-full bg-blue-500 rounded-full\"><\/div><\/div><p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">West Europe \/ Netherlands Datacenter<\/p><\/div><\/div>\n <div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm flex items-center gap-4 hover:shadow-md transition-shadow\"><div class=\"w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center text-purple-600 shrink-0\"><i data-lucide=\"network\" class=\"w-6 h-6\"><\/i><\/div><div class=\"flex-1\"><div class=\"flex justify-between items-center mb-1\"><h4 class=\"font-bold text-slate-800 text-sm\">Data Transport<\/h4><span class=\"text-[10px] font-mono text-slate-400 border border-slate-200 px-1.5 rounded\">TLS 1.3 \/ SSL<\/span><\/div><div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden mb-1\"><div class=\"h-full w-full bg-purple-500 rounded-full\"><\/div><\/div><p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">End-to-End Encryption in Transit<\/p><\/div><\/div>\n <div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm flex items-center gap-4 hover:shadow-md transition-shadow\"><div class=\"w-12 h-12 bg-emerald-50 rounded-lg flex items-center justify-center text-emerald-600 shrink-0\"><i data-lucide=\"lock\" class=\"w-6 h-6\"><\/i><\/div><div class=\"flex-1\"><div class=\"flex justify-between items-center mb-1\"><h4 class=\"font-bold text-slate-800 text-sm\">Storage & Access<\/h4><span class=\"text-[10px] font-mono text-slate-400 border border-slate-200 px-1.5 rounded\">AES-256<\/span><\/div><div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden mb-1\"><div class=\"h-full w-full bg-emerald-500 rounded-full\"><\/div><\/div><div class=\"flex flex-col gap-1 mt-1\"><p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">ISO 27001 & 9001 Certified Processes<\/p><p class=\"text-[9px] text-slate-400 leading-tight\">SR ISO\/CEI 27001:2023 (ISO\/IEC 27001:2022)<br\/>SR EN ISO 9001:2015 (ISO 9001:2015)<\/p><\/div><\/div><\/div>\n <div class=\"mt-2 flex items-center gap-2 text-[10px] font-bold text-emerald-600 uppercase tracking-widest pl-2\"><span class=\"relative flex h-2 w-2\"><span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75\"><\/span><span class=\"relative inline-flex rounded-full h-2 w-2 bg-emerald-500\"><\/span><\/span> Systems Operational<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"flex flex-col gap-6\">\n <div class=\"reveal delay-200\"><div class=\"bg-slate-900 rounded-[2.5rem] p-8 md:p-10 text-white relative overflow-hidden shadow-2xl group border border-slate-800\"><div class=\"absolute top-0 right-0 w-64 h-64 bg-slate-800 rounded-bl-full -mr-16 -mt-16 transition-transform group-hover:scale-110 pointer-events-none opacity-50\"><\/div><div class=\"relative z-10\"><div class=\"w-14 h-14 bg-slate-800 rounded-2xl flex items-center justify-center text-blue-400 mb-6 border border-slate-700 shadow-inner\"><i data-lucide=\"file-check\" class=\"w-7 h-7\"><\/i><\/div><h3 class=\"text-2xl font-bold mb-1\">100% Ownership<\/h3><p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest mb-6\">Contractual Guarantee<\/p><p class=\"text-slate-300 leading-relaxed font-medium mb-8\">Unlike other SaaS platforms, LIVRESQ claims no rights over your content. The materials created are your company’s asset.<\/p><div class=\"inline-flex items-center gap-2 px-3 py-1 bg-slate-800 rounded text-[10px] font-mono text-slate-400 border border-slate-700\"><i data-lucide=\"copyright\" class=\"w-3 h-3\"><\/i> All Rights Reserved<\/div><\/div><\/div><\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n <div class=\"reveal delay-300\"><div class=\"bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col items-center text-center h-full justify-center\"><div class=\"w-12 h-12 bg-emerald-50 rounded-full flex items-center justify-center text-emerald-600 mb-3\"><i data-lucide=\"fingerprint\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 mb-1\">GDPR Ready<\/h4><p class=\"text-xs text-slate-500\">Full EU Audit<\/p><\/div><\/div>\n <div class=\"reveal delay-400\"><div class=\"bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col items-center text-center h-full justify-center\"><div class=\"w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-blue-600 mb-3\"><i data-lucide=\"eye-off\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 mb-1\">Private Projects<\/h4><p class=\"text-xs text-slate-500\">Secure Link Access<\/p><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-midnight bg-grid-overlay border-t border-slate-800 relative spotlight-group\">\n <div class=\"max-w-3xl mx-auto px-4 relative z-10 reveal\">\n <h2 class=\"text-3xl font-bold text-center mb-12 text-white text-glow-blue\">Frequently Asked Questions<\/h2>\n <div class=\"space-y-4\">\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">Can I start for free? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">Yes, we offer a free license with access to basic features. No card required.<\/p><\/div><\/details>\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">Does it work on any LMS? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">Yes, packages exported from LIVRESQ are compatible with SCORM 1.2 and 2004 standards.<\/p><\/div><\/details>\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">Do I need to install anything? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">No. LIVRESQ is a cloud-based solution and runs 100% in the browser.<\/p><\/div><\/details>\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">What happens to my materials? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">The created materials belong entirely to you. You can export, download, and keep them on your own computer.<\/p><\/div><\/details>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-slate-50 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-white via-slate-50 to-transparent pointer-events-none\"><\/div>\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 relative z-10\">\n <div class=\"reveal\">\n <div class=\"relative rounded-[3rem] overflow-hidden bg-[#020617] shadow-2xl group border border-slate-800\/50\">\n <div class=\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-livresq-fucsia to-transparent opacity-50\"><\/div>\n <div class=\"absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:60px_60px] opacity-20 animate-[pulse_10s_infinite]\"><\/div>\n <div class=\"absolute -top-[30%] left-[10%] w-[800px] h-[800px] bg-blue-600\/10 rounded-full blur-[120px] pointer-events-none mix-blend-screen animate-float\"><\/div>\n <div class=\"absolute -bottom-[30%] right-[10%] w-[600px] h-[600px] bg-livresq-fucsia\/10 rounded-full blur-[100px] pointer-events-none mix-blend-screen\" style=\"animation-delay: 2s\"><\/div>\n <div class=\"relative z-10 flex flex-col lg:flex-row items-center justify-between p-8 md:p-16 gap-12 lg:gap-24\">\n <div class=\"w-full lg:w-1\/2 text-left space-y-8\">\n <div class=\"inline-flex items-center gap-2 bg-white\/5 border border-white\/10 rounded-md px-4 py-1.5 backdrop-blur-md hover:bg-white\/10 transition-colors cursor-default\"><div class=\"flex -space-x-2\"><div class=\"w-5 h-5 rounded-full bg-blue-500 border border-slate-900\"><\/div><div class=\"w-5 h-5 rounded-full bg-pink-500 border border-slate-900\"><\/div><div class=\"w-5 h-5 rounded-full bg-emerald-500 border border-slate-900\"><\/div><\/div><span class=\"text-xs font-bold text-slate-300 tracking-wide\">Join over <span class=\"text-white\">158,000+<\/span> creators<\/span><\/div>\n <h2 class=\"text-4xl md:text-6xl font-black text-white leading-[1.05] tracking-tight\">Transform ideas into <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-livresq-fucsia animate-gradient-x\">Digital Experiences.<\/span><\/h2>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-3\"><div class=\"flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500\/10 text-emerald-400 border border-emerald-500\/20\"><i data-lucide=\"check-circle-2\" class=\"w-3.5 h-3.5\"><\/i><\/div><p class=\"text-slate-400 text-lg font-medium\">Instant access. No installation.<\/p><\/div>\n <div class=\"flex items-center gap-3\"><div class=\"flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500\/10 text-emerald-400 border border-emerald-500\/20\"><i data-lucide=\"check-circle-2\" class=\"w-3.5 h-3.5\"><\/i><\/div><p class=\"text-slate-400 text-lg font-medium\">SCORM export compatible with any LMS.<\/p><\/div>\n <div class=\"flex items-center gap-3\"><div class=\"flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500\/10 text-emerald-400 border border-emerald-500\/20\"><i data-lucide=\"check-circle-2\" class=\"w-3.5 h-3.5\"><\/i><\/div><p class=\"text-slate-400 text-lg font-medium\">Free license available.<\/p><\/div>\n <\/div>\n <div class=\"flex flex-col sm:flex-row gap-4 pt-4\">\n <a href=\"https:\/\/livresq.com\/en\/my-account\/\" class=\"relative inline-flex items-center justify-center px-8 py-4 text-base font-bold rounded-md text-white hover:text-white transition-all duration-300 bg-blue-600 hover:bg-blue-500 shadow-[0_0_30px_rgba(37,99,235,0.3)] hover:shadow-[0_0_50px_rgba(37,99,235,0.5)] transform hover:-translate-y-1 overflow-hidden group\/btn flex-1 sm:flex-none\">\n <span class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white\/20 to-transparent -translate-x-full group-hover\/btn:animate-[shimmer_1s_infinite]\"><\/span><i data-lucide=\"zap\" class=\"w-5 h-5 mr-2 fill-current\"><\/i> Create Free Account\n <\/a>\n <\/div>\n <p class=\"text-xs font-bold text-slate-600 uppercase tracking-widest pl-1\"><i data-lucide=\"lock\" class=\"w-3 h-3 inline-block mb-0.5 mr-1\"><\/i> Securely Hosted in Microsoft Azure, Europe<\/p>\n <\/div>\n <div class=\"w-full lg:w-1\/2 relative perspective-1000\">\n <div class=\"relative rounded-xl bg-slate-900 border border-slate-700 p-2 shadow-2xl transform lg:rotate-y-[-12deg] lg:rotate-x-[5deg] lg:translate-x-8 transition-transform duration-700 hover:transform-none\">\n <div class=\"absolute inset-0 bg-gradient-to-tr from-white\/10 to-transparent rounded-xl pointer-events-none z-20 mix-blend-overlay\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2023\/03\/LIVRESQ_template_course_elearning.jpeg\" alt=\"LIVRESQ Editor Interface\" class=\"w-full h-auto rounded-lg shadow-inner relative z-10\">\n <\/div>\n <div class=\"absolute -bottom-6 -left-6 bg-slate-800\/90 backdrop-blur border border-slate-600 p-4 rounded-xl shadow-xl flex items-center gap-3 lg:rotate-y-[-12deg] z-30\">\n <div class=\"w-10 h-10 rounded-lg bg-green-500\/20 flex items-center justify-center text-green-400\"><i data-lucide=\"activity\" class=\"w-5 h-5\"><\/i><\/div>\n <div><p class=\"text-[10px] uppercase font-bold text-slate-400 tracking-wider\">Status<\/p><p class=\"text-sm font-bold text-white\">System Online<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n\n \n <script>\n \/\/ Init Icons\n lucide.createIcons();\n\n \/\/ 1. NAVBAR SCROLL\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('navbar');\n const skew = document.getElementById('nav-skew');\n const logo = document.getElementById('nav-logo-container');\n \n if (window.scrollY > 10) {\n nav.classList.add('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n nav.classList.remove('bg-[#1379D1]');\n skew.style.width = '290px';\n logo.classList.replace('pl-10', 'pl-8');\n } else {\n nav.classList.add('bg-[#1379D1]');\n nav.classList.remove('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n skew.style.width = '360px';\n logo.classList.replace('pl-8', 'pl-10');\n }\n });\n\n \/\/ 1.5 SCROLL REVEAL\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n }\n });\n }, { threshold: 0.1 });\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n \/\/ 2. HERO CAROUSEL LOGIC\n const templates = [\n { id: 0, title: \"Glassmorphism\", category: \"Modern SaaS\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png\", icon: \"layers\", color: \"text-blue-400\", bg: \"bg-blue-500\", border: \"border-blue-500\/30\" },\n { id: 1, title: \"Biophilic\", category: \"Nature\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Biophilic.png\", icon: \"leaf\", color: \"text-emerald-400\", bg: \"bg-emerald-500\", border: \"border-emerald-500\/30\" },\n { id: 2, title: \"Neomemphis\", category: \"Marketing\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/Neomemphis.png\", icon: \"box\", color: \"text-yellow-400\", bg: \"bg-yellow-500\", border: \"border-yellow-500\/30\" },\n { id: 3, title: \"Dark Cinematic\", category: \"Storytelling\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/2.png\", icon: \"monitor\", color: \"text-purple-400\", bg: \"bg-purple-500\", border: \"border-purple-500\/30\" },\n { id: 4, title: \"Minimalism\", category: \"Corporate\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/3.png\", icon: \"layout\", color: \"text-slate-500\", bg: \"bg-slate-500\", border: \"border-slate-500\/30\" },\n { id: 5, title: \"Soft Glass\", category: \"Medical\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/1.png\", icon: \"droplet\", color: \"text-cyan-400\", bg: \"bg-cyan-500\", border: \"border-cyan-500\/30\" },\n { id: 6, title: \"Bauhaus\", category: \"Architecture\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Bauhaus_LIVRESQ.png\", icon: \"grid\", color: \"text-orange-400\", bg: \"bg-orange-500\", border: \"border-orange-500\/30\" },\n { id: 7, title: \"Black & Gold\", category: \"High-Tech\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Black_Gold.png\", icon: \"sparkles\", color: \"text-amber-400\", bg: \"bg-amber-500\", border: \"border-amber-500\/30\" }\n ];\n \n let activeIdx = 0;\n let mousePos = { x: 0, y: 0 };\n const heroContainer = document.getElementById('hero-section');\n const cardActive = document.getElementById('card-active');\n const cardPrev = document.getElementById('card-prev');\n const cardNext = document.getElementById('card-next');\n const imgActive = document.getElementById('img-active');\n const imgPrev = document.getElementById('img-prev');\n const imgNext = document.getElementById('img-next');\n const titleActive = document.getElementById('title-active');\n const iconContainer = document.getElementById('icon-container');\n const dotActive = document.getElementById('dot-active');\n const barActive = document.getElementById('bar-active');\n const textActive = document.getElementById('text-active');\n const badgeScorm = document.getElementById('badge-scorm');\n const badgeStart = document.getElementById('badge-start');\n\n function updateCarouselContent() {\n const active = templates[activeIdx];\n const prev = templates[(activeIdx - 1 + templates.length) % templates.length];\n const next = templates[(activeIdx + 1) % templates.length];\n\n \/\/ Update Images\n imgActive.src = active.img;\n imgPrev.src = prev.img;\n imgNext.src = next.img;\n\n \/\/ Update Texts & Classes\n titleActive.innerText = active.title;\n textActive.innerText = `template_${active.id}.html`;\n \n \/\/ Update Classes (remove old, add new)\n cardActive.className = `absolute top-1\/2 left-1\/2 w-[85%] aspect-video bg-[#1E293B] rounded-2xl shadow-2xl border-2 overflow-hidden transform-style-3d transition-transform duration-500 ease-out z-30 ${active.border}`;\n dotActive.className = `w-2 h-2 rounded-full animate-pulse ${active.bg}`;\n barActive.className = `h-1 w-16 rounded-full mt-2 ${active.bg}`;\n \n iconContainer.innerHTML = `<i data-lucide=\"${active.icon}\" class=\"w-4 h-4 ${active.color}\"><\/i>`;\n lucide.createIcons();\n }\n\n function updateCarousel3D() {\n \/\/ Apply 3D Transforms based on mousePos\n cardActive.style.transform = `translate(-50%, -50%) rotateX(${mousePos.y * -5}deg) rotateY(${mousePos.x * 5}deg) translateZ(50px)`;\n cardPrev.style.transform = `translate(0%, -20%) rotateX(${mousePos.y * -2}deg) rotateY(${mousePos.x * 2 + 15}deg) translateZ(-50px)`;\n cardNext.style.transform = `translate(0%, 10%) rotateX(${mousePos.y * -2}deg) rotateY(${mousePos.x * 2 - 15}deg) translateZ(-50px)`;\n \n \/\/ Badges Parallax\n badgeScorm.style.transform = `translateX(${mousePos.x * -20}px) translateY(${mousePos.y * -20}px) translateZ(-80px)`;\n badgeStart.style.transform = `translateX(${mousePos.x * 30}px) translateY(${mousePos.y * 30}px) translateZ(80px)`;\n }\n\n function nextSlide() { activeIdx = (activeIdx + 1) % templates.length; updateCarouselContent(); }\n function prevSlide() { activeIdx = (activeIdx - 1 + templates.length) % templates.length; updateCarouselContent(); }\n\n \/\/ Mouse Parallax Logic\n heroContainer.addEventListener('mousemove', (e) => {\n const rect = heroContainer.getBoundingClientRect();\n const xNorm = (e.clientX - rect.left - rect.width \/ 2) \/ (rect.width \/ 2);\n const yNorm = (e.clientY - rect.top - rect.height \/ 2) \/ (rect.height \/ 2);\n mousePos = { x: xNorm, y: yNorm };\n \n \/\/ Spotlight\n const spot = document.getElementById('hero-spotlight');\n spot.style.background = `radial-gradient(800px circle at ${e.clientX - rect.left}px ${e.clientY - rect.top}px, rgba(56, 189, 248, 0.1), transparent 40%)`;\n \n updateCarousel3D();\n });\n heroContainer.addEventListener('mouseleave', () => { \n mousePos = { x: 0, y: 0 }; \n updateCarousel3D(); \n });\n\n \/\/ Initialize\n updateCarouselContent();\n updateCarousel3D();\n setInterval(nextSlide, 5000);\n\n \/\/ 3. PARTNERS INFINITE SCROLL\n const partners = [\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/ING_B_LOGO.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_Logo_Livresq.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/3.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/4.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/5.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/6.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/7.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/8.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/9.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/10.png?fit=225%2C62&ssl=1\"\n ];\n const pTrack = document.getElementById('partners-track');\n [...partners, ...partners].forEach(src => {\n pTrack.innerHTML += `<div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity duration-300\"><img decoding=\"async\" src=\"${src}\" class=\"h-8 md:h-12 w-auto object-contain\"><\/div>`;\n });\n\n \/\/ 4. REVIEWS POPULATION\n const ALL_REVIEWS = [\n { name: \"Daniela-Cristina Balanescu\", time: \"2 weeks ago\", text: \"I have been using the Livresq platform for over a year. The materials created with the help of the platform proved to be particularly efficient, by gathering the main moments of a lesson in one place.\", initial: \"D\", color: \"blue\" },\n { name: \"Iustinica Teodora Dobric\u0103\", time: \"a month ago\", text: \"If you are looking for a solution to create digital, interactive, and attractive educational materials, then Livresq is an excellent choice. Livresq is incredibly intuitive.\", initial: \"I\", color: \"purple\" },\n { name: \"Paul Alexandru\", time: \"recent\", text: \"LIVRESQ simply captivated me. It is an educational tool that helps you be creative, develop professionally, and be closer to students.\", initial: \"P\", color: \"indigo\" },\n { name: \"Cornelia Nicolicea\", time: \"3 weeks ago\", text: \"My experience with Livresq was, surprisingly, very pleasant. The platform has an intuitive interface. The final result exceeded expectations.\", initial: \"C\", color: \"pink\" },\n { name: \"Dana Ioana Toma\", time: \"2 months ago\", text: \"I managed to create lessons that not only convey information but also stimulate curiosity. The satisfaction of seeing a finished product was worth all the effort.\", initial: \"D\", color: \"orange\" },\n { name: \"Elena Malu\u0219\", time: \"a week ago\", text: \"The Livresq.com platform is a valuable digital tool. One of the great advantages is the intuitive interface, which allows teachers to easily integrate text, images, videos, and quizzes.\", initial: \"E\", color: \"green\" },\n { name: \"Mihaela Stanciu\", time: \"3 days ago\", text: \"I was pleasantly surprised by everything I found on the LIVRESQ platform: structure, resources, guidance, patience, professionalism. I recommend it with confidence.\", initial: \"M\", color: \"teal\" },\n { name: \"Ioan Vasile\", time: \"4 months ago\", text: \"One of the great advantages is flexibility: you can integrate texts, images, audio, and video files. Livresq is a valuable tool that modernizes the teaching-learning process.\", initial: \"I\", color: \"blue\" },\n { name: \"Iuliana Ciubuc\", time: \"5 days ago\", text: \"Livresq is a revolutionary tool for teachers. Its vast library of resources and templates saves time and inspires creativity.\", initial: \"I\", color: \"cyan\" },\n { name: \"Gabriela Serban\", time: \"a month ago\", text: \"I particularly liked the fact that you can integrate a variety of multimedia resources. I warmly recommend the Livresq platform to all teachers.\", initial: \"G\", color: \"purple\" },\n { name: \"Simona Maria\", time: \"2 weeks ago\", text: \"The Livresq platform seems extremely useful for teachers and students. It is easy to use, even for those who do not have advanced IT knowledge.\", initial: \"S\", color: \"red\" },\n { name: \"Nita Victorita\", time: \"2 weeks ago\", text: \"I discovered LIVRESQ and I can say it completely changed the way I teach! Students are much more attentive and involved in classes.\", initial: \"N\", color: \"orange\" },\n { name: \"Geta Craciun\", time: \"3 months ago\", text: \"Livresq is an excellent platform. Technical support is prompt, and the user community is active and willing to help.\", initial: \"G\", color: \"pink\" },\n { name: \"Marinela Mihaila\", time: \"6 months ago\", text: \"Livresq is a revolutionary platform that transforms digital education. The diversity of templates stimulates creativity, facilitating content adaptation.\", initial: \"M\", color: \"indigo\" },\n { name: \"Andreea T\", time: \"2 months ago\", text: \"Livresq is an exceptional tool. The platform is intuitive and easy to use, allowing teachers to develop attractive lessons.\", initial: \"A\", color: \"green\" },\n { name: \"Iuliana Preda\", time: \"recent\", text: \"The Livresq platform is extremely useful and intuitive! It helped me create interactive educational materials in a simple and efficient way.\", initial: \"I\", color: \"blue\" },\n { name: \"Ana Maria David\", time: \"4 days ago\", text: \"Livresq is an excellent platform! I particularly appreciate the resource library and the possibility to customize materials according to class needs.\", initial: \"A\", color: \"teal\" },\n { name: \"Maria Ciobotaru\", time: \"2 weeks ago\", text: \"I believe that using materials created with Livresq in class will make lessons much more attractive, and students will retain information much more easily.\", initial: \"M\", color: \"yellow\" },\n { name: \"Camelia Mara\", time: \"3 months ago\", text: \"Livresq is a remarkable educational platform. The friendly interface facilitates the creation of interactive, engaging, and personalized lessons.\", initial: \"C\", color: \"purple\" },\n { name: \"Gabriela Donose\", time: \"a month ago\", text: \"The friendly interface allows easy creation of interactive and attractive lessons without requiring advanced technical knowledge. I recommend it with confidence!\", initial: \"G\", color: \"red\" },\n { name: \"Adriana Balaj\", time: \"5 months ago\", text: \"Livresq is an excellent educational platform. The varied resource library and prompt technical support are major advantages.\", initial: \"A\", color: \"cyan\" },\n { name: \"Madalina Hodorog\", time: \"2 weeks ago\", text: \"The Livresq platform is an extremely useful and innovative educational tool! It is an excellent solution for modernizing the teaching-learning process.\", initial: \"M\", color: \"indigo\" },\n { name: \"Anca Stefan\", time: \"a week ago\", text: \"Livresq is an excellent platform for creating interactive educational content! It is intuitive, easy to use, and offers a lot of creative options.\", initial: \"A\", color: \"green\" },\n { name: \"Mariana Oprea\", time: \"recent\", text: \"Livresq is an excellent platform for creating interactive educational materials. It is easy to use, intuitive, and very useful for teachers.\", initial: \"M\", color: \"blue\" },\n { name: \"Elena Gheorghe\", time: \"recent\", text: \"Livresq is an excellent platform for creating interactive educational content. The friendly interface and diverse resources make teaching much more attractive.\", initial: \"E\", color: \"pink\" },\n { name: \"Daniela Popescu\", time: \"3 days ago\", text: \"Livresq is an excellent, intuitive, and very useful platform for creating interactive educational content. I recommend it with confidence!\", initial: \"D\", color: \"orange\" },\n { name: \"Alina Matei\", time: \"4 days ago\", text: \"An intuitive and extremely useful platform for creating interactive educational content. I warmly recommend Livresq!\", initial: \"A\", color: \"teal\" },\n { name: \"Cristina Ionescu\", time: \"a week ago\", text: \"Livresq is an excellent, intuitive, and very useful platform for digital education. I recommend it with confidence!\", initial: \"C\", color: \"yellow\" },\n { name: \"Ana Popa\", time: \"2 weeks ago\", text: \"An excellent platform for creating interactive content! Very useful and easy to use.\", initial: \"A\", color: \"purple\" },\n { name: \"Maria Radu\", time: \"3 weeks ago\", text: \"Livresq is a wonderful tool for education. Interactive, modern, and easy to use!\", initial: \"M\", color: \"red\" },\n { name: \"Elena Dobre\", time: \"a month ago\", text: \"A great experience with Livresq! The platform is very well structured and useful.\", initial: \"E\", color: \"indigo\" },\n { name: \"Carmen Stanciu\", time: \"2 months ago\", text: \"Livresq offers unlimited creative possibilities. An indispensable tool for teachers!\", initial: \"C\", color: \"green\" },\n { name: \"Ioana Munteanu\", time: \"2 months ago\", text: \"Very satisfied with Livresq! A platform that eases teachers' work.\", initial: \"I\", color: \"blue\" },\n { name: \"Laura Dumitru\", time: \"3 months ago\", text: \"Livresq is the future of digital education. Simple, efficient, and creative!\", initial: \"L\", color: \"cyan\" },\n { name: \"Roxana Marin\", time: \"3 months ago\", text: \"A top-notch platform! I recommend Livresq to everyone passionate about education.\", initial: \"R\", color: \"pink\" },\n { name: \"Simona Ilie\", time: \"4 months ago\", text: \"Livresq helped me create wonderful lessons. Thank you for this resource!\", initial: \"S\", color: \"orange\" },\n { name: \"Mihaela Pop\", time: \"5 months ago\", text: \"An excellent tool, very easy to learn and use. Congratulations Livresq!\", initial: \"M\", color: \"teal\" },\n { name: \"Andreea Vasilescu\", time: \"6 months ago\", text: \"Livresq is the ideal partner in online education. I recommend it with full confidence!\", initial: \"A\", color: \"purple\" },\n { name: \"Diana Stoica\", time: \"6 months ago\", text: \"A complete and complex platform, yet very accessible. Bravo Livresq!\", initial: \"D\", color: \"red\" },\n { name: \"Cristina Voinea\", time: \"7 months ago\", text: \"Livresq turns learning into play. My students are delighted!\", initial: \"C\", color: \"blue\" }\n ];\n\n const COLOR_MAP = {\n \"blue\": \"bg-[#2563eb]\",\n \"purple\": \"bg-[#7c3aed]\",\n \"indigo\": \"bg-[#4f46e5]\",\n \"pink\": \"bg-[#db2777]\",\n \"orange\": \"bg-[#ea580c]\",\n \"green\": \"bg-[#059669]\",\n \"teal\": \"bg-[#0d9488]\",\n \"cyan\": \"bg-[#0891b2]\",\n \"yellow\": \"bg-[#ca8a04]\",\n \"red\": \"bg-[#dc2626]\"\n };\n\n const rGrid = document.getElementById('reviews-grid');\n \n \/\/ Shuffle and select 6\n const selectedReviews = ALL_REVIEWS.sort(() => 0.5 - Math.random()).slice(0, 6);\n\n selectedReviews.forEach(r => {\n const bgClass = COLOR_MAP[r.color] || \"bg-[#2563eb]\"; \/\/ Fallback blue\n \n \/\/ Build stars string\n const starsHtml = `<div class=\"flex text-amber-400 gap-0.5\"><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><\/div>`;\n\n rGrid.innerHTML += `\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl h-full flex flex-col relative overflow-hidden group shadow-lg transition-all duration-300 hover:border-white\/10 hover:shadow-2xl hover:-translate-y-1\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\">\n <div class=\"w-12 h-12 rounded-full ${bgClass} flex items-center justify-center font-bold text-lg text-white shrink-0 shadow-lg border border-white\/10\">${r.initial}<\/div>\n <div class=\"flex flex-col pt-1\"><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">${r.name}<\/h4><div class=\"flex items-center gap-2\">${starsHtml}<span class=\"text-xs text-slate-500 font-medium\">${r.time}<\/span><\/div><\/div>\n <\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed font-normal flex-grow\">\"${r.text}\"<\/p>\n <\/div>\n <\/div>`;\n });\n\n \/\/ 5. CONSTELLATION CANVAS\n const canvas = document.getElementById('constellation-canvas');\n const ctx = canvas.getContext('2d');\n const starLabels = [\"LearningApps\", \"PhET\", \"Wordwall\", \"Quizlet\", \"StoryJumper\", \"Quizalize\", \"Jigsaw Planet\", \"SuperColoring\", \"SlideShare\", \"PurposeGames\", \"LiveWorksheets\", \"EdPuzzle\", \"JeopardyLabs\", \"Powtoon\", \"Flipsnack\", \"Im-a-puzzle\", \"Issuu\", \"Animaker\", \"StudyStack\", \"Voki\", \"Biteable\", \"Wheel of Names\", \"ThingLink\", \"Bookemon\", \"AnyFlip\", \"TinyTap\", \"GoConqr\", \"ProProfs\"];\n let stars = [];\n let mouse = { x: -1000, y: -1000 };\n\n function initStars() {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n stars = [];\n starLabels.forEach(label => {\n stars.push({ label, x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random()-0.5)*0.3, vy: (Math.random()-0.5)*0.3, size: Math.random()*2+1.5 });\n });\n for(let i=0; i<15; i++) stars.push({ label: \"\", x: Math.random()*canvas.width, y: Math.random()*canvas.height, vx: (Math.random()-0.5)*0.2, vy: (Math.random()-0.5)*0.2, size: Math.random()*1.5 });\n }\n initStars();\n window.addEventListener('resize', initStars);\n canvas.addEventListener('mousemove', e => { const r = canvas.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; });\n canvas.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n\n function animateStars() {\n ctx.clearRect(0,0,canvas.width,canvas.height);\n stars.forEach((s, i) => {\n s.x += s.vx; s.y += s.vy;\n if(s.x<0||s.x>canvas.width) s.vx*=-1; if(s.y<0||s.y>canvas.height) s.vy*=-1;\n \n const distM = Math.hypot(s.x-mouse.x, s.y-mouse.y);\n const hover = distM < 200;\n \n ctx.beginPath(); ctx.arc(s.x, s.y, s.size, 0, Math.PI*2);\n ctx.fillStyle = hover ? '#D91278' : 'rgba(71,85,105,0.4)'; ctx.fill();\n \n if(s.label) {\n ctx.font = hover ? 'bold 13px Inter' : '11px Inter';\n ctx.fillStyle = hover ? '#0f172a' : 'rgba(71,85,105,0.4)';\n ctx.fillText(s.label, s.x+8, s.y+4);\n }\n if(hover) {\n ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(mouse.x, mouse.y);\n ctx.strokeStyle = `rgba(217,18,120,${1-distM\/200})`; ctx.lineWidth=1; ctx.stroke();\n }\n for(let j=i+1; j<stars.length; j++) {\n const s2 = stars[j];\n const d = Math.hypot(s.x-s2.x, s.y-s2.y);\n if(d<140) {\n ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(s2.x, s2.y);\n const la = (hover || Math.hypot(s2.x-mouse.x, s2.y-mouse.y)<200) ? 0.3 : 0.05;\n ctx.strokeStyle = `rgba(71,85,105,${la})`; ctx.lineWidth=0.5; ctx.stroke();\n }\n }\n });\n requestAnimationFrame(animateStars);\n }\n animateStars();\n\n \/\/ 6. TABS & TEMPLATES\n function switchTab(tab) {\n document.getElementById('content-business').classList.toggle('hidden', tab !== 'business');\n document.getElementById('content-academic').classList.toggle('hidden', tab !== 'academic');\n \n \/\/ Toggle Styles\n const btnBus = document.getElementById('tab-business');\n const btnAca = document.getElementById('tab-academic');\n if (tab === 'business') {\n btnBus.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 bg-livresq-fucsia text-white shadow-lg font-bold transform scale-105 border-none outline-none ring-0\";\n btnAca.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 text-slate-500 hover:text-slate-900 hover:bg-slate-50 font-medium border-none outline-none ring-0\";\n } else {\n btnAca.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 bg-blue-600 text-white shadow-lg font-bold transform scale-105 border-none outline-none ring-0\";\n btnBus.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 text-slate-500 hover:text-slate-900 hover:bg-slate-50 font-medium border-none outline-none ring-0\";\n }\n }\n\n \/\/ Populate Academic Column Feed\n const lessons = [\n { t: \"Pythagorean Theorem\", s: \"Math\", i: \"calculator\", c: \"bg-blue-100 text-blue-600\", l: \"Middle School\" },\n { t: \"Cell Structure\", s: \"Biology\", i: \"microscope\", c: \"bg-green-100 text-green-600\", l: \"High School\" },\n { t: \"Roman Dacia\", s: \"History\", i: \"book-open\", c: \"bg-amber-100 text-amber-600\", l: \"Primary\" },\n { t: \"Europe's Relief\", s: \"Geography\", i: \"globe-2\", c: \"bg-cyan-100 text-cyan-600\", l: \"Middle School\" },\n { t: \"Periodic Table\", s: \"Chemistry\", i: \"flask-conical\", c: \"bg-purple-100 text-purple-600\", l: \"High School\" },\n { t: \"Lyrical Genre\", s: \"Literature\", i: \"book-open-check\", c: \"bg-pink-100 text-pink-600\", l: \"High School\" },\n { t: \"Newton's Laws\", s: \"Physics\", i: \"activity\", c: \"bg-indigo-100 text-indigo-600\", l: \"Middle School\" },\n { t: \"Artistic Movements\", s: \"Arts\", i: \"palette\", c: \"bg-rose-100 text-rose-600\", l: \"High School\" }\n ];\n \/\/ Split lessons for columns\n const col1Lessons = lessons.slice(0, 4);\n const col2Lessons = lessons.slice(4);\n \n const acaCol1 = document.getElementById('aca-col-1');\n const acaCol2 = document.getElementById('aca-col-2');\n \n \/\/ Loop 3 times for seamless scroll\n [...col1Lessons, ...col1Lessons, ...col1Lessons].forEach(l => {\n acaCol1.innerHTML += `<div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm mb-4 flex items-start gap-3 hover:shadow-md hover:border-blue-200 transition-all cursor-default group\"><div class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${l.c}\"><i data-lucide=\"${l.i}\" class=\"w-4 h-4\"><\/i><\/div><div class=\"flex-1 min-w-0\"><div class=\"flex justify-between items-start\"><p class=\"text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-0.5\">${l.s}<\/p><span class=\"inline-block w-1.5 h-1.5 rounded-full bg-emerald-400\" title=\"Available\"><\/span><\/div><h4 class=\"font-bold text-slate-800 text-sm leading-tight truncate\">${l.t}<\/h4><div class=\"flex items-center gap-2 mt-2\"><span class=\"text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-medium\">${l.l}<\/span><span class=\"text-[10px] border border-slate-200 text-slate-400 px-2 py-0.5 rounded font-medium group-hover:border-blue-200 group-hover:text-blue-500 transition-colors\">Editable<\/span><\/div><\/div><\/div>`;\n });\n [...col2Lessons, ...col2Lessons, ...col2Lessons].forEach(l => {\n acaCol2.innerHTML += `<div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm mb-4 flex items-start gap-3 hover:shadow-md hover:border-blue-200 transition-all cursor-default group\"><div class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${l.c}\"><i data-lucide=\"${l.i}\" class=\"w-4 h-4\"><\/i><\/div><div class=\"flex-1 min-w-0\"><div class=\"flex justify-between items-start\"><p class=\"text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-0.5\">${l.s}<\/p><span class=\"inline-block w-1.5 h-1.5 rounded-full bg-emerald-400\" title=\"Available\"><\/span><\/div><h4 class=\"font-bold text-slate-800 text-sm leading-tight truncate\">${l.t}<\/h4><div class=\"flex items-center gap-2 mt-2\"><span class=\"text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-medium\">${l.l}<\/span><span class=\"text-[10px] border border-slate-200 text-slate-400 px-2 py-0.5 rounded font-medium group-hover:border-blue-200 group-hover:text-blue-500 transition-colors\">Editable<\/span><\/div><\/div><\/div>`;\n });\n\n \/\/ 7. PRICING LOGIC\n let billing = 'yearly';\n function toggleBilling() { billing = billing === 'monthly' ? 'yearly' : 'monthly'; updatePricing(); }\n function setBilling(mode) { billing = mode; updatePricing(); }\n \n function updatePricing() {\n const ball = document.getElementById('cycle-toggle-ball');\n const txtMon = document.getElementById('cycle-monthly');\n const txtYear = document.getElementById('cycle-yearly');\n \n \/\/ Toggle Visuals\n ball.className = `w-6 h-6 rounded-md bg-white shadow-md transform transition-transform duration-300 ${billing==='yearly' ? 'translate-x-8' : 'translate-x-0'}`;\n txtMon.className = `text-sm font-bold transition-colors cursor-pointer ${billing==='monthly' ? 'text-white' : 'text-slate-500'}`;\n txtYear.className = `text-sm font-bold transition-colors cursor-pointer ${billing==='yearly' ? 'text-white' : 'text-slate-500'}`;\n \n \/\/ Update Freelancer Content\n const priceFree = document.getElementById('price-free');\n const periodFree = document.getElementById('period-free');\n if(priceFree && periodFree) {\n priceFree.innerText = billing === 'yearly' ? '397\u20ac' : '39\u20ac';\n periodFree.innerText = billing === 'yearly' ? '\/ user \/ year' : '\/ user \/ month';\n }\n\n \/\/ Update Badges\n const badgeCorp = document.getElementById('badge-corp');\n const badgeAca = document.getElementById('badge-aca');\n if(badgeCorp && badgeAca) {\n if (billing === 'monthly') {\n badgeCorp.classList.remove('hidden');\n badgeAca.classList.remove('hidden');\n } else {\n badgeCorp.classList.add('hidden');\n badgeAca.classList.add('hidden');\n }\n }\n }\n \/\/ Initialize pricing state\n updatePricing();\n\n \/\/ 9. Industries Grid\n const inds = [\n { i: \"landmark\", t: \"Banking & Insurance\", d: \"Regulated sector & client\" }, { i: \"zap\", t: \"Energy\", d: \"Sustainability & e-Learning\" },\n { i: \"shopping-bag\", t: \"Retail & Consumer\", d: \"Sales & products\" }, { i: \"truck\", t: \"Logistics\", d: \"Operational safety\" },\n { i: \"cpu\", t: \"Technology\", d: \"Digital skills\" }, { i: \"factory\", t: \"Manufacturing\", d: \"Production & Safety\" },\n { i: \"headphones\", t: \"Services\", d: \"Quality management\" }\n ];\n const indGrid = document.getElementById('industry-grid');\n inds.forEach(ind => {\n indGrid.innerHTML += `<div class=\"flex items-center gap-3 p-3 rounded-xl hover:bg-white\/5 border border-transparent hover:border-white\/10 transition-all duration-300 cursor-default group\/item\"><div class=\"text-blue-300 bg-blue-500\/10 border border-blue-500\/20 p-2 rounded-lg group-hover\/item:bg-blue-500\/20 group-hover\/item:text-white transition-colors shrink-0 shadow-sm\"><i data-lucide=\"${ind.i}\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"text-sm font-bold text-white leading-tight\">${ind.t}<\/h4><p class=\"text-[11px] text-slate-500 mt-0.5 font-medium group-hover\/item:text-slate-400\">${ind.d}<\/p><\/div><\/div>`;\n });\n\n \/\/ 10. Edu Features\n const eduFeats = [\"Creation of OER (open educational resources)\", \"Creation of lessons and courses\", \"Digital textbooks\", \"Erasmus+ and eTwinning projects\", \"European Projects\", \"Approved interactive lessons\", \"National awareness campaigns\"];\n const eduDiv = document.getElementById('edu-features');\n eduFeats.forEach(txt => {\n eduDiv.innerHTML += `<div class=\"flex items-start gap-3 p-4 rounded-xl bg-slate-800\/50 border border-slate-700\/50 shadow-sm hover:border-slate-600 transition-colors cursor-default hover:bg-slate-800 group\"><div class=\"mt-0.5 p-0.5 rounded-full bg-green-500\/10 text-green-400 border border-green-500\/20 shrink-0 group-hover:scale-110 transition-transform\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"text-sm text-slate-300 font-bold leading-tight group-hover:text-white\">${txt}<\/span><\/div>`;\n });\n\n \/\/ Spotlight Logic for Groups\n document.querySelectorAll('.spotlight-group').forEach(group => {\n group.addEventListener('mousemove', (e) => {\n const cards = group.querySelectorAll('.spotlight-card');\n cards.forEach(card => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n card.style.setProperty('--mouse-x', `${x}px`);\n card.style.setProperty('--mouse-y', `${y}px`);\n });\n });\n });\n\n \/\/ Final Re-Init Icons for inserted content\n setTimeout(() => lucide.createIcons(), 100);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>LIVRESQ – eLearning Course Creator Community Blog Academic Training FAQ Buy About Us Library English My Account New 20 new business templates released Create stunning courses and lessons. Build SCORM and HTML5 compatible materials. No technical barriers. Start for Free View Features NO CARD REQUIRED SETUP IN 30 SEC Join 158,900+ creators from 7200+ institutions […]<\/p>\n","protected":false},"author":2,"featured_media":31483,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>eLearning Authoring Tool - LIVRESQ<\/title>\n<meta name=\"description\" content=\"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/livresq.com\/pl\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LIVRESQ - eLearning Authoring Made Simple\" \/>\n<meta property=\"og:description\" content=\"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/livresq.com\/pl\/\" \/>\n<meta property=\"og:site_name\" content=\"LIVRESQ\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T09:07:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"662\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"22 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/livresq.com\/\",\"url\":\"https:\/\/livresq.com\/\",\"name\":\"eLearning Authoring Tool - LIVRESQ\",\"isPartOf\":{\"@id\":\"https:\/\/livresq.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/livresq.com\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/livresq.com\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1\",\"datePublished\":\"2019-07-22T13:56:01+00:00\",\"dateModified\":\"2026-03-11T09:07:14+00:00\",\"description\":\"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.\",\"breadcrumb\":{\"@id\":\"https:\/\/livresq.com\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/livresq.com\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/livresq.com\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1\",\"width\":1600,\"height\":662},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/livresq.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Prima pagin\u0103\",\"item\":\"https:\/\/livresq.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"eLearning Authoring Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/livresq.com\/en\/#website\",\"url\":\"https:\/\/livresq.com\/en\/\",\"name\":\"LIVRESQ\",\"description\":\"eLearning Authoring Tool\",\"publisher\":{\"@id\":\"https:\/\/livresq.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/livresq.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/livresq.com\/en\/#organization\",\"name\":\"LIVRESQ - Authoring Tool\",\"url\":\"https:\/\/livresq.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\",\"width\":1054,\"height\":575,\"caption\":\"LIVRESQ - Authoring Tool\"},\"image\":{\"@id\":\"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Narz\u0119dzie do tworzenia tre\u015bci e-learningowych - LIVRESQ","description":"Tw\u00f3rz kursy e-learningowe lub interaktywne lekcje bezpo\u015brednio z przegl\u0105darki. Wszystko odbywa si\u0119 online, nie musisz niczego pobiera\u0107 ani instalowa\u0107.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/livresq.com\/pl\/","og_locale":"pl_PL","og_type":"article","og_title":"LIVRESQ - eLearning Authoring Made Simple","og_description":"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.","og_url":"https:\/\/livresq.com\/pl\/","og_site_name":"LIVRESQ","article_modified_time":"2026-03-11T09:07:14+00:00","og_image":[{"width":1600,"height":662,"url":"https:\/\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"22 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/livresq.com\/","url":"https:\/\/livresq.com\/","name":"Narz\u0119dzie do tworzenia tre\u015bci e-learningowych - LIVRESQ","isPartOf":{"@id":"https:\/\/livresq.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/livresq.com\/#primaryimage"},"image":{"@id":"https:\/\/livresq.com\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1","datePublished":"2019-07-22T13:56:01+00:00","dateModified":"2026-03-11T09:07:14+00:00","description":"Tw\u00f3rz kursy e-learningowe lub interaktywne lekcje bezpo\u015brednio z przegl\u0105darki. Wszystko odbywa si\u0119 online, nie musisz niczego pobiera\u0107 ani instalowa\u0107.","breadcrumb":{"@id":"https:\/\/livresq.com\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/livresq.com\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/livresq.com\/#primaryimage","url":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1","contentUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1","width":1600,"height":662},{"@type":"BreadcrumbList","@id":"https:\/\/livresq.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Prima pagin\u0103","item":"https:\/\/livresq.com\/"},{"@type":"ListItem","position":2,"name":"eLearning Authoring Tool"}]},{"@type":"WebSite","@id":"https:\/\/livresq.com\/en\/#website","url":"https:\/\/livresq.com\/en\/","name":"LIVRESQ","description":"Narz\u0119dzie do tworzenia e-learningu","publisher":{"@id":"https:\/\/livresq.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/livresq.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/livresq.com\/en\/#organization","name":"LIVRESQ - Narz\u0119dzie autorskie","url":"https:\/\/livresq.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1","contentUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1","width":1054,"height":575,"caption":"LIVRESQ - Authoring Tool"},"image":{"@id":"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":836,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":489835,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages\/17\/revisions\/489835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/media\/31483"}],"wp:attachment":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":17,"date":"2019-07-22T16:56:01","date_gmt":"2019-07-22T13:56:01","guid":{"rendered":"https:\/\/livresq.com\/?page_id=17"},"modified":"2026-03-11T11:07:14","modified_gmt":"2026-03-11T09:07:14","slug":"overview","status":"publish","type":"page","link":"https:\/\/livresq.com\/pl\/","title":{"rendered":"Narz\u0119dzie do tworzenia e-learningu"},"content":{"rendered":"\n\n\n\n\n\n \n \n LIVRESQ – eLearning Course Creator<\/title>\n <meta name=\"description\" content=\"Create eLearning courses and interactive lessons directly in the browser. No installation required. SCORM compatible.\">\n \n \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=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n midnight: '#0F1623',\n livresq: {\n fucsia: '#D91278',\n 'fucsia-dark': '#b00e60',\n albastru: '#6fccf0',\n darkblue: '#2c3e50',\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n heading: ['Roboto', 'sans-serif'],\n },\n backgroundImage: {\n 'grid-pattern': \"radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px)\",\n 'grid-pattern-dark': \"linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px)\",\n },\n animation: {\n 'float': 'float 6s ease-in-out infinite',\n 'scroll': 'scroll 40s linear infinite',\n 'scroll-y': 'scrollY 20s linear infinite',\n 'scroll-y-reverse': 'scrollY 25s linear infinite reverse',\n 'fade-in-up': 'fadeInUp 0.8s ease-out forwards',\n 'shimmer': 'shimmer 2.5s infinite',\n 'spin-slow': 'spin 60s linear infinite',\n 'spin-reverse-slow': 'spin 80s linear infinite reverse',\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n 'gradient-x': 'gradient-x 15s ease infinite',\n 'ping-slow': 'ping 3s cubic-bezier(0, 0, 0.2, 1) infinite',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-10px)' },\n },\n scroll: {\n '0%': { transform: 'translateX(0)' },\n '100%': { transform: 'translateX(-50%)' },\n },\n scrollY: {\n '0%': { transform: 'translateY(0)' },\n '100%': { transform: 'translateY(-50%)' },\n },\n fadeInUp: {\n '0%': { opacity: '0', transform: 'translateY(20px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n shimmer: {\n '100%': { transform: 'translateX(100%)' }\n },\n 'gradient-x': {\n '0%, 100%': {\n 'background-size': '200% 200%',\n 'background-position': 'left center'\n },\n '50%': {\n 'background-size': '200% 200%',\n 'background-position': 'right center'\n },\n },\n }\n }\n }\n }\n <\/script>\n\n <style>\n html { scroll-behavior: smooth; }\n \n .bg-grid-overlay {\n background-size: 50px 50px;\n background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\n }\n\n .glass-panel-midnight {\n background: rgba(15, 22, 35, 0.6);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n }\n \n .glass-panel-light {\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.5);\n }\n\n \/* Spotlight Effect *\/\n .spotlight-card { position: relative; overflow: hidden; }\n .spotlight-card::after {\n content: \"\"; position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.06), transparent 40%);\n opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 2;\n }\n .spotlight-group:hover .spotlight-card::after { opacity: 1; }\n\n \/* Reveal Animation Classes *\/\n .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }\n .reveal.active { opacity: 1; transform: translate(0); }\n \n \/* Delays *\/\n .delay-100 { transition-delay: 0.1s; }\n .delay-200 { transition-delay: 0.2s; }\n .delay-300 { transition-delay: 0.3s; }\n .delay-400 { transition-delay: 0.4s; }\n\n details > summary { list-style: none; }\n details > summary::-webkit-details-marker { display: none; }\n \n .text-glow-blue { text-shadow: 0 0 20px rgba(59,130,246,0.5); }\n .perspective-1000 { perspective: 1000px; }\n .perspective-2000 { perspective: 2000px; }\n .transform-style-3d { transform-style: preserve-3d; }\n \n \/* Pause scroll on hover *\/\n .hover-pause:hover .animate-scroll-y,\n .hover-pause:hover .animate-scroll-y-reverse {\n animation-play-state: paused;\n }\n \n \/* Border Beam Animation *\/\n @keyframes border-beam {\n 100% { offset-distance: 100%; }\n }\n .border-beam {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n border: 1px solid transparent;\n mask: linear-gradient(transparent, transparent), linear-gradient(white, white);\n mask-clip: padding-box, border-box;\n mask-composite: intersect;\n -webkit-mask-composite: source-in;\n }\n \n \/* Hide scrollbar for clean look *\/\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #0f172a; }\n ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; border: 2px solid #0f172a; }\n ::-webkit-scrollbar-thumb:hover { background: #64748b; }\n <\/style>\n<\/head>\n<body class=\"font-sans text-slate-900 antialiased bg-slate-50 flex flex-col min-h-screen selection:bg-fuchsia-500 selection:text-white\">\n\n \n <nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 bg-[#1379D1] h-[48px] transition-all duration-300\">\n \n <div class=\"absolute top-0 left-0 h-full z-0 pointer-events-none overflow-hidden w-[600px]\">\n <div id=\"nav-skew\" class=\"absolute top-0 left-[-50px] h-full transform -skew-x-[20deg] transition-all duration-500 ease-out bg-white w-[360px]\"><\/div>\n <\/div>\n \n <div class=\"w-full h-full max-w-[1920px] mx-auto flex items-center justify-between relative z-10 pl-0 pr-[8px]\">\n \n <div class=\"flex items-center flex-shrink-0 relative z-20 pl-10 transition-all duration-300\" id=\"nav-logo-container\">\n <a href=\"#\" class=\"block group relative transform transition-transform duration-300 hover:scale-105 origin-left\">\n <img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\" alt=\"LIVRESQ\" class=\"w-auto object-contain h-[32px] filter contrast-125\">\n <\/a>\n <\/div>\n \n \n <div class=\"hidden xl:flex items-center gap-1 pl-12\">\n <a href=\"https:\/\/livresq.com\/ro\/publish-library\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Community<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/blog\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Blog<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/academic\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Academic<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/training\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Training<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/faq\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">FAQ<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/pricing\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">Buy<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/despre-noi\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] hover:bg-white\/10 transition-all\">About Us<\/a>\n <\/div>\n\n \n <div class=\"hidden lg:flex items-center h-full\">\n <a href=\"https:\/\/library.livresq.com\/\" class=\"flex items-center gap-2 px-[8px] py-[6px] h-[36.5px] cursor-pointer hover:bg-white\/10 rounded-md transition-colors group text-white\">\n <img decoding=\"async\" src=\"https:\/\/livresq.com\/wp-content\/uploads\/2026\/01\/auto_stories_24dp_E3E3E3_FILL1_wght0_GRAD0_opsz24.svg\" class=\"w-6 h-6 brightness-0 invert\">\n <span class=\"text-[14px] font-bold\">Library<\/span>\n <\/a>\n \n <div class=\"relative group\">\n <button class=\"flex items-center gap-2 px-[8px] py-[6px] h-[36.5px] mr-[4px] min-w-[122px] justify-between cursor-pointer hover:bg-white\/10 rounded-md transition-colors text-white\">\n <div class=\"flex items-center gap-2\"><img decoding=\"async\" src=\"https:\/\/livresq.com\/wp-content\/uploads\/2026\/01\/translate_24dp_E3E3E3_FILL1_wght0_GRAD0_opsz24.svg\" class=\"w-6 h-6 brightness-0 invert\"><span class=\"text-[14px] font-bold\">English<\/span><\/div>\n <i data-lucide=\"chevron-down\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n\n <a href=\"https:\/\/livresq.com\/ro\/contul-meu\/\" class=\"flex items-center gap-2 px-4 py-[6px] h-[36.5px] bg-[#D91278] hover:bg-[#b00e60] text-white rounded-md shadow-md hover:shadow-lg transition-all border border-white\/10\">\n <img decoding=\"async\" src=\"https:\/\/livresq.com\/wp-content\/uploads\/2026\/01\/account_circle_24dp_E3E3E3_FILL1_wght0_GRAD0_opsz24.svg\" class=\"w-6 h-6 brightness-0 invert\">\n <span class=\"text-[14px] font-bold\">My Account<\/span>\n <\/a>\n <\/div>\n \n \n <div class=\"xl:hidden flex items-center gap-2\">\n <button class=\"p-1.5 rounded-md bg-white\/10 text-white\"><i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <div id=\"hero-section\" class=\"relative border-b border-slate-200 py-24 lg:py-32 overflow-hidden bg-slate-50 text-slate-900 perspective-1000 group\/hero spotlight-group\">\n <div class=\"absolute inset-0 overflow-hidden pointer-events-none\">\n \n <div class=\"absolute inset-0 bg-gradient-to-b from-blue-50\/80 via-white to-white\"><\/div>\n \n <div class=\"absolute inset-0 opacity-[0.4]\" style=\"-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%)\">\n <div class=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] origin-top transform-gpu\" style=\"transform: perspective(1000px) rotateX(60deg) scale(2.5) translateY(-100px)\"><\/div>\n <\/div>\n \n <div id=\"hero-spotlight\" class=\"absolute inset-0 opacity-0 group-hover\/hero:opacity-100 transition-opacity duration-1000 ease-out pointer-events-none\"><\/div>\n \n <div class=\"absolute top-[15%] left-[5%] animate-float opacity-60 mix-blend-multiply\"><div class=\"w-24 h-24 bg-gradient-to-br from-blue-200 to-purple-200 rounded-3xl blur-xl rotate-12\"><\/div><\/div>\n <div class=\"absolute bottom-[20%] right-[5%] animate-float opacity-60 mix-blend-multiply\" style=\"animation-delay: 2s\"><div class=\"w-32 h-32 bg-gradient-to-tr from-fuchsia-200 to-pink-200 rounded-full blur-2xl\"><\/div><\/div>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col lg:flex-row items-center gap-12 lg:gap-16\">\n \n \n <div class=\"w-full lg:w-1\/2 relative z-20 text-left\">\n <a href=\"https:\/\/author.livresq.com\/organizer\/templates\" class=\"group inline-flex items-center p-1.5 pr-5 rounded-md transition-all duration-300 mb-8 cursor-pointer animate-fade-in-up bg-white\/60 backdrop-blur-xl border border-white\/60 shadow-sm hover:shadow-md hover:bg-white hover:scale-105\" style=\"animation-delay: 0.1s\">\n <span class=\"px-3 py-1 bg-gradient-to-r from-livresq-fucsia to-purple-600 text-white text-[10px] font-bold rounded-md uppercase tracking-wide mr-3 shadow-sm group-hover:shadow-md transition-all\">New<\/span>\n <span class=\"text-sm font-bold transition-colors text-slate-600 group-hover:text-livresq-fucsia\">20 new business templates released<\/span>\n <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-2 transition-transform text-slate-400 group-hover:text-livresq-fucsia group-hover:translate-x-1\"><\/i>\n <\/a>\n \n <h1 class=\"text-5xl lg:text-7xl font-black mb-6 font-heading leading-[1.1] animate-fade-in-up text-slate-900 drop-shadow-sm tracking-tight\" style=\"animation-delay: 0.2s\">\n Create <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia via-pink-600 to-purple-600\">stunning<\/span><br\/>\n courses and lessons.\n <\/h1>\n \n <p class=\"mt-4 text-xl font-medium leading-relaxed mb-10 animate-fade-in-up max-w-lg text-slate-600\" style=\"animation-delay: 0.3s\">Build SCORM and HTML5 compatible materials. No technical barriers.<\/p>\n <div class=\"flex flex-col sm:flex-row gap-5 mb-10 animate-fade-in-up\" style=\"animation-delay: 0.4s\">\n <a href=\"https:\/\/livresq.com\/en\/my-account\/\" class=\"relative flex items-center justify-center px-10 py-4 text-base font-bold rounded-md text-white hover:text-white transition-all duration-300 shadow-lg shadow-fuchsia-900\/20 hover:shadow-xl hover:shadow-fuchsia-900\/30 transform hover:-translate-y-1 active:translate-y-0 overflow-hidden group bg-livresq-fucsia\">\n <span class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white\/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1s_infinite]\"><\/span>\n <div class=\"relative flex items-center\"><i data-lucide=\"zap\" class=\"w-5 h-5 mr-2 fill-current text-white\"><\/i> Start for Free<\/div>\n <\/a>\n <a href=\"#how-it-works\" class=\"flex items-center justify-center px-8 py-4 bg-white\/50 backdrop-blur-sm border border-slate-200 text-base font-bold rounded-md transition-all text-slate-600 hover:text-blue-600 hover:bg-white hover:shadow-lg hover:border-blue-100 transform hover:-translate-y-1\">\n <i data-lucide=\"play-circle\" class=\"w-5 h-5 mr-2\"><\/i> View Features\n <\/a>\n <\/div>\n \n <div class=\"flex items-center gap-6 text-xs font-bold mb-10 animate-fade-in-up pl-2 text-slate-500 uppercase tracking-wide\" style=\"animation-delay: 0.45s\">\n <span class=\"flex items-center gap-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-500\"><\/i> NO CARD REQUIRED<\/span>\n <span class=\"flex items-center gap-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-500\"><\/i> SETUP IN 30 SEC<\/span>\n <\/div>\n\n \n <div class=\"group relative rounded-2xl animate-fade-in-up p-[1px] bg-gradient-to-br from-slate-200 to-transparent hover:from-blue-200 transition-colors duration-500 w-full max-w-lg\" style=\"animation-delay: 0.5s\">\n <div class=\"relative rounded-2xl bg-white\/60 backdrop-blur-xl p-5 border border-white\/50 shadow-sm hover:shadow-lg transition-all duration-300\">\n <div class=\"flex flex-col gap-5 text-left\">\n <div class=\"flex items-center gap-4\">\n <div class=\"flex -space-x-3\">\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/21.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/22.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/23.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <div class=\"w-10 h-10 rounded-full border-2 border-white shadow-sm overflow-hidden relative z-0 hover:z-10 transition-all hover:scale-110\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/i0.wp.com\/randomuser.me\/api\/portraits\/thumb\/men\/24.jpg?w=800&ssl=1\" alt=\"User\"><\/div>\n <\/div>\n <div class=\"flex flex-col\">\n <div class=\"flex text-amber-400 text-xs mb-0.5\"><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><\/div>\n <p class=\"text-xs font-bold text-slate-600\">Join <strong class=\"text-slate-900\">158,900+ creators<\/strong> from 7200+ institutions and companies<\/p>\n <\/div>\n <\/div>\n <div class=\"w-full h-px bg-slate-200\/60\"><\/div>\n <div class=\"flex flex-col gap-2\">\n <p class=\"text-[10px] font-extrabold uppercase tracking-widest text-slate-400\">Supported by<\/p>\n <div class=\"flex flex-wrap items-center gap-4 opacity-60 grayscale hover:grayscale-0 transition-all\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/96\/Microsoft_logo_%282012%29.svg\" alt=\"Microsoft\" class=\"h-4 w-auto\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg\" alt=\"Google\" class=\"h-4 w-auto\">\n <span class=\"font-bold text-xs tracking-tight text-slate-700 whitespace-nowrap\">ElevenLabs<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"w-full lg:w-1\/2 relative z-20 flex flex-col justify-center h-[500px] perspective-2000 animate-fade-in-up\" style=\"animation-delay: 0.6s\">\n <div class=\"relative w-full h-full transform-style-3d\" id=\"hero-carousel-container\">\n \n \n \n <button onclick=\"prevSlide()\" class=\"absolute left-2 md:left-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/50 md:bg-white\/30 border border-white\/60 md:border-white\/40 backdrop-blur-md text-slate-800 md:text-slate-700 hover:bg-blue-600 hover:text-white hover:border-blue-500 hover:scale-110 active:scale-95 transition-all shadow-lg flex items-center justify-center group cursor-pointer\" style=\"transform: translateY(-50%) translateZ(100px);\"><i data-lucide=\"chevron-left\" class=\"w-5 h-5 md:w-6 md:h-6 group-hover:-translate-x-0.5 transition-transform\"><\/i><\/button>\n <button onclick=\"nextSlide()\" class=\"absolute right-2 md:right-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/50 md:bg-white\/30 border border-white\/60 md:border-white\/40 backdrop-blur-md text-slate-800 md:text-slate-700 hover:bg-blue-600 hover:text-white hover:border-blue-500 hover:scale-110 active:scale-95 transition-all shadow-lg flex items-center justify-center group cursor-pointer\" style=\"transform: translateY(-50%) translateZ(100px);\"><i data-lucide=\"chevron-right\" class=\"w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-0.5 transition-transform\"><\/i><\/button>\n\n \n <div id=\"card-prev\" onclick=\"prevSlide()\" class=\"absolute top-[20%] left-[-5%] w-[30%] aspect-video bg-[#0f172a] rounded-xl border border-white\/10 shadow-2xl overflow-hidden transform-style-3d transition-all duration-500 ease-out z-20 cursor-pointer hover:opacity-100 opacity-60 grayscale hover:grayscale-0\">\n <img decoding=\"async\" id=\"img-prev\" src=\"\" class=\"w-full h-full object-cover\">\n <div class=\"absolute inset-0 bg-black\/50 flex items-center justify-center group-hover:bg-black\/20 transition-colors\"><i data-lucide=\"chevron-left\" class=\"w-6 h-6 text-white\"><\/i><\/div>\n <\/div>\n\n \n <div id=\"card-active\" class=\"absolute top-1\/2 left-1\/2 w-[85%] aspect-video bg-[#1E293B] rounded-2xl shadow-2xl border-2 overflow-hidden transform-style-3d transition-transform duration-500 ease-out z-30\">\n \n <div class=\"h-8 bg-black\/40 border-b border-white\/5 flex items-center px-4 gap-2 backdrop-blur-md\">\n <div class=\"flex gap-1.5\"><div class=\"w-2.5 h-2.5 rounded-full bg-red-500\"><\/div><div class=\"w-2.5 h-2.5 rounded-full bg-yellow-500\"><\/div><div class=\"w-2.5 h-2.5 rounded-full bg-green-500\"><\/div><\/div>\n <div class=\"ml-4 px-3 py-0.5 bg-white\/10 rounded-full text-[10px] text-slate-400 font-mono flex items-center gap-2 w-full max-w-[200px]\">\n <div id=\"dot-active\" class=\"w-2 h-2 rounded-full animate-pulse\"><\/div> <span id=\"text-active\">template.html<\/span>\n <\/div>\n <\/div>\n <div class=\"relative w-full h-full group\">\n <img decoding=\"async\" id=\"img-active\" src=\"\" class=\"w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700\">\n \n <div class=\"absolute top-[20%] left-[10%] bg-white\/90 backdrop-blur-xl p-3 rounded-xl border border-white\/50 shadow-xl animate-float\">\n <div class=\"flex items-center gap-2 mb-1\" id=\"icon-container\"><\/div>\n <h3 id=\"title-active\" class=\"text-sm font-bold text-slate-900\">Title<\/h3>\n <div id=\"bar-active\" class=\"h-1 w-16 rounded-full mt-2\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"card-next\" onclick=\"nextSlide()\" class=\"absolute bottom-[20%] right-[-5%] w-[30%] aspect-video bg-[#0f172a] rounded-xl shadow-2xl border border-white\/10 overflow-hidden transform-style-3d transition-all duration-500 ease-out z-20 cursor-pointer hover:opacity-100 opacity-60 grayscale hover:grayscale-0\">\n <img decoding=\"async\" id=\"img-next\" src=\"\" class=\"w-full h-full object-cover\">\n <div class=\"absolute inset-0 bg-black\/50 flex items-center justify-center group-hover:bg-black\/20 transition-colors\"><i data-lucide=\"chevron-right\" class=\"w-6 h-6 text-white\"><\/i><\/div>\n <\/div>\n\n \n <div id=\"badge-scorm\" class=\"absolute top-[10%] right-[10%] px-3 py-1.5 bg-white\/80 backdrop-blur rounded-lg shadow-lg border border-slate-200 flex items-center gap-2 z-10 transition-transform duration-100 ease-out\">\n <i data-lucide=\"check-circle-2\" class=\"w-3 h-3 text-green-500\"><\/i><span class=\"text-[10px] font-bold text-slate-700\">SCORM Compliant<\/span>\n <\/div>\n \n <div id=\"badge-start\" class=\"absolute bottom-[10%] left-[10%] px-3 py-1.5 bg-white\/80 backdrop-blur rounded-lg shadow-lg border border-slate-200 flex items-center gap-2 z-50 transition-transform duration-100 ease-out\">\n <i data-lucide=\"star\" class=\"w-3 h-3 text-yellow-400 fill-current\"><\/i><span class=\"text-[10px] font-bold text-slate-700\">Don’t start from scratch<\/span>\n <\/div>\n\n <\/div>\n \n \n <div class=\"absolute top-1\/2 left-1\/2 w-[500px] h-[500px] bg-gradient-to-tr from-orange-500\/20 to-purple-500\/20 rounded-full blur-[80px] -translate-x-1\/2 -translate-y-1\/2 -z-10 pointer-events-none\"><\/div>\n\n \n <div class=\"absolute -top-6 -right-6 p-4 rounded-2xl bg-white\/80 backdrop-blur-xl border border-white\/60 shadow-[0_8px_30px_rgba(0,0,0,0.04)] animate-float z-40 hidden md:flex items-center gap-3 hover:scale-105 transition-transform cursor-default\">\n <div class=\"w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-blue-500\/20\"><i data-lucide=\"eye\" class=\"w-5 h-5\"><\/i><\/div>\n <div><p class=\"text-[9px] uppercase font-extrabold tracking-wider text-slate-400\">Impact<\/p><p class=\"text-sm font-black text-slate-900 leading-tight\">1.5M Monthly Visits<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full h-[1px] bg-gradient-to-r from-transparent via-livresq-fucsia to-transparent shadow-sm relative z-20 opacity-80\"><\/div>\n\n \n <section class=\"py-10 border-b border-slate-200 relative z-20 overflow-hidden bg-white\">\n <div class=\"reveal\">\n <div class=\"max-w-7xl mx-auto px-4 mb-8 text-center\">\n <p class=\"text-xs font-bold text-slate-400 uppercase tracking-[0.3em] opacity-80\">Trusted Partner for TOP Organizations<\/p>\n <\/div>\n \n <div class=\"absolute left-0 top-0 h-full w-20 md:w-40 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"absolute right-0 top-0 h-full w-20 md:w-40 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"flex w-full overflow-hidden select-none\">\n <div class=\"flex animate-scroll items-center\" id=\"partners-track\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 border-b border-white\/5 relative z-20 overflow-hidden bg-midnight bg-grid-overlay spotlight-group\">\n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none\">\n <div class=\"absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-purple-900\/10 rounded-full blur-[100px]\"><\/div>\n <div class=\"absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-900\/10 rounded-full blur-[100px]\"><\/div>\n <\/div>\n <div class=\"max-w-7xl mx-auto px-4 relative z-10 reveal\">\n <div class=\"flex flex-col items-center justify-center text-center mb-16 relative\">\n <div class=\"inline-flex items-center gap-2 mb-3 bg-[#1F2937]\/50 backdrop-blur-md px-4 py-1.5 rounded-md border border-slate-700 shadow-sm\">\n <span class=\"text-slate-400 font-medium text-sm\">Google<\/span>\n <span class=\"text-white font-bold text-sm\">Reviews<\/span>\n <\/div>\n <div class=\"flex items-center justify-center gap-3 mb-2\">\n <span class=\"text-5xl font-black text-white tracking-tight\">5.0<\/span>\n <div class=\"flex text-amber-400 gap-1\"><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><i data-lucide=\"star\" class=\"w-8 h-8 fill-current drop-shadow-md\"><\/i><\/div>\n <\/div>\n <p class=\"text-slate-400 text-sm font-medium\">Based on <strong class=\"text-white\">614 reviews<\/strong><\/p>\n <\/div>\n <div id=\"reviews-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12 relative z-10\"><\/div>\n \n <div class=\"reveal delay-300\">\n <div class=\"max-w-5xl mx-auto spotlight-card bg-[#111827] border border-slate-800 rounded-[2rem] p-8 md:px-12 md:py-8 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden group shadow-2xl\">\n <div class=\"flex flex-col gap-2 text-center md:text-left relative z-10\">\n <a href=\"https:\/\/www.google.com\/search?q=livresq+reviews\" target=\"_blank\" rel=\"noreferrer\" class=\"text-xl md:text-2xl font-bold text-white flex items-center justify-center md:justify-start gap-3 hover:text-blue-400 transition-colors group\/link\">See all reviews on Google <i data-lucide=\"external-link\" class=\"w-5 h-5 opacity-50 group-hover\/link:opacity-100 transition-opacity\"><\/i><\/a>\n <p class=\"text-slate-500 text-sm font-medium\">100% transparency from real users.<\/p>\n <\/div>\n <div class=\"hidden md:block w-px h-16 bg-gradient-to-b from-transparent via-slate-700 to-transparent relative z-10\"><\/div>\n <div class=\"flex items-center gap-6 relative z-10\">\n <div class=\"flex flex-col items-end\">\n <div class=\"flex items-center gap-3\"><span class=\"text-3xl font-black text-white leading-none\">4.9<\/span><div class=\"flex text-amber-500 gap-1\"><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i><\/div><\/div>\n <span class=\"text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] mt-1.5\">Capterra Score<\/span>\n <div class=\"flex items-center gap-1.5 mt-1 text-amber-500\"><i data-lucide=\"trophy\" class=\"w-3.5 h-3.5\"><\/i><span class=\"text-xs font-bold\">„Best Ease of Use”<\/span><\/div>\n <\/div>\n <div class=\"h-20 w-auto relative group\/badge\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2024\/09\/aeb0fd70-304e-49d6-87e7-f596e09f8509.png?w=670&ssl=1\" alt=\"Capterra Badge\" class=\"h-full w-auto object-contain hover:scale-110 transition-transform duration-300 drop-shadow-xl\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-32 bg-slate-50 relative overflow-hidden text-slate-900 border-t border-slate-200\">\n <canvas id=\"constellation-canvas\" class=\"absolute inset-0 w-full h-full z-0 cursor-crosshair\"><\/canvas>\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-50 via-transparent to-slate-50 pointer-events-none z-10\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 relative z-20 pointer-events-none text-center\">\n <div class=\"reveal\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-md bg-white\/10 backdrop-blur-md border border-slate-200 mb-8 pointer-events-auto shadow-sm\">\n <i data-lucide=\"link-2\" class=\"w-4 h-4 text-livresq-fucsia\"><\/i>\n <span class=\"text-xs font-bold uppercase tracking-widest text-slate-600\">Centralized Hub<\/span>\n <\/div>\n <h2 class=\"text-4xl md:text-6xl font-black mb-8 leading-tight text-slate-900\">\n Don’t give up on anything.<br\/>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Connect Everything.<\/span>\n <\/h2>\n <p class=\"text-slate-600 text-xl leading-relaxed mb-12\">\n LIVRESQ works perfectly with the tools you already love. Integrate quizzes from <strong>Quizlet<\/strong>, videos from <strong>EdPuzzle<\/strong> or <strong>PhET<\/strong> simulations directly into your lessons, without the student leaving the page.\n <\/p>\n <div class=\"grid md:grid-cols-3 gap-6 pointer-events-auto mt-12 text-left\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 hover:border-pink-200 hover:shadow-lg transition-all duration-300 group shadow-sm text-left\">\n <div class=\"w-12 h-12 bg-pink-50 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\"><i data-lucide=\"box\" class=\"w-6 h-6 text-pink-500\"><\/i><\/div>\n <h3 class=\"text-lg font-bold mb-2 text-slate-900\">Universal Embed<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">If your resource has an „Embed” or „Iframe” code, it works in LIVRESQ instantly.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 hover:border-blue-200 hover:shadow-lg transition-all duration-300 group shadow-sm text-left\">\n <div class=\"w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\"><i data-lucide=\"link-2\" class=\"w-6 h-6 text-blue-500\"><\/i><\/div>\n <h3 class=\"text-lg font-bold mb-2 text-slate-900\">Uninterrupted Flow<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Learners interact with external resources (e.g., Wordwall, LearningApps) directly in the course window.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 hover:border-purple-200 hover:shadow-lg transition-all duration-300 group shadow-sm text-left\">\n <div class=\"w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\"><i data-lucide=\"layers\" class=\"w-6 h-6 text-purple-500\"><\/i><\/div>\n <h3 class=\"text-lg font-bold mb-2 text-slate-900\">30+ Validated Platforms<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">From StoryJumper to Genially, we tested compatibility so you don’t have surprises.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"how-it-works\" class=\"py-24 relative overflow-hidden bg-midnight bg-grid-overlay text-white spotlight-group\">\n \n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none\">\n <div class=\"absolute top-[-20%] right-[-10%] w-[500px] h-[500px] bg-purple-900\/20 rounded-full blur-[100px]\"><\/div>\n <div class=\"absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] bg-blue-900\/20 rounded-full blur-[100px]\"><\/div>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 relative z-10\">\n <div class=\"text-center mb-20 reveal\">\n <span class=\"inline-block py-1.5 px-5 rounded-md bg-livresq-fucsia\/20 border border-livresq-fucsia text-livresq-fucsia text-xs font-black uppercase tracking-[0.2em] mb-6 shadow-sm cursor-default\">Simple. Fast. Efficient.<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black mb-6 font-heading text-white tracking-tight text-glow-blue\">How does it work?<\/h2>\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto font-light leading-relaxed\">Transform educational content into digital experiences in just 3 simple steps.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8 mb-24 relative z-20\">\n <div class=\"reveal delay-100 h-full\">\n <div class=\"spotlight-card glass-panel-midnight p-8 rounded-2xl border border-white\/10 hover:border-blue-500\/50 transition-colors duration-300 h-full flex flex-col items-center text-center hover:shadow-xl hover:shadow-blue-500\/10 group relative overflow-hidden\">\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-blue-500\/10 rounded-2xl flex items-center justify-center text-blue-400 mb-6 group-hover:scale-110 transition-transform duration-300 border border-blue-500\/20 mx-auto shadow-[0_0_20px_rgba(59,130,246,0.2)]\"><i data-lucide=\"log-in\" class=\"w-8 h-8\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-3 text-white\">1. Authentication<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Log in directly from the browser. No complicated installations. Everything is in the cloud, accessible 24\/7.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reveal delay-200 h-full\">\n <div class=\"spotlight-card glass-panel-midnight p-8 rounded-2xl border border-white\/10 hover:border-livresq-fucsia\/50 transition-colors duration-300 h-full flex flex-col items-center text-center hover:shadow-xl hover:shadow-pink-500\/10 group relative overflow-hidden\">\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-pink-500\/10 rounded-2xl flex items-center justify-center text-livresq-fucsia mb-6 group-hover:scale-110 transition-transform duration-300 border border-pink-500\/20 mx-auto shadow-[0_0_20px_rgba(217,18,120,0.2)]\"><i data-lucide=\"pen-tool\" class=\"w-8 h-8\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-3 text-white\">2. Create<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Use the drag-and-drop editor, import existing resources, or let AI generate the structure.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reveal delay-300 h-full\">\n <div class=\"spotlight-card glass-panel-midnight p-8 rounded-2xl border border-white\/10 hover:border-emerald-500\/50 transition-colors duration-300 h-full flex flex-col items-center text-center hover:shadow-xl hover:shadow-emerald-500\/10 group relative overflow-hidden\">\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-emerald-500\/10 rounded-2xl flex items-center justify-center text-emerald-400 mb-6 group-hover:scale-110 transition-transform duration-300 border border-emerald-500\/20 mx-auto shadow-[0_0_20px_rgba(16,185,129,0.2)]\"><i data-lucide=\"upload-cloud\" class=\"w-8 h-8\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-3 text-white\">3. Publish<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Export the SCORM or HTML5 package for any LMS or publish instantly to the LIVRESQ Library.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reveal delay-300 relative max-w-6xl mx-auto group\">\n <div class=\"absolute -inset-1 bg-gradient-to-r from-blue-600 via-livresq-fucsia to-purple-600 rounded-2xl blur-xl opacity-20 group-hover:opacity-40 transition duration-700\"><\/div>\n <div class=\"relative z-10 bg-slate-900 rounded-xl border border-slate-700 shadow-2xl overflow-hidden\">\n <div class=\"h-10 bg-slate-800 border-b border-slate-700 flex items-center px-4 gap-3\">\n <div class=\"flex gap-2\"><div class=\"w-3 h-3 rounded-full bg-[#FF5F56] border border-[#E0443E]\"><\/div><div class=\"w-3 h-3 rounded-full bg-[#FFBD2E] border border-[#DEA123]\"><\/div><div class=\"w-3 h-3 rounded-full bg-[#27C93F] border border-[#1AAB29]\"><\/div><\/div>\n <div class=\"flex-1 max-w-2xl mx-auto bg-slate-900 rounded-md h-6 flex items-center justify-center text-[10px] text-slate-500 font-mono border border-slate-700\/50\"><span class=\"text-green-500 mr-2\">\ud83d\udd12<\/span> https:\/\/author.livresq.com<\/div>\n <\/div>\n <div class=\"relative bg-slate-900 aspect-video\">\n <video autoplay muted loop playsinline class=\"w-full h-full object-cover opacity-95 hover:opacity-100 transition-opacity duration-500\">\n <source src=\"https:\/\/livresq.com\/wp-content\/uploads\/2021\/04\/Livresq-Skyline-Template.mp4\" type=\"video\/mp4\">\n <\/video>\n <\/div>\n <\/div>\n <div class=\"text-center mt-8 text-slate-400 text-sm font-bold tracking-widest uppercase flex justify-center items-center gap-3\">\n <span class=\"relative flex h-3 w-3\"><span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-livresq-fucsia opacity-75\"><\/span><span class=\"relative inline-flex rounded-full h-3 w-3 bg-livresq-fucsia\"><\/span><\/span>\n Template example from LIVRESQ editor\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-32 relative overflow-hidden bg-slate-50\" id=\"templates-section\">\n <div class=\"max-w-7xl mx-auto px-4 relative z-10\">\n <div class=\"text-center mb-16 reveal\">\n <span class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-md bg-purple-100 border border-purple-200 text-purple-700 text-xs font-bold uppercase tracking-widest shadow-sm mb-6\"><i data-lucide=\"library\" class=\"w-3 h-3\"><\/i> Premium Collection<\/span>\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-slate-900 mb-6 font-heading tracking-tight\">Premium <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Templates<\/span><\/h2>\n <p class=\"text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed\">Choose from our vast collection of professional templates, optimized for Business and Academic environments. Top design, ready to use.<\/p>\n <\/div>\n <div class=\"flex justify-center mb-16 reveal\">\n <div class=\"inline-flex bg-white backdrop-blur-xl p-1.5 rounded-lg border border-slate-200 shadow-lg gap-2\">\n <button id=\"tab-business\" onclick=\"switchTab('business')\" class=\"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 bg-livresq-fucsia text-white shadow-lg font-bold transform scale-105 border-none outline-none ring-0\"><i data-lucide=\"briefcase\" class=\"w-4 h-4\"><\/i> Business<\/button>\n <button id=\"tab-academic\" onclick=\"switchTab('academic')\" class=\"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 text-slate-500 hover:text-slate-900 hover:bg-slate-50 font-medium border-none outline-none ring-0\"><i data-lucide=\"graduation-cap\" class=\"w-4 h-4\"><\/i> Academic<\/button>\n <\/div>\n <\/div>\n <div id=\"content-business\" class=\"animate-fade-in-up\">\n <div class=\"flex items-center gap-4 mb-10 pl-2 opacity-80\"><div class=\"h-px flex-grow bg-gradient-to-r from-transparent via-slate-300 to-transparent\"><\/div><h3 class=\"text-2xl font-bold text-slate-700 bg-white\/50 backdrop-blur px-6 py-2 rounded-md border border-slate-200 shadow-sm\">Business Education & Retail<\/h3><div class=\"h-px flex-grow bg-gradient-to-r from-transparent via-slate-300 to-transparent\"><\/div><\/div>\n <div id=\"templates-grid\" class=\"grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-16\">\n \n <a href=\"https:\/\/library.livresq.com\/details\/6891e920017749000957c1aa\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png?fit=800%2C664&ssl=1\" alt=\"Glassmorphism\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Modern & Intuitive<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Glassmorphism<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Modern design with glass effects and vivid colors. Ideal for onboarding and product presentations.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6891e890017749000957c1a8\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.1s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/Neomemphis.png?fit=800%2C664&ssl=1\" alt=\"Neomemphis\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Bold & Energetic<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Neomemphis<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Geometric shapes and energetic colors. Perfect for ‘soft skills’ training, customer experience and compliance.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6891e95d017749000957c1ab\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.2s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/2.png?fit=800%2C664&ssl=1\" alt=\"Dark Cinematic\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Dramatic Impact<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Dark Cinematic<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">High contrast and dramatic lighting. Excellent for storytelling, premium product launches and sales scenarios.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/688dbbb6017749000957b87a\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.3s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/3.png?fit=800%2C664&ssl=1\" alt=\"Minimalism\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Clarity & Efficiency<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Minimalism<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Clean lines, ample white spaces and natural elements. Ideal for sustainable practices, inventory management and safety.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6891e837017749000957c1a4\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.4s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/1.png?fit=800%2C664&ssl=1\" alt=\"Soft Glass Realism\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Elegance & Texture<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Soft Glass Realism<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Subtle frosted glass panels and fresh palette. Suitable for seasonal microlearning and culture programs.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6942858d507a550009c83e64\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.5s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Bauhaus_LIVRESQ.png?w=800&ssl=1\" alt=\"Bauhaus\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Geometric & Functional<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Bauhaus<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Bold geometric style with strong contrast. Clear structure, ideal for corporate courses.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/693aac01507a550009c815eb\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.6s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Black_Gold.png?w=800&ssl=1\" alt=\"Black and Gold\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">High-Tech Science<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Black and Gold<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Dark-mode elegance with gold accents and scientific layout. Perfect for pharma and biotech.<\/p><\/div><\/a>\n <a href=\"https:\/\/library.livresq.com\/details\/6941208f507a550009c837b0\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"reveal group flex flex-col h-full cursor-pointer\" style=\"transition-delay:0.7s\"><div class=\"relative aspect-video w-full rounded-2xl overflow-hidden shadow-sm border border-slate-200 bg-slate-100 mb-6 transition-all duration-500 group-hover:shadow-xl group-hover:shadow-blue-900\/5 group-hover:-translate-y-1 transform-gpu z-0\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Biophilic.png?w=800&ssl=1\" alt=\"Biophilic\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\"><div class=\"absolute bottom-4 left-4 z-10\"><span class=\"inline-block bg-white\/90 backdrop-blur-md text-slate-800 text-[10px] font-bold px-3 py-1.5 rounded-md shadow-sm uppercase tracking-wider border border-white\/50 group-hover:bg-white group-hover:text-livresq-fucsia transition-colors\">Organic & Natural<\/span><\/div><div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500 pointer-events-none\"><\/div><\/div><div class=\"pl-1 pr-4\"><div class=\"flex justify-between items-start mb-2\"><h3 class=\"text-2xl font-bold text-slate-900 group-hover:text-blue-600 transition-colors\">Biophilic<\/h3><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-slate-300 group-hover:text-blue-600 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all\"><\/i><\/div><p class=\"text-slate-500 text-base leading-relaxed font-medium\">Organic design blending nature with medicine. Botanical photos for health courses.<\/p><\/div><\/a>\n <\/div>\n <div class=\"mt-20 text-center reveal\">\n <a href=\"https:\/\/author.livresq.com\/organizer\/templates\" class=\"inline-flex items-center px-8 py-4 text-sm font-bold text-slate-600 bg-white border border-slate-200 rounded-md hover:bg-slate-50 hover:text-livresq-fucsia hover:border-livresq-fucsia transition-all duration-300 shadow-sm hover:shadow-lg hover:-translate-y-1 group\">See all templates <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform\"><\/i><\/a>\n <\/div>\n <\/div>\n <div id=\"content-academic\" class=\"hidden animate-fade-in-up\">\n <div class=\"glass-panel-light rounded-[2.5rem] p-8 md:p-12 relative overflow-hidden shadow-2xl bg-white border border-slate-200 hover-pause\">\n <div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-br from-blue-100\/40 via-indigo-50\/40 to-white rounded-full blur-[80px] -translate-y-1\/2 translate-x-1\/3 pointer-events-none\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-gradient-to-tr from-cyan-50\/40 to-white rounded-full blur-[80px] translate-y-1\/3 -translate-x-1\/3 pointer-events-none\"><\/div>\n \n <div class=\"relative z-10 flex flex-col lg:flex-row items-center gap-16 lg:gap-24\">\n <div class=\"w-full lg:w-1\/2 space-y-8\">\n <div>\n <div class=\"inline-flex items-center gap-2 px-4 py-2 bg-blue-50 border border-blue-100 rounded-md text-blue-700 font-bold text-xs uppercase tracking-wider mb-6 shadow-sm\"><i data-lucide=\"book-open-check\" class=\"w-4 h-4\"><\/i> Public Library & OER<\/div>\n <h3 class=\"text-4xl md:text-5xl font-black text-slate-900 mb-6 leading-[1.15] tracking-tight\">Free Access to <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600\">17,000+ Sources<\/span><\/h3>\n <p class=\"text-lg text-slate-600 leading-relaxed font-medium\">Instant access to over <strong>20,000 free educational materials<\/strong>. Explore a growing collection of interactive lessons, courses, and Open Educational Resources (OER).<\/p>\n <\/div>\n <div class=\"p-6 rounded-2xl bg-white border border-slate-100 shadow-sm hover:border-blue-200 transition-colors\">\n <div class=\"flex items-center gap-4 mb-3\">\n <div class=\"w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600 shadow-sm\"><i data-lucide=\"download\" class=\"w-5 h-5\"><\/i><\/div>\n <div><span class=\"text-2xl font-black text-slate-900\">17.000+<\/span><h4 class=\"font-bold text-slate-700 text-sm leading-none\">Editable Sources<\/h4><\/div>\n <\/div>\n <p class=\"text-slate-600 font-medium border-t border-slate-100 pt-3 mt-1 text-sm\">Access, modify, and adapt any source for your needs.<\/p>\n <\/div>\n <div class=\"pt-2\">\n <a href=\"https:\/\/livresq.com\/en\/publish-library\/\" class=\"inline-flex items-center justify-center w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white hover:text-white font-bold rounded-md transition-all shadow-lg shadow-blue-500\/25 transform hover:-translate-y-1 group\"><i data-lucide=\"search\" class=\"w-5 h-5 mr-2\"><\/i> Search Library <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-2 opacity-70 group-hover:translate-x-1 transition-transform\"><\/i><\/a>\n <\/div>\n <\/div>\n <div class=\"w-full lg:w-1\/2 relative h-[500px] flex items-center justify-center\">\n <div class=\"relative w-full h-full bg-slate-50\/50 rounded-3xl overflow-hidden shadow-inner border border-slate-200 hover-pause\">\n <div class=\"absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent z-10 pointer-events-none\"><\/div>\n <div class=\"grid grid-cols-2 gap-4 p-4 h-full\">\n <div class=\"relative h-full overflow-hidden\"><div class=\"animate-scroll-y flex flex-col gap-4\" id=\"aca-col-1\"><\/div><\/div>\n <div class=\"relative h-full overflow-hidden pt-12\"><div class=\"animate-scroll-y-reverse flex flex-col gap-4\" id=\"aca-col-2\"><\/div><\/div>\n <\/div>\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[85%] z-20\">\n <div class=\"bg-white\/90 backdrop-blur-md p-2 rounded-2xl shadow-2xl border border-slate-200 flex items-center gap-3 animate-float\">\n <div class=\"w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center shrink-0\"><i data-lucide=\"search\" class=\"w-5 h-5\"><\/i><\/div>\n <div class=\"flex-1\"><div class=\"h-2 w-20 bg-slate-200 rounded-full mb-1.5\"><\/div><div class=\"h-2 w-32 bg-slate-100 rounded-full\"><\/div><\/div>\n <div class=\"pr-3\"><div class=\"w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center\"><i data-lucide=\"arrow-right\" class=\"w-3 h-3 text-slate-400\"><\/i><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"use-cases\" class=\"py-24 relative overflow-hidden bg-midnight bg-grid-overlay text-white spotlight-group\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent pointer-events-none\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-12 reveal\">\n <span class=\"text-indigo-300 font-bold tracking-widest uppercase text-xs border border-indigo-500\/30 px-3 py-1 rounded-md bg-indigo-900\/20 mb-4 inline-block shadow-sm\">Segmentation & Personalization<\/span>\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-white mb-6 font-heading text-glow-blue\">LIVRESQ for Your Domain<\/h2>\n \n \n <div class=\"flex items-center justify-center gap-4 mb-8\">\n <span class=\"text-sm font-bold transition-colors cursor-pointer text-slate-500\" id=\"cycle-monthly\" onclick=\"setBilling('monthly')\">Monthly<\/span>\n <button onclick=\"toggleBilling()\" class=\"w-16 h-8 rounded-md bg-slate-800 border border-slate-600 relative flex items-center p-1 transition-colors hover:border-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500\/50\">\n <div id=\"cycle-toggle-ball\" class=\"w-6 h-6 rounded-md bg-white shadow-md transform transition-transform duration-300 translate-x-8\"><\/div>\n <\/button>\n <span class=\"text-sm font-bold transition-colors cursor-pointer text-white\" id=\"cycle-yearly\" onclick=\"setBilling('yearly')\">Yearly<\/span>\n <\/div>\n <p class=\"text-slate-400 max-w-2xl mx-auto text-lg\">The platform adapts to your needs, offering specific plans and functionalities.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8 mb-16\">\n <div class=\"contents\" id=\"pricing-grid\">\n \n <div class=\"spotlight-card glass-panel-midnight rounded-[2rem] p-8 relative flex flex-col h-full hover:-translate-y-2 transition-all duration-500 group shadow-[0_0_30px_rgba(59,130,246,0.1)]\">\n <div class=\"border-beam\"><\/div>\n <div class=\"absolute top-0 left-8 w-20 h-1 bg-blue-500 shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div>\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex justify-between items-start mb-6 pt-4\">\n <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md bg-blue-500\/10 text-blue-400 border-blue-500\/20 shadow-inner group-hover:scale-110 transition-transform duration-500\">\n <i data-lucide=\"building-2\" class=\"w-7 h-7\"><\/i>\n <\/div>\n <div class=\"flex flex-col items-end gap-1\">\n <div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border border-blue-500\/30 text-blue-300 bg-blue-500\/10 shadow-sm\">FOR COMPANIES<\/div>\n <span id=\"badge-corp\" class=\"text-[9px] text-slate-400 font-bold uppercase tracking-wider hidden\">Yearly Only<\/span>\n <\/div>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Corporate & L&D<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">Digitize induction and compliance training. Complete SCORM reporting.<\/p>\n <div class=\"border-t border-slate-700\/50 py-6 mb-2\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-xs text-slate-500 font-bold uppercase\">Price<\/span>\n <span class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">845.79\u20ac<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <span class=\"text-xs text-slate-500 font-medium\">\/ seat \/ year<\/span>\n <\/div>\n <\/div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Team seats management<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Onboarding & Training<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Dedicated customer success<\/span><\/li>\n <\/ul>\n <a href=\"https:\/\/livresq.com\/en\/pricing\/\" class=\"w-full py-4 px-6 rounded-md font-bold text-center text-white hover:text-white transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 group-hover:scale-[1.02] border border-white\/10 bg-blue-600 hover:bg-blue-500 mt-auto\">\n Activate Enterprise Premium Account <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"spotlight-card glass-panel-midnight rounded-[2rem] p-8 relative flex flex-col h-full hover:-translate-y-2 transition-all duration-500 group shadow-[0_0_30px_rgba(217,18,120,0.1)]\">\n <div class=\"border-beam\"><\/div>\n <div class=\"absolute top-0 left-8 w-20 h-1 bg-livresq-fucsia shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div>\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex justify-between items-start mb-6 pt-4\">\n <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md bg-pink-500\/10 text-pink-400 border-pink-500\/20 shadow-inner group-hover:scale-110 transition-transform duration-500\">\n <i data-lucide=\"graduation-cap\" class=\"w-7 h-7\"><\/i>\n <\/div>\n <div class=\"flex flex-col items-end gap-1\">\n <div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border border-pink-500\/30 text-pink-300 bg-pink-500\/10 shadow-sm\">FOR TEACHERS<\/div>\n <span id=\"badge-aca\" class=\"text-[9px] text-slate-400 font-bold uppercase tracking-wider hidden\">Yearly Only<\/span>\n <\/div>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Academic & K-12<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">Create lessons that keep students engaged. Access the public library with free resources.<\/p>\n <div class=\"border-t border-slate-700\/50 py-6 mb-2\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-xs text-slate-500 font-bold uppercase\">Price<\/span>\n <span class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">35.26\u20ac<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <span class=\"text-xs text-slate-500 font-medium\">\/ user \/ year<\/span>\n <span class=\"flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-500\/10 border border-emerald-500\/30 px-2 py-0.5 rounded-md font-bold shadow-[0_0_10px_rgba(16,185,129,0.2)]\"><i data-lucide=\"star\" class=\"w-3 h-3 fill-current\"><\/i> Subsidized<\/span>\n <\/div>\n <\/div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Unlimited projects<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Subsidized Academic Licenses<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Library with over 17k educational material sources<\/span><\/li>\n <\/ul>\n <a href=\"https:\/\/livresq.com\/en\/pricing\/\" class=\"w-full py-4 px-6 rounded-md font-bold text-center text-white hover:text-white transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 group-hover:scale-[1.02] border border-white\/10 bg-livresq-fucsia hover:bg-pink-500 mt-auto\">\n Activate Academic Premium Account <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"spotlight-card glass-panel-midnight rounded-[2rem] p-8 relative flex flex-col h-full hover:-translate-y-2 transition-all duration-500 group shadow-[0_0_30px_rgba(249,115,22,0.1)]\">\n <div class=\"border-beam\"><\/div>\n <div class=\"absolute top-0 left-8 w-20 h-1 bg-orange-500 shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div>\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex justify-between items-start mb-6 pt-4\">\n <div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md bg-orange-500\/10 text-orange-400 border-orange-500\/20 shadow-inner group-hover:scale-110 transition-transform duration-500\">\n <i data-lucide=\"pen-tool\" class=\"w-7 h-7\"><\/i>\n <\/div>\n <div class=\"flex flex-col items-end gap-1\">\n <div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border border-orange-500\/30 text-orange-300 bg-orange-500\/10 shadow-sm\">FOR FREELANCERS<\/div>\n <\/div>\n <\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Freelancers<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">Deliver projects to clients quickly. No installation, work from anywhere.<\/p>\n <div class=\"border-t border-slate-700\/50 py-6 mb-2\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-xs text-slate-500 font-bold uppercase\">Price<\/span>\n <span id=\"price-free\" class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">397\u20ac<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <span id=\"period-free\" class=\"text-xs text-slate-500 font-medium\">\/ user \/ year<\/span>\n <\/div>\n <\/div>\n <ul class=\"space-y-3 mb-8\">\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Unlimited projects<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Customize with any logos you want<\/span><\/li>\n <li class=\"flex items-start gap-3 text-sm text-slate-400 group\/li hover:text-white transition-colors\"><div class=\"mt-0.5 p-0.5 rounded-md bg-slate-800 text-slate-300 border border-slate-700 group-hover\/li:bg-slate-700 transition-all\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"font-medium\">Do what you want with created material, sell it, offer it for free, it’s your choice<\/span><\/li>\n <\/ul>\n <a href=\"https:\/\/livresq.com\/en\/pricing\/\" class=\"w-full py-4 px-6 rounded-md font-bold text-center text-white hover:text-white transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 group-hover:scale-[1.02] border border-white\/10 bg-orange-600 hover:bg-orange-500 mt-auto\">\n Activate Freelance Premium Account <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"grid grid-cols-1 lg:grid-cols-5 gap-8\">\n <div class=\"lg:col-span-3 reveal h-full\">\n <div class=\"spotlight-card glass-panel-midnight rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden group flex flex-col h-full hover:border-blue-500\/30 transition-all duration-500\">\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-blue-900\/10 rounded-bl-full -mr-10 -mt-10 transition-transform group-hover:scale-110 pointer-events-none blur-3xl\"><\/div>\n <div class=\"flex items-center gap-4 mb-8 relative z-10\">\n <div class=\"w-12 h-12 bg-blue-500\/10 border border-blue-500\/20 rounded-2xl flex items-center justify-center text-blue-400 shadow-[0_0_20px_rgba(59,130,246,0.1)]\"><i data-lucide=\"building-2\" class=\"w-6 h-6\"><\/i><\/div>\n <div><h3 class=\"text-2xl font-bold text-white\">Companies & Trainers<\/h3><p class=\"text-xs text-blue-400 uppercase tracking-widest font-bold mt-1\">Industry-tailored solutions<\/p><\/div>\n <\/div>\n <p class=\"text-slate-400 text-lg mb-10 max-w-2xl relative z-10 leading-relaxed\">Complete training solutions adapted for specific industries. From regulated banking processes to occupational safety in factories.<\/p>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10 relative z-10\" id=\"industry-grid\"><\/div>\n \n <div class=\"mt-auto bg-white p-8 rounded-3xl border border-slate-200 relative z-10 shadow-lg transition-colors group-hover:border-slate-300\">\n <div class=\"absolute top-8 right-8 text-slate-100 w-10 h-10 transform -scale-x-100\"><i data-lucide=\"quote\" class=\"w-10 h-10 fill-current\"><\/i><\/div>\n <p class=\"text-slate-600 italic mb-6 leading-relaxed relative z-10 font-medium\">„CEC Bank used LIVRESQ to customize internal courses, ensuring relevance and perfect alignment with the organization’s strategic objectives. We managed to build a partnership relationship with Ascendia centered on both their and our concern for developing our colleagues’ skills.”<\/p>\n <div class=\"flex items-start gap-4 border-t border-slate-100 pt-6\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Cezar_B.png?w=800&ssl=1\" alt=\"Cezar Barladeanu\" class=\"w-16 h-16 rounded-full border-2 border-slate-100 object-cover shadow-sm\">\n <div>\n <p class=\"text-base font-bold text-slate-900 leading-tight\">Cezar Barladeanu<\/p>\n <p class=\"text-sm text-slate-500 mb-1\">HR Strategy & Operations<\/p>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_LOGO.png?w=800&ssl=1\" alt=\"CEC Bank\" class=\"h-8 w-auto opacity-90 mix-blend-multiply\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"lg:col-span-2 reveal h-full delay-200\">\n <div class=\"spotlight-card glass-panel-midnight rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden group flex flex-col h-full hover:border-pink-500\/30 transition-all duration-500\">\n <div class=\"absolute top-0 right-0 w-48 h-48 bg-pink-900\/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110 pointer-events-none blur-3xl\"><\/div>\n <div class=\"flex items-center gap-4 mb-8 relative z-10\">\n <div class=\"w-12 h-12 bg-pink-500\/10 border border-pink-500\/20 rounded-2xl flex items-center justify-center text-pink-400 shadow-[0_0_20px_rgba(236,72,153,0.1)]\"><i data-lucide=\"graduation-cap\" class=\"w-6 h-6\"><\/i><\/div>\n <div><h3 class=\"text-2xl font-bold text-white\">Education<\/h3><p class=\"text-xs text-pink-400 uppercase tracking-widest font-bold mt-1\">K-12 & Universities<\/p><\/div>\n <\/div>\n <div class=\"space-y-4 mb-10 relative z-10\" id=\"edu-features\"><\/div>\n \n <div class=\"mt-auto bg-white p-8 rounded-3xl border border-slate-200 relative z-10 shadow-lg transition-colors group-hover:border-slate-300\">\n <div class=\"absolute top-8 right-8 text-slate-100 w-8 h-8 transform -scale-x-100\"><i data-lucide=\"quote\" class=\"w-8 h-8 fill-current\"><\/i><\/div>\n <p class=\"text-slate-600 italic mb-6 leading-relaxed relative z-10 font-medium\">„What we appreciate most about LIVRESQ is flexibility and interactivity. Many of the over <strong class=\"text-pink-600\">20,000 enrolled teachers<\/strong> appreciated how the course was created.”<\/p>\n <div class=\"flex items-start gap-4 border-t border-slate-100 pt-6\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Andreea_Hu.jpg?w=800&ssl=1\" alt=\"Andreea Hurezeanu\" class=\"w-16 h-16 rounded-full border-2 border-slate-100 object-cover shadow-sm\">\n <div>\n <p class=\"text-base font-bold text-slate-900 leading-tight\">Andreea Hurezeanu<\/p>\n <p class=\"text-sm text-slate-500 mb-2\">Strategic Partnership Coordinator<\/p>\n <div class=\"bg-slate-50 px-3 py-1.5 rounded shadow-sm inline-block border border-slate-100\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/12\/Logo_SavetheChildren.png?w=800&ssl=1\" alt=\"Save the Children\" class=\"h-10 w-auto mix-blend-multiply\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-slate-50 border-t border-slate-200\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\"><h2 class=\"text-3xl md:text-5xl font-black text-slate-900 mb-4 font-heading tracking-tight\">Features<\/h2><p class=\"text-slate-500 max-w-2xl mx-auto text-lg font-light\">A complete ecosystem of tools for any educational scenario.<\/p><\/div>\n <div class=\"space-y-6 max-w-5xl mx-auto\" id=\"features-accordion\">\n \n <div class=\"reveal bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 delay-100\">\n <details class=\"group\" open>\n <summary class=\"flex justify-between items-center cursor-pointer p-6 hover:bg-slate-50 transition-colors duration-200 list-none select-none\">\n <div class=\"flex items-center gap-5\"><div class=\"p-3 bg-fuchsia-50 rounded-xl text-fuchsia-600 border border-fuchsia-100\"><i data-lucide=\"layout-template\" class=\"w-6 h-6\"><\/i><\/div><span class=\"text-xl font-bold text-slate-900 tracking-tight\">Design & Structure<\/span><\/div>\n <span class=\"transition-transform duration-300 group-open:rotate-180 bg-slate-100 p-2 rounded-md\"><i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-500\"><\/i><\/span>\n <\/summary>\n <div class=\"p-6 pt-0 border-t border-slate-100 bg-slate-50\/50\"><div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6\"><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Templates<\/h4><p class=\"text-sm text-slate-500 font-medium\">Ready-made editable content.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Images & Galleries<\/h4><p class=\"text-sm text-slate-500 font-medium\">Own upload or library.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Text Cells<\/h4><p class=\"text-sm text-slate-500 font-medium\">Advanced formatting editor.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Tables & iFrames<\/h4><p class=\"text-sm text-slate-500 font-medium\">Organize data and content.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Math Editor<\/h4><p class=\"text-sm text-slate-500 font-medium\">Complex formulas (TeX\/MathJax).<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Content Import<\/h4><p class=\"text-sm text-slate-500 font-medium\">Import resources from other sources.<\/p><\/div><\/div><\/div><\/div><\/div>\n <\/details>\n <\/div>\n <div class=\"reveal bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 delay-200\">\n <details class=\"group\">\n <summary class=\"flex justify-between items-center cursor-pointer p-6 hover:bg-slate-50 transition-colors duration-200 list-none select-none\">\n <div class=\"flex items-center gap-5\"><div class=\"p-3 bg-blue-50 rounded-xl text-blue-600 border border-blue-100\"><i data-lucide=\"mouse-pointer-click\" class=\"w-6 h-6\"><\/i><\/div><span class=\"text-xl font-bold text-slate-900 tracking-tight\">Interactivity & Engagement<\/span><\/div>\n <span class=\"transition-transform duration-300 group-open:rotate-180 bg-slate-100 p-2 rounded-md\"><i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-500\"><\/i><\/span>\n <\/summary>\n <div class=\"p-6 pt-0 border-t border-slate-100 bg-slate-50\/50\"><div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6\"><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Quizzes<\/h4><p class=\"text-sm text-slate-500 font-medium\">Multiple types of interactive tests.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Gamification<\/h4><p class=\"text-sm text-slate-500 font-medium\">Crosswords and word games.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Video & Audio<\/h4><p class=\"text-sm text-slate-500 font-medium\">Natively integrated multimedia.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Pop-ups & Hyperlinks<\/h4><p class=\"text-sm text-slate-500 font-medium\">Additional layers of information.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Virtual Assistants<\/h4><p class=\"text-sm text-slate-500 font-medium\">Guide characters for feedback.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Navigation Control<\/h4><p class=\"text-sm text-slate-500 font-medium\">Barriers and path conditioning.<\/p><\/div><\/div><\/div><\/div><\/div>\n <\/details>\n <\/div>\n <div class=\"reveal bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 delay-300\">\n <details class=\"group\">\n <summary class=\"flex justify-between items-center cursor-pointer p-6 hover:bg-slate-50 transition-colors duration-200 list-none select-none\">\n <div class=\"flex items-center gap-5\"><div class=\"p-3 bg-emerald-50 rounded-xl text-emerald-600 border border-emerald-100\"><i data-lucide=\"cpu\" class=\"w-6 h-6\"><\/i><\/div><span class=\"text-xl font-bold text-slate-900 tracking-tight\">Technology & Distribution<\/span><\/div>\n <span class=\"transition-transform duration-300 group-open:rotate-180 bg-slate-100 p-2 rounded-md\"><i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-500\"><\/i><\/span>\n <\/summary>\n <div class=\"p-6 pt-0 border-t border-slate-100 bg-slate-50\/50\"><div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6\"><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Full AI Suite<\/h4><p class=\"text-sm text-slate-500 font-medium\">Lesson generator, DALL-E, Avatar Video.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">SCORM Export<\/h4><p class=\"text-sm text-slate-500 font-medium\">Compatible 1.2 & 2004.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">SCORM Import<\/h4><p class=\"text-sm text-slate-500 font-medium\">Edit existing packages.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Translation & TTS<\/h4><p class=\"text-sm text-slate-500 font-medium\">Automatic localization.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Live Collaboration<\/h4><p class=\"text-sm text-slate-500 font-medium\">Real-time teamwork.<\/p><\/div><\/div><\/div><div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm\"><div class=\"flex gap-4\"><div class=\"shrink-0 mt-1 text-livresq-fucsia\"><i data-lucide=\"check\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"font-bold text-slate-900 mb-1\">Certificates<\/h4><p class=\"text-sm text-slate-500 font-medium\">Automatic diploma generation.<\/p><\/div><\/div><\/div><\/div><\/div>\n <\/details>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"py-24 bg-midnight bg-grid-overlay text-white spotlight-group relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none\"><div class=\"absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-purple-900\/20 rounded-full blur-[100px]\"><div class=\"absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-900\/20 rounded-full blur-[100px]\"><\/div><\/div><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"flex flex-col md:flex-row items-center justify-between gap-16\">\n <div class=\"w-full md:w-7\/12\">\n <span class=\"text-fuchsia-300 font-bold tracking-widest uppercase text-xs border border-fuchsia-500\/30 px-3 py-1 rounded-md bg-fuchsia-900\/20 mb-6 inline-block shadow-[0_0_15px_rgba(217,70,239,0.3)]\">Easy Migration<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold mb-6 font-heading text-white text-glow-blue tracking-tight\">Import Existing <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 to-purple-400\">SCORM<\/span> Packages<\/h2>\n <p class=\"text-lg text-slate-400 mb-10 leading-relaxed font-medium max-w-xl\">Have content stuck in other platforms (e.g., Rise)? LIVRESQ gives you the freedom to import and edit exported packages. Don’t lose previous work \u2013 transform it.<\/p>\n <div class=\"grid sm:grid-cols-2 gap-4\">\n <div class=\"spotlight-card glass-panel-midnight p-5 rounded-2xl border border-white\/5 hover:border-white\/20 transition-all duration-300 group cursor-default relative overflow-hidden\"><div class=\"relative z-10\"><div class=\"w-10 h-10 bg-orange-500\/10 rounded-lg flex items-center justify-center text-orange-400 mb-3 border border-orange-500\/20 shadow-sm\"><i data-lucide=\"file-archive\" class=\"w-5 h-5\"><\/i><\/div><h4 class=\"text-white font-bold mb-1\">Keep Structure<\/h4><p class=\"text-xs text-slate-500 font-medium\">Import chapter organization intact.<\/p><\/div><\/div>\n <div class=\"spotlight-card glass-panel-midnight p-5 rounded-2xl border border-white\/5 hover:border-white\/20 transition-all duration-300 group cursor-default relative overflow-hidden\"><div class=\"relative z-10\"><div class=\"w-10 h-10 bg-blue-500\/10 rounded-lg flex items-center justify-center text-blue-400 mb-3 border border-blue-500\/20 shadow-sm\"><i data-lucide=\"edit-3\" class=\"w-5 h-5\"><\/i><\/div><h4 class=\"text-white font-bold mb-1\">Full Editing<\/h4><p class=\"text-xs text-slate-500 font-medium\">Modify texts, images, and quizzes.<\/p><\/div><\/div>\n <div class=\"spotlight-card glass-panel-midnight p-5 rounded-2xl border border-white\/5 hover:border-white\/20 transition-all duration-300 group cursor-default relative overflow-hidden sm:col-span-2\"><div class=\"flex items-center gap-4 relative z-10\"><div class=\"w-10 h-10 bg-emerald-500\/10 rounded-lg flex items-center justify-center text-emerald-400 shrink-0 border border-emerald-500\/20 shadow-sm\"><i data-lucide=\"refresh-cw\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"text-white font-bold\">Automatic Conversion<\/h4><p class=\"text-xs text-slate-500 font-medium\">Transform static packages into editable LIVRESQ projects in minutes.<\/p><\/div><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"w-full md:w-5\/12 flex justify-center perspective-1000\">\n <div class=\"relative w-64 h-64 animate-float\">\n <div class=\"absolute inset-0 rounded-full border border-fuchsia-500\/20 animate-spin-slow\"><\/div>\n <div class=\"absolute inset-4 rounded-full border border-blue-500\/20 animate-spin-reverse-slow border-dashed\"><\/div>\n <div class=\"absolute inset-8 rounded-[2rem] glass-panel-midnight flex items-center justify-center border border-white\/10 shadow-[0_0_50px_rgba(168,85,247,0.15)] group hover:shadow-[0_0_80px_rgba(168,85,247,0.3)] transition-shadow duration-500\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-fuchsia-500\/10 to-blue-500\/10 rounded-[2rem] opacity-50\"><\/div>\n <div class=\"flex flex-col items-center gap-3 relative z-10\">\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-slate-800 to-black border border-white\/10 flex items-center justify-center shadow-inner\"><i data-lucide=\"arrow-down-circle\" class=\"w-8 h-8 text-fuchsia-400\"><\/i><\/div>\n <div class=\"h-1 w-12 bg-slate-700 rounded-full overflow-hidden\"><div class=\"h-full bg-fuchsia-500 w-2\/3 animate-pulse\"><\/div><\/div>\n <span class=\"text-[10px] font-mono text-fuchsia-300 tracking-widest uppercase\">Processing…<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section class=\"py-24 bg-white relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-blue-50 rounded-full blur-3xl opacity-60 translate-x-1\/3 -translate-y-1\/3 pointer-events-none\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-indigo-50 rounded-full blur-3xl opacity-60 -translate-x-1\/3 translate-y-1\/3 pointer-events-none\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"flex flex-col items-center text-center mb-16\">\n <span class=\"text-blue-600 font-bold tracking-widest uppercase text-xs border border-blue-200 px-3 py-1 rounded-md bg-blue-50 inline-block mb-6 shadow-sm\">Compliance & Standards<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 font-heading leading-[1.15]\">Publish <span class=\"text-blue-600\">SCORM<\/span> Packages<\/h2>\n <p class=\"text-slate-600 leading-relaxed text-lg font-medium max-w-3xl mx-auto\">We know compliance is critical for organizations. LIVRESQ generates native compatible code, ensuring seamless integration with any modern or legacy LMS.<\/p>\n <\/div>\n <div class=\"w-full max-w-5xl mx-auto mb-16 relative perspective-1000\">\n <div class=\"relative rounded-2xl bg-white p-2 shadow-2xl border border-slate-200 transform hover:scale-[1.01] transition-transform duration-500 transform-style-3d\">\n <div class=\"h-10 bg-slate-50 border-b border-slate-100 rounded-t-xl flex items-center px-4 gap-2 mb-0\"><div class=\"flex gap-1.5\"><div class=\"w-3 h-3 rounded-full bg-slate-300\"><\/div><div class=\"w-3 h-3 rounded-full bg-slate-300\"><\/div><div class=\"w-3 h-3 rounded-full bg-slate-300\"><\/div><\/div><div class=\"flex-1 text-center\"><div class=\"inline-block px-4 py-1 bg-white border border-slate-200 rounded text-[10px] font-mono text-slate-400\">scorm-preview.html<\/div><\/div><\/div>\n <div class=\"relative rounded-b-xl overflow-hidden bg-slate-900 aspect-video group shadow-inner\"><video controls autoplay muted loop playsinline class=\"w-full h-full object-cover\"><source src=\"https:\/\/livresq.com\/wp-content\/uploads\/2022\/11\/Scorm_livresq_all.mp4\" type=\"video\/mp4\"><\/video><\/div>\n <\/div>\n \n <div class=\"absolute top-1\/2 -translate-y-1\/2 -right-6 md:-right-12 bg-white p-4 rounded-xl shadow-xl border border-slate-100 hidden md:flex items-center gap-3 animate-float z-20\" style=\"animation-delay: 1.5s\"><div class=\"w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-200\"><i data-lucide=\"layers\" class=\"w-6 h-6\"><\/i><\/div><div><p class=\"text-xs uppercase font-bold text-slate-400 tracking-wider\">SCORM<\/p><p class=\"text-sm font-black text-slate-900\">Export\/Import<\/p><\/div><\/div>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-6 max-w-5xl mx-auto\">\n <div class=\"flex flex-col items-center text-center p-6 rounded-2xl bg-white border border-slate-100 shadow-sm hover:shadow-md hover:border-blue-100 transition-all group\"><div class=\"w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center text-slate-600 mb-4 group-hover:bg-slate-200 transition-colors\"><i data-lucide=\"check-circle\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 text-lg mb-2\">SCORM 1.2<\/h4><p class=\"text-sm text-slate-500 font-medium leading-relaxed\">Maximum compatibility with old systems and legacy platforms.<\/p><\/div>\n <div class=\"flex flex-col items-center text-center p-6 rounded-2xl bg-emerald-50 border border-emerald-100 shadow-md hover:shadow-lg transition-all group relative overflow-hidden transform md:-translate-y-4\"><div class=\"absolute right-0 top-0 p-2 opacity-10 pointer-events-none\"><i data-lucide=\"check-circle\" class=\"w-32 h-32 text-emerald-500\"><\/i><\/div><div class=\"w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center text-emerald-600 mb-4 relative z-10 shadow-sm\"><i data-lucide=\"check-circle\" class=\"w-6 h-6\"><\/i><\/div><div class=\"relative z-10\"><h4 class=\"font-bold text-slate-900 text-lg mb-2\">SCORM 2004 3rd Edition<\/h4><p class=\"text-sm text-emerald-700 font-bold leading-relaxed\">Industry gold standard. Advanced reporting and sequencing.<\/p><\/div><\/div>\n <div class=\"flex flex-col items-center text-center p-6 rounded-2xl bg-white border border-slate-100 shadow-sm hover:shadow-md hover:border-blue-100 transition-all group\"><div class=\"w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-blue-600 mb-4 group-hover:bg-blue-100 transition-colors\"><i data-lucide=\"check-circle\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 text-lg mb-2\">SCORM 2004 4th Edition<\/h4><p class=\"text-sm text-slate-500 font-medium leading-relaxed\">The latest version of the standard for modern platforms.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative bg-midnight bg-grid-overlay border-t border-slate-800 spotlight-group\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-bold text-blue-200\/50 uppercase tracking-widest mb-2\">International Recognition<\/h2>\n <h3 class=\"text-2xl md:text-3xl font-extrabold text-white font-heading text-glow-blue\">Trusted Partner in the European Innovation Ecosystem<\/h3>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <div class=\"reveal delay-100 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><svg class=\"absolute -right-10 -bottom-10 w-64 h-64 text-blue-500\/5 opacity-20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"><\/path><\/svg><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-blue-500\/10 border border-blue-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"flag\" class=\"w-7 h-7 fill-current\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-blue-500\/10 border border-blue-400\/20 rounded-md text-blue-300 text-[10px] font-bold uppercase tracking-wider\">DEC Member<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">European Commission<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Member of the Digital Education Content (DEC) expert group of the European Commission, actively contributing to the standardization and modernization of educational resources at the EU level.<\/p><\/div><\/div><\/div><\/div>\n <div class=\"reveal delay-200 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-indigo-500\/10 border border-indigo-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"landmark\" class=\"w-7 h-7\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-indigo-500\/10 border border-indigo-400\/20 rounded-md text-indigo-300 text-[10px] font-bold uppercase tracking-wider\">Official Provider<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">Council of Europe<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">The LIVRESQ platform is used for creating and providing services for the development and maintenance of e-learning modules and associated training services. We are official providers for the Council of Europe.<\/p><\/div><\/div><\/div><\/div>\n <div class=\"reveal delay-300 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-green-500\/10 border border-green-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"cpu\" class=\"w-7 h-7\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-green-500\/10 border border-green-400\/20 rounded-md text-green-300 text-[10px] font-bold uppercase tracking-wider\">AI for GovTech<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">Google Accelerator<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">LIVRESQ selected for innovation in the public sector by integrating advanced Artificial Intelligence technologies into educational processes.<\/p><\/div><\/div><\/div><\/div>\n <div class=\"reveal delay-400 h-full\"><div class=\"spotlight-card relative rounded-2xl shadow-lg overflow-hidden group h-full w-full glass-panel-midnight border border-slate-700 flex flex-col\"><div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div><div class=\"relative z-10 p-6 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6\"><div class=\"w-12 h-12 bg-sky-500\/10 border border-sky-500\/20 rounded-xl flex items-center justify-center text-white shadow-lg\"><i data-lucide=\"accessibility\" class=\"w-7 h-7\"><\/i><\/div><span class=\"inline-block px-3 py-1 bg-sky-500\/10 border border-sky-400\/20 rounded-md text-sky-300 text-[10px] font-bold uppercase tracking-wider\">AI Hall of Fame<\/span><\/div><h4 class=\"text-xl font-bold text-white mb-4\">Microsoft<\/h4><div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Global recognition for LIVRESQ’s impact in facilitating access to digital education for people with disabilities.<\/p><\/div><\/div><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-slate-50 border-t border-slate-200\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"reveal\">\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-16 gap-6\">\n <div class=\"max-w-3xl\">\n <span class=\"text-emerald-600 font-bold tracking-widest uppercase text-xs border border-emerald-200 px-3 py-1 rounded-md bg-emerald-50 mb-6 inline-block shadow-sm\">Security-First Architecture<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black text-slate-900 leading-tight font-heading\">Armored Infrastructure.<br\/><span class=\"text-emerald-600\">Zero Compromises.<\/span><\/h2>\n <\/div>\n <div class=\"max-w-sm text-left md:text-right\"><p class=\"text-slate-500 font-medium text-sm leading-relaxed\">Built on banking standards. Audited for GDPR compliance. Hosted exclusively in the EU.<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n <div class=\"reveal delay-100\">\n <div class=\"bg-white rounded-[2.5rem] p-8 border border-slate-200 shadow-xl relative overflow-hidden h-full\">\n <div class=\"absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:20px_20px]\"><\/div>\n <div class=\"relative z-10 flex flex-col gap-6 h-full justify-center\">\n <div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm flex items-center gap-4 hover:shadow-md transition-shadow\"><div class=\"w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 shrink-0\"><i data-lucide=\"server\" class=\"w-6 h-6\"><\/i><\/div><div class=\"flex-1\"><div class=\"flex justify-between items-center mb-1\"><h4 class=\"font-bold text-slate-800 text-sm\">Physical Infrastructure<\/h4><span class=\"text-[10px] font-mono text-slate-400 border border-slate-200 px-1.5 rounded\">MS AZURE<\/span><\/div><div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden mb-1\"><div class=\"h-full w-full bg-blue-500 rounded-full\"><\/div><\/div><p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">West Europe \/ Netherlands Datacenter<\/p><\/div><\/div>\n <div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm flex items-center gap-4 hover:shadow-md transition-shadow\"><div class=\"w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center text-purple-600 shrink-0\"><i data-lucide=\"network\" class=\"w-6 h-6\"><\/i><\/div><div class=\"flex-1\"><div class=\"flex justify-between items-center mb-1\"><h4 class=\"font-bold text-slate-800 text-sm\">Data Transport<\/h4><span class=\"text-[10px] font-mono text-slate-400 border border-slate-200 px-1.5 rounded\">TLS 1.3 \/ SSL<\/span><\/div><div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden mb-1\"><div class=\"h-full w-full bg-purple-500 rounded-full\"><\/div><\/div><p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">End-to-End Encryption in Transit<\/p><\/div><\/div>\n <div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm flex items-center gap-4 hover:shadow-md transition-shadow\"><div class=\"w-12 h-12 bg-emerald-50 rounded-lg flex items-center justify-center text-emerald-600 shrink-0\"><i data-lucide=\"lock\" class=\"w-6 h-6\"><\/i><\/div><div class=\"flex-1\"><div class=\"flex justify-between items-center mb-1\"><h4 class=\"font-bold text-slate-800 text-sm\">Storage & Access<\/h4><span class=\"text-[10px] font-mono text-slate-400 border border-slate-200 px-1.5 rounded\">AES-256<\/span><\/div><div class=\"w-full h-1.5 bg-slate-100 rounded-full overflow-hidden mb-1\"><div class=\"h-full w-full bg-emerald-500 rounded-full\"><\/div><\/div><div class=\"flex flex-col gap-1 mt-1\"><p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">ISO 27001 & 9001 Certified Processes<\/p><p class=\"text-[9px] text-slate-400 leading-tight\">SR ISO\/CEI 27001:2023 (ISO\/IEC 27001:2022)<br\/>SR EN ISO 9001:2015 (ISO 9001:2015)<\/p><\/div><\/div><\/div>\n <div class=\"mt-2 flex items-center gap-2 text-[10px] font-bold text-emerald-600 uppercase tracking-widest pl-2\"><span class=\"relative flex h-2 w-2\"><span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75\"><\/span><span class=\"relative inline-flex rounded-full h-2 w-2 bg-emerald-500\"><\/span><\/span> Systems Operational<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"flex flex-col gap-6\">\n <div class=\"reveal delay-200\"><div class=\"bg-slate-900 rounded-[2.5rem] p-8 md:p-10 text-white relative overflow-hidden shadow-2xl group border border-slate-800\"><div class=\"absolute top-0 right-0 w-64 h-64 bg-slate-800 rounded-bl-full -mr-16 -mt-16 transition-transform group-hover:scale-110 pointer-events-none opacity-50\"><\/div><div class=\"relative z-10\"><div class=\"w-14 h-14 bg-slate-800 rounded-2xl flex items-center justify-center text-blue-400 mb-6 border border-slate-700 shadow-inner\"><i data-lucide=\"file-check\" class=\"w-7 h-7\"><\/i><\/div><h3 class=\"text-2xl font-bold mb-1\">100% Ownership<\/h3><p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest mb-6\">Contractual Guarantee<\/p><p class=\"text-slate-300 leading-relaxed font-medium mb-8\">Unlike other SaaS platforms, LIVRESQ claims no rights over your content. The materials created are your company’s asset.<\/p><div class=\"inline-flex items-center gap-2 px-3 py-1 bg-slate-800 rounded text-[10px] font-mono text-slate-400 border border-slate-700\"><i data-lucide=\"copyright\" class=\"w-3 h-3\"><\/i> All Rights Reserved<\/div><\/div><\/div><\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n <div class=\"reveal delay-300\"><div class=\"bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col items-center text-center h-full justify-center\"><div class=\"w-12 h-12 bg-emerald-50 rounded-full flex items-center justify-center text-emerald-600 mb-3\"><i data-lucide=\"fingerprint\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 mb-1\">GDPR Ready<\/h4><p class=\"text-xs text-slate-500\">Full EU Audit<\/p><\/div><\/div>\n <div class=\"reveal delay-400\"><div class=\"bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col items-center text-center h-full justify-center\"><div class=\"w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-blue-600 mb-3\"><i data-lucide=\"eye-off\" class=\"w-6 h-6\"><\/i><\/div><h4 class=\"font-bold text-slate-900 mb-1\">Private Projects<\/h4><p class=\"text-xs text-slate-500\">Secure Link Access<\/p><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-midnight bg-grid-overlay border-t border-slate-800 relative spotlight-group\">\n <div class=\"max-w-3xl mx-auto px-4 relative z-10 reveal\">\n <h2 class=\"text-3xl font-bold text-center mb-12 text-white text-glow-blue\">Frequently Asked Questions<\/h2>\n <div class=\"space-y-4\">\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">Can I start for free? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">Yes, we offer a free license with access to basic features. No card required.<\/p><\/div><\/details>\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">Does it work on any LMS? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">Yes, packages exported from LIVRESQ are compatible with SCORM 1.2 and 2004 standards.<\/p><\/div><\/details>\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">Do I need to install anything? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">No. LIVRESQ is a cloud-based solution and runs 100% in the browser.<\/p><\/div><\/details>\n <details class=\"spotlight-card group glass-panel-midnight rounded-xl cursor-pointer hover:bg-slate-800 transition border border-slate-700 relative overflow-hidden\"><summary class=\"font-bold text-white list-none flex justify-between items-center relative z-20 p-4 w-full select-none outline-none\">What happens to my materials? <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-slate-400 transition-transform group-open:rotate-180 ml-4 shrink-0\"><\/i><\/summary><div class=\"relative z-20 px-4 pb-4\"><p class=\"text-slate-400 text-sm leading-relaxed mt-2 border-t border-slate-700\/50 pt-4\">The created materials belong entirely to you. You can export, download, and keep them on your own computer.<\/p><\/div><\/details>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-slate-50 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-white via-slate-50 to-transparent pointer-events-none\"><\/div>\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 relative z-10\">\n <div class=\"reveal\">\n <div class=\"relative rounded-[3rem] overflow-hidden bg-[#020617] shadow-2xl group border border-slate-800\/50\">\n <div class=\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-livresq-fucsia to-transparent opacity-50\"><\/div>\n <div class=\"absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:60px_60px] opacity-20 animate-[pulse_10s_infinite]\"><\/div>\n <div class=\"absolute -top-[30%] left-[10%] w-[800px] h-[800px] bg-blue-600\/10 rounded-full blur-[120px] pointer-events-none mix-blend-screen animate-float\"><\/div>\n <div class=\"absolute -bottom-[30%] right-[10%] w-[600px] h-[600px] bg-livresq-fucsia\/10 rounded-full blur-[100px] pointer-events-none mix-blend-screen\" style=\"animation-delay: 2s\"><\/div>\n <div class=\"relative z-10 flex flex-col lg:flex-row items-center justify-between p-8 md:p-16 gap-12 lg:gap-24\">\n <div class=\"w-full lg:w-1\/2 text-left space-y-8\">\n <div class=\"inline-flex items-center gap-2 bg-white\/5 border border-white\/10 rounded-md px-4 py-1.5 backdrop-blur-md hover:bg-white\/10 transition-colors cursor-default\"><div class=\"flex -space-x-2\"><div class=\"w-5 h-5 rounded-full bg-blue-500 border border-slate-900\"><\/div><div class=\"w-5 h-5 rounded-full bg-pink-500 border border-slate-900\"><\/div><div class=\"w-5 h-5 rounded-full bg-emerald-500 border border-slate-900\"><\/div><\/div><span class=\"text-xs font-bold text-slate-300 tracking-wide\">Join over <span class=\"text-white\">158,000+<\/span> creators<\/span><\/div>\n <h2 class=\"text-4xl md:text-6xl font-black text-white leading-[1.05] tracking-tight\">Transform ideas into <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-livresq-fucsia animate-gradient-x\">Digital Experiences.<\/span><\/h2>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-3\"><div class=\"flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500\/10 text-emerald-400 border border-emerald-500\/20\"><i data-lucide=\"check-circle-2\" class=\"w-3.5 h-3.5\"><\/i><\/div><p class=\"text-slate-400 text-lg font-medium\">Instant access. No installation.<\/p><\/div>\n <div class=\"flex items-center gap-3\"><div class=\"flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500\/10 text-emerald-400 border border-emerald-500\/20\"><i data-lucide=\"check-circle-2\" class=\"w-3.5 h-3.5\"><\/i><\/div><p class=\"text-slate-400 text-lg font-medium\">SCORM export compatible with any LMS.<\/p><\/div>\n <div class=\"flex items-center gap-3\"><div class=\"flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500\/10 text-emerald-400 border border-emerald-500\/20\"><i data-lucide=\"check-circle-2\" class=\"w-3.5 h-3.5\"><\/i><\/div><p class=\"text-slate-400 text-lg font-medium\">Free license available.<\/p><\/div>\n <\/div>\n <div class=\"flex flex-col sm:flex-row gap-4 pt-4\">\n <a href=\"https:\/\/livresq.com\/en\/my-account\/\" class=\"relative inline-flex items-center justify-center px-8 py-4 text-base font-bold rounded-md text-white hover:text-white transition-all duration-300 bg-blue-600 hover:bg-blue-500 shadow-[0_0_30px_rgba(37,99,235,0.3)] hover:shadow-[0_0_50px_rgba(37,99,235,0.5)] transform hover:-translate-y-1 overflow-hidden group\/btn flex-1 sm:flex-none\">\n <span class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white\/20 to-transparent -translate-x-full group-hover\/btn:animate-[shimmer_1s_infinite]\"><\/span><i data-lucide=\"zap\" class=\"w-5 h-5 mr-2 fill-current\"><\/i> Create Free Account\n <\/a>\n <\/div>\n <p class=\"text-xs font-bold text-slate-600 uppercase tracking-widest pl-1\"><i data-lucide=\"lock\" class=\"w-3 h-3 inline-block mb-0.5 mr-1\"><\/i> Securely Hosted in Microsoft Azure, Europe<\/p>\n <\/div>\n <div class=\"w-full lg:w-1\/2 relative perspective-1000\">\n <div class=\"relative rounded-xl bg-slate-900 border border-slate-700 p-2 shadow-2xl transform lg:rotate-y-[-12deg] lg:rotate-x-[5deg] lg:translate-x-8 transition-transform duration-700 hover:transform-none\">\n <div class=\"absolute inset-0 bg-gradient-to-tr from-white\/10 to-transparent rounded-xl pointer-events-none z-20 mix-blend-overlay\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2023\/03\/LIVRESQ_template_course_elearning.jpeg\" alt=\"LIVRESQ Editor Interface\" class=\"w-full h-auto rounded-lg shadow-inner relative z-10\">\n <\/div>\n <div class=\"absolute -bottom-6 -left-6 bg-slate-800\/90 backdrop-blur border border-slate-600 p-4 rounded-xl shadow-xl flex items-center gap-3 lg:rotate-y-[-12deg] z-30\">\n <div class=\"w-10 h-10 rounded-lg bg-green-500\/20 flex items-center justify-center text-green-400\"><i data-lucide=\"activity\" class=\"w-5 h-5\"><\/i><\/div>\n <div><p class=\"text-[10px] uppercase font-bold text-slate-400 tracking-wider\">Status<\/p><p class=\"text-sm font-bold text-white\">System Online<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n\n \n <script>\n \/\/ Init Icons\n lucide.createIcons();\n\n \/\/ 1. NAVBAR SCROLL\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('navbar');\n const skew = document.getElementById('nav-skew');\n const logo = document.getElementById('nav-logo-container');\n \n if (window.scrollY > 10) {\n nav.classList.add('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n nav.classList.remove('bg-[#1379D1]');\n skew.style.width = '290px';\n logo.classList.replace('pl-10', 'pl-8');\n } else {\n nav.classList.add('bg-[#1379D1]');\n nav.classList.remove('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n skew.style.width = '360px';\n logo.classList.replace('pl-8', 'pl-10');\n }\n });\n\n \/\/ 1.5 SCROLL REVEAL\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n }\n });\n }, { threshold: 0.1 });\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n \/\/ 2. HERO CAROUSEL LOGIC\n const templates = [\n { id: 0, title: \"Glassmorphism\", category: \"Modern SaaS\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png\", icon: \"layers\", color: \"text-blue-400\", bg: \"bg-blue-500\", border: \"border-blue-500\/30\" },\n { id: 1, title: \"Biophilic\", category: \"Nature\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Biophilic.png\", icon: \"leaf\", color: \"text-emerald-400\", bg: \"bg-emerald-500\", border: \"border-emerald-500\/30\" },\n { id: 2, title: \"Neomemphis\", category: \"Marketing\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/Neomemphis.png\", icon: \"box\", color: \"text-yellow-400\", bg: \"bg-yellow-500\", border: \"border-yellow-500\/30\" },\n { id: 3, title: \"Dark Cinematic\", category: \"Storytelling\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/2.png\", icon: \"monitor\", color: \"text-purple-400\", bg: \"bg-purple-500\", border: \"border-purple-500\/30\" },\n { id: 4, title: \"Minimalism\", category: \"Corporate\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/3.png\", icon: \"layout\", color: \"text-slate-500\", bg: \"bg-slate-500\", border: \"border-slate-500\/30\" },\n { id: 5, title: \"Soft Glass\", category: \"Medical\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/1.png\", icon: \"droplet\", color: \"text-cyan-400\", bg: \"bg-cyan-500\", border: \"border-cyan-500\/30\" },\n { id: 6, title: \"Bauhaus\", category: \"Architecture\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Bauhaus_LIVRESQ.png\", icon: \"grid\", color: \"text-orange-400\", bg: \"bg-orange-500\", border: \"border-orange-500\/30\" },\n { id: 7, title: \"Black & Gold\", category: \"High-Tech\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Black_Gold.png\", icon: \"sparkles\", color: \"text-amber-400\", bg: \"bg-amber-500\", border: \"border-amber-500\/30\" }\n ];\n \n let activeIdx = 0;\n let mousePos = { x: 0, y: 0 };\n const heroContainer = document.getElementById('hero-section');\n const cardActive = document.getElementById('card-active');\n const cardPrev = document.getElementById('card-prev');\n const cardNext = document.getElementById('card-next');\n const imgActive = document.getElementById('img-active');\n const imgPrev = document.getElementById('img-prev');\n const imgNext = document.getElementById('img-next');\n const titleActive = document.getElementById('title-active');\n const iconContainer = document.getElementById('icon-container');\n const dotActive = document.getElementById('dot-active');\n const barActive = document.getElementById('bar-active');\n const textActive = document.getElementById('text-active');\n const badgeScorm = document.getElementById('badge-scorm');\n const badgeStart = document.getElementById('badge-start');\n\n function updateCarouselContent() {\n const active = templates[activeIdx];\n const prev = templates[(activeIdx - 1 + templates.length) % templates.length];\n const next = templates[(activeIdx + 1) % templates.length];\n\n \/\/ Update Images\n imgActive.src = active.img;\n imgPrev.src = prev.img;\n imgNext.src = next.img;\n\n \/\/ Update Texts & Classes\n titleActive.innerText = active.title;\n textActive.innerText = `template_${active.id}.html`;\n \n \/\/ Update Classes (remove old, add new)\n cardActive.className = `absolute top-1\/2 left-1\/2 w-[85%] aspect-video bg-[#1E293B] rounded-2xl shadow-2xl border-2 overflow-hidden transform-style-3d transition-transform duration-500 ease-out z-30 ${active.border}`;\n dotActive.className = `w-2 h-2 rounded-full animate-pulse ${active.bg}`;\n barActive.className = `h-1 w-16 rounded-full mt-2 ${active.bg}`;\n \n iconContainer.innerHTML = `<i data-lucide=\"${active.icon}\" class=\"w-4 h-4 ${active.color}\"><\/i>`;\n lucide.createIcons();\n }\n\n function updateCarousel3D() {\n \/\/ Apply 3D Transforms based on mousePos\n cardActive.style.transform = `translate(-50%, -50%) rotateX(${mousePos.y * -5}deg) rotateY(${mousePos.x * 5}deg) translateZ(50px)`;\n cardPrev.style.transform = `translate(0%, -20%) rotateX(${mousePos.y * -2}deg) rotateY(${mousePos.x * 2 + 15}deg) translateZ(-50px)`;\n cardNext.style.transform = `translate(0%, 10%) rotateX(${mousePos.y * -2}deg) rotateY(${mousePos.x * 2 - 15}deg) translateZ(-50px)`;\n \n \/\/ Badges Parallax\n badgeScorm.style.transform = `translateX(${mousePos.x * -20}px) translateY(${mousePos.y * -20}px) translateZ(-80px)`;\n badgeStart.style.transform = `translateX(${mousePos.x * 30}px) translateY(${mousePos.y * 30}px) translateZ(80px)`;\n }\n\n function nextSlide() { activeIdx = (activeIdx + 1) % templates.length; updateCarouselContent(); }\n function prevSlide() { activeIdx = (activeIdx - 1 + templates.length) % templates.length; updateCarouselContent(); }\n\n \/\/ Mouse Parallax Logic\n heroContainer.addEventListener('mousemove', (e) => {\n const rect = heroContainer.getBoundingClientRect();\n const xNorm = (e.clientX - rect.left - rect.width \/ 2) \/ (rect.width \/ 2);\n const yNorm = (e.clientY - rect.top - rect.height \/ 2) \/ (rect.height \/ 2);\n mousePos = { x: xNorm, y: yNorm };\n \n \/\/ Spotlight\n const spot = document.getElementById('hero-spotlight');\n spot.style.background = `radial-gradient(800px circle at ${e.clientX - rect.left}px ${e.clientY - rect.top}px, rgba(56, 189, 248, 0.1), transparent 40%)`;\n \n updateCarousel3D();\n });\n heroContainer.addEventListener('mouseleave', () => { \n mousePos = { x: 0, y: 0 }; \n updateCarousel3D(); \n });\n\n \/\/ Initialize\n updateCarouselContent();\n updateCarousel3D();\n setInterval(nextSlide, 5000);\n\n \/\/ 3. PARTNERS INFINITE SCROLL\n const partners = [\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/ING_B_LOGO.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_Logo_Livresq.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/3.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/4.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/5.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/6.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/7.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/8.png?fit=225%2C62&ssl=1\",\n \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/9.png?fit=225%2C62&ssl=1\", \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/10.png?fit=225%2C62&ssl=1\"\n ];\n const pTrack = document.getElementById('partners-track');\n [...partners, ...partners].forEach(src => {\n pTrack.innerHTML += `<div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity duration-300\"><img decoding=\"async\" src=\"${src}\" class=\"h-8 md:h-12 w-auto object-contain\"><\/div>`;\n });\n\n \/\/ 4. REVIEWS POPULATION\n const ALL_REVIEWS = [\n { name: \"Daniela-Cristina Balanescu\", time: \"2 weeks ago\", text: \"I have been using the Livresq platform for over a year. The materials created with the help of the platform proved to be particularly efficient, by gathering the main moments of a lesson in one place.\", initial: \"D\", color: \"blue\" },\n { name: \"Iustinica Teodora Dobric\u0103\", time: \"a month ago\", text: \"If you are looking for a solution to create digital, interactive, and attractive educational materials, then Livresq is an excellent choice. Livresq is incredibly intuitive.\", initial: \"I\", color: \"purple\" },\n { name: \"Paul Alexandru\", time: \"recent\", text: \"LIVRESQ simply captivated me. It is an educational tool that helps you be creative, develop professionally, and be closer to students.\", initial: \"P\", color: \"indigo\" },\n { name: \"Cornelia Nicolicea\", time: \"3 weeks ago\", text: \"My experience with Livresq was, surprisingly, very pleasant. The platform has an intuitive interface. The final result exceeded expectations.\", initial: \"C\", color: \"pink\" },\n { name: \"Dana Ioana Toma\", time: \"2 months ago\", text: \"I managed to create lessons that not only convey information but also stimulate curiosity. The satisfaction of seeing a finished product was worth all the effort.\", initial: \"D\", color: \"orange\" },\n { name: \"Elena Malu\u0219\", time: \"a week ago\", text: \"The Livresq.com platform is a valuable digital tool. One of the great advantages is the intuitive interface, which allows teachers to easily integrate text, images, videos, and quizzes.\", initial: \"E\", color: \"green\" },\n { name: \"Mihaela Stanciu\", time: \"3 days ago\", text: \"I was pleasantly surprised by everything I found on the LIVRESQ platform: structure, resources, guidance, patience, professionalism. I recommend it with confidence.\", initial: \"M\", color: \"teal\" },\n { name: \"Ioan Vasile\", time: \"4 months ago\", text: \"One of the great advantages is flexibility: you can integrate texts, images, audio, and video files. Livresq is a valuable tool that modernizes the teaching-learning process.\", initial: \"I\", color: \"blue\" },\n { name: \"Iuliana Ciubuc\", time: \"5 days ago\", text: \"Livresq is a revolutionary tool for teachers. Its vast library of resources and templates saves time and inspires creativity.\", initial: \"I\", color: \"cyan\" },\n { name: \"Gabriela Serban\", time: \"a month ago\", text: \"I particularly liked the fact that you can integrate a variety of multimedia resources. I warmly recommend the Livresq platform to all teachers.\", initial: \"G\", color: \"purple\" },\n { name: \"Simona Maria\", time: \"2 weeks ago\", text: \"The Livresq platform seems extremely useful for teachers and students. It is easy to use, even for those who do not have advanced IT knowledge.\", initial: \"S\", color: \"red\" },\n { name: \"Nita Victorita\", time: \"2 weeks ago\", text: \"I discovered LIVRESQ and I can say it completely changed the way I teach! Students are much more attentive and involved in classes.\", initial: \"N\", color: \"orange\" },\n { name: \"Geta Craciun\", time: \"3 months ago\", text: \"Livresq is an excellent platform. Technical support is prompt, and the user community is active and willing to help.\", initial: \"G\", color: \"pink\" },\n { name: \"Marinela Mihaila\", time: \"6 months ago\", text: \"Livresq is a revolutionary platform that transforms digital education. The diversity of templates stimulates creativity, facilitating content adaptation.\", initial: \"M\", color: \"indigo\" },\n { name: \"Andreea T\", time: \"2 months ago\", text: \"Livresq is an exceptional tool. The platform is intuitive and easy to use, allowing teachers to develop attractive lessons.\", initial: \"A\", color: \"green\" },\n { name: \"Iuliana Preda\", time: \"recent\", text: \"The Livresq platform is extremely useful and intuitive! It helped me create interactive educational materials in a simple and efficient way.\", initial: \"I\", color: \"blue\" },\n { name: \"Ana Maria David\", time: \"4 days ago\", text: \"Livresq is an excellent platform! I particularly appreciate the resource library and the possibility to customize materials according to class needs.\", initial: \"A\", color: \"teal\" },\n { name: \"Maria Ciobotaru\", time: \"2 weeks ago\", text: \"I believe that using materials created with Livresq in class will make lessons much more attractive, and students will retain information much more easily.\", initial: \"M\", color: \"yellow\" },\n { name: \"Camelia Mara\", time: \"3 months ago\", text: \"Livresq is a remarkable educational platform. The friendly interface facilitates the creation of interactive, engaging, and personalized lessons.\", initial: \"C\", color: \"purple\" },\n { name: \"Gabriela Donose\", time: \"a month ago\", text: \"The friendly interface allows easy creation of interactive and attractive lessons without requiring advanced technical knowledge. I recommend it with confidence!\", initial: \"G\", color: \"red\" },\n { name: \"Adriana Balaj\", time: \"5 months ago\", text: \"Livresq is an excellent educational platform. The varied resource library and prompt technical support are major advantages.\", initial: \"A\", color: \"cyan\" },\n { name: \"Madalina Hodorog\", time: \"2 weeks ago\", text: \"The Livresq platform is an extremely useful and innovative educational tool! It is an excellent solution for modernizing the teaching-learning process.\", initial: \"M\", color: \"indigo\" },\n { name: \"Anca Stefan\", time: \"a week ago\", text: \"Livresq is an excellent platform for creating interactive educational content! It is intuitive, easy to use, and offers a lot of creative options.\", initial: \"A\", color: \"green\" },\n { name: \"Mariana Oprea\", time: \"recent\", text: \"Livresq is an excellent platform for creating interactive educational materials. It is easy to use, intuitive, and very useful for teachers.\", initial: \"M\", color: \"blue\" },\n { name: \"Elena Gheorghe\", time: \"recent\", text: \"Livresq is an excellent platform for creating interactive educational content. The friendly interface and diverse resources make teaching much more attractive.\", initial: \"E\", color: \"pink\" },\n { name: \"Daniela Popescu\", time: \"3 days ago\", text: \"Livresq is an excellent, intuitive, and very useful platform for creating interactive educational content. I recommend it with confidence!\", initial: \"D\", color: \"orange\" },\n { name: \"Alina Matei\", time: \"4 days ago\", text: \"An intuitive and extremely useful platform for creating interactive educational content. I warmly recommend Livresq!\", initial: \"A\", color: \"teal\" },\n { name: \"Cristina Ionescu\", time: \"a week ago\", text: \"Livresq is an excellent, intuitive, and very useful platform for digital education. I recommend it with confidence!\", initial: \"C\", color: \"yellow\" },\n { name: \"Ana Popa\", time: \"2 weeks ago\", text: \"An excellent platform for creating interactive content! Very useful and easy to use.\", initial: \"A\", color: \"purple\" },\n { name: \"Maria Radu\", time: \"3 weeks ago\", text: \"Livresq is a wonderful tool for education. Interactive, modern, and easy to use!\", initial: \"M\", color: \"red\" },\n { name: \"Elena Dobre\", time: \"a month ago\", text: \"A great experience with Livresq! The platform is very well structured and useful.\", initial: \"E\", color: \"indigo\" },\n { name: \"Carmen Stanciu\", time: \"2 months ago\", text: \"Livresq offers unlimited creative possibilities. An indispensable tool for teachers!\", initial: \"C\", color: \"green\" },\n { name: \"Ioana Munteanu\", time: \"2 months ago\", text: \"Very satisfied with Livresq! A platform that eases teachers' work.\", initial: \"I\", color: \"blue\" },\n { name: \"Laura Dumitru\", time: \"3 months ago\", text: \"Livresq is the future of digital education. Simple, efficient, and creative!\", initial: \"L\", color: \"cyan\" },\n { name: \"Roxana Marin\", time: \"3 months ago\", text: \"A top-notch platform! I recommend Livresq to everyone passionate about education.\", initial: \"R\", color: \"pink\" },\n { name: \"Simona Ilie\", time: \"4 months ago\", text: \"Livresq helped me create wonderful lessons. Thank you for this resource!\", initial: \"S\", color: \"orange\" },\n { name: \"Mihaela Pop\", time: \"5 months ago\", text: \"An excellent tool, very easy to learn and use. Congratulations Livresq!\", initial: \"M\", color: \"teal\" },\n { name: \"Andreea Vasilescu\", time: \"6 months ago\", text: \"Livresq is the ideal partner in online education. I recommend it with full confidence!\", initial: \"A\", color: \"purple\" },\n { name: \"Diana Stoica\", time: \"6 months ago\", text: \"A complete and complex platform, yet very accessible. Bravo Livresq!\", initial: \"D\", color: \"red\" },\n { name: \"Cristina Voinea\", time: \"7 months ago\", text: \"Livresq turns learning into play. My students are delighted!\", initial: \"C\", color: \"blue\" }\n ];\n\n const COLOR_MAP = {\n \"blue\": \"bg-[#2563eb]\",\n \"purple\": \"bg-[#7c3aed]\",\n \"indigo\": \"bg-[#4f46e5]\",\n \"pink\": \"bg-[#db2777]\",\n \"orange\": \"bg-[#ea580c]\",\n \"green\": \"bg-[#059669]\",\n \"teal\": \"bg-[#0d9488]\",\n \"cyan\": \"bg-[#0891b2]\",\n \"yellow\": \"bg-[#ca8a04]\",\n \"red\": \"bg-[#dc2626]\"\n };\n\n const rGrid = document.getElementById('reviews-grid');\n \n \/\/ Shuffle and select 6\n const selectedReviews = ALL_REVIEWS.sort(() => 0.5 - Math.random()).slice(0, 6);\n\n selectedReviews.forEach(r => {\n const bgClass = COLOR_MAP[r.color] || \"bg-[#2563eb]\"; \/\/ Fallback blue\n \n \/\/ Build stars string\n const starsHtml = `<div class=\"flex text-amber-400 gap-0.5\"><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><i data-lucide=\"star\" class=\"w-3.5 h-3.5 fill-current\"><\/i><\/div>`;\n\n rGrid.innerHTML += `\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl h-full flex flex-col relative overflow-hidden group shadow-lg transition-all duration-300 hover:border-white\/10 hover:shadow-2xl hover:-translate-y-1\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\">\n <div class=\"w-12 h-12 rounded-full ${bgClass} flex items-center justify-center font-bold text-lg text-white shrink-0 shadow-lg border border-white\/10\">${r.initial}<\/div>\n <div class=\"flex flex-col pt-1\"><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">${r.name}<\/h4><div class=\"flex items-center gap-2\">${starsHtml}<span class=\"text-xs text-slate-500 font-medium\">${r.time}<\/span><\/div><\/div>\n <\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed font-normal flex-grow\">\"${r.text}\"<\/p>\n <\/div>\n <\/div>`;\n });\n\n \/\/ 5. CONSTELLATION CANVAS\n const canvas = document.getElementById('constellation-canvas');\n const ctx = canvas.getContext('2d');\n const starLabels = [\"LearningApps\", \"PhET\", \"Wordwall\", \"Quizlet\", \"StoryJumper\", \"Quizalize\", \"Jigsaw Planet\", \"SuperColoring\", \"SlideShare\", \"PurposeGames\", \"LiveWorksheets\", \"EdPuzzle\", \"JeopardyLabs\", \"Powtoon\", \"Flipsnack\", \"Im-a-puzzle\", \"Issuu\", \"Animaker\", \"StudyStack\", \"Voki\", \"Biteable\", \"Wheel of Names\", \"ThingLink\", \"Bookemon\", \"AnyFlip\", \"TinyTap\", \"GoConqr\", \"ProProfs\"];\n let stars = [];\n let mouse = { x: -1000, y: -1000 };\n\n function initStars() {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n stars = [];\n starLabels.forEach(label => {\n stars.push({ label, x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random()-0.5)*0.3, vy: (Math.random()-0.5)*0.3, size: Math.random()*2+1.5 });\n });\n for(let i=0; i<15; i++) stars.push({ label: \"\", x: Math.random()*canvas.width, y: Math.random()*canvas.height, vx: (Math.random()-0.5)*0.2, vy: (Math.random()-0.5)*0.2, size: Math.random()*1.5 });\n }\n initStars();\n window.addEventListener('resize', initStars);\n canvas.addEventListener('mousemove', e => { const r = canvas.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; });\n canvas.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\n\n function animateStars() {\n ctx.clearRect(0,0,canvas.width,canvas.height);\n stars.forEach((s, i) => {\n s.x += s.vx; s.y += s.vy;\n if(s.x<0||s.x>canvas.width) s.vx*=-1; if(s.y<0||s.y>canvas.height) s.vy*=-1;\n \n const distM = Math.hypot(s.x-mouse.x, s.y-mouse.y);\n const hover = distM < 200;\n \n ctx.beginPath(); ctx.arc(s.x, s.y, s.size, 0, Math.PI*2);\n ctx.fillStyle = hover ? '#D91278' : 'rgba(71,85,105,0.4)'; ctx.fill();\n \n if(s.label) {\n ctx.font = hover ? 'bold 13px Inter' : '11px Inter';\n ctx.fillStyle = hover ? '#0f172a' : 'rgba(71,85,105,0.4)';\n ctx.fillText(s.label, s.x+8, s.y+4);\n }\n if(hover) {\n ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(mouse.x, mouse.y);\n ctx.strokeStyle = `rgba(217,18,120,${1-distM\/200})`; ctx.lineWidth=1; ctx.stroke();\n }\n for(let j=i+1; j<stars.length; j++) {\n const s2 = stars[j];\n const d = Math.hypot(s.x-s2.x, s.y-s2.y);\n if(d<140) {\n ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(s2.x, s2.y);\n const la = (hover || Math.hypot(s2.x-mouse.x, s2.y-mouse.y)<200) ? 0.3 : 0.05;\n ctx.strokeStyle = `rgba(71,85,105,${la})`; ctx.lineWidth=0.5; ctx.stroke();\n }\n }\n });\n requestAnimationFrame(animateStars);\n }\n animateStars();\n\n \/\/ 6. TABS & TEMPLATES\n function switchTab(tab) {\n document.getElementById('content-business').classList.toggle('hidden', tab !== 'business');\n document.getElementById('content-academic').classList.toggle('hidden', tab !== 'academic');\n \n \/\/ Toggle Styles\n const btnBus = document.getElementById('tab-business');\n const btnAca = document.getElementById('tab-academic');\n if (tab === 'business') {\n btnBus.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 bg-livresq-fucsia text-white shadow-lg font-bold transform scale-105 border-none outline-none ring-0\";\n btnAca.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 text-slate-500 hover:text-slate-900 hover:bg-slate-50 font-medium border-none outline-none ring-0\";\n } else {\n btnAca.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 bg-blue-600 text-white shadow-lg font-bold transform scale-105 border-none outline-none ring-0\";\n btnBus.className = \"flex items-center gap-2 px-8 py-3 rounded-md text-sm transition-all duration-300 text-slate-500 hover:text-slate-900 hover:bg-slate-50 font-medium border-none outline-none ring-0\";\n }\n }\n\n \/\/ Populate Academic Column Feed\n const lessons = [\n { t: \"Pythagorean Theorem\", s: \"Math\", i: \"calculator\", c: \"bg-blue-100 text-blue-600\", l: \"Middle School\" },\n { t: \"Cell Structure\", s: \"Biology\", i: \"microscope\", c: \"bg-green-100 text-green-600\", l: \"High School\" },\n { t: \"Roman Dacia\", s: \"History\", i: \"book-open\", c: \"bg-amber-100 text-amber-600\", l: \"Primary\" },\n { t: \"Europe's Relief\", s: \"Geography\", i: \"globe-2\", c: \"bg-cyan-100 text-cyan-600\", l: \"Middle School\" },\n { t: \"Periodic Table\", s: \"Chemistry\", i: \"flask-conical\", c: \"bg-purple-100 text-purple-600\", l: \"High School\" },\n { t: \"Lyrical Genre\", s: \"Literature\", i: \"book-open-check\", c: \"bg-pink-100 text-pink-600\", l: \"High School\" },\n { t: \"Newton's Laws\", s: \"Physics\", i: \"activity\", c: \"bg-indigo-100 text-indigo-600\", l: \"Middle School\" },\n { t: \"Artistic Movements\", s: \"Arts\", i: \"palette\", c: \"bg-rose-100 text-rose-600\", l: \"High School\" }\n ];\n \/\/ Split lessons for columns\n const col1Lessons = lessons.slice(0, 4);\n const col2Lessons = lessons.slice(4);\n \n const acaCol1 = document.getElementById('aca-col-1');\n const acaCol2 = document.getElementById('aca-col-2');\n \n \/\/ Loop 3 times for seamless scroll\n [...col1Lessons, ...col1Lessons, ...col1Lessons].forEach(l => {\n acaCol1.innerHTML += `<div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm mb-4 flex items-start gap-3 hover:shadow-md hover:border-blue-200 transition-all cursor-default group\"><div class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${l.c}\"><i data-lucide=\"${l.i}\" class=\"w-4 h-4\"><\/i><\/div><div class=\"flex-1 min-w-0\"><div class=\"flex justify-between items-start\"><p class=\"text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-0.5\">${l.s}<\/p><span class=\"inline-block w-1.5 h-1.5 rounded-full bg-emerald-400\" title=\"Available\"><\/span><\/div><h4 class=\"font-bold text-slate-800 text-sm leading-tight truncate\">${l.t}<\/h4><div class=\"flex items-center gap-2 mt-2\"><span class=\"text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-medium\">${l.l}<\/span><span class=\"text-[10px] border border-slate-200 text-slate-400 px-2 py-0.5 rounded font-medium group-hover:border-blue-200 group-hover:text-blue-500 transition-colors\">Editable<\/span><\/div><\/div><\/div>`;\n });\n [...col2Lessons, ...col2Lessons, ...col2Lessons].forEach(l => {\n acaCol2.innerHTML += `<div class=\"bg-white p-4 rounded-xl border border-slate-100 shadow-sm mb-4 flex items-start gap-3 hover:shadow-md hover:border-blue-200 transition-all cursor-default group\"><div class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${l.c}\"><i data-lucide=\"${l.i}\" class=\"w-4 h-4\"><\/i><\/div><div class=\"flex-1 min-w-0\"><div class=\"flex justify-between items-start\"><p class=\"text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-0.5\">${l.s}<\/p><span class=\"inline-block w-1.5 h-1.5 rounded-full bg-emerald-400\" title=\"Available\"><\/span><\/div><h4 class=\"font-bold text-slate-800 text-sm leading-tight truncate\">${l.t}<\/h4><div class=\"flex items-center gap-2 mt-2\"><span class=\"text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-medium\">${l.l}<\/span><span class=\"text-[10px] border border-slate-200 text-slate-400 px-2 py-0.5 rounded font-medium group-hover:border-blue-200 group-hover:text-blue-500 transition-colors\">Editable<\/span><\/div><\/div><\/div>`;\n });\n\n \/\/ 7. PRICING LOGIC\n let billing = 'yearly';\n function toggleBilling() { billing = billing === 'monthly' ? 'yearly' : 'monthly'; updatePricing(); }\n function setBilling(mode) { billing = mode; updatePricing(); }\n \n function updatePricing() {\n const ball = document.getElementById('cycle-toggle-ball');\n const txtMon = document.getElementById('cycle-monthly');\n const txtYear = document.getElementById('cycle-yearly');\n \n \/\/ Toggle Visuals\n ball.className = `w-6 h-6 rounded-md bg-white shadow-md transform transition-transform duration-300 ${billing==='yearly' ? 'translate-x-8' : 'translate-x-0'}`;\n txtMon.className = `text-sm font-bold transition-colors cursor-pointer ${billing==='monthly' ? 'text-white' : 'text-slate-500'}`;\n txtYear.className = `text-sm font-bold transition-colors cursor-pointer ${billing==='yearly' ? 'text-white' : 'text-slate-500'}`;\n \n \/\/ Update Freelancer Content\n const priceFree = document.getElementById('price-free');\n const periodFree = document.getElementById('period-free');\n if(priceFree && periodFree) {\n priceFree.innerText = billing === 'yearly' ? '397\u20ac' : '39\u20ac';\n periodFree.innerText = billing === 'yearly' ? '\/ user \/ year' : '\/ user \/ month';\n }\n\n \/\/ Update Badges\n const badgeCorp = document.getElementById('badge-corp');\n const badgeAca = document.getElementById('badge-aca');\n if(badgeCorp && badgeAca) {\n if (billing === 'monthly') {\n badgeCorp.classList.remove('hidden');\n badgeAca.classList.remove('hidden');\n } else {\n badgeCorp.classList.add('hidden');\n badgeAca.classList.add('hidden');\n }\n }\n }\n \/\/ Initialize pricing state\n updatePricing();\n\n \/\/ 9. Industries Grid\n const inds = [\n { i: \"landmark\", t: \"Banking & Insurance\", d: \"Regulated sector & client\" }, { i: \"zap\", t: \"Energy\", d: \"Sustainability & e-Learning\" },\n { i: \"shopping-bag\", t: \"Retail & Consumer\", d: \"Sales & products\" }, { i: \"truck\", t: \"Logistics\", d: \"Operational safety\" },\n { i: \"cpu\", t: \"Technology\", d: \"Digital skills\" }, { i: \"factory\", t: \"Manufacturing\", d: \"Production & Safety\" },\n { i: \"headphones\", t: \"Services\", d: \"Quality management\" }\n ];\n const indGrid = document.getElementById('industry-grid');\n inds.forEach(ind => {\n indGrid.innerHTML += `<div class=\"flex items-center gap-3 p-3 rounded-xl hover:bg-white\/5 border border-transparent hover:border-white\/10 transition-all duration-300 cursor-default group\/item\"><div class=\"text-blue-300 bg-blue-500\/10 border border-blue-500\/20 p-2 rounded-lg group-hover\/item:bg-blue-500\/20 group-hover\/item:text-white transition-colors shrink-0 shadow-sm\"><i data-lucide=\"${ind.i}\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"text-sm font-bold text-white leading-tight\">${ind.t}<\/h4><p class=\"text-[11px] text-slate-500 mt-0.5 font-medium group-hover\/item:text-slate-400\">${ind.d}<\/p><\/div><\/div>`;\n });\n\n \/\/ 10. Edu Features\n const eduFeats = [\"Creation of OER (open educational resources)\", \"Creation of lessons and courses\", \"Digital textbooks\", \"Erasmus+ and eTwinning projects\", \"European Projects\", \"Approved interactive lessons\", \"National awareness campaigns\"];\n const eduDiv = document.getElementById('edu-features');\n eduFeats.forEach(txt => {\n eduDiv.innerHTML += `<div class=\"flex items-start gap-3 p-4 rounded-xl bg-slate-800\/50 border border-slate-700\/50 shadow-sm hover:border-slate-600 transition-colors cursor-default hover:bg-slate-800 group\"><div class=\"mt-0.5 p-0.5 rounded-full bg-green-500\/10 text-green-400 border border-green-500\/20 shrink-0 group-hover:scale-110 transition-transform\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span class=\"text-sm text-slate-300 font-bold leading-tight group-hover:text-white\">${txt}<\/span><\/div>`;\n });\n\n \/\/ Spotlight Logic for Groups\n document.querySelectorAll('.spotlight-group').forEach(group => {\n group.addEventListener('mousemove', (e) => {\n const cards = group.querySelectorAll('.spotlight-card');\n cards.forEach(card => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n card.style.setProperty('--mouse-x', `${x}px`);\n card.style.setProperty('--mouse-y', `${y}px`);\n });\n });\n });\n\n \/\/ Final Re-Init Icons for inserted content\n setTimeout(() => lucide.createIcons(), 100);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>LIVRESQ – eLearning Course Creator Community Blog Academic Training FAQ Buy About Us Library English My Account New 20 new business templates released Create stunning courses and lessons. Build SCORM and HTML5 compatible materials. No technical barriers. Start for Free View Features NO CARD REQUIRED SETUP IN 30 SEC Join 158,900+ creators from 7200+ institutions […]<\/p>\n","protected":false},"author":2,"featured_media":31483,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>eLearning Authoring Tool - LIVRESQ<\/title>\n<meta name=\"description\" content=\"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/livresq.com\/pl\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LIVRESQ - eLearning Authoring Made Simple\" \/>\n<meta property=\"og:description\" content=\"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/livresq.com\/pl\/\" \/>\n<meta property=\"og:site_name\" content=\"LIVRESQ\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T09:07:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"662\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"22 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/livresq.com\/\",\"url\":\"https:\/\/livresq.com\/\",\"name\":\"eLearning Authoring Tool - LIVRESQ\",\"isPartOf\":{\"@id\":\"https:\/\/livresq.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/livresq.com\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/livresq.com\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1\",\"datePublished\":\"2019-07-22T13:56:01+00:00\",\"dateModified\":\"2026-03-11T09:07:14+00:00\",\"description\":\"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.\",\"breadcrumb\":{\"@id\":\"https:\/\/livresq.com\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/livresq.com\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/livresq.com\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1\",\"width\":1600,\"height\":662},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/livresq.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Prima pagin\u0103\",\"item\":\"https:\/\/livresq.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"eLearning Authoring Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/livresq.com\/en\/#website\",\"url\":\"https:\/\/livresq.com\/en\/\",\"name\":\"LIVRESQ\",\"description\":\"eLearning Authoring Tool\",\"publisher\":{\"@id\":\"https:\/\/livresq.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/livresq.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/livresq.com\/en\/#organization\",\"name\":\"LIVRESQ - Authoring Tool\",\"url\":\"https:\/\/livresq.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\",\"width\":1054,\"height\":575,\"caption\":\"LIVRESQ - Authoring Tool\"},\"image\":{\"@id\":\"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Narz\u0119dzie do tworzenia tre\u015bci e-learningowych - LIVRESQ","description":"Tw\u00f3rz kursy e-learningowe lub interaktywne lekcje bezpo\u015brednio z przegl\u0105darki. Wszystko odbywa si\u0119 online, nie musisz niczego pobiera\u0107 ani instalowa\u0107.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/livresq.com\/pl\/","og_locale":"pl_PL","og_type":"article","og_title":"LIVRESQ - eLearning Authoring Made Simple","og_description":"Create your elearning courses or interactive lessons directly from the browser. Everything is done online, you do not have to download or install anything.","og_url":"https:\/\/livresq.com\/pl\/","og_site_name":"LIVRESQ","article_modified_time":"2026-03-11T09:07:14+00:00","og_image":[{"width":1600,"height":662,"url":"https:\/\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"22 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/livresq.com\/","url":"https:\/\/livresq.com\/","name":"Narz\u0119dzie do tworzenia tre\u015bci e-learningowych - LIVRESQ","isPartOf":{"@id":"https:\/\/livresq.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/livresq.com\/#primaryimage"},"image":{"@id":"https:\/\/livresq.com\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1","datePublished":"2019-07-22T13:56:01+00:00","dateModified":"2026-03-11T09:07:14+00:00","description":"Tw\u00f3rz kursy e-learningowe lub interaktywne lekcje bezpo\u015brednio z przegl\u0105darki. Wszystko odbywa si\u0119 online, nie musisz niczego pobiera\u0107 ani instalowa\u0107.","breadcrumb":{"@id":"https:\/\/livresq.com\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/livresq.com\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/livresq.com\/#primaryimage","url":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1","contentUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2020\/05\/LIVRESQ-elearning-courses.png?fit=1600%2C662&ssl=1","width":1600,"height":662},{"@type":"BreadcrumbList","@id":"https:\/\/livresq.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Prima pagin\u0103","item":"https:\/\/livresq.com\/"},{"@type":"ListItem","position":2,"name":"eLearning Authoring Tool"}]},{"@type":"WebSite","@id":"https:\/\/livresq.com\/en\/#website","url":"https:\/\/livresq.com\/en\/","name":"LIVRESQ","description":"Narz\u0119dzie do tworzenia e-learningu","publisher":{"@id":"https:\/\/livresq.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/livresq.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/livresq.com\/en\/#organization","name":"LIVRESQ - Narz\u0119dzie autorskie","url":"https:\/\/livresq.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1","contentUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1","width":1054,"height":575,"caption":"LIVRESQ - Authoring Tool"},"image":{"@id":"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":836,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":489835,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/pages\/17\/revisions\/489835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/media\/31483"}],"wp:attachment":[{"href":"https:\/\/livresq.com\/pl\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}