Footer with calender
Category: Footers
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Whenevr - Footer Component</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@1,600&display=swap" rel="stylesheet">
<style>
#app-root {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply bg-neutral-background text-brand-primary antialiased;
}
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(255, 255, 255)',
'neutral-background': 'rgb(0, 0, 0)',
'text-dim': 'rgb(124, 124, 124)',
},
fontFamily: {
'primary': ['Inter', 'sans-serif'],
'serif-custom': ['Source Serif 4', 'serif'],
},
letterSpacing: {
'tightest': '-0.08em',
'heading': '-0.07em',
}
}
}
}</script></head>
<body id="app-root" class="font-primary">
<main><footer class="w-full bg-black py-10 px-9 flex flex-col items-center justify-center gap-12 overflow-hidden min-h-[668px]">
<div class="max-w-[1200px] w-full flex flex-col items-center justify-center gap-8">
<!-- Top Section -->
<div class="w-full flex flex-col md:flex-row justify-center items-start gap-12 md:gap-0">
<!-- Left Content -->
<div class="flex-1 flex flex-col justify-center items-start gap-8">
<!-- Logo -->
<div class="relative flex items-center gap-1">
<h2 class="font-serif-custom italic font-semibold text-[30px] leading-none tracking-tightest text-white">
whenevr
</h2>
<span class="text-[14px] font-semibold leading-none text-white translate-y-[-8px]">®</span>
</div>
<!-- Main Text -->
<div class="flex flex-col gap-6">
<h2 class="text-white text-[48px] md:text-[82px] font-semibold leading-[1.03] tracking-heading max-w-[677px]">
Design <span class="font-serif-custom italic tracking-tightest">doesn't</span> need to be complicated.
</h2>
<p class="text-text-dim text-xl font-medium leading-relaxed tracking-[-1px] max-w-[547px]">
Book a quick call and get a clear look at how Whenevr works, what’s included, and whether it fits your pace.
</p>
</div>
<!-- CTA Button -->
<div class="pt-2">
<a href="#pricing" class="inline-flex items-center justify-center bg-white text-black px-[30px] py-[18px] rounded-full text-[18px] font-semibold tracking-[-0.72px] transition-transform hover:scale-105">
See Pricing
</a>
</div>
</div>
<!-- Right Content (Cal.com Embed) -->
<div class="w-full md:w-[400px] h-[533px] bg-neutral-900/20 rounded-2xl overflow-hidden border border-white/5">
<div id="my-cal-inline" class="w-full h-full overflow-scroll"></div>
</div>
</div>
<!-- Bottom Section -->
<div class="w-full border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="text-text-dim text-[14px] font-medium tracking-[-0.56px]">
© 2025 Whenevr. Created by
<a href="https://hxmzaehsan.com" target="_blank" class="hover:text-white transition-colors">Hamza Ehsan.</a>
</div>
<div class="flex items-center gap-6">
<a href="./thank-you" class="text-text-dim hover:text-white text-[14px] font-medium tracking-[-0.56px] transition-colors">Thank You</a>
<a href="./privacy-policy" class="text-text-dim hover:text-white text-[14px] font-medium tracking-[-0.56px] transition-colors">Privacy Policy</a>
<a href="./terms-of-service" class="text-text-dim hover:text-white text-[14px] font-medium tracking-[-0.56px] transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Cal.com Embed Logic
(function (C, A, L) {
let p = function (a, ar) { a.q.push(ar); };
let d = C.document;
C.Cal = C.Cal || function () {
let cal = C.Cal;
let ar = arguments;
if (!cal.loaded) {
cal.ns = {};
cal.q = cal.q || [];
d.head.appendChild(d.createElement("script")).src = A;
cal.loaded = true;
}
if (ar[0] === L) {
const api = function () { p(api, arguments); };
const namespace = ar[1];
api.q = api.q || [];
if (typeof namespace === "string") {
cal.ns[namespace] = cal.ns[namespace] || api;
p(cal.ns[namespace], ar);
p(cal, ["initNamespace", namespace]);
} else p(cal, ar);
return;
}
p(cal, ar);
};
})(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init", "demo", { origin: "https://cal.com" });
Cal.ns.demo("inline", {
elementOrSelector: "#my-cal-inline",
config: { "layout": "month_view", "theme": "dark" },
calLink: "hxmzaehsan/demo"
});
Cal.ns.demo("ui", {
theme: "dark",
cssVarsPerTheme: {
dark: { "cal-brand": "#ffffff" }
},
hideEventTypeDetails: true,
layout: "month_view"
});
});
</script></main>
</body></html> change the content
Created by: LandingHero
