Hero Layout with Animated Canvas Background

<section class="bg-[#050a06] text-white antialiased relative overflow-x-hidden flex flex-col min-h-screen selection:bg-emerald-500/30" style="font-family: 'Inter', sans-serif;">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400&amp;display=swap" rel="stylesheet">

<canvas id="bg-canvas" class="fixed inset-0 w-full h-full z-0 pointer-events-none"></canvas>

<div class="fixed inset-0 z-0 pointer-events-none opacity-40" style="background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: 20px 20px;"></div>

<div class="relative z-10 flex flex-col items-center min-h-screen w-full px-6 md:px-12 lg:px-24">
        
        <!-- Hero Section Bounding Box -->
        <main class="relative w-full max-w-6xl mt-32 mb-8">
            <!-- Corner Mini Squares -->
            <div class="absolute -top-1 -left-1 w-2 h-2 border border-emerald-500/50 bg-[#050a06] z-20"></div>
            <div class="absolute -top-1 -right-1 w-2 h-2 border border-emerald-500/50 bg-[#050a06] z-20"></div>
            <div class="absolute -bottom-1 -left-1 w-2 h-2 border border-emerald-500/50 bg-[#050a06] z-20"></div>
            <div class="absolute -bottom-1 -right-1 w-2 h-2 border border-emerald-500/50 bg-[#050a06] z-20"></div>

            <!-- Inner Shaded Content -->
            <div class="w-full border border-emerald-900/30 flex flex-col justify-center p-8 md:p-16 lg:p-24 relative" style="background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.00) 100%);">
                <div class="max-w-2xl lg:ml-8 relative z-10">
                    <div class="w-10 h-10 bg-emerald-500/10 rounded-md flex items-center justify-center mb-8 border border-emerald-400/20 backdrop-blur-sm">
                         <iconify-icon icon="solar:leaf-linear" class="text-emerald-400 text-xl"></iconify-icon>
                    </div>
                    <h1 class="text-4xl md:text-5xl lg:text-6xl leading-tight font-light tracking-tight text-white mb-6">
                        Refine your messaging. We handle the delivery.
                    </h1>
                    <p class="text-base md:text-lg text-emerald-50/60 max-w-lg font-thin leading-relaxed mb-10">
                        Utilize NexusFlow to broadcast crisp, impactful notifications to your audience — reliably and securely across all channels.
                    </p>
                    <button class="group bg-white text-black px-5 py-2.5 rounded text-sm font-light flex items-center gap-2 hover:bg-emerald-50 transition-all duration-300 ease-out">
                        Begin Free Trial
                        <iconify-icon icon="solar:arrow-right-up-linear" class="text-lg text-gray-500 group-hover:text-black transition-colors"></iconify-icon>
                    </button>
                </div>
            </div>
        </main>

        <!-- Half-tone Pixel Line Divider -->
        <div class="w-full flex justify-center py-8 relative z-10 pointer-events-none">
            <div class="w-full max-w-5xl h-px opacity-60" style="background-image: repeating-linear-gradient(to right, #10b981, #10b981 2px, transparent 2px, transparent 6px);
                        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
                        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);">
            </div>
        </div>

        <!-- Footer Card Bounding Box -->
        <div class="relative w-full max-w-6xl mb-12 shadow-2xl shadow-black/60">
            <!-- Corner Mini Squares -->
            <div class="absolute -top-1 -left-1 w-2 h-2 border border-gray-300 bg-white z-20"></div>
            <div class="absolute -top-1 -right-1 w-2 h-2 border border-gray-300 bg-white z-20"></div>
            <div class="absolute -bottom-1 -left-1 w-2 h-2 border border-gray-300 bg-white z-20"></div>
            <div class="absolute -bottom-1 -right-1 w-2 h-2 border border-gray-300 bg-white z-20"></div>

            <!-- Inner Card Content -->
            <div class="w-full bg-white text-black border border-gray-200 p-8 md:p-16 flex flex-col lg:flex-row justify-between gap-16 relative overflow-hidden">
                
                <!-- Card Background Graphic & Halftone -->
                <div class="absolute inset-0 opacity-5 pointer-events-none" style="background-image: radial-gradient(rgba(0, 0, 0, 0.8) 1px, transparent 1px); background-size: 20px 20px;"></div>
                <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-100 rounded-full blur-3xl opacity-30 pointer-events-none -translate-y-1/2 translate-x-1/3"></div>

                <!-- Card Left -->
                <div class="max-w-sm flex flex-col justify-between relative z-10">
                    <div>
                        <div class="flex items-center gap-2 mb-10 text-emerald-900">
                            <iconify-icon icon="solar:globe-linear" class="text-2xl"></iconify-icon>
                            <span class="font-light text-sm">NexusFlow</span>
                        </div>
                        <h2 class="text-3xl md:text-4xl font-light tracking-tight mb-8 leading-tight">
                            Craft the ideal broadcast seamlessly.
                        </h2>
                    </div>
                    <button class="group bg-black text-white px-5 py-2.5 rounded text-sm font-light flex items-center gap-2 w-max hover:bg-gray-800 transition-all duration-300">
                        Explore Features
                        <iconify-icon icon="solar:arrow-right-up-linear" class="text-lg text-gray-400 group-hover:text-white transition-colors"></iconify-icon>
                    </button>
                </div>

                <!-- Card Right (Links) -->
                <div class="grid grid-cols-2 md:grid-cols-3 gap-12 lg:gap-24 lg:mr-8 relative z-10">
                    
                    <!-- Column 1 -->
                    <div>
                        <h3 class="text-sm font-light mb-6">Platform</h3>
                        <ul class="space-y-4 text-sm text-gray-500 font-thin">
                            <li>
                                <a href="#" class="hover:text-black transition-colors flex items-center group">
                                    <span class="inline-block w-[2px] h-3 bg-emerald-500 mr-2 rounded-full opacity-100"></span>
                                    Dashboard
                                </a>
                            </li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>Capabilities</a></li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>Connections</a></li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>Extensions</a></li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>Plans</a></li>
                        </ul>
                    </div>

                    <!-- Column 2 -->
                    <div>
                        <h3 class="text-sm font-light mb-6">Company</h3>
                        <ul class="space-y-4 text-sm text-gray-500 font-thin">
                            <li>
                                <a href="#" class="hover:text-black transition-colors flex items-center">
                                    <span class="inline-block w-[2px] h-3 bg-emerald-500 mr-2 rounded-full opacity-100"></span>
                                    Our Story
                                </a>
                            </li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>Open Roles</a></li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>Support</a></li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>Terms</a></li>
                        </ul>
                    </div>

                    <!-- Column 3 -->
                    <div class="col-span-2 md:col-span-1">
                        <h3 class="text-sm font-light mb-6">Socials</h3>
                        <ul class="space-y-4 text-sm text-gray-500 font-thin">
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>X (Twitter)</a></li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>LinkedIn</a></li>
                            <li><a href="#" class="hover:text-black transition-colors flex items-center"><span class="inline-block w-[2px] h-3 bg-transparent mr-2"></span>GitHub</a></li>
                            <li>
                                <a href="#" class="hover:text-black transition-colors flex items-center">
                                    <span class="inline-block w-[2px] h-3 bg-emerald-500 mr-2 rounded-full opacity-100"></span>
                                    Community
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!-- Bottom Bar -->
        <footer class="w-full max-w-6xl flex flex-col md:flex-row justify-between items-center pb-8 text-xs text-emerald-200/40 font-thin tracking-wide">
            <p>© 2024 NexusFlow. All rights reserved.</p>
            <p class="mt-4 md:mt-0">Created by Nexus Systems</p>
            <p class="mt-4 md:mt-0">Driven by Excellence</p>
        </footer>

    </div>

