<div class="spotlight-wrapper">
<div class="spotlight-header">
<h2>Next-Gen Platform</h2>
<p>Hover over the features below to reveal the interactive spotlight glow.</p>
</div>
<div class="spotlight-grid" id="spotlight-grid">
<div class="spotlight-card">
<div class="card-inner">
<div class="icon-circle">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
</div>
<h3>Lightning Fast</h3>
<p>Built with modern APIs and zero heavy dependencies so your site loads instantly.</p>
</div>
</div>
<div class="spotlight-card">
<div class="card-inner">
<div class="icon-circle">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
</div>
<h3>Ultra Secure</h3>
<p>Your data is protected by industry-leading encryption and security standards.</p>
</div>
</div>
<div class="spotlight-card">
<div class="card-inner">
<div class="icon-circle">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
</div>
<h3>Global Reach</h3>
<p>Deploy your application to a global edge network with just a single click.</p>
</div>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 40px 20px;
}
.spotlight-wrapper {
width: 100%;
max-width: 1000px;
}
.spotlight-header {
text-align: center;
margin-bottom: 50px;
}
.spotlight-header h2 {
color: #f8fafc;
font-size: 2.5rem;
margin: 0 0 10px 0;
}
.spotlight-header p {
color: #94a3b8;
font-size: 1.125rem;
margin: 0;
}
.spotlight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
position: relative;
}
.spotlight-card {
position: relative;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 2px;
overflow: hidden;
}
/* The radial gradient glow that follows the mouse */
.spotlight-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(400px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(59, 130, 246, 0.4), transparent 40%);
z-index: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.spotlight-grid:hover .spotlight-card::before {
opacity: 1;
}
.card-inner {
position: relative;
background: #0f172a;
border-radius: 14px;
height: 100%;
padding: 30px;
z-index: 1;
display: flex;
flex-direction: column;
}
.icon-circle {
width: 48px;
height: 48px;
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.card-inner h3 {
color: #f8fafc;
margin: 0 0 12px 0;
font-size: 1.25rem;
}
.card-inner p {
color: #94a3b8;
margin: 0;
line-height: 1.6;
}
const grid = document.getElementById("spotlight-grid");
const cards = document.querySelectorAll(".spotlight-card");
grid.addEventListener("mousemove", function(e) {
cards.forEach(function(card) {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// Pass the coordinates directly to CSS variables
card.style.setProperty("--mouse-x", x + "px");
card.style.setProperty("--mouse-y", y + "px");
});
});
