Glass Footer

'use client';

import LogoWithGalaxy from '../LogoWithGalaxy';
import './SimpleFooterGlass.css';

/** SimpleFooterGlass — ported from astro-component-kit. */
export interface SimpleFooterGlassProps {
}

export function SimpleFooterGlass({}: SimpleFooterGlassProps) {
  return (
    <>
      <footer className="glass-foot" data-rk-d147a1="">
        <div className="foot-grid" data-rk-d147a1="">
          <div className="foot-brand" data-rk-d147a1="">
            <LogoWithGalaxy size="medium" />
            <p data-rk-d147a1="">Premium components for the next web.</p>
          </div>
          <div className="foot-links" data-rk-d147a1="">
            <div data-rk-d147a1=""><h5 data-rk-d147a1="">Project</h5><a href="#" data-rk-d147a1="">Github</a><a href="#" data-rk-d147a1="">License</a></div>
            <div data-rk-d147a1=""><h5 data-rk-d147a1="">Support</h5><a href="#" data-rk-d147a1="">Issues</a><a href="#" data-rk-d147a1="">Discord</a></div>
          </div>
        </div>
      </footer>
    </>
  );
}

export default SimpleFooterGlass;

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

.glass-foot:where([data-rk-d147a1]) { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 4rem 1.5rem; }
.foot-grid:where([data-rk-d147a1]) { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3rem; }
.foot-brand:where([data-rk-d147a1]) { font-weight: 800; color: #fff; }
.foot-brand:where([data-rk-d147a1]) p:where([data-rk-d147a1]) { font-size: 0.9rem; color: #64748b; font-weight: 400; margin-top: 0.5rem; max-width: 250px; }
.foot-links:where([data-rk-d147a1]) { display: flex; gap: 4rem; }
h5:where([data-rk-d147a1]) { color: #fff; font-size: 0.85rem; margin-bottom: 1.25rem; }
a:where([data-rk-d147a1]) { display: block; text-decoration: none; color: #64748b; margin-bottom: 0.6rem; font-size: 0.85rem; }
a:hover:where([data-rk-d147a1]) { color: #818cf8; }