Engineers Belong Hero Section

<section class="bg-[#151b23] text-white font-sans antialiased min-h-screen flex items-center justify-center p-4 md:p-12 relative overflow-hidden selection:bg-purple-500/30">
<div class="absolute inset-0 pointer-events-none flex justify-center z-0">
        <div class="w-full max-w-7xl grid grid-cols-1 md:grid-cols-4 h-full border-x border-slate-800/50">
            <div class="hidden md:block border-r border-slate-800/50"></div>
            <div class="hidden md:block border-r border-slate-800/50"></div>
            <div class="hidden md:block border-r border-slate-800/50"></div>
            <div></div>
        </div>
    </div>

<main class="w-full max-w-6xl relative z-10 flex flex-col gap-12">
        
        <!-- Header Section -->
        <header class="grid grid-cols-1 md:grid-cols-2 gap-8 items-end px-4 md:px-0">
            <div>
                <p class="text-sm text-purple-400 mb-3 font-normal tracking-wide uppercase">For Development Teams</p>
                <h1 class="text-4xl md:text-5xl font-normal tracking-tight text-white leading-tight">
                    Engineers belong in the codebase,<br>not the inbox.
                </h1>
            </div>
            <div class="md:pb-2">
                <p class="text-base text-slate-400 max-w-md leading-relaxed font-light">
                    Automate API troubleshooting and integration queries. Route only the most complex technical escalations to your core team.
                </p>
            </div>
        </header>

        <!-- Main Visual Card with Masked Border Gradient -->
        <div class="relative rounded-2xl bg-[#1e2631] flex flex-col h-[600px] shadow-2xl group overflow-hidden">
            
            <!-- CSS Masked Border Gradient -->
            <div class="absolute inset-0 rounded-2xl pointer-events-none z-50" style="padding: 1px; background: linear-gradient(180deg, rgba(168,85,247,0.4) 0%, rgba(30,41,59,0) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;"></div>

            <!-- Canvas Animation Container -->
            <div class="absolute top-0 left-0 w-full h-96 pointer-events-none overflow-hidden z-0">
                <canvas id="particle-canvas" class="w-full h-full opacity-60 mix-blend-screen"></canvas>
            </div>

            <!-- Dark Mode Calendar UI with Glow Beam Dots -->
            <div class="relative z-10 mx-auto mt-16 w-[92%] max-w-4xl bg-[#0b1120] rounded-t-xl shadow-2xl flex flex-col flex-grow overflow-hidden transform transition-transform duration-700 ease-out group-hover:-translate-y-2 border-t border-x border-slate-800/80">
                
                <!-- Glow Beam Top Edge -->
                <div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-purple-500 to-transparent opacity-100 shadow-[0_0_15px_2px_rgba(168,85,247,0.7)] z-30"></div>
                
                <!-- Background Dots Pattern -->
                <div class="absolute inset-0 pointer-events-none opacity-20 z-0" style="background-image: radial-gradient(circle, #64748b 1px, transparent 1px); background-size: 24px 24px;"></div>

                <!-- Window Controls -->
                <div class="flex gap-1.5 p-4 border-b border-slate-800/80 items-center relative z-10 bg-[#0b1120]/80 backdrop-blur-sm">
                    <div class="w-2.5 h-2.5 rounded-full bg-slate-700"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-slate-700"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-slate-700"></div>
                </div>

                <!-- Calendar Header -->
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-6 gap-4 relative z-10 bg-[#0b1120]/80 backdrop-blur-sm">
                    <h2 class="text-2xl font-normal text-white tracking-tight">October</h2>
                    <div class="flex flex-wrap gap-5 items-center text-sm text-slate-400 font-light">
                        <span class="flex items-center gap-2"><iconify-icon icon="solar:check-circle-linear" class="text-purple-400 text-base"></iconify-icon> 52 Issues Cleared</span>
                        <span class="flex items-center gap-2"><iconify-icon icon="solar:star-linear" class="text-purple-400 text-base"></iconify-icon> 99% Satisfaction</span>
                        <span class="flex items-center gap-2"><iconify-icon icon="solar:clock-circle-linear" class="text-purple-400 text-base"></iconify-icon> Reply Time: 1m</span>
                    </div>
                </div>

                <!-- Calendar Grid -->
                <div class="grid grid-cols-4 border-t border-slate-800/80 flex-grow relative z-10 bg-[#0b1120]/60 backdrop-blur-md">
                    
                    <!-- Glow Dots at Intersections -->
                    <div class="absolute top-[45px] left-[25%] w-1 h-1 bg-purple-400 rounded-full shadow-[0_0_12px_2px_rgba(168,85,247,0.9)] z-30 -translate-x-1/2 -translate-y-1/2"></div>
                    <div class="absolute top-[185px] left-[50%] w-1 h-1 bg-blue-400 rounded-full shadow-[0_0_12px_2px_rgba(96,165,250,0.9)] z-30 -translate-x-1/2 -translate-y-1/2"></div>
                    <div class="absolute top-[185px] left-[75%] w-1 h-1 bg-purple-400 rounded-full shadow-[0_0_12px_2px_rgba(168,85,247,0.9)] z-30 -translate-x-1/2 -translate-y-1/2"></div>

                    <!-- Fade Overlay -->
                    <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#0b1120] to-transparent z-20 pointer-events-none"></div>

                    <!-- Days -->
                    <div class="text-center py-3 text-xs text-slate-500 border-b border-r border-slate-800/80 font-normal uppercase tracking-wider">Mon</div>
                    <div class="text-center py-3 text-xs text-slate-500 border-b border-r border-slate-800/80 font-normal uppercase tracking-wider">Tue</div>
                    <div class="text-center py-3 text-xs text-slate-500 border-b border-r border-slate-800/80 font-normal uppercase tracking-wider">Wed</div>
                    <div class="text-center py-3 text-xs text-slate-500 border-b border-slate-800/80 font-normal uppercase tracking-wider">Thu</div>

                    <!-- Row 1 -->
                    <div class="border-r border-b border-slate-800/80 p-3 min-h-[140px] relative group/cell">
                        <div class="text-sm text-slate-500 mb-2 font-light">12</div>
                        <div class="border border-purple-500/20 bg-purple-500/10 rounded-lg p-2.5 hover:bg-purple-500/20 transition-colors relative overflow-hidden">
                            <div class="absolute left-0 top-0 w-[2px] h-full bg-purple-400 shadow-[0_0_8px_rgba(168,85,247,0.8)]"></div>
                            <div class="flex justify-between items-center text-xs text-purple-400 mb-1.5 font-normal">
                                <span>Resolved</span>
                                <span>2 PM</span>
                            </div>
                            <div class="text-sm font-normal text-slate-200 leading-tight mb-0.5">OAuth Handshake Failure</div>
                            <div class="text-xs text-slate-500 truncate font-light">Acme Corp, Lead Eng</div>
                        </div>
                    </div>
                    <div class="border-r border-b border-slate-800/80 p-3 min-h-[140px]">
                        <div class="text-sm text-slate-500 mb-2 font-light">13</div>
                        <div class="border border-purple-500/20 bg-purple-500/10 rounded-lg p-2.5 hover:bg-purple-500/20 transition-colors relative overflow-hidden">
                            <div class="absolute left-0 top-0 w-[2px] h-full bg-purple-400 shadow-[0_0_8px_rgba(168,85,247,0.8)]"></div>
                            <div class="flex justify-between items-center text-xs text-purple-400 mb-1.5 font-normal">
                                <span>Resolved</span>
                                <span>4 PM</span>
                            </div>
                            <div class="text-sm font-normal text-slate-200 leading-tight mb-0.5">Payload Validation Error</div>
                            <div class="text-xs text-slate-500 truncate font-light">Globex, DevOps</div>
                        </div>
                    </div>
                    <div class="border-r border-b border-slate-800/80 p-3 min-h-[140px]">
                        <div class="text-sm text-slate-500 mb-2 font-light">14</div>
                        <div class="border border-blue-500/20 bg-blue-500/10 rounded-lg p-2.5 hover:bg-blue-500/20 transition-colors relative overflow-hidden">
                            <div class="absolute left-0 top-0 w-[2px] h-full bg-blue-400 shadow-[0_0_8px_rgba(96,165,250,0.8)]"></div>
                            <div class="flex justify-between items-center text-xs text-blue-400 mb-1.5 font-normal">
                                <span>Investigating</span>
                                <span>11 AM</span>
                            </div>
                            <div class="text-sm font-normal text-slate-200 leading-tight mb-0.5">JWT Signature Invalid</div>
                            <div class="text-xs text-slate-500 truncate font-light">Initech, Backend</div>
                        </div>
                    </div>
                    <div class="border-b border-slate-800/80 p-3 min-h-[140px]">
                        <div class="text-sm text-slate-500 mb-2 font-light">15</div>
                        <div class="border border-purple-500/20 bg-purple-500/10 rounded-lg p-2.5 hover:bg-purple-500/20 transition-colors relative overflow-hidden">
                            <div class="absolute left-0 top-0 w-[2px] h-full bg-purple-400 shadow-[0_0_8px_rgba(168,85,247,0.8)]"></div>
                            <div class="flex justify-between items-center text-xs text-purple-400 mb-1.5 font-normal">
                                <span>Resolved</span>
                                <span>1 PM</span>
                            </div>
                            <div class="text-sm font-normal text-slate-200 leading-tight mb-0.5">Concurrency Cap Reached</div>
                            <div class="text-xs text-slate-500 truncate font-light">Soylent, CTO</div>
                        </div>
                    </div>

                    <!-- Row 2 -->
                    <div class="border-r border-slate-800/80 p-3">
                        <div class="text-sm text-slate-500 mb-2 font-light">19</div>
                        <div class="border border-purple-500/20 bg-purple-500/10 rounded-lg p-2.5 opacity-50 relative overflow-hidden">
                            <div class="absolute left-0 top-0 w-[2px] h-full bg-purple-400"></div>
                            <div class="flex justify-between items-center text-xs text-purple-400 mb-1.5 font-normal">
                                <span>Resolved</span>
                                <span>9 AM</span>
                            </div>
                        </div>
                    </div>
                    <div class="border-r border-slate-800/80 p-3">
                        <div class="text-sm text-slate-500 mb-2 font-light">20</div>
                    </div>
                    <div class="border-r border-slate-800/80 p-3">
                        <div class="text-sm text-slate-500 mb-2 font-light">21</div>
                    </div>
                    <div class="border-slate-800/80 p-3">
                        <div class="text-sm text-slate-500 mb-2 font-light">22</div>
                    </div>
                </div>
            </div>

            <!-- Bottom Features -->
            <div class="grid grid-cols-1 md:grid-cols-3 border-t border-slate-700/50 bg-[#1a212b] z-20 mt-auto relative">
                <div class="p-6 md:p-8 border-b md:border-b-0 md:border-r border-slate-700/50 bg-slate-800/30 transition-colors hover:bg-slate-800/50 cursor-default">
                    <iconify-icon icon="solar:routing-linear" class="text-2xl text-purple-400 mb-3"></iconify-icon>
                    <h3 class="text-lg font-normal text-white mb-2 tracking-tight">Classify</h3>
                    <p class="text-sm text-slate-400 leading-relaxed font-light">Automatically categorize and route complex issues to the right engineering pod instantly.</p>
                </div>
                <div class="p-6 md:p-8 border-b md:border-b-0 md:border-r border-slate-700/50 transition-colors hover:bg-slate-800/30 cursor-default">
                    <iconify-icon icon="solar:magic-stick-3-linear" class="text-2xl text-purple-400 mb-3"></iconify-icon>
                    <h3 class="text-lg font-normal text-white mb-2 tracking-tight">Automate</h3>
                    <p class="text-sm text-slate-400 leading-relaxed font-light">Provide instant, accurate answers to common API and integration queries from docs.</p>
                </div>
                <div class="p-6 md:p-8 transition-colors hover:bg-slate-800/30 cursor-default">
                    <iconify-icon icon="solar:chart-square-linear" class="text-2xl text-purple-400 mb-3"></iconify-icon>
                    <h3 class="text-lg font-normal text-white mb-2 tracking-tight">Analyze</h3>
                    <p class="text-sm text-slate-400 leading-relaxed font-light">Identify gaps in documentation based on the most frequent questions asked by users.</p>
                </div>
            </div>

        </div>
    </main>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
        const canvas = document.getElementById('particle-canvas');
        const ctx = canvas.getContext('2d');
        let width, height;
        let particles = [];

        function resize() {
            width = canvas.parentElement.clientWidth;
            height = canvas.parentElement.clientHeight;
            canvas.width = width;
            canvas.height = height;
        }

        class Particle {
            constructor() {
                this.x = width / 2 + (Math.random() - 0.5) * 100;
                this.y = height * 0.2 + (Math.random() - 0.5) * 50;
                const angle = Math.random() * Math.PI * 2;
                const speed = Math.random() * 2 + 0.5;
                this.vx = Math.cos(angle) * speed;
                this.vy = Math.sin(angle) * speed + 1;
                this.life = 1;
                this.decay = Math.random() * 0.01 + 0.005;
                this.size = Math.random() * 1.5 + 0.5;
            }
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.life -= this.decay;
                if(this.life <= 0) {
                    Object.assign(this, new Particle());
                }
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(168, 85, 247, ${this.life * 0.6})`;
                ctx.fill();
            }
        }

        function init() {
            resize();
            window.addEventListener('resize', resize);
            for(let i = 0; i < 120; i++) {
                particles.push(new Particle());
                particles[i].life = Math.random();
            }
            animate();
        }

        function animate() {
            ctx.clearRect(0, 0, width, height);
            
            for(let i = 0; i < particles.length; i++) {
                for(let j = i + 1; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    
                    if(dist < 45) {
                        ctx.beginPath();
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        const alpha = (1 - dist/45) * Math.min(particles[i].life, particles[j].life) * 0.25;
                        ctx.strokeStyle = `rgba(192, 132, 252, ${alpha})`;
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                }
            }

            particles.forEach(p => {
                p.update();
                p.draw();
            });
            requestAnimationFrame(animate);
        }

        init();
    </script>
</section>