<footer class="py-16">
  <div class="container">
    <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
      <a class="flex items-center gap-2" href="/">
        <div class="flex items-center justify-center size-6 rounded-sm overflow-hidden shrink-0 bg-primary text-primary-foreground text-sm font-bold">ui</div>
        <div class="text-sm font-medium truncate">Starting Point</div>
      </a>
      <div class="flex items-center gap-4">
        <a href="#" class="btn btn-ghost btn-sm -mx-2 text-muted-foreground">Home</a>
        <a href="#" class="btn btn-ghost btn-sm -mx-2 text-muted-foreground">Services</a>
        <a href="#" class="btn btn-ghost btn-sm -mx-2 text-muted-foreground">Projects</a>
        <a href="#" class="btn btn-ghost btn-sm -mx-2 text-muted-foreground">News</a>
      </div>
    </div>
    <div class="separator my-6"></div>
    <div class="flex flex-col items-center justify-between gap-6 sm:flex-row-reverse">
      <a href="#" class="btn btn-ghost btn-sm -mx-2 text-muted-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail size-4" aria-hidden="true">
          <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
          <rect x="2" y="4" width="20" height="16" rx="2"></rect>
        </svg>
        hello@startingpoint.io
      </a>
      <p class="text-sm/6 text-muted-foreground">© 2025 Starting Point. All rights reserved.</p>
    </div>
  </div>
</footer>