Mega Menu Layout

'use client';

import './MegaMenuGlass.css';

/** MegaMenuGlass — ported from astro-component-kit. */
export interface MegaMenuGlassProps {
}

export function MegaMenuGlass({}: MegaMenuGlassProps) {
  return (
    <>
      <div className="mega-wrap" data-rk-71025a="">
        <div className="mega-grid" data-rk-71025a="">
          <div className="mega-col" data-rk-71025a="">
            <h5 data-rk-71025a="">Products</h5>
            <a href="#" data-rk-71025a="">Analytics</a>
            <a href="#" data-rk-71025a="">CRM</a>
            <a href="#" data-rk-71025a="">Support</a>
          </div>
          <div className="mega-col" data-rk-71025a="">
            <h5 data-rk-71025a="">Resources</h5>
            <a href="#" data-rk-71025a="">Documentation</a>
            <a href="#" data-rk-71025a="">Tutorials</a>
            <a href="#" data-rk-71025a="">Guides</a>
          </div>
        </div>
      </div>
    </>
  );
}

export default MegaMenuGlass;

/* MegaMenuGlass — ported from astro-component-kit (navigation/MegaMenuGlass.astro) */

.mega-wrap:where([data-rk-71025a]) { background: rgba(10, 10, 20, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 2rem; width: 600px; }
.mega-grid:where([data-rk-71025a]) { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
h5:where([data-rk-71025a]) { color: #818cf8; font-size: 0.8rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mega-col:where([data-rk-71025a]) a:where([data-rk-71025a]) { display: block; padding: 0.5rem 0; color: #e2e8f0; text-decoration: none; font-size: 0.9rem; }
.mega-col:where([data-rk-71025a]) a:hover:where([data-rk-71025a]) { color: #fff; }