Free
Hero
Kinetiq Hero
A hero block extracted from the Kinetiq template, available in Tailwind CSS and Bootstrap.
0
3
kinetiq.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>Kinetiq Hero | Tailwind CSS UI Block</title>
<meta name="description" content="A hero block extracted from the Kinetiq template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Kinetiq, Tailwind CSS template, HTML website template, consulting template, startup accelerator website, innovation consultancy, venture studio, corporate innovation, team page, newsletter signup">
<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="Kinetiq | Tailwind CSS Consulting Template">
<meta property="og:description" content="A bold Tailwind CSS template for startup accelerators and innovation consultancies, with chrome-tube hero art, count-up stats and a filterable team grid.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Kinetiq template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Kinetiq | Tailwind CSS Consulting Template">
<meta name="twitter:description" content="A bold Tailwind CSS template for startup accelerators and innovation consultancies, with chrome-tube hero art, count-up stats and a filterable team grid.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Kinetiq template preview">
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: { lime: { DEFAULT: '#e2f43a', soft: '#f3fbb8' }, coal: { DEFAULT: '#222528', soft: '#2c3035', line: '#3a3f45' } },
fontFamily: { sans: ['Inter', 'sans-serif'], display: ['"Big Shoulders Display"', '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; }
[hidden] { display: none !important; }
.tube { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .18)); }
.neon { filter: saturate(1.4) hue-rotate(-12deg); }
.glow { text-shadow: 0 0 28px rgba(226, 244, 58, .45); }
.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; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-coal font-sans text-white antialiased">
<% active_page = "index" %>
<% nav = { "work" => "Our work", "about" => "About", "contact" => "Contact" } %>
<% audiences = { "startups" => "For startups", "corporates" => "For corporates" } %>
<% nav.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% audiences.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% { "index" => "Home" }.merge(nav).merge(audiences).each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<!-- block:start hero -->
<section class="relative overflow-hidden bg-white text-coal" data-draw>
<svg class="tube pointer-events-none absolute -left-24 top-12 w-64 md:-left-10 md:top-20 md:w-80 lg:w-[22rem]" viewBox="0 0 320 240" fill="none" aria-hidden="true">
<defs><linearGradient id="chrome-a" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fafafa"/><stop offset=".35" stop-color="#c9ccd1"/><stop offset=".55" stop-color="#f5f5f5"/><stop offset=".8" stop-color="#9ea3aa"/><stop offset="1" stop-color="#e6e7ea"/></linearGradient></defs>
<path d="M-10 70C60 40 170 30 200 70c30 40-60 90-110 60S80 40 160 40s150 70 120 140c-20 45-100 50-150 20" stroke="url(#chrome-a)" stroke-width="30" stroke-linecap="round" data-draw-path/>
</svg>
<svg class="tube pointer-events-none absolute -right-28 bottom-10 w-64 md:-right-6 md:top-24 md:w-80 lg:w-[22rem]" viewBox="0 0 300 300" fill="none" aria-hidden="true">
<defs><linearGradient id="chrome-b" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f4f4f5"/><stop offset=".4" stop-color="#b9bdc4"/><stop offset=".6" stop-color="#fbfbfb"/><stop offset=".85" stop-color="#a3a8ae"/><stop offset="1" stop-color="#e4e5e8"/></linearGradient></defs>
<path d="M150 20c80-20 120 40 80 80s-140 40-150 110c-8 60 80 90 140 50 50-34 30-100-20-110" stroke="url(#chrome-b)" stroke-width="30" stroke-linecap="round" data-draw-path/>
</svg>
<div class="relative mx-auto flex max-w-3xl flex-col items-center px-5 py-24 text-center md:py-32">
<h1 class="font-display text-6xl font-extrabold uppercase leading-[0.92] tracking-tight md:text-8xl" data-reveal>We spark the companies of what comes next</h1>
<p class="mt-8 max-w-md text-coal/60" data-reveal style="--reveal-delay: 100ms">We help bold founders build and scale, and we help established teams get ready for whatever the market throws at them.</p>
<a href="startups.html" class="mt-10 bg-lime px-8 py-4 text-xs font-bold uppercase tracking-wider text-coal transition hover:bg-coal hover:text-lime" data-reveal style="--reveal-delay: 200ms">Let's build it</a>
</div>
</section>
<!-- block:end hero -->
<script>
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
const watchMotion = !reducedMotion && !navigator.webdriver && 'IntersectionObserver' in window;
document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
const menu = document.getElementById(button.getAttribute('aria-controls'));
button.addEventListener('click', () => {
const open = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!open));
menu.classList.toggle('hidden', open);
});
});
document.querySelectorAll('[data-draw]').forEach((root) => {
if (!watchMotion) return;
root.querySelectorAll('[data-draw-path]').forEach((path, index) => {
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
requestAnimationFrame(() => requestAnimationFrame(() => {
path.style.transition = `stroke-dashoffset .7s ease-out ${index * 150}ms`;
path.style.strokeDashoffset = 0;
}));
});
});
document.querySelectorAll('[data-team]').forEach((root) => {
const chips = [...root.querySelectorAll('[data-filter]')];
chips.forEach((chip) => chip.addEventListener('click', () => {
chips.forEach((other) => other.setAttribute('aria-pressed', String(other === chip)));
root.querySelectorAll('[data-category]').forEach((item) => { item.hidden = chip.dataset.filter !== 'all' && item.dataset.category !== chip.dataset.filter; });
}));
});
document.querySelectorAll('[data-newsletter]').forEach((form) => {
const status = form.parentElement.querySelector('[data-form-status]');
form.addEventListener('submit', (event) => {
event.preventDefault();
const email = form.elements.email;
if (!email.checkValidity()) { status.textContent = 'Please enter a valid email address.'; email.focus(); return; }
status.textContent = "You're on the list — see you next month.";
form.reset();
});
});
document.querySelectorAll('[data-count]').forEach((el) => {
const stat = el.closest('[data-stat]');
const target = Number(el.dataset.count);
const decimals = el.dataset.count.includes('.') ? 1 : 0;
const format = (value) => (decimals ? value.toFixed(1) : Math.round(value).toLocaleString('en-US'));
if (!watchMotion) { stat.classList.replace('text-white/40', 'text-lime'); return; }
const observer = new IntersectionObserver(([entry]) => {
if (!entry.isIntersecting) return;
observer.disconnect();
const start = performance.now();
const tick = (now) => { const t = Math.min(1, (now - start) / 700); el.textContent = format(target * t); if (t < 1) requestAnimationFrame(tick); else stat.classList.replace('text-white/40', 'text-lime'); };
requestAnimationFrame(tick);
});
observer.observe(el);
});
if (watchMotion) {
document.documentElement.classList.add('reveal-ready');
const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
}), { threshold: 0.15 });
document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
}
</script>
</body>
</html>
From this template
Professional Services
Kinetiq
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