LIVRESQ – Creator de cursuri eLearning<\/title>\n <meta name=\"description\" content=\"Creeaz\u0103 cursuri eLearning \u0219i lec\u021bii interactive direct din browser. Nu necesit\u0103 instalare. Compatibil SCORM.\">\n \n \n <link rel=\"preload\" as=\"image\" href=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png\">\n <link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700;900&display=swap\" as=\"style\">\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 <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 1s 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-livresq-text antialiased bg-slate-50 flex flex-col min-h-screen selection:bg-fuchsia-500 selection:text-white\">\n\n \n <nav id=\"main-nav\" class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-[#1379D1] h-[48px]\">\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 id=\"nav-brand\" class=\"flex items-center flex-shrink-0 relative z-20 transition-all duration-500 pl-10\">\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\" id=\"nav-logo\" class=\"w-auto object-contain transition-all duration-300 drop-shadow-sm filter contrast-125 h-[32px]\">\n <\/a>\n \n <div class=\"ml-5 pl-5 border-l border-slate-200 h-8 flex items-center\">\n <a href=\"https:\/\/author.livresq.com\/\" target=\"_blank\" class=\"flex flex-col justify-center cursor-pointer group\/status\">\n <span class=\"text-[8px] font-extrabold text-slate-400 uppercase tracking-widest leading-none mb-1 group-hover\/status:text-blue-600 transition-colors\">Author este<\/span>\n <div class=\"flex items-center gap-1.5\">\n <div class=\"relative flex h-2 w-2\"><span class=\"animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-emerald-400\"><\/span><span class=\"relative inline-flex rounded-full h-2 w-2 bg-emerald-500\"><\/span><\/div>\n <span class=\"text-[10px] font-black uppercase tracking-widest leading-none text-emerald-600 group-hover\/status:underline\">Live<\/span>\n <\/div>\n <\/a>\n <\/div>\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] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Comunitate<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/blog\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Blog<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/academic\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Academic<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/training\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Training<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/faq\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">FAQ<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/pricing\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Cump\u0103r\u0103<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/despre-noi\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Despre noi<\/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\" style=\"filter: brightness(0) invert(1)\">\n <span class=\"text-[14px] font-bold\">Library<\/span>\n <\/a>\n \n <div class=\"relative group\/lang\">\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 border border-transparent focus:outline-none\">\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\" style=\"filter: brightness(0) invert(1)\"><span class=\"text-[14px] font-bold\">Rom\u00e2n\u0103<\/span><\/div>\n <i data-lucide=\"chevron-down\" class=\"w-4 h-4\"><\/i>\n <\/button>\n \n <div class=\"hidden absolute top-full right-0 mt-1 w-[140px] bg-white rounded-md shadow-lg border border-slate-200 py-1 z-50 overflow-hidden group-hover\/lang:block\">\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors font-bold text-[#1379D1]\">Rom\u00e2n\u0103<\/a>\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors text-slate-700\">English<\/a>\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors text-slate-700\">Deutsch<\/a>\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors text-slate-700\">Fran\u00e7ais<\/a>\n <\/div>\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 duration-300 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\" style=\"filter: brightness(0) invert(1)\">\n <span class=\"text-[14px] font-bold\">Contul Meu<\/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 hover:bg-white\/20 transition-colors\">\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\n <\/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 <div class=\"flex flex-col sm:flex-row items-start gap-4 mb-8 animate-fade-in-up\" style=\"animation-delay: 0.1s\">\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 cursor-pointer bg-white\/60 backdrop-blur-xl border border-white\/60 shadow-sm hover:shadow-md hover:bg-white hover:scale-105\">\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\">Nou<\/span>\n <span class=\"text-[13px] font-bold transition-colors text-slate-600 group-hover:text-livresq-fucsia\">20 noi \u0219abloane business lansate<\/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 <a href=\"https:\/\/livresq.com\/ro\/publish-library\/#:~:text=mii%20de%20utilizatori.-,Reguli%20de%20Publicare,-Pentru%20a%20asigura\" class=\"group inline-flex items-center p-1.5 pr-5 rounded-md transition-all duration-300 cursor-pointer bg-white\/60 backdrop-blur-xl border border-white\/60 shadow-sm hover:shadow-md hover:bg-white hover:scale-105\">\n <span class=\"px-3 py-1 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-[10px] font-bold rounded-md uppercase tracking-wide mr-3 shadow-sm group-hover:shadow-md transition-all\">INFO<\/span>\n <span class=\"text-[13px] font-bold transition-colors text-slate-600 group-hover:text-livresq-fucsia\">Reguli de publicare \u00een bibliotec\u0103<\/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 <\/div>\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 Creeaz\u0103 cursuri<br\/>\u0219i lec\u021bii <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia via-pink-600 to-purple-600\">superbe.<\/span>\n <\/h1>\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\">Construie\u0219te materiale compatibile SCORM \u0219i HTML5. F\u0103r\u0103 bariere tehnice.<\/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\/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\"><\/i> \u00cencepe Gratuit<\/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> Vezi Func\u021bionalit\u0103\u021bi\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> NU NECESIT\u0102 CARD<\/span>\n <span class=\"flex items-center gap-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-500\"><\/i> SETUP \u00ceN 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\">Al\u0103tur\u0103-te celor <strong class=\"text-slate-900\">158,900+ creatori<\/strong> din 7200+ institu\u021bii \u0219i companii<\/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\">Sus\u021binut de<\/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 <\/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 Vizite Lunare<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full h-1.5 min-h-[6px] bg-gradient-to-r from-fuchsia-100 via-[#D91278] to-fuchsia-100 shadow-sm relative z-20\" style=\"height: 6px; background: linear-gradient(90deg, #fae8ff 0%, #D91278 50%, #fae8ff 100%);\"><\/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\">Partener de \u00eencredere pentru Organiza\u021bii de TOP<\/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 \n <div class=\"flex animate-scroll items-center\" id=\"partners-track\">\n \n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/ING_B_LOGO.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_Logo_Livresq.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/3.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/4.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/5.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/6.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n \n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/ING_B_LOGO.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_Logo_Livresq.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/3.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/4.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/5.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/6.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-white border-b border-slate-200\">\n <div class=\"absolute top-0 right-0 w-[600px] h-[600px] 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-[600px] h-[600px] bg-purple-50 rounded-full blur-3xl opacity-60 -translate-x-1\/3 translate-y-1\/3 pointer-events-none\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"bg-slate-900 rounded-[2.5rem] p-8 md:p-12 lg:p-16 relative overflow-hidden shadow-2xl border border-slate-800 flex flex-col lg:flex-row items-center gap-12 lg:gap-16\">\n \n <div class=\"absolute inset-0 bg-gradient-to-br from-blue-600\/20 via-purple-600\/20 to-transparent opacity-50\"><\/div>\n <div class=\"absolute -top-24 -right-24 w-96 h-96 bg-blue-500\/30 rounded-full blur-3xl pointer-events-none\"><\/div>\n\n \n <div class=\"w-full lg:w-1\/2 relative z-10\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-blue-500\/20 border border-blue-500\/30 text-blue-300 text-xs font-bold uppercase tracking-widest mb-6 shadow-sm\">\n <i data-lucide=\"sparkles\" class=\"w-4 h-4\"><\/i>\n Nou: ASISTENT PEDAGOGIC\n <\/div>\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-6 font-heading leading-tight tracking-tight\">\n Lans\u0103m <span class=\"text-[#D91378]\">LIVRESQ<\/span> <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#D91378] to-[#76D1F2]\">Companion<\/span>\n <\/h2>\n <p class=\"text-sm md:text-base text-slate-300 mb-6 leading-relaxed font-medium\">\n LIVRESQ Companion a fost creat pentru a r\u0103spunde unei nevoi critice semnalate de cadrele didactice: supra\u00eenc\u0103rcarea administrativ\u0103 \u00eenainte de sus\u021binerea orelor la clas\u0103. \u00cen loc s\u0103 petreac\u0103 ore \u00eentregi cu sarcini repetitive, profesorii au acum un partener digital care \u00eei ajut\u0103 s\u0103 genereze con\u021binut structurat, <strong class=\"text-white bg-[#D91378]\/20 px-1.5 py-0.5 rounded border border-[#D91378]\/30\">conform programei \u0219colare<\/strong> din Rom\u00e2nia.\n <\/p>\n\n <div class=\"mb-6\">\n <h3 class=\"text-white font-bold mb-4 text-sm uppercase tracking-wider\">Func\u021bionalit\u0103\u021bi cheie pentru profesori:<\/h3>\n <ul class=\"flex flex-col gap-3\">\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Planificarea lec\u021biilor:<\/strong> Generarea rapid\u0103 de planuri de lec\u021bie coerente \u0219i adaptate.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Materiale de lucru instant:<\/strong> Crearea de fi\u0219e de lucru, propuneri de activit\u0103\u021bi \u0219i instrumente de evaluare (quizz-uri).<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Adaptarea con\u021binutului:<\/strong> Posibilitatea de a ajusta nivelul de dificultate al informa\u021biei \u00een func\u021bie de nivelul clasei.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Profil didactic personalizat:<\/strong> R\u0103spunsurile AI sunt calibrate conform disciplinei \u0219i stilului de predare al fiec\u0103rui utilizator.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n <div class=\"flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-900\/40 to-purple-900\/40 border border-[#76D1F2]\/20\">\n <i data-lucide=\"sparkles\" class=\"w-5 h-5 text-[#76D1F2] shrink-0\"><\/i>\n <span class=\"text-sm text-slate-200\">Un proiect sus\u021binut de Google: <strong class=\"text-white\">Inova\u021bie cu impact public (GovTech)<\/strong><\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 relative z-10 flex flex-col gap-6\">\n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl border border-white\/10 group transform transition-transform duration-500 hover:scale-[1.02]\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-900\/80 via-transparent to-transparent z-10 pointer-events-none\"><\/div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2026\/04\/Livresq-Companion-scaled.jpg?w=800&ssl=1\" alt=\"LIVRESQ Companion AI\" class=\"w-full h-auto object-cover relative z-0\" \/>\n <\/div>\n \n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-800\/50 p-4 rounded-xl border border-slate-700\/50\">\n <div class=\"text-slate-300 text-sm font-medium\">\n <span class=\"text-white font-bold\">09.04.2026<\/span> – data lans\u0103rii\n <\/div>\n <a href=\"https:\/\/livresq.com\/ro\/news\/lansare-livresq-companion\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center justify-center px-6 py-3 bg-white text-slate-900 font-bold rounded-md hover:bg-slate-100 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 group whitespace-nowrap\">\n Cite\u0219te anun\u021bul oficial\n <i data-lucide=\"arrow-right\" class=\"w-5 h-5 ml-2 text-slate-600 group-hover:translate-x-1 transition-transform\"><\/i>\n <\/a>\n <\/div>\n <\/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\">Pe baza a <strong class=\"text-white\">614 recenzii<\/strong> de 5 stele<\/p>\n <\/div>\n \n \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\">\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\"><div class=\"w-12 h-12 rounded-full bg-[#2563eb] flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">D<\/div><div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">Daniela-Cristina Balanescu<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">acum 2 s\u0103pt\u0103m\u00e2ni<\/span><\/div><\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">„Utilizez platforma Livresq de mai bine de un an. Materialele realizate cu ajutorul platformei s-au dovedit a fi deosebit de eficiente.”<\/p>\n <\/div>\n <\/div>\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\"><div class=\"w-12 h-12 rounded-full bg-[#0ea5e9] flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">P<\/div><div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">Paul Alexandru<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">recent<\/span><\/div><\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">„Pe mine LIVRESQ pur \u0219i simplu m-a furat. Este un instrument educa\u021bional care te ajut\u0103 s\u0103 fii creativ \u0219i s\u0103 te dezvol\u021bi profesional.”<\/p>\n <\/div>\n <\/div>\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\"><div class=\"w-12 h-12 rounded-full bg-[#7c3aed] flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">I<\/div><div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">Ioan Vasile<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">acum 4 luni<\/span><\/div><\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">„Unul dintre marile avantaje este flexibilitatea. Livresq este un instrument valoros care modernizeaz\u0103 procesul de predare-\u00eenv\u0103\u021bare.”<\/p>\n <\/div>\n <\/div>\n <\/div>\n\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\">Vezi toate recenziile pe 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\">Transparen\u021b\u0103 100% din partea utilizatorilor reali.<\/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\">Scor Capterra<\/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\">„Cel mai u\u0219or de folosit”<\/span><\/div>\n <\/div>\n <div class=\"h-20 w-auto relative group\/badge\"><img 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\" loading=\"lazy\" decoding=\"async\"><\/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\">Hub Centralizat<\/span>\n <\/div>\n <h2 class=\"text-4xl md:text-6xl font-black mb-8 leading-tight text-slate-900\">\n Nu renun\u021ba la nimic.<br\/>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Conecteaz\u0103 Totul.<\/span>\n <\/h2>\n <p class=\"text-slate-600 text-xl leading-relaxed mb-12\">\n LIVRESQ func\u021bioneaz\u0103 perfect cu uneltele pe care le iube\u0219ti deja. Integreaz\u0103 teste din <strong>Quizlet<\/strong>, video-uri din <strong>EdPuzzle<\/strong> sau simul\u0103ri <strong>PhET<\/strong> direct \u00een lec\u021biile tale, f\u0103r\u0103 ca elevul s\u0103 p\u0103r\u0103seasc\u0103 pagina.\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\">Embed Universal<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Dac\u0103 resursa ta are un cod „Embed” sau „Iframe”, func\u021bioneaz\u0103 \u00een LIVRESQ instantaneu.<\/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\">Flux Ne\u00eentrerupt<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Cursan\u021bii interac\u021bioneaz\u0103 cu resursele externe (ex: Wordwall, LearningApps) direct \u00een fereastra cursului.<\/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+ Platforme Validate<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">De la StoryJumper la Genially, am testat compatibilitatea ca tu s\u0103 nu ai surprize.<\/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\">Simplu. Rapid. Eficient.<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black mb-6 font-heading text-white tracking-tight text-glow-blue\">Cum func\u021bioneaz\u0103?<\/h2>\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto font-light leading-relaxed\">Transform\u0103 con\u021binutul educa\u021bional \u00een experien\u021be digitale \u00een doar 3 pa\u0219i simpli.<\/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. Autentificare<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Autentific\u0103-te direct din browser. F\u0103r\u0103 instal\u0103ri complicate. Totul este \u00een cloud, accesibil 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. Creeaz\u0103<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Folose\u0219te editorul drag-and-drop, import\u0103 resurse existente sau las\u0103 AI-ul s\u0103 genereze structura.<\/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. Public\u0103<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Export\u0103 pachetul SCORM sau HTML5 pentru orice LMS sau public\u0103 instant \u00een Biblioteca LIVRESQ.<\/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 smart-video\">\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 Exemplu \u0219ablon din editorul LIVRESQ\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\">\u0218abloane <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Premium<\/span><\/h2>\n <p class=\"text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed\">Alege din colec\u021bia noastr\u0103 vast\u0103 de \u0219abloane profesionale, optimizate pentru mediul Business \u0219i Academic. Design de top, gata de utilizare.<\/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\"><\/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\">Vezi toate \u0219abloanele <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> Bibliotec\u0103 Public\u0103 & RED<\/div>\n <h3 class=\"text-4xl md:text-5xl font-black text-slate-900 mb-6 leading-[1.15] tracking-tight\">Acces Gratuit la <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600\">17.000+ Surse<\/span><\/h3>\n <p class=\"text-lg text-slate-600 leading-relaxed font-medium\">Ai acces instant la peste <strong>20.000 de materiale educa\u021bionale gratuite<\/strong>. Exploreaz\u0103 o colec\u021bie \u00een continu\u0103 cre\u0219tere de lec\u021bii interactive, cursuri \u0219i Resurse Educa\u021bionale Deschise (RED).<\/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\">Surse Editabile<\/h4><\/div>\n <\/div>\n <p class=\"text-slate-600 font-medium border-t border-slate-100 pt-3 mt-1 text-sm\">Acceseaz\u0103, modific\u0103 \u0219i adapteaz\u0103 orice surs\u0103 pentru nevoile tale.<\/p>\n <\/div>\n <div class=\"pt-2\">\n <a href=\"https:\/\/livresq.com\/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 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> Caut\u0103 \u00een Bibliotec\u0103 <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\">Segmentare & Personalizare<\/span>\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-white mb-6 font-heading text-glow-blue\">LIVRESQ pentru Domeniul T\u0103u<\/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')\">Lunar<\/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')\">Anual<\/span>\n <\/div>\n <p class=\"text-slate-400 max-w-2xl mx-auto text-lg\">Platforma se adapteaz\u0103 nevoilor tale, oferind planuri \u0219i func\u021bionalit\u0103\u021bi specifice.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8 mb-16\">\n <div id=\"pricing-grid\" class=\"contents\"><\/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\">Companii & Traineri<\/h3><p class=\"text-xs text-blue-400 uppercase tracking-widest font-bold mt-1\">Solu\u021bii adaptate pe industrii<\/p><\/div>\n <\/div>\n <p class=\"text-slate-400 text-lg mb-10 max-w-2xl relative z-10 leading-relaxed\">Solu\u021bii complete de training adaptate pentru industrii specifice. De la procese reglementate bancare la protec\u021bia muncii \u00een fabrici.<\/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 a utilizat LIVRESQ pentru a personaliza cursurile interne, asigur\u00e2nd relevan\u021ba \u0219i alinierea perfect\u0103 cu obiectivele strategice ale organiza\u021biei. Am reu\u0219it cu Ascendia s\u0103 construim o rela\u021bie de parteneriat av\u00e2nd \u00een centrul acestei rela\u021bii preocuparea at\u00e2t a lor c\u00e2t \u0219i a noastr\u0103 pentru dezvoltarea competen\u021belor colegilor no\u0219tri.”<\/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\">Educa\u021bie<\/h3><p class=\"text-xs text-pink-400 uppercase tracking-widest font-bold mt-1\">K-12 & Universitati<\/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\">„Cel mai mult apreciem la LIVRESQ flexibilitatea \u0219i interactivitatea. Mul\u021bi dintre cei peste <strong class=\"text-pink-600\">20.000 de profesori<\/strong> \u00eenscri\u0219i au apreciat modul \u00een care a fost realizat cursul.”<\/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\">Func\u021bionalit\u0103\u021bi<\/h2><p class=\"text-slate-500 max-w-2xl mx-auto text-lg font-light\">Un ecosistem complet de unelte pentru orice scenariu educa\u021bional.<\/p><\/div>\n <div class=\"space-y-6 max-w-5xl mx-auto\" id=\"features-accordion\"><\/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><div class=\"absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-900\/20 rounded-full blur-[100px]\"><\/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)]\">Migrare U\u0219oar\u0103<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold mb-6 font-heading text-white text-glow-blue tracking-tight\">Import de Pachete <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 to-purple-400\">SCORM<\/span> existente<\/h2>\n <p class=\"text-lg text-slate-400 mb-10 leading-relaxed font-medium max-w-xl\">Ai con\u021binut blocat \u00een alte platforme (ex: Rise)? LIVRESQ \u00ee\u021bi ofer\u0103 libertatea de a importa \u0219i edita pachete exportate. Nu pierde munca anterioar\u0103 \u2013 transform-o.<\/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\">P\u0103streaz\u0103 Structura<\/h4><p class=\"text-xs text-slate-500 font-medium\">Import\u0103 organizarea capitolelor intact\u0103.<\/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\">Editare Complet\u0103<\/h4><p class=\"text-xs text-slate-500 font-medium\">Modific\u0103 texte, imagini \u0219i quiz-uri.<\/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\">Conversie Automat\u0103<\/h4><p class=\"text-xs text-slate-500 font-medium\">Transform\u0103 pachete statice \u00een proiecte LIVRESQ editabile \u00een c\u00e2teva minute.<\/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\">Conformitate & Standarde<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 font-heading leading-[1.15]\">Public\u0103 pachete <span class=\"text-blue-600\">Standard SCORM<\/span><\/h2>\n <p class=\"text-slate-600 leading-relaxed text-lg font-medium max-w-3xl mx-auto\">\u0218tim c\u0103 respectarea normelor este critic\u0103 pentru organiza\u021bii. LIVRESQ genereaz\u0103 cod nativ compatibil, asigur\u00e2nd o integrare irepro\u0219abil\u0103 cu orice LMS modern sau legacy.<\/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 smart-video\"><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\">Compatibilitate maxim\u0103 cu sisteme vechi \u0219i platforme legacy.<\/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\">Standardul de aur \u00een industrie. Raportare avansat\u0103 \u0219i secven\u021biere.<\/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\">Cea mai recent\u0103 versiune a standardului pentru platforme moderne.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section class=\"py-24 bg-midnight text-white spotlight-group relative overflow-hidden\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\n <span class=\"text-purple-300 font-bold tracking-widest uppercase text-xs border border-purple-500\/30 px-3 py-1 rounded-md bg-purple-900\/20 mb-6 inline-block shadow-sm\">Compatibilitate Universal\u0103<\/span>\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-white mb-6 font-heading text-glow-blue\">Se integreaz\u0103 cu peste 400 de LMS-uri!<\/h2>\n <p class=\"text-xl text-slate-400 leading-relaxed\">Cursurile create cu LIVRESQ sunt construite pentru a fi flexibile.<\/p>\n <\/div>\n <div class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4\" id=\"lms-grid\"><\/div>\n <div class=\"mt-12 text-center\"><a href=\"https:\/\/livresq.com\/my-account\/\" class=\"inline-flex items-center text-livresq-fucsia font-bold hover:text-white transition-colors group\">Testeaz\u0103 compatibilitatea acum <i data-lucide=\"arrow-right\" class=\"w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform\"><\/i><\/a><\/div>\n <\/div>\n <\/section>\n \n \n <section class=\"py-24 bg-slate-50 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-[#faed87]\/20 rounded-full blur-[120px] pointer-events-none translate-x-1\/3 -translate-y-1\/3\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#6fccf0]\/10 rounded-full blur-[100px] pointer-events-none -translate-x-1\/3 translate-y-1\/3\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"text-center mb-16\">\n <span class=\"bg-[#faed87] text-slate-900 font-black tracking-widest uppercase text-xs border border-[#faed87] px-4 py-1.5 rounded-md inline-block mb-6 shadow-md shadow-[#faed87]\/30\">Localizare Automat\u0103 \u0219i Interfa\u021b\u0103<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black text-slate-900 mb-6 font-heading leading-tight tracking-tight\">Un Singur Curs. <span class=\"text-[#D91278]\">Audien\u021b\u0103 Global\u0103.<\/span><\/h2>\n <p class=\"text-lg text-slate-600 leading-relaxed max-w-2xl mx-auto font-medium\">Func\u021bia de traducere automat\u0103 \u00ee\u021bi permite s\u0103 localizezi instantaneu tot con\u021binutul text din tot materialul. Creezi o dat\u0103, livrezi in orice limb\u0103.<\/p>\n <\/div>\n <div class=\"grid lg:grid-cols-5 gap-6\">\n <div class=\"lg:col-span-2 bg-slate-900 rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden flex flex-col justify-between group shadow-2xl shadow-slate-900\/20 border border-slate-800\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-[#D91278]\/20 via-transparent to-transparent opacity-50\"><\/div>\n <div class=\"absolute -bottom-20 -left-20 w-64 h-64 bg-[#D91278]\/30 rounded-full blur-3xl pointer-events-none\"><\/div>\n <div class=\"relative z-10\">\n <div class=\"w-14 h-14 bg-[#D91278] rounded-2xl flex items-center justify-center text-white mb-6 shadow-lg shadow-[#D91278]\/40 border border-[#D91278]\/50 group-hover:scale-110 transition-transform duration-300\"><i data-lucide=\"sparkles\" class=\"w-7 h-7\"><\/i><\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Traducere Automat\u0103<\/h3>\n <p class=\"text-slate-400 text-sm font-medium leading-relaxed mb-8\">Transform\u0103 automat un curs \u00eentreg \u00een alt\u0103 limb\u0103 cu un singur click. P\u0103streaz\u0103 formatarea \u0219i imaginile.<\/p>\n <\/div>\n <div class=\"relative z-10 mt-auto h-48 flex items-center justify-center perspective-1000\">\n <div class=\"absolute w-32 h-40 bg-slate-800 rounded-xl border border-slate-700 shadow-xl transform translate-x-12 rotate-6 opacity-60 flex flex-col p-3 animate-pulse-slow\"><div class=\"w-6 h-6 rounded-md bg-slate-700 mb-2 overflow-hidden border border-slate-600\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/flagcdn.com\/w40\/fr.png?w=800&ssl=1\" alt=\"FR\" class=\"w-full h-full object-cover\"><\/div><div class=\"space-y-2\"><div class=\"h-1.5 bg-slate-700 rounded w-full\"><\/div><div class=\"h-1.5 bg-slate-700 rounded w-2\/3\"><\/div><\/div><\/div>\n <div class=\"absolute w-32 h-40 bg-slate-800 rounded-xl border border-slate-700 shadow-xl transform -translate-x-12 -rotate-6 opacity-60 flex flex-col p-3 animate-pulse-slow\" style=\"animation-delay: 1s\"><div class=\"w-6 h-6 rounded-md bg-slate-700 mb-2 overflow-hidden border border-slate-600\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/flagcdn.com\/w40\/ro.png?w=800&ssl=1\" alt=\"RO\" class=\"w-full h-full object-cover\"><\/div><div class=\"space-y-2\"><div class=\"h-1.5 bg-slate-700 rounded w-full\"><\/div><div class=\"h-1.5 bg-slate-700 rounded w-2\/3\"><\/div><\/div><\/div>\n <div class=\"absolute w-36 h-44 bg-slate-800\/80 backdrop-blur-md rounded-xl border border-[#D91278]\/30 shadow-2xl shadow-[#D91278]\/20 flex flex-col p-4 transform transition-transform hover:-translate-y-2 duration-300\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#D91278] to-purple-500\"><\/div>\n <div class=\"flex justify-between items-center mb-4\">\n <div class=\"flex items-center gap-2\">\n <i data-lucide=\"refresh-ccw\" class=\"w-4 h-4 text-[#D91278] animate-spin-slow shrink-0\"><\/i>\n <span class=\"text-[10px] font-bold text-[#D91278] uppercase\">Translating<\/span>\n <\/div>\n <\/div>\n <div class=\"space-y-3\"><div class=\"h-2 bg-slate-600\/50 rounded w-full overflow-hidden relative\"><div class=\"absolute inset-0 bg-[#D91278]\/40 animate-[shimmer_2s_infinite]\"><\/div><\/div><div class=\"h-2 bg-slate-600\/50 rounded w-3\/4 overflow-hidden relative\"><div class=\"absolute inset-0 bg-[#D91278]\/40 animate-[shimmer_2s_infinite]\" style=\"animation-delay: 0.2s\"><\/div><\/div><div class=\"h-2 bg-slate-600\/50 rounded w-5\/6 overflow-hidden relative\"><div class=\"absolute inset-0 bg-[#D91278]\/40 animate-[shimmer_2s_infinite]\" style=\"animation-delay: 0.4s\"><\/div><\/div><\/div>\n <div class=\"mt-auto flex justify-end\"><div class=\"px-2 py-1 rounded bg-[#D91278]\/10 border border-[#D91278]\/20 text-[#D91278] text-[10px] font-bold\">AI Powered<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"lg:col-span-3 bg-[#6fccf0]\/10 border border-[#6fccf0]\/30 rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden shadow-xl shadow-[#6fccf0]\/10\">\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8 relative z-10\">\n <div class=\"flex items-center gap-4\"><div class=\"w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-[#6fccf0] shadow-md border border-[#6fccf0]\/20\"><i data-lucide=\"globe\" class=\"w-7 h-7\"><\/i><\/div><div><h3 class=\"text-2xl font-bold text-slate-900\">17 Limbi<\/h3><p class=\"text-slate-500 text-xs font-bold uppercase tracking-widest\">Interfa\u021b\u0103 Nativ\u0103<\/p><\/div><\/div>\n <div class=\"bg-[#faed87] text-slate-900 px-4 py-1.5 rounded-md font-black text-xs uppercase tracking-wide border border-yellow-300 shadow-sm transform rotate-2\">Disponibil Acum<\/div>\n <\/div>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 relative z-10\" id=\"lang-grid\"><\/div>\n <div class=\"mt-8 pt-6 border-t border-[#6fccf0]\/20 flex items-center gap-3 text-sm text-slate-500 font-medium\"><div class=\"bg-[#6fccf0] text-white p-1 rounded-md\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span>Utilizatorul poate s\u0103 foloseasc\u0103 interfa\u021ba \u00een limba lui nativ\u0103<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-midnight border-t border-slate-800 spotlight-group bg-grid-overlay\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"text-center mb-16\"><h2 class=\"text-sm font-bold text-blue-200\/50 uppercase tracking-widest mb-2\">Recunoa\u0219tere Interna\u021bional\u0103<\/h2><h3 class=\"text-2xl md:text-3xl font-extrabold text-white font-heading text-glow-blue\">Partener de \u00cencredere \u00een Ecosistemul European de Inovare<\/h3><\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <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 reveal delay-100\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <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\" \/><circle cx=\"4\" cy=\"4\" r=\"1\" class=\"opacity-50\" \/><circle cx=\"20\" cy=\"4\" r=\"1\" class=\"opacity-50\" \/><circle cx=\"4\" cy=\"20\" r=\"1\" class=\"opacity-50\" \/><circle cx=\"20\" cy=\"20\" r=\"1\" class=\"opacity-50\" \/><\/svg>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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\">Membru DEC<\/span><\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Comisia European\u0103<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Membru al Grupului de exper\u021bi pentru con\u021binut educa\u021bional digital (DEC) al Comisiei Europene, contribuind activ la standardizarea \u0219i modernizarea resurselor educa\u021bionale la nivelul Uniunii Europene.<\/p><\/div>\n <\/div>\n <\/div>\n \n <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 reveal delay-200\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <div class=\"absolute inset-0 opacity-10 pointer-events-none\"><div class=\"absolute bottom-0 right-10 w-8 h-48 bg-indigo-500\/20 transform skew-y-12\"><\/div><div class=\"absolute bottom-0 right-24 w-8 h-32 bg-indigo-500\/20 transform skew-y-12\"><\/div><div class=\"absolute bottom-0 right-38 w-8 h-64 bg-indigo-500\/20 transform skew-y-12\"><\/div><\/div>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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\">Furnizor Oficial<\/span><\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Consiliul Europei<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Platforma LIVRESQ este utilizat\u0103 pentru crearea \u0219i furnizarea de servicii pentru dezvoltarea \u0219i \u00eentre\u021binerea modulelor e-learning \u0219i servicii asociate de formare. Suntem furnizori oficiali ai Consiliului Europei.<\/p><\/div>\n <\/div>\n <\/div>\n \n <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 reveal delay-300\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <svg class=\"absolute top-0 right-0 w-full h-full text-emerald-500\/5 opacity-30 pointer-events-none\" viewBox=\"0 0 100 100\"><path d=\"M10,50 Q50,10 90,50 T10,50\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"0.5\" \/><path d=\"M10,60 Q50,20 90,60 T10,60\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"0.5\" \/><circle cx=\"50\" cy=\"50\" r=\"2\" fill=\"currentColor\" \/><circle cx=\"20\" cy=\"40\" r=\"1.5\" fill=\"currentColor\" \/><circle cx=\"80\" cy=\"40\" r=\"1.5\" fill=\"currentColor\" \/><\/svg>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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 pentru GovTech<\/span><\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Google Accelerator<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">LIVRESQ selectat pentru inova\u021bie \u00een sectorul public prin integrarea tehnologiilor avansate de Inteligen\u021b\u0103 Artificial\u0103 \u00een procesele educa\u021bionale.<\/p><\/div>\n <\/div>\n <\/div>\n \n <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 reveal delay-400\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <div class=\"absolute -right-8 -top-8 w-40 h-40 opacity-10 rotate-12\"><div class=\"grid grid-cols-2 gap-2 w-full h-full\"><div class=\"bg-sky-400\"><\/div><div class=\"bg-sky-400\"><\/div><div class=\"bg-sky-400\"><\/div><div class=\"bg-sky-400\"><\/div><\/div><\/div>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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>\n <h4 class=\"text-xl font-bold text-white mb-4\">Microsoft<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Recunoa\u0219tere global\u0103 pentru impactul LIVRESQ \u00een facilitarea accesului la educa\u021bie digital\u0103 pentru persoanele cu dizabilit\u0103\u021bi.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"py-24 bg-slate-50 border-t border-slate-200 overflow-hidden relative\">\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 justify-between items-end mb-16 gap-6\">\n <div class=\"max-w-3xl\"><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><h2 class=\"text-4xl md:text-5xl font-black text-slate-900 leading-tight font-heading\">Infrastructur\u0103 Blindat\u0103.<br\/><span class=\"text-emerald-600\">Zero Compromisuri.<\/span><\/h2><\/div>\n <div class=\"max-w-sm text-left md:text-right\"><p class=\"text-slate-500 font-medium text-sm leading-relaxed\">Construit pe standarde bancare. Auditat pentru conformitate GDPR. G\u0103zduit exclusiv \u00een UE.<\/p><\/div>\n <\/div>\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\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\">Infrastructur\u0103 Fizic\u0103<\/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\">Transport Date<\/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\">Stocare & Acces<\/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 class=\"flex flex-col gap-6\">\n <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\">\n <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>\n <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\">Proprietate 100%<\/h3><p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest mb-6\">Garan\u021bie Contractual\u0103<\/p><p class=\"text-slate-300 leading-relaxed font-medium mb-8\">Spre deosebire de alte platforme SaaS, LIVRESQ nu revendic\u0103 drepturi asupra con\u021binutului t\u0103u. Materialele create sunt activul companiei tale.<\/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>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n <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\">Audit Complet UE<\/p><\/div>\n <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\">Proiecte Private<\/h4><p class=\"text-xs text-slate-500\">Acces prin Link Securizat<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-midnight border-t border-slate-800 spotlight-group bg-grid-overlay\"><div class=\"max-w-3xl mx-auto px-4\"><div class=\"reveal\"><h2 class=\"text-3xl font-bold text-white text-center mb-12 text-glow-blue\">\u00centreb\u0103ri Frecvente<\/h2><div class=\"space-y-4\" id=\"faq-list\"><\/div><\/div><\/div><\/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 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 \n <div class=\"absolute inset-0 opacity-20 animate-[pulse_10s_infinite]\" style=\"background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px;\"><\/div>\n \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\">Al\u0103tur\u0103-te celor <span class=\"text-white\">158,000+<\/span> creatori<\/span><\/div>\n <h2 class=\"text-4xl md:text-6xl font-black text-white leading-[1.05] tracking-tight\">Transform\u0103 ideile \u00een <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-livresq-fucsia animate-gradient-x\">Experien\u021be Digitale.<\/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\">Acces instant. F\u0103r\u0103 instalare.<\/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\">Export SCORM compatibil cu orice 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\">Licen\u021b\u0103 gratuit\u0103 disponibil\u0103.<\/p><\/div>\n <\/div>\n <div class=\"flex flex-col sm:flex-row gap-4 pt-4\">\n <a href=\"https:\/\/livresq.com\/my-account\/\" class=\"relative inline-flex items-center justify-center px-8 py-4 text-base font-bold rounded-md 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\"><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> Creeaz\u0103 Cont Gratuit<\/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> G\u0103zduit Securizat \u00een Microsoft Azure, Europa<\/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 <script>\n \/\/ --- DATA CONSTANTS ---\n const REVIEWS_POOL = [\n { name: \"Daniela-Cristina Balanescu\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Utilizez platforma Livresq de mai bine de un an. Materialele realizate cu ajutorul platformei s-au dovedit a fi deosebit de eficiente, prin faptul c\u0103 au reunit \u00eentr-un singur loc momentele principale ale unei lec\u021bii.\", initial: \"D\", color: \"blue\" },\n { name: \"Iustinica Teodora Dobric\u0103\", time: \"acum o lun\u0103\", text: \"Dac\u0103 e\u0219ti \u00een c\u0103utarea unei solu\u021bii pentru a crea materiale educa\u021bionale digitale, interactive \u0219i atractive, atunci Livresq este o alegere excelent\u0103. Livresq este incredibil de intuitiv.\", initial: \"I\", color: \"purple\" },\n { name: \"Paul Alexandru\", time: \"recent\", text: \"Pe mine LIVRESQ pur \u0219i simplu m-a furat. Este un instrument educa\u021bional care te ajut\u0103 s\u0103 fii creativ, s\u0103 te dezvol\u021bi profesional \u0219i s\u0103 fii mai aproape de elevi.\", initial: \"P\", color: \"indigo\" },\n { name: \"Cornelia Nicolicea\", time: \"acum 3 s\u0103pt\u0103m\u00e2ni\", text: \"Experien\u021ba mea cu Livresq a fost, \u00een mod surprinz\u0103tor, foarte pl\u0103cut\u0103. Platforma are o interfa\u021b\u0103 intuitiv\u0103. Rezultatul final a fost peste a\u0219tept\u0103ri.\", initial: \"C\", color: \"pink\" },\n { name: \"Dana Ioana Toma\", time: \"acum 2 luni\", text: \"Am reu\u0219it s\u0103 creez lec\u021bii care nu doar c\u0103 transmit informa\u021bii, ci \u0219i stimuleaz\u0103 curiozitatea. Satisfac\u021bia de a vedea un produs finit a meritat tot efortul.\", initial: \"D\", color: \"orange\" },\n { name: \"Elena Malu\u0219\", time: \"acum o s\u0103pt\u0103m\u00e2n\u0103\", text: \"Platforma Livresq.com este un instrument digital valoros. Unul dintre marile avantaje este interfa\u021ba intuitiv\u0103, care permite profesorilor s\u0103 integreze cu u\u0219urin\u021b\u0103 text, imagini, videoclipuri \u0219i chestionare.\", initial: \"E\", color: \"green\" },\n { name: \"Mihaela Stanciu\", time: \"acum 3 zile\", text: \"Am fost pl\u0103cut surprins\u0103 de tot ceea ce am g\u0103sit pe platforma LIVRESQ: structur\u0103, resurse, \u00eendrumare, r\u0103bdare, profesionalism. Recomand cu \u00eencredere.\", initial: \"M\", color: \"teal\" },\n { name: \"Ioan Vasile\", time: \"acum 4 luni\", text: \"Unul dintre marile avantaje este flexibilitatea: po\u021bi integra texte, imagini, fi\u0219iere audio \u0219i video. Livresq este un instrument valoros care modernizeaz\u0103 procesul de predare-\u00eenv\u0103\u021bare.\", initial: \"I\", color: \"blue\" },\n { name: \"Iuliana Ciubuc\", time: \"acum 5 zile\", text: \"Livresq este un instrument revolu\u021bionar pentru cadrele didactice. Biblioteca sa vast\u0103 de resurse \u0219i \u0219abloane economise\u0219te timp \u0219i inspir\u0103 creativitatea.\", initial: \"I\", color: \"cyan\" },\n { name: \"Gabriela Serban\", time: \"acum o lun\u0103\", text: \"Mi-a placut in mod deosebit faptul ca poti integra o varietate de resurse multimedia. Recomand cu caldura platforma Livresq tuturor profesorilor.\", initial: \"G\", color: \"purple\" },\n { name: \"Simona Maria\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Platforma Livresq mi se pare extrem de util\u0103 pentru profesori \u0219i elevi. Este u\u0219or de folosit, chiar \u0219i pentru cei care nu au cuno\u0219tin\u021be avansate de IT.\", initial: \"S\", color: \"red\" },\n { name: \"Nita Victorita\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Am descoperit LIVRESQ \u0219i pot spune c\u0103 mi-a schimbat complet modul de a preda! Elevii sunt mult mai aten\u021bi \u0219i implica\u021bi la ore.\", initial: \"N\", color: \"orange\" },\n { name: \"Geta Craciun\", time: \"acum 3 luni\", text: \"Livresq este o platform\u0103 excelent\u0103. Suportul tehnic este prompt, iar comunitatea de utilizatori este activ\u0103 \u0219i dispus\u0103 s\u0103 ajute.\", initial: \"G\", color: \"pink\" },\n { name: \"Marinela Mihaila\", time: \"acum 6 luni\", text: \"Livresq este o platform\u0103 revolu\u021bionar\u0103 care transform\u0103 educa\u021bia digital\u0103. Diversitatea \u0219abloanelor stimuleaz\u0103 creativitatea, facilit\u00e2nd adaptarea con\u021binutului.\", initial: \"M\", color: \"indigo\" },\n { name: \"Andreea T\", time: \"acum 2 luni\", text: \"Livresq este un instrument excep\u021bional. Platforma este intuitiv\u0103 \u0219i u\u0219or de utilizat, permi\u021b\u00e2nd profesorilor s\u0103 dezvolte lec\u021bii atractive.\", initial: \"A\", color: \"green\" },\n { name: \"Iuliana Preda\", time: \"recent\", text: \"Platforma Livresq este extrem de util\u0103 \u0219i intuitiv\u0103! M-a ajutat s\u0103 creez materiale educa\u021bionale interactive \u00eentr-un mod simplu \u0219i eficient.\", initial: \"I\", color: \"blue\" },\n { name: \"Ana Maria David\", time: \"acum 4 zile\", text: \"Livresq este o platform\u0103 excelent\u0103! Apreciez \u00een mod deosebit biblioteca de resurse \u0219i posibilitatea de a personaliza materialele \u00een func\u021bie de nevoile clasei.\", initial: \"A\", color: \"teal\" },\n { name: \"Maria Ciobotaru\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Cred c\u0103 utilizarea la clas\u0103 a materialelor create cu ajutorul Livresq va face lec\u021biile mult mai atractive, iar elevii vor re\u021bine mult mai u\u0219or informa\u021biile transmise.\", initial: \"M\", color: \"yellow\" },\n { name: \"Camelia Mara\", time: \"acum 3 luni\", text: \"Livresq este o platform\u0103 educa\u021bional\u0103 remarcabil\u0103. Interfa\u021ba prietenoas\u0103 faciliteaz\u0103 crearea de lec\u021bii interactive, captivante \u0219i personalizate.\", initial: \"C\", color: \"purple\" },\n { name: \"Gabriela Donose\", time: \"acum o lun\u0103\", text: \"Interfa\u021ba prietenoas\u0103 permite crearea u\u0219oar\u0103 de lec\u021bii interactive \u0219i atractive, f\u0103r\u0103 a necesita cuno\u0219tin\u021be tehnice avansate. Recomand cu \u00eencredere!\", initial: \"G\", color: \"red\" },\n { name: \"Adriana Balaj\", time: \"acum 5 luni\", text: \"Livresq este o platform\u0103 educa\u021bional\u0103 excelent\u0103. Biblioteca variat\u0103 de resurse \u0219i suportul tehnic prompt sunt mari avantaje.\", initial: \"A\", color: \"cyan\" },\n { name: \"Madalina Hodorog\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Platforma Livresq este un instrument educa\u021bional extrem de util \u0219i inovator! Este o solu\u021bie excelent\u0103 pentru modernizarea procesului de predare-\u00eenv\u0103\u021bare.\", initial: \"M\", color: \"indigo\" },\n { name: \"Anca Stefan\", time: \"acum o s\u0103pt\u0103m\u00e2n\u0103\", text: \"Livresq este o platform\u0103 excelent\u0103 pentru crearea de con\u021binut educa\u021bional interactiv! Este intuitiv\u0103, u\u0219or de folosit \u0219i ofer\u0103 o mul\u021bime de op\u021biuni creative.\", initial: \"A\", color: \"green\" },\n { name: \"Mariana Oprea\", time: \"recent\", text: \"Livresq este o platform\u0103 excelent\u0103 pentru crearea de materiale educa\u021bionale interactive. Este u\u0219or de folosit, intuitiv\u0103 \u0219i foarte util\u0103 pentru profesori.\", initial: \"M\", color: \"blue\" },\n { name: \"Elena Gheorghe\", time: \"recent\", text: \"Livresq este o platform\u0103 excelent\u0103 pentru crearea de con\u021binut educa\u021bional interactiv. Interfa\u021ba prietenoas\u0103 \u0219i resursele diverse fac predarea mult mai atractiv\u0103.\", initial: \"E\", color: \"pink\" },\n { name: \"Daniela Popescu\", time: \"acum 3 zile\", text: \"Livresq este o platform\u0103 excelent\u0103, intuitiv\u0103 \u0219i foarte util\u0103 pentru crearea de con\u021binut educa\u021bional interactiv. Recomand cu \u00eencredere!\", initial: \"D\", color: \"orange\" },\n { name: \"Alina Matei\", time: \"acum 4 zile\", text: \"O platform\u0103 intuitiv\u0103 \u0219i extrem de util\u0103 pentru crearea de con\u021binut educa\u021bional interactiv. Recomand cu drag Livresq!\", initial: \"A\", color: \"teal\" },\n { name: \"Cristina Ionescu\", time: \"acum o s\u0103pt\u0103m\u00e2n\u0103\", text: \"Livresq este o platform\u0103 excelent\u0103, intuitiv\u0103 \u0219i foarte util\u0103 pentru educa\u021bia digital\u0103. Recomand cu \u00eencredere!\", initial: \"C\", color: \"yellow\" },\n { name: \"Ana Popa\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"O platform\u0103 excelent\u0103 pentru crearea de con\u021binut interactiv! Foarte util\u0103 \u0219i u\u0219or de folosit.\", initial: \"A\", color: \"purple\" },\n { name: \"Maria Radu\", time: \"acum 3 s\u0103pt\u0103m\u00e2ni\", text: \"Livresq este un instrument minunat pentru educa\u021bie. Interactiv, modern \u0219i u\u0219or de utilizat!\", initial: \"M\", color: \"red\" },\n { name: \"Elena Dobre\", time: \"acum o lun\u0103\", text: \"O experien\u021b\u0103 grozav\u0103 cu Livresq! Platforma este foarte bine structurat\u0103 \u0219i util\u0103.\", initial: \"E\", color: \"indigo\" },\n { name: \"Carmen Stanciu\", time: \"acum 2 luni\", text: \"Livresq ofer\u0103 posibilit\u0103\u021bi nelimitate de crea\u021bie. Un instrument indispensabil pentru profesori!\", initial: \"C\", color: \"green\" },\n { name: \"Ioana Munteanu\", time: \"acum 2 luni\", text: \"Foarte mul\u021bumit\u0103 de Livresq! O platform\u0103 care u\u0219ureaz\u0103 munca profesorilor.\", initial: \"I\", color: \"blue\" },\n { name: \"Laura Dumitru\", time: \"acum 3 luni\", text: \"Livresq este viitorul educa\u021biei digitale. Simplu, eficient \u0219i creativ!\", initial: \"L\", color: \"cyan\" },\n { name: \"Roxana Marin\", time: \"acum 3 luni\", text: \"O platform\u0103 de nota 10! Recomand Livresq tuturor celor pasiona\u021bi de educa\u021bie.\", initial: \"R\", color: \"pink\" },\n { name: \"Simona Ilie\", time: \"acum 4 luni\", text: \"Livresq m-a ajutat s\u0103 creez lec\u021bii minunate. Mul\u021bumesc pentru aceast\u0103 resurs\u0103!\", initial: \"S\", color: \"orange\" },\n { name: \"Mihaela Pop\", time: \"acum 5 luni\", text: \"Un instrument excelent, foarte u\u0219or de \u00eenv\u0103\u021bat \u0219i utilizat. Felicit\u0103ri Livresq!\", initial: \"M\", color: \"teal\" },\n { name: \"Andreea Vasilescu\", time: \"acum 6 luni\", text: \"Livresq este partenerul ideal \u00een educa\u021bia online. Recomand cu toat\u0103 \u00eencrederea!\", initial: \"A\", color: \"purple\" },\n { name: \"Diana Stoica\", time: \"acum 6 luni\", text: \"O platform\u0103 complet\u0103 \u0219i complex\u0103, dar foarte accesibil\u0103. Bravo Livresq!\", initial: \"D\", color: \"red\" },\n { name: \"Cristina Voinea\", time: \"acum 7 luni\", text: \"Livresq transform\u0103 \u00eenv\u0103\u021barea \u00eentr-o joac\u0103. Elevii mei sunt \u00eenc\u00e2nta\u021bi!\", initial: \"C\", color: \"blue\" }\n ];\n const PARTNERS = [\"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\",\"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\",\"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\",\"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\",\"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\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/11.png?fit=225%2C62&ssl=1\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/12.png?fit=225%2C62&ssl=1\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/13.png?fit=225%2C62&ssl=1\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/14.png?fit=225%2C62&ssl=1\"];\n \n \/\/ UPDATED TEMPLATES ARRAY (ALL 8 ITEMS)\n const TEMPLATES = [\n { title: \"Glassmorphism\", subtitle: \"Modern & Intuitiv\", desc: \"Design modern cu efecte de sticl\u0103 \u0219i culori vii. Ideal pentru onboarding \u0219i prezent\u0103ri de produs.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e920017749000957c1aa\" },\n { title: \"Neomemphis\", subtitle: \"\u00cendr\u0103zne\u021b & Energic\", desc: \"Forme geometrice \u0219i culori energice. Perfect pentru traininguri de \\\"soft skills\\\", experien\u021ba clien\u021bilor \u0219i conformitate.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/Neomemphis.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e890017749000957c1a8\" },\n { title: \"Dark Cinematic\", subtitle: \"Impact Dramatic\", desc: \"Contrast ridicat \u0219i iluminare dramatic\u0103. Excelent pentru storytelling, lans\u0103ri de produse premium \u0219i scenarii de v\u00e2nz\u0103ri.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/2.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e95d017749000957c1ab\" },\n { title: \"Minimalism\", subtitle: \"Claritate & Eficien\u021b\u0103\", desc: \"Linii curate, spa\u021bii albe ample \u0219i elemente naturale. Ideal pentru practici sustenabile, gestiune inventar \u0219i siguran\u021b\u0103.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/3.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/688dbbb6017749000957b87a\" },\n { title: \"Soft Glass Realism\", subtitle: \"Elegan\u021b\u0103 & Textur\u0103\", desc: \"Panouri subtile din sticl\u0103 mat\u0103 \u0219i palet\u0103 proasp\u0103t\u0103. Potrivit pentru micro\u00eenv\u0103\u021bare sezonier\u0103 \u0219i programe de cultur\u0103.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/1.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e837017749000957c1a4\" },\n { title: \"Bauhaus\", subtitle: \"Geometric & Func\u021bional\", desc: \"Stil geometric \u00eendr\u0103zne\u021b cu contrast puternic. Structur\u0103 clar\u0103, ideal\u0103 pentru cursuri corporate.\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Bauhaus_LIVRESQ.png\", link: \"https:\/\/library.livresq.com\/details\/6942858d507a550009c83e64\" },\n { title: \"Black and Gold\", subtitle: \"\u0218tiin\u021b\u0103 High-Tech\", desc: \"Elegan\u021b\u0103 \u00een dark-mode cu accente aurii \u0219i layout \u0219tiin\u021bific. Perfect pentru farma \u0219i biotech.\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Black_Gold.png\", link: \"https:\/\/library.livresq.com\/details\/693aac01507a550009c815eb\" },\n { title: \"Biophilic\", subtitle: \"Organic & Natural\", desc: \"Design organic ce \u00eembin\u0103 natura cu medicina. Fotografii botanice pentru cursuri de s\u0103n\u0103tate.\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Biophilic.png\", link: \"https:\/\/library.livresq.com\/details\/6941208f507a550009c837b0\" }\n ];\n\n \/\/ HERO CAROUSEL DATA (Matches React)\n const HERO_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: \"Natur\u0103\", 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: \"Arhitectur\u0103\", 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 heroActiveIndex = 0;\n let heroMouse = { x: 0, y: 0 };\n \n \/\/ Pricing Data\n const PRICING = {\n monthly: [\n { id: \"corporate\", title: \"Corporate & L&D\", sub: \"PENTRU COMPANII\", desc: \"Digitalizeaz\u0103 induction-ul \u0219i trainingurile de compliance. Raportare SCORM complet\u0103.\", price: \"845.79\u20ac\", period: \"\/ seat \/ an\", features: [\"Gestionare seats echip\u0103\", \"Onboarding & Training\", \"Customer success dedicat\"], color: \"blue\", icon: \"building-2\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Enterprise Premium\", annualOnly: true },\n { id: \"academic\", title: \"Academic & K-12\", sub: \"PENTRU PROFESORI\", desc: \"Creeaz\u0103 lec\u021bii care \u021bin elevii aten\u021bi. Acceseaz\u0103 biblioteca public\u0103 cu resurse gratuite.\", price: \"35.26\u20ac\", period: \"\/ utilizator \/ an\", features: [\"Num\u0103r de proiecte nelimitat\", \"Licen\u021be Academice Subven\u021bionate\", \"Biblioteca cu peste 17k Surse de materiale educa\u021bionale\"], color: \"pink\", icon: \"graduation-cap\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaza Cont Academic Premium\", subz: true, annualOnly: true },\n { id: \"freelancer\", title: \"Freelancers\", sub: \"PENTRU INDEPENDEN\u021aI\", desc: \"Livreaz\u0103 proiecte clien\u021bilor rapid. F\u0103r\u0103 instalare, lucrezi de oriunde.\", price: \"39\u20ac\", period: \"\/ utilizator \/ lun\u0103\", features: [\"Num\u0103r de proiecte nelimitat\", \"Personalizare cu orice sigle dore\u0219ti\", \"Faci ce vrei cu materialul creat, \u00eel vinzi, \u00eel oferi gratuit, e alegerea ta\"], color: \"orange\", icon: \"pen-tool\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Freelance Premium\" }\n ],\n yearly: [\n { id: \"corporate\", title: \"Corporate & L&D\", sub: \"PENTRU COMPANII\", desc: \"Digitalizeaz\u0103 induction-ul \u0219i trainingurile de compliance. Raportare SCORM complet\u0103.\", price: \"845.79\u20ac\", period: \"\/ seat \/ an\", features: [\"Gestionare seats echip\u0103\", \"Onboarding & Training\", \"Customer success dedicat\"], color: \"blue\", icon: \"building-2\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Enterprise Premium\" },\n { id: \"academic\", title: \"Academic & K-12\", sub: \"PENTRU PROFESORI\", desc: \"Creeaz\u0103 lec\u021bii care \u021bin elevii aten\u021bi. Acceseaz\u0103 biblioteca public\u0103 cu resurse gratuite.\", price: \"35.26\u20ac\", period: \"\/ utilizator \/ an\", features: [\"Num\u0103r de proiecte nelimitat\", \"Licen\u021be Academice Subven\u021bionate\", \"Biblioteca cu peste 17k Surse de materiale educa\u021bionale\"], color: \"pink\", icon: \"graduation-cap\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaza Cont Academic Premium\", subz: true },\n { id: \"freelancer\", title: \"Freelancers\", sub: \"PENTRU INDEPENDEN\u021aI\", desc: \"Livreaz\u0103 proiecte clien\u021bilor rapid. F\u0103r\u0103 instalare, lucrezi de oriunde.\", price: \"397\u20ac\", period: \"\/ utilizator \/ an\", features: [\"Num\u0103r de proiecte nelimitat\", \"Personalizare cu orice sigle dore\u0219ti\", \"Faci ce vrei cu materialul creat, \u00eel vinzi, \u00eel oferi gratuit, e alegerea ta\"], color: \"orange\", icon: \"pen-tool\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Freelance Premium\" }\n ]\n };\n\n const pricingThemes = {\n blue: { \n accent: 'bg-blue-500', \n glow: 'shadow-[0_0_30px_rgba(59,130,246,0.1)]', \n iconBg: 'bg-blue-500\/10 text-blue-400 border-blue-500\/20', \n badge: 'border-blue-500\/30 text-blue-300 bg-blue-500\/10', \n btn: 'bg-blue-600 hover:bg-blue-500' \n },\n pink: { \n accent: 'bg-livresq-fucsia', \n glow: 'shadow-[0_0_30px_rgba(217,18,120,0.1)]', \n iconBg: 'bg-pink-500\/10 text-pink-400 border-pink-500\/20', \n badge: 'border-pink-500\/30 text-pink-300 bg-pink-500\/10', \n btn: 'bg-livresq-fucsia hover:bg-pink-500' \n },\n orange: { \n accent: 'bg-orange-500', \n glow: 'shadow-[0_0_30px_rgba(249,115,22,0.1)]', \n iconBg: 'bg-orange-500\/10 text-orange-400 border-orange-500\/20', \n badge: 'border-orange-500\/30 text-orange-300 bg-orange-500\/10', \n btn: 'bg-orange-600 hover:bg-orange-500' \n }\n };\n\n const INDUSTRY_CARDS = [\n {icon: 'landmark', title: \"B\u0103nci & Asigur\u0103ri\", desc: \"Sector reglementat & client\"}, {icon: 'zap', title: \"Energie\", desc: \"Sustenabilitate & e-Learning\"}, \n {icon: 'shopping-bag', title: \"Retail & Consumer\", desc: \"V\u00e2nz\u0103ri & produse\"}, {icon: 'truck', title: \"Logistic\u0103\", desc: \"Siguran\u021b\u0103 opera\u021bional\u0103\"},\n {icon: 'cpu', title: \"Tehnologie\", desc: \"Competen\u021be digitale\"}, {icon: 'factory', title: \"Industrie\", desc: \"Produc\u021bie & Protec\u021bia Muncii\"},\n {icon: 'headphones', title: \"Servicii\", desc: \"Managementul calit\u0103\u021bii\"}\n ];\n const EDU_FEATURES = [\"Creare de RED (resurse educa\u021bionale deschise)\", \"Creare de lec\u021bii si cursuri\", \"Manuale digitale\", \"Proiecte Erasmus+ \u0219i eTwinning\", \"Proiecte Europene\", \"Lectii interactive omologate\", \"Campanii na\u021bionale de con\u0219tientizare\"];\n const FAQ = [\n {q: \"Pot s\u0103 \u00eencep gratuit?\", a: \"Da, oferim o licen\u021b\u0103 gratuit\u0103, cu acces la func\u021bionalit\u0103\u021bi de baz\u00e2. Nu trebuie card.\"}, {q: \"Func\u021bioneaz\u0103 pe orice LMS?\", a: \"Da, pachetele exportate din LIVRESQ sunt compatibile cu standardele SCORM 1.2 \u0219i 2004.\"},\n {q: \"Trebuie s\u0103 instalez ceva?\", a: \"Nu. LIVRESQ este o solu\u021bie bazat\u0103 pe cloud \u0219i ruleaz\u0103 100% \u00een browser.\"}, {q: \"Ce se \u00eent\u00e2mpl\u0103 cu materialele mele?\", a: \"Materialele create \u00ee\u021bi apar\u021bin \u00een totalitate. Le po\u021bi exporta, desc\u0103rca \u0219i p\u0103stra pe propriul calculator.\"}\n ];\n \n \/\/ Lessons Data for Academic Column\n const COL1 = [\n { sub: \"Matematic\u0103\", t: \"Teorema lui Pitagora\", l: \"Gimnaziu\", i: \"calculator\", c: \"bg-blue-100 text-blue-600\" },\n { sub: \"Biologie\", t: \"Structura Celulei\", l: \"Liceu\", i: \"microscope\", c: \"bg-green-100 text-green-600\" },\n { sub: \"Istorie\", t: \"Dacia Roman\u0103\", l: \"Primar\", i: \"book-open\", c: \"bg-amber-100 text-amber-600\" },\n { sub: \"Geografie\", t: \"Relieful Europei\", l: \"Gimnaziu\", i: \"globe-2\", c: \"bg-cyan-100 text-cyan-600\" }\n ];\n const COL2 = [\n { sub: \"Chimie\", t: \"Tabelul Periodic\", l: \"Liceu\", i: \"flask-conical\", c: \"bg-purple-100 text-purple-600\" },\n { sub: \"Literatur\u0103\", t: \"Genul Lyric\", l: \"Liceu\", i: \"book-open-check\", c: \"bg-pink-100 text-pink-600\" },\n { sub: \"Fizic\u0103\", t: \"Legile lui Newton\", l: \"Gimnaziu\", i: \"activity\", c: \"bg-indigo-100 text-indigo-600\" },\n { sub: \"Arte\", t: \"Curente Artistice\", l: \"Liceu\", i: \"palette\", c: \"bg-rose-100 text-rose-600\" }\n ];\n \n const LMS_LIST = [\n \"Moodle\", \"Blackboard\", \"Canvas\", \"CoffeeLMS\", \"SAP SuccessFactors\",\n \"Cornerstone\", \"Docebo\", \"TalentLMS\", \"Brightspace\",\n \"Schoology\", \"Totara\", \"Adobe Learning\"\n ];\n\n const LANG_LIST = [\n { code: \"gb\", name: \"Englez\u0103\" },\n { code: \"sa\", name: \"Arab\u0103\" }, { code: \"bg\", name: \"Bulgar\u0103\" },\n { code: \"cn\", name: \"Chinez\u0103\" }, { code: \"kr\", name: \"Coreean\u0103\" },\n { code: \"hr\", name: \"Croat\u0103\" }, \n { code: \"fr\", name: \"Francez\u0103\" }, { code: \"de\", name: \"German\u0103\" },\n { code: \"it\", name: \"Italian\u0103\" }, { code: \"hu\", name: \"Maghiar\u0103\" },\n { code: \"pl\", name: \"Polonez\u0103\" }, { code: \"pt\", name: \"Portughez\u0103\" },\n { code: \"ro\", name: \"Rom\u00e2n\u0103\" }, { code: \"ru\", name: \"Rus\u0103\" },\n { code: \"es\", name: \"Spaniol\u0103\" }, { code: \"se\", name: \"Suedez\u0103\" },\n { code: \"tr\", name: \"Turc\u0103\" }\n ];\n \n let currentCycle = 'yearly';\n\n \/\/ --- INIT ---\n document.addEventListener('DOMContentLoaded', () => {\n \n \/\/ --- 1. OPTIMIZED NAVBAR SCROLL ---\n let lastKnownScrollPosition = 0;\n let ticking = false;\n const nav = document.getElementById('main-nav');\n const skew = document.getElementById('nav-skew');\n const brand = document.getElementById('nav-brand');\n const logo = document.getElementById('nav-logo');\n\n function doScroll(scrollPos) {\n if(scrollPos > 10) {\n nav.classList.add('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n nav.classList.remove('bg-[#1379D1]');\n skew.classList.replace('w-[360px]', 'w-[290px]');\n brand.classList.replace('pl-10', 'pl-8');\n logo.classList.replace('h-[32px]', 'h-[28px]');\n } else {\n nav.classList.remove('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n nav.classList.add('bg-[#1379D1]');\n skew.classList.replace('w-[290px]', 'w-[360px]');\n brand.classList.replace('pl-8', 'pl-10');\n logo.classList.replace('h-[28px]', 'h-[32px]');\n }\n }\n\n window.addEventListener('scroll', function(e) {\n lastKnownScrollPosition = window.scrollY;\n if (!ticking) {\n window.requestAnimationFrame(function() {\n doScroll(lastKnownScrollPosition);\n ticking = false;\n });\n ticking = true;\n }\n });\n\n \/\/ --- 2. GLOBAL MOUSE COORDINATOR (Optimization 4) ---\n \/\/ Consolidates Spotlight and Constellation mouse tracking\n let spotlightRequest = null;\n let globalMouse = { x: -1000, y: -1000 };\n\n function updateGlobalMouse() {\n \/\/ Update Spotlight CSS Variables\n \/\/ We use document.body to catch all spotlight cards efficiently\n const cards = document.getElementsByClassName(\"spotlight-card\");\n \/\/ Convert live HTMLCollection to array for safe iteration if DOM changes\n Array.from(cards).forEach(card => {\n const rect = card.getBoundingClientRect();\n const x = globalMouse.x - rect.left;\n const y = globalMouse.y - rect.top;\n card.style.setProperty('--mouse-x', `${x}px`);\n card.style.setProperty('--mouse-y', `${y}px`);\n });\n\n \/\/ Update Hero Parallax if present\n const hero = document.getElementById('hero-section');\n if(hero) {\n const rect = hero.getBoundingClientRect();\n const x = globalMouse.x - rect.left;\n const y = globalMouse.y - rect.top;\n const heroSpotlight = document.getElementById('hero-spotlight');\n if(heroSpotlight) {\n heroSpotlight.style.background = `radial-gradient(800px circle at ${x}px ${y}px, rgba(56, 189, 248, 0.1), transparent 40%)`;\n }\n \/\/ Parallax Calc\n const xNorm = (globalMouse.x - rect.left - rect.width \/ 2) \/ (rect.width \/ 2);\n const yNorm = (globalMouse.y - rect.top - rect.height \/ 2) \/ (rect.height \/ 2);\n heroMouse = { x: xNorm, y: yNorm };\n updateHeroParallax();\n }\n \n spotlightRequest = null;\n }\n\n document.addEventListener('mousemove', (e) => {\n globalMouse.x = e.clientX;\n globalMouse.y = e.clientY;\n\n if (!spotlightRequest) {\n spotlightRequest = requestAnimationFrame(updateGlobalMouse);\n }\n });\n\n \/\/ 3. Inject Partners & Reviews - REMOVED (Optimization 2: Baked HTML)\n \/\/ The HTML for partners is static for LCP. \n \/\/ Reviews logic restored below to overwrite static placeholder for randomization.\n\n \/\/ 4. RESTORE RANDOMIZED REVIEWS (Fix for Bug 1)\n const shuffledReviews = [...REVIEWS_POOL].sort(() => 0.5 - Math.random()).slice(0, 6);\n document.getElementById('reviews-grid').innerHTML = shuffledReviews.map(r => {\n const colors = ['bg-[#2563eb]', 'bg-[#0ea5e9]', 'bg-[#7c3aed]', 'bg-[#db2777]', 'bg-[#ea580c]', 'bg-[#059669]'];\n const color = colors[r.name.length % colors.length];\n return `\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\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 ${color} flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">${r.initial}<\/div>\n <div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">${r.name}<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">${r.time}<\/span><\/div>\n <\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">\"${r.text}\"<\/p>\n <\/div>\n <\/div>`;\n }).join('');\n\n \/\/ 5. Inject Pricing & Features\n renderPricing('yearly');\n document.getElementById('industry-grid').innerHTML = INDUSTRY_CARDS.map(i => `<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 group\/item cursor-default\"><div class=\"text-blue-300 bg-blue-500\/10 border border-blue-500\/20 p-2 rounded-lg shrink-0 shadow-sm group-hover\/item:bg-blue-500\/20 group-hover\/item:text-white transition-colors\"><i data-lucide=\"${i.icon}\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"text-sm font-bold text-white leading-tight\">${i.title}<\/h4><p class=\"text-[11px] text-slate-500 mt-0.5 font-medium group-hover\/item:text-slate-400\">${i.desc}<\/p><\/div><\/div>`).join('');\n document.getElementById('edu-features').innerHTML = EDU_FEATURES.map(f => `<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 group cursor-default hover:bg-slate-800\"><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\">${f}<\/span><\/div>`).join('');\n\n \/\/ 6. Inject Templates\n document.getElementById('templates-grid').innerHTML = TEMPLATES.map(t => `<a href=\"${t.link}\" target=\"_blank\" class=\"group flex flex-col h-full cursor-pointer\"><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 src=\"${t.img}\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\" loading=\"lazy\" decoding=\"async\"><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\">${t.subtitle}<\/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\">${t.title}<\/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\">${t.desc}<\/p><\/div><\/a>`).join('');\n \n \/\/ 7. Inject Academic Columns\n const renderLesson = (i) => `<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 ${i.c}\"><i data-lucide=\"${i.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\">${i.sub}<\/p><span class=\"inline-block w-1.5 h-1.5 rounded-full bg-emerald-400\"><\/span><\/div><h4 class=\"font-bold text-slate-800 text-sm leading-tight truncate\">${i.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\">${i.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\">Editabil<\/span><\/div><\/div><\/div>`;\n const c1 = [...COL1, ...COL1, ...COL1].map(renderLesson).join('');\n const c2 = [...COL2, ...COL2, ...COL2].map(renderLesson).join('');\n document.getElementById('aca-col-1').innerHTML = c1;\n document.getElementById('aca-col-2').innerHTML = c2;\n \n \/\/ 8. Inject Tech Specs\n document.getElementById('lms-grid').innerHTML = LMS_LIST.map(l => `<div class=\"spotlight-card glass-panel-midnight p-4 rounded-xl flex items-center justify-center transition-all duration-300 cursor-default hover:shadow-md relative overflow-hidden\"><span class=\"font-bold text-slate-400 hover:text-white transition-colors text-sm relative z-10\">${l}<\/span><\/div>`).join('') + `<div class=\"spotlight-card glass-panel-midnight p-4 rounded-xl flex items-center justify-center transition-all duration-300 cursor-default hover:shadow-md relative overflow-hidden\"><span class=\"font-bold text-slate-400 hover:text-white transition-colors text-sm relative z-10\">+390 Altele<\/span><\/div>`;\n document.getElementById('lang-grid').innerHTML = LANG_LIST.map(l => `<div class=\"group flex items-center gap-2 bg-white\/80 hover:bg-white border border-[#6fccf0]\/20 hover:border-[#6fccf0] rounded-xl p-2 transition-all duration-300 cursor-default shadow-sm hover:shadow-md\"><div class=\"w-6 h-6 rounded-md overflow-hidden border border-slate-100 shrink-0\"><img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/${l.code}.png\" class=\"w-full h-full object-cover\" loading=\"lazy\"><\/div><span class=\"text-sm font-bold text-slate-600 group-hover:text-[#0092d6]\">${l.name}<\/span><\/div>`).join('');\n\n \/\/ 9. Inject Features (WordPress Safe)\n const feats = [ \n { t: \"Design & Structur\u0103\", items: [{t:\"\u0218abloane\", d:\"Con\u021binut editabil gata creat.\"}, {t:\"Imagini & Galerii\", d:\"Upload propriu sau bibliotec\u0103.\"}, {t:\"Celule de Text\", d:\"Editor avansat pentru formatare.\"}, {t:\"Tabele & iFrame\", d:\"Organizeaz\u0103 date \u0219i con\u021binut.\"}, {t:\"Editor Matematic\", d:\"Formule complexe (TeX\/MathJax).\"}, {t:\"Import Con\u021binut\", d:\"Import\u0103 resurse din alte surse.\"}] }, \n { t: \"Interactivitate & Engagement\", items: [{t:\"Chestionare\", d:\"Multiple tipuri de teste interactive.\"}, {t:\"Gamification\", d:\"Rebusuri \u0219i jocuri de cuvinte.\"}, {t:\"Video & Audio\", d:\"Multimedia integrat\u0103 nativ.\"}, {t:\"Pop-up & Hyperlink\", d:\"Straturi adi\u021bionale de informa\u021bie.\"}, {t:\"Asisten\u021bi Virtuali\", d:\"Personaje ghid pentru feedback.\"}, {t:\"Control Navigare\", d:\"Bariere \u0219i condi\u021bion\u0103ri de parcurs.\"}] }, \n { t: \"Tehnologie & Distribu\u021bie\", items: [{t:\"Suit\u0103 AI Complet\u0103\", d:\"Generator lec\u021bii, DALL-E, Avatar Video.\"}, {t:\"Export SCORM\", d:\"Compatibil 1.2 & 2004.\"}, {t:\"Import SCORM\", d:\"Editeaz\u0103 pachete existente.\"}, {t:\"Traducere & TTS\", d:\"Localizare automat\u0103.\"}, {t:\"Colaborare Live\", d:\"Lucru \u00een echip\u0103 \u00een timp real.\"}, {t:\"Certificate\", d:\"Generare automat\u0103 de diplome.\"}] } \n ];\n const featuresContainer = document.getElementById('features-accordion');\n if (featuresContainer) {\n let html = '';\n feats.forEach((f, idx) => {\n html += `\n <div class=\"bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300\">\n <details class=\"group\" ${idx === 0 ? '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 <span class=\"text-xl font-bold text-slate-900 tracking-tight\">${f.t}<\/span>\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 grid md:grid-cols-3 gap-4 mt-2\">\n `;\n f.items.forEach(item => { html += `<div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm 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\" style=\"color: #0f172a; font-weight: 700;\">${item.t}<\/h4><div class=\"text-sm font-medium\" style=\"color: #64748b; font-size: 0.875rem; font-weight: 500; display: block;\">${item.d}<\/div><\/div><\/div>`; });\n html += `<\/div><\/details><\/div>`;\n });\n featuresContainer.innerHTML = html;\n }\n\n document.getElementById('faq-list').innerHTML = FAQ.map(f => `<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\">${f.q} <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\">${f.a}<\/p><\/div><\/details>`).join('');\n\n \/\/ --- 10. OPTIMIZED CONSTELLATION CANVAS ---\n const canvas = document.getElementById('constellation-canvas');\n if(canvas) {\n const ctx = canvas.getContext('2d');\n let width, height;\n const stars = [];\n const platforms = [\"LearningApps\", \"PhET\", \"Wordwall\", \"Quizlet\", \"StoryJumper\", \"EdPuzzle\", \"Genially\", \"Kahoot\", \"Prezi\", \"Vimeo\", \"YouTube\", \"Google Forms\"];\n \n const initStars = () => {\n width = canvas.width = canvas.offsetWidth;\n height = canvas.height = canvas.offsetHeight;\n stars.length = 0;\n platforms.forEach(p => stars.push({label: p, x: Math.random()*width, y: Math.random()*height, vx: (Math.random()-0.5)*0.3, vy: (Math.random()-0.5)*0.3, size: Math.random()*2+1.5}));\n for(let i=0; i<8; i++) stars.push({label:\"\", x: Math.random()*width, y: Math.random()*height, vx: (Math.random()-0.5)*0.2, vy: (Math.random()-0.5)*0.2, size: Math.random()*1.5});\n };\n initStars();\n \n \/\/ Uses Global Mouse\n let isCanvasInView = false;\n let canvasAnimId = null;\n\n const animateCanvas = () => {\n if(!isCanvasInView) return;\n ctx.clearRect(0,0,width,height);\n stars.forEach((s, i) => {\n s.x+=s.vx; s.y+=s.vy;\n if(s.x<0||s.x>width)s.vx*=-1; if(s.y<0||s.y>height)s.vy*=-1;\n \n \/\/ Use globalMouse instead of local tracking\n const rect = canvas.getBoundingClientRect();\n \/\/ Adjust global mouse to canvas relative\n const mX = globalMouse.x - rect.left;\n const mY = globalMouse.y - rect.top;\n\n const dM = Math.hypot(s.x-mX, s.y-mY);\n const isHover = dM < 200;\n \n ctx.beginPath(); ctx.arc(s.x,s.y,s.size,0,6.28); ctx.fillStyle=isHover?'#D91278':`rgba(71,85,105,${isHover?1:0.4})`; ctx.fill();\n if(s.label) { ctx.font=isHover?'bold 13px Inter':'11px Inter'; ctx.fillStyle=isHover?'#0f172a':`rgba(71,85,105,0.4)`; ctx.fillText(s.label, s.x+8, s.y+4); }\n \n if(isHover) {\n ctx.beginPath(); ctx.moveTo(s.x,s.y); ctx.lineTo(mX,mY);\n ctx.strokeStyle=`rgba(217,18,120,${1-dM\/200})`; ctx.stroke();\n if(dM<40){ const a = Math.atan2(s.y-mY, s.x-mX); s.vx+=Math.cos(a)*0.02; s.vy+=Math.sin(a)*0.02; }\n }\n \n for(let j=i+1; j<stars.length; j++) {\n const s2=stars[j]; 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 = (isHover || Math.hypot(s2.x-mX, s2.y-mY)<200) ? 0.3 : 0.05;\n ctx.strokeStyle=`rgba(71,85,105,${lA})`; ctx.stroke();\n }\n }\n });\n canvasAnimId = requestAnimationFrame(animateCanvas);\n };\n\n const canvasObserver = new IntersectionObserver(([entry]) => {\n isCanvasInView = entry.isIntersecting;\n if(isCanvasInView && !canvasAnimId) animateCanvas();\n else if(!isCanvasInView && canvasAnimId) { cancelAnimationFrame(canvasAnimId); canvasAnimId = null; }\n }, { threshold: 0.1 });\n canvasObserver.observe(canvas.parentElement);\n\n \/\/ mousemove listener removed here - handled globally\n window.addEventListener('resize', initStars);\n }\n\n \/\/ Init Hero Carousel & Icons\n renderHeroCarousel();\n setInterval(() => { heroNext(); }, 5000);\n\n \/\/ 11. Reveal Animations with IntersectionObserver\n const revealObserver = new IntersectionObserver((e) => e.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('active'); revealObserver.unobserve(entry.target); } }), {threshold: 0.15, rootMargin: \"0px 0px -50px 0px\"});\n document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));\n \n \/\/ Optimization 5: Smart Video Observer\n \/\/ Automatically pause off-screen videos to save battery\/cpu\n const videoObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n const video = entry.target;\n if(entry.isIntersecting) {\n video.play().catch(e => {}); \/\/ ignore autoplay errors\n } else {\n video.pause();\n }\n });\n }, { threshold: 0.25 });\n document.querySelectorAll('.smart-video').forEach(v => videoObserver.observe(v));\n\n setTimeout(() => lucide.createIcons(), 100);\n });\n\n \/\/ --- GLOBAL FUNCTIONS ---\n window.switchTab = function(tab) {\n const btnBiz = document.getElementById('tab-business'); const btnAca = document.getElementById('tab-academic');\n const cBiz = document.getElementById('content-business'); const cAca = document.getElementById('content-academic');\n if(tab === 'business') {\n btnBiz.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 cBiz.classList.remove('hidden'); cAca.classList.add('hidden');\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 btnBiz.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 cAca.classList.remove('hidden'); cBiz.classList.add('hidden');\n }\n };\n\n window.renderPricing = function(cycle) {\n currentCycle = cycle;\n document.getElementById('cycle-monthly').className = `text-sm font-bold transition-colors cursor-pointer ${cycle==='monthly'?'text-white':'text-slate-500'}`;\n document.getElementById('cycle-yearly').className = `text-sm font-bold transition-colors cursor-pointer ${cycle==='yearly'?'text-white':'text-slate-500'}`;\n document.getElementById('cycle-toggle-ball').className = `w-6 h-6 rounded-md bg-white shadow-md transform transition-transform duration-300 ${cycle==='yearly'?'translate-x-8':'translate-x-0'}`;\n \n document.getElementById('pricing-grid').innerHTML = PRICING[cycle].map(p => {\n const theme = pricingThemes[p.color];\n const showBadge = p.annualOnly && cycle === 'monthly';\n return `<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 ${theme.glow}\"><div class=\"border-beam\"><\/div><div class=\"absolute top-0 left-8 w-20 h-1 ${theme.accent} shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div><div class=\"relative z-10 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6 pt-4\"><div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md ${theme.iconBg} shadow-inner group-hover:scale-110 transition-transform duration-500\"><i data-lucide=\"${p.icon}\" class=\"w-7 h-7\"><\/i><\/div><div class=\"flex flex-col items-end gap-1\"><div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border ${theme.badge} shadow-sm\">${p.sub}<\/div>${showBadge?'<span class=\"text-[9px] text-slate-400 font-bold uppercase tracking-wider\">Doar Anual<\/span>':''}<\/div><\/div><h3 class=\"text-2xl font-bold text-white mb-2\">${p.title}<\/h3><p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">${p.desc}<\/p><div class=\"border-t border-slate-700\/50 py-6 mb-2\"><div class=\"flex items-baseline gap-1\"><span class=\"text-xs text-slate-500 font-bold uppercase\">Pre\u021b<\/span><span class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">${p.price}<\/span><\/div><div class=\"flex items-center gap-2 mt-1\"><span class=\"text-xs text-slate-500 font-medium\">${p.period}<\/span>${p.subz?'<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> Subven\u021bionat<\/span>':''}<\/div><\/div><ul class=\"space-y-3 mb-8\">${p.features.map(f => `<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\">${f}<\/span><\/li>`).join('')}<\/ul><a href=\"${p.link}\" class=\"w-full py-4 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 ${theme.btn} mt-auto\">${p.btn} <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div>`;\n }).join('');\n \/\/ Optimization: Only update icons in the grid\n lucide.createIcons({ root: document.getElementById('pricing-grid') });\n };\n\n window.toggleBilling = function() {\n renderPricing(currentCycle === 'monthly' ? 'yearly' : 'monthly');\n };\n window.setBilling = function(cycle) {\n renderPricing(cycle);\n };\n\n \/\/ --- HERO CAROUSEL LOGIC ---\n function renderHeroCarousel() {\n const container = document.getElementById('hero-carousel-container');\n if(!container) return;\n\n const active = HERO_TEMPLATES[heroActiveIndex];\n const prevIndex = (heroActiveIndex - 1 + HERO_TEMPLATES.length) % HERO_TEMPLATES.length;\n const prev = HERO_TEMPLATES[prevIndex];\n const nextIndex = (heroActiveIndex + 1) % HERO_TEMPLATES.length;\n const next = HERO_TEMPLATES[nextIndex];\n\n \/\/ Render static structure only once if possible, or re-render content\n \/\/ For simplicity in HTML context, we'll re-render the inner HTML which is cheap for 3 items\n \n container.innerHTML = `\n \n <button onclick=\"heroPrev()\" class=\"absolute left-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/30 border border-white\/40 backdrop-blur-md text-slate-700 hover:bg-white hover:text-blue-600 hover:scale-110 transition-all shadow-lg flex items-center justify-center group\"><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=\"heroNext()\" class=\"absolute right-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/30 border border-white\/40 backdrop-blur-md text-slate-700 hover:bg-white hover:text-blue-600 hover:scale-110 transition-all shadow-lg flex items-center justify-center group\"><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=\"hero-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 ${active.border}\">\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]\"><div class=\"w-2 h-2 rounded-full animate-pulse ${active.bg}\"><\/div> template_${active.id}.html<\/div>\n <\/div>\n <div class=\"relative w-full h-full group\">\n <img decoding=\"async\" src=\"${active.img}\" alt=\"${active.title}\" class=\"w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700\" loading=\"lazy\">\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\"><i data-lucide=\"${active.icon}\" class=\"w-4 h-4 ${active.color}\"><\/i><\/div>\n <h3 class=\"text-sm font-bold text-slate-900\">${active.title}<\/h3>\n <div class=\"h-1 w-16 rounded-full mt-2 ${active.bg}\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div onclick=\"heroPrev()\" 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\" id=\"hero-card-prev\">\n <img decoding=\"async\" src=\"${prev.img}\" class=\"w-full h-full object-cover\" loading=\"lazy\">\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 onclick=\"heroNext()\" 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\" id=\"hero-card-next\">\n <img decoding=\"async\" src=\"${next.img}\" class=\"w-full h-full object-cover\" loading=\"lazy\">\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=\"hero-badge-1\" 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 <div id=\"hero-badge-2\" 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\">Nu \u00eencepe de la zero<\/span>\n <\/div>\n `;\n \n \/\/ Optimization: Only update icons in the hero container\n lucide.createIcons({ root: container });\n updateHeroParallax();\n }\n\n function updateHeroParallax() {\n const active = document.getElementById('hero-card-active');\n const prev = document.getElementById('hero-card-prev');\n const next = document.getElementById('hero-card-next');\n const b1 = document.getElementById('hero-badge-1');\n const b2 = document.getElementById('hero-badge-2');\n\n if(active) active.style.transform = `translate(-50%, -50%) rotateX(${heroMouse.y * -5}deg) rotateY(${heroMouse.x * 5}deg) translateZ(50px)`;\n if(prev) prev.style.transform = `translate(0%, -20%) rotateX(${heroMouse.y * -2}deg) rotateY(${heroMouse.x * 2 + 15}deg) translateZ(-50px)`;\n if(next) next.style.transform = `translate(0%, 10%) rotateX(${heroMouse.y * -2}deg) rotateY(${heroMouse.x * 2 - 15}deg) translateZ(-50px)`;\n \n if(b1) b1.style.transform = `translateX(${heroMouse.x * -20}px) translateY(${heroMouse.y * -20}px) translateZ(-80px)`;\n if(b2) b2.style.transform = `translateX(${heroMouse.x * 30}px) translateY(${heroMouse.y * 30}px) translateZ(80px)`;\n }\n\n window.heroNext = function() {\n heroActiveIndex = (heroActiveIndex + 1) % HERO_TEMPLATES.length;\n renderHeroCarousel();\n }\n \n window.heroPrev = function() {\n heroActiveIndex = (heroActiveIndex - 1 + HERO_TEMPLATES.length) % HERO_TEMPLATES.length;\n renderHeroCarousel();\n }\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LIVRESQ – Creator de cursuri eLearning Author este Live Comunitate Blog Academic Training FAQ Cump\u0103r\u0103 Despre noi Library Rom\u00e2n\u0103 Rom\u00e2n\u0103 English Deutsch Fran\u00e7ais Contul Meu Nou 20 noi \u0219abloane business lansate INFO Reguli de publicare \u00een bibliotec\u0103 Creeaz\u0103 cursuri\u0219i lec\u021bii superbe. Construie\u0219te materiale compatibile SCORM \u0219i HTML5. F\u0103r\u0103 bariere tehnice. \u00cencepe Gratuit Vezi Func\u021bionalit\u0103\u021bi NU […]<\/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\/fr\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/\" \/>\n<meta property=\"og:site_name\" content=\"LIVRESQ\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T21:46:32+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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"23 minutes\" \/>\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-04-09T21:46:32+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\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/livresq.com\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/livresq.com\/en\/#organization\",\"name\":\"LIVRESQ - Authoring Tool\",\"url\":\"https:\/\/livresq.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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":"Outil de cr\u00e9ation eLearning - LIVRESQ","description":"Cr\u00e9ez vos cours elearning ou vos le\u00e7ons interactives directement \u00e0 partir du navigateur. Tout se fait en ligne, vous ne devez rien t\u00e9l\u00e9charger ni installer.","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\/fr\/","og_locale":"fr_FR","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\/fr\/","og_site_name":"LIVRESQ","article_modified_time":"2026-04-09T21:46:32+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":{"Dur\u00e9e de lecture estim\u00e9e":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/livresq.com\/","url":"https:\/\/livresq.com\/","name":"Outil de cr\u00e9ation eLearning - 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-04-09T21:46:32+00:00","description":"Cr\u00e9ez vos cours elearning ou vos le\u00e7ons interactives directement \u00e0 partir du navigateur. Tout se fait en ligne, vous ne devez rien t\u00e9l\u00e9charger ni installer.","breadcrumb":{"@id":"https:\/\/livresq.com\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/livresq.com\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@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":"Outil de cr\u00e9ation eLearning","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":"fr-FR"},{"@type":"Organization","@id":"https:\/\/livresq.com\/en\/#organization","name":"LIVRESQ - Outil de cr\u00e9ation","url":"https:\/\/livresq.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":837,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":491247,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/pages\/17\/revisions\/491247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/media\/31483"}],"wp:attachment":[{"href":"https:\/\/livresq.com\/fr\/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-04-10T00:46:32","modified_gmt":"2026-04-09T21:46:32","slug":"overview","status":"publish","type":"page","link":"https:\/\/livresq.com\/fr\/","title":{"rendered":"Outil de cr\u00e9ation eLearning"},"content":{"rendered":"\n\n\n\n \n \n LIVRESQ – Creator de cursuri eLearning<\/title>\n <meta name=\"description\" content=\"Creeaz\u0103 cursuri eLearning \u0219i lec\u021bii interactive direct din browser. Nu necesit\u0103 instalare. Compatibil SCORM.\">\n \n \n <link rel=\"preload\" as=\"image\" href=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png\">\n <link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700;900&display=swap\" as=\"style\">\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 <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 1s 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-livresq-text antialiased bg-slate-50 flex flex-col min-h-screen selection:bg-fuchsia-500 selection:text-white\">\n\n \n <nav id=\"main-nav\" class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-[#1379D1] h-[48px]\">\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 id=\"nav-brand\" class=\"flex items-center flex-shrink-0 relative z-20 transition-all duration-500 pl-10\">\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\" id=\"nav-logo\" class=\"w-auto object-contain transition-all duration-300 drop-shadow-sm filter contrast-125 h-[32px]\">\n <\/a>\n \n <div class=\"ml-5 pl-5 border-l border-slate-200 h-8 flex items-center\">\n <a href=\"https:\/\/author.livresq.com\/\" target=\"_blank\" class=\"flex flex-col justify-center cursor-pointer group\/status\">\n <span class=\"text-[8px] font-extrabold text-slate-400 uppercase tracking-widest leading-none mb-1 group-hover\/status:text-blue-600 transition-colors\">Author este<\/span>\n <div class=\"flex items-center gap-1.5\">\n <div class=\"relative flex h-2 w-2\"><span class=\"animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-emerald-400\"><\/span><span class=\"relative inline-flex rounded-full h-2 w-2 bg-emerald-500\"><\/span><\/div>\n <span class=\"text-[10px] font-black uppercase tracking-widest leading-none text-emerald-600 group-hover\/status:underline\">Live<\/span>\n <\/div>\n <\/a>\n <\/div>\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] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Comunitate<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/blog\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Blog<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/academic\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Academic<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/training\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Training<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/faq\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">FAQ<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/pricing\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Cump\u0103r\u0103<\/a>\n <a href=\"https:\/\/livresq.com\/ro\/despre-noi\/\" class=\"px-3 py-1 rounded-md text-white font-bold text-[14px] tracking-tight hover:bg-white\/10 transition-all duration-200 border border-transparent hover:border-white\/10\">Despre noi<\/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\" style=\"filter: brightness(0) invert(1)\">\n <span class=\"text-[14px] font-bold\">Library<\/span>\n <\/a>\n \n <div class=\"relative group\/lang\">\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 border border-transparent focus:outline-none\">\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\" style=\"filter: brightness(0) invert(1)\"><span class=\"text-[14px] font-bold\">Rom\u00e2n\u0103<\/span><\/div>\n <i data-lucide=\"chevron-down\" class=\"w-4 h-4\"><\/i>\n <\/button>\n \n <div class=\"hidden absolute top-full right-0 mt-1 w-[140px] bg-white rounded-md shadow-lg border border-slate-200 py-1 z-50 overflow-hidden group-hover\/lang:block\">\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors font-bold text-[#1379D1]\">Rom\u00e2n\u0103<\/a>\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors text-slate-700\">English<\/a>\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors text-slate-700\">Deutsch<\/a>\n <a href=\"#\" class=\"block w-full text-left px-4 py-2 text-sm hover:bg-slate-50 transition-colors text-slate-700\">Fran\u00e7ais<\/a>\n <\/div>\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 duration-300 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\" style=\"filter: brightness(0) invert(1)\">\n <span class=\"text-[14px] font-bold\">Contul Meu<\/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 hover:bg-white\/20 transition-colors\">\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\n <\/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 <div class=\"flex flex-col sm:flex-row items-start gap-4 mb-8 animate-fade-in-up\" style=\"animation-delay: 0.1s\">\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 cursor-pointer bg-white\/60 backdrop-blur-xl border border-white\/60 shadow-sm hover:shadow-md hover:bg-white hover:scale-105\">\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\">Nou<\/span>\n <span class=\"text-[13px] font-bold transition-colors text-slate-600 group-hover:text-livresq-fucsia\">20 noi \u0219abloane business lansate<\/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 <a href=\"https:\/\/livresq.com\/ro\/publish-library\/#:~:text=mii%20de%20utilizatori.-,Reguli%20de%20Publicare,-Pentru%20a%20asigura\" class=\"group inline-flex items-center p-1.5 pr-5 rounded-md transition-all duration-300 cursor-pointer bg-white\/60 backdrop-blur-xl border border-white\/60 shadow-sm hover:shadow-md hover:bg-white hover:scale-105\">\n <span class=\"px-3 py-1 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-[10px] font-bold rounded-md uppercase tracking-wide mr-3 shadow-sm group-hover:shadow-md transition-all\">INFO<\/span>\n <span class=\"text-[13px] font-bold transition-colors text-slate-600 group-hover:text-livresq-fucsia\">Reguli de publicare \u00een bibliotec\u0103<\/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 <\/div>\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 Creeaz\u0103 cursuri<br\/>\u0219i lec\u021bii <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia via-pink-600 to-purple-600\">superbe.<\/span>\n <\/h1>\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\">Construie\u0219te materiale compatibile SCORM \u0219i HTML5. F\u0103r\u0103 bariere tehnice.<\/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\/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\"><\/i> \u00cencepe Gratuit<\/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> Vezi Func\u021bionalit\u0103\u021bi\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> NU NECESIT\u0102 CARD<\/span>\n <span class=\"flex items-center gap-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-500\"><\/i> SETUP \u00ceN 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\">Al\u0103tur\u0103-te celor <strong class=\"text-slate-900\">158,900+ creatori<\/strong> din 7200+ institu\u021bii \u0219i companii<\/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\">Sus\u021binut de<\/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 <\/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 Vizite Lunare<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full h-1.5 min-h-[6px] bg-gradient-to-r from-fuchsia-100 via-[#D91278] to-fuchsia-100 shadow-sm relative z-20\" style=\"height: 6px; background: linear-gradient(90deg, #fae8ff 0%, #D91278 50%, #fae8ff 100%);\"><\/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\">Partener de \u00eencredere pentru Organiza\u021bii de TOP<\/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 \n <div class=\"flex animate-scroll items-center\" id=\"partners-track\">\n \n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/ING_B_LOGO.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_Logo_Livresq.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/3.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/4.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/5.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/6.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n \n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/ING_B_LOGO.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/CEC_Logo_Livresq.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/3.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/4.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/5.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <div class=\"w-[180px] mr-12 flex justify-center opacity-80 hover:opacity-100 transition-opacity\"><img src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/6.png?fit=225%2C62&ssl=1\" class=\"h-8 md:h-12 object-contain\" loading=\"lazy\" decoding=\"async\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-white border-b border-slate-200\">\n <div class=\"absolute top-0 right-0 w-[600px] h-[600px] 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-[600px] h-[600px] bg-purple-50 rounded-full blur-3xl opacity-60 -translate-x-1\/3 translate-y-1\/3 pointer-events-none\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"bg-slate-900 rounded-[2.5rem] p-8 md:p-12 lg:p-16 relative overflow-hidden shadow-2xl border border-slate-800 flex flex-col lg:flex-row items-center gap-12 lg:gap-16\">\n \n <div class=\"absolute inset-0 bg-gradient-to-br from-blue-600\/20 via-purple-600\/20 to-transparent opacity-50\"><\/div>\n <div class=\"absolute -top-24 -right-24 w-96 h-96 bg-blue-500\/30 rounded-full blur-3xl pointer-events-none\"><\/div>\n\n \n <div class=\"w-full lg:w-1\/2 relative z-10\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-blue-500\/20 border border-blue-500\/30 text-blue-300 text-xs font-bold uppercase tracking-widest mb-6 shadow-sm\">\n <i data-lucide=\"sparkles\" class=\"w-4 h-4\"><\/i>\n Nou: ASISTENT PEDAGOGIC\n <\/div>\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-6 font-heading leading-tight tracking-tight\">\n Lans\u0103m <span class=\"text-[#D91378]\">LIVRESQ<\/span> <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#D91378] to-[#76D1F2]\">Companion<\/span>\n <\/h2>\n <p class=\"text-sm md:text-base text-slate-300 mb-6 leading-relaxed font-medium\">\n LIVRESQ Companion a fost creat pentru a r\u0103spunde unei nevoi critice semnalate de cadrele didactice: supra\u00eenc\u0103rcarea administrativ\u0103 \u00eenainte de sus\u021binerea orelor la clas\u0103. \u00cen loc s\u0103 petreac\u0103 ore \u00eentregi cu sarcini repetitive, profesorii au acum un partener digital care \u00eei ajut\u0103 s\u0103 genereze con\u021binut structurat, <strong class=\"text-white bg-[#D91378]\/20 px-1.5 py-0.5 rounded border border-[#D91378]\/30\">conform programei \u0219colare<\/strong> din Rom\u00e2nia.\n <\/p>\n\n <div class=\"mb-6\">\n <h3 class=\"text-white font-bold mb-4 text-sm uppercase tracking-wider\">Func\u021bionalit\u0103\u021bi cheie pentru profesori:<\/h3>\n <ul class=\"flex flex-col gap-3\">\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Planificarea lec\u021biilor:<\/strong> Generarea rapid\u0103 de planuri de lec\u021bie coerente \u0219i adaptate.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Materiale de lucru instant:<\/strong> Crearea de fi\u0219e de lucru, propuneri de activit\u0103\u021bi \u0219i instrumente de evaluare (quizz-uri).<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Adaptarea con\u021binutului:<\/strong> Posibilitatea de a ajusta nivelul de dificultate al informa\u021biei \u00een func\u021bie de nivelul clasei.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300 text-sm\">\n <i data-lucide=\"check-circle-2\" class=\"w-5 h-5 text-[#76D1F2] shrink-0 mt-0.5\"><\/i>\n <span><strong class=\"text-white\">Profil didactic personalizat:<\/strong> R\u0103spunsurile AI sunt calibrate conform disciplinei \u0219i stilului de predare al fiec\u0103rui utilizator.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n <div class=\"flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-900\/40 to-purple-900\/40 border border-[#76D1F2]\/20\">\n <i data-lucide=\"sparkles\" class=\"w-5 h-5 text-[#76D1F2] shrink-0\"><\/i>\n <span class=\"text-sm text-slate-200\">Un proiect sus\u021binut de Google: <strong class=\"text-white\">Inova\u021bie cu impact public (GovTech)<\/strong><\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 relative z-10 flex flex-col gap-6\">\n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl border border-white\/10 group transform transition-transform duration-500 hover:scale-[1.02]\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-900\/80 via-transparent to-transparent z-10 pointer-events-none\"><\/div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2026\/04\/Livresq-Companion-scaled.jpg?w=800&ssl=1\" alt=\"LIVRESQ Companion AI\" class=\"w-full h-auto object-cover relative z-0\" \/>\n <\/div>\n \n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-800\/50 p-4 rounded-xl border border-slate-700\/50\">\n <div class=\"text-slate-300 text-sm font-medium\">\n <span class=\"text-white font-bold\">09.04.2026<\/span> – data lans\u0103rii\n <\/div>\n <a href=\"https:\/\/livresq.com\/ro\/news\/lansare-livresq-companion\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center justify-center px-6 py-3 bg-white text-slate-900 font-bold rounded-md hover:bg-slate-100 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 group whitespace-nowrap\">\n Cite\u0219te anun\u021bul oficial\n <i data-lucide=\"arrow-right\" class=\"w-5 h-5 ml-2 text-slate-600 group-hover:translate-x-1 transition-transform\"><\/i>\n <\/a>\n <\/div>\n <\/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\">Pe baza a <strong class=\"text-white\">614 recenzii<\/strong> de 5 stele<\/p>\n <\/div>\n \n \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\">\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\"><div class=\"w-12 h-12 rounded-full bg-[#2563eb] flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">D<\/div><div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">Daniela-Cristina Balanescu<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">acum 2 s\u0103pt\u0103m\u00e2ni<\/span><\/div><\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">„Utilizez platforma Livresq de mai bine de un an. Materialele realizate cu ajutorul platformei s-au dovedit a fi deosebit de eficiente.”<\/p>\n <\/div>\n <\/div>\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\"><div class=\"w-12 h-12 rounded-full bg-[#0ea5e9] flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">P<\/div><div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">Paul Alexandru<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">recent<\/span><\/div><\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">„Pe mine LIVRESQ pur \u0219i simplu m-a furat. Este un instrument educa\u021bional care te ajut\u0103 s\u0103 fii creativ \u0219i s\u0103 te dezvol\u021bi profesional.”<\/p>\n <\/div>\n <\/div>\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\n <div class=\"relative z-10 flex flex-col h-full\">\n <div class=\"flex items-start gap-4 mb-6\"><div class=\"w-12 h-12 rounded-full bg-[#7c3aed] flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">I<\/div><div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">Ioan Vasile<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">acum 4 luni<\/span><\/div><\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">„Unul dintre marile avantaje este flexibilitatea. Livresq este un instrument valoros care modernizeaz\u0103 procesul de predare-\u00eenv\u0103\u021bare.”<\/p>\n <\/div>\n <\/div>\n <\/div>\n\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\">Vezi toate recenziile pe 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\">Transparen\u021b\u0103 100% din partea utilizatorilor reali.<\/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\">Scor Capterra<\/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\">„Cel mai u\u0219or de folosit”<\/span><\/div>\n <\/div>\n <div class=\"h-20 w-auto relative group\/badge\"><img 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\" loading=\"lazy\" decoding=\"async\"><\/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\">Hub Centralizat<\/span>\n <\/div>\n <h2 class=\"text-4xl md:text-6xl font-black mb-8 leading-tight text-slate-900\">\n Nu renun\u021ba la nimic.<br\/>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Conecteaz\u0103 Totul.<\/span>\n <\/h2>\n <p class=\"text-slate-600 text-xl leading-relaxed mb-12\">\n LIVRESQ func\u021bioneaz\u0103 perfect cu uneltele pe care le iube\u0219ti deja. Integreaz\u0103 teste din <strong>Quizlet<\/strong>, video-uri din <strong>EdPuzzle<\/strong> sau simul\u0103ri <strong>PhET<\/strong> direct \u00een lec\u021biile tale, f\u0103r\u0103 ca elevul s\u0103 p\u0103r\u0103seasc\u0103 pagina.\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\">Embed Universal<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Dac\u0103 resursa ta are un cod „Embed” sau „Iframe”, func\u021bioneaz\u0103 \u00een LIVRESQ instantaneu.<\/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\">Flux Ne\u00eentrerupt<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Cursan\u021bii interac\u021bioneaz\u0103 cu resursele externe (ex: Wordwall, LearningApps) direct \u00een fereastra cursului.<\/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+ Platforme Validate<\/h3>\n <p class=\"text-sm text-slate-500 leading-relaxed\">De la StoryJumper la Genially, am testat compatibilitatea ca tu s\u0103 nu ai surprize.<\/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\">Simplu. Rapid. Eficient.<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black mb-6 font-heading text-white tracking-tight text-glow-blue\">Cum func\u021bioneaz\u0103?<\/h2>\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto font-light leading-relaxed\">Transform\u0103 con\u021binutul educa\u021bional \u00een experien\u021be digitale \u00een doar 3 pa\u0219i simpli.<\/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. Autentificare<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Autentific\u0103-te direct din browser. F\u0103r\u0103 instal\u0103ri complicate. Totul este \u00een cloud, accesibil 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. Creeaz\u0103<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Folose\u0219te editorul drag-and-drop, import\u0103 resurse existente sau las\u0103 AI-ul s\u0103 genereze structura.<\/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. Public\u0103<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm font-medium\">Export\u0103 pachetul SCORM sau HTML5 pentru orice LMS sau public\u0103 instant \u00een Biblioteca LIVRESQ.<\/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 smart-video\">\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 Exemplu \u0219ablon din editorul LIVRESQ\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\">\u0218abloane <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-livresq-fucsia to-purple-600\">Premium<\/span><\/h2>\n <p class=\"text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed\">Alege din colec\u021bia noastr\u0103 vast\u0103 de \u0219abloane profesionale, optimizate pentru mediul Business \u0219i Academic. Design de top, gata de utilizare.<\/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\"><\/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\">Vezi toate \u0219abloanele <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> Bibliotec\u0103 Public\u0103 & RED<\/div>\n <h3 class=\"text-4xl md:text-5xl font-black text-slate-900 mb-6 leading-[1.15] tracking-tight\">Acces Gratuit la <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600\">17.000+ Surse<\/span><\/h3>\n <p class=\"text-lg text-slate-600 leading-relaxed font-medium\">Ai acces instant la peste <strong>20.000 de materiale educa\u021bionale gratuite<\/strong>. Exploreaz\u0103 o colec\u021bie \u00een continu\u0103 cre\u0219tere de lec\u021bii interactive, cursuri \u0219i Resurse Educa\u021bionale Deschise (RED).<\/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\">Surse Editabile<\/h4><\/div>\n <\/div>\n <p class=\"text-slate-600 font-medium border-t border-slate-100 pt-3 mt-1 text-sm\">Acceseaz\u0103, modific\u0103 \u0219i adapteaz\u0103 orice surs\u0103 pentru nevoile tale.<\/p>\n <\/div>\n <div class=\"pt-2\">\n <a href=\"https:\/\/livresq.com\/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 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> Caut\u0103 \u00een Bibliotec\u0103 <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\">Segmentare & Personalizare<\/span>\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-white mb-6 font-heading text-glow-blue\">LIVRESQ pentru Domeniul T\u0103u<\/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')\">Lunar<\/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')\">Anual<\/span>\n <\/div>\n <p class=\"text-slate-400 max-w-2xl mx-auto text-lg\">Platforma se adapteaz\u0103 nevoilor tale, oferind planuri \u0219i func\u021bionalit\u0103\u021bi specifice.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8 mb-16\">\n <div id=\"pricing-grid\" class=\"contents\"><\/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\">Companii & Traineri<\/h3><p class=\"text-xs text-blue-400 uppercase tracking-widest font-bold mt-1\">Solu\u021bii adaptate pe industrii<\/p><\/div>\n <\/div>\n <p class=\"text-slate-400 text-lg mb-10 max-w-2xl relative z-10 leading-relaxed\">Solu\u021bii complete de training adaptate pentru industrii specifice. De la procese reglementate bancare la protec\u021bia muncii \u00een fabrici.<\/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 a utilizat LIVRESQ pentru a personaliza cursurile interne, asigur\u00e2nd relevan\u021ba \u0219i alinierea perfect\u0103 cu obiectivele strategice ale organiza\u021biei. Am reu\u0219it cu Ascendia s\u0103 construim o rela\u021bie de parteneriat av\u00e2nd \u00een centrul acestei rela\u021bii preocuparea at\u00e2t a lor c\u00e2t \u0219i a noastr\u0103 pentru dezvoltarea competen\u021belor colegilor no\u0219tri.”<\/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\">Educa\u021bie<\/h3><p class=\"text-xs text-pink-400 uppercase tracking-widest font-bold mt-1\">K-12 & Universitati<\/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\">„Cel mai mult apreciem la LIVRESQ flexibilitatea \u0219i interactivitatea. Mul\u021bi dintre cei peste <strong class=\"text-pink-600\">20.000 de profesori<\/strong> \u00eenscri\u0219i au apreciat modul \u00een care a fost realizat cursul.”<\/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\">Func\u021bionalit\u0103\u021bi<\/h2><p class=\"text-slate-500 max-w-2xl mx-auto text-lg font-light\">Un ecosistem complet de unelte pentru orice scenariu educa\u021bional.<\/p><\/div>\n <div class=\"space-y-6 max-w-5xl mx-auto\" id=\"features-accordion\"><\/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><div class=\"absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-900\/20 rounded-full blur-[100px]\"><\/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)]\">Migrare U\u0219oar\u0103<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold mb-6 font-heading text-white text-glow-blue tracking-tight\">Import de Pachete <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 to-purple-400\">SCORM<\/span> existente<\/h2>\n <p class=\"text-lg text-slate-400 mb-10 leading-relaxed font-medium max-w-xl\">Ai con\u021binut blocat \u00een alte platforme (ex: Rise)? LIVRESQ \u00ee\u021bi ofer\u0103 libertatea de a importa \u0219i edita pachete exportate. Nu pierde munca anterioar\u0103 \u2013 transform-o.<\/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\">P\u0103streaz\u0103 Structura<\/h4><p class=\"text-xs text-slate-500 font-medium\">Import\u0103 organizarea capitolelor intact\u0103.<\/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\">Editare Complet\u0103<\/h4><p class=\"text-xs text-slate-500 font-medium\">Modific\u0103 texte, imagini \u0219i quiz-uri.<\/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\">Conversie Automat\u0103<\/h4><p class=\"text-xs text-slate-500 font-medium\">Transform\u0103 pachete statice \u00een proiecte LIVRESQ editabile \u00een c\u00e2teva minute.<\/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\">Conformitate & Standarde<\/span>\n <h2 class=\"text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 font-heading leading-[1.15]\">Public\u0103 pachete <span class=\"text-blue-600\">Standard SCORM<\/span><\/h2>\n <p class=\"text-slate-600 leading-relaxed text-lg font-medium max-w-3xl mx-auto\">\u0218tim c\u0103 respectarea normelor este critic\u0103 pentru organiza\u021bii. LIVRESQ genereaz\u0103 cod nativ compatibil, asigur\u00e2nd o integrare irepro\u0219abil\u0103 cu orice LMS modern sau legacy.<\/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 smart-video\"><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\">Compatibilitate maxim\u0103 cu sisteme vechi \u0219i platforme legacy.<\/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\">Standardul de aur \u00een industrie. Raportare avansat\u0103 \u0219i secven\u021biere.<\/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\">Cea mai recent\u0103 versiune a standardului pentru platforme moderne.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section class=\"py-24 bg-midnight text-white spotlight-group relative overflow-hidden\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\n <span class=\"text-purple-300 font-bold tracking-widest uppercase text-xs border border-purple-500\/30 px-3 py-1 rounded-md bg-purple-900\/20 mb-6 inline-block shadow-sm\">Compatibilitate Universal\u0103<\/span>\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-white mb-6 font-heading text-glow-blue\">Se integreaz\u0103 cu peste 400 de LMS-uri!<\/h2>\n <p class=\"text-xl text-slate-400 leading-relaxed\">Cursurile create cu LIVRESQ sunt construite pentru a fi flexibile.<\/p>\n <\/div>\n <div class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4\" id=\"lms-grid\"><\/div>\n <div class=\"mt-12 text-center\"><a href=\"https:\/\/livresq.com\/my-account\/\" class=\"inline-flex items-center text-livresq-fucsia font-bold hover:text-white transition-colors group\">Testeaz\u0103 compatibilitatea acum <i data-lucide=\"arrow-right\" class=\"w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform\"><\/i><\/a><\/div>\n <\/div>\n <\/section>\n \n \n <section class=\"py-24 bg-slate-50 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-[#faed87]\/20 rounded-full blur-[120px] pointer-events-none translate-x-1\/3 -translate-y-1\/3\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#6fccf0]\/10 rounded-full blur-[100px] pointer-events-none -translate-x-1\/3 translate-y-1\/3\"><\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"text-center mb-16\">\n <span class=\"bg-[#faed87] text-slate-900 font-black tracking-widest uppercase text-xs border border-[#faed87] px-4 py-1.5 rounded-md inline-block mb-6 shadow-md shadow-[#faed87]\/30\">Localizare Automat\u0103 \u0219i Interfa\u021b\u0103<\/span>\n <h2 class=\"text-4xl md:text-5xl font-black text-slate-900 mb-6 font-heading leading-tight tracking-tight\">Un Singur Curs. <span class=\"text-[#D91278]\">Audien\u021b\u0103 Global\u0103.<\/span><\/h2>\n <p class=\"text-lg text-slate-600 leading-relaxed max-w-2xl mx-auto font-medium\">Func\u021bia de traducere automat\u0103 \u00ee\u021bi permite s\u0103 localizezi instantaneu tot con\u021binutul text din tot materialul. Creezi o dat\u0103, livrezi in orice limb\u0103.<\/p>\n <\/div>\n <div class=\"grid lg:grid-cols-5 gap-6\">\n <div class=\"lg:col-span-2 bg-slate-900 rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden flex flex-col justify-between group shadow-2xl shadow-slate-900\/20 border border-slate-800\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-[#D91278]\/20 via-transparent to-transparent opacity-50\"><\/div>\n <div class=\"absolute -bottom-20 -left-20 w-64 h-64 bg-[#D91278]\/30 rounded-full blur-3xl pointer-events-none\"><\/div>\n <div class=\"relative z-10\">\n <div class=\"w-14 h-14 bg-[#D91278] rounded-2xl flex items-center justify-center text-white mb-6 shadow-lg shadow-[#D91278]\/40 border border-[#D91278]\/50 group-hover:scale-110 transition-transform duration-300\"><i data-lucide=\"sparkles\" class=\"w-7 h-7\"><\/i><\/div>\n <h3 class=\"text-2xl font-bold text-white mb-2\">Traducere Automat\u0103<\/h3>\n <p class=\"text-slate-400 text-sm font-medium leading-relaxed mb-8\">Transform\u0103 automat un curs \u00eentreg \u00een alt\u0103 limb\u0103 cu un singur click. P\u0103streaz\u0103 formatarea \u0219i imaginile.<\/p>\n <\/div>\n <div class=\"relative z-10 mt-auto h-48 flex items-center justify-center perspective-1000\">\n <div class=\"absolute w-32 h-40 bg-slate-800 rounded-xl border border-slate-700 shadow-xl transform translate-x-12 rotate-6 opacity-60 flex flex-col p-3 animate-pulse-slow\"><div class=\"w-6 h-6 rounded-md bg-slate-700 mb-2 overflow-hidden border border-slate-600\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/flagcdn.com\/w40\/fr.png?w=800&ssl=1\" alt=\"FR\" class=\"w-full h-full object-cover\"><\/div><div class=\"space-y-2\"><div class=\"h-1.5 bg-slate-700 rounded w-full\"><\/div><div class=\"h-1.5 bg-slate-700 rounded w-2\/3\"><\/div><\/div><\/div>\n <div class=\"absolute w-32 h-40 bg-slate-800 rounded-xl border border-slate-700 shadow-xl transform -translate-x-12 -rotate-6 opacity-60 flex flex-col p-3 animate-pulse-slow\" style=\"animation-delay: 1s\"><div class=\"w-6 h-6 rounded-md bg-slate-700 mb-2 overflow-hidden border border-slate-600\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/flagcdn.com\/w40\/ro.png?w=800&ssl=1\" alt=\"RO\" class=\"w-full h-full object-cover\"><\/div><div class=\"space-y-2\"><div class=\"h-1.5 bg-slate-700 rounded w-full\"><\/div><div class=\"h-1.5 bg-slate-700 rounded w-2\/3\"><\/div><\/div><\/div>\n <div class=\"absolute w-36 h-44 bg-slate-800\/80 backdrop-blur-md rounded-xl border border-[#D91278]\/30 shadow-2xl shadow-[#D91278]\/20 flex flex-col p-4 transform transition-transform hover:-translate-y-2 duration-300\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#D91278] to-purple-500\"><\/div>\n <div class=\"flex justify-between items-center mb-4\">\n <div class=\"flex items-center gap-2\">\n <i data-lucide=\"refresh-ccw\" class=\"w-4 h-4 text-[#D91278] animate-spin-slow shrink-0\"><\/i>\n <span class=\"text-[10px] font-bold text-[#D91278] uppercase\">Translating<\/span>\n <\/div>\n <\/div>\n <div class=\"space-y-3\"><div class=\"h-2 bg-slate-600\/50 rounded w-full overflow-hidden relative\"><div class=\"absolute inset-0 bg-[#D91278]\/40 animate-[shimmer_2s_infinite]\"><\/div><\/div><div class=\"h-2 bg-slate-600\/50 rounded w-3\/4 overflow-hidden relative\"><div class=\"absolute inset-0 bg-[#D91278]\/40 animate-[shimmer_2s_infinite]\" style=\"animation-delay: 0.2s\"><\/div><\/div><div class=\"h-2 bg-slate-600\/50 rounded w-5\/6 overflow-hidden relative\"><div class=\"absolute inset-0 bg-[#D91278]\/40 animate-[shimmer_2s_infinite]\" style=\"animation-delay: 0.4s\"><\/div><\/div><\/div>\n <div class=\"mt-auto flex justify-end\"><div class=\"px-2 py-1 rounded bg-[#D91278]\/10 border border-[#D91278]\/20 text-[#D91278] text-[10px] font-bold\">AI Powered<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"lg:col-span-3 bg-[#6fccf0]\/10 border border-[#6fccf0]\/30 rounded-[2.5rem] p-8 md:p-10 relative overflow-hidden shadow-xl shadow-[#6fccf0]\/10\">\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8 relative z-10\">\n <div class=\"flex items-center gap-4\"><div class=\"w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-[#6fccf0] shadow-md border border-[#6fccf0]\/20\"><i data-lucide=\"globe\" class=\"w-7 h-7\"><\/i><\/div><div><h3 class=\"text-2xl font-bold text-slate-900\">17 Limbi<\/h3><p class=\"text-slate-500 text-xs font-bold uppercase tracking-widest\">Interfa\u021b\u0103 Nativ\u0103<\/p><\/div><\/div>\n <div class=\"bg-[#faed87] text-slate-900 px-4 py-1.5 rounded-md font-black text-xs uppercase tracking-wide border border-yellow-300 shadow-sm transform rotate-2\">Disponibil Acum<\/div>\n <\/div>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 relative z-10\" id=\"lang-grid\"><\/div>\n <div class=\"mt-8 pt-6 border-t border-[#6fccf0]\/20 flex items-center gap-3 text-sm text-slate-500 font-medium\"><div class=\"bg-[#6fccf0] text-white p-1 rounded-md\"><i data-lucide=\"check\" class=\"w-3 h-3\"><\/i><\/div><span>Utilizatorul poate s\u0103 foloseasc\u0103 interfa\u021ba \u00een limba lui nativ\u0103<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 bg-midnight border-t border-slate-800 spotlight-group bg-grid-overlay\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"text-center mb-16\"><h2 class=\"text-sm font-bold text-blue-200\/50 uppercase tracking-widest mb-2\">Recunoa\u0219tere Interna\u021bional\u0103<\/h2><h3 class=\"text-2xl md:text-3xl font-extrabold text-white font-heading text-glow-blue\">Partener de \u00cencredere \u00een Ecosistemul European de Inovare<\/h3><\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <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 reveal delay-100\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <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\" \/><circle cx=\"4\" cy=\"4\" r=\"1\" class=\"opacity-50\" \/><circle cx=\"20\" cy=\"4\" r=\"1\" class=\"opacity-50\" \/><circle cx=\"4\" cy=\"20\" r=\"1\" class=\"opacity-50\" \/><circle cx=\"20\" cy=\"20\" r=\"1\" class=\"opacity-50\" \/><\/svg>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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\">Membru DEC<\/span><\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Comisia European\u0103<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Membru al Grupului de exper\u021bi pentru con\u021binut educa\u021bional digital (DEC) al Comisiei Europene, contribuind activ la standardizarea \u0219i modernizarea resurselor educa\u021bionale la nivelul Uniunii Europene.<\/p><\/div>\n <\/div>\n <\/div>\n \n <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 reveal delay-200\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <div class=\"absolute inset-0 opacity-10 pointer-events-none\"><div class=\"absolute bottom-0 right-10 w-8 h-48 bg-indigo-500\/20 transform skew-y-12\"><\/div><div class=\"absolute bottom-0 right-24 w-8 h-32 bg-indigo-500\/20 transform skew-y-12\"><\/div><div class=\"absolute bottom-0 right-38 w-8 h-64 bg-indigo-500\/20 transform skew-y-12\"><\/div><\/div>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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\">Furnizor Oficial<\/span><\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Consiliul Europei<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Platforma LIVRESQ este utilizat\u0103 pentru crearea \u0219i furnizarea de servicii pentru dezvoltarea \u0219i \u00eentre\u021binerea modulelor e-learning \u0219i servicii asociate de formare. Suntem furnizori oficiali ai Consiliului Europei.<\/p><\/div>\n <\/div>\n <\/div>\n \n <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 reveal delay-300\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <svg class=\"absolute top-0 right-0 w-full h-full text-emerald-500\/5 opacity-30 pointer-events-none\" viewBox=\"0 0 100 100\"><path d=\"M10,50 Q50,10 90,50 T10,50\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"0.5\" \/><path d=\"M10,60 Q50,20 90,60 T10,60\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"0.5\" \/><circle cx=\"50\" cy=\"50\" r=\"2\" fill=\"currentColor\" \/><circle cx=\"20\" cy=\"40\" r=\"1.5\" fill=\"currentColor\" \/><circle cx=\"80\" cy=\"40\" r=\"1.5\" fill=\"currentColor\" \/><\/svg>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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 pentru GovTech<\/span><\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Google Accelerator<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">LIVRESQ selectat pentru inova\u021bie \u00een sectorul public prin integrarea tehnologiilor avansate de Inteligen\u021b\u0103 Artificial\u0103 \u00een procesele educa\u021bionale.<\/p><\/div>\n <\/div>\n <\/div>\n \n <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 reveal delay-400\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-900\/90 to-slate-900\/50\"><\/div>\n <div class=\"absolute -right-8 -top-8 w-40 h-40 opacity-10 rotate-12\"><div class=\"grid grid-cols-2 gap-2 w-full h-full\"><div class=\"bg-sky-400\"><\/div><div class=\"bg-sky-400\"><\/div><div class=\"bg-sky-400\"><\/div><div class=\"bg-sky-400\"><\/div><\/div><\/div>\n <div class=\"relative z-10 p-6 flex flex-col h-full\">\n <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>\n <h4 class=\"text-xl font-bold text-white mb-4\">Microsoft<\/h4>\n <div class=\"flex-grow\"><p class=\"text-sm text-slate-400 leading-relaxed font-medium\">Recunoa\u0219tere global\u0103 pentru impactul LIVRESQ \u00een facilitarea accesului la educa\u021bie digital\u0103 pentru persoanele cu dizabilit\u0103\u021bi.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"py-24 bg-slate-50 border-t border-slate-200 overflow-hidden relative\">\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 justify-between items-end mb-16 gap-6\">\n <div class=\"max-w-3xl\"><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><h2 class=\"text-4xl md:text-5xl font-black text-slate-900 leading-tight font-heading\">Infrastructur\u0103 Blindat\u0103.<br\/><span class=\"text-emerald-600\">Zero Compromisuri.<\/span><\/h2><\/div>\n <div class=\"max-w-sm text-left md:text-right\"><p class=\"text-slate-500 font-medium text-sm leading-relaxed\">Construit pe standarde bancare. Auditat pentru conformitate GDPR. G\u0103zduit exclusiv \u00een UE.<\/p><\/div>\n <\/div>\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\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\">Infrastructur\u0103 Fizic\u0103<\/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\">Transport Date<\/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\">Stocare & Acces<\/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 class=\"flex flex-col gap-6\">\n <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\">\n <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>\n <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\">Proprietate 100%<\/h3><p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest mb-6\">Garan\u021bie Contractual\u0103<\/p><p class=\"text-slate-300 leading-relaxed font-medium mb-8\">Spre deosebire de alte platforme SaaS, LIVRESQ nu revendic\u0103 drepturi asupra con\u021binutului t\u0103u. Materialele create sunt activul companiei tale.<\/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>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n <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\">Audit Complet UE<\/p><\/div>\n <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\">Proiecte Private<\/h4><p class=\"text-xs text-slate-500\">Acces prin Link Securizat<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-24 bg-midnight border-t border-slate-800 spotlight-group bg-grid-overlay\"><div class=\"max-w-3xl mx-auto px-4\"><div class=\"reveal\"><h2 class=\"text-3xl font-bold text-white text-center mb-12 text-glow-blue\">\u00centreb\u0103ri Frecvente<\/h2><div class=\"space-y-4\" id=\"faq-list\"><\/div><\/div><\/div><\/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 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 \n <div class=\"absolute inset-0 opacity-20 animate-[pulse_10s_infinite]\" style=\"background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px;\"><\/div>\n \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\">Al\u0103tur\u0103-te celor <span class=\"text-white\">158,000+<\/span> creatori<\/span><\/div>\n <h2 class=\"text-4xl md:text-6xl font-black text-white leading-[1.05] tracking-tight\">Transform\u0103 ideile \u00een <br\/><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-livresq-fucsia animate-gradient-x\">Experien\u021be Digitale.<\/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\">Acces instant. F\u0103r\u0103 instalare.<\/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\">Export SCORM compatibil cu orice 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\">Licen\u021b\u0103 gratuit\u0103 disponibil\u0103.<\/p><\/div>\n <\/div>\n <div class=\"flex flex-col sm:flex-row gap-4 pt-4\">\n <a href=\"https:\/\/livresq.com\/my-account\/\" class=\"relative inline-flex items-center justify-center px-8 py-4 text-base font-bold rounded-md 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\"><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> Creeaz\u0103 Cont Gratuit<\/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> G\u0103zduit Securizat \u00een Microsoft Azure, Europa<\/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 <script>\n \/\/ --- DATA CONSTANTS ---\n const REVIEWS_POOL = [\n { name: \"Daniela-Cristina Balanescu\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Utilizez platforma Livresq de mai bine de un an. Materialele realizate cu ajutorul platformei s-au dovedit a fi deosebit de eficiente, prin faptul c\u0103 au reunit \u00eentr-un singur loc momentele principale ale unei lec\u021bii.\", initial: \"D\", color: \"blue\" },\n { name: \"Iustinica Teodora Dobric\u0103\", time: \"acum o lun\u0103\", text: \"Dac\u0103 e\u0219ti \u00een c\u0103utarea unei solu\u021bii pentru a crea materiale educa\u021bionale digitale, interactive \u0219i atractive, atunci Livresq este o alegere excelent\u0103. Livresq este incredibil de intuitiv.\", initial: \"I\", color: \"purple\" },\n { name: \"Paul Alexandru\", time: \"recent\", text: \"Pe mine LIVRESQ pur \u0219i simplu m-a furat. Este un instrument educa\u021bional care te ajut\u0103 s\u0103 fii creativ, s\u0103 te dezvol\u021bi profesional \u0219i s\u0103 fii mai aproape de elevi.\", initial: \"P\", color: \"indigo\" },\n { name: \"Cornelia Nicolicea\", time: \"acum 3 s\u0103pt\u0103m\u00e2ni\", text: \"Experien\u021ba mea cu Livresq a fost, \u00een mod surprinz\u0103tor, foarte pl\u0103cut\u0103. Platforma are o interfa\u021b\u0103 intuitiv\u0103. Rezultatul final a fost peste a\u0219tept\u0103ri.\", initial: \"C\", color: \"pink\" },\n { name: \"Dana Ioana Toma\", time: \"acum 2 luni\", text: \"Am reu\u0219it s\u0103 creez lec\u021bii care nu doar c\u0103 transmit informa\u021bii, ci \u0219i stimuleaz\u0103 curiozitatea. Satisfac\u021bia de a vedea un produs finit a meritat tot efortul.\", initial: \"D\", color: \"orange\" },\n { name: \"Elena Malu\u0219\", time: \"acum o s\u0103pt\u0103m\u00e2n\u0103\", text: \"Platforma Livresq.com este un instrument digital valoros. Unul dintre marile avantaje este interfa\u021ba intuitiv\u0103, care permite profesorilor s\u0103 integreze cu u\u0219urin\u021b\u0103 text, imagini, videoclipuri \u0219i chestionare.\", initial: \"E\", color: \"green\" },\n { name: \"Mihaela Stanciu\", time: \"acum 3 zile\", text: \"Am fost pl\u0103cut surprins\u0103 de tot ceea ce am g\u0103sit pe platforma LIVRESQ: structur\u0103, resurse, \u00eendrumare, r\u0103bdare, profesionalism. Recomand cu \u00eencredere.\", initial: \"M\", color: \"teal\" },\n { name: \"Ioan Vasile\", time: \"acum 4 luni\", text: \"Unul dintre marile avantaje este flexibilitatea: po\u021bi integra texte, imagini, fi\u0219iere audio \u0219i video. Livresq este un instrument valoros care modernizeaz\u0103 procesul de predare-\u00eenv\u0103\u021bare.\", initial: \"I\", color: \"blue\" },\n { name: \"Iuliana Ciubuc\", time: \"acum 5 zile\", text: \"Livresq este un instrument revolu\u021bionar pentru cadrele didactice. Biblioteca sa vast\u0103 de resurse \u0219i \u0219abloane economise\u0219te timp \u0219i inspir\u0103 creativitatea.\", initial: \"I\", color: \"cyan\" },\n { name: \"Gabriela Serban\", time: \"acum o lun\u0103\", text: \"Mi-a placut in mod deosebit faptul ca poti integra o varietate de resurse multimedia. Recomand cu caldura platforma Livresq tuturor profesorilor.\", initial: \"G\", color: \"purple\" },\n { name: \"Simona Maria\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Platforma Livresq mi se pare extrem de util\u0103 pentru profesori \u0219i elevi. Este u\u0219or de folosit, chiar \u0219i pentru cei care nu au cuno\u0219tin\u021be avansate de IT.\", initial: \"S\", color: \"red\" },\n { name: \"Nita Victorita\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Am descoperit LIVRESQ \u0219i pot spune c\u0103 mi-a schimbat complet modul de a preda! Elevii sunt mult mai aten\u021bi \u0219i implica\u021bi la ore.\", initial: \"N\", color: \"orange\" },\n { name: \"Geta Craciun\", time: \"acum 3 luni\", text: \"Livresq este o platform\u0103 excelent\u0103. Suportul tehnic este prompt, iar comunitatea de utilizatori este activ\u0103 \u0219i dispus\u0103 s\u0103 ajute.\", initial: \"G\", color: \"pink\" },\n { name: \"Marinela Mihaila\", time: \"acum 6 luni\", text: \"Livresq este o platform\u0103 revolu\u021bionar\u0103 care transform\u0103 educa\u021bia digital\u0103. Diversitatea \u0219abloanelor stimuleaz\u0103 creativitatea, facilit\u00e2nd adaptarea con\u021binutului.\", initial: \"M\", color: \"indigo\" },\n { name: \"Andreea T\", time: \"acum 2 luni\", text: \"Livresq este un instrument excep\u021bional. Platforma este intuitiv\u0103 \u0219i u\u0219or de utilizat, permi\u021b\u00e2nd profesorilor s\u0103 dezvolte lec\u021bii atractive.\", initial: \"A\", color: \"green\" },\n { name: \"Iuliana Preda\", time: \"recent\", text: \"Platforma Livresq este extrem de util\u0103 \u0219i intuitiv\u0103! M-a ajutat s\u0103 creez materiale educa\u021bionale interactive \u00eentr-un mod simplu \u0219i eficient.\", initial: \"I\", color: \"blue\" },\n { name: \"Ana Maria David\", time: \"acum 4 zile\", text: \"Livresq este o platform\u0103 excelent\u0103! Apreciez \u00een mod deosebit biblioteca de resurse \u0219i posibilitatea de a personaliza materialele \u00een func\u021bie de nevoile clasei.\", initial: \"A\", color: \"teal\" },\n { name: \"Maria Ciobotaru\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Cred c\u0103 utilizarea la clas\u0103 a materialelor create cu ajutorul Livresq va face lec\u021biile mult mai atractive, iar elevii vor re\u021bine mult mai u\u0219or informa\u021biile transmise.\", initial: \"M\", color: \"yellow\" },\n { name: \"Camelia Mara\", time: \"acum 3 luni\", text: \"Livresq este o platform\u0103 educa\u021bional\u0103 remarcabil\u0103. Interfa\u021ba prietenoas\u0103 faciliteaz\u0103 crearea de lec\u021bii interactive, captivante \u0219i personalizate.\", initial: \"C\", color: \"purple\" },\n { name: \"Gabriela Donose\", time: \"acum o lun\u0103\", text: \"Interfa\u021ba prietenoas\u0103 permite crearea u\u0219oar\u0103 de lec\u021bii interactive \u0219i atractive, f\u0103r\u0103 a necesita cuno\u0219tin\u021be tehnice avansate. Recomand cu \u00eencredere!\", initial: \"G\", color: \"red\" },\n { name: \"Adriana Balaj\", time: \"acum 5 luni\", text: \"Livresq este o platform\u0103 educa\u021bional\u0103 excelent\u0103. Biblioteca variat\u0103 de resurse \u0219i suportul tehnic prompt sunt mari avantaje.\", initial: \"A\", color: \"cyan\" },\n { name: \"Madalina Hodorog\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"Platforma Livresq este un instrument educa\u021bional extrem de util \u0219i inovator! Este o solu\u021bie excelent\u0103 pentru modernizarea procesului de predare-\u00eenv\u0103\u021bare.\", initial: \"M\", color: \"indigo\" },\n { name: \"Anca Stefan\", time: \"acum o s\u0103pt\u0103m\u00e2n\u0103\", text: \"Livresq este o platform\u0103 excelent\u0103 pentru crearea de con\u021binut educa\u021bional interactiv! Este intuitiv\u0103, u\u0219or de folosit \u0219i ofer\u0103 o mul\u021bime de op\u021biuni creative.\", initial: \"A\", color: \"green\" },\n { name: \"Mariana Oprea\", time: \"recent\", text: \"Livresq este o platform\u0103 excelent\u0103 pentru crearea de materiale educa\u021bionale interactive. Este u\u0219or de folosit, intuitiv\u0103 \u0219i foarte util\u0103 pentru profesori.\", initial: \"M\", color: \"blue\" },\n { name: \"Elena Gheorghe\", time: \"recent\", text: \"Livresq este o platform\u0103 excelent\u0103 pentru crearea de con\u021binut educa\u021bional interactiv. Interfa\u021ba prietenoas\u0103 \u0219i resursele diverse fac predarea mult mai atractiv\u0103.\", initial: \"E\", color: \"pink\" },\n { name: \"Daniela Popescu\", time: \"acum 3 zile\", text: \"Livresq este o platform\u0103 excelent\u0103, intuitiv\u0103 \u0219i foarte util\u0103 pentru crearea de con\u021binut educa\u021bional interactiv. Recomand cu \u00eencredere!\", initial: \"D\", color: \"orange\" },\n { name: \"Alina Matei\", time: \"acum 4 zile\", text: \"O platform\u0103 intuitiv\u0103 \u0219i extrem de util\u0103 pentru crearea de con\u021binut educa\u021bional interactiv. Recomand cu drag Livresq!\", initial: \"A\", color: \"teal\" },\n { name: \"Cristina Ionescu\", time: \"acum o s\u0103pt\u0103m\u00e2n\u0103\", text: \"Livresq este o platform\u0103 excelent\u0103, intuitiv\u0103 \u0219i foarte util\u0103 pentru educa\u021bia digital\u0103. Recomand cu \u00eencredere!\", initial: \"C\", color: \"yellow\" },\n { name: \"Ana Popa\", time: \"acum 2 s\u0103pt\u0103m\u00e2ni\", text: \"O platform\u0103 excelent\u0103 pentru crearea de con\u021binut interactiv! Foarte util\u0103 \u0219i u\u0219or de folosit.\", initial: \"A\", color: \"purple\" },\n { name: \"Maria Radu\", time: \"acum 3 s\u0103pt\u0103m\u00e2ni\", text: \"Livresq este un instrument minunat pentru educa\u021bie. Interactiv, modern \u0219i u\u0219or de utilizat!\", initial: \"M\", color: \"red\" },\n { name: \"Elena Dobre\", time: \"acum o lun\u0103\", text: \"O experien\u021b\u0103 grozav\u0103 cu Livresq! Platforma este foarte bine structurat\u0103 \u0219i util\u0103.\", initial: \"E\", color: \"indigo\" },\n { name: \"Carmen Stanciu\", time: \"acum 2 luni\", text: \"Livresq ofer\u0103 posibilit\u0103\u021bi nelimitate de crea\u021bie. Un instrument indispensabil pentru profesori!\", initial: \"C\", color: \"green\" },\n { name: \"Ioana Munteanu\", time: \"acum 2 luni\", text: \"Foarte mul\u021bumit\u0103 de Livresq! O platform\u0103 care u\u0219ureaz\u0103 munca profesorilor.\", initial: \"I\", color: \"blue\" },\n { name: \"Laura Dumitru\", time: \"acum 3 luni\", text: \"Livresq este viitorul educa\u021biei digitale. Simplu, eficient \u0219i creativ!\", initial: \"L\", color: \"cyan\" },\n { name: \"Roxana Marin\", time: \"acum 3 luni\", text: \"O platform\u0103 de nota 10! Recomand Livresq tuturor celor pasiona\u021bi de educa\u021bie.\", initial: \"R\", color: \"pink\" },\n { name: \"Simona Ilie\", time: \"acum 4 luni\", text: \"Livresq m-a ajutat s\u0103 creez lec\u021bii minunate. Mul\u021bumesc pentru aceast\u0103 resurs\u0103!\", initial: \"S\", color: \"orange\" },\n { name: \"Mihaela Pop\", time: \"acum 5 luni\", text: \"Un instrument excelent, foarte u\u0219or de \u00eenv\u0103\u021bat \u0219i utilizat. Felicit\u0103ri Livresq!\", initial: \"M\", color: \"teal\" },\n { name: \"Andreea Vasilescu\", time: \"acum 6 luni\", text: \"Livresq este partenerul ideal \u00een educa\u021bia online. Recomand cu toat\u0103 \u00eencrederea!\", initial: \"A\", color: \"purple\" },\n { name: \"Diana Stoica\", time: \"acum 6 luni\", text: \"O platform\u0103 complet\u0103 \u0219i complex\u0103, dar foarte accesibil\u0103. Bravo Livresq!\", initial: \"D\", color: \"red\" },\n { name: \"Cristina Voinea\", time: \"acum 7 luni\", text: \"Livresq transform\u0103 \u00eenv\u0103\u021barea \u00eentr-o joac\u0103. Elevii mei sunt \u00eenc\u00e2nta\u021bi!\", initial: \"C\", color: \"blue\" }\n ];\n const PARTNERS = [\"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\",\"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\",\"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\",\"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\",\"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\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/11.png?fit=225%2C62&ssl=1\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/12.png?fit=225%2C62&ssl=1\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/13.png?fit=225%2C62&ssl=1\",\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/06\/14.png?fit=225%2C62&ssl=1\"];\n \n \/\/ UPDATED TEMPLATES ARRAY (ALL 8 ITEMS)\n const TEMPLATES = [\n { title: \"Glassmorphism\", subtitle: \"Modern & Intuitiv\", desc: \"Design modern cu efecte de sticl\u0103 \u0219i culori vii. Ideal pentru onboarding \u0219i prezent\u0103ri de produs.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/4.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e920017749000957c1aa\" },\n { title: \"Neomemphis\", subtitle: \"\u00cendr\u0103zne\u021b & Energic\", desc: \"Forme geometrice \u0219i culori energice. Perfect pentru traininguri de \\\"soft skills\\\", experien\u021ba clien\u021bilor \u0219i conformitate.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/Neomemphis.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e890017749000957c1a8\" },\n { title: \"Dark Cinematic\", subtitle: \"Impact Dramatic\", desc: \"Contrast ridicat \u0219i iluminare dramatic\u0103. Excelent pentru storytelling, lans\u0103ri de produse premium \u0219i scenarii de v\u00e2nz\u0103ri.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/2.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e95d017749000957c1ab\" },\n { title: \"Minimalism\", subtitle: \"Claritate & Eficien\u021b\u0103\", desc: \"Linii curate, spa\u021bii albe ample \u0219i elemente naturale. Ideal pentru practici sustenabile, gestiune inventar \u0219i siguran\u021b\u0103.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/3.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/688dbbb6017749000957b87a\" },\n { title: \"Soft Glass Realism\", subtitle: \"Elegan\u021b\u0103 & Textur\u0103\", desc: \"Panouri subtile din sticl\u0103 mat\u0103 \u0219i palet\u0103 proasp\u0103t\u0103. Potrivit pentru micro\u00eenv\u0103\u021bare sezonier\u0103 \u0219i programe de cultur\u0103.\", img: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/08\/1.png?fit=800%2C664&ssl=1\", link: \"https:\/\/library.livresq.com\/details\/6891e837017749000957c1a4\" },\n { title: \"Bauhaus\", subtitle: \"Geometric & Func\u021bional\", desc: \"Stil geometric \u00eendr\u0103zne\u021b cu contrast puternic. Structur\u0103 clar\u0103, ideal\u0103 pentru cursuri corporate.\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Bauhaus_LIVRESQ.png\", link: \"https:\/\/library.livresq.com\/details\/6942858d507a550009c83e64\" },\n { title: \"Black and Gold\", subtitle: \"\u0218tiin\u021b\u0103 High-Tech\", desc: \"Elegan\u021b\u0103 \u00een dark-mode cu accente aurii \u0219i layout \u0219tiin\u021bific. Perfect pentru farma \u0219i biotech.\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Black_Gold.png\", link: \"https:\/\/library.livresq.com\/details\/693aac01507a550009c815eb\" },\n { title: \"Biophilic\", subtitle: \"Organic & Natural\", desc: \"Design organic ce \u00eembin\u0103 natura cu medicina. Fotografii botanice pentru cursuri de s\u0103n\u0103tate.\", img: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/12\/Healthcare_Biophilic.png\", link: \"https:\/\/library.livresq.com\/details\/6941208f507a550009c837b0\" }\n ];\n\n \/\/ HERO CAROUSEL DATA (Matches React)\n const HERO_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: \"Natur\u0103\", 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: \"Arhitectur\u0103\", 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 heroActiveIndex = 0;\n let heroMouse = { x: 0, y: 0 };\n \n \/\/ Pricing Data\n const PRICING = {\n monthly: [\n { id: \"corporate\", title: \"Corporate & L&D\", sub: \"PENTRU COMPANII\", desc: \"Digitalizeaz\u0103 induction-ul \u0219i trainingurile de compliance. Raportare SCORM complet\u0103.\", price: \"845.79\u20ac\", period: \"\/ seat \/ an\", features: [\"Gestionare seats echip\u0103\", \"Onboarding & Training\", \"Customer success dedicat\"], color: \"blue\", icon: \"building-2\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Enterprise Premium\", annualOnly: true },\n { id: \"academic\", title: \"Academic & K-12\", sub: \"PENTRU PROFESORI\", desc: \"Creeaz\u0103 lec\u021bii care \u021bin elevii aten\u021bi. Acceseaz\u0103 biblioteca public\u0103 cu resurse gratuite.\", price: \"35.26\u20ac\", period: \"\/ utilizator \/ an\", features: [\"Num\u0103r de proiecte nelimitat\", \"Licen\u021be Academice Subven\u021bionate\", \"Biblioteca cu peste 17k Surse de materiale educa\u021bionale\"], color: \"pink\", icon: \"graduation-cap\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaza Cont Academic Premium\", subz: true, annualOnly: true },\n { id: \"freelancer\", title: \"Freelancers\", sub: \"PENTRU INDEPENDEN\u021aI\", desc: \"Livreaz\u0103 proiecte clien\u021bilor rapid. F\u0103r\u0103 instalare, lucrezi de oriunde.\", price: \"39\u20ac\", period: \"\/ utilizator \/ lun\u0103\", features: [\"Num\u0103r de proiecte nelimitat\", \"Personalizare cu orice sigle dore\u0219ti\", \"Faci ce vrei cu materialul creat, \u00eel vinzi, \u00eel oferi gratuit, e alegerea ta\"], color: \"orange\", icon: \"pen-tool\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Freelance Premium\" }\n ],\n yearly: [\n { id: \"corporate\", title: \"Corporate & L&D\", sub: \"PENTRU COMPANII\", desc: \"Digitalizeaz\u0103 induction-ul \u0219i trainingurile de compliance. Raportare SCORM complet\u0103.\", price: \"845.79\u20ac\", period: \"\/ seat \/ an\", features: [\"Gestionare seats echip\u0103\", \"Onboarding & Training\", \"Customer success dedicat\"], color: \"blue\", icon: \"building-2\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Enterprise Premium\" },\n { id: \"academic\", title: \"Academic & K-12\", sub: \"PENTRU PROFESORI\", desc: \"Creeaz\u0103 lec\u021bii care \u021bin elevii aten\u021bi. Acceseaz\u0103 biblioteca public\u0103 cu resurse gratuite.\", price: \"35.26\u20ac\", period: \"\/ utilizator \/ an\", features: [\"Num\u0103r de proiecte nelimitat\", \"Licen\u021be Academice Subven\u021bionate\", \"Biblioteca cu peste 17k Surse de materiale educa\u021bionale\"], color: \"pink\", icon: \"graduation-cap\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaza Cont Academic Premium\", subz: true },\n { id: \"freelancer\", title: \"Freelancers\", sub: \"PENTRU INDEPENDEN\u021aI\", desc: \"Livreaz\u0103 proiecte clien\u021bilor rapid. F\u0103r\u0103 instalare, lucrezi de oriunde.\", price: \"397\u20ac\", period: \"\/ utilizator \/ an\", features: [\"Num\u0103r de proiecte nelimitat\", \"Personalizare cu orice sigle dore\u0219ti\", \"Faci ce vrei cu materialul creat, \u00eel vinzi, \u00eel oferi gratuit, e alegerea ta\"], color: \"orange\", icon: \"pen-tool\", link: \"https:\/\/livresq.com\/ro\/pricing\/\", btn: \"Activeaz\u0103 Cont Freelance Premium\" }\n ]\n };\n\n const pricingThemes = {\n blue: { \n accent: 'bg-blue-500', \n glow: 'shadow-[0_0_30px_rgba(59,130,246,0.1)]', \n iconBg: 'bg-blue-500\/10 text-blue-400 border-blue-500\/20', \n badge: 'border-blue-500\/30 text-blue-300 bg-blue-500\/10', \n btn: 'bg-blue-600 hover:bg-blue-500' \n },\n pink: { \n accent: 'bg-livresq-fucsia', \n glow: 'shadow-[0_0_30px_rgba(217,18,120,0.1)]', \n iconBg: 'bg-pink-500\/10 text-pink-400 border-pink-500\/20', \n badge: 'border-pink-500\/30 text-pink-300 bg-pink-500\/10', \n btn: 'bg-livresq-fucsia hover:bg-pink-500' \n },\n orange: { \n accent: 'bg-orange-500', \n glow: 'shadow-[0_0_30px_rgba(249,115,22,0.1)]', \n iconBg: 'bg-orange-500\/10 text-orange-400 border-orange-500\/20', \n badge: 'border-orange-500\/30 text-orange-300 bg-orange-500\/10', \n btn: 'bg-orange-600 hover:bg-orange-500' \n }\n };\n\n const INDUSTRY_CARDS = [\n {icon: 'landmark', title: \"B\u0103nci & Asigur\u0103ri\", desc: \"Sector reglementat & client\"}, {icon: 'zap', title: \"Energie\", desc: \"Sustenabilitate & e-Learning\"}, \n {icon: 'shopping-bag', title: \"Retail & Consumer\", desc: \"V\u00e2nz\u0103ri & produse\"}, {icon: 'truck', title: \"Logistic\u0103\", desc: \"Siguran\u021b\u0103 opera\u021bional\u0103\"},\n {icon: 'cpu', title: \"Tehnologie\", desc: \"Competen\u021be digitale\"}, {icon: 'factory', title: \"Industrie\", desc: \"Produc\u021bie & Protec\u021bia Muncii\"},\n {icon: 'headphones', title: \"Servicii\", desc: \"Managementul calit\u0103\u021bii\"}\n ];\n const EDU_FEATURES = [\"Creare de RED (resurse educa\u021bionale deschise)\", \"Creare de lec\u021bii si cursuri\", \"Manuale digitale\", \"Proiecte Erasmus+ \u0219i eTwinning\", \"Proiecte Europene\", \"Lectii interactive omologate\", \"Campanii na\u021bionale de con\u0219tientizare\"];\n const FAQ = [\n {q: \"Pot s\u0103 \u00eencep gratuit?\", a: \"Da, oferim o licen\u021b\u0103 gratuit\u0103, cu acces la func\u021bionalit\u0103\u021bi de baz\u00e2. Nu trebuie card.\"}, {q: \"Func\u021bioneaz\u0103 pe orice LMS?\", a: \"Da, pachetele exportate din LIVRESQ sunt compatibile cu standardele SCORM 1.2 \u0219i 2004.\"},\n {q: \"Trebuie s\u0103 instalez ceva?\", a: \"Nu. LIVRESQ este o solu\u021bie bazat\u0103 pe cloud \u0219i ruleaz\u0103 100% \u00een browser.\"}, {q: \"Ce se \u00eent\u00e2mpl\u0103 cu materialele mele?\", a: \"Materialele create \u00ee\u021bi apar\u021bin \u00een totalitate. Le po\u021bi exporta, desc\u0103rca \u0219i p\u0103stra pe propriul calculator.\"}\n ];\n \n \/\/ Lessons Data for Academic Column\n const COL1 = [\n { sub: \"Matematic\u0103\", t: \"Teorema lui Pitagora\", l: \"Gimnaziu\", i: \"calculator\", c: \"bg-blue-100 text-blue-600\" },\n { sub: \"Biologie\", t: \"Structura Celulei\", l: \"Liceu\", i: \"microscope\", c: \"bg-green-100 text-green-600\" },\n { sub: \"Istorie\", t: \"Dacia Roman\u0103\", l: \"Primar\", i: \"book-open\", c: \"bg-amber-100 text-amber-600\" },\n { sub: \"Geografie\", t: \"Relieful Europei\", l: \"Gimnaziu\", i: \"globe-2\", c: \"bg-cyan-100 text-cyan-600\" }\n ];\n const COL2 = [\n { sub: \"Chimie\", t: \"Tabelul Periodic\", l: \"Liceu\", i: \"flask-conical\", c: \"bg-purple-100 text-purple-600\" },\n { sub: \"Literatur\u0103\", t: \"Genul Lyric\", l: \"Liceu\", i: \"book-open-check\", c: \"bg-pink-100 text-pink-600\" },\n { sub: \"Fizic\u0103\", t: \"Legile lui Newton\", l: \"Gimnaziu\", i: \"activity\", c: \"bg-indigo-100 text-indigo-600\" },\n { sub: \"Arte\", t: \"Curente Artistice\", l: \"Liceu\", i: \"palette\", c: \"bg-rose-100 text-rose-600\" }\n ];\n \n const LMS_LIST = [\n \"Moodle\", \"Blackboard\", \"Canvas\", \"CoffeeLMS\", \"SAP SuccessFactors\",\n \"Cornerstone\", \"Docebo\", \"TalentLMS\", \"Brightspace\",\n \"Schoology\", \"Totara\", \"Adobe Learning\"\n ];\n\n const LANG_LIST = [\n { code: \"gb\", name: \"Englez\u0103\" },\n { code: \"sa\", name: \"Arab\u0103\" }, { code: \"bg\", name: \"Bulgar\u0103\" },\n { code: \"cn\", name: \"Chinez\u0103\" }, { code: \"kr\", name: \"Coreean\u0103\" },\n { code: \"hr\", name: \"Croat\u0103\" }, \n { code: \"fr\", name: \"Francez\u0103\" }, { code: \"de\", name: \"German\u0103\" },\n { code: \"it\", name: \"Italian\u0103\" }, { code: \"hu\", name: \"Maghiar\u0103\" },\n { code: \"pl\", name: \"Polonez\u0103\" }, { code: \"pt\", name: \"Portughez\u0103\" },\n { code: \"ro\", name: \"Rom\u00e2n\u0103\" }, { code: \"ru\", name: \"Rus\u0103\" },\n { code: \"es\", name: \"Spaniol\u0103\" }, { code: \"se\", name: \"Suedez\u0103\" },\n { code: \"tr\", name: \"Turc\u0103\" }\n ];\n \n let currentCycle = 'yearly';\n\n \/\/ --- INIT ---\n document.addEventListener('DOMContentLoaded', () => {\n \n \/\/ --- 1. OPTIMIZED NAVBAR SCROLL ---\n let lastKnownScrollPosition = 0;\n let ticking = false;\n const nav = document.getElementById('main-nav');\n const skew = document.getElementById('nav-skew');\n const brand = document.getElementById('nav-brand');\n const logo = document.getElementById('nav-logo');\n\n function doScroll(scrollPos) {\n if(scrollPos > 10) {\n nav.classList.add('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n nav.classList.remove('bg-[#1379D1]');\n skew.classList.replace('w-[360px]', 'w-[290px]');\n brand.classList.replace('pl-10', 'pl-8');\n logo.classList.replace('h-[32px]', 'h-[28px]');\n } else {\n nav.classList.remove('bg-[#1379D1]\/95', 'backdrop-blur-md', 'shadow-lg');\n nav.classList.add('bg-[#1379D1]');\n skew.classList.replace('w-[290px]', 'w-[360px]');\n brand.classList.replace('pl-8', 'pl-10');\n logo.classList.replace('h-[28px]', 'h-[32px]');\n }\n }\n\n window.addEventListener('scroll', function(e) {\n lastKnownScrollPosition = window.scrollY;\n if (!ticking) {\n window.requestAnimationFrame(function() {\n doScroll(lastKnownScrollPosition);\n ticking = false;\n });\n ticking = true;\n }\n });\n\n \/\/ --- 2. GLOBAL MOUSE COORDINATOR (Optimization 4) ---\n \/\/ Consolidates Spotlight and Constellation mouse tracking\n let spotlightRequest = null;\n let globalMouse = { x: -1000, y: -1000 };\n\n function updateGlobalMouse() {\n \/\/ Update Spotlight CSS Variables\n \/\/ We use document.body to catch all spotlight cards efficiently\n const cards = document.getElementsByClassName(\"spotlight-card\");\n \/\/ Convert live HTMLCollection to array for safe iteration if DOM changes\n Array.from(cards).forEach(card => {\n const rect = card.getBoundingClientRect();\n const x = globalMouse.x - rect.left;\n const y = globalMouse.y - rect.top;\n card.style.setProperty('--mouse-x', `${x}px`);\n card.style.setProperty('--mouse-y', `${y}px`);\n });\n\n \/\/ Update Hero Parallax if present\n const hero = document.getElementById('hero-section');\n if(hero) {\n const rect = hero.getBoundingClientRect();\n const x = globalMouse.x - rect.left;\n const y = globalMouse.y - rect.top;\n const heroSpotlight = document.getElementById('hero-spotlight');\n if(heroSpotlight) {\n heroSpotlight.style.background = `radial-gradient(800px circle at ${x}px ${y}px, rgba(56, 189, 248, 0.1), transparent 40%)`;\n }\n \/\/ Parallax Calc\n const xNorm = (globalMouse.x - rect.left - rect.width \/ 2) \/ (rect.width \/ 2);\n const yNorm = (globalMouse.y - rect.top - rect.height \/ 2) \/ (rect.height \/ 2);\n heroMouse = { x: xNorm, y: yNorm };\n updateHeroParallax();\n }\n \n spotlightRequest = null;\n }\n\n document.addEventListener('mousemove', (e) => {\n globalMouse.x = e.clientX;\n globalMouse.y = e.clientY;\n\n if (!spotlightRequest) {\n spotlightRequest = requestAnimationFrame(updateGlobalMouse);\n }\n });\n\n \/\/ 3. Inject Partners & Reviews - REMOVED (Optimization 2: Baked HTML)\n \/\/ The HTML for partners is static for LCP. \n \/\/ Reviews logic restored below to overwrite static placeholder for randomization.\n\n \/\/ 4. RESTORE RANDOMIZED REVIEWS (Fix for Bug 1)\n const shuffledReviews = [...REVIEWS_POOL].sort(() => 0.5 - Math.random()).slice(0, 6);\n document.getElementById('reviews-grid').innerHTML = shuffledReviews.map(r => {\n const colors = ['bg-[#2563eb]', 'bg-[#0ea5e9]', 'bg-[#7c3aed]', 'bg-[#db2777]', 'bg-[#ea580c]', 'bg-[#059669]'];\n const color = colors[r.name.length % colors.length];\n return `\n <div class=\"spotlight-card bg-[#151e2e] border border-white\/5 p-8 rounded-2xl flex flex-col relative overflow-hidden group shadow-lg h-full\">\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 ${color} flex items-center justify-center font-bold text-lg text-white shadow-lg border border-white\/10 shrink-0\">${r.initial}<\/div>\n <div><h4 class=\"font-bold text-white text-[15px] leading-tight mb-1\">${r.name}<\/h4><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><span class=\"text-xs text-slate-500 font-medium\">${r.time}<\/span><\/div>\n <\/div>\n <p class=\"text-slate-300 text-[15px] leading-relaxed flex-grow\">\"${r.text}\"<\/p>\n <\/div>\n <\/div>`;\n }).join('');\n\n \/\/ 5. Inject Pricing & Features\n renderPricing('yearly');\n document.getElementById('industry-grid').innerHTML = INDUSTRY_CARDS.map(i => `<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 group\/item cursor-default\"><div class=\"text-blue-300 bg-blue-500\/10 border border-blue-500\/20 p-2 rounded-lg shrink-0 shadow-sm group-hover\/item:bg-blue-500\/20 group-hover\/item:text-white transition-colors\"><i data-lucide=\"${i.icon}\" class=\"w-5 h-5\"><\/i><\/div><div><h4 class=\"text-sm font-bold text-white leading-tight\">${i.title}<\/h4><p class=\"text-[11px] text-slate-500 mt-0.5 font-medium group-hover\/item:text-slate-400\">${i.desc}<\/p><\/div><\/div>`).join('');\n document.getElementById('edu-features').innerHTML = EDU_FEATURES.map(f => `<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 group cursor-default hover:bg-slate-800\"><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\">${f}<\/span><\/div>`).join('');\n\n \/\/ 6. Inject Templates\n document.getElementById('templates-grid').innerHTML = TEMPLATES.map(t => `<a href=\"${t.link}\" target=\"_blank\" class=\"group flex flex-col h-full cursor-pointer\"><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 src=\"${t.img}\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-out will-change-transform\" loading=\"lazy\" decoding=\"async\"><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\">${t.subtitle}<\/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\">${t.title}<\/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\">${t.desc}<\/p><\/div><\/a>`).join('');\n \n \/\/ 7. Inject Academic Columns\n const renderLesson = (i) => `<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 ${i.c}\"><i data-lucide=\"${i.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\">${i.sub}<\/p><span class=\"inline-block w-1.5 h-1.5 rounded-full bg-emerald-400\"><\/span><\/div><h4 class=\"font-bold text-slate-800 text-sm leading-tight truncate\">${i.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\">${i.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\">Editabil<\/span><\/div><\/div><\/div>`;\n const c1 = [...COL1, ...COL1, ...COL1].map(renderLesson).join('');\n const c2 = [...COL2, ...COL2, ...COL2].map(renderLesson).join('');\n document.getElementById('aca-col-1').innerHTML = c1;\n document.getElementById('aca-col-2').innerHTML = c2;\n \n \/\/ 8. Inject Tech Specs\n document.getElementById('lms-grid').innerHTML = LMS_LIST.map(l => `<div class=\"spotlight-card glass-panel-midnight p-4 rounded-xl flex items-center justify-center transition-all duration-300 cursor-default hover:shadow-md relative overflow-hidden\"><span class=\"font-bold text-slate-400 hover:text-white transition-colors text-sm relative z-10\">${l}<\/span><\/div>`).join('') + `<div class=\"spotlight-card glass-panel-midnight p-4 rounded-xl flex items-center justify-center transition-all duration-300 cursor-default hover:shadow-md relative overflow-hidden\"><span class=\"font-bold text-slate-400 hover:text-white transition-colors text-sm relative z-10\">+390 Altele<\/span><\/div>`;\n document.getElementById('lang-grid').innerHTML = LANG_LIST.map(l => `<div class=\"group flex items-center gap-2 bg-white\/80 hover:bg-white border border-[#6fccf0]\/20 hover:border-[#6fccf0] rounded-xl p-2 transition-all duration-300 cursor-default shadow-sm hover:shadow-md\"><div class=\"w-6 h-6 rounded-md overflow-hidden border border-slate-100 shrink-0\"><img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/${l.code}.png\" class=\"w-full h-full object-cover\" loading=\"lazy\"><\/div><span class=\"text-sm font-bold text-slate-600 group-hover:text-[#0092d6]\">${l.name}<\/span><\/div>`).join('');\n\n \/\/ 9. Inject Features (WordPress Safe)\n const feats = [ \n { t: \"Design & Structur\u0103\", items: [{t:\"\u0218abloane\", d:\"Con\u021binut editabil gata creat.\"}, {t:\"Imagini & Galerii\", d:\"Upload propriu sau bibliotec\u0103.\"}, {t:\"Celule de Text\", d:\"Editor avansat pentru formatare.\"}, {t:\"Tabele & iFrame\", d:\"Organizeaz\u0103 date \u0219i con\u021binut.\"}, {t:\"Editor Matematic\", d:\"Formule complexe (TeX\/MathJax).\"}, {t:\"Import Con\u021binut\", d:\"Import\u0103 resurse din alte surse.\"}] }, \n { t: \"Interactivitate & Engagement\", items: [{t:\"Chestionare\", d:\"Multiple tipuri de teste interactive.\"}, {t:\"Gamification\", d:\"Rebusuri \u0219i jocuri de cuvinte.\"}, {t:\"Video & Audio\", d:\"Multimedia integrat\u0103 nativ.\"}, {t:\"Pop-up & Hyperlink\", d:\"Straturi adi\u021bionale de informa\u021bie.\"}, {t:\"Asisten\u021bi Virtuali\", d:\"Personaje ghid pentru feedback.\"}, {t:\"Control Navigare\", d:\"Bariere \u0219i condi\u021bion\u0103ri de parcurs.\"}] }, \n { t: \"Tehnologie & Distribu\u021bie\", items: [{t:\"Suit\u0103 AI Complet\u0103\", d:\"Generator lec\u021bii, DALL-E, Avatar Video.\"}, {t:\"Export SCORM\", d:\"Compatibil 1.2 & 2004.\"}, {t:\"Import SCORM\", d:\"Editeaz\u0103 pachete existente.\"}, {t:\"Traducere & TTS\", d:\"Localizare automat\u0103.\"}, {t:\"Colaborare Live\", d:\"Lucru \u00een echip\u0103 \u00een timp real.\"}, {t:\"Certificate\", d:\"Generare automat\u0103 de diplome.\"}] } \n ];\n const featuresContainer = document.getElementById('features-accordion');\n if (featuresContainer) {\n let html = '';\n feats.forEach((f, idx) => {\n html += `\n <div class=\"bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300\">\n <details class=\"group\" ${idx === 0 ? '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 <span class=\"text-xl font-bold text-slate-900 tracking-tight\">${f.t}<\/span>\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 grid md:grid-cols-3 gap-4 mt-2\">\n `;\n f.items.forEach(item => { html += `<div class=\"bg-white p-5 rounded-xl border border-slate-200 hover:border-blue-400 transition-colors duration-300 shadow-sm 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\" style=\"color: #0f172a; font-weight: 700;\">${item.t}<\/h4><div class=\"text-sm font-medium\" style=\"color: #64748b; font-size: 0.875rem; font-weight: 500; display: block;\">${item.d}<\/div><\/div><\/div>`; });\n html += `<\/div><\/details><\/div>`;\n });\n featuresContainer.innerHTML = html;\n }\n\n document.getElementById('faq-list').innerHTML = FAQ.map(f => `<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\">${f.q} <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\">${f.a}<\/p><\/div><\/details>`).join('');\n\n \/\/ --- 10. OPTIMIZED CONSTELLATION CANVAS ---\n const canvas = document.getElementById('constellation-canvas');\n if(canvas) {\n const ctx = canvas.getContext('2d');\n let width, height;\n const stars = [];\n const platforms = [\"LearningApps\", \"PhET\", \"Wordwall\", \"Quizlet\", \"StoryJumper\", \"EdPuzzle\", \"Genially\", \"Kahoot\", \"Prezi\", \"Vimeo\", \"YouTube\", \"Google Forms\"];\n \n const initStars = () => {\n width = canvas.width = canvas.offsetWidth;\n height = canvas.height = canvas.offsetHeight;\n stars.length = 0;\n platforms.forEach(p => stars.push({label: p, x: Math.random()*width, y: Math.random()*height, vx: (Math.random()-0.5)*0.3, vy: (Math.random()-0.5)*0.3, size: Math.random()*2+1.5}));\n for(let i=0; i<8; i++) stars.push({label:\"\", x: Math.random()*width, y: Math.random()*height, vx: (Math.random()-0.5)*0.2, vy: (Math.random()-0.5)*0.2, size: Math.random()*1.5});\n };\n initStars();\n \n \/\/ Uses Global Mouse\n let isCanvasInView = false;\n let canvasAnimId = null;\n\n const animateCanvas = () => {\n if(!isCanvasInView) return;\n ctx.clearRect(0,0,width,height);\n stars.forEach((s, i) => {\n s.x+=s.vx; s.y+=s.vy;\n if(s.x<0||s.x>width)s.vx*=-1; if(s.y<0||s.y>height)s.vy*=-1;\n \n \/\/ Use globalMouse instead of local tracking\n const rect = canvas.getBoundingClientRect();\n \/\/ Adjust global mouse to canvas relative\n const mX = globalMouse.x - rect.left;\n const mY = globalMouse.y - rect.top;\n\n const dM = Math.hypot(s.x-mX, s.y-mY);\n const isHover = dM < 200;\n \n ctx.beginPath(); ctx.arc(s.x,s.y,s.size,0,6.28); ctx.fillStyle=isHover?'#D91278':`rgba(71,85,105,${isHover?1:0.4})`; ctx.fill();\n if(s.label) { ctx.font=isHover?'bold 13px Inter':'11px Inter'; ctx.fillStyle=isHover?'#0f172a':`rgba(71,85,105,0.4)`; ctx.fillText(s.label, s.x+8, s.y+4); }\n \n if(isHover) {\n ctx.beginPath(); ctx.moveTo(s.x,s.y); ctx.lineTo(mX,mY);\n ctx.strokeStyle=`rgba(217,18,120,${1-dM\/200})`; ctx.stroke();\n if(dM<40){ const a = Math.atan2(s.y-mY, s.x-mX); s.vx+=Math.cos(a)*0.02; s.vy+=Math.sin(a)*0.02; }\n }\n \n for(let j=i+1; j<stars.length; j++) {\n const s2=stars[j]; 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 = (isHover || Math.hypot(s2.x-mX, s2.y-mY)<200) ? 0.3 : 0.05;\n ctx.strokeStyle=`rgba(71,85,105,${lA})`; ctx.stroke();\n }\n }\n });\n canvasAnimId = requestAnimationFrame(animateCanvas);\n };\n\n const canvasObserver = new IntersectionObserver(([entry]) => {\n isCanvasInView = entry.isIntersecting;\n if(isCanvasInView && !canvasAnimId) animateCanvas();\n else if(!isCanvasInView && canvasAnimId) { cancelAnimationFrame(canvasAnimId); canvasAnimId = null; }\n }, { threshold: 0.1 });\n canvasObserver.observe(canvas.parentElement);\n\n \/\/ mousemove listener removed here - handled globally\n window.addEventListener('resize', initStars);\n }\n\n \/\/ Init Hero Carousel & Icons\n renderHeroCarousel();\n setInterval(() => { heroNext(); }, 5000);\n\n \/\/ 11. Reveal Animations with IntersectionObserver\n const revealObserver = new IntersectionObserver((e) => e.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('active'); revealObserver.unobserve(entry.target); } }), {threshold: 0.15, rootMargin: \"0px 0px -50px 0px\"});\n document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));\n \n \/\/ Optimization 5: Smart Video Observer\n \/\/ Automatically pause off-screen videos to save battery\/cpu\n const videoObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n const video = entry.target;\n if(entry.isIntersecting) {\n video.play().catch(e => {}); \/\/ ignore autoplay errors\n } else {\n video.pause();\n }\n });\n }, { threshold: 0.25 });\n document.querySelectorAll('.smart-video').forEach(v => videoObserver.observe(v));\n\n setTimeout(() => lucide.createIcons(), 100);\n });\n\n \/\/ --- GLOBAL FUNCTIONS ---\n window.switchTab = function(tab) {\n const btnBiz = document.getElementById('tab-business'); const btnAca = document.getElementById('tab-academic');\n const cBiz = document.getElementById('content-business'); const cAca = document.getElementById('content-academic');\n if(tab === 'business') {\n btnBiz.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 cBiz.classList.remove('hidden'); cAca.classList.add('hidden');\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 btnBiz.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 cAca.classList.remove('hidden'); cBiz.classList.add('hidden');\n }\n };\n\n window.renderPricing = function(cycle) {\n currentCycle = cycle;\n document.getElementById('cycle-monthly').className = `text-sm font-bold transition-colors cursor-pointer ${cycle==='monthly'?'text-white':'text-slate-500'}`;\n document.getElementById('cycle-yearly').className = `text-sm font-bold transition-colors cursor-pointer ${cycle==='yearly'?'text-white':'text-slate-500'}`;\n document.getElementById('cycle-toggle-ball').className = `w-6 h-6 rounded-md bg-white shadow-md transform transition-transform duration-300 ${cycle==='yearly'?'translate-x-8':'translate-x-0'}`;\n \n document.getElementById('pricing-grid').innerHTML = PRICING[cycle].map(p => {\n const theme = pricingThemes[p.color];\n const showBadge = p.annualOnly && cycle === 'monthly';\n return `<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 ${theme.glow}\"><div class=\"border-beam\"><\/div><div class=\"absolute top-0 left-8 w-20 h-1 ${theme.accent} shadow-[0_0_15px_currentColor] rounded-b-lg\"><\/div><div class=\"relative z-10 flex flex-col h-full\"><div class=\"flex justify-between items-start mb-6 pt-4\"><div class=\"w-14 h-14 rounded-2xl flex items-center justify-center border backdrop-blur-md ${theme.iconBg} shadow-inner group-hover:scale-110 transition-transform duration-500\"><i data-lucide=\"${p.icon}\" class=\"w-7 h-7\"><\/i><\/div><div class=\"flex flex-col items-end gap-1\"><div class=\"px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border ${theme.badge} shadow-sm\">${p.sub}<\/div>${showBadge?'<span class=\"text-[9px] text-slate-400 font-bold uppercase tracking-wider\">Doar Anual<\/span>':''}<\/div><\/div><h3 class=\"text-2xl font-bold text-white mb-2\">${p.title}<\/h3><p class=\"text-slate-400 text-sm leading-relaxed mb-6 flex-grow font-medium\">${p.desc}<\/p><div class=\"border-t border-slate-700\/50 py-6 mb-2\"><div class=\"flex items-baseline gap-1\"><span class=\"text-xs text-slate-500 font-bold uppercase\">Pre\u021b<\/span><span class=\"text-4xl font-extrabold text-white tracking-tight drop-shadow-sm\">${p.price}<\/span><\/div><div class=\"flex items-center gap-2 mt-1\"><span class=\"text-xs text-slate-500 font-medium\">${p.period}<\/span>${p.subz?'<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> Subven\u021bionat<\/span>':''}<\/div><\/div><ul class=\"space-y-3 mb-8\">${p.features.map(f => `<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\">${f}<\/span><\/li>`).join('')}<\/ul><a href=\"${p.link}\" class=\"w-full py-4 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 ${theme.btn} mt-auto\">${p.btn} <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div>`;\n }).join('');\n \/\/ Optimization: Only update icons in the grid\n lucide.createIcons({ root: document.getElementById('pricing-grid') });\n };\n\n window.toggleBilling = function() {\n renderPricing(currentCycle === 'monthly' ? 'yearly' : 'monthly');\n };\n window.setBilling = function(cycle) {\n renderPricing(cycle);\n };\n\n \/\/ --- HERO CAROUSEL LOGIC ---\n function renderHeroCarousel() {\n const container = document.getElementById('hero-carousel-container');\n if(!container) return;\n\n const active = HERO_TEMPLATES[heroActiveIndex];\n const prevIndex = (heroActiveIndex - 1 + HERO_TEMPLATES.length) % HERO_TEMPLATES.length;\n const prev = HERO_TEMPLATES[prevIndex];\n const nextIndex = (heroActiveIndex + 1) % HERO_TEMPLATES.length;\n const next = HERO_TEMPLATES[nextIndex];\n\n \/\/ Render static structure only once if possible, or re-render content\n \/\/ For simplicity in HTML context, we'll re-render the inner HTML which is cheap for 3 items\n \n container.innerHTML = `\n \n <button onclick=\"heroPrev()\" class=\"absolute left-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/30 border border-white\/40 backdrop-blur-md text-slate-700 hover:bg-white hover:text-blue-600 hover:scale-110 transition-all shadow-lg flex items-center justify-center group\"><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=\"heroNext()\" class=\"absolute right-0 top-1\/2 -translate-y-1\/2 z-50 p-2 md:p-3 rounded-full bg-white\/30 border border-white\/40 backdrop-blur-md text-slate-700 hover:bg-white hover:text-blue-600 hover:scale-110 transition-all shadow-lg flex items-center justify-center group\"><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=\"hero-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 ${active.border}\">\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]\"><div class=\"w-2 h-2 rounded-full animate-pulse ${active.bg}\"><\/div> template_${active.id}.html<\/div>\n <\/div>\n <div class=\"relative w-full h-full group\">\n <img decoding=\"async\" src=\"${active.img}\" alt=\"${active.title}\" class=\"w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700\" loading=\"lazy\">\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\"><i data-lucide=\"${active.icon}\" class=\"w-4 h-4 ${active.color}\"><\/i><\/div>\n <h3 class=\"text-sm font-bold text-slate-900\">${active.title}<\/h3>\n <div class=\"h-1 w-16 rounded-full mt-2 ${active.bg}\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div onclick=\"heroPrev()\" 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\" id=\"hero-card-prev\">\n <img decoding=\"async\" src=\"${prev.img}\" class=\"w-full h-full object-cover\" loading=\"lazy\">\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 onclick=\"heroNext()\" 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\" id=\"hero-card-next\">\n <img decoding=\"async\" src=\"${next.img}\" class=\"w-full h-full object-cover\" loading=\"lazy\">\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=\"hero-badge-1\" 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 <div id=\"hero-badge-2\" 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\">Nu \u00eencepe de la zero<\/span>\n <\/div>\n `;\n \n \/\/ Optimization: Only update icons in the hero container\n lucide.createIcons({ root: container });\n updateHeroParallax();\n }\n\n function updateHeroParallax() {\n const active = document.getElementById('hero-card-active');\n const prev = document.getElementById('hero-card-prev');\n const next = document.getElementById('hero-card-next');\n const b1 = document.getElementById('hero-badge-1');\n const b2 = document.getElementById('hero-badge-2');\n\n if(active) active.style.transform = `translate(-50%, -50%) rotateX(${heroMouse.y * -5}deg) rotateY(${heroMouse.x * 5}deg) translateZ(50px)`;\n if(prev) prev.style.transform = `translate(0%, -20%) rotateX(${heroMouse.y * -2}deg) rotateY(${heroMouse.x * 2 + 15}deg) translateZ(-50px)`;\n if(next) next.style.transform = `translate(0%, 10%) rotateX(${heroMouse.y * -2}deg) rotateY(${heroMouse.x * 2 - 15}deg) translateZ(-50px)`;\n \n if(b1) b1.style.transform = `translateX(${heroMouse.x * -20}px) translateY(${heroMouse.y * -20}px) translateZ(-80px)`;\n if(b2) b2.style.transform = `translateX(${heroMouse.x * 30}px) translateY(${heroMouse.y * 30}px) translateZ(80px)`;\n }\n\n window.heroNext = function() {\n heroActiveIndex = (heroActiveIndex + 1) % HERO_TEMPLATES.length;\n renderHeroCarousel();\n }\n \n window.heroPrev = function() {\n heroActiveIndex = (heroActiveIndex - 1 + HERO_TEMPLATES.length) % HERO_TEMPLATES.length;\n renderHeroCarousel();\n }\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LIVRESQ – Creator de cursuri eLearning Author este Live Comunitate Blog Academic Training FAQ Cump\u0103r\u0103 Despre noi Library Rom\u00e2n\u0103 Rom\u00e2n\u0103 English Deutsch Fran\u00e7ais Contul Meu Nou 20 noi \u0219abloane business lansate INFO Reguli de publicare \u00een bibliotec\u0103 Creeaz\u0103 cursuri\u0219i lec\u021bii superbe. Construie\u0219te materiale compatibile SCORM \u0219i HTML5. F\u0103r\u0103 bariere tehnice. \u00cencepe Gratuit Vezi Func\u021bionalit\u0103\u021bi NU […]<\/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\/fr\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/\" \/>\n<meta property=\"og:site_name\" content=\"LIVRESQ\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T21:46:32+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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"23 minutes\" \/>\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-04-09T21:46:32+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\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/livresq.com\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/livresq.com\/en\/#organization\",\"name\":\"LIVRESQ - Authoring Tool\",\"url\":\"https:\/\/livresq.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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":"Outil de cr\u00e9ation eLearning - LIVRESQ","description":"Cr\u00e9ez vos cours elearning ou vos le\u00e7ons interactives directement \u00e0 partir du navigateur. Tout se fait en ligne, vous ne devez rien t\u00e9l\u00e9charger ni installer.","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\/fr\/","og_locale":"fr_FR","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\/fr\/","og_site_name":"LIVRESQ","article_modified_time":"2026-04-09T21:46:32+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":{"Dur\u00e9e de lecture estim\u00e9e":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/livresq.com\/","url":"https:\/\/livresq.com\/","name":"Outil de cr\u00e9ation eLearning - 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-04-09T21:46:32+00:00","description":"Cr\u00e9ez vos cours elearning ou vos le\u00e7ons interactives directement \u00e0 partir du navigateur. Tout se fait en ligne, vous ne devez rien t\u00e9l\u00e9charger ni installer.","breadcrumb":{"@id":"https:\/\/livresq.com\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/livresq.com\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@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":"Outil de cr\u00e9ation eLearning","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":"fr-FR"},{"@type":"Organization","@id":"https:\/\/livresq.com\/en\/#organization","name":"LIVRESQ - Outil de cr\u00e9ation","url":"https:\/\/livresq.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":837,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":491247,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/pages\/17\/revisions\/491247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/media\/31483"}],"wp:attachment":[{"href":"https:\/\/livresq.com\/fr\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}