Nuvora Footer Footer Block - Let's templates
Unlock every premium block and template with All-Access from $20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Footer

Nuvora Footer

A footer block extracted from the Nuvora template, available in Tailwind CSS and Bootstrap.

0 1
Demo Download
Nuvora Footer preview
nuvora.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nuvora Footer | Tailwind CSS UI Block</title>
  <meta name="description" content="A footer block extracted from the Nuvora template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Nuvora, Tailwind CSS template, HTML website template, SaaS template, CRM landing page, customer support platform, pricing page, testimonial carousel">
  <meta name="author" content="Let's templates">
  <link rel="canonical" href="">

  <meta property="og:type" content="product">
  <meta property="og:site_name" content="Let's templates">
  <meta property="og:locale" content="en_US">
  <meta property="og:url" content="">
  <meta property="og:title" content="Nuvora | Tailwind CSS SaaS Template">
  <meta property="og:description" content="A Tailwind CSS SaaS template for customer support and CRM platforms, with a functionality grid, step-by-step onboarding, testimonial carousel, and pricing page.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Nuvora template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Nuvora | Tailwind CSS SaaS Template">
  <meta name="twitter:description" content="A Tailwind CSS SaaS template for customer support and CRM platforms, with a functionality grid, step-by-step onboarding, testimonial carousel, and pricing page.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Nuvora template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            paper: '#f4f2ec',
            ink: '#17181c',
            accent: '#5850ec',
            'accent-soft': '#e8e6fd'
          },
          fontFamily: {
            serif: ['Fraunces', 'ui-serif', 'Georgia', 'serif'],
            sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']
          }
        }
      }
    };
  </script>
  <style>
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
    ::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
    @keyframes page-fade-out { to { opacity: 0; } }
    @keyframes page-fade-in { from { opacity: 0; } }
    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
    [hidden] { display: none !important; }
    [data-count-to] { font-variant-numeric: tabular-nums; }
    .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
    .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      [data-carousel-track] { transition: none !important; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-paper font-sans text-ink antialiased">
<% active_page = "index" %>
<% { "features" => "Features", "pricing" => "Pricing", "index.html#testimonials" => "Testimonials" }.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% [["Nordly", "fa-circle-nodes", "text-blue-500"], ["Halcyon", "fa-cube", "text-ink"], ["Ferro", "fa-bolt", "text-emerald-600"], ["Brightline", "fa-sun", "text-orange-500"], ["Solvane", "fa-star", "text-ink"]].each do |name, icon, color| %>
<% end %>
<% [
        ["1789386932786-c778ad0674c6", "Two colleagues reviewing a laptop in a glass-walled office", "fa-plug", "Connect channels", "Link inbox, chat and social in a few clicks", "border-emerald-300 bg-emerald-50"],
        ["1674049406289-28f07e897fa6", "Person working at a desk with a laptop and coffee", "fa-gear", "Manage interactions", "One shared queue with full customer context", "border-indigo-300 bg-indigo-50"],
        ["1572021335469-31706a17aaef", "Four coworkers smiling around a laptop at a table", "fa-chart-line", "Enhance performance", "Measure, improve and hit your targets", "border-amber-300 bg-amber-50"]
      ].each_with_index do |(image, alt, icon, title, copy, tone), index| %>
<% end %>
<% [
        ["Higher productivity", "Streamline work with intuitive tools built for efficient teamwork.", "fa-fire", "border-indigo-300"],
        ["Seamless teamwork", "Share context and hand off threads without losing history.", "fa-rocket", "border-pink-300"],
        ["Leaner processes", "Schedule replies and route tickets automatically across channels.", "fa-ellipsis", "border-emerald-300"],
        ["Live insight", "Boost output with custom automation and real-time reporting.", "fa-lightbulb", "border-orange-300"]
      ].each_with_index do |(title, copy, icon, border), index| %>
<% end %>
<% [["fa-share-nodes", "Social channels", "All social networks", "+4.1%", "bg-emerald-100 text-emerald-700"], ["fa-envelope", "Email campaigns", "Newsletter sends", "+0.2%", "bg-emerald-100 text-emerald-700"], ["fa-link", "Referral traffic", "Partner links", "-0.4%", "bg-rose-100 text-rose-600"]].each do |icon, title, sub, delta, tone| %>
<% end %>
<% [
            { quote: "Nuvora changed how we handle support. It's simple to use and lets us reach customers in minutes, not hours.", name: "Leslie Alvarez", role: "UI/UX Designer", image: "1580489944761-15a19d654956" },
            { quote: "We finally run one queue instead of five inboxes. First-response time dropped by half in the first month.", name: "Eliana Park", role: "Operations Manager", image: "1758600587839-56ba05596c69" },
            { quote: "The analytics view shows where the team needs help before a backlog even forms.", name: "Priya Anand", role: "Support Lead", image: "1506863530036-1efeddceb993" }
          ].each_with_index do |t, index| %>
<% end %>
<% 3.times do |i| %>
<% end %>
<!-- block:start footer -->
  <footer class="bg-[#e6e5df] px-4 pb-6 pt-16 lg:px-6">
    <div class="mx-auto max-w-7xl rounded-3xl bg-ink px-8 py-12 text-paper md:px-14">
      <div class="grid gap-10 md:grid-cols-[1.6fr_1fr_1fr_1.4fr]">
        <div>
          <a href="index.html" class="flex items-center gap-2 font-serif text-xl font-semibold">
            <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/10"><i class="fa-solid fa-diamond text-xs" aria-hidden="true"></i></span>
            Nuvora
          </a>
          <p class="mt-4 max-w-sm font-serif text-2xl text-white/80">Every conversation in one place. Pick your plan and start today.</p>
        </div>
        <div class="text-sm">
          <p class="font-semibold">Socials</p>
          <div class="mt-4 flex flex-col gap-3 text-white/60">
            <a href="https://facebook.com" class="hover:text-white">Facebook</a>
            <a href="https://linkedin.com" class="hover:text-white">LinkedIn</a>
            <a href="https://instagram.com" class="hover:text-white">Instagram</a>
            <a href="https://x.com" class="hover:text-white">X</a>
          </div>
        </div>
        <div class="text-sm">
          <p class="font-semibold">Product</p>
          <div class="mt-4 flex flex-col gap-3 text-white/60">
            <a href="features.html" class="hover:text-white">Features</a>
            <a href="pricing.html" class="hover:text-white">Pricing</a>
            <a href="contact.html" class="hover:text-white">Contact</a>
          </div>
        </div>
        <div class="text-sm">
          <p class="text-white/70">Get a free consultation and see how to simplify your customer relationships.</p>
          <form class="mt-8 flex items-center gap-3 border-b border-white/30 pb-2" onsubmit="event.preventDefault();">
            <label for="footer-email" class="sr-only">Email address</label>
            <input id="footer-email" type="email" required placeholder="Your email" class="w-full bg-transparent placeholder:text-white/50 focus:outline-none">
            <button type="submit" class="shrink-0 font-semibold">Subscribe</button>
          </form>
        </div>
      </div>
      <p class="mt-14 text-xs text-white/50">&copy; <span data-current-year>2026</span> Nuvora. All rights reserved.</p>
    </div>
  </footer>
  <!-- block:end footer -->
<script>
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    if (menuToggle && mobileMenu) {
      menuToggle.addEventListener('click', () => {
        const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
        menuToggle.setAttribute('aria-expanded', String(!expanded));
        mobileMenu.hidden = expanded;
      });
    }

    document.querySelectorAll('[data-carousel]').forEach((carousel) => {
      const track = carousel.querySelector('[data-carousel-track]');
      const dots = carousel.querySelectorAll('[data-carousel-dot]');
      const count = track.children.length;
      let index = 0;
      const goTo = (next) => {
        index = (next + count) % count;
        track.style.transform = `translateX(-${index * 100}%)`;
        dots.forEach((dot, i) => {
          dot.classList.toggle('bg-ink', i === index);
          dot.classList.toggle('bg-ink/20', i !== index);
          dot.setAttribute('aria-current', String(i === index));
        });
      };
      carousel.querySelector('[data-carousel-prev]').addEventListener('click', () => goTo(index - 1));
      carousel.querySelector('[data-carousel-next]').addEventListener('click', () => goTo(index + 1));
      dots.forEach((dot) => dot.addEventListener('click', () => goTo(Number(dot.dataset.carouselDot))));
    });

    document.querySelectorAll('[data-current-year]').forEach((el) => { el.textContent = new Date().getFullYear(); });

    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!reduceMotion && !navigator.webdriver && 'IntersectionObserver' in window) {
      document.body.classList.add('reveal-ready');
      const revealObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add('is-visible');
          revealObserver.unobserve(entry.target);
        });
      }, { threshold: 0.15 });
      document.querySelectorAll('[data-reveal]').forEach((el) => revealObserver.observe(el));

      const countObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          const el = entry.target;
          const target = parseInt(el.dataset.countTo, 10);
          const start = performance.now();
          const step = (now) => {
            const progress = Math.min((now - start) / 700, 1);
            el.textContent = Math.round(progress * target).toLocaleString('en-US');
            if (progress < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
          countObserver.unobserve(el);
        });
      }, { threshold: 0.4 });
      document.querySelectorAll('[data-count-to]').forEach((el) => countObserver.observe(el));
    }
  </script>
</body>
</html>

From this template

Nuvora screenshot

Startup

Nuvora

Unlimited access to all products

Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.

$20 / 3 months or $60 / year
Get Unlimited Access