jalil.arfaoui.net/src/components/photo/PhotoFooter.astro

---
import { t, getAboutPath, type Locale } from '../../utils/i18n';

interface Props {
  lang?: Locale;
}

const { lang = 'fr' } = Astro.props;
---

<footer class="photo-footer">
  <div class="photo-footer-inner">
    <div class="photo-footer-links">
      <a href={getAboutPath(lang)}>{t('photo', 'about', lang)}</a>
      <a href="mailto:jalil@arfaoui.net">{t('photo', 'contact', lang)}</a>
      <a href="https://instagram.com/l.i.l.a.j" target="_blank" rel="noopener noreferrer">Instagram</a>
    </div>
    <div class="photo-footer-copy">
      &copy; Jalil Arfaoui <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener noreferrer">Creative Commons CC-BY-NC 4.0</a>
    </div>
  </div>
</footer>

<style>
.photo-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  transition: transform 0.3s;
}

.photo-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 54px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.photo-footer-links {
  display: flex;
  gap: 15px;
}

.photo-footer-links a,
.photo-footer-copy,
.photo-footer-copy a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.photo-footer-links a:hover,
.photo-footer-copy a:hover {
  color: white;
}

@media (max-width: 640px) {
  .photo-footer-inner {
    flex-direction: column;
    height: auto;
    padding: 10px 20px;
    gap: 4px;
    font-size: 13px;
  }
}
</style>