| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Kortex AI - The Accountable B2B Sales Platform</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| line-height: 1.6; |
| color: #333; |
| overflow-x: hidden; |
| } |
| |
| |
| .navbar { |
| position: fixed; |
| top: 0; |
| width: 100%; |
| background: rgba(23, 32, 42, 0.95); |
| backdrop-filter: blur(10px); |
| z-index: 1000; |
| padding: 1rem 2rem; |
| transition: all 0.3s ease; |
| } |
| |
| .nav-container { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .logo { |
| font-size: 1.5rem; |
| font-weight: bold; |
| color: white; |
| } |
| |
| .nav-menu { |
| display: flex; |
| list-style: none; |
| gap: 2rem; |
| } |
| |
| .nav-menu a { |
| color: white; |
| text-decoration: none; |
| font-weight: 500; |
| transition: color 0.3s ease; |
| } |
| |
| .nav-menu a:hover { |
| color: #1ABC9C; |
| } |
| |
| |
| .demo-banner { |
| background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%); |
| color: white; |
| padding: 15px 0; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| margin-top: 70px; |
| } |
| |
| .demo-banner::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
| animation: shimmer 3s infinite; |
| } |
| |
| @keyframes shimmer { |
| 0% { left: -100%; } |
| 100% { left: 100%; } |
| } |
| |
| .demo-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| } |
| |
| .demo-title { |
| font-size: 1.3rem; |
| font-weight: bold; |
| margin-bottom: 15px; |
| } |
| |
| .demo-links { |
| display: flex; |
| justify-content: center; |
| gap: 2rem; |
| flex-wrap: wrap; |
| } |
| |
| .demo-link { |
| background: rgba(255,255,255,0.2); |
| color: white; |
| padding: 12px 25px; |
| border-radius: 25px; |
| text-decoration: none; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| border: 2px solid rgba(255,255,255,0.3); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .demo-link:hover { |
| background: rgba(255,255,255,0.3); |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
| } |
| |
| .demo-icon { |
| font-size: 1.2rem; |
| } |
| |
| |
| .hero { |
| height: 100vh; |
| background: linear-gradient(135deg, #17202A 0%, #34495E 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| color: white; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero-content { |
| max-width: 900px; |
| padding: 2rem; |
| z-index: 2; |
| } |
| |
| .hero-image { |
| width: 400px; |
| height: 250px; |
| background: url('image.png') center/cover no-repeat; |
| background-color: #2C3E50; |
| margin: 0 auto 2rem; |
| border-radius: 15px; |
| box-shadow: 0 15px 35px rgba(0,0,0,0.3); |
| position: relative; |
| opacity: 0; |
| animation: fadeInUp 1s ease 0.3s forwards; |
| } |
| |
| .hero h1 { |
| font-size: 3.5rem; |
| margin-bottom: 1rem; |
| font-weight: 300; |
| opacity: 0; |
| animation: fadeInUp 1s ease 0.5s forwards; |
| } |
| |
| .hero-subtitle { |
| font-size: 1.5rem; |
| margin-bottom: 2rem; |
| color: #1ABC9C; |
| opacity: 0; |
| animation: fadeInUp 1s ease 0.7s forwards; |
| } |
| |
| .hero-tagline { |
| font-size: 1.2rem; |
| margin-bottom: 3rem; |
| opacity: 0.9; |
| animation: fadeInUp 1s ease 0.9s forwards; |
| } |
| |
| .cta-buttons { |
| display: flex; |
| gap: 1rem; |
| justify-content: center; |
| flex-wrap: wrap; |
| opacity: 0; |
| animation: fadeInUp 1s ease 1.1s forwards; |
| } |
| |
| .btn { |
| padding: 1rem 2rem; |
| border: none; |
| border-radius: 5px; |
| font-size: 1.1rem; |
| font-weight: 600; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .btn-primary { |
| background: #1ABC9C; |
| color: #17202A; |
| } |
| |
| .btn-secondary { |
| background: transparent; |
| color: white; |
| border: 2px solid white; |
| } |
| |
| .btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
| } |
| |
| |
| .section { |
| padding: 5rem 2rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .section h2 { |
| font-size: 2.5rem; |
| text-align: center; |
| margin-bottom: 3rem; |
| color: #17202A; |
| } |
| |
| |
| .problem-solution { |
| background: #f8f9fa; |
| } |
| |
| .problem-solution-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 4rem; |
| } |
| |
| .problem-card, .solution-card { |
| background: white; |
| padding: 2rem; |
| border-radius: 15px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| } |
| |
| .problem-card { border-left: 5px solid #E74C3C; } |
| .solution-card { border-left: 5px solid #1ABC9C; } |
| |
| .card-icon { font-size: 3rem; margin-bottom: 1rem; } |
| .card-title { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; } |
| |
| .feature-list { list-style: none; margin-top: 1rem; } |
| .feature-list li { padding: 0.5rem 0; border-bottom: 1px solid #eee; } |
| .feature-list li:before { content: "✓ "; color: #1ABC9C; font-weight: bold; } |
| |
| |
| .core-modules { |
| background: linear-gradient(135deg, #5D6D7E 0%, #2C3E50 100%); |
| color: white; |
| } |
| |
| .modules-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 2rem; |
| margin-top: 3rem; |
| } |
| |
| .module-card { |
| background: rgba(255,255,255,0.1); |
| padding: 2rem; |
| border-radius: 15px; |
| text-align: center; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255,255,255,0.2); |
| } |
| .module-card h3 { margin-bottom: 1rem; font-size: 1.3rem; color: #1ABC9C; } |
| |
| |
| .managing-intelligence { |
| background: #f8f9fa; |
| } |
| |
| .intelligence-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); |
| gap: 2rem; |
| } |
| |
| .intelligence-card { |
| background: white; |
| padding: 2.5rem; |
| border-radius: 15px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| border-top: 5px solid #8E44AD; |
| } |
| |
| |
| .business-model { |
| padding: 5rem 0; |
| } |
| .revenue-projection { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 2rem; |
| margin-top: 3rem; |
| } |
| .projection-card { |
| background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%); |
| color: white; |
| padding: 2rem; |
| border-radius: 15px; |
| text-align: center; |
| } |
| .projection-year { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; } |
| .projection-revenue { font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem; } |
| .projection-details { font-size: 0.9rem; opacity: 0.9; } |
| |
| |
| .funding { |
| background: linear-gradient(135deg, #17202A 0%, #2C3E50 100%); |
| color: white; |
| } |
| .funding-timeline { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 1.5rem; |
| margin-top: 3rem; |
| } |
| .timeline-card { |
| background: rgba(255,255,255,0.1); |
| padding: 2rem; |
| border-radius: 15px; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255,255,255,0.2); |
| } |
| .timeline-phase { font-size: 1.1rem; font-weight: 600; color: #1ABC9C; margin-bottom: 1rem; } |
| |
| |
| .footer { |
| background: #17202A; |
| color: white; |
| padding: 2rem; |
| text-align: center; |
| } |
| |
| |
| .final-demo { |
| background: linear-gradient(135deg, #8E44AD 0%, #9B59B6 100%); |
| color: white; |
| padding: 4rem 2rem; |
| text-align: center; |
| } |
| |
| .final-demo h2 { |
| color: white; |
| margin-bottom: 2rem; |
| } |
| |
| .final-demo-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
| gap: 2rem; |
| max-width: 900px; |
| margin: 0 auto; |
| } |
| |
| .final-demo-card { |
| background: rgba(255,255,255,0.15); |
| padding: 2rem; |
| border-radius: 15px; |
| backdrop-filter: blur(10px); |
| border: 2px solid rgba(255,255,255,0.3); |
| transition: all 0.3s ease; |
| } |
| |
| .final-demo-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 30px rgba(0,0,0,0.3); |
| } |
| |
| .final-demo-link { |
| display: inline-block; |
| background: white; |
| color: #8E44AD; |
| padding: 15px 30px; |
| border-radius: 25px; |
| text-decoration: none; |
| font-weight: bold; |
| margin-top: 1rem; |
| transition: all 0.3s ease; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
| } |
| |
| .final-demo-link:hover { |
| background: #f8f9fa; |
| transform: scale(1.05); |
| } |
| |
| @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } |
| |
| @media (max-width: 768px) { |
| .hero h1 { font-size: 2.5rem; } |
| .hero-subtitle { font-size: 1.2rem; } |
| .hero-image { width: 300px; height: 200px; } |
| .problem-solution-grid, .funding-timeline { grid-template-columns: 1fr; gap: 2rem; } |
| .nav-menu { display: none; } |
| .demo-links { flex-direction: column; align-items: center; } |
| .demo-link { min-width: 250px; } |
| .final-demo-grid { grid-template-columns: 1fr; } |
| } |
| |
| .scroll-animate { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } |
| .scroll-animate.animate { opacity: 1; transform: translateY(0); } |
| </style> |
| </head> |
| <body> |
| |
| <nav class="navbar"> |
| <div class="nav-container"> |
| <div class="logo">🧠 Kortex AI</div> |
| <ul class="nav-menu"> |
| <li><a href="#overview">The Problem</a></li> |
| <li><a href="#solution">Our Solution</a></li> |
| <li><a href="#advantage">Our Edge</a></li> |
| <li><a href="#roadmap">Roadmap</a></li> |
| <li><a href="#funding">Investment</a></li> |
| <li><a href="#demo">Live Demo</a></li> |
| </ul> |
| </div> |
| </nav> |
|
|
| |
| <section class="demo-banner"> |
| <div class="demo-content"> |
| <div class="demo-title">🚀 Experience Kortex AI Live - Try Our Working Modules</div> |
| <div class="demo-links"> |
| <a href="https://aibyml-procurement-assistant.hf.space" target="_blank" class="demo-link"> |
| <span class="demo-icon">📋</span> |
| <span>Auto Quotation Engine</span> |
| </a> |
| <a href="https://heartily-lenient-honeybee.ngrok-free.app" target="_blank" class="demo-link"> |
| <span class="demo-icon">🤖</span> |
| <span>AI Sales Chatbot</span> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="hero"> |
| <div class="hero-content"> |
| <div class="hero-image"></div> |
| <h1>Don't Just Automate Sales.</h1> |
| <h1>Lead Them.</h1> |
| <div class="hero-subtitle">The B2B Sales Platform That Manages Intelligence</div> |
| <div class="hero-tagline"> |
| <p>An integrated AI workforce that handles quoting, approvals, and </p> |
| <p> fulfillment—with every decision logged and explained.</p> |
| </div> |
| <div class="cta-buttons"> |
| <a href="#advantage" class="btn btn-primary">Discover Our Edge</a> |
| <a href="#overview" class="btn btn-secondary">See The Problem</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="problem-solution" id="overview"> |
| <div class="section"> |
| <h2>The "Black Box" Sales Problem</h2> |
| <div class="problem-solution-grid"> |
| <div class="problem-card scroll-animate"> |
| <div class="card-icon">❌</div> |
| <div class="card-title">The Chaos of Modern B2B Sales</div> |
| <p>Sales teams face a fragmented landscape where automation creates more problems than it solves:</p> |
| <ul class="feature-list" style="list-style-type: '✗ '; padding-left: 1.5rem;"> |
| <li>AI chatbots give wrong answers, eroding client trust.</li> |
| <li>Unchecked discounts destroy profit margins.</li> |
| <li>Sales, Finance, and Logistics operate in silos.</li> |
| <li>Manual follow-ups lead to lost deals.</li> |
| <li>No visibility into AI decision-making.</li> |
| </ul> |
| <p style="margin-top: 1rem; font-weight: 600; color: #E74C3C;">Result: Profit leakage, stalled deals, and frustrated teams who don't trust their tools.</p> |
| </div> |
| |
| <div class="solution-card scroll-animate"> |
| <div class="card-icon">✅</div> |
| <div class="card-title">The Kortex Solution: Managed Intelligence</div> |
| <p>We replace chaos with an accountable, transparent AI-driven workflow:</p> |
| <ul class="feature-list"> |
| <li>Expert AI that provides accurate, useful advice.</li> |
| <li>An automated discount engine with traceable approvals.</li> |
| <li>A unified platform connecting all business units.</li> |
| <li>Proactive follow-ups and operational alerts.</li> |
| <li>A complete audit trail for every AI-assisted decision.</li> |
| </ul> |
| <p style="margin-top: 1rem; font-weight: 600; color: #1ABC9C;">Result: Increased deal velocity, protected margins, and a single source of truth.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="core-modules" id="solution"> |
| <div class="section"> |
| <h2 style="color: white;">A Unified AI Workforce</h2> |
| <p style="text-align: center; font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9;"> |
| Seven integrated modules that manage the entire sales lifecycle. |
| </p> |
| <div class="modules-grid"> |
| <div class="module-card scroll-animate"><h3>Proactive AI Chat</h3><p>Engages clients with expert product recommendations.</p></div> |
| <div class="module-card scroll-animate"><h3>Discount & Quote Manager</h3><p>Generates quotes with traceable approval workflows.</p></div> |
| <div class="module-card scroll-animate"><h3>Finance Connector</h3><p>Links to accounting systems for seamless invoicing.</p></div> |
| <div class="module-card scroll-animate"><h3>Logistics Integrator</h3><p>Manages delivery coordination and timelines.</p></div> |
| <div class="module-card scroll-animate"><h3>Customer Service Bridge</h3><p>Tracks and resolves all after-sales support issues.</p></div> |
| <div class="module-card scroll-animate"><h3>Analytics Dashboard</h3><p>Monitors sales funnels and process efficiency.</p></div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="managing-intelligence" id="advantage"> |
| <div class="section"> |
| <h2>Our Unfair Advantage: We Manage the Intelligence</h2> |
| <p style="text-align: center; font-size: 1.2rem; margin-bottom: 3rem; max-width: 800px; margin-left: auto; margin-right: auto;"> |
| While others offer "black box" AI, our platform is built on transparency, memory, and accountability. This is our core mission and your greatest asset. |
| </p> |
| <div class="intelligence-grid"> |
| <div class="intelligence-card scroll-animate"> |
| <div class="card-icon">🧠</div> |
| <h3 class="card-title">Persistent Memory System</h3> |
| <p>Kortex remembers every interaction with a client, across all touchpoints. This allows the AI to build rapport, understand context deeply, and make smarter, personalized recommendations over time, just like a human expert.</p> |
| </div> |
| <div class="intelligence-card scroll-animate"> |
| <div class="card-icon">🔍</div> |
| <h3 class="card-title">Traceable Agent Reasoning</h3> |
| <p>Every significant decision—from a product suggestion to a discount offer—is logged with a "reasoning trace." You can see *why* the AI made a choice, providing unprecedented transparency, debuggability, and trust for your sales team.</p> |
| </div> |
| <div class="intelligence-card scroll-animate"> |
| <div class="card-icon">🤝</div> |
| <h3 class="card-title">Multi-Agent Collaboration</h3> |
| <p>Our modules aren't siloed. The Sales AI "talks" to the Finance AI to confirm budget constraints before offering a discount. The Logistics AI informs the Service AI of a potential delay. This creates a cooperative digital workforce that solves problems proactively.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="business-model" id="business"> |
| <div class="section"> |
| <h2>Commercial Strategy</h2> |
| <p style="text-align: center; font-size: 1.2rem; margin-bottom: 2rem;"> |
| A SaaS model designed for scalability and value creation. |
| </p> |
| <div class="revenue-projection"> |
| <div class="projection-card scroll-animate"> |
| <div class="projection-year">Year 1</div> |
| <div class="projection-revenue">HK$150K</div> |
| <div class="projection-details">10 clients × HK$15K/year<br><small>Core Workflow Automation</small></div> |
| </div> |
| <div class="projection-card scroll-animate"> |
| <div class="projection-year">Year 2</div> |
| <div class="projection-revenue">HK$1.25M</div> |
| <div class="projection-details">50 clients × HK$25K/year<br><small>Full Integration Suite</small></div> |
| </div> |
| <div class="projection-card scroll-animate"> |
| <div class="projection-year">Year 3</div> |
| <div class="projection-revenue">HK$5.4M</div> |
| <div class="projection-details">150 clients × HK$36K/year<br><small>Managed Intelligence Premium</small></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="funding" id="roadmap"> |
| <div class="section"> |
| <h2 style="color: white;">HK$500K Investment & Roadmap</h2> |
| <p style="text-align: center; font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9;"> |
| Fueling the development of the first truly accountable AI sales platform. |
| </p> |
| <div class="funding-timeline"> |
| <div class="timeline-card scroll-animate"> |
| <div class="timeline-phase">Phase 1 (MVP) - 1 Month</div> |
| <h3>Core Workflow & Control</h3> |
| <p>Build the AI chat, quote engine, and the essential discount approval workflow. Launch with pilot customers.</p> |
| </div> |
| <div class="timeline-card scroll-animate"> |
| <div class="timeline-phase">Phase 2 (Integration) - 2 Months</div> |
| <h3>Seamless Connections</h3> |
| <p>Develop deep API integrations for major accounting, logistics, and CRM platforms. Roll out the first analytics dashboard.</p> |
| </div> |
| <div class="timeline-card scroll-animate"> |
| <div class="timeline-phase">Phase 3 (Intelligence) - 2 Months</div> |
| <h3>The Unfair Advantage</h3> |
| <p>Fully implement the persistent memory, reasoning trace logs, and multi-agent collaboration features.</p> |
| </div> |
| </div> |
| <div style="text-align: center; margin-top: 3rem; background: rgba(255,255,255,0.1); padding: 2rem; border-radius: 15px;"> |
| <h3 style="color: #1ABC9C; margin-bottom: 1rem;">💰 Use of Funds</h3> |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"> |
| <div><p><strong>Platform Development (40%):</strong> Core engineering for the AI engine and modules.</p></div> |
| <div><p><strong>Team Expansion (40%):</strong> Hire specialized AI and backend talent.</p></div> |
| <div><p><strong>Go-to-Market (20%):</strong> Initial sales, marketing, and pilot customer support.</p></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="final-demo" id="demo"> |
| <div class="section"> |
| <h2>Experience The Platform In Action</h2> |
| <p style="font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.9;"> |
| See how Kortex AI transforms B2B sales with intelligence, transparency, and accountability. |
| </p> |
| <div class="final-demo-grid"> |
| <div class="final-demo-card scroll-animate"> |
| <div class="card-icon">📋</div> |
| <h3 style="color: #1ABC9C; margin-bottom: 1rem;">Auto Quotation Engine</h3> |
| <p>Experience our AI-powered quotation system that automatically generates accurate quotes with approval workflows and margin protection.</p> |
| <a href="https://aibyml-procurement-assistant.hf.space" target="_blank" class="final-demo-link"> |
| Try Auto Quotation → |
| </a> |
| </div> |
| <div class="final-demo-card scroll-animate"> |
| <div class="card-icon">🤖</div> |
| <h3 style="color: #1ABC9C; margin-bottom: 1rem;">AI Sales Chatbot</h3> |
| <p>Interact with our intelligent sales assistant that understands your needs, recommends products, and guides you through the entire buying process.</p> |
| <a href="https://heartily-lenient-honeybee.ngrok-free.app" target="_blank" class="final-demo-link"> |
| Chat With AI → |
| </a> |
| </div> |
| </div> |
| <div style="margin-top: 3rem; padding: 2rem; background: rgba(255,255,255,0.1); border-radius: 15px;"> |
| <p style="font-size: 1.1rem; opacity: 0.9;"> |
| <strong>💡 Demo Note:</strong> These working prototypes showcase the core intelligence and workflow automation that powers the Kortex AI platform. Experience firsthand how AI can transform B2B sales with accountability and transparency. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="footer"> |
| <div class="section"> |
| <h2>Ready to Lead?</h2> |
| <p>© 2025 Kortex AI. We're not just building tools. We're managing intelligence.</p> |
| <p style="margin-top: 1rem;">Contact: <a href="mailto:invest@kortex-ai.com" style="color: #1ABC9C;">invest@kortex-ai.com</a></p> |
| </div> |
| </footer> |
|
|
| <script> |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| } |
| }); |
| }); |
| |
| const observer = new IntersectionObserver(function(entries) { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate'); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| document.querySelectorAll('.scroll-animate').forEach(el => observer.observe(el)); |
| </script> |
| </body> |
| </html> |
