Animated Agency Footer with CTA and Links

<footer class="bg-black border-white/5 border-t pt-20 pb-20" id="footer">
      <div class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl mr-auto ml-auto pr-6 pl-6">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-y-12 gap-x-8 mb-16 w-full">
          <!-- Branding Header -->
          <div class="col-span-1 md:col-span-12 flex gap-3 md:gap-5 [animation:fadeSlideIn_1s_ease-out_0.2s_both] animate-on-scroll pb-4 gap-x-3 gap-y-3 items-baseline">
            <h1 class="text-7xl md:text-9xl lg:text-[11rem] leading-[0.8] tracking-tighter font-medium text-white font-sans select-none">
              kreona
            </h1>
            <span class="text-xl md:text-3xl font-normal text-zinc-400 tracking-tight font-sans relative -top-1 md:-top-3">
              studio
            </span>
          </div>

          <!-- Divider -->
          <div class="col-span-1 md:col-span-12 w-full h-px bg-white/10 [animation:fadeSlideIn_1s_ease-out_0.3s_both] animate-on-scroll"></div>

          <!-- Content Area -->
          <div class="col-span-1 md:col-span-12 grid grid-cols-1 lg:grid-cols-12 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll mt-2 gap-x-12 gap-y-12">
            <!-- CTA Section -->
            <div class="col-span-1 lg:col-span-5 flex flex-col items-start justify-between gap-10">
              <p class="text-lg text-zinc-400 font-light font-sans leading-relaxed max-w-md">
                Let’s build something great together — whether you have a
                project in mind or just want to connect, we’d love to hear from
                you.
              </p>

              <div class="flex items-center gap-4">
                <button class="bg-zinc-300 hover:bg-white text-zinc-950 px-8 py-4 rounded-lg text-sm font-medium transition-colors font-sans duration-300">
                  Book a 15-min call
                </button>
                <button class="w-14 h-14 rounded-full bg-zinc-300 hover:bg-white text-zinc-950 flex items-center justify-center transition-colors duration-300 group">
                  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right group-hover:-translate-y-0.5 group-hover:translate-x-0.5 transition-transform">
                    <path d="M7 7h10v10" class=""></path>
                    <path d="M7 17 17 7" class=""></path>
                  </svg>
                </button>
              </div>
            </div>

            <!-- Links Grid -->
            <div class="col-span-1 lg:col-span-7 grid grid-cols-2 sm:grid-cols-4 gap-10 lg:pl-10 w-full">
              <!-- Column 1 -->
              <div class="flex flex-col gap-6">
                <span class="text-[10px] uppercase tracking-[0.2em] text-zinc-500 font-medium font-sans">
                  Sitemap
                </span>
                <ul class="flex flex-col gap-4">
                  <li class="">
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Home
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      About
                    </a>
                  </li>
                  <li>
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Works
                    </a>
                  </li>
                </ul>
              </div>

              <!-- Column 2 -->
              <div class="flex flex-col gap-6">
                <span class="text-[10px] uppercase tracking-[0.2em] text-zinc-500 font-medium font-sans">
                  Recent Works
                </span>
                <ul class="flex flex-col gap-4">
                  <li>
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Space
                    </a>
                  </li>
                  <li class="">
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Botic
                    </a>
                  </li>
                  <li class="">
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Run
                    </a>
                  </li>
                </ul>
              </div>

              <!-- Column 3 -->
              <div class="flex flex-col gap-6">
                <span class="text-[10px] uppercase tracking-[0.2em] text-zinc-500 font-medium font-sans">
                  Social
                </span>
                <ul class="flex flex-col gap-4">
                  <li>
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Instagram
                    </a>
                  </li>
                  <li class="">
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      LinkedIn
                    </a>
                  </li>
                  <li class="">
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Behance
                    </a>
                  </li>
                </ul>
              </div>

              <!-- Column 4 -->
              <div class="flex flex-col gap-6">
                <span class="text-[10px] uppercase tracking-[0.2em] text-zinc-500 font-medium font-sans">
                  Other
                </span>
                <ul class="flex flex-col gap-4">
                  <li class="">
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      Buy template
                    </a>
                  </li>
                  <li class="">
                    <a href="#" class="text-sm text-zinc-400 hover:text-white transition-colors font-sans font-normal">
                      View More
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-col md:flex-row [animation:fadeSlideIn_1s_ease-out_0.5s_both] animate-on-scroll border-white/5 border-t pt-8 gap-x-4 gap-y-4 items-center justify-between">
          <p class="text-xs text-zinc-600 font-medium font-sans" style="">
            © 2024 Kreona Studio. All rights reserved.
          </p>
          <div class="flex gap-6">
            <a href="#" class="text-zinc-500 hover:text-white transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-base" style="" data-icon-set="solar" data-solar="planet-bold-duotone">
                <path fill="currentColor" d="M20 12a8 8 0 1 1-16 0a8 8 0 0 1 16 0" opacity=".5" class=""></path>
                <path fill="currentColor" d="M17.712 5.453c1.047-.193 2.006-.259 2.797-.152c.77.103 1.536.393 1.956 1.064c.446.714.312 1.542-.012 2.258c-.33.728-.918 1.499-1.672 2.268c-1.516 1.547-3.836 3.226-6.597 4.697c-2.763 1.472-5.495 2.484-7.694 2.92c-1.095.217-2.098.299-2.923.201c-.8-.095-1.6-.383-2.032-1.075c-.47-.752-.296-1.63.07-2.379c.375-.768 1.032-1.586 1.872-2.403L4 12.416c0 .219.083.71.168 1.146c.045.23.09.444.123.596c-.652.666-1.098 1.263-1.339 1.756c-.277.567-.208.825-.145.925c.072.116.305.305.937.38c.609.073 1.44.018 2.455-.183c2.02-.4 4.613-1.351 7.28-2.772s4.85-3.015 6.23-4.423c.694-.707 1.15-1.334 1.377-1.836c.233-.515.167-.75.107-.844c-.07-.112-.289-.294-.883-.374c-.542-.072-1.272-.041-2.163.112L16.87 5.656c.338-.101.658-.17.842-.203" class=""></path>
              </svg>
            </a>
            <a href="#" class="text-zinc-500 hover:text-white transition-colors">
              <iconify-icon icon="solar:github-bold-duotone" class="text-base"></iconify-icon>
            </a>
            <a href="#" class="text-zinc-500 hover:text-white transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-base" style="" data-icon-set="solar" data-solar="chat-round-dots-bold-duotone">
                <path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12c0 1.76.413 3.423 1.148 4.898c.195.392.26.84.147 1.263l-.655 2.448a1.43 1.43 0 0 0 1.75 1.751l2.45-.655a1.8 1.8 0 0 1 1.262.147A10.96 10.96 0 0 0 12 23" opacity=".5" class=""></path>
                <path fill="currentColor" d="M10.9 12a1.1 1.1 0 1 0 2.2 0a1.1 1.1 0 0 0-2.2 0m-4.4 0a1.1 1.1 0 1 0 2.2 0a1.1 1.1 0 0 0-2.2 0m8.8 0a1.1 1.1 0 1 0 2.2 0a1.1 1.1 0 0 0-2.2 0" class=""></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </footer>