Responsive Feature Section with Icon Cards

<section id="features" class="bg-gray-950 py-16 w-full">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-end justify-between gap-6">
                <div>
                    <p class="text-sm uppercase tracking-wider text-purple-300/90">Features</p>
                    <h2 class="mt-2 text-3xl lg:text-4xl tracking-tight text-white" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 600">
                        Everything you need for seamless communication
                    </h2>
                </div>
                <a href="#product" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm bg-white/5 text-gray-100 hover:bg-white/10 border border-white/10 transition-all hover:scale-[1.02]">
                    Explore features
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </a>
            </div>

            <div class="mt-8 grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-300">
                            <path d="M8 12h.01" class=""></path>
                            <path d="M12 12h.01" class=""></path>
                            <path d="M16 12h.01" class=""></path>
                            <path d="M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" class=""></path>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-lg tracking-tight">Smart messaging</h3>
                    <p class="mt-2 text-sm text-gray-400">
                        Real-time messaging with threads, reactions, and rich formatting.
                    </p>
                </div>

                <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-300">
                            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" class=""></path>
                            <path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-lg tracking-tight">Voice &amp; video</h3>
                    <p class="mt-2 text-sm text-gray-400">
                        Crystal-clear calls with screen sharing and recording.
                    </p>
                </div>

                <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-300">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
                            <path d="m14 2 6 6" class=""></path>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-lg tracking-tight">File sharing</h3>
                    <p class="mt-2 text-sm text-gray-400">
                        Share any file type with drag-and-drop simplicity.
                    </p>
                </div>

                <div class="group rounded-xl border border-white/10 bg-black/40 p-5 hover:bg-black/50 transition-colors">
                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-300">
                            <path d="M12 22v-5" class=""></path>
                            <path d="M9 8V2" class=""></path>
                            <path d="M15 8V2" class=""></path>
                            <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" class=""></path>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-lg tracking-tight">Integrations</h3>
                    <p class="mt-2 text-sm text-gray-400">
                        Connect tools you love: GitHub, Jira, Google Drive, and more.
                    </p>
                </div>
            </div>
        </div>
    </section>