Footer

import Link from 'next/link'
import UkFooterCol from '@/components/uikit/UkFooterCol'
import UkEmailNote from '@/app/demos/_shared/UkEmailNote'

<footer className="uk-section uk-section-small my-footer">
  <div className="uk-container">
    <div className="grid grid-cols-1 *:min-w-0 gap-(--uk-grid-gutter) max-uk-s:gap-[var(--uk-grid-gutter-mobile,20px)] uk-m:grid-cols-3 uk-footer-grid">
      <UkFooterCol title="ניווט" className="uk-footer-links">
        <ul>{nav.map((l) => <li key={l.href}><Link href={l.href}>{l.label}</Link></li>)}</ul>
      </UkFooterCol>
      <UkFooterCol title="טיפולים" className="uk-footer-links">
        <ul>{treatments.map((t) => <li key={t.slug}><Link href={treatmentPath(root, t.slug)}>{t.title}</Link></li>)}</ul>
      </UkFooterCol>
      <div className="my-footer__contact">
        <p className="uk-footer-eyebrow">צור קשר</p>
        <ul><li>{s.address}</li><li><UkEmailNote /></li></ul>
      </div>
    </div>
    <div className="uk-spacer-v-48" />
    <p className="uk-footer-fineprint">© {year} {s.siteName}. אתר הדגמה.</p>
  </div>
</footer>

/* my-brand.css: UkFooterCol inside a uk-footer-grid (agency.css does the same) */
@media (max-width: 767px) {
  .my-footer .grid.uk-footer-grid { row-gap: 0; }
  .my-footer .uk-footer-grid > .uk-fcol { grid-column: 1 / -1; }
  .my-footer__contact { margin-top: 2.5rem; }
}

/* a plain column instead (no accordion), the shape of the other 20 demo footers */
<div className="uk-footer-links">
  <p className="uk-footer-eyebrow">ניווט</p>
  <ul>…</ul>
</div>