{"id":233,"date":"2026-01-09T07:44:01","date_gmt":"2026-01-09T07:44:01","guid":{"rendered":"https:\/\/ambgrouplb.com\/?page_id=233"},"modified":"2026-01-09T07:46:40","modified_gmt":"2026-01-09T07:46:40","slug":"e-commerce","status":"publish","type":"page","link":"https:\/\/ambgrouplb.com\/index.php\/e-commerce\/","title":{"rendered":"E-commerce"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n The Toy Store | E-Commerce Digital Achievements Report 2025<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/studio-freight\/lenis@1.0.29\/bundled\/lenis.min.js\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --bg-body: #fafbff;\r\n --text-main: #0f172a;\r\n --accent-blue: #2563eb;\r\n --accent-purple: #7c3aed;\r\n --accent-pink: #ec4899;\r\n --accent-cyan: #06b6d4;\r\n --accent-green: #10b981;\r\n --glass-border: rgba(255, 255, 255, 0.7);\r\n --glass-bg: rgba(255, 255, 255, 0.65);\r\n }\r\n\r\n * { cursor: none; }\r\n\r\n body {\r\n background-color: var(--bg-body);\r\n color: var(--text-main);\r\n font-family: 'Manrope', sans-serif;\r\n overflow-x: hidden;\r\n margin: 0;\r\n padding: 0;\r\n line-height: 1.6;\r\n }\r\n\r\n .font-mono { font-family: 'JetBrains Mono', monospace; }\r\n\r\n .cursor-dot {\r\n position: fixed;\r\n width: 8px;\r\n height: 8px;\r\n background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 99999;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease;\r\n }\r\n\r\n .cursor-glow {\r\n position: fixed;\r\n width: 40px;\r\n height: 40px;\r\n background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, transparent 70%);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 99998;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n .cursor-dot.hovering {\r\n width: 50px;\r\n height: 50px;\r\n background: transparent;\r\n border: 2px solid var(--accent-purple);\r\n mix-blend-mode: difference;\r\n }\r\n\r\n h1, h2, h3, h4, .font-display {\r\n font-family: 'Space Grotesk', sans-serif;\r\n letter-spacing: -0.03em;\r\n }\r\n\r\n .text-gradient {\r\n background: linear-gradient(135deg, #2563eb 0%, #9333ea 50%, #db2777 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .loading-screen {\r\n position: fixed;\r\n inset: 0;\r\n background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);\r\n z-index: 100000;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n transition: opacity 0.8s ease, visibility 0.8s ease;\r\n }\r\n\r\n .loading-screen.hidden { opacity: 0; visibility: hidden; }\r\n\r\n .loader-ring {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n border: 3px solid transparent;\r\n border-top-color: var(--accent-cyan);\r\n border-right-color: var(--accent-purple);\r\n animation: loaderSpin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\r\n position: relative;\r\n }\r\n\r\n .loader-ring::before {\r\n content: '';\r\n position: absolute;\r\n inset: 5px;\r\n border-radius: 50%;\r\n border: 3px solid transparent;\r\n border-top-color: var(--accent-pink);\r\n border-left-color: var(--accent-blue);\r\n animation: loaderSpin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;\r\n }\r\n\r\n @keyframes loaderSpin { to { transform: rotate(360deg); } }\r\n\r\n .loader-text {\r\n margin-top: 2rem;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.75rem;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.5);\r\n animation: loaderPulse 1.5s ease-in-out infinite;\r\n }\r\n\r\n @keyframes loaderPulse {\r\n 0%, 100% { opacity: 0.3; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n #aurora-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -2;\r\n opacity: 0.6;\r\n pointer-events: none;\r\n }\r\n\r\n #particle-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n pointer-events: none;\r\n opacity: 0.7;\r\n }\r\n\r\n .noise-overlay {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 2;\r\n pointer-events: none;\r\n opacity: 0.03;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n .glass-panel {\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(24px) saturate(180%);\r\n -webkit-backdrop-filter: blur(24px) saturate(180%);\r\n border: 1px solid var(--glass-border);\r\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08), inset 0 1px 0 0 rgba(255,255,255,0.9);\r\n border-radius: 24px;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .glass-panel::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);\r\n pointer-events: none;\r\n }\r\n\r\n .glass-panel:hover {\r\n box-shadow: 0 20px 60px 0 rgba(31, 38, 135, 0.15), inset 0 1px 0 0 rgba(255,255,255,1);\r\n }\r\n\r\n \/* SUPER GLASSY NAV *\/\r\n .glass-nav {\r\n \/* 1. More transparency (was 0.85) to let the background colors bleed through *\/\r\n background: rgba(255, 255, 255, 0.65);\r\n \r\n \/* 2. Heavy blur + Saturation boost for that \"vibrant\" material look *\/\r\n backdrop-filter: blur(60px) saturate(180%);\r\n -webkit-backdrop-filter: blur(60px) saturate(180%);\r\n \r\n \/* 3. Subtle border handling - softer than before *\/\r\n border: 1px solid rgba(255, 255, 255, 0.4);\r\n \r\n \/* 4. The \"Apple\" Magic: Soft drop shadow + Inner white glow for 3D volume *\/\r\n box-shadow: \r\n \/* Soft ambient shadow to lift it off the page *\/\r\n 0 25px 50px -12px rgba(0, 0, 0, 0.1),\r\n \/* Inner highlight to simulate light catching the top edge *\/\r\n inset 0 1px 0 0 rgba(255, 255, 255, 0.9),\r\n \/* Subtle inner glow to give the glass \"thickness\" *\/\r\n inset 0 0 20px rgba(255, 255, 255, 0.3);\r\n \r\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .glass-nav:hover {\r\n background: rgba(255, 255, 255, 0.75);\r\n box-shadow: \r\n 0 30px 60px -15px rgba(0, 0, 0, 0.15),\r\n inset 0 1px 0 0 rgba(255, 255, 255, 1),\r\n inset 0 0 20px rgba(255, 255, 255, 0.5);\r\n }\r\n .shimmer-card {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .shimmer-card::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);\r\n transform: rotate(30deg) translateX(-100%);\r\n transition: transform 0.8s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .shimmer-card:hover::after { transform: rotate(30deg) translateX(100%); }\r\n\r\n .holographic-text {\r\n background: linear-gradient(90deg, #667eea 0%, #764ba2 15%, #f093fb 30%, #f5576c 45%, #4facfe 60%, #00f2fe 75%, #667eea 100%);\r\n background-size: 300% 100%;\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n animation: holoFlow 4s linear infinite;\r\n filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.3));\r\n }\r\n\r\n .holo-border {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n .holo-border::before {\r\n content: '';\r\n position: absolute;\r\n inset: -3px;\r\n border-radius: 28px;\r\n background: linear-gradient(45deg, #ff9a9e, #fecfef, #a18cd1, #fbc2eb, #a6c1ee, #84fab0, #8fd3f4, #ff9a9e);\r\n background-size: 400% 400%;\r\n z-index: -1;\r\n opacity: 0.8;\r\n filter: blur(12px);\r\n animation: holoFlow 6s linear infinite;\r\n }\r\n\r\n @keyframes holoFlow {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .float { animation: float 6s ease-in-out infinite; }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0px); }\r\n 50% { transform: translateY(-20px); }\r\n }\r\n\r\n .img-wrapper {\r\n overflow: hidden;\r\n border-radius: 16px;\r\n border: 1px solid rgba(0,0,0,0.05);\r\n background: white;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15);\r\n position: relative;\r\n }\r\n \r\n\r\n .img-wrapper img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n .img-wrapper:hover img { transform: scale(1.03); }\r\n\r\n .section-pad {\r\n padding-top: 8rem;\r\n padding-bottom: 8rem;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .section-label {\r\n font-size: 0.7rem;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 1.5rem;\r\n display: inline-block;\r\n }\r\n\r\n .section-divider {\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent 0%, rgba(124, 58, 237, 0.3) 20%, rgba(236, 72, 153, 0.5) 50%, rgba(124, 58, 237, 0.3) 80%, transparent 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .section-divider::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);\r\n animation: dividerShine 3s ease-in-out infinite;\r\n }\r\n .game-card .object-cover{\r\n object-fit: contain !important;\r\n }\r\n\r\n @keyframes dividerShine {\r\n 0% { left: -100%; }\r\n 100% { left: 200%; }\r\n }\r\n\r\n .progress-bar {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);\r\n background-size: 300% 100%;\r\n animation: holoFlow 3s linear infinite;\r\n width: 0%;\r\n z-index: 99999;\r\n }\r\n\r\n .feature-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.5rem 1rem;\r\n border-radius: 100px;\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n }\r\n\r\n .game-card {\r\n background: rgba(255,255,255,0.05);\r\n border: 1px solid rgba(255,255,255,0.1);\r\n border-radius: 24px;\r\n padding: 1.5rem;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .game-card:hover {\r\n background: rgba(255,255,255,0.1);\r\n transform: translateY(-8px);\r\n border-color: rgba(255,255,255,0.2);\r\n }\r\n\r\n .tech-grid {\r\n background: linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);\r\n background-size: 20px 20px;\r\n }\r\n\r\n .circle-progress {\r\n position: relative;\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n .circle-progress svg {\r\n transform: rotate(-90deg);\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .circle-progress .bg {\r\n fill: none;\r\n stroke: rgba(0,0,0,0.1);\r\n stroke-width: 6;\r\n }\r\n\r\n .circle-progress .progress {\r\n fill: none;\r\n stroke-width: 6;\r\n stroke-linecap: round;\r\n stroke-dasharray: 220;\r\n stroke-dashoffset: 220;\r\n }\r\n\r\n .circle-progress .value {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n }\r\n\r\n .nav-dropdown {\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(-10px);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-trigger:hover .nav-dropdown {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .cursor-dot, .cursor-glow { display: none; }\r\n * { cursor: auto; }\r\n }\r\n \/* 1. FIXED BUTTON: Low opacity to blend with the parent glass *\/\r\n .nav-trigger > button {\r\n \/* Very transparent background so it doesn't look solid white *\/\r\n background: rgba(255, 255, 255, 0.15) !important;\r\n \r\n \/* Subtle blur to distinguish it from the bar behind it *\/\r\n backdrop-filter: blur(10px) saturate(100%) !important;\r\n -webkit-backdrop-filter: blur(10px) saturate(100%) !important;\r\n \r\n \/* Fine border and inner highlight *\/\r\n border: 1px solid rgba(255, 255, 255, 0.3) !important;\r\n box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3) !important;\r\n \r\n \/* Ensure text color is dark enough to read *\/\r\n color: #1e293b !important; \r\n transition: all 0.3s ease !important;\r\n }\r\n\r\n \/* Hover: Slightly whiter to indicate interactivity *\/\r\n .nav-trigger > button:hover {\r\n background: rgba(255, 255, 255, 0.3) !important;\r\n border-color: rgba(255, 255, 255, 0.6) !important;\r\n box-shadow: \r\n 0 4px 12px rgba(0,0,0,0.05),\r\n inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;\r\n }\r\n\r\n \/* 2. MATCHING DROPDOWN: Exact same glass material as the main nav *\/\r\n .nav-dropdown {\r\n \/* Match the main nav's heavy blur and opacity *\/\r\n background: rgba(255, 255, 255, 0.65) !important;\r\n backdrop-filter: blur(60px) saturate(180%) !important;\r\n -webkit-backdrop-filter: blur(60px) saturate(180%) !important;\r\n \r\n \/* Same border style as main nav *\/\r\n border: 1px solid rgba(255, 255, 255, 0.4) !important;\r\n \r\n \/* Deep shadow for pop-out effect *\/\r\n box-shadow: \r\n 0 30px 80px -10px rgba(0, 0, 0, 0.2),\r\n inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;\r\n \r\n border-radius: 24px !important;\r\n padding: 12px !important;\r\n margin-top: 15px !important; \/* Slight gap *\/\r\n }\r\n \/* SLOWER HORIZONTAL GLITCH *\/\r\n .glitch-effect {\r\n position: relative;\r\n color: white;\r\n mix-blend-mode: lighten;\r\n }\r\n\r\n .glitch-effect::before,\r\n .glitch-effect::after {\r\n content: attr(data-text);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.8;\r\n }\r\n\r\n \/* Layer 1: Magenta - Slow drift left *\/\r\n .glitch-effect::before {\r\n text-shadow: -3px 0 #ff00c1;\r\n \/* Increased duration to 5s for slower movement *\/\r\n animation: glitch-anim-1 5s infinite linear alternate-reverse;\r\n }\r\n\r\n \/* Layer 2: Cyan - Slow drift right *\/\r\n .glitch-effect::after {\r\n text-shadow: 3px 0 #00fff9;\r\n \/* Increased duration to 5s for slower movement *\/\r\n animation: glitch-anim-2 5s infinite linear alternate-reverse;\r\n }\r\n\r\n \/* Animation 1: Slower horizontal tearing *\/\r\n @keyframes glitch-anim-1 {\r\n 0% { clip: rect(20px, 9999px, 15px, 0); transform: translateX(-4px); }\r\n 10% { clip: rect(80px, 9999px, 90px, 0); transform: translateX(2px); }\r\n 20% { clip: rect(30px, 9999px, 10px, 0); transform: translateX(-6px); }\r\n 30% { clip: rect(100px, 9999px, 105px, 0); transform: translateX(3px); }\r\n 40% { clip: rect(10px, 9999px, 60px, 0); transform: translateX(-2px); }\r\n 50% { clip: rect(60px, 9999px, 50px, 0); transform: translateX(0px); }\r\n 60% { clip: rect(120px, 9999px, 130px, 0); transform: translateX(-4px); }\r\n 70% { clip: rect(40px, 9999px, 50px, 0); transform: translateX(2px); }\r\n 80% { clip: rect(5px, 9999px, 30px, 0); transform: translateX(-6px); }\r\n 90% { clip: rect(90px, 9999px, 85px, 0); transform: translateX(4px); }\r\n 100% { clip: rect(130px, 9999px, 140px, 0); transform: translateX(-2px); }\r\n }\r\n\r\n \/* Animation 2: Slower horizontal tearing (Opposite direction) *\/\r\n @keyframes glitch-anim-2 {\r\n 0% { clip: rect(120px, 9999px, 130px, 0); transform: translateX(4px); }\r\n 10% { clip: rect(10px, 9999px, 20px, 0); transform: translateX(-3px); }\r\n 20% { clip: rect(50px, 9999px, 60px, 0); transform: translateX(5px); }\r\n 30% { clip: rect(80px, 9999px, 85px, 0); transform: translateX(-2px); }\r\n 40% { clip: rect(10px, 9999px, 110px, 0); transform: translateX(4px); }\r\n 50% { clip: rect(60px, 9999px, 75px, 0); transform: translateX(0px); }\r\n 60% { clip: rect(20px, 9999px, 10px, 0); transform: translateX(3px); }\r\n 70% { clip: rect(140px, 9999px, 150px, 0); transform: translateX(-5px); }\r\n 80% { clip: rect(40px, 9999px, 60px, 0); transform: translateX(2px); }\r\n 90% { clip: rect(100px, 9999px, 110px, 0); transform: translateX(-4px); }\r\n 100% { clip: rect(10px, 9999px, 30px, 0); transform: translateX(5px); }\r\n }\r\n \/* ==================== 3D GLITCH BACKGROUND SYSTEM ==================== *\/\r\n \r\n \/* 1. The Container: Sets the 3D Stage *\/\r\n .cyber-scene {\r\n position: absolute;\r\n inset: 0;\r\n background: #020617; \/* Deepest Void Blue *\/\r\n perspective: 1000px; \/* Creates the 3D depth *\/\r\n overflow: hidden;\r\n z-index: 0;\r\n }\r\n\r\n \/* 2. The 3D Floor: Infinite Scrolling Grid *\/\r\n .cyber-grid {\r\n position: absolute;\r\n width: 300%;\r\n height: 200%;\r\n top: -50%;\r\n left: -100%;\r\n background-image: \r\n linear-gradient(rgba(124, 58, 237, 0.4) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(124, 58, 237, 0.4) 1px, transparent 1px);\r\n background-size: 80px 80px;\r\n transform: rotateX(60deg); \/* Tilts the floor *\/\r\n animation: grid-scroll 20s linear infinite;\r\n mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%); \/* Fades horizon *\/\r\n }\r\n\r\n @keyframes grid-scroll {\r\n 0% { transform: rotateX(60deg) translateY(0); }\r\n 100% { transform: rotateX(60deg) translateY(80px); }\r\n }\r\n\r\n \/* 3. The Overlay: CRT Scanlines + Noise *\/\r\n .crt-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));\r\n background-size: 100% 3px, 6px 100%;\r\n pointer-events: none;\r\n z-index: 2;\r\n animation: crt-flicker 0.1s infinite;\r\n }\r\n\r\n \/* 4. The Parallax Objects: Floating Glitch Cubes *\/\r\n .glitch-cube {\r\n position: absolute;\r\n border: 2px solid rgba(0, 255, 249, 0.2);\r\n box-shadow: 0 0 15px rgba(0, 255, 249, 0.1);\r\n animation: cube-float 10s infinite ease-in-out;\r\n z-index: 1;\r\n }\r\n\r\n @keyframes cube-float {\r\n 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }\r\n 50% { transform: translateY(-50px) rotate(180deg) scale(1.1); }\r\n \/* The Glitch \"Twitch\" Frames *\/\r\n 92% { transform: skew(0deg); clip-path: inset(0 0 0 0); }\r\n 94% { transform: skew(20deg) translateX(10px); clip-path: inset(10% 0 40% 0); border-color: #ff00c1; }\r\n 96% { transform: skew(-20deg) translateX(-10px); clip-path: inset(40% 0 10% 0); border-color: #00fff9; }\r\n 98% { transform: skew(0deg); clip-path: inset(0 0 0 0); border-color: rgba(0, 255, 249, 0.2); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-purple-100 selection:text-purple-900\">\r\n\r\n <div class=\"loading-screen\" id=\"loader\">\r\n <div class=\"loader-ring\"><\/div>\r\n <p class=\"loader-text\">Loading Experience<\/p>\r\n <\/div>\r\n\r\n <div class=\"cursor-dot\" id=\"cursor-dot\"><\/div>\r\n <div class=\"cursor-glow\" id=\"cursor-glow\"><\/div>\r\n\r\n <div class=\"progress-bar\" id=\"progress-bar\"><\/div>\r\n \r\n <canvas id=\"aurora-canvas\"><\/canvas>\r\n <canvas id=\"particle-canvas\"><\/canvas>\r\n <div class=\"noise-overlay\"><\/div>\r\n\r\n <!-- ==================== BIGGER GLASSY NAVIGATION ==================== -->\r\n <nav class=\"fixed top-4 left-0 right-0 z-50 flex justify-center pointer-events-none\">\r\n <div class=\"glass-nav px-10 py-5 flex justify-between items-center w-[94%] max-w-7xl pointer-events-auto rounded-3xl\">\r\n <div class=\"h-16 w-auto\">\r\n <img decoding=\"async\" id=\"nav_logo\" src=\"\" alt=\"The Toy Store Logo\" class=\"h-full object-contain\">\r\n <\/div>\r\n \r\n <div class=\"flex items-center gap-6\">\r\n <div class=\"relative nav-trigger\">\r\n <button class=\"flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white\/60 hover:bg-white\/80 transition-colors text-sm font-semibold text-slate-700 shadow-sm border border-white\/50\">\r\n <i class=\"fa-solid fa-compass text-purple-500\"><\/i>\r\n <span class=\"hidden md:inline\">Jump to Section<\/span>\r\n <i class=\"fa-solid fa-chevron-down text-xs text-slate-400\"><\/i>\r\n <\/button>\r\n <div class=\"nav-dropdown absolute top-full right-0 mt-3 w-72 bg-white\/95 backdrop-blur-xl rounded-2xl p-3 shadow-2xl border border-white\/50\">\r\n <a href=\"#hero\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-blue-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-home text-blue-500 w-5\"><\/i>\r\n <span>Overview<\/span>\r\n <\/a>\r\n <a href=\"#inhouse\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-purple-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-code text-purple-500 w-5\"><\/i>\r\n <span>In-House Development<\/span>\r\n <\/a>\r\n <a href=\"#speed\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-green-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-bolt text-green-500 w-5\"><\/i>\r\n <span>Speed & SEO<\/span>\r\n <\/a>\r\n <a href=\"#visual\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-pink-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-palette text-pink-500 w-5\"><\/i>\r\n <span>Visual Transformation<\/span>\r\n <\/a>\r\n <a href=\"#backend\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-orange-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-server text-orange-500 w-5\"><\/i>\r\n <span>Backend Automation<\/span>\r\n <\/a>\r\n <a href=\"#gamification\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-indigo-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-gamepad text-indigo-500 w-5\"><\/i>\r\n <span>Play & Win<\/span>\r\n <\/a>\r\n <a href=\"#discovery\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-cyan-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-compass text-cyan-500 w-5\"><\/i>\r\n <span>Discovery Features<\/span>\r\n <\/a>\r\n <a href=\"#conversion\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-emerald-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-cart-shopping text-emerald-500 w-5\"><\/i>\r\n <span>Conversion Features<\/span>\r\n <\/a>\r\n <a href=\"#data\" class=\"flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-amber-50 transition-colors text-sm font-medium\">\r\n <i class=\"fa-solid fa-database text-amber-500 w-5\"><\/i>\r\n <span>Data Entry<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <span class=\"hidden lg:block text-sm font-bold tracking-[0.1em] uppercase text-slate-500\">2025 Report<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- ==================== HERO - NO SCROLL INDICATOR ==================== -->\r\n <section id=\"hero\" class=\"min-h-screen flex flex-col justify-center items-center px-6 relative pt-36\" data-scroll-section>\r\n <div class=\"max-w-5xl w-full text-center z-10\">\r\n <div class=\"glass-panel p-16 md:p-24 inline-block w-full holo-border float\">\r\n <span class=\"inline-block py-1.5 px-5 border border-blue-200 rounded-full text-[10px] font-bold uppercase tracking-widest text-blue-600 mb-8 bg-blue-50\/50\">\r\n E-Commerce Department \u2022 2025 Review\r\n <\/span>\r\n \r\n <h1 class=\"text-5xl md:text-7xl font-bold font-display leading-[0.9] mb-8 text-slate-900 tracking-tighter\">\r\n <span>The Year of<\/span> <br>\r\n <span class=\"holographic-text\">Innovation<\/span>\r\n <\/h1>\r\n \r\n <p class=\"text-xl md:text-2xl text-slate-500 font-light leading-relaxed max-w-3xl mx-auto mb-12\">\r\n From 7-second load times to sub-1-second performance. Custom gamification engines, automated integrations, and 5,000+ products optimized \u2014 all built in-house for The Toy Store LB.\r\n <\/p>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-slate-100\/50 pt-12\">\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-4xl font-bold font-display text-slate-900\"><1s<\/span>\r\n <span class=\"text-xs font-bold uppercase tracking-widest text-slate-400 mt-2\">Load Time (from 7s)<\/span>\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-4xl font-bold font-display text-slate-900\"><span class=\"counter-value\" data-target=\"5000\">0<\/span>+<\/span>\r\n <span class=\"text-xs font-bold uppercase tracking-widest text-slate-400 mt-2\">Products Optimized<\/span>\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-4xl font-bold font-display text-slate-900\"><span class=\"counter-value\" data-target=\"5\">0<\/span>min<\/span>\r\n <span class=\"text-xs font-bold uppercase tracking-widest text-slate-400 mt-2\">Stock Refresh Rate<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== IN-HOUSE - LIGHTER BACKGROUND ==================== -->\r\n <section id=\"inhouse\" class=\"section-pad px-6 md:px-12 bg-gradient-to-br from-slate-100 via-purple-50 to-blue-50 relative overflow-hidden\" data-scroll-section>\r\n <div class=\"absolute top-20 left-10 w-72 h-72 bg-purple-300 rounded-full blur-[150px] opacity-30\"><\/div>\r\n <div class=\"absolute bottom-20 right-10 w-96 h-96 bg-blue-300 rounded-full blur-[150px] opacity-20\"><\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto relative z-10\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"inline-block py-1.5 px-5 border border-purple-300 rounded-full text-[10px] font-bold uppercase tracking-widest text-purple-600 mb-6 bg-purple-100\/50\">\r\n The Foundation\r\n <\/span>\r\n <h2 class=\"text-5xl md:text-7xl font-bold font-display mb-6 text-slate-800\">\r\n Built <span class=\"text-gradient\">In-House<\/span>\r\n <\/h2>\r\n <p class=\"text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed\">\r\n Every line of code, every animation, every pixel was crafted internally. No expensive third-party apps. No monthly subscriptions. Just pure, custom Shopify development.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"glass-panel p-6 text-center group hover:-translate-y-2 transition-all duration-300\">\r\n <div class=\"w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-blue-100 to-cyan-100 flex items-center justify-center group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-code text-2xl text-cyan-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-lg mb-2 text-slate-800\">Custom Sections<\/h3>\r\n <p class=\"text-sm text-slate-500\">Fully custom Liquid templates built from scratch<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-panel p-6 text-center group hover:-translate-y-2 transition-all duration-300\">\r\n <div class=\"w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-purple-100 to-pink-100 flex items-center justify-center group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-wand-magic-sparkles text-2xl text-purple-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-lg mb-2 text-slate-800\">Animated UI<\/h3>\r\n <p class=\"text-sm text-slate-500\">Smooth micro-interactions that delight users<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-panel p-6 text-center group hover:-translate-y-2 transition-all duration-300\">\r\n <div class=\"w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-green-100 to-emerald-100 flex items-center justify-center group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-chart-line text-2xl text-emerald-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-lg mb-2 text-slate-800\">Conversion Focus<\/h3>\r\n <p class=\"text-sm text-slate-500\">Every feature guides customers toward purchase<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-panel p-6 text-center group hover:-translate-y-2 transition-all duration-300\">\r\n <div class=\"w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-piggy-bank text-2xl text-amber-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-lg mb-2 text-slate-800\">Minimal App Fees<\/h3>\r\n <p class=\"text-sm text-slate-500\">Drastically reduced subscription costs<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== SPEED & SEO ==================== -->\r\n <section id=\"speed\" class=\"section-pad px-6 md:px-12 bg-slate-950 text-white relative overflow-hidden tech-grid\" data-scroll-section>\r\n <div class=\"absolute inset-0\">\r\n <div class=\"absolute top-1\/4 left-1\/4 w-2 h-2 bg-green-400 rounded-full animate-ping\"><\/div>\r\n <div class=\"absolute top-1\/3 right-1\/3 w-1 h-1 bg-blue-400 rounded-full animate-ping\" style=\"animation-delay: 0.5s;\"><\/div>\r\n <div class=\"absolute bottom-1\/4 left-1\/2 w-1.5 h-1.5 bg-purple-400 rounded-full animate-ping\" style=\"animation-delay: 1s;\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto relative z-10\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"inline-flex items-center gap-2 py-1.5 px-5 border border-green-400\/30 rounded-full text-[10px] font-bold uppercase tracking-widest text-green-300 mb-6 bg-green-500\/10\">\r\n <span class=\"w-2 h-2 bg-green-400 rounded-full animate-pulse\"><\/span>\r\n Performance Engineering\r\n <\/span>\r\n <h2 class=\"text-5xl md:text-6xl font-bold font-display mb-6\">\r\n Speed & <span class=\"text-green-400\">SEO<\/span> Optimization\r\n <\/h2>\r\n <p class=\"text-xl text-slate-400 max-w-3xl mx-auto\">\r\n From 7 seconds to sub-1 second. We eliminated app bloat and leveraged Shopify's global CDN for lightning-fast performance.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-panel bg-white\/5 border-white\/10 p-8 mb-12\">\r\n <div class=\"grid md:grid-cols-3 gap-8 items-center\">\r\n <div class=\"text-center\">\r\n <span class=\"block text-6xl font-bold text-red-400 line-through opacity-50\">7s<\/span>\r\n <span class=\"text-sm text-slate-500\">Before (App Bloat)<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-center\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-red-500 to-green-500 rounded-full\"><\/div>\r\n <i class=\"fa-solid fa-arrow-right text-2xl text-green-400\"><\/i>\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-green-500 to-green-400 rounded-full\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <span class=\"block text-6xl font-bold text-green-400\"><1s<\/span>\r\n <span class=\"text-sm text-slate-400\">After (Optimized)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8 mb-12\">\r\n <div class=\"glass-panel bg-white\/5 border-white\/10 p-8\">\r\n <h3 class=\"text-xl font-bold mb-6 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-gauge-high text-orange-400\"><\/i>\r\n Core Web Vitals\r\n <\/h3>\r\n <div class=\"grid grid-cols-4 gap-4\">\r\n <div class=\"text-center\">\r\n <div class=\"circle-progress mx-auto mb-2\">\r\n <svg viewBox=\"0 0 80 80\">\r\n <circle class=\"bg\" cx=\"40\" cy=\"40\" r=\"35\"\/>\r\n <circle class=\"progress\" cx=\"40\" cy=\"40\" r=\"35\" stroke=\"#f59e0b\" style=\"stroke-dashoffset: 53;\"\/>\r\n <\/svg>\r\n <span class=\"value text-orange-400\">76<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400\">Performance<\/span>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"circle-progress mx-auto mb-2\">\r\n <svg viewBox=\"0 0 80 80\">\r\n <circle class=\"bg\" cx=\"40\" cy=\"40\" r=\"35\"\/>\r\n <circle class=\"progress\" cx=\"40\" cy=\"40\" r=\"35\" stroke=\"#f59e0b\" style=\"stroke-dashoffset: 40;\"\/>\r\n <\/svg>\r\n <span class=\"value text-orange-400\">82<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400\">Accessibility<\/span>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"circle-progress mx-auto mb-2\">\r\n <svg viewBox=\"0 0 80 80\">\r\n <circle class=\"bg\" cx=\"40\" cy=\"40\" r=\"35\"\/>\r\n <circle class=\"progress\" cx=\"40\" cy=\"40\" r=\"35\" stroke=\"#f59e0b\" style=\"stroke-dashoffset: 59;\"\/>\r\n <\/svg>\r\n <span class=\"value text-orange-400\">73<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400\">Best Practices<\/span>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"circle-progress mx-auto mb-2\">\r\n <svg viewBox=\"0 0 80 80\">\r\n <circle class=\"bg\" cx=\"40\" cy=\"40\" r=\"35\"\/>\r\n <circle class=\"progress\" cx=\"40\" cy=\"40\" r=\"35\" stroke=\"#22c55e\" style=\"stroke-dashoffset: 0;\"\/>\r\n <\/svg>\r\n <span class=\"value text-green-400\">100<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400\">SEO<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel bg-white\/5 border-white\/10 p-8\">\r\n <h3 class=\"text-xl font-bold mb-6 flex items-center gap-3\">\r\n <i class=\"fa-brands fa-shopify text-green-400\"><\/i>\r\n Shopify Analytics\r\n <\/h3>\r\n <div class=\"space-y-4\">\r\n <div class=\"flex justify-between items-center p-3 bg-white\/5 rounded-xl\">\r\n <span class=\"text-sm text-slate-400\">LCP P75<\/span>\r\n <span class=\"flex items-center gap-2\">\r\n <span class=\"font-mono font-bold\">1792ms<\/span>\r\n <span class=\"feature-tag bg-green-500\/20 text-green-400 text-[10px] py-1\">Good<\/span>\r\n <\/span>\r\n <\/div>\r\n <div class=\"flex justify-between items-center p-3 bg-white\/5 rounded-xl\">\r\n <span class=\"text-sm text-slate-400\">INP P75<\/span>\r\n <span class=\"flex items-center gap-2\">\r\n <span class=\"font-mono font-bold\">112ms<\/span>\r\n <span class=\"feature-tag bg-green-500\/20 text-green-400 text-[10px] py-1\">Good<\/span>\r\n <\/span>\r\n <\/div>\r\n <div class=\"flex justify-between items-center p-3 bg-white\/5 rounded-xl\">\r\n <span class=\"text-sm text-slate-400\">CLS<\/span>\r\n <span class=\"font-mono font-bold\">0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel bg-gradient-to-br from-green-500\/10 to-emerald-500\/10 border-green-500\/20 p-8\">\r\n <div class=\"flex items-start gap-6 mb-8\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-green-500\/20 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa-solid fa-bolt text-3xl text-green-400\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-2xl font-bold mb-2\">TinySEO Integration<\/h3>\r\n <p class=\"\">Our single app dependency - handles all optimization needs<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8\">\r\n <div class=\"p-4 bg-white\/5 rounded-xl text-center\">\r\n <i class=\"fa-solid fa-image text-2xl text-blue-400 mb-2\"><\/i>\r\n <span class=\"block text-2xl font-bold\">11,594<\/span>\r\n <span class=\"text-xs text-slate-500\">Images Optimized<\/span>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-xl text-center\">\r\n <i class=\"fa-solid fa-clock text-2xl text-purple-400 mb-2\"><\/i>\r\n <span class=\"block text-2xl font-bold\">1,018h<\/span>\r\n <span class=\"text-xs text-slate-500\">Time Saved<\/span>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-xl text-center\">\r\n <i class=\"fa-solid fa-link-slash text-2xl text-red-400 mb-2\"><\/i>\r\n <span class=\"block text-2xl font-bold\">1,632<\/span>\r\n <span class=\"text-xs text-slate-500\">Broken Links Fixed<\/span>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-xl text-center\">\r\n <i class=\"fa-solid fa-box text-2xl text-green-400 mb-2\"><\/i>\r\n <span class=\"block text-2xl font-bold\">3,081<\/span>\r\n <span class=\"text-xs text-slate-500\">Products Optimized<\/span>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-xl text-center\">\r\n <i class=\"fa-solid fa-folder text-2xl text-amber-400 mb-2\"><\/i>\r\n <span class=\"block text-2xl font-bold\">125<\/span>\r\n <span class=\"text-xs text-slate-500\">Collections Done<\/span>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-xl text-center\">\r\n <i class=\"fa-solid fa-star text-2xl text-cyan-400 mb-2\"><\/i>\r\n <span class=\"block text-2xl font-bold\">77<\/span>\r\n <span class=\"text-xs text-slate-500\">SEO Score<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">Metadata Optimization<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">Alt Text Generation<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">JS\/CSS Minification<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">Faster Indexing<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">Lazy Loading<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">Asset Preloading<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">Broken Link Detection<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 p-3 bg-white\/5 rounded-xl\">\r\n <i class=\"fa-solid fa-check text-green-400\"><\/i>\r\n <span class=\"text-sm\">Image Compression<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== VISUAL TRANSFORMATION ==================== -->\r\n <section id=\"visual\" class=\"section-pad px-6 md:px-12 bg-gradient-to-b from-slate-50\/80 to-white\/80\" data-scroll-section>\r\n <div class=\"max-w-7xl mx-auto\">\r\n <span class=\"section-label\">02 \u2022 Visual Transformation<\/span>\r\n <h2 class=\"text-5xl font-bold font-display mb-16\">Header <span class=\"holographic-text\">Evolution<\/span><\/h2>\r\n\r\n <div class=\"flex flex-col gap-12 mb-16\">\r\n <div class=\"gs-reveal w-full\">\r\n <div class=\"flex justify-between items-end mb-4 px-2\">\r\n <span class=\"text-xs font-bold uppercase tracking-widest text-slate-400\">Before: Legacy Header<\/span>\r\n <span class=\"text-[10px] bg-slate-200 px-3 py-1.5 rounded-full text-slate-500\">Static \/ Cluttered<\/span>\r\n <\/div>\r\n <div class=\"img-wrapper w-full shadow-sm opacity-70\" id=\"wrapper_headerOld\">\r\n <img decoding=\"async\" id=\"img_headerOld\" src=\"\" alt=\"Old Header\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"gs-reveal w-full\">\r\n <div class=\"flex justify-between items-end mb-4 px-2\">\r\n <span class=\"text-xs font-bold uppercase tracking-widest text-blue-600\">After: Modern Header<\/span>\r\n <span class=\"text-[10px] bg-blue-100 px-3 py-1.5 rounded-full text-blue-600\">Glassmorphism \/ Semantic Icons<\/span>\r\n <\/div>\r\n <div class=\"img-wrapper w-full shadow-2xl ring-4 ring-blue-50\/50 holo-border\" id=\"wrapper_headerNew\">\r\n <img decoding=\"async\" id=\"img_headerNew\" src=\"\" alt=\"New Header\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <h3 class=\"text-3xl font-bold mb-6\">Semantic Icon Menu<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed mb-6\">\r\n We completely rebuilt the navigation. Moving away from text-heavy lists, we introduced a semantic icon system to help children and parents identify categories instantly.\r\n <\/p>\r\n <div class=\"glass-panel p-6 shimmer-card\">\r\n <h4 class=\"font-bold text-slate-800 text-xs uppercase mb-2\">Design Impact<\/h4>\r\n <p class=\"text-slate-500 text-sm\">Visual cues reduce cognitive load, allowing faster category discovery on mobile devices.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal flex justify-center\">\r\n <div class=\"img-wrapper shadow-xl w-64\" id=\"wrapper_menu\">\r\n <img decoding=\"async\" id=\"img_menu\" src=\"\" alt=\"Visual Menu\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== BACKEND AUTOMATION ==================== -->\r\n <section id=\"backend\" class=\"section-pad px-6 md:px-12 bg-white\/80\" data-scroll-section>\r\n <div class=\"max-w-7xl mx-auto\">\r\n <span class=\"section-label\">03 \u2022 Backend Automation<\/span>\r\n <h2 class=\"text-5xl font-bold font-display mb-12\">System <span class=\"text-gradient\">Integrations<\/span><\/h2>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8 mb-12\">\r\n <div class=\"glass-panel p-8 shimmer-card\">\r\n <div class=\"flex items-start gap-4 mb-6\">\r\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center text-blue-500 flex-shrink-0\">\r\n <i class=\"fa-solid fa-rotate text-2xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold\">Stock Refresh Rate<\/h3>\r\n <span class=\"feature-tag bg-green-100 text-green-600 text-[10px] mt-2\">5 Minutes<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm text-slate-500 mb-6\">High-frequency inventory sync implemented across the entire store to prevent overselling.<\/p>\r\n <div class=\"w-full bg-slate-100 h-2 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-green-400 to-emerald-500 h-full w-full relative\">\r\n <div class=\"absolute inset-0 bg-white\/30 animate-pulse\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4 flex items-center gap-2\">\r\n <span class=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\"><\/span>\r\n <span class=\"text-[10px] uppercase font-bold text-green-600\">Live Status<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel p-8 shimmer-card\">\r\n <div class=\"flex items-start gap-4 mb-6\">\r\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-50 to-amber-100 flex items-center justify-center text-orange-500 flex-shrink-0\">\r\n <i class=\"fa-solid fa-chart-bar text-2xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold\">Automated Reporting<\/h3>\r\n <span class=\"feature-tag bg-orange-100 text-orange-600 text-[10px] mt-2\">Firebase Integration<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm text-slate-500\">Daily Shopify sales reports are automatically generated and dispatched via Google Firebase.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Meta & Twilio WITH IMAGES -->\r\n <div class=\"glass-panel p-8 holo-border\">\r\n <h3 class=\"text-2xl font-bold mb-6\">Meta & Twilio Integration<\/h3>\r\n <p class=\"text-sm text-slate-500 mb-8\">Automated fulfillment messaging via WhatsApp with Email fallback.<\/p>\r\n \r\n <div class=\"grid md:grid-cols-2 gap-8 mb-8\">\r\n <div class=\"flex items-center gap-6 p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-white flex items-center justify-center shadow-lg\">\r\n <i class=\"fa-brands fa-whatsapp text-3xl text-green-500\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Message Template<\/h4>\r\n <p class=\"text-sm text-slate-500\">\"Congrats [Name]! Your code is...\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-6 p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-white flex items-center justify-center shadow-lg\">\r\n <i class=\"fa-solid fa-envelope text-3xl text-blue-500\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Email Fallback<\/h4>\r\n <p class=\"text-sm text-slate-500\">Auto-sent if WhatsApp fails<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- IMAGE PLACEHOLDERS FOR TEMPLATES -->\r\n <div class=\"grid md:grid-cols-2 gap-8\">\r\n <div class=\"gs-reveal\">\r\n <span class=\"text-xs font-bold uppercase text-slate-400 block mb-2\">WhatsApp Template<\/span>\r\n <div class=\"img-wrapper shadow-lg\" id=\"wrapper_whatsappTemplate\">\r\n <img decoding=\"async\" id=\"img_whatsappTemplate\" src=\"\" alt=\"WhatsApp Template\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <span class=\"text-xs font-bold uppercase text-slate-400 block mb-2\">Email Template<\/span>\r\n <div class=\"img-wrapper shadow-lg\" id=\"wrapper_emailTemplate\">\r\n <img decoding=\"async\" id=\"img_emailTemplate\" src=\"\" alt=\"Email Template\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== GAMIFICATION - BIGGER GAMES ==================== -->\r\n <section id=\"gamification\" class=\"section-pad px-6 md:px-12 bg-slate-900 text-white relative overflow-hidden\" data-scroll-section>\r\n \r\n <div class=\"cyber-scene\">\r\n <div class=\"cyber-grid\"><\/div>\r\n \r\n <div class=\"crt-overlay\"><\/div>\r\n \r\n <div class=\"glitch-cube\" style=\"width: 60px; height: 60px; top: 20%; left: 10%; animation-delay: 0s;\"><\/div>\r\n <div class=\"glitch-cube\" style=\"width: 100px; height: 100px; top: 60%; right: 5%; border-color: rgba(255,0,193,0.2); animation-delay: -3s;\"><\/div>\r\n <div class=\"glitch-cube\" style=\"width: 40px; height: 40px; top: 80%; left: 20%; border-color: rgba(255,255,0,0.2); animation-delay: -5s;\"><\/div>\r\n <div class=\"glitch-cube\" style=\"width: 80px; height: 80px; top: 15%; right: 20%; animation-delay: -7s;\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto relative z-10\">\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <span class=\"section-label text-blue-400 mb-0\">04 \u2022 Gamification Engine<\/span>\r\n <span class=\"feature-tag bg-purple-500\/20 text-purple-300 text-[10px]\">Gamification<\/span>\r\n <\/div>\r\n \r\n <h2 class=\"glitch-effect text-6xl md:text-8xl font-bold mb-8\" data-text=\"Play & Win.\">\r\n Play & Win<span class=\"text-blue-500\">.<\/span>\r\n<\/h2>\r\n <p class=\"text-slate-400 text-xl leading-relaxed max-w-4xl mb-16\">\r\n We designed and delivered a fully automated gamified discount engine for The Toy Store LB, turning customer engagement into measurable sales conversion.\r\n <\/p>\r\n\r\n <!-- ARCADE GAMES - MUCH BIGGER WITH FULL WIDTH IMAGES -->\r\n <h3 class=\"text-3xl font-bold mb-8 pl-4 border-l-4 border-purple-500\">The Arcade Games<\/h3>\r\n <div class=\"grid md:grid-cols-2 gap-8 mb-16\">\r\n <!-- Flappy Win -->\r\n <div class=\"game-card\">\r\n <div class=\"w-full aspect-video rounded-2xl overflow-hidden bg-slate-800 mb-6\" id=\"wrapper_game2\">\r\n <img decoding=\"async\" id=\"img_game2\" src=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-amber-400 to-yellow-500 flex items-center justify-center\">\r\n <i class=\"fa-solid fa-gamepad text-white text-xl\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-2xl font-bold\">Flappy Win<\/h4>\r\n <\/div>\r\n <p class=\"text-slate-400 mb-4\">Navigate through pipes to win! Tap to fly and pass through 15 pipes to unlock your reward.<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <span class=\"feature-tag bg-amber-500\/20 text-amber-400\">15% OFF<\/span>\r\n <span class=\"text-slate-500 text-sm\">Play Now \u2192<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Memory Match -->\r\n <div class=\"game-card\">\r\n <div class=\"w-full aspect-video rounded-2xl overflow-hidden bg-slate-800 mb-6\" id=\"wrapper_game1\">\r\n <img decoding=\"async\" id=\"img_game1\" src=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-rose-400 to-red-500 flex items-center justify-center\">\r\n <i class=\"fa-solid fa-brain text-white text-xl\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-2xl font-bold\">Memory Match<\/h4>\r\n <\/div>\r\n <p class=\"text-slate-400 mb-4\">Find all matching pairs! Match 8 pairs of cards within the time limit. Cards shuffle after preview!<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <span class=\"feature-tag bg-rose-500\/20 text-rose-400\">10% OFF<\/span>\r\n <span class=\"text-slate-500 text-sm\">Play Now \u2192<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Circuit Connect -->\r\n <div class=\"game-card\">\r\n <div class=\"w-full aspect-video rounded-2xl overflow-hidden bg-slate-800 mb-6\" id=\"wrapper_game3\">\r\n <img decoding=\"async\" id=\"img_game3\" src=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center\">\r\n <i class=\"fa-solid fa-bolt text-white text-xl\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-2xl font-bold\">Circuit Connect<\/h4>\r\n <\/div>\r\n <p class=\"text-slate-400 mb-4\">Collect 8 volts! Connect battery to bulb through +V cells. Click wires to rotate!<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <span class=\"feature-tag bg-teal-500\/20 text-teal-400\">15% OFF<\/span>\r\n <span class=\"text-slate-500 text-sm\">Play Now \u2192<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Code Quest -->\r\n <div class=\"game-card\">\r\n <div class=\"w-full aspect-video rounded-2xl overflow-hidden bg-slate-800 mb-6\" id=\"wrapper_game4\">\r\n <img decoding=\"async\" id=\"img_game4\" src=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center\">\r\n <i class=\"fa-solid fa-code text-white text-xl\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-2xl font-bold\">Code Quest<\/h4>\r\n <\/div>\r\n <p class=\"text-slate-400 mb-4\">Answer 7 questions! Fill in the blanks in code snippets. 3 mistakes max!<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <span class=\"feature-tag bg-indigo-500\/20 text-indigo-400\">20% OFF<\/span>\r\n <span class=\"text-slate-500 text-sm\">Play Now \u2192<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Entry Point Only - NO GAME MODAL -->\r\n <h3 class=\"text-2xl font-bold mb-8 pl-4 border-l-4 border-blue-500\">Entry Point<\/h3>\r\n <div class=\"gs-reveal mb-16\">\r\n <div class=\"img-wrapper w-full bg-white\/5 border-white\/10\" id=\"wrapper_playWinEntry\">\r\n <img decoding=\"async\" id=\"img_playWinEntry\" src=\"\" alt=\"Entry\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Performance Stats -->\r\n <div class=\"pt-12 border-t border-slate-800\">\r\n <div class=\"grid md:grid-cols-2 gap-16\">\r\n <div>\r\n <h3 class=\"text-2xl font-bold mb-6 text-green-400\">Actual Performance (Dec 2024)<\/h3>\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <div class=\"bg-white\/5 p-6 rounded-xl border border-white\/10\">\r\n <span class=\"block text-4xl font-bold counter-value\" data-target=\"80\">0<\/span>\r\n <span class=\"text-xs text-slate-500\">Organic Winners<\/span>\r\n <\/div>\r\n <div class=\"bg-white\/5 p-6 rounded-xl border border-white\/10\">\r\n <span class=\"block text-4xl font-bold\"><span class=\"counter-value\" data-target=\"19\">0<\/span>%<\/span>\r\n <span class=\"text-xs text-slate-500\">Conversion Ratio<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-2xl font-bold mb-6 text-blue-400\">Projected ROI (Scaled Model)<\/h3>\r\n <p class=\"text-slate-400 mb-4 text-sm\">Based on 10,000 participants (Monthly Campaign):<\/p>\r\n <div class=\"flex justify-between items-center p-4 bg-white\/5 rounded-xl\">\r\n <span class=\"font-bold text-white\">Net Incremental Revenue<\/span>\r\n <span class=\"font-bold text-green-400 text-3xl\">+$12,700<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== DISCOVERY ==================== -->\r\n <section id=\"discovery\" class=\"section-pad px-6 md:px-12 bg-white\/80\" data-scroll-section>\r\n <div class=\"max-w-7xl mx-auto\">\r\n <span class=\"section-label\">05 \u2022 Intelligent Discovery<\/span>\r\n <h2 class=\"text-5xl font-bold font-display mb-16\">Guided <span class=\"holographic-text\">Experience<\/span><\/h2>\r\n\r\n <!-- Interactive Catalogue -->\r\n <div class=\"glass-panel p-8 mb-16 holo-border\" style=\"background: linear-gradient(135deg, rgba(167,243,208,0.3) 0%, rgba(134,239,172,0.2) 50%, rgba(167,243,208,0.3) 100%);\">\r\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <span class=\"feature-tag bg-purple-100 text-purple-600 mb-4\">In-House Innovation<\/span>\r\n <h3 class=\"text-3xl font-bold mb-4\">3D Interactive Catalogue<\/h3>\r\n <p class=\"text-slate-600 mb-6\">A web-based 3D flipbook with clickable \"hotspots\" that link directly to product pages.<\/p>\r\n \r\n <ul class=\"space-y-3 mb-8\">\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center font-bold text-xs text-blue-600\">01<\/span>\r\n <span class=\"text-sm\"><strong>Physics Engine:<\/strong> Realistic page flipping & shadows.<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center font-bold text-xs text-blue-600\">02<\/span>\r\n <span class=\"text-sm\"><strong>Mobile First:<\/strong> Swipe-optimized hybrid rendering.<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <span class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center font-bold text-xs text-blue-600\">03<\/span>\r\n <span class=\"text-sm\"><strong>Hotspots:<\/strong> 99+ clickable products mapped.<\/span>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <div class=\"p-4 bg-white\/80 rounded-xl shadow-sm\">\r\n <span class=\"block text-3xl font-bold text-green-600\">#2<\/span>\r\n <span class=\"text-xs text-slate-500\">Top Landing Page<\/span>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/80 rounded-xl shadow-sm\">\r\n <span class=\"block text-3xl font-bold text-blue-600\">1.7k<\/span>\r\n <span class=\"text-xs text-slate-500\">Dec Sessions<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <div class=\"img-wrapper shadow-2xl\" id=\"wrapper_catalogue\">\r\n <img decoding=\"async\" id=\"img_catalogue\" src=\"\" alt=\"Catalogue\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Gift Finder - 2x2 Grid -->\r\n <div class=\"mb-16\">\r\n <h3 class=\"text-3xl font-bold mb-8 pl-4 border-l-4 border-blue-500\">The Gift Finder Engine<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n <div class=\"gs-reveal\">\r\n <span class=\"block text-xs font-bold uppercase text-slate-400 mb-2\">Step 01: Interest<\/span>\r\n <div class=\"img-wrapper aspect-video\" id=\"wrapper_giftFinder1\">\r\n <img decoding=\"async\" id=\"img_giftFinder1\" src=\"\" alt=\"Step 1\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <span class=\"block text-xs font-bold uppercase text-slate-400 mb-2\">Step 02: Age<\/span>\r\n <div class=\"img-wrapper aspect-video\" id=\"wrapper_giftFinder2\">\r\n <img decoding=\"async\" id=\"img_giftFinder2\" src=\"\" alt=\"Step 2\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <span class=\"block text-xs font-bold uppercase text-slate-400 mb-2\">Step 03: Budget<\/span>\r\n <div class=\"img-wrapper aspect-video\" id=\"wrapper_giftFinder3\">\r\n <img decoding=\"async\" id=\"img_giftFinder3\" src=\"\" alt=\"Step 3\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <span class=\"block text-xs font-bold uppercase text-blue-500 mb-2\">Final: Results<\/span>\r\n <div class=\"img-wrapper aspect-video holo-border\" id=\"wrapper_giftFinderResults\">\r\n <img decoding=\"async\" id=\"img_giftFinderResults\" src=\"\" alt=\"Results\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== CONVERSION ==================== -->\r\n <section id=\"conversion\" class=\"section-pad px-6 md:px-12 bg-gradient-to-b from-slate-50\/80 to-white\/80\" data-scroll-section>\r\n <div class=\"max-w-7xl mx-auto\">\r\n <span class=\"section-label\">06 \u2022 Enhanced PDP<\/span>\r\n <h2 class=\"text-4xl font-bold mb-12\">Conversion <span class=\"text-gradient\">Features<\/span><\/h2>\r\n \r\n <!-- Sign Up Form -->\r\n <div class=\"grid md:grid-cols-2 gap-8 mb-16\">\r\n <div>\r\n <h3 class=\"text-2xl font-bold mb-4\">Welcome Discount Popup<\/h3>\r\n <p class=\"text-slate-600 mb-6\">Capture first-time visitors with an irresistible 10% off their first order. Smart popup with phone number collection for WhatsApp marketing.<\/p>\r\n <ul class=\"space-y-3\">\r\n <li class=\"flex items-center gap-3 text-sm\">\r\n <i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n <span>Name, Email & Phone collection<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3 text-sm\">\r\n <i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n <span>Lebanon country code pre-selected<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3 text-sm\">\r\n <i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n <span>Instant discount code delivery<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"gs-reveal flex justify-center\">\r\n <div class=\"img-wrapper max-w-xs shadow-xl\" id=\"wrapper_signupPopup\">\r\n <img decoding=\"async\" id=\"img_signupPopup\" src=\"\" alt=\"Signup Popup\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Shop by Age -->\r\n <div class=\"glass-panel p-8 mb-12\">\r\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"gs-reveal\">\r\n <div class=\"img-wrapper shadow-lg\" id=\"wrapper_shopByAge\">\r\n <img decoding=\"async\" id=\"img_shopByAge\" src=\"\" alt=\"Shop by Age\">\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <span class=\"feature-tag bg-blue-100 text-blue-600 mb-4\">Discovery Feature<\/span>\r\n <h3 class=\"text-2xl font-bold mb-4\">Shop By Age Slider<\/h3>\r\n <p class=\"text-slate-600 mb-4\">Interactive age slider helps parents find age-appropriate toys instantly.<\/p>\r\n <ul class=\"space-y-2 text-sm text-slate-500\">\r\n <li>\u2022 6 age brackets from 0-1 to Adults<\/li>\r\n <li>\u2022 Animated slider with visual indicators<\/li>\r\n <li>\u2022 Dynamic product carousel updates<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Brand Slider -->\r\n <div class=\"glass-panel p-8 mb-16\">\r\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\r\n <div>\r\n <span class=\"feature-tag bg-purple-100 text-purple-600 mb-4\">Trust Builder<\/span>\r\n <h3 class=\"text-2xl font-bold mb-4\">Brand Carousel<\/h3>\r\n <p class=\"text-slate-600 mb-4\">Auto-playing brand slider showcases our trusted partners.<\/p>\r\n <ul class=\"space-y-2 text-sm text-slate-500\">\r\n <li>\u2022 Continuous autoplay animation<\/li>\r\n <li>\u2022 50+ brand logos displayed<\/li>\r\n <li>\u2022 Clickable links to brand collections<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <div class=\"img-wrapper shadow-lg\" id=\"wrapper_brandSlider\">\r\n <img decoding=\"async\" id=\"img_brandSlider\" src=\"\" alt=\"Brand Slider\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PDP SECTION - NEW LAYOUT -->\r\n <h3 class=\"text-2xl font-bold mb-8 pl-4 border-l-4 border-green-500\">Product Page Enhancements<\/h3>\r\n \r\n <!-- Old & New PDP Side by Side -->\r\n <div class=\"grid md:grid-cols-2 gap-8 mb-8\">\r\n <div class=\"gs-reveal\">\r\n <span class=\"text-xs font-bold uppercase text-slate-400 block mb-2\">Legacy PDP<\/span>\r\n <div class=\"img-wrapper opacity-70\" id=\"wrapper_pdpOld\">\r\n <img decoding=\"async\" id=\"img_pdpOld\" src=\"\" alt=\"Old PDP\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <span class=\"text-xs font-bold uppercase text-blue-500 block mb-2\">New PDP<\/span>\r\n <div class=\"img-wrapper shadow-xl ring-2 ring-blue-100 holo-border\" id=\"wrapper_pdpNew\">\r\n <img decoding=\"async\" id=\"img_pdpNew\" src=\"\" alt=\"New PDP\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Backend Fulfillment Tag - FULL WIDTH -->\r\n <div class=\"gs-reveal mb-8\">\r\n <span class=\"text-xs font-bold uppercase text-green-500 block mb-2\">Backend Fulfillment Tag<\/span>\r\n <div class=\"img-wrapper w-full shadow-lg bg-gradient-to-br from-green-50 to-emerald-50\" id=\"wrapper_orderTag\">\r\n <img decoding=\"async\" id=\"img_orderTag\" src=\"\" alt=\"Order Tag\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Gift Wrap & Message Side by Side -->\r\n <div class=\"grid md:grid-cols-2 gap-8 mb-8\">\r\n <div class=\"gs-reveal\">\r\n <span class=\"text-xs font-bold uppercase text-slate-400 block mb-2\">Gift Wrap UI<\/span>\r\n <div class=\"img-wrapper\" id=\"wrapper_giftWrap\">\r\n <img decoding=\"async\" id=\"img_giftWrap\" src=\"\" alt=\"Gift Wrap\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"gs-reveal\">\r\n <span class=\"text-xs font-bold uppercase text-slate-400 block mb-2\">Message Input<\/span>\r\n <div class=\"img-wrapper\" id=\"wrapper_giftMessage\">\r\n <img decoding=\"async\" id=\"img_giftMessage\" src=\"\" alt=\"Message\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel p-6\">\r\n <h4 class=\"font-bold mb-3\">Gift Wrap System<\/h4>\r\n <p class=\"text-sm text-slate-500\">Custom gift wrapping with personalized messages. Toggle adds FREE gift wrap option. Message appears on packing slip for fulfillment team.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- ==================== DATA ENTRY - NO HOURS OF DEDICATION ==================== -->\r\n <section id=\"data\" class=\"section-pad px-6 md:px-12 bg-gradient-to-br from-amber-50 to-orange-50\" data-scroll-section>\r\n <div class=\"max-w-7xl mx-auto\">\r\n <span class=\"section-label\">07 \u2022 Data Operations<\/span>\r\n <h2 class=\"text-4xl font-bold mb-6\">Product <span class=\"text-gradient\">Data Entry<\/span><\/h2>\r\n <p class=\"text-lg text-slate-500 max-w-3xl mb-12\">\r\n Massive data optimization effort to improve searchability, categorization, and customer experience across the entire product catalog.\r\n <\/p>\r\n\r\n <!-- Stats - 3 COLUMNS ONLY -->\r\n <div class=\"grid md:grid-cols-3 gap-6 mb-12\">\r\n <div class=\"glass-panel p-6 text-center\">\r\n <span class=\"block text-4xl font-bold text-amber-600\">3<\/span>\r\n <span class=\"text-sm text-slate-500\">New Locations Added<\/span>\r\n <\/div>\r\n <div class=\"glass-panel p-6 text-center\">\r\n <span class=\"block text-4xl font-bold text-orange-600\">5,000+<\/span>\r\n <span class=\"text-sm text-slate-500\">Products Optimized<\/span>\r\n <\/div>\r\n <div class=\"glass-panel p-6 text-center\">\r\n <span class=\"block text-4xl font-bold text-red-600\">100%<\/span>\r\n <span class=\"text-sm text-slate-500\">Tags Restructured<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Work Done -->\r\n <div class=\"grid md:grid-cols-2 gap-8 mb-12\">\r\n <div class=\"glass-panel p-8\">\r\n <h3 class=\"text-xl font-bold mb-6 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-list-check text-green-500\"><\/i>\r\n Optimization Tasks\r\n <\/h3>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-check text-green-500 mt-1\"><\/i>\r\n <span><strong>Types & Tags:<\/strong> Restructured product types and tags for better filtering<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-check text-green-500 mt-1\"><\/i>\r\n <span><strong>Titles:<\/strong> Standardized naming (Brand + Product + Key Feature)<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-check text-green-500 mt-1\"><\/i>\r\n <span><strong>Age & Gender:<\/strong> Added age ranges and gender tags for filtering<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-check text-green-500 mt-1\"><\/i>\r\n <span><strong>Vendor Names:<\/strong> Cleaned and standardized all brand names<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-check text-green-500 mt-1\"><\/i>\r\n <span><strong>Images & Descriptions:<\/strong> Updated product media and copy<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-check text-green-500 mt-1\"><\/i>\r\n <span><strong>Auto Collections:<\/strong> Using inventory stock > 2 condition - no more manual draft\/active switching<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"glass-panel p-8 bg-gradient-to-br from-blue-50 to-indigo-50\">\r\n <h3 class=\"text-xl font-bold mb-6 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-sitemap text-blue-500\"><\/i>\r\n New Tag Structure\r\n <\/h3>\r\n <p class=\"text-slate-600 mb-4\">\r\n A completely redesigned tagging system that makes categorization effortless and eliminates the need for multiple conflicting tags.\r\n <\/p>\r\n <div class=\"p-4 bg-white\/80 rounded-xl\">\r\n <span class=\"text-sm text-slate-500\">Benefits:<\/span>\r\n <ul class=\"mt-2 space-y-1 text-sm\">\r\n <li>\u2022 Simplified collection conditions<\/li>\r\n <li>\u2022 Faster product categorization<\/li>\r\n <li>\u2022 No duplicate tag conflicts<\/li>\r\n <li>\u2022 Easier bulk editing<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Team Credits -->\r\n <div class=\"glass-panel p-8 bg-gradient-to-r from-purple-50 to-pink-50\">\r\n <h3 class=\"text-xl font-bold mb-6 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-users text-purple-500\"><\/i>\r\n The Team Behind the Data\r\n <\/h3>\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"text-center\">\r\n <div class=\"w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center text-white text-2xl font-bold\">Y<\/div>\r\n <h4 class=\"font-bold\">Yasmine<\/h4>\r\n <span class=\"text-xs text-slate-500\">Data Entry Lead<\/span>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-2xl font-bold\">S<\/div>\r\n <h4 class=\"font-bold\">Shukry<\/h4>\r\n <span class=\"text-xs text-slate-500\">Supervisor<\/span>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center text-white text-2xl font-bold\">A<\/div>\r\n <h4 class=\"font-bold\">Aboualjoud<\/h4>\r\n <span class=\"text-xs text-slate-500\">Tag Architecture & Supervision<\/span>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center text-white text-2xl font-bold\">H<\/div>\r\n <h4 class=\"font-bold\">Hassanein<\/h4>\r\n <span class=\"text-xs text-slate-500\">Support<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Footer -->\r\n <footer class=\"py-16 border-t border-slate-200 text-center bg-white relative overflow-hidden\">\r\n <div class=\"absolute inset-0 opacity-5\">\r\n <div class=\"absolute inset-0\" style=\"background-image: radial-gradient(circle at 2px 2px, #7c3aed 1px, transparent 0); background-size: 40px 40px;\"><\/div>\r\n <\/div>\r\n <p class=\"text-[10px] font-bold tracking-[0.25em] uppercase text-slate-400 relative z-10\">The Toy Store \u2022 E-Commerce Department \u2022 Confidential Report 2025<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n const images = {\r\n logo: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Adobe_Express_-_file_09a42a3b-6f0b-44ad-94c9-a205f7385008.png?v=1763198534\", scale: 100 },\r\n headerOld: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-02_150357.png?v=1767359056\", scale: 100 },\r\n headerNew: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-02_150219.png?v=1767358964\", scale: 100 },\r\n menu: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Picture23.png?v=1767358794\", scale: 100 },\r\n giftFinder1: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-02_151335.png?v=1767359685\", scale: 100 },\r\n giftFinder2: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-02_151312.png?v=1767359686\", scale: 100 },\r\n giftFinder3: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-02_151350.png?v=1767359686\", scale: 100 },\r\n giftFinderResults: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-02_151419.png?v=1767359686\", scale: 100 },\r\n catalogue: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-02_150735.png?v=1767359269\", scale: 100 },\r\n pdpOld: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_160005.png?v=1767621622\", scale: 100 },\r\n pdpNew: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_160141.png?v=1767621712\", scale: 100 },\r\n giftMessage: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_160252.png?v=1767621790\", scale: 100 },\r\n giftWrap: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-06_100837.png?v=1767686929\", scale: 100 },\r\n orderTag: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_160618.png?v=1767621987\", scale: 100 },\r\n playWinEntry: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-06_114156.png?v=1767692526\", scale: 100 },\r\n game1: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_161111.png?v=1767622283\", scale: 100 },\r\n game2: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_161209.png?v=1767622338\", scale: 100 },\r\n game3: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_161255.png?v=1767622388\", scale: 100 },\r\n game4: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-05_161333.png?v=1767622426\", scale: 100 },\r\n \/\/ ADD YOUR URLS HERE:\r\n signupPopup: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-06_110040.png?v=1767690170\", scale: 100 },\r\n shopByAge: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-06_105951.png?v=1767690004\", scale: 100 },\r\n brandSlider: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-06_105938.png?v=1767690005\", scale: 100 },\r\n whatsappTemplate: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-06_110235.png?v=1767690170\", scale: 100 },\r\n emailTemplate: { url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/9100\/0314\/files\/Screenshot_2026-01-06_110418.png?v=1767690268\", scale: 100 },\r\n };\r\n\r\n const loadImages = () => {\r\n Object.keys(images).forEach(key => {\r\n const imgEl = document.getElementById(`img_${key}`);\r\n const wrapperEl = document.getElementById(`wrapper_${key}`);\r\n const config = images[key];\r\n if (imgEl && config.url) imgEl.src = config.url;\r\n if (wrapperEl && config.scale && config.scale < 100) {\r\n wrapperEl.style.width = `${config.scale}%`;\r\n wrapperEl.style.margin = '0 auto';\r\n }\r\n if (key === 'logo') {\r\n const logoEl = document.getElementById('nav_logo');\r\n if (logoEl) logoEl.src = config.url;\r\n }\r\n });\r\n };\r\n\r\n const initCursor = () => {\r\n const dot = document.getElementById('cursor-dot');\r\n const glow = document.getElementById('cursor-glow');\r\n let mouseX = 0, mouseY = 0, dotX = 0, dotY = 0, glowX = 0, glowY = 0;\r\n \r\n document.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; });\r\n \r\n document.querySelectorAll('a, button, .img-wrapper, .glass-panel, .game-card, .nav-trigger').forEach(el => {\r\n el.addEventListener('mouseenter', () => dot.classList.add('hovering'));\r\n el.addEventListener('mouseleave', () => dot.classList.remove('hovering'));\r\n });\r\n \r\n const animate = () => {\r\n dotX += (mouseX - dotX) * 0.2;\r\n dotY += (mouseY - dotY) * 0.2;\r\n dot.style.left = dotX + 'px';\r\n dot.style.top = dotY + 'px';\r\n glowX += (mouseX - glowX) * 0.1;\r\n glowY += (mouseY - glowY) * 0.1;\r\n glow.style.left = glowX + 'px';\r\n glow.style.top = glowY + 'px';\r\n requestAnimationFrame(animate);\r\n };\r\n animate();\r\n };\r\n\r\n const initAurora = () => {\r\n const canvas = document.getElementById('aurora-canvas');\r\n const ctx = canvas.getContext('2d');\r\n const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };\r\n resize();\r\n window.addEventListener('resize', resize);\r\n \r\n const colors = [{ r: 102, g: 126, b: 234 }, { r: 118, g: 75, b: 162 }, { r: 240, g: 147, b: 251 }, { r: 79, g: 172, b: 254 }];\r\n const blobs = colors.map((color, i) => ({\r\n x: Math.random() * canvas.width, y: Math.random() * canvas.height,\r\n radius: 300 + Math.random() * 200, color,\r\n vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5,\r\n phase: i * Math.PI \/ 2\r\n }));\r\n \r\n const animate = () => {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n blobs.forEach(blob => {\r\n blob.x += blob.vx; blob.y += blob.vy; blob.phase += 0.005;\r\n if (blob.x < -100 || blob.x > canvas.width + 100) blob.vx *= -1;\r\n if (blob.y < -100 || blob.y > canvas.height + 100) blob.vy *= -1;\r\n const pulseRadius = blob.radius + Math.sin(blob.phase) * 50;\r\n const gradient = ctx.createRadialGradient(blob.x, blob.y, 0, blob.x, blob.y, pulseRadius);\r\n gradient.addColorStop(0, `rgba(${blob.color.r}, ${blob.color.g}, ${blob.color.b}, 0.4)`);\r\n gradient.addColorStop(0.5, `rgba(${blob.color.r}, ${blob.color.g}, ${blob.color.b}, 0.1)`);\r\n gradient.addColorStop(1, 'transparent');\r\n ctx.fillStyle = gradient;\r\n ctx.beginPath();\r\n ctx.arc(blob.x, blob.y, pulseRadius, 0, Math.PI * 2);\r\n ctx.fill();\r\n });\r\n requestAnimationFrame(animate);\r\n };\r\n animate();\r\n };\r\n\r\n const initParticles = () => {\r\n const canvas = document.getElementById('particle-canvas');\r\n const ctx = canvas.getContext('2d');\r\n const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };\r\n resize();\r\n window.addEventListener('resize', resize);\r\n \r\n const particles = Array.from({ length: 40 }, () => ({\r\n x: Math.random() * canvas.width, y: Math.random() * canvas.height,\r\n size: Math.random() * 3 + 1, speedY: Math.random() * 0.5 + 0.1,\r\n opacity: Math.random() * 0.5 + 0.2, hue: Math.random() * 60 + 220\r\n }));\r\n \r\n const animate = () => {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n particles.forEach(p => {\r\n p.y -= p.speedY; p.x += Math.sin(p.y * 0.01) * 0.3;\r\n if (p.y < -10) { p.y = canvas.height + 10; p.x = Math.random() * canvas.width; }\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n ctx.fillStyle = `hsla(${p.hue}, 70%, 70%, ${p.opacity})`;\r\n ctx.fill();\r\n });\r\n requestAnimationFrame(animate);\r\n };\r\n animate();\r\n };\r\n\r\n const lenis = new Lenis({ duration: 1.4, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smooth: true });\r\n lenis.on('scroll', ({ progress }) => { document.getElementById('progress-bar').style.width = (progress * 100) + '%'; });\r\n function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }\r\n requestAnimationFrame(raf);\r\n\r\n gsap.registerPlugin(ScrollTrigger);\r\n \r\n document.querySelectorAll('.gs-reveal').forEach(el => {\r\n gsap.from(el, { \r\n scrollTrigger: { trigger: el, start: \"top 85%\", toggleActions: \"play none none reverse\" }, \r\n y: 60, opacity: 0, duration: 1, ease: \"power3.out\" \r\n });\r\n });\r\n \r\n document.querySelectorAll('.counter-value').forEach(counter => {\r\n const target = parseInt(counter.dataset.target);\r\n if (!target) return;\r\n gsap.to(counter, {\r\n scrollTrigger: { trigger: counter, start: \"top 90%\", once: true },\r\n textContent: target, duration: 2, ease: \"power2.out\", snap: { textContent: 1 }\r\n });\r\n });\r\n\r\n const hideLoader = () => { setTimeout(() => { document.getElementById('loader').classList.add('hidden'); }, 1500); };\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n loadImages();\r\n initAurora();\r\n initParticles();\r\n initCursor();\r\n hideLoader();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Toy Store | E-Commerce Digital Achievements Report 2025 Loading Experience Jump to Section Overview In-House Development Speed & SEO Visual Transformation Backend Automation Play & Win Discovery Features Conversion Features Data Entry 2025 Report E-Commerce Department \u2022 2025 Review The Year of Innovation From 7-second load times to sub-1-second performance. Custom gamification engines, automated … <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/pages\/233"}],"collection":[{"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":6,"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/pages\/233\/revisions"}],"predecessor-version":[{"id":239,"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/pages\/233\/revisions\/239"}],"wp:attachment":[{"href":"https:\/\/ambgrouplb.com\/index.php\/wp-json\/wp\/v2\/media?parent=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}