Free
About
Clinova About
A about block extracted from the Clinova template, available in Tailwind CSS and Bootstrap.
0
3
clinova.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>Clinova About | Tailwind CSS UI Block</title>
<meta name="description" content="A about block extracted from the Clinova template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Clinova, Tailwind CSS template, HTML website template, health template, medical clinic, family doctor, preventive care, doctor profiles, responsive healthcare design">
<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="Clinova | Tailwind CSS Health Clinic Template">
<meta property="og:description" content="A calm, editorial Tailwind CSS health template for clinics, family practices, and preventive care providers with doctor profiles, health programs, membership pricing, and online booking.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Clinova template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Clinova | Tailwind CSS Health Clinic Template">
<meta name="twitter:description" content="A calm, editorial Tailwind CSS health template for clinics, family practices, and preventive care providers with doctor profiles, health programs, membership pricing, and online booking.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Clinova 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=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: '#0e1a3a',
teal: '#4b7b8a',
mist: '#f4f4f3',
frame: '#eeeff1',
ash: '#9b9b9b'
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
display: ['Archivo', '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; }
.font-display { letter-spacing: -0.035em; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
details > summary::-webkit-details-marker { display: none; }
[data-word] { transition: color .35s ease; }
.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-word] { transition: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-frame font-sans text-navy antialiased overflow-x-hidden">
<%
nav_links = [["Services", "services.html"], ["Doctors", "doctors.html"], ["Health Programs", "health-programs.html"], ["Blog", "blog.html"]]
approach = "Lasting health stands on three things: understanding your body through regular screening, building everyday habits that protect it, and having a care team you can reach whenever you need them. Our promise is simple: check, prevent, thrive, a clear path to a longer, healthier life."
pillars = [
["Check", "https://images.unsplash.com/photo-1666887360388-93e684b6474a?auto=format&fit=crop&w=600&q=80", "Doctor in a white coat holding a stethoscope chest piece"],
["Prevent", "https://images.unsplash.com/photo-1761315600943-d8a5bb0c499f?auto=format&fit=crop&w=600&q=80", "Grilled chicken salad with avocado and tomatoes in a dark bowl"],
["Thrive", "https://images.unsplash.com/photo-1742522450616-a2cf0cba1274?auto=format&fit=crop&w=600&q=80", "Three generations of a family embracing in an autumn park"]
]
values = [
{ icon: "fa-gear", title: "Evidence-led", text: "Each recommendation follows current clinical guidelines, so the care you get is proven, measured and suited to you.", image: "https://images.unsplash.com/photo-1758691462123-8a17ae95d203?auto=format&fit=crop&w=1400&q=80", alt: "Doctor checking a patient's blood pressure with a stethoscope" },
{ icon: "fa-hand-holding-heart", title: "Compassion", text: "Longer appointments, plain language and a team that remembers your story from one visit to the next.", image: "https://images.unsplash.com/photo-1780461159717-04ebb5eb3293?auto=format&fit=crop&w=1400&q=80", alt: "Medical professional gently holding a patient's hand" },
{ icon: "fa-circle-half-stroke", title: "Accuracy", text: "In-house labs and calibrated equipment mean results you can trust, usually back within a day.", image: "https://images.unsplash.com/photo-1606206591513-adbfbdd7a177?auto=format&fit=crop&w=1400&q=80", alt: "Rows of blood collection tubes with colourful caps in a lab rack" }
]
quotes = ["A doctor who hears me!", "Quick and thorough!", "I felt looked after", "Honestly life-changing!", "No waiting room", "Trusted"]
faqs = [
["Do I need a referral to book?", "No. You can book any general appointment directly online or by phone. Specialist visits may need a note from one of our GPs, which we arrange for you."],
["Does my insurance cover Clinova?", "We work with most major insurers and offer direct billing. If your plan is not listed, we provide itemised receipts for reimbursement."],
["How do you protect my medical records?", "Records are encrypted, stored in certified data centres and only visible to the clinicians treating you. You can download or delete your data any time."],
["Can I speak to a doctor online first?", "Yes. Video consults run from 8am to 9pm, and the doctor can book any tests you need before your in-person visit."],
["What does the yearly check-up include?", "Blood work, heart and blood pressure screening, body composition, a lifestyle review and a 30-minute results consult with your doctor."]
]
doctors = [
{ name: "Dr. Selin Hart", role: "General Practitioner", image: "https://images.unsplash.com/photo-1643297654416-05795d62e39c?auto=format&fit=crop&w=900&q=80", alt: "Smiling doctor in a white coat holding a stethoscope", slug: "selin-hart" },
{ name: "Dr. Marcus Oyelaran", role: "Cardiologist", image: "https://images.unsplash.com/photo-1758691463582-11aea602cd4a?auto=format&fit=crop&w=900&q=80", alt: "Smiling doctor with glasses and stethoscope standing with arms crossed", slug: "marcus-oyelaran" },
{ name: "Lucía Ferreira", role: "Nutritionist", image: "https://images.unsplash.com/photo-1623854767648-e7bb8009f0db?auto=format&fit=crop&w=900&q=80", alt: "Smiling clinician in a white coat with a stethoscope outdoors", slug: "lucia-ferreira" },
{ name: "Dr. Arjun Mehta", role: "Pediatrician", image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=900&q=80", alt: "Doctor in glasses and a white coat with arms crossed against a grey wall", slug: "arjun-mehta" }
]
footer_links = [
[["Check-ups", "services.html#checkups"], ["Telehealth", "services.html#telehealth"], ["Vaccination", "services.html#vaccination"], ["Lab tests", "services.html#labs"]],
[["About", "index.html#approach"], ["Doctors", "doctors.html"], ["Programs", "health-programs.html"], ["Blog", "blog.html"]],
[["Membership", "membership.html"], ["Contact", "contact.html"], ["FAQs", "index.html#faq"], ["Book a visit", "contact.html"]]
]
%>
<% nav_links.each do |label, href| %>
<% end %>
<% nav_links.each do |label, href| %>
<% end %>
<!-- block:start about -->
<section id="approach" class="grid gap-8 px-5 pt-20 md:grid-cols-12 md:px-[74px] md:pt-28">
<p class="text-[11px] uppercase tracking-[0.15em] text-ash md:col-span-5">Our approach</p>
<div class="md:col-span-7">
<p class="font-display text-[26px] font-medium leading-[1.2] md:text-[34px]" data-word-reveal>
<% approach.split(" ").each_with_index do |word, index| %><span data-word class="<%= index < 17 ? 'text-navy' : 'text-ash' %>"><%= word %></span> <% end %>
</p>
</div>
</section>
<div class="px-5 pt-12 text-center">
<a href="services.html" class="inline-flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.12em] hover:text-teal">Learn more <i class="fa-solid fa-arrow-right-long"></i></a>
</div>
<!-- block:end about -->
<script>
document.querySelectorAll("[data-menu-toggle]").forEach((button) => {
const menu = document.getElementById(button.getAttribute("aria-controls"));
if (!menu) return;
button.addEventListener("click", () => {
const open = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!open));
menu.classList.toggle("hidden", open);
});
});
document.querySelectorAll("details").forEach((item) => {
const summary = item.querySelector("summary");
item.addEventListener("toggle", () => summary?.setAttribute("aria-expanded", String(item.open)));
});
document.querySelectorAll("[data-word-reveal]").forEach((paragraph) => {
const words = [...paragraph.querySelectorAll("[data-word]")];
if (navigator.webdriver || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const paint = () => {
const rect = paragraph.getBoundingClientRect();
const progress = Math.min(1, Math.max(0, (innerHeight * 0.85 - rect.top) / (rect.height + innerHeight * 0.35)));
const lit = Math.round(words.length * progress);
words.forEach((word, index) => {
word.classList.toggle("text-navy", index < Math.max(lit, 17));
word.classList.toggle("text-ash", index >= Math.max(lit, 17));
});
};
addEventListener("scroll", paint, { passive: true });
paint();
});
document.querySelectorAll("[data-values]").forEach((section) => {
const images = [...section.querySelectorAll("[data-value-image]")];
const panels = [...section.querySelectorAll("[data-value-panel]")];
const tabs = [...section.querySelectorAll("[data-value-tab]")];
let index = 0;
const show = (next) => {
index = (next + panels.length) % panels.length;
images.forEach((image, i) => image.classList.toggle("opacity-0", i !== index));
panels.forEach((panel, i) => { panel.hidden = i !== index; });
tabs.forEach((tab, i) => tab.setAttribute("aria-selected", String(i === index)));
};
tabs.forEach((tab) => tab.addEventListener("click", () => show(Number(tab.dataset.valueTab))));
section.querySelector("[data-value-prev]")?.addEventListener("click", () => show(index - 1));
section.querySelector("[data-value-next]")?.addEventListener("click", () => show(index + 1));
});
document.querySelectorAll("[data-carousel]").forEach((carousel) => {
const track = carousel.querySelector("[data-carousel-track]");
const slides = [...track.children];
let index = 0;
const perView = () => Math.max(1, Math.round(track.clientWidth / slides[0].clientWidth));
const maxIndex = () => Math.max(0, slides.length - perView());
const render = () => { track.style.transform = `translateX(-${index * slides[0].clientWidth}px)`; };
const go = (next) => { const max = maxIndex(); index = next > max ? 0 : next < 0 ? max : next; render(); };
carousel.querySelector("[data-carousel-prev]")?.addEventListener("click", () => go(index - 1));
carousel.querySelector("[data-carousel-next]")?.addEventListener("click", () => go(index + 1));
addEventListener("resize", () => go(Math.min(index, maxIndex())));
});
document.querySelectorAll("[data-callback]").forEach((form) => {
form.addEventListener("submit", (event) => {
event.preventDefault();
const note = form.parentElement.querySelector("[data-callback-note]");
if (note) note.hidden = false;
form.reset();
});
});
(() => {
const counters = document.querySelectorAll("[data-count-to]");
if (!counters.length || navigator.webdriver || matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(({ isIntersecting, target }) => {
if (!isIntersecting) return;
observer.unobserve(target);
const end = Number(target.dataset.countTo);
const suffix = target.dataset.countSuffix || "";
const start = performance.now();
const tick = (now) => {
const progress = Math.min((now - start) / 1200, 1);
target.textContent = Math.round(end * progress).toLocaleString() + suffix;
if (progress < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
});
});
counters.forEach((counter) => observer.observe(counter));
})();
(() => {
const items = document.querySelectorAll("[data-reveal]");
const skip = navigator.webdriver || !("IntersectionObserver" in window) || matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!items.length || skip) return;
document.documentElement.classList.add("reveal-ready");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
});
}, { rootMargin: "0px 0px -10% 0px" });
items.forEach((item) => observer.observe(item));
})();
</script>
</body>
</html>
From this template
Health & Fitness
Clinova
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