<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('bg-canvas');
        const ctx = canvas.getContext('2d');
        let width, height;
        let time = 0;

        const particles = Array.from({ length: 60 }, () => ({
            x: Math.random(), y: Math.random(),
            size: Math.random() * 1.5 + 0.5,
            vx: (Math.random() - 0.5) * 0.2,
            vy: (Math.random() - 0.5) * 0.2
        }));

        const beams = Array.from({ length: 8 }, () => ({
            x: Math.random() * window.innerWidth,
            y: Math.random() * window.innerHeight,
            len: Math.random() * 150 + 50,
            speed: Math.random() * 3 + 1.5
        }));

        function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width;
            canvas.height = height;
        }

        window.addEventListener('resize', resize);
        resize();

        function draw() {
            ctx.clearRect(0, 0, width, height);

            const bgGradient = ctx.createLinearGradient(0, 0, width, height);
            bgGradient.addColorStop(0, '#0a170e'); 
            bgGradient.addColorStop(0.5, '#050a06'); 
            bgGradient.addColorStop(1, '#020503');
            ctx.fillStyle = bgGradient;
            ctx.fillRect(0, 0, width, height);

            time += 0.008;

            ctx.lineWidth = 1;
            for (let i = 0; i < 15; i++) {
                ctx.beginPath();
                for (let x = 0; x <= width; x += 40) {
                    const yOffset = Math.sin(x * 0.003 + time + i * 0.15) * 80;
                    const y = height * 0.4 + yOffset + (i * 25);
                    if (x === 0) ctx.moveTo(x, y);
                    else ctx.lineTo(x, y);
                }
                const opacity = Math.max(0, 0.08 - (i * 0.004));
                ctx.strokeStyle = `rgba(16, 185, 129, ${opacity})`;
                ctx.stroke();
            }

            ctx.fillStyle = 'rgba(52, 211, 153, 0.4)';
            particles.forEach(p => {
                p.x += p.vx / width * 10;
                p.y += p.vy / height * 10;
                
                if (p.x < 0) p.x = 1; if (p.x > 1) p.x = 0;
                if (p.y < 0) p.y = 1; if (p.y > 1) p.y = 0;

                ctx.beginPath();
                ctx.arc(p.x * width, p.y * height, p.size, 0, Math.PI * 2);
                ctx.fill();
            });

            beams.forEach(b => {
                b.x += b.speed;
                if (b.x - b.len > width) {
                    b.x = -b.len;
                    b.y = Math.random() * height;
                    b.speed = Math.random() * 3 + 1.5;
                }

                const grad = ctx.createLinearGradient(b.x - b.len, b.y, b.x, b.y);
                grad.addColorStop(0, 'rgba(16, 185, 129, 0)');
                grad.addColorStop(0.8, 'rgba(52, 211, 153, 0.6)');
                grad.addColorStop(1, 'rgba(255, 255, 255, 0.8)');

                ctx.beginPath();
                ctx.moveTo(b.x - b.len, b.y);
                ctx.lineTo(b.x, b.y);
                ctx.strokeStyle = grad;
                ctx.lineWidth = 1.5;
                ctx.stroke();
            });

            requestAnimationFrame(draw);
        }

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