Code · Live Preview
Componenthtml
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agency CTA Section</title>
<!-- Tailwind CSS v4 CDN (browser build — no config file needed) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Remix Icons -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
<!-- Tailwind v4 CSS-first theme config (replaces tailwind.config.js) -->
<style type="text/tailwindcss">
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-sans: 'Inter', sans-serif;
--animate-float-slow: float 6s ease-in-out infinite;
--animate-pulse-glow: pulseGlow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
</style>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #09090b;
color: #f4f4f5;
overflow-x: hidden;
}
/* Glow orb follow effect */
.glow-orb {
position: absolute;
border-radius: 9999px;
pointer-events: none;
transition: transform 0.2s ease-out;
will-change: transform;
filter: blur(80px);
opacity: 0.4;
}
/* Service card hover lift */
.service-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
transform: translateY(-6px);
border-color: rgba(99, 102, 241, 0.5);
box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.2);
}
.service-card:hover .service-icon {
background: rgba(99, 102, 241, 0.15);
color: #a5b4fc;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 md:p-8">
<!-- ===== CTA SECTION ===== -->
<section class="relative w-full max-w-7xl mx-auto my-16">
<!-- Background glow orbs (cursor‑linked) -->
<div id="glow-orb-1" class="glow-orb w-96 h-96 bg-indigo-600/30 top-0 left-0"></div>
<div id="glow-orb-2" class="glow-orb w-72 h-72 bg-purple-600/25 bottom-0 right-0"></div>
<!-- Main container -->
<div class="relative rounded-[2.5rem] bg-zinc-900/80 backdrop-blur-2xl border border-zinc-800/80 shadow-2xl overflow-hidden">
<!-- Inner grid pattern overlay -->
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cpattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"%3E%3Cpath d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="100%25" height="100%25" fill="url(%23grid)"/%3E%3C/svg%3E')] opacity-50 pointer-events-none"></div>
<!-- Content wrapper -->
<div class="relative z-10 p-8 md:p-12 lg:p-16 text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-sm font-medium mb-6">
<span class="relative flex h-2.5 w-2.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-indigo-500"></span>
</span>
We're currently accepting new projects
</div>
<!-- Main Heading -->
<h2 class="text-3xl md:text-5xl font-bold tracking-tight mb-4 bg-gradient-to-r from-white via-zinc-200 to-zinc-400 bg-clip-text text-transparent">
Ready to Launch Your Next Big Idea?
</h2>
<!-- Subtext -->
<p class="text-zinc-400 text-base md:text-lg max-w-2xl mx-auto mb-10">
From pixels to performance — we craft websites, apps, and digital experiences that drive real business growth. Let's turn your vision into reality.
</p>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-14">
<a href="#" class="group relative inline-flex items-center justify-center px-8 py-4 font-semibold text-white bg-indigo-600 rounded-full overflow-hidden transition-all duration-300 hover:bg-indigo-500 hover:shadow-lg hover:shadow-indigo-600/30 w-full sm:w-auto">
<span class="relative z-10">Start Your Project</span>
<i class="ri-arrow-right-line relative z-10 ml-2 transition-transform duration-300 group-hover:translate-x-1"></i>
<span class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
</a>
<a href="#" class="group inline-flex items-center justify-center px-8 py-4 font-semibold text-zinc-300 bg-zinc-800/80 backdrop-blur rounded-full border border-zinc-700 hover:border-zinc-500 hover:bg-zinc-800 transition-all duration-300 w-full sm:w-auto">
<i class="ri-play-circle-line mr-2 text-lg"></i>
View Our Work
</a>
</div>
<!-- Service Highlights (Small Cards) -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-left">
<!-- Web Design -->
<div class="service-card bg-zinc-950/60 backdrop-blur border border-zinc-800 rounded-2xl p-5">
<div class="service-icon w-10 h-10 rounded-lg bg-zinc-800/80 text-indigo-400 flex items-center justify-center mb-3 transition-colors duration-300">
<i class="ri-layout-4-line text-xl"></i>
</div>
<h3 class="text-white font-semibold text-sm mb-1">Web Design</h3>
<p class="text-zinc-500 text-xs leading-relaxed">Responsive & conversion-focused</p>
</div>
<!-- App Development -->
<div class="service-card bg-zinc-950/60 backdrop-blur border border-zinc-800 rounded-2xl p-5">
<div class="service-icon w-10 h-10 rounded-lg bg-zinc-800/80 text-indigo-400 flex items-center justify-center mb-3 transition-colors duration-300">
<i class="ri-smartphone-line text-xl"></i>
</div>
<h3 class="text-white font-semibold text-sm mb-1">App Development</h3>
<p class="text-zinc-500 text-xs leading-relaxed">iOS, Android & cross-platform</p>
</div>
<!-- Digital Marketing -->
<div class="service-card bg-zinc-950/60 backdrop-blur border border-zinc-800 rounded-2xl p-5">
<div class="service-icon w-10 h-10 rounded-lg bg-zinc-800/80 text-indigo-400 flex items-center justify-center mb-3 transition-colors duration-300">
<i class="ri-megaphone-line text-xl"></i>
</div>
<h3 class="text-white font-semibold text-sm mb-1">Marketing</h3>
<p class="text-zinc-500 text-xs leading-relaxed">SEO, PPC, content & social</p>
</div>
<!-- Branding & Design -->
<div class="service-card bg-zinc-950/60 backdrop-blur border border-zinc-800 rounded-2xl p-5">
<div class="service-icon w-10 h-10 rounded-lg bg-zinc-800/80 text-indigo-400 flex items-center justify-center mb-3 transition-colors duration-300">
<i class="ri-palette-line text-xl"></i>
</div>
<h3 class="text-white font-semibold text-sm mb-1">Branding</h3>
<p class="text-zinc-500 text-xs leading-relaxed">Logo, identity & graphic design</p>
</div>
</div>
</div>
</div>
</section>
<!-- JavaScript for ambient glow following cursor -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const orb1 = document.getElementById('glow-orb-1');
const orb2 = document.getElementById('glow-orb-2');
// Only enable on devices with fine pointer (desktop)
const isDesktop = window.matchMedia('(pointer: fine)').matches;
if (!isDesktop) return;
const handleMouseMove = (e) => {
const { clientX, clientY } = e;
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// Calculate offset from center (range -0.5 to 0.5)
const offsetX = (clientX - centerX) / centerX;
const offsetY = (clientY - centerY) / centerY;
// Move orbs with a larger factor for depth
orb1.style.transform = `translate(${offsetX * 60}px, ${offsetY * 60}px)`;
orb2.style.transform = `translate(${offsetX * -40}px, ${offsetY * -40}px)`;
};
// Smooth initial position
orb1.style.transition = 'transform 0.3s ease-out';
orb2.style.transition = 'transform 0.3s ease-out';
window.addEventListener('mousemove', handleMouseMove);
});
</script>
</body>
</html>Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
A dark-themed agency CTA section built with HTML, Tailwind CSS v4, and vanilla JavaScript. Features two ambient glow orbs that follow the mouse cursor on desktop for a depth effect, a pulsing "accepting projects" badge, gradient heading, two CTA buttons, and a 4-card service highlights grid below. Each service card lifts on hover with an indigo border glow and icon color shift. The glow orbs move in opposite directions relative to cursor position using a parallax offset calculation - orb 1 follows the cursor, orb 2 moves away from it. Only activates on desktop using a pointer: fine media query check so it does not run on touch devices. Uses Tailwind CSS v4 browser build - no config file needed, theme is defined directly in a <style type="text/tailwindcss"> block. Single HTML file, no build step, open in browser and it works.
Added Aug 31, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